add filters

src/client/public/css/tailwind.css

@@ -1383,6 +1383,10 @@ video {
   resize: both;
 }
 
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -1806,11 +1810,6 @@ video {
   padding-bottom: 0.375rem;
 }
 
-.py-10 {
-  padding-top: 2.5rem;
-  padding-bottom: 2.5rem;
-}
-
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -2813,11 +2812,6 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
   background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
 }
 
-.hover\:bg-gray-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
-}
-
 .hover\:bg-gray-300:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
@@ -2858,11 +2852,6 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
   background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
 }
 
-.focus\:bg-gray-200:focus {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
-}
-
 .focus\:bg-gray-50:focus {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
@@ -3449,11 +3438,6 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
     padding-right: 2rem;
   }
 
-  .lg\:py-14 {
-    padding-top: 3.5rem;
-    padding-bottom: 3.5rem;
-  }
-
   .lg\:ps-64 {
     padding-inline-start: 16rem;
   }
@@ -3656,11 +3640,6 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
   background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
 }
 
-.dark\:hover\:bg-neutral-600:hover:where(.dark, .dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(82 82 82 / var(--tw-bg-opacity, 1));
-}
-
 .dark\:hover\:bg-neutral-700:hover:where(.dark, .dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
@@ -3696,11 +3675,6 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
   color: rgb(115 115 115 / var(--tw-text-opacity, 1));
 }
 
-.dark\:focus\:bg-neutral-600:focus:where(.dark, .dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(82 82 82 / var(--tw-bg-opacity, 1));
-}
-
 .dark\:focus\:bg-neutral-700:focus:where(.dark, .dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));

src/client/public/js/guild/filters.js

