datatable code for subscriptions

src/client/public/css/tailwind.css

@@ -1119,10 +1119,6 @@ select {
   height: 100%;
 }
 
-.h-px {
-  height: 1px;
-}
-
 .h-screen {
   height: 100vh;
 }
@@ -1131,6 +1127,10 @@ select {
   max-height: 100%;
 }
 
+.min-h-\[400px\] {
+  min-height: 400px;
+}
+
 .\!w-2\.5 {
   width: 0.625rem !important;
 }
@@ -1151,10 +1151,6 @@ select {
   width: 15rem;
 }
 
-.w-72 {
-  width: 18rem;
-}
-
 .w-\[260px\] {
   width: 260px;
 }
@@ -1179,10 +1175,6 @@ select {
   min-width: 15rem;
 }
 
-.min-w-72 {
-  min-width: 18rem;
-}
-
 .min-w-full {
   min-width: 100%;
 }
@@ -1294,6 +1286,10 @@ select {
   gap: 0.25rem;
 }
 
+.gap-2 {
+  gap: 0.5rem;
+}
+
 .gap-3 {
   gap: 0.75rem;
 }
@@ -1543,11 +1539,6 @@ select {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
 
-.bg-yellow-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
-}
-
 .bg-opacity-50 {
   --tw-bg-opacity: 0.5;
 }
@@ -1877,11 +1868,6 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
-.text-yellow-800 {
-  --tw-text-opacity: 1;
-  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
-}
-
 .opacity-0 {
   opacity: 0;
 }
@@ -2860,10 +2846,6 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
   background-color: rgb(20 184 166 / 0.1);
 }
 
-.dark\:bg-yellow-500\/10:where(.dark, .dark *) {
-  background-color: rgb(234 179 8 / 0.1);
-}
-
 .dark\:bg-opacity-80:where(.dark, .dark *) {
   --tw-bg-opacity: 0.8;
 }
@@ -2934,11 +2916,6 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
   color: rgb(255 255 255 / 0.6);
 }
 
-.dark\:text-yellow-500:where(.dark, .dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
-}
-
 .dark\:placeholder-neutral-500:where(.dark, .dark *)::-moz-placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(115 115 115 / var(--tw-placeholder-opacity, 1));

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

@@ -1,18 +1,212 @@
 
