add filter date PO

src/routes/backoffice/purchaseorder/+page.svelte

@@ -250,6 +250,19 @@
     let selectedVillaId: string | null = null;
     let searchTerm: string = "";
     let showPreparedModal = false;
+    let selectedMonth: string = ""; // "01".."12"
+    let selectedYear: string = "";  // "2022".."2025"
+
+    const months = [
+    { label: "Jan", value: "01" }, { label: "Feb", value: "02" },
+    { label: "Mar", value: "03" }, { label: "Apr", value: "04" },
+    { label: "May", value: "05" }, { label: "Jun", value: "06" },
+    { label: "Jul", value: "07" }, { label: "Aug", value: "08" },
+    { label: "Sep", value: "09" }, { label: "Oct", value: "10" },
+    { label: "Nov", value: "11" }, { label: "Dec", value: "12" },
+    ];
+
+    const years = ["2022","2023","2024","2025"];
     let selectedStatus: string | null = null;
     let selectedPO: string | null = null;
     let preparedByOptions: any[] = [];
@@ -321,7 +334,7 @@
             sortColumn = column;
             sortOrder = "asc";
         }
-        fetchPurchaseOrder(selectedVillaId, searchTerm, sortColumn, sortOrder);
+        refresh();
     }
 
     // Function to format numbers as ordinal (1st, 2nd, 3rd, etc.)
@@ -376,7 +389,17 @@
 
         return range;
     }
-
+    function refresh() {
+        fetchPurchaseOrder(
+            selectedVillaId,
+            searchTerm,
+            sortColumn,
+            sortOrder,
+            (currentPage - 1) * rowsPerPage,
+            rowsPerPage,
+            selectedStatus
+        );
+    }
     function changePage(page: number) {
         if (page < 1 || page > totalPages || page === currentPage) return;
         currentPage = page;
@@ -590,7 +613,7 @@
         }
 
         showPaymentModal = false;
-        await fetchPurchaseOrder();
+        await refresh();
     }
     // Save approval for purchase order
     async function saveApproval() {
@@ -614,7 +637,7 @@
         }
 
         showApprovalModal = false;
-        await fetchPurchaseOrder();
+        await refresh();
     }
     // populate dropdowns for adding purchase orders
     async function fetchDropdowns() {
@@ -793,7 +816,7 @@
             alert("Saved, but webhook failed.");
         }
         showCompletedModal = false;
-        await fetchPurchaseOrder();
+        await refresh();
     }
     // open prepared modal for purchase order
     async function openPreparedModal(row) {
@@ -871,6 +894,28 @@
         if (poStatus) {
             query = query.eq("po_status", poStatus);
         }
+        // 🔎 Month/Year filtering using requested_date
+        if (selectedYear || selectedMonth) {
+            // If month picked but year not, use current year
+            const year = selectedYear || String(new Date().getFullYear());
+
+            if (selectedMonth) {
+                // Filter just that month (inclusive start, exclusive end)
+                const start = `${year}-${selectedMonth}-01`;
+                // Compute next month
+                const monthIndex = Number(selectedMonth) - 1; // 0..11
+                const next = new Date(Number(year), monthIndex + 1, 1);
+                const end = `${next.getFullYear()}-${String(next.getMonth() + 1).padStart(2,"0")}-01`;
+
+                query = query.gte("requested_date", start).lt("requested_date", end);
+            } else {
+                // Year only: Jan 1 .. Jan 1 next year
+                const start = `${year}-01-01`;
+                const end = `${Number(year) + 1}-01-01`;
+                query = query.gte("requested_date", start).lt("requested_date", end);
+            }
+        }
+
 
         const { data, count, error } = await query;
 
@@ -930,7 +975,7 @@
     });
 
     $: totalPages = Math.ceil(totalItems / rowsPerPage);
-    $: currentPage = 1;
+//    $: currentPage = 1;
 
     //fetch all issues
     async function fetchIssues() {
@@ -1033,7 +1078,7 @@
             alert("Save worked but webhook failed.");
         }
         showPreparedModal = false;
