add status filter

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

@@ -237,7 +237,8 @@
     let selectedVillaId: string | null = null;
     let searchTerm: string = "";
     let showPreparedModal = false;
-    let selectedPO = null;
+    let selectedStatus: string | null = null;
+    let selectedPO: string | null =  null;
     let preparedByOptions: any[] = [];
     let vendorOptions: any[] = [];
     let preparedForm = {
@@ -301,6 +302,7 @@
     }
     fetchPurchaseOrder(
         selectedVillaId,
+        selectedStatus,
         searchTerm,
         sortColumn,
         sortOrder,
@@ -718,6 +720,7 @@
         order: "asc" | "desc" = "desc",
         offset: number = 0,
         limit: number = 1000,
+        poStatus: string | null = null,
     ) {
         let query = supabase
             .from("vb_purchaseorder_data")
@@ -736,6 +739,9 @@
                     `po_item.ilike.%${search}%`
                 );
             }
+            if (poStatus) {
+                query = query.eq("po_status", poStatus);
+            }
 
         const { data, error } = await query;
 
@@ -1069,36 +1075,72 @@
             </p>
         </div>
         <div class="flex flex-col sm:flex-row sm:items-center gap-2">
-            <input
+                <input
                 type="text"
                 placeholder="🔍 Search by name..."
                 class="border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:outline-none px-4 py-2 rounded-xl text-sm w-64 transition"
+                bind:value={searchTerm}
                 on:input={(e) => {
-                    const searchTerm = (
-                        e.target as HTMLInputElement
-                    ).value.toLowerCase();
-                    fetchPurchaseOrder(null, searchTerm, "created_at", "desc");
+                    searchTerm = (e.target as HTMLInputElement).value.toLowerCase();
+                    fetchPurchaseOrder(
+                    selectedVillaId,
+                    searchTerm,
+                    sortColumn,
+                    sortOrder,
+                    0,
+                    1000,
+                    selectedStatus
+                    );
                 }}
-            />
+                />
+          
+            <!-- 🏡 Villa 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-48 transition"
+              bind:value={selectedVillaId}
+              on:change={() => {
+                fetchPurchaseOrder(selectedVillaId, searchTerm, sortColumn, sortOrder, 0, 1000, selectedStatus);
+              }}
+            >
+              <option value="">All Villas</option>
+              {#each villaOptions as villa}
+                <option value={villa.id}>{villa.villa_name}</option>
+              {/each}
+            </select>
+          
+            <!-- 📦 PO Status 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-48 transition"
+                bind:value={selectedStatus}
                 on:change={(e) => {
-                    const filter = (e.target as HTMLSelectElement).value;
-                    fetchPurchaseOrder(filter, null, null, "desc");
+                selectedStatus = (e.target as HTMLSelectElement).value;
+                fetchPurchaseOrder(
+                    selectedVillaId,
+                    searchTerm,
+                    sortColumn,
+                    sortOrder,
+                    0,
+                    1000,
+                    selectedStatus
+                );
                 }}
-            >
-                <option value="">All Villas</option>
-                {#each villaOptions as villa}
-                <option value={villa.id}>{villa.villa_name}</option>
-                {/each}
+            >          
+              <option value="">All Statuses</option>
+              <option value="requested">Requested</option>
+              <option value="prepared">Prepared</option>
+              <option value="approved">Approved</option>
+              <option value="acknowledged">Acknowledged</option>
             </select>
+          
+            <!-- ➕ Add Button -->
             <button
-                class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 text-sm"
-                on:click={openAddPOModal}
+              class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 text-sm"
+              on:click={openAddPOModal}
             >
-            ➕ Add Purchase Order
+              ➕ Add Purchase Order
             </button>
-        </div>
+          </div>
+          
     </div>
     <div class="overflow-x-auto rounded-lg shadow mb-4 max-h-[70vh]">
         <table class="min-w-[1000px] divide-y divide-gray-200 text-sm w-max">