-// Filter by status
+// // Filter by status
-(function () {
+// (function () {
-    const radioButtons = document.querySelectorAll('input[type="radio"][name="filter"]');
+//     const radioButtons = document.querySelectorAll('input[type="radio"][name="filter"]');
-    const { dataTable } = new HSDataTable('#table');
+//     const { dataTable } = new HSDataTable('#table');
-  
+
-    dataTable.search.fixed('status', function (searchStr, data, index) {
+//     dataTable.search.fixed('status', function (searchStr, data, index) {
-        const status = data[2].trim().toLowerCase(); // Adjust index based on your dataset
+//         const status = data[2].trim().toLowerCase(); // Adjust index based on your dataset
         
-        if (radioButtons[0].checked && status === 'active') return true;
+//         if (radioButtons[0].checked && status === 'active') return true;
-        if (radioButtons[1].checked && status === 'inactive') return true;
+//         if (radioButtons[1].checked && status === 'inactive') return true;
-        return false;
+//         return false;
-    });
+//     });
   
-    radioButtons.forEach(radio => {
+//     radioButtons.forEach(radio => {
-        radio.addEventListener('change', () => dataTable.draw());
+//         radio.addEventListener('change', () => dataTable.draw());
-    });
+//     });
-})();
+// })();
+
+// const { dataTable } = HSDataTable.getInstance("#table");
+
+// dataTable.on("draw.dt", () => {
+//     console.log("Table redrawn")
+// });
+
+
+const defineTable = () => {
+    new HSDataTable("#table", {
+        ajax: {
+            url: `/guild/${guild}/subscriptions/api`,
+            dataSrc: "data"
+        },
+        serverSide: true,
+        processing: true,
+        selecting: true,
+        rowSelectingOptions: {
+            selectAllSelector: "#selectAllBox"
+        },
+        language: {
+            zeroRecords: `
+                <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 subscription and it will appear here.
+                    </p>
+        
+                    <div class="mt-5 flex flex-col sm:flex-row gap-2">
+                        <button type="button" class="openSubModal-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">
+                            <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 subscription
+                        </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>
+            `
+        },
+        rowCallback: (row, data, index) => {
+            $(row).addClass("bg-white hover:bg-gray-50 dark:bg-neutral-900 dark:hover:bg-neutral-800");
+        },
+        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-3">
+                            <label for="rowSelect${row.id}-js" class="flex">
+                                <input type="checkbox" id="rowSelect${row.id}-js" class="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, type, row) => {
+                    return `
+                        <td class="size-px whitespace-nowrap align-top">
+                            <a href="#" class="block p-6 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">
+                                ${row.name}
+                            </a>
+                        </td>
+                    `;
+                }
+            },
+            {
+                // Url
+                targets: 2,
+                data: "url",
+                orderable: true,
+                searchable: true,
+                render: (data, type, row) => {
+                    return `
+                        <td class="size-px whitespace-nowrap align-top">
+                            <a href="${row.url}" class="block p-6 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">
+                                ${row.url}
+                            </a>
+                        </td>
+                    `;
+                }
+            },
+            {
+                // Channels
+                target: 3,
+                data: "channels",
+                orderable: false,
+                searchable: false,
+                render: (data, type, row) => {
+                    return `
+
+                    `;
+                }
+            },
+            {
+                // Filters
+                target: 4,
+                data: "filters",
+                orderable: false,
+                searchable: false,
+                render: (data, type, row) => {
+                    return `
+
+                    `;
+                }
+            },
+            {
+                // Style
+                target: 5,
+                style: "style",
+                orderable: false,
+                searchable: false,
+                render: (data, type, row) => {
+                    return `
+
+                    `;
+                }
+            },
+            {
+                // Created At
+                target: 6,
+                data: "created_at",
+                orderable: true,
+                searchable: true,
+                render: (data, type, row) => {
+                    // 30th, Jan 2025
+                    return `
+                        <td class="size-px whitespace-nowrap align-top">
+                            <div class="p-6">
+                                <span class="text-sm text-gray-500 dark:text-neutral-500 text-nowrap">
+                                    ${row.created_at}
+                                </span>
+                            </div>
+                        </td>
+                    `;
+                }
+            }
+            ,
+            {
+                // Status
+                target: 7,
+                data: "active",
+                orderable: true,
+                searchable: true,
+                render: (data, type, row) => {
+                    if (!row.active) {
+                        return `
+                            <div class="p-6">
+                                <span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-red-100 text-red-800 rounded-full dark:bg-red-500/10 dark:text-red-500">
+                                    <svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
+                                    </svg>
+                                    Inactive
+                                </span>
+                            </div>
+                        `;
+                    }
+                    return `
+                        <div class="p-6">
+                            <span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-teal-100 text-teal-800 rounded-full dark:bg-teal-500/10 dark:text-teal-500">
+                                <svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
+                                </svg>
+                                Active
+                            </span>
+                        </div>
+                    `;
+                }
+            }
+        ]
+    })
+}
+
+
+$(window).ready(() => {
+    setTimeout(defineTable, 100);
+}); 

src/client/views/guild/subscriptions.ejs

@@ -5,12 +5,7 @@
 <!-- Table Section -->
 <div id="table" class="max-w-full overflow-hidden p-4 sm:p-6"> <!-- px-4 py-10 sm:px-6 lg:px-8 lg:py-14 -->
     <!-- Card -->
-    <div class="flex flex-col" data-hs-datatable='{
+    <div class="flex flex-col">
-        "selecting": true,
-        "rowSelectingOptions": {
-            "selectAllSelector": "#selectAllBox"
-        }
-    }'>
         <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-md shadow-sm overflow-hidden dark:bg-neutral-900 dark:border-neutral-700">
@@ -18,9 +13,9 @@
                     <div class="px-6 py-4 gap-3 flex flex-nowrap justify-between items-center border-gray-200 dark:border-neutral-700">
                         <!-- Input -->
                         <div class="hidden sm:block sm:col-span-1">
-                            <label for="hs-as-table-product-review-search" class="sr-only">Search</label>
+                            <label for="search" class="sr-only">Search</label>
                             <div class="relative">
