feat: filters on the subscriptions page

feat: search subscriptions by name

endpoints/subscriptions/get.php

@@ -24,10 +24,30 @@
           if ($sort == "price" || $sort == "id") {
             $order = "DESC";
           }
-          if (in_array($sort, $allowedSortCriteria)) {
+          if (!in_array($sort, $allowedSortCriteria)) {
-            $sql = "SELECT * FROM subscriptions ORDER BY $sort $order, inactive ASC";
+            $sort = "next_payment";
           }
         }
+
+        $sql = "SELECT * FROM subscriptions WHERE 1=1";
+
+        if (isset($_GET['category']) && $_GET['category'] != "") {
+          $category = $_GET['category'];
+          $sql .= " AND category_id = $category";
+        }
+
+        if (isset($_GET['payment']) && $_GET['payment'] != "") {
+          $payment = $_GET['payment'];
+          $sql .= " AND payment_method_id = $payment";
+        }
+
+        if (isset($_GET['member']) && $_GET['member'] != "") {
+          $member = $_GET['member'];
+          $sql .= " AND payer_user_id = $member";
+        }
+
+        $sql .= " ORDER BY $sort $order, inactive ASC";
+
         
         $result = $db->query($sql);
         if ($result) {
@@ -76,16 +96,16 @@
         
         if (count($subscriptions) == 0) {
             ?>
-            <div class="empty-page">
+              <div class="no-matching-subscriptions">
-                <img src="images/siteimages/empty.png" alt="<?= translate('empty_page', $i18n) ?>" />
+                  <p>
-                <p>
+                    <?= translate('no_matching_subscriptions', $i18n) ?>
-                  <?= translate('no_subscriptions_yet', $i18n) ?>
+                  </p>
-                </p>
+                  <button class="button" onClick="clearFilters()">
-                <button class="button" onClick="addSubscription()">
+                    <span clasS="fa-solid fa-minus-circle"></span>
-                  <img class="button-icon" src="images/siteicons/plusicon.png">
+                    <?= translate('clear_filters', $i18n) ?>
-                  <?= translate('add_first_subscription', $i18n) ?>
+                  </button>
-                </button>
+                  <img src="images/siteimages/empty.png" alt="<?= translate('empty_page', $i18n) ?>" />
-            </div>
+              </div>
             <?php
         }
     }

includes/i18n/de.php

