Add a time range filter under invoices.

assets/scripts/tableify.js

@@ -15,7 +15,7 @@ window.Tableify = class Tableify {
       const filterType = $(th).attr("mft-filter-type");
 
       // Add filter icon if filters are defined
-      if (colFilters || filterType === "searchable" || filterType === "searchable-amount" || filterType === "normal") {
+      if (colFilters || filterType === "searchable" || filterType === "searchable-amount" || filterType === "normal" || filterType === "searchable-dateRange") {
         const filterIcon = $('<i class="fa fa-filter ml-2 cursor-pointer"></i>');
         const countBadge = $('<span class="filter-count hidden ml-1 badge badge-primary"></span>');
         $(th).append(filterIcon).append(countBadge);
@@ -79,7 +79,15 @@ window.Tableify = class Tableify {
             return parsedValue >= maxFilter;
           } else if (filterType === "searchable") {
             return cellText.toLowerCase().includes(this.filters[colName][0].toLowerCase());
-          } else if (filterType === "searchable-amount") {
+          }  else if (filterType === "searchable-dateRange") {
+            const [startStr, endStr] = this.filters[colName];
+            const startDate = parseDDMMYYYY(startStr);
+            const endDate = parseDDMMYYYY(endStr);
+            const cellDate = parseDDMMYYYY(cellValue);
+            if (startDate !== null && cellDate < startDate) return false;
+            if (endDate !== null && cellDate > endDate) return false;
+            return cellText;
+          }else if (filterType === "searchable-amount") {
             const inputValue = this.filters[colName][0];
 
             // Handle both exact match and greater than
@@ -101,6 +109,13 @@ window.Tableify = class Tableify {
       });
     }
 
+
+    function parseDDMMYYYY(str) {
+      if (!str) return null;
+      const [day, month, year] = str.split('/');
+      return new Date(`${year}-${month}-${day}`);
+    }
+
     // Handle sorting if a column is selected for sorting
     if (this.currentSort) {
       const sortedRows = rows.toArray().sort((a, b) => {
@@ -127,7 +142,7 @@ window.Tableify = class Tableify {
     const filterType = $(element).attr("mft-filter-type");
 
     // Do nothing if there are no filters or search options defined
-    if (!colFilters && (filterType !== "searchable" && filterType !== "searchable-amount" && filterType !== "normal")) {
+    if (!colFilters && (filterType !== "searchable" && filterType !== "searchable-amount" && filterType !== "normal" && filterType !== "searchable-dateRange")) {
       return;
     }
 
@@ -163,6 +178,45 @@ window.Tableify = class Tableify {
           this.redraw();
         });
         dropdown.append(searchInput);
+      } else if (filterType === "searchable-dateRange") {
+        const startInput = $(`<input type="date" class="input input-bordered w-3/7 input-sm"/>`);
+        const separator = $(`<span class="mx-2 text-sm text-gray-500 self-center">~</span>`);
+        const endInput = $(`<input type="date" class="input input-bordered w-3/7 input-sm"/>`);
+        const dateRangeWrapper = $('<div class="flex items-center justify-between gap-2" />');
+        dateRangeWrapper.append(startInput, separator, endInput);
+        const updateDateFilter = () => {
+          const startDate = startInput.val(); // yyyy-MM-dd
+          const endDate = endInput.val();
+
+          if (startDate || endDate) {
+            const formatToDDMMYYYY = (dateStr) => {
+              if (!dateStr) return null;
+              const [yyyy, mm, dd] = dateStr.split("-");
+              return `${dd}/${mm}/${yyyy}`; // dd-MM-yyyy
+            };
+
+            this.filters[colName] = [
+              formatToDDMMYYYY(startDate),
+              formatToDDMMYYYY(endDate),
+            ];
+          } else {
+            delete this.filters[colName];
+          }
+
+          this.redraw();
+        };
+
+        startInput.on("change", (e) => {
+          e.stopPropagation();
+          updateDateFilter();
+        });
+
+        endInput.on("change", (e) => {
+          e.stopPropagation();
+          updateDateFilter();
+        });
+
+        dropdown.append(dateRangeWrapper);
       } else if (filterType === "searchable-amount") {
         // Create numeric input for searchable-amount columns
         const amountInput = $(`<input type="text" class="input input-bordered w-full input-sm" placeholder="Enter amount or amount+ for greater..." />`);

frontend/templates/pages/invoices/recurring/dashboard/dashboard.html

@@ -58,7 +58,7 @@ <h2 class="text-xl" data-oob="recurring-invoices-title">Recurring Invoices</h2>
             <thead>
                 <tr>
                     <th mft-col-name="id" mft-filter-type="searchable-amount">Profile ID</th>
-                    <th mft-col-name="end_date" mft-filter-type="searchable">End Date</th>
+                    <th mft-col-name="end_date" mft-filter-type="searchable-dateRange">End Date</th>
                     <th mft-col-name="client_name" mft-filter-type="searchable">Client Name</th>
                     <th mft-col-name="amount" mft-filter-type="searchable-amount">Amount</th>
                     <th mft-col-name="status"

frontend/templates/pages/invoices/single/dashboard/dashboard.html

@@ -73,7 +73,7 @@ <h2 class="text-xl" data-oob="invoices-title">Invoices</h2>
             <thead>
                 <tr>
                     <th mft-col-name="invoice-id" mft-filter-type="searchable-amount">Invoice ID</th>
-                    <th mft-col-name="due_date" mft-filter-type="searchable">Due Date</th>
+                    <th mft-col-name="due_date" mft-filter-type="searchable-dateRange">Due Date</th>
                     <th mft-col-name="client_name" mft-filter-type="searchable">Client Name</th>
                     <th mft-col-name="amount" mft-filter-type="searchable-amount">Amount</th>
                     <th mft-col-name="status"