-                                <input type="text" id="hs-as-table-product-review-search" name="hs-as-table-product-review-search" class="py-2 px-3 ps-11 block w-full border-gray-200 rounded-md 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">
+                                <input type="text" id="search" name="search" class="py-2 px-3 ps-11 block w-full border-gray-200 rounded-md 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>
@@ -88,9 +83,9 @@
                                           <input type="checkbox" id="selectAllBox" class="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>
 
-                                    <th scope="col" class="px-6 py-3 text-start">
+                                    <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
@@ -115,38 +110,38 @@
                                     </th>
                     
                                     <th scope="col" class="px-6 py-3 text-start">
-                                        <div class="flex justify-between items-center gap-x-2 cursor-pointer">
+                                        <div class="flex justify-between items-center gap-x-2">
                                             <span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
                                                 Channels
                                             </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">
+                                            <!-- <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>
+                                            </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">
+                                        <div class="flex justify-between items-center gap-x-2">
                                             <span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
                                                 Filters
                                             </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">
+                                            <!-- <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>
+                                            </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">
+                                        <div class="flex justify-between items-center gap-x-2">
                                             <span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
                                                 Style
                                             </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">
+                                            <!-- <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>
+                                            </svg> -->
                                         </div>
                                     </th>
     
@@ -178,293 +173,6 @@
                             </thead>
         
                             <tbody class="divide-y divide-gray-200 dark:divide-neutral-700">