@@ -28,6 +28,7 @@ $i18n = [
     "no_subscriptions_yet" => "Keine Abonnements hinzugefügt",
     "add_first_subscription" => "Erstes Abonnement hinzufügen",
     'new_subscription' => "Neues Abonnement",
+    'search'          => "Suche",
     'sort'            => "Sortieren",
     'name'            => "Bezeichnung",
     'last_added'      => "Zuletzt hinzugefügt",
@@ -47,6 +48,8 @@ $i18n = [
     "years"           => "Jahre",
     "external_url"    => "Externe URL besuchen",
     "empty_page"      => "Leere Seite",
+    "clear_filters"   => "Filter zurücksetzen",
+    "no_matching_subscriptions" => "Keine passenden Abonnements gefunden",
     // Subscription form
     "add_subscription" => "Abonnement hinzufügen",
     "edit_subscription" => "Abonnement editieren",

includes/i18n/el.php

@@ -28,6 +28,7 @@ $i18n = [
     "no_subscriptions_yet" => "Δεν υπάρχουν καταχωρημένες συνδρομές",
     "add_first_subscription" => "Προσθήκη πρώτης συνδρομής",
     'new_subscription' => "Νέα συνδρομή",
+    'search'          => "Αναζήτηση",
     'sort'            => "Ταξινόμηση",
     'name'            => "Όνομα",
     'last_added'      => "Τελευταία προσθήκη",
@@ -47,6 +48,8 @@ $i18n = [
     "years"           => "χρόνια",
     "external_url"    => "Επίσκεψη εξωτερικού συνδέσμου",
     "empty_page"      => "Κενή σελίδα",
+    "clear_filters"   => "Καθαρισμός φίλτρων",
+    "no_matching_subscriptions" => "Δεν υπάρχουν συνδρομές που ταιριάζουν με τα φίλτρα σου",
     // Subscription form
     "add_subscription" => "Προσθήκη συνδρομής",
     "edit_subscription" => "Επεξεργασία συνδρομής",

includes/i18n/en.php

@@ -28,6 +28,7 @@ $i18n = [
     "no_subscriptions_yet" => "You don't have any subscriptions yet",
     "add_first_subscription" => "Add first subscription",
     'new_subscription' => "New Subscription",
+    'search'          => "Search",
     'sort'            => "Sort",
     'name'            => "Name",
     'last_added'      => "Last Added",
@@ -47,6 +48,8 @@ $i18n = [
     "years"           => "years",
     "external_url"    => "Visit External URL",
     "empty_page"      => "Empty Page",
+    "clear_filters"   => "Clear Filters",
+    "no_matching_subscriptions" => "No matching subscriptions",
     // Subscription form
     "add_subscription" => "Add subscription",
     "edit_subscription" => "Edit subscription",

includes/i18n/es.php

@@ -28,6 +28,7 @@ $i18n = [
     "no_subscriptions_yet" => "Aún no tienes ninguna suscripción",
     "add_first_subscription" => "Añadir primera suscripción",
     'new_subscription' => "Nueva Suscripción",
+    'search'          => "Buscar",
     'sort'            => "Ordenar",
     'name'            => "Nombre",
     'last_added'      => "Última Añadida",
@@ -47,6 +48,8 @@ $i18n = [
     "years"           => "años",
     "external_url"    => "Visitar URL Externa",
     "empty_page"      => "Página Vacía",
+    "clear_filters"   => "Limpiar Filtros",
+    "no_matching_subscriptions" => "No hay suscripciones que coincidan con los filtros",
     // Subscription form
     "add_subscription" => "Añadir suscripción",
     "edit_subscription" => "Editar suscripción",

includes/i18n/fr.php

@@ -28,6 +28,7 @@ $i18n = [
     "no_subscriptions_yet" => "Vous n'avez pas encore d'abonnement",
     "add_first_subscription" => "Ajoutez le premier abonnement",
     'new_subscription' => "Nouvel abonnement",
+    'search' => "Rechercher",
     'sort' => "Trier",
     'name' => "Nom",
     'last_added' => "Dernier ajouté",
@@ -47,6 +48,8 @@ $i18n = [
     "years" => "années",
     "external_url" => "Visiter l'URL externe",
     "empty_page" => "Page vide",
+    "clear_filters"   => "Effacer les filtres",
+    "no_matching_subscriptions" => "Aucun abonnement ne correspond à vos critères de recherche",
     // Formulaire d'abonnement
     "add_subscription" => "Ajouter un abonnement",
     "edit_subscription" => "Modifier l'abonnement",

includes/i18n/jp.php

@@ -28,6 +28,7 @@ $i18n = [
     "no_subscriptions_yet" => "まだ定期購入がありません",
     "add_first_subscription" => "最初の定期購入を追加する",
     'new_subscription' => "新しい定期購入",
+    'search'          => "検索",
     'sort'            => "並べ替え",
     'name'            => "名前",
     'last_added'      => "最終追加日",
@@ -47,6 +48,8 @@ $i18n = [
     "years"           => "年毎",
     "external_url"    => "外部URLにアクセス",
     "empty_page"      => "空のページ",
+    "clear_filters"   => "フィルタをクリア",
+    "no_matching_subscriptions" => "一致する定期購入がありません",
     // Subscription form
     "add_subscription" => "定期購入の追加",
     "edit_subscription" => "定期購入の編集",

includes/i18n/pt.php

@@ -28,6 +28,7 @@ $i18n = [
     "no_subscriptions_yet" => "Ainda não tem subscrições",
     "add_first_subscription" => "Adicionar primeira subscrição",
     'new_subscription' => "Nova Subscrição",
+    'search'          => "Pesquisar",
     'sort'            => "Ordenar",
     'name'            => "Nome",
     'last_added'      => "Última Adicionada",
@@ -47,6 +48,8 @@ $i18n = [
     "years"           => "anos",
     "external_url"    => "Visitar URL Externo",
     "empty_page"      => "Página Vazia",
+    "clear_filters"   => "Limpar Filtros",
+    "no_matching_subscriptions" => "Sem subscrições correspondentes",
     // Subscription form
     "add_subscription" => "Adicionar subscrição",
     "edit_subscription" => "Modificar subscrição",

includes/i18n/pt_br.php

@@ -28,6 +28,7 @@ $i18n = [
     "no_subscriptions_yet" => "Você ainda não tem nenhuma assinatura",
     "add_first_subscription" => "Adicionar a primeira assinatura",
     'new_subscription' => "Nova assinatura",
+    'search'          => "Pesquisar",
     'sort'            => "Ordenar",
     'name'            => "Nome",
     'last_added'      => "Última adicionada",
@@ -47,6 +48,8 @@ $i18n = [
     "years"           => "anos",
     "external_url"    => "Abrir URL externa",
     "empty_page"      => "Página vazia",
+    "clear_filters"   => "Limpar filtros",
+    "no_matching_subscriptions" => "Nenhuma assinatura encontrada",
     // Subscription form
     "add_subscription" => "Adicionar assinatura",
     "edit_subscription" => "Editar assinatura",

includes/i18n/tr.php

@@ -28,6 +28,7 @@ $i18n = [
     "no_subscriptions_yet" => "Henüz herhangi bir aboneliğiniz yok",
     "add_first_subscription" => "İlk aboneliği ekle",
     'new_subscription' => "Yeni Abonelik",
+    'search' => "Ara",
     'sort' => "Sırala",
     'name' => "İsim",
     'last_added' => "Son Eklenen",
@@ -47,6 +48,8 @@ $i18n = [
     "years" => "yıllar",
     "external_url" => "Harici URL'yi Ziyaret Et",
     "empty_page" => "Boş Sayfa",
+    "clear_filters" => "Filtreleri Temizle",
+    "no_matching_subscriptions" => "Eşleşen abonelik bulunamadı",
     // Subscription form
     "add_subscription" => "Abonelik ekle",
     "edit_subscription" => "Aboneliği düzenle",

includes/i18n/zh_cn.php

@@ -31,6 +31,7 @@ $i18n = [
     "no_subscriptions_yet" => "您还没有任何订阅",
     "add_first_subscription" => "添加首个订阅",
     'new_subscription' => "新订阅",
+    'search'          => "搜索",
     'sort'            => "排序",
     'name'            => "名称",
     'last_added'      => "创建时间",
@@ -50,6 +51,8 @@ $i18n = [
     "years"           => "年",
     "external_url"    => "访问外部链接",
     "empty_page"      => "空白页面",
+    "clear_filters"   => "清除筛选",
+    "no_matching_subscriptions" => "没有匹配的订阅",
     
     // 订阅表单
     "add_subscription" => "添加订阅",

includes/i18n/zh_tw.php

@@ -28,6 +28,7 @@ $i18n = [
     "no_subscriptions_yet" => "目前還沒有任何訂閱",
     "add_first_subscription" => "新增第一個訂閱",
     'new_subscription' => "新訂閱",
+    'search'          => "搜尋",
     'sort'            => "排序",
     'name'            => "名稱",
     'last_added'      => "建立時間",
@@ -47,6 +48,8 @@ $i18n = [
     "years"           => "年",
     "external_url"    => "檢視外部連結",
     "empty_page"      => "空白頁面",
+    "clear_filters"   => "清除篩選",
+    "no_matching_subscriptions" => "沒有符合的訂閱",
     // 訂閱表單
     "add_subscription" => "新增訂閱",
     "edit_subscription" => "編輯訂閱",

includes/list_subscriptions.php

@@ -98,7 +98,7 @@
                 $currentPaymentMethodId = $subscription['payment_method_id'];
             }
         ?>
-            <div class="subscription<?= $subscription['inactive'] ? ' inactive' : '' ?>" onClick="toggleOpenSubscription(<?= $subscription['id'] ?>)" data-id="<?= $subscription['id'] ?>">
+            <div class="subscription<?= $subscription['inactive'] ? ' inactive' : '' ?>" onClick="toggleOpenSubscription(<?= $subscription['id'] ?>)" data-id="<?= $subscription['id'] ?>" data-name="<?= $subscription['name'] ?>">
                 <div class="subscription-main">
                     <span class="logo"><img src="<?= $subscription['logo'] ?>"></span>
                     <span class="name"><?= $subscription['name'] ?></span>

includes/version.php

@@ -1,3 +1,3 @@
 <?php
-    $version = "v1.14.1";
+    $version = "v1.15.0";
 ?>

index.php

@@ -50,20 +50,106 @@
           <img class="button-icon" src="images/siteicons/plusicon.png">
           <?= translate('new_subscription', $i18n) ?>
         </button>
-        <div class="sort-container">
+        <div class="top-actions">
-          <button class="button" value="Sort" onClick="toggleSortOptions()" id="sort-button">
+          <div class="search">
-            <img src="images/siteicons/sort.png" class="button-icon" /> <?= translate('sort', $i18n) ?>
+            <input type="text" autocomplete="off" name="search" id="search" placeholder="<?= translate('search', $i18n) ?>" onkeyup="searchSubscriptions()" />
-          </button>
+            <span class="fa-solid fa-magnifying-glass search-icon"></span>
-          <div class="sort-options" id="sort-options">
+          </div>  
-            <ul>
+
-              <li <?= $sort == "name" ? 'class="selected"' : "" ?> onClick="setSortOption('name')" id="sort-name"><?= translate('name', $i18n) ?></li>
+          <div class="filtermenu on-dashboard">
-              <li <?= $sort == "id" ? 'class="selected"' : "" ?> onClick="setSortOption('id')" id="sort-id"><?= translate('last_added', $i18n) ?></li>
+            <button class="button" id="filtermenu-button" title="<?= translate("filter", $i18n) ?>">
-              <li <?= $sort == "price" ? 'class="selected"' : "" ?> onClick="setSortOption('price')" id="sort-price"><?= translate('price', $i18n) ?></li>
+              <i class="fa-solid fa-filter"></i>
-              <li <?= $sort == "next_payment" ? 'class="selected"' : "" ?> onClick="setSortOption('next_payment')" id="sort-next_payment"><?= translate('next_payment', $i18n) ?></li>
+            </button>
-              <li <?= $sort == "payer_user_id" ? 'class="selected"' : "" ?> onClick="setSortOption('payer_user_id')" id="sort-payer_user_id"><?= translate('member', $i18n) ?></li>
+            <div class="filtermenu-content">
-              <li <?= $sort == "category_id" ? 'class="selected"' : "" ?> onClick="setSortOption('category_id')" id="sort-category_id"><?= translate('category', $i18n) ?></li>
+              <?php
-              <li <?= $sort == "payment_method_id" ? 'class="selected"' : "" ?> onClick="setSortOption('payment_method_id')" id="sort-payment_method_id"><?= translate('payment_method', $i18n) ?></li>
+                if (count($members) > 1) {
-            </ul>
+              ?>
+                <div class="filtermenu-submenu">
+                  <div class="filter-title" onClick="toggleSubMenu('member')"><?= translate("member", $i18n) ?></div>
+                  <div class="filtermenu-submenu-content" id="filter-member">
+                    <?php
+                      foreach ($members as $member) {
+                        $selectedClass = '';
+                        if (isset($_GET['member']) && $_GET['member'] == $member['id']) {
+                          $selectedClass = 'selected';
+                        }
+                        ?>
+                          <div class="filter-item <?= $selectedClass ?>" data-memberid="<?= $member['id'] ?>"><?= $member['name'] ?></div>
+                        <?php
+                      }
+                    ?>
+                  </div>
+                </div>
+              <?php
+                }
+              ?>
+              <?php
+                if (count($categories) > 1) {
+              ?>
+                <div class="filtermenu-submenu">
+                  <div class="filter-title" onClick="toggleSubMenu('category')"><?= translate("category", $i18n) ?></div>
+                  <div class="filtermenu-submenu-content" id="filter-category">
+                    <?php
+                      foreach ($categories as $category) {
+                        $selectedClass = '';
+                        if (isset($_GET['category']) && $_GET['category'] == $category['id']) {
+                          $selectedClass = 'selected';
+                        }
+                        ?>
+                          <div class="filter-item <?= $selectedClass ?>" data-categoryid="<?= $category['id'] ?>"><?= $category['name'] ?></div>
+                        <?php
+                      }
+                    ?>
+                  </div>
+                </div>
+              <?php
+                }
+              ?>
+              <?php
+                if (count($payment_methods) > 1) {
+              ?>
+                <div class="filtermenu-submenu">
+                  <div class="filter-title" onClick="toggleSubMenu('payment')"><?= translate("payment_method", $i18n) ?></div>
+                  <div class="filtermenu-submenu-content" id="filter-payment">
+                    <?php
+                      foreach ($payment_methods as $payment) {
+                        $selectedClass = '';
+                        if (isset($_GET['payment']) && $_GET['payment'] == $payment['id']) {
+                          $selectedClass = 'selected';
+                        }
+                        ?>
+                          <div class="filter-item <?= $selectedClass ?>" data-paymentid="<?= $payment['id'] ?>"><?= $payment['name'] ?></div>
+                        <?php
+                      }
+                    ?>
+                  </div>
+                </div>
+              <?php
+                }
+              ?>
+              <div class="filtermenu-submenu hide" id="clear-filters">
+                <div class="filter-title filter-clear" onClick="clearFilters()">
+                  <i class="fa-solid fa-times-circle"></i> <?= translate("clear", $i18n) ?>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="sort-container">
+            <button class="button" value="Sort" onClick="toggleSortOptions()" id="sort-button" title="<?= translate('sort', $i18n) ?>">
+              <img src="images/siteicons/sort.png" class="button-icon" />
+            </button>
+            <div class="sort-options" id="sort-options">
+              <ul>
+                <li <?= $sort == "name" ? 'class="selected"' : "" ?> onClick="setSortOption('name')" id="sort-name"><?= translate('name', $i18n) ?></li>
+                <li <?= $sort == "id" ? 'class="selected"' : "" ?> onClick="setSortOption('id')" id="sort-id"><?= translate('last_added', $i18n) ?></li>
+                <li <?= $sort == "price" ? 'class="selected"' : "" ?> onClick="setSortOption('price')" id="sort-price"><?= translate('price', $i18n) ?></li>
+                <li <?= $sort == "next_payment" ? 'class="selected"' : "" ?> onClick="setSortOption('next_payment')" id="sort-next_payment"><?= translate('next_payment', $i18n) ?></li>
+                <li <?= $sort == "payer_user_id" ? 'class="selected"' : "" ?> onClick="setSortOption('payer_user_id')" id="sort-payer_user_id"><?= translate('member', $i18n) ?></li>
+                <li <?= $sort == "category_id" ? 'class="selected"' : "" ?> onClick="setSortOption('category_id')" id="sort-category_id"><?= translate('category', $i18n) ?></li>
+                <li <?= $sort == "payment_method_id" ? 'class="selected"' : "" ?> onClick="setSortOption('payment_method_id')" id="sort-payment_method_id"><?= translate('payment_method', $i18n) ?></li>
+              </ul>
+            </div>
           </div>
         </div>
       </header>

scripts/dashboard.js

@@ -238,7 +238,17 @@ function closeLogoSearch() {
 
 function fetchSubscriptions() {
   const subscriptionsContainer = document.querySelector("#subscriptions");
-  const getSubscriptions = "endpoints/subscriptions/get.php";
+  let getSubscriptions = "endpoints/subscriptions/get.php";
+
+  if (activeFilters['category'] !== "") {
+    getSubscriptions += `?category=${activeFilters['category']}`;
+  }
+  if (activeFilters['member'] !== "") {
+    getSubscriptions += getSubscriptions.includes("?") ? `&member=${activeFilters['member']}` : `?member=${activeFilters['member']}`;
+  }
+  if (activeFilters['payment'] !== "") {
+    getSubscriptions += getSubscriptions.includes("?") ? `&payment=${activeFilters['payment']}` : `?payment=${activeFilters['payment']}`;
+  }
 
   fetch(getSubscriptions)
     .then(response => response.text())
@@ -246,8 +256,8 @@ function fetchSubscriptions() {
       if (data) {
         subscriptionsContainer.innerHTML = data;
         const mainActions = document.querySelector("#main-actions");
-        if (data.includes("empty-page")) {
+        if (data.includes("no-matching-subscriptions")) {
-          mainActions.classList.add("hidden");
+          // mainActions.classList.add("hidden");
         } else {
           mainActions.classList.remove("hidden");
         }
@@ -319,4 +329,129 @@ document.addEventListener('DOMContentLoaded', function() {
     document.querySelector('#sort-options').addEventListener('focus', function() {
         isSortOptionsOpen = true;
     });
-});
+});
+
+function searchSubscriptions() {
+    const searchInput = document.querySelector("#search");
+    const searchTerm = searchInput.value.trim().toLowerCase();
+
+    const subscriptions = document.querySelectorAll(".subscription");
+    subscriptions.forEach(subscription => {
+        const name = subscription.getAttribute('data-name').toLowerCase();
+        if (!name.includes(searchTerm)) {
+            subscription.classList.add("hide");
+        } else {
+            subscription.classList.remove("hide");
+        }
+    });
+}
+
+function closeSubMenus() {
+  var subMenus = document.querySelectorAll('.filtermenu-submenu-content');
+  subMenus.forEach(subMenu => {
+      subMenu.classList.remove('is-open');
+  });
+
+}
+
+const activeFilters = [];
+activeFilters['category'] = "";
+activeFilters['member'] = "";
+activeFilters['payment'] = "";
+
+document.addEventListener("DOMContentLoaded", function() {
+  var filtermenu = document.querySelector('#filtermenu-button');
+  filtermenu.addEventListener('click', function() {
+      this.parentElement.querySelector('.filtermenu-content').classList.toggle('is-open');
+      closeSubMenus();
+  });
+
+  document.addEventListener('click', function(e) {
+      var filtermenuContent = document.querySelector('.filtermenu-content');
+      if (filtermenuContent.classList.contains('is-open')) {
+          var subMenus = document.querySelectorAll('.filtermenu-submenu');
+          var clickedInsideSubmenu = Array.from(subMenus).some(subMenu => subMenu.contains(e.target) || subMenu === e.target);
+
+          if (!filtermenu.contains(e.target) && !clickedInsideSubmenu) {
+              closeSubMenus();
+              filtermenuContent.classList.remove('is-open');
+          }
+      }
+  });
+});
+
+function toggleSubMenu(subMenu) {
+  var subMenu = document.getElementById("filter-" + subMenu);
+  if (subMenu.classList.contains("is-open")) {
+      closeSubMenus();
+  } else {
+      closeSubMenus();
+      subMenu.classList.add("is-open");
+  }
+}
+
+document.querySelectorAll('.filter-item').forEach(function(item) {
+  item.addEventListener('click', function(e) {
+    const searchInput = document.querySelector("#search");
+    searchInput.value = "";
+
+    if (this.hasAttribute('data-categoryid')) {
+        const categoryId = this.getAttribute('data-categoryid');
+        if (activeFilters['category'] === categoryId) {
+            activeFilters['category'] = "";
+            this.classList.remove('selected');
+        } else {
+            activeFilters['category'] = categoryId;
+            Array.from(this.parentNode.children).forEach(sibling => {
+              sibling.classList.remove('selected');
+            });
+            this.classList.add('selected');
+        }
+    } else if (this.hasAttribute('data-memberid')) {
+        const memberId = this.getAttribute('data-memberid');
+        if (activeFilters['member'] === memberId) {
+            activeFilters['member'] = "";
+            this.classList.remove('selected');
+        } else {
+            activeFilters['member'] = memberId;
+            Array.from(this.parentNode.children).forEach(sibling => {
+              sibling.classList.remove('selected');
+            });
+            this.classList.add('selected');
+        }
+    } else if (this.hasAttribute('data-paymentid')) {
+        const paymentId = this.getAttribute('data-paymentid');
+        if (activeFilters['payment'] === paymentId) {
+            activeFilters['payment'] = "";
+            this.classList.remove('selected');
+        } else {
+            activeFilters['payment'] = paymentId;
+            Array.from(this.parentNode.children).forEach(sibling => {
+              sibling.classList.remove('selected');
+            }); 
+            this.classList.add('selected');
+        }
+    }
+
+    if (activeFilters['category'] !== "" || activeFilters['member'] !== "" || activeFilters['payment'] !== "") {
+        document.querySelector('#clear-filters').classList.remove('hide');
+    } else {
+        document.querySelector('#clear-filters').classList.add('hide');
+    }
+
+    fetchSubscriptions();
+  });
+});
+
+function clearFilters() {
+  const searchInput = document.querySelector("#search");
+  searchInput.value = "";
+  activeFilters['category'] = "";
+  activeFilters['member'] = "";
+  activeFilters['payment'] = "";
+  document.querySelectorAll('.filter-item').forEach(function(item) {
+    item.classList.remove('selected');
+  });
+  document.querySelector('#clear-filters').classList.add('hide');
+  fetchSubscriptions();
+}

stats.php

@@ -202,89 +202,90 @@ $numberOfElements = 6;
       <?= translate('general_statistics', $i18n) ?> <span class="header-subtitle"><?= $statsSubtitle ?></span>
     </h2>
     <div class="filtermenu">
-        <button class="button" id="filtermenu-button">
+      <button class="button" id="filtermenu-button">
-          <i class="fa-solid fa-filter"></i>
+        <i class="fa-solid fa-filter"></i>
-          <?= translate("filter", $i18n) ?>
+        <?= translate("filter", $i18n) ?>
-        </button>
+      </button>
-        <div class="filtermenu-content">
+      <div class="filtermenu-content">
-          <?php
+        <?php
-            if (count($members) > 1) {
+          if (count($members) > 1) {
-          ?>
+        ?>
-            <div class="filtermenu-submenu">
+          <div class="filtermenu-submenu">
-              <div class="filter-title" onClick="toggleSubMenu('member')"><?= translate("member", $i18n) ?></div>
+            <div class="filter-title" onClick="toggleSubMenu('member')"><?= translate("member", $i18n) ?></div>
-              <div class="filtermenu-submenu-content" id="filter-member">
+            <div class="filtermenu-submenu-content" id="filter-member">
-                <?php
-                  foreach ($members as $member) {
-                    $selectedClass = '';
-                    if (isset($_GET['member']) && $_GET['member'] == $member['id']) {
-                      $selectedClass = 'selected';
-                    }
-                    ?>
-                      <div class="filter-item <?= $selectedClass ?>" data-memberid="<?= $member['id'] ?>"><?= $member['name'] ?></div>
-                    <?php
-                  }
-                ?>
-              </div>
-            </div>
-          <?php
-            }
-          ?>
-          <?php
-            if (count($categories) > 1) {
-          ?>
-            <div class="filtermenu-submenu">
-              <div class="filter-title" onClick="toggleSubMenu('category')"><?= translate("category", $i18n) ?></div>
-              <div class="filtermenu-submenu-content" id="filter-category">
-                <?php
-                  foreach ($categories as $category) {
-                    $selectedClass = '';
-                    if (isset($_GET['category']) && $_GET['category'] == $category['id']) {
-                      $selectedClass = 'selected';
-                    }
-                    ?>
-                      <div class="filter-item <?= $selectedClass ?>" data-categoryid="<?= $category['id'] ?>"><?= $category['name'] ?></div>
-                    <?php
-                  }
-                ?>
-              </div>
-            </div>
-          <?php
-            }
-          ?>
-          <?php
-            if (count($paymentMethodCount) > 1) {
-          ?>
-            <div class="filtermenu-submenu">
-              <div class="filter-title" onClick="toggleSubMenu('payment')"><?= translate("payment_method", $i18n) ?></div>
-              <div class="filtermenu-submenu-content" id="filter-payment">
-                <?php
-                  foreach ($paymentMethodCount as $payment) {
-                    $selectedClass = '';
-                    if (isset($_GET['payment']) && $_GET['payment'] == $payment['id']) {
-                      $selectedClass = 'selected';
-                    }
-                    ?>
-                      <div class="filter-item <?= $selectedClass ?>" data-paymentid="<?= $payment['id'] ?>"><?= $payment['name'] ?></div>
-                    <?php
-                  }
-                ?>
-              </div>
-            </div>
-          <?php
-            }
-          ?>
-          <?php
-            if (isset($_GET['member']) || isset($_GET['category']) || isset($_GET['payment'])) {
-              ?>
-                <div class="filtermenu-submenu">
-                  <div class="filter-title filter-clear" onClick="clearFilters()">
-                    <i class="fa-solid fa-times-circle"></i> <?= translate("clear", $i18n) ?>
-                  </div>
-                </div>
               <?php
-            }
+                foreach ($members as $member) {
-          ?>
+                  $selectedClass = '';
-      </div>    
+                  if (isset($_GET['member']) && $_GET['member'] == $member['id']) {
+                    $selectedClass = 'selected';
+                  }
+                  ?>
+                    <div class="filter-item <?= $selectedClass ?>" data-memberid="<?= $member['id'] ?>"><?= $member['name'] ?></div>
+                  <?php
+                }
+              ?>
+            </div>
+          </div>
+        <?php
+          }
+        ?>
+        <?php
+          if (count($categories) > 1) {
+        ?>
+          <div class="filtermenu-submenu">
+            <div class="filter-title" onClick="toggleSubMenu('category')"><?= translate("category", $i18n) ?></div>
+            <div class="filtermenu-submenu-content" id="filter-category">
+              <?php
+                foreach ($categories as $category) {
+                  $selectedClass = '';
+                  if (isset($_GET['category']) && $_GET['category'] == $category['id']) {
+                    $selectedClass = 'selected';
+                  }
+                  ?>
+                    <div class="filter-item <?= $selectedClass ?>" data-categoryid="<?= $category['id'] ?>"><?= $category['name'] ?></div>
+                  <?php
+                }
+              ?>
+            </div>
+          </div>
+        <?php
+          }
+        ?>
+        <?php
+          if (count($paymentMethodCount) > 1) {
+        ?>
+          <div class="filtermenu-submenu">
+            <div class="filter-title" onClick="toggleSubMenu('payment')"><?= translate("payment_method", $i18n) ?></div>
+            <div class="filtermenu-submenu-content" id="filter-payment">
+              <?php
+                foreach ($paymentMethodCount as $payment) {
+                  $selectedClass = '';
+                  if (isset($_GET['payment']) && $_GET['payment'] == $payment['id']) {
+                    $selectedClass = 'selected';
+                  }
+                  ?>
+                    <div class="filter-item <?= $selectedClass ?>" data-paymentid="<?= $payment['id'] ?>"><?= $payment['name'] ?></div>
+                  <?php
+                }
+              ?>
+            </div>
+          </div>
+        <?php
+          }
+        ?>
+        <?php
+          if (isset($_GET['member']) || isset($_GET['category']) || isset($_GET['payment'])) {
+            ?>
+              <div class="filtermenu-submenu">
+                <div class="filter-title filter-clear" onClick="clearFilters()">
+                  <i class="fa-solid fa-times-circle"></i> <?= translate("clear", $i18n) ?>
+                </div>
+              </div>
+            <?php
+          }
+        ?>
+      </div>
+    </div>  
   </div>
 </div>
   </div>

styles/styles.css

@@ -163,7 +163,7 @@ main > .contain {
   margin: 0px 0px 20px 0px;
   display: flex;
   flex-direction: row;
-  justify-content: end;
+  justify-content: space-between;
   gap: 16px;
   flex-wrap: wrap;
   position: relative;
@@ -176,6 +176,7 @@ main > .contain {
 @media (max-width: 768px) {
   .main-actions {
     justify-content: space-between;
+    flex-direction: column-reverse;
   }
 }
 
@@ -187,12 +188,13 @@ main > .contain {
   font-weight: 500;
   text-align: center;
   vertical-align: middle;
+  justify-content: center;
   cursor: pointer;
   user-select: none;
   color: #fff;
   border: 1px solid #007bff;
   background-color: #007bff;
-  padding: 14px 30px;
+  padding: 15px 30px;
   font-size: 1rem;
   border-radius: 8px;
   transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
@@ -208,6 +210,28 @@ main > .contain {
   padding: 14px 20px;
 }
 
+.top-actions {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+  align-items: center;
+  width: auto;
+}
+
+.top-actions .search {
+  flex-grow: 1;
+}
+
+.top-actions > .search > .search-icon {
+  float: right;
+  right: 15px;
+  margin-top: -35px;
+  position: relative;
+  z-index: 2;
+  color: #007bff;
+  font-size: 20px;
+}
+
 .subscriptions {
   display: flex;
   flex-direction: column;
@@ -229,6 +253,10 @@ main > .contain {
   cursor: pointer;
 }
 
+.subscription.hide {
+  display: none;
+}
+
 .subscription.inactive {
   opacity: 0.6;
 }
@@ -380,7 +408,8 @@ main > .contain {
   margin-right: 0px;;
 }
 
-.empty-page {
+.empty-page,
+.no-matching-subscriptions {
   display: block;
   max-width: 90%;
   margin: auto;
@@ -388,15 +417,25 @@ main > .contain {
   font-size: 20px;
 }
 
-.empty-page > img {
+.empty-page > img,
+.no-matching-subscriptions > img {
   max-width: 100%;
 }
 
+.no-matching-subscriptions > img {
+  margin-top: 30px;
+}
+
 .empty-page > p {
   margin: 5px 0px 40px 0px;
 }
 
-.empty-page > button {
+.no-matching-subscriptions > p {
+  margin: 30px 0px 40px 0px;
+}
+
+.empty-page > button,
+.no-matching-subscriptions > button {
   margin: 0px auto;
 }
 
@@ -1378,7 +1417,13 @@ input[type="checkbox"] {
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   z-index: 3;
   overflow: hidden;
-  margin-top: 4px;
+  margin-top: 6px;
+}
+
+@media (max-width: 354px) {
+  .on-dashboard .filtermenu-content {
+    right: -94px;
+  }
 }
 
 .filtermenu-content.is-open {
@@ -1395,6 +1440,10 @@ input[type="checkbox"] {
   user-select: none;
 }
 
+.filtermenu-content .filtermenu-submenu.hide {
+  display: none;
+}
+
 .filtermenu-content .filtermenu-submenu:last-of-type .filter-title {
   border-bottom: none;
 }