-        await fetchPurchaseOrder();
+        await refresh();
     }
     // Save project function
     async function saveProject() {
@@ -1154,7 +1199,7 @@
             alert("Saved, but webhook failed.");
         }
         showReceivedModal = false;
-        await fetchPurchaseOrder();
+        await refresh();
     }
     // Save acknowledged purchase order
     async function saveAcknowledged() {
@@ -1202,7 +1247,7 @@
         }
 
         showAcknowledgedModal = false;
-        await fetchPurchaseOrder();
+        await refresh();
     }
     // Print purchase order
     async function printPO(row) {
@@ -1262,15 +1307,8 @@
                     searchTerm = (
                         e.target as HTMLInputElement
                     ).value.toLowerCase();
-                    fetchPurchaseOrder(
-                        selectedVillaId,
-                        searchTerm,
-                        sortColumn,
-                        sortOrder,
-                        currentPage - 1,
-                        rowsPerPage,
-                        selectedStatus,
-                    );
+                    currentPage = 1;
+                    refresh();
                 }}
             />
 
@@ -1279,15 +1317,8 @@
                 class="border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:outline-none px-4 py-2 rounded-xl text-sm w-48 transition"
                 bind:value={selectedVillaId}
                 on:change={() => {
-                    fetchPurchaseOrder(
-                        selectedVillaId,
-                        searchTerm,
-                        sortColumn,
-                        sortOrder,
-                        currentPage - 1,
-                        rowsPerPage,
-                        selectedStatus,
-                    );
+                  currentPage = 1;
+                  refresh();
                 }}
             >
                 <option value="">All Villas</option>
@@ -1301,16 +1332,9 @@
                 class="border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:outline-none px-4 py-2 rounded-xl text-sm w-48 transition"
                 bind:value={selectedStatus}
                 on:change={(e) => {
-                    selectedStatus = (e.target as HTMLSelectElement).value;
-                    fetchPurchaseOrder(
-                        selectedVillaId,
-                        searchTerm,
-                        sortColumn,
-                        sortOrder,
-                        currentPage - 1,
-                        rowsPerPage,
-                        selectedStatus,
-                    );
+                  selectedStatus = (e.target as HTMLSelectElement).value;
+                  currentPage = 1;
+                  refresh();
                 }}
             >
                 <option value="">All Statuses</option>
@@ -1543,6 +1567,31 @@
 
     <!-- Pagination controls -->
     <div class="flex justify-between items-center text-sm">
+        <div>
+            <select
+                class="border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:outline-none px-4 py-2 rounded-xl text-sm w-32 transition"
+                bind:value={selectedMonth}
+                on:change={() => { currentPage = 1; refresh(); }}
+                >
+                <option value="">All Months</option>
+                {#each months as m}
+                    <option value={m.value}>{m.label}</option>
+                {/each}
+                </select>
+
+                <!-- 📆 Year Filter -->
+                <select
+                class="border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:outline-none px-4 py-2 rounded-xl text-sm w-28 transition"
+                bind:value={selectedYear}
+                on:change={() => { currentPage = 1; refresh(); }}
+                >
+                <option value="">All Years</option>
+                {#each years as y}
+                    <option value={y}>{y}</option>
+                {/each}
+            </select>
+        </div>
+        
         <div>
             Showing {(currentPage - 1) * rowsPerPage + 1}–
             {Math.min(currentPage * rowsPerPage, totalItems)} of {totalItems} items
@@ -1556,16 +1605,8 @@
                     class="border border-gray-300 px-2 py-1 rounded text-sm"
                     bind:value={rowsPerPage}
                     on:change={() => {
-                        currentPage = 1; // Reset to first page on change
-                        fetchPurchaseOrder(
-                            selectedVillaId,
-                            searchTerm,
-                            sortColumn,
-                            sortOrder,
-                            0,
-                            rowsPerPage,
-                            selectedStatus,
-                        );
+                      currentPage = 1;
+                      refresh();
                     }}
                 >
                     {#each [10, 20, 50, 100] as option}