-
-                                <tr class="bg-white hover:bg-gray-50 dark:bg-neutral-900 dark:hover:bg-neutral-800">
-
-                                    <td class="size-px whitespace-nowrap">
-                                        <div class="ps-6 py-3">
-                                          <label for="hs-at-with-checkboxes-1" class="flex">
-                                            <input type="checkbox" class="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" id="hs-at-with-checkboxes-1" data-hs-datatable-row-selecting-individual="">
-                                            <span class="sr-only">Checkbox</span>
-                                          </label>
-                                        </div>
-                                    </td>
-
-                                    <td class="size-px whitespace-nowrap align-top">
-                                        <a href="#" class="block p-6 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">
-                                            BBC News · Top Stories
-                                        </a>
-                                    </td>
-
-                                    <td class="size-px whitespace-nowrap align-top">
-                                        <a href="#" class="block p-6 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">
-                                            https://bbci.co.uk/feeds/news/rss.xml
-                                        </a>
-                                    </td>
-
-                                    <td>
-
-                                    </td>
-
-                                    <td>
-
-                                    </td>
-
-                                    <td>
-
-                                    </td>
-
-                                    <td class="size-px whitespace-nowrap align-top">
-                                        <div class="p-6">
-                                            <span class="text-sm text-gray-500 dark:text-neutral-500">
-                                                30th, Jan 2025
-                                            </span>
-                                        </div>
-                                    </td>
-
-                                    <td class="size-px whitespace-nowrap align-top">
-                                        <div class="p-6">
-                                            <span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-teal-100 text-teal-800 rounded-full dark:bg-teal-500/10 dark:text-teal-500">
-                                                <svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-                                                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
-                                                </svg>
-                                                Active
-                                            </span>
-                                        </div>
-                                    </td>
-
-                                </tr>
-
-                                <tr class="bg-white hover:bg-gray-50 dark:bg-neutral-900 dark:hover:bg-neutral-800">
-
-                                    <td class="size-px whitespace-nowrap">
-                                        <div class="ps-6 py-3">
-                                          <label for="hs-at-with-checkboxes-2" class="flex">
-                                            <input type="checkbox" class="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" id="hs-at-with-checkboxes-2" data-hs-datatable-row-selecting-individual="">
-                                            <span class="sr-only">Checkbox</span>
-                                          </label>
-                                        </div>
-                                    </td>
-
-                                    <td class="size-px whitespace-nowrap align-top">
-                                        <a href="#" class="block p-6 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">
-                                            Sky News
-                                        </a>
-                                    </td>
-
-                                    <td class="size-px whitespace-nowrap align-top">
-                                        <a href="#" class="block p-6 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">
-                                            https://sky.co.uk/feeds/news/rss.xml
-                                        </a>
-                                    </td>
-
-                                    <td>
-
-                                    </td>
-
-                                    <td>
-
-                                    </td>
-
-                                    <td>
-
-                                    </td>
-
-                                    <td class="size-px whitespace-nowrap align-top">
-                                        <div class="p-6">
-                                            <span class="text-sm text-gray-500 dark:text-neutral-500">
-                                                30th, Jan 2025
-                                            </span>
-                                        </div>
-                                    </td>
-
-                                    <td class="size-px whitespace-nowrap align-top">
-                                        <div class="p-6">
-                                            <span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-red-100 text-red-800 rounded-full dark:bg-red-500/10 dark:text-red-500">
-                                                <svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-                                                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
-                                                </svg>
-                                                Inactive
-                                            </span>
-                                        </div>
-                                    </td>
-
-                                </tr>
-
-                                <tr class="bg-white hover:bg-gray-50 dark:bg-neutral-900 dark:hover:bg-neutral-800">
-
-                                    <td class="size-px whitespace-nowrap">
-                                        <div class="ps-6 py-3">
-                                          <label for="hs-at-with-checkboxes-3" class="flex">
-                                            <input type="checkbox" class="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" id="hs-at-with-checkboxes-3" data-hs-datatable-row-selecting-individual="">
-                                            <span class="sr-only">Checkbox</span>
-                                          </label>
-                                        </div>
-                                    </td>
-
-                                    <td class="size-px whitespace-nowrap align-top">
-                                        <a href="#" class="block p-6 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">
-                                            Fox News
-                                        </a>
-                                    </td>
-
-                                    <td class="size-px whitespace-nowrap align-top">
-                                        <a href="#" class="block p-6 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">
-                                            https://fox.com/feeds/news/rss.xml
-                                        </a>
-                                    </td>
-
-                                    <td>
-
-                                    </td>
-
-                                    <td>
-
-                                    </td>
-
-                                    <td>
-
-                                    </td>
-
-                                    <td class="size-px whitespace-nowrap align-top">
-                                        <div class="p-6">
-                                            <span class="text-sm text-gray-500 dark:text-neutral-500">
-                                                30th, Jan 2025
-                                            </span>
-                                        </div>
-                                    </td>
-
-                                    <td class="size-px whitespace-nowrap align-top">
-                                        <div class="p-6">
-                                            <span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-teal-100 text-teal-800 rounded-full dark:bg-teal-500/10 dark:text-teal-500">
-                                                <svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-                                                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
-                                                </svg>
-                                                Active
-                                            </span>
-                                        </div>
-                                    </td>
-
-                                </tr>
-
-                                <tr class="bg-white hover:bg-gray-50 dark:bg-neutral-900 dark:hover:bg-neutral-800">
-
-                                    <td class="size-px whitespace-nowrap">
-                                        <div class="ps-6 py-3">
-                                          <label for="hs-at-with-checkboxes-1" class="flex">
-                                            <input type="checkbox" class="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" id="hs-at-with-checkboxes-1" data-hs-datatable-row-selecting-individual="">
-                                            <span class="sr-only">Checkbox</span>
-                                          </label>
-                                        </div>
-                                    </td>
-
-                                    <td class="size-px whitespace-nowrap align-top">
-                                        <a href="#" class="block p-6 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">
-                                            News Agency 40
-                                        </a>
-                                    </td>
-
-                                    <td class="size-px whitespace-nowrap align-top">
-                                        <a href="#" class="block p-6 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">
-                                            https://news.co.uk/feeds/news/rss.xml
-                                        </a>
-                                    </td>
-
-                                    <td>
-
-                                    </td>
-
-                                    <td>
-
-                                    </td>
-
-                                    <td>
-
-                                    </td>
-
-                                    <td class="size-px whitespace-nowrap align-top">
-                                        <div class="p-6">
-                                            <span class="text-sm text-gray-500 dark:text-neutral-500">
-                                                30th, Jan 2025
-                                            </span>
-                                        </div>
-                                    </td>
-
-                                    <td class="size-px whitespace-nowrap align-top">
-                                        <div class="p-6">
-                                            <span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded-full dark:bg-yellow-500/10 dark:text-yellow-500">
-                                                <svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-                                                    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"></path>
-                                                </svg>
-                                                Warning
-                                            </span>
-                                        </div>
-                                    </td>
-
-                                </tr>
-    
-                                <!-- <tr class="bg-white hover:bg-gray-50 dark:bg-neutral-900 dark:hover:bg-neutral-800">
-                                    <td class="size-px whitespace-nowrap align-top">
-                                        <a class="block p-6" href="#">
-                                            <div class="flex items-center gap-x-4">
-                                                <img class="shrink-0 size-[38px] rounded-lg" src="https://images.unsplash.com/photo-1572307480813-ceb0e59d8325?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
-                                                <div>
-                                                    <span class="block text-sm font-semibold text-gray-800 dark:text-neutral-200">Brown Hat</span>
-                                                </div>
-                                            </div>
-                                        </a>
-                                    </td>
-                                    <td class="size-px whitespace-nowrap align-top">
-                                        <a class="block p-6" href="#">
-                                            <div class="flex items-center gap-x-3">
-                                                <img class="inline-block size-[38px] rounded-full" src="https://images.unsplash.com/photo-1531927557220-a9e23c1e4794?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Product Image">
-                                                <div class="grow">
-                                                    <span class="block text-sm font-semibold text-gray-800 dark:text-neutral-200">Christina Bersh</span>
-                                                    <span class="block text-sm text-gray-500 dark:text-neutral-500">christina@site.com</span>
-                                                </div>
-                                            </div>
-                                        </a>
-                                    </td>
-                                    <td class="h-px w-72 min-w-72 align-top">
-                                        <a class="block p-6" href="#">
-                                            <div class="flex gap-x-1 mb-2">
-                                                <svg class="shrink-0 size-3 text-gray-800 dark:text-neutral-200" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-                                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
-                                                </svg>
-                                                <svg class="shrink-0 size-3 text-gray-800 dark:text-neutral-200" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-                                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
-                                                </svg>
-                                                <svg class="shrink-0 size-3 text-gray-800 dark:text-neutral-200" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-                                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
-                                                </svg>
-                                                <svg class="shrink-0 size-3 text-gray-800 dark:text-neutral-200" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-                                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
-                                                </svg>
-                                                <svg class="shrink-0 size-3 text-gray-800 dark:text-neutral-200" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-                                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
-                                                </svg>
-                                            </div>
-                                            <span class="block text-sm font-semibold text-gray-800 dark:text-neutral-200">I just love it!</span>
-                                            <span class="block text-sm text-gray-500 dark:text-neutral-500">I bought this hat for my boyfriend, but then i found out he cheated on me so I kept it and I love it!! I wear it all the time and there is no problem with the fit even though its a mens" hat.</span>
-                                        </a>
-                                    </td>
-                                    <td class="size-px whitespace-nowrap align-top">
-                                        <a class="block p-6" href="#">
-                                            <span class="text-sm text-gray-600 dark:text-neutral-400">10 Jan 2022</span>
-                                        </a>
-                                    </td>
-                                    <td class="size-px whitespace-nowrap align-top">
-                                        <a class="block p-6" href="#">
-                                            <span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-teal-100 text-teal-800 rounded-full dark:bg-teal-500/10 dark:text-teal-500">
-                                                <svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-                                                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
-                                                </svg>
-                                                Published
-                                            </span>
-                                        </a>
-                                    </td>
-                                </tr> -->
-      
                             </tbody>
                         </table>
                         <!-- End Table -->
@@ -515,4 +223,6 @@
 </div>
 <!-- End Table Section -->
 
-<% block("scripts").append('<script src="/static/js/guild/subscriptions.js"></script>'); %>
+<script>var guild = "<%- guild %>"</script>
+
+<% block("scripts").append('<script defer src="/static/js/guild/subscriptions.js"></script>'); %>

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

@@ -1,14 +1,20 @@
 import { Request, Response } from "express";
-import { Subscription } from "@db/models/subs.model";
+import { buildDatatableQuery } from "@utils/datatable";
-import { db } from "@db/db";
 
 export const get = async (request: Request, response: Response) => {
     try {
-        const subscriptions = await db<Subscription>("subscriptions")
+        const { query, recordsTotal, recordsFiltered } = await buildDatatableQuery(
-            .select("*")
+            request as any,
-            .where({ guild_id: request.params.guildId });
+            "subscriptions"
+        );
 
-        response.json(subscriptions);
+        const data = await query.where({ guild_id: request.params.guildId });
+
+        response.json({
+            data,
+            recordsTotal,
+            recordsFiltered
+        });
     }
     catch (error) {
         console.error(error);