PO Print

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

@@ -265,6 +265,7 @@
     let newPurchaseOrders: Record<string, any> = {};
     let vendors: { id: string; name: string }[] = [];
     let issues: { id: string; name: string }[] = [];
+    let printingId: string | null = null;
     // Pagination variables
     $: totalPages = Math.ceil(allRows.length / rowsPerPage);
     $: paginatedRows = allRows.slice(
@@ -481,7 +482,7 @@
         await fetchPurchaseOrder();
     }
     // populate dropdowns for adding purchase orders
-    async function fetchAddPODropdowns() {
+    async function fetchDropdowns() {
         const [{ data: villas }, { data: items }, { data: employees }] = await Promise.all([
             supabase.from("vb_villas").select("id, villa_name").eq("villa_status", "Active").order("villa_name", { ascending: true }),
             supabase.from("vb_po_item").select("id, item_name").order("item_name", { ascending: true }),
@@ -493,7 +494,7 @@
     }
     // Fetch purchase orders add
     async function openAddPOModal() {
-        await fetchAddPODropdowns();
+        await fetchDropdowns();
         addPOForm = {
             po_type: "",
             villa_id: "",
@@ -684,13 +685,17 @@
             .order(sort || "created_at", { ascending: order === "asc" })
             .range(offset, offset + limit - 1);
 
-        if (filter) {
+            if (filter) {
-            query = query.eq("po_type", filter);
+                query = query.eq("villa_id", filter);
-        }
+                }
 
-        if (search) {
+                if (search) {
-            query = query.ilike("purchase_order_number", `%${search}%`);
+                query = query.or(
-        }
+                    `purchase_order_number.ilike.%${search}%,` +
+                    `issue_name.ilike.%${search}%,` +
+                    `po_item.ilike.%${search}%`
+                );
+            }
 
         const { data, error } = await query;
 
@@ -880,6 +885,11 @@
     }
 
     async function deleteProject(id: string) {
+        const confirmed = confirm("Are you sure you want to delete this purchase order? This action cannot be undone.");
+        if (!confirmed) {
+            return; // User chickened out — good.
+        }
+
         const { error } = await supabase
             .from("vb_purchase_orders")
             .delete()
@@ -887,10 +897,12 @@
 
         if (error) {
             console.error("Error deleting project:", error);
+            alert("Failed to delete project.");
             return;
         }
 
         await fetchPurchaseOrder();
+        alert("Purchase order deleted successfully.");
     }
     // Save received purchase order
     async function saveReceived() {
@@ -966,11 +978,37 @@
         showAcknowledgedModal = false;
         await fetchPurchaseOrder();
     }
+    // Print purchase order
+    async function printPO(row) {
+        printingId = row.id;  // set loading
+        try {
+            const response = await fetch("https://flow.catalis.app/webhook-test/vb_print_po_new", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(row)
+            });
+
+            if (!response.ok) {
+            console.error("Failed to call print webhook:", response.statusText);
+            alert("Failed to send print request.");
+            return;
+            }
+
+            alert("Print request sent successfully!");
+        } catch (error) {
+            console.error("Error sending print request:", error);
+            alert("An error occurred while sending the print request.");
+        } finally {
+            printingId = null;  // unset loading
+        }
+    }
+
     //fetch on mount
     onMount(() => {
         fetchPurchaseOrder();
         fetchVendors();
         fetchCurrentUser();
+        fetchDropdowns();
     });
 </script>
 
@@ -1009,9 +1047,10 @@
                     fetchPurchaseOrder(filter, null, null, "desc");
                 }}
             >
-                <option value="">All Issues</option>
+                <option value="">All Villas</option>
-                <option value="PROJECT">Project Issues</option>
+                {#each villaOptions as villa}
-                <option value="PURCHASE_ORDER">Purchase Order Issues</option>
+                <option value={villa.id}>{villa.villa_name}</option>
+                {/each}
             </select>
             <button
                 class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 text-sm"
@@ -1173,18 +1212,32 @@
                         </td>
                       {:else if col.key === "actions"}
                         <td class="px-4 py-2">
-                          <button
+                            <button
-                            class="inline-flex items-center gap-1 rounded bg-blue-600 px-3 py-1.5 text-white text-xs font-medium hover:bg-blue-700"
+                                class="inline-flex items-center gap-1 rounded bg-blue-600 px-3 py-1.5 text-white text-xs font-medium hover:bg-blue-700"
-                            on:click={() => openEditModal(row)}
+                                on:click={() => openEditModal(row)}
-                          >
+                            >
-                            ✏️ Edit
+                                ✏️ Edit
-                          </button>
+                            </button>
-                          <button
+                            
-                            class="inline-flex items-center gap-1 rounded bg-red-600 px-3 py-1.5 text-white text-xs font-medium hover:bg-red-700"
+                            <button
-                            on:click={() => deleteProject(row.id)}
+                                class="inline-flex items-center gap-1 rounded bg-teal-600 px-3 py-1.5 text-white text-xs font-medium hover:bg-teal-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
-                          >
+                                on:click={() => printPO(row)}
-                            🗑️ Delete
+                                disabled={printingId === row.id || row.acknowledged !== true}
-                          </button>
+                            >
+                                {#if printingId === row.id}
+                                🔄 Printing...
+                                {:else if row.acknowledged !== true}
+                                ❌ Not Acknowledged
+                                {:else}
+                                🖨️ Print
+                                {/if}
+                            </button>
+                            <button
+                                class="inline-flex items-center gap-1 rounded bg-red-600 px-3 py-1.5 text-white text-xs font-medium hover:bg-red-700"
+                                on:click={() => deleteProject(row.id)}
+                            >
+                                🗑️ Delete
+                            </button>
                         </td>
                       {:else}
                         <td class="px-4 py-2 text-gray-700">