@@ -0,0 +1,266 @@
+
+const formatTimestamp = timestamp => {
+    let d;
+    if (typeof timestamp === "string") {
+        d = new Date(timestamp.replace(" ", "T"));
+    }
+    else {
+        d = new Date(timestamp);
+    }
+
+    const now = new Date();
+
+    // If younger than a year, show time
+    // otherwise show the year
+    return now - d < 31536000000
+        ? `${d.getDate()} ${d.toLocaleString("en-GB", { month: "short" })}, ${d.getHours().toString().padStart(2, "0")}:${d.getMinutes().toString().padStart(2, "0")}`
+        : `${d.getDate()} ${d.toLocaleString("en-GB", { month: "short" })} ${d.getFullYear()}`;
+}
+
+const emptyTableHtml = `
+    <div class="max-w-md w-full min-h-[400px] flex flex-col justify-center mx-auto px-6 py-4">
+        <div class="flex justify-center items-center size-[46px] bg-gray-100 rounded-lg dark:bg-neutral-800">
+            <svg class="shrink-0 size-6 text-gray-600 dark:text-neutral-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg>
+        </div>
+        <h2 class="mt-5 font-semibold text-gray-800 dark:text-white">
+            No results found
+        </h2>
+        <p class="mt-2 text-sm text-gray-600 dark:text-neutral-400">
+            Create a filter and it will appear here.
+        </p>
+
+        <div class="mt-5 flex flex-col sm:flex-row gap-2">
+            <button type="button" class="openfilterModal-js py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#subModal">
+                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
+                Create a filter
+            </button>
+            <button type="button" onclick="alert('not implemented');" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
+                Use a Template
+            </button>
+        </div>
+    </div>
+`;
+
+
+var table;
+const defineTable = () => {
+    table = new HSDataTable("#table", {
+        ajax: {
+            url: `/guild/${guildId}/filters/api/datatable`,
+            dataSrc: "data",
+            data: (d) => {
+                if (d === undefined) { return ;}
+
+                d.filters = {};
+                const is_whitelist = $("input[name='filterType']:checked").val();
+                d.filters.is_whitelist = is_whitelist;
+            }
+        },
+        serverSide: true,
+        processing: true,
+        selecting: true,
+        pagingOptions: {
+            pageBtnClasses: "hidden"
+        },
+        rowSelectingOptions: {
+            selectAllSelector: "#selectAllBox"
+        },
+        language: {
+            zeroRecords: emptyTableHtml,
+            emptyTable: emptyTableHtml,
+            loading: "Placeholder Loading Message...",
+        },
+        rowCallback: (row, data, index) => {
+            $(row).addClass("bg-white dark:bg-neutral-900");
+        },
+        drawCallback: () => {
+            HSDropdown.autoInit();
+        },
+        select: {
+            style: "multi",
+            selector: "td:first-child input[type='checkbox']"
+        },
+        columnDefs: [
+            {
+                // Row select checkbox
+                targets: 0,
+                orderable: false,
+                searchable: false,
+                render: (data, type, row) => {
+                    return `
+                        <td class="size-px whitespace-nowrap">
+                            <div class="ps-6 py-4">
+                                <label for="rowSelect${row.id}-js" class="flex">
+                                    <input type="checkbox" id="rowSelect${row.id}-js" class="form-checkbox shrink-0 border-gray-300 rounded text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" data-hs-datatable-row-selecting-individual="">
+                                    <span class="sr-only">Checkbox</span>
+                                </label>
+                            </div>
+                        </td>
+                    `;
+                }
+            },
+            {
+                // Name
+                targets: 1,
+                data: "name",
+                orderable: true,
+                searchable: true,
+                render: data => {
+                    return `
+                        <td class="size-px whitespace-nowrap align-top">
+                            <a href="#" class="block px-6 py-4 text-blue-500 hover:text-blue-600 focus:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 dark:focus:text-blue-500 text-nowrap">
+                                ${data}
+                            </a>
+                        </td>
+                    `;
+                }
+            },
+            {
+                // Match
+                targets: 2,
+                data: "match",
+                orderable: true,
+                searchable: true,
+                render: data => {
+                    return `
+                        <td class="size-px whitespace-nowrap align-top">
+                            <a href="#" class="block px-6 py-4 text-blue-500 hover:text-blue-600 focus:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 dark:focus:text-blue-500 text-nowrap">
+                                ${data}
+                            </a>
+                        </td>
+                    `;
+                }
+            },
+            {
+                // Algorithm
+                target: 3,
+                data: "algorithm",
+                orderable: true,
+                searchable: true,
+                render: (data, type, row) => {
+                    return `
+                        <td class="size-px whitespace-nowrap align-top">
+                            <a href="#" class="block px-6 py-4 text-blue-500 hover:text-blue-600 focus:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 dark:focus:text-blue-500 text-nowrap">
+                                ${data}
+                            </a>
+                        </td>
+                    `;
+                }
+            },
+            {
+                // Filters
+                target: 4,
+                data: "is_insensitive",
+                orderable: true,
+                searchable: true,
+                render: (data, type, row) => {
+                    return `
+                        <td class="size-px whitespace-nowrap align-top">
+                            <a href="#" class="block px-6 py-4 text-blue-500 hover:text-blue-600 focus:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 dark:focus:text-blue-500 text-nowrap">
+                                ${data}
+                            </a>
+                        </td>
+                    `;
+                }
+            },
+            {
+                // Whitelist
+                target: 5,
+                data: "is_whitelist",
+                orderable: true,
+                searchable: true,
+                render: (data, type, row) => {
+                    return `
+                        <td class="size-px whitespace-nowrap align-top">
+                            <a href="#" class="block px-6 py-4 text-blue-500 hover:text-blue-600 focus:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 dark:focus:text-blue-500 text-nowrap">
+                                ${data}
+                            </a>
+                        </td>
+                    `;
+                }
+            },
+            {
+                // Created At
+                target: 6,
+                data: "created_at",
+                orderable: true,
+                searchable: true,
+                render: data => {
+                    return `
+                        <td class="size-px whitespace-nowrap align-top">
+                            <div class="px-6 py-4">
+                                <span class="text-sm text-gray-500 dark:text-neutral-500 text-nowrap">
+                                    ${formatTimestamp(data)}
+                                </span>
+                            </div>
+                        </td>
+                    `;
+                }
+            }
+        ]
+    })
+
+    table.dataTable
+        .on("select", onTableSelectChange)
+        .on("deselect", onTableSelectChange)
+        .on("draw", onTableSelectChange);
+}
+
+// Ensure the datatable recognises when all rows are selected, otherwise rows are only visually selected
+$("#selectAllBox").on("change", function() {
+    this.checked ? table.dataTable.rows().select() : table.dataTable.rows().deselect();
+});
+
+const onTableSelectChange = () => {
+    const selectedRowCount = table.dataTable.rows({ selected: true }).count();
+    $("#deleteRowsBtn").prop("disabled", selectedRowCount === 0);
+    $(".rows-selected-count-js").text(selectedRowCount);
+
+    const $elem = $(".rows-selected-count-js.zero-empty-js");
+    selectedRowCount === 0 ? $elem.hide() : $elem.show();
+}
+
+$(window).ready(() => {
+    setTimeout(defineTable, 500);
+});
+
+$("input[name='filterType']").on("change", () => {
+    table.dataTable.draw();
+});
+
+const openFilterForm = () => {
+    $("#filterForm").removeClass("submitted");
+    HSOverlay.open($("#filterModal").get(0));
+}
+
+const closeFilterForm = () => {
+    $("#filterForm").removeClass("submitted");
+    HSOverlay.close($("#filterModal").get(0));
+}
+
+$(document).on("click", ".openfilterModal-js", openFilterForm);
+
+const submitForm = async event => {
+    event.preventDefault();
+
+    const form = $(event.target).get(0);
+    $(form).addClass("submitted");
+
+    if (!form.checkValidity()) { return; }
+
+    await $.ajax({
+        url: `/guild/${guildId}/filters/api`,
+        method: "post",
+        dataType: "json",
+        data: $(event.target).serializeArray(),
+        success: () => {
+            table.dataTable.draw();
+            closeFilterForm();
+        },
+        error: error => {
+            alert(JSON.stringify(error, null, 4));
+        }
+    });
+}
+
+$("#filterForm").on("submit", submitForm);

src/client/public/js/guild/subscriptions.js

@@ -217,8 +217,7 @@ const defineTable = () => {
                         </td>
                     `;
                 }
-            }
+            },
-            ,
             {
                 // Status
                 target: 7,
@@ -297,13 +296,13 @@ $(window).ready(() => {
 
 $("input[name='filterActive']").on("change", () => {
     table.dataTable.draw();
-})
+});
 
 const openSubForm = () => {
     $("#subForm").removeClass("submitted");
     $("#formPublishedThreshold").val(new Date().toISOString().slice(0, 16));
     $("#formActive").prop("checked", true);
-    HSOverlay.open($("#subModal").get(0))
+    HSOverlay.open($("#subModal").get(0));
 }
 
 const closeSubForm = () => {
@@ -316,7 +315,7 @@ $(document).on("click", ".openSubModal-js", openSubForm);
 const submitForm = async event => {
     event.preventDefault();
 
-    const form = $("#subForm").get(0);
+    const form = $(event.target).get(0);
     $(form).addClass("submitted");
 
     if (!form.checkValidity()) { return; }
@@ -331,7 +330,7 @@ const submitForm = async event => {
             closeSubForm();
         },
         error: error => {
-            alert(error);
+            alert(JSON.stringify(error, null, 4));
         }
     });
 }

src/client/views/guild/filters.ejs

@@ -2,6 +2,310 @@
 
 <%- include("guildHeader") -%>
 
-<div class="p-4">
+<!-- Table Section -->
-    Filters
+<div id="table" class="--prevent-on-load-init max-w-full overflow-hidden px-4 sm:px-6">
-</div>
+    <!-- Card -->
+    <div class="flex flex-col">
+        <div class="-m-1.5">
+            <div class="max-w-full p-1.5 min-w-full inline-block align-middle">
+                <div class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden dark:bg-neutral-900 dark:border-neutral-800">
+                    <!-- Header -->
+                    <div class="px-6 py-4 gap-3 flex flex-nowrap justify-between items-center border-b border-gray-200 dark:border-neutral-700">
+                        <!-- Input -->
+                        <div class="hidden sm:block sm:col-span-1">
+                            <label for="search" class="sr-only">Search</label>
+                            <div class="relative">
+                                <input type="text" id="search" name="search" class="form-input  px-3 ps-11 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600" placeholder="Search" data-hs-datatable-search="">
+                                <div class="absolute inset-y-0 start-0 flex items-center pointer-events-none ps-4">
+                                    <svg class="shrink-0 size-4 text-gray-400 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- End Input -->
+  
+                        <div class="sm:col-span-2 md:grow">
+                            <div class="flex justify-end gap-x-2">
+
+                                <button type="button" id="deleteRowsBtn" disabled class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-red-500 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="#">
+                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
+                                    <span>
+                                        <span class="hidden sm:inline">Delete</span>
+                                        <span class="rows-selected-count-js zero-empty-js before:content-['('] after:content-[')'] empty:hidden"></span>
+                                    </span>
+                                </button>
+
+                                <div class="hs-dropdown [--placement:bottom-right] relative inline-block h-full" data-hs-dropdown-auto-close="inside">
+                                    <button id="hs-as-table-table-filter-dropdown" type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
+                                        <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M7 12h10"/><path d="M10 18h4"/></svg>
+                                        Filter
+                                    </button>
+                                    <div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden divide-y divide-gray-200 min-w-48 z-10 bg-white shadow-md rounded-lg mt-2 dark:divide-neutral-700 dark:bg-neutral-800 dark:border dark:border-neutral-700" role="menu" aria-orientation="vertical" aria-labelledby="hs-as-table-table-filter-dropdown">
+                                        <div class="divide-y divide-gray-200 dark:divide-neutral-700">
+                                            <label for="hs-as-filters-dropdown-all" class="flex py-2.5 px-3">
+                                                <input type="radio" name="filterType" class="form-radio shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-as-filters-dropdown-all" checked value="">
+                                                <span class="ms-3 text-sm text-gray-800 dark:text-neutral-200">All</span>
+                                            </label>
+                                            <label for="hs-as-filters-dropdown-published" class="flex py-2.5 px-3">
+                                                <input type="radio" name="filterType" class="form-radio shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-as-filters-dropdown-published" value="1">
+                                                <span class="ms-3 text-sm text-gray-800 dark:text-neutral-200">Whitelist</span>
+                                            </label>
+                                            <label for="hs-as-filters-dropdown-pending" class="flex py-2.5 px-3">
+                                                <input type="radio" name="filterType" class="form-radio shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-as-filters-dropdown-pending" value="0">
+                                                <span class="ms-3 text-sm text-gray-800 dark:text-neutral-200">Blacklist</span>
+                                            </label>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <button type="button" class="openfilterModal-js py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
+                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
+                                    <span>
+                                        Add
+                                        <span class="hidden sm:inline">filter</span>
+                                    </span>
+                                </button>
+
+                            </div>
+                        </div>
+                    </div>
+                    <!-- End Header -->
+  
+                    <div class="min-w-full overflow-x-auto">
+                        <!-- Table -->
+                        <table class="min-w-full divide-y divide-gray-200 dark:divide-neutral-700">
+                            <thead class="bg-gray-50 dark:bg-neutral-800 border-none">
+                                <tr>
+                                    <th scope="col" class="ps-6 py-3 text-start --exclude-from-ordering">
+                                        <label for="hs-at-with-checkboxes-main" class="flex ml-[1px]">
+                                          <input type="checkbox" id="selectAllBox" class="form-checkbox shrink-0 border-gray-300 rounded text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800">
+                                          <span class="sr-only">Checkbox</span>
+                                        </label>
+                                    </th>
+
+                                    <th scope="col" data-dt-column="name" class="px-6 py-3 text-start">
+                                        <div class="flex justify-between items-center gap-x-2 cursor-pointer">
+                                            <span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
+                                                Name
+                                            </span>
+                                            <svg class="size-3.5 ms-1 -me-0.5 text-gray-400 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                                <path class="hs-datatable-ordering-desc:text-blue-600 dark:hs-datatable-ordering-desc:text-blue-500" d="m7 15 5 5 5-5"></path>
+                                                <path class="hs-datatable-ordering-asc:text-blue-600 dark:hs-datatable-ordering-asc:text-blue-500" d="m7 9 5-5 5 5"></path>
+                                            </svg>
+                                        </div>
+                                    </th>
+                    
+                                    <th scope="col" class="px-6 py-3 text-start">
+                                        <div class="flex justify-between items-center gap-x-2 cursor-pointer">
+                                            <span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
+                                                Match
+                                            </span>
+                                            <svg class="size-3.5 ms-1 -me-0.5 text-gray-400 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                                <path class="hs-datatable-ordering-desc:text-blue-600 dark:hs-datatable-ordering-desc:text-blue-500" d="m7 15 5 5 5-5"></path>
+                                                <path class="hs-datatable-ordering-asc:text-blue-600 dark:hs-datatable-ordering-asc:text-blue-500" d="m7 9 5-5 5 5"></path>
+                                            </svg>
+                                        </div>
+                                    </th>
+
+                                    <th scope="col" class="px-6 py-3 text-start">
+                                        <div class="flex justify-between items-center gap-x-2 cursor-pointer">
+                                            <span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
+                                                Algorithm
+                                            </span>
+                                            <svg class="size-3.5 ms-1 -me-0.5 text-gray-400 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                                <path class="hs-datatable-ordering-desc:text-blue-600 dark:hs-datatable-ordering-desc:text-blue-500" d="m7 15 5 5 5-5"></path>
+                                                <path class="hs-datatable-ordering-asc:text-blue-600 dark:hs-datatable-ordering-asc:text-blue-500" d="m7 9 5-5 5 5"></path>
+                                            </svg>
+                                        </div>
+                                    </th>
+
+                                    <th scope="col" class="px-6 py-3 text-start">
+                                        <div class="flex justify-between items-center gap-x-2 cursor-pointer">
+                                            <span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200 text-nowrap">
+                                                Case-Sensitive
+                                            </span>
+                                            <svg class="size-3.5 ms-1 -me-0.5 text-gray-400 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                                <path class="hs-datatable-ordering-desc:text-blue-600 dark:hs-datatable-ordering-desc:text-blue-500" d="m7 15 5 5 5-5"></path>
+                                                <path class="hs-datatable-ordering-asc:text-blue-600 dark:hs-datatable-ordering-asc:text-blue-500" d="m7 9 5-5 5 5"></path>
+                                            </svg>
+                                        </div>
+                                    </th>
+
+                                    <th scope="col" class="px-6 py-3 text-start">
+                                        <div class="flex justify-between items-center gap-x-2 cursor-pointer">
+                                            <span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
+                                                Type
+                                            </span>
+                                            <svg class="size-3.5 ms-1 -me-0.5 text-gray-400 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                                <path class="hs-datatable-ordering-desc:text-blue-600 dark:hs-datatable-ordering-desc:text-blue-500" d="m7 15 5 5 5-5"></path>
+                                                <path class="hs-datatable-ordering-asc:text-blue-600 dark:hs-datatable-ordering-asc:text-blue-500" d="m7 9 5-5 5 5"></path>
+                                            </svg>
+                                        </div>
+                                    </th>
+
+                                    <th scope="col" class="px-6 py-3 text-start">
+                                        <div class="flex justify-between items-center gap-x-2 cursor-pointer">
+                                            <span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200 text-nowrap">
+                                                Created at
+                                            </span>
+                                            <svg class="size-3.5 ms-1 -me-0.5 text-gray-400 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                                <path class="hs-datatable-ordering-desc:text-blue-600 dark:hs-datatable-ordering-desc:text-blue-500" d="m7 15 5 5 5-5"></path>
+                                                <path class="hs-datatable-ordering-asc:text-blue-600 dark:hs-datatable-ordering-asc:text-blue-500" d="m7 9 5-5 5 5"></path>
+                                            </svg>
+                                        </div>
+                                    </th>
+                                </tr>
+                                
+                            </thead>
+        
+                            <tbody class="divide-y divide-gray-200 dark:divide-neutral-700">
+                            </tbody>
+                        </table>
+                        <!-- End Table -->
+                    </div>
+  
+                    <!-- Footer -->
+                    <div class="px-6 py-4 gap-3 flex justify-between items-center border-t border-gray-200 dark:border-neutral-700">
+                        <div class="max-w-sm space-y-3">
+                            <select data-hs-select='{
+                                "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
+                                "toggleClasses": "form-select hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 px-3 pe-9 flex text-nowrap w-full cursor-pointer bg-white border border-gray-200 rounded-lg text-start text-sm text-gray-800 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 before:absolute before:inset-0 before:z-[1] dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800",
+                                "dropdownClasses": "mt-2 z-50 w-20 max-h-72 p-1 space-y-0.5 bg-white border border-gray-200 rounded-lg shadow-md overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700",
+                                "dropdownScope": "window",
+                                "optionClasses": "py-2 px-3 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100 rounded-lg focus:outline-none focus:bg-gray-100 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800",
+                                "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-blue-600 dark:text-blue-500\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>"
+                            }' class="hidden" data-hs-datatable-page-entities="">
+                                <option value="1">1</option>
+                                <option value="5">5</option>
+                                <option value="10" selected>10</option>
+                                <option value="15">15</option>
+                                <option value="25">25</option>
+                                <option value="50">50</option>
+                            </select>
+                        </div>
+
+                        <div class="hidden sm:inline-flex items-center gap-x-2" data-hs-datatable-info="">
+                            <p class="text-sm text-gray-600 dark:text-neutral-400">
+                                Showing
+                                <span data-hs-datatable-info-from=""></span>
+                                to
+                                <span data-hs-datatable-info-to=""></span>
+                                of
+                                <span data-hs-datatable-info-length=""></span>
+                            </p>
+                        </div>
+  
+                        <div class="inline-flex gap-x-2" data-hs-datatable-paging="">
+                            <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" data-hs-datatable-paging-prev="">
+                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+                                Prev
+                            </button>
+                            <div class="flex items-center space-x-1 " data-hs-datatable-paging-pages=""></div>
+                            <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" data-hs-datatable-paging-next="">
+                                Next
+                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+                            </button>
+                        </div>
+                    </div>
+                    <!-- End Footer -->
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- End Card -->
+
+</div>
+<!-- End Table Section -->
+
+<!-- Popup -->
+<div id="filterModal" class="hs-overlay hidden size-full fixed top-0 start-0 z-[80] overflow-x-hidden overflow-y-auto pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-scale-animation-modal-label">
+    <div class="hs-overlay-animation-target hs-overlay-open:scale-100 hs-overlay-open:opacity-100 scale-95 opacity-0 ease-in-out transition-all duration-200 lg:max-w-4xl lg:w-full m-3 lg:mx-auto min-h-[calc(100%-3.5rem)] flex items-center">
+        <div class="w-full p-4 sm:p-7 flex flex-col bg-white border shadow-sm rounded-lg pointer-events-auto dark:bg-neutral-900 dark:border-neutral-800 dark:shadow-neutral-700/70">
+            <div class="mb-8">
+                <h2 class="text-xl font-bold text-gray-800 dark:text-neutral-200">Filter</h2>
+                <p class="text-sm text-gray-600 dark:text-neutral-400">
+                    Filter out unwanted content from your feeds.
+                </p>
+            </div>
+            <form id="filterForm" novalidate class="group grid grid-cols-1 gap-y-4 sm:gap-y-6 md:gap-y-8 gap-x-6 sm:gap-x-8 md:gap-x-10">
+                <div>
+                    <label for="formName" class="text-input-label">Name</label>
+                    <input type="text" id="formName" name="name" class="form-input text-input peer group-[.submitted]:invalid:border-red-500 group-[.submitted]:invalid:ring-red-500" required>
+                    <p class="text-input-help block group-[.submitted]:peer-[:invalid]:hidden">
+                        Human-readable name for this entry.
+                    </p>
+                    <p class="mt-2 text-sm text-red-500 hidden group-[.submitted]:peer-[:invalid]:block">
+                        Please enter a name.
+                    </p>
+                </div>
+                <div>
+                    <label for="formMatch" class="text-input-label">Match</label>
+                    <input type="text" id="formMatch" name="match" class="form-input text-input peer group-[.submitted]:invalid:border-red-500 group-[.submitted]:invalid:ring-red-500" required>
+                    <p class="text-input-help block group-[.submitted]:peer-[:invalid]:hidden">
+                        The 
+                    </p>
+                    <p class="mt-2 text-sm text-red-500 hidden group-[.submitted]:peer-[:invalid]:block">
+                        Please enter a match.
+                    </p>
+                </div>
+                <div class="relative">
+                    <label for="formAlgorithm" class="text-input-label">Algorithm</label>
+                    <select id="formAlgorithm" name="algorithm" class="peer" data-hs-select='{
+                        "placeholder": "Select option...",
+                        "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
+                        "toggleClasses": "form-select hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 select-input group-[.submitted]:peer-[:invalid]:border-red-500 group-[.submitted]:peer-[:invalid]:ring-red-500",
+                        "dropdownScope": "window",
+                        "wrapperClasses": "peer",
+                        "dropdownClasses": "z-[80] w-full max-h-72 p-1 space-y-0.5 bg-white border border-gray-200 rounded-lg overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700",
+                        "optionClasses": "py-2 px-4 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100 rounded-lg focus:outline-none focus:bg-gray-100 hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800",
+                        "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-blue-600 dark:text-blue-500 \" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>"
+                        }' class="hidden" required>
+                        <option value="">Choose</option>
+                        <option value="any">Match Any Word</option>
+                        <option value="all">Match All Words</option>
+                        <option value="exact">Match Exact Expression</option>
+                        <option value="regex">Match Regex</option>
+                        <option value="fuzzy">Match Roughly</option>
+                    </select>
+                    <p class="text-input-help block group-[.submitted]:peer-has-[:invalid]:hidden">
+                        The algorithm used to filter out content.
+                    </p>
+                    <p class="mt-2 text-sm text-red-500 hidden group-[.submitted]:peer-has-[:invalid]:block">
+                        Please select an option.
+                    </p>
+                </div>
+                <label for="formWhitelist" class="flex gap-4">
+                    <input type="checkbox" id="formWhitelist" name="is_whitelist" class="form-radio relative w-[3.25rem] h-7 p-px bg-gray-100 border-transparent text-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:ring-blue-600 disabled:opacity-50 disabled:pointer-events-none checked:bg-none checked:text-blue-600 checked:border-blue-600 focus:checked:border-blue-600 dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-600 before:inline-block before:size-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:rounded-full before:shadow before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-neutral-400 dark:checked:before:bg-blue-200">
+                    <span class="flex flex-col">
+                        <span class="block text-sm dark:text-neutral-400">Whitelist</span>
+                        <span class="block text-sm text-gray-500 dark:text-neutral-500">Inactive entries will not be processed.</span>
+                    </span>
+                </label>
+                <label for="formInsensitive" class="flex gap-4">
+                    <input type="checkbox" id="formInsensitive" name="is_insensitive" class="form-radio relative w-[3.25rem] h-7 p-px bg-gray-100 border-transparent text-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:ring-blue-600 disabled:opacity-50 disabled:pointer-events-none checked:bg-none checked:text-blue-600 checked:border-blue-600 focus:checked:border-blue-600 dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-600 before:inline-block before:size-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:rounded-full before:shadow before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-neutral-400 dark:checked:before:bg-blue-200">
+                    <span class="flex flex-col">
+                        <span class="block text-sm dark:text-neutral-400">Insensitive</span>
+                        <span class="block text-sm text-gray-500 dark:text-neutral-500">Inactive entries will not be processed.</span>
+                    </span>
+                </label>
+            </form>
+            <div class="flex items-center gap-x-2 mt-8">
+                <button type="button" class="me-auto py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
+                    Templates
+                </button>
+                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" data-hs-overlay="#filterModal">
+                    Close
+                </button>
+                <button type="submit" form="filterForm" class="group-invalid:pointer-events-none group-invalid:opacity-30 py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
+                    Save changes
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- End Popup -->
+
+<script>
+    var guildId = "<%- guild.id %>"
+</script>
+
+<% block("scripts").append('<script defer src="/static/js/guild/filters.js"></script>'); %>

src/client/views/guild/subscriptions.ejs

@@ -3,7 +3,7 @@
 <%- include("guildHeader") -%>
 
 <!-- Table Section -->
-<div id="table" class="--prevent-on-load-init max-w-full overflow-hidden px-4 sm:px-6"> <!-- px-4 py-10 sm:px-6 lg:px-8 lg:py-14 -->
+<div id="table" class="--prevent-on-load-init max-w-full overflow-hidden px-4 sm:px-6">
     <!-- Card -->
     <div class="flex flex-col">
         <div class="-m-1.5">
@@ -238,18 +238,6 @@
                     Manage your RSS feeds with filters and channel targets.
                 </p>
             </div>
-            <!-- <div class="flex justify-between items-center py-3 px-4 border-b dark:border-neutral-700">
-                <h3 id="hs-scale-animation-modal-label" class="font-bold text-gray-800 dark:text-white">
-                    Add Subscription
-                </h3>
-                <button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-gray-100 text-gray-800 hover:bg-gray-200 focus:outline-none focus:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-neutral-400 dark:focus:bg-neutral-600" aria-label="Close" data-hs-overlay="#hs-scale-animation-modal">
-                    <span class="sr-only">Close</span>
-                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <path d="M18 6 6 18"></path>
-                        <path d="m6 6 12 12"></path>
-                    </svg>
-                </button>
-            </div> -->
             <form id="subForm" novalidate class="group grid sm:grid-cols-2 gap-y-4 sm:gap-y-6 md:gap-y-8 gap-x-6 sm:gap-x-8 md:gap-x-10">
                 <div>
                     <label for="formName" class="text-input-label">Name</label>

src/db/migrations/20250213221612_create_filters.ts

@@ -0,0 +1,25 @@
+import type { Knex } from "knex";
+
+const TABLE = "filters";
+
+export async function up(knex: Knex): Promise<void> {
+    await knex.schema.createTable(TABLE, table => {
+        table.increments("id").primary();
+        table.string("guild_id").notNullable();
+        table.string("name").notNullable();
+        table.string("match").notNullable();
+        table.enum("algorithm", [
+            "any", "all", "exact",
+            "regex", "fuzzy"
+        ]).notNullable();
+        table.boolean("is_insensitive").notNullable();
+        table.boolean("is_whitelist").notNullable();
+        table.timestamps(true, true);
+    });
+}
+
+
+export async function down(knex: Knex): Promise<void> {
+    await knex.schema.dropTableIfExists(TABLE);
+}
+

src/db/models/filters.model.ts

@@ -0,0 +1,12 @@
+
+export interface Filter {
+    id: number;
+    guild_id: string;
+    name: string;
+    match: string;
+    algorithm: string;
+    is_insensitive: boolean;
+    is_whitelist: boolean;
+    created_at: Date;
+    updated_at: Date;
+}

src/server/controllers/guild/filter.api.controller.ts

@@ -0,0 +1,63 @@
+import { Request, Response } from "express";
+import { buildDatatableQuery } from "@utils/datatable";
+import { db } from "@db/db";
+import { Filter } from "@db/models/filters.model";
+
+const isPostgres = db.client.config.client === "pg";
+const TABLE = "filters";
+
+export const datatable = async (request: Request, response: Response) => {
+    try {
+
+        let query = db(TABLE).where({ guild_id: request.params.guildId });
+
+        const datatableQuery = await buildDatatableQuery(request as any, query, TABLE);
+        const { recordsTotal, recordsFiltered } = datatableQuery;
+        const data = await datatableQuery.query;
+
+        console.debug(`total: ${recordsTotal} filtered: ${recordsFiltered} filtered+paged: ${data.length}`);
+
+        response.json({
+            data,
+            recordsFiltered,
+            recordsTotal,
+        });
+    }
+    catch (error) {
+        console.error(error);
+        response.status(500).json({ error: "Failed to fetch datatable for filters" });
+    }
+}
+
+export const post = async (request: Request, response: Response) => {
+    try {
+        console.debug(JSON.stringify(request.body, null, 4));
+
+        const guild_id = request.params.guildId;
+        const { name, match, algorithm, is_insensitive, is_whitelist } = request.body;
+
+        if (!name || !match || !algorithm) {
+            response.status(400).json({ error: "Missing required fields" });
+            return;
+        }
+
+        const [filter] = await db<Filter>(TABLE)
+            .insert({
+                guild_id,
+                name,
+                match,
+                algorithm,
+                is_insensitive: is_insensitive == "on",
+                is_whitelist: is_whitelist == "on"
+            })
+            .returning("*");
+
+            response.status(201).json(filter);
+    }
+    catch (error) {
+        console.error(error);
+        response.status(500).json({ error: "Failed to create Filter" });
+    }
+}
+
+export default { datatable, post }

src/server/routes/guild.api.routes.ts

@@ -1,11 +1,18 @@
 import { Router } from "express";
 
 import subApiController from "@server/controllers/guild/sub.api.controller";
+import filterApiController from "@server/controllers/guild/filter.api.controller";
 
 const router = Router();
+
 router.get("/:guildId/subscriptions/api/datatable", subApiController.datatable);
 router.get("/:guildId/subscriptions/api", subApiController.get);
 router.post("/:guildId/subscriptions/api", subApiController.post);
 router.delete("/:guildId/subscriptions/api", subApiController.del);
 
+router.get("/:guildId/filters/api/datatable", filterApiController.datatable);
+// router.get("/:guildId/filters/api", filterApiController.get);
+router.post("/:guildId/filters/api", filterApiController.post);
+// router.delete("/:guildId/filters/api", filterApiController.del);
+
 export default router;