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;
 
@@ -1073,18 +1079,27 @@
                 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 = (
+                    searchTerm = (e.target as HTMLInputElement).value.toLowerCase();
-                        e.target as HTMLInputElement
+                    fetchPurchaseOrder(
-                    ).value.toLowerCase();
+                    selectedVillaId,
-                    fetchPurchaseOrder(null, searchTerm, "created_at", "desc");
+                    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"
-                on:change={(e) => {
+              bind:value={selectedVillaId}
-                    const filter = (e.target as HTMLSelectElement).value;
+              on:change={() => {
-                    fetchPurchaseOrder(filter, null, null, "desc");
+                fetchPurchaseOrder(selectedVillaId, searchTerm, sortColumn, sortOrder, 0, 1000, selectedStatus);
               }}
             >
               <option value="">All Villas</option>
@@ -1092,6 +1107,32 @@
                 <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) => {
+                selectedStatus = (e.target as HTMLSelectElement).value;
+                fetchPurchaseOrder(
+                    selectedVillaId,
+                    searchTerm,
+                    sortColumn,
+                    sortOrder,
+                    0,
+                    1000,
+                    selectedStatus
+                );
+                }}
+            >          
+              <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}
@@ -1099,6 +1140,7 @@
               ➕ Add Purchase Order
             </button>
           </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">