From 582284230aef42bddab6d3b84fefc8c8bcac24e0 Mon Sep 17 00:00:00 2001
From: AJISETIAJI <ajisetiaji101@gmail.com>
Date: Mon, 28 Jul 2025 09:10:34 +0700
Subject: [PATCH] fix

---
 .../backoffice/purchaseorder/+page.svelte     | 2080 ++++++++++-------
 src/routes/backoffice/timesheets/+page.svelte |  266 ++-
 src/routes/login/+page.svelte                 |    4 +-
 yarn.lock                                     |  426 +++-
 4 files changed, 1776 insertions(+), 1000 deletions(-)

diff --git a/src/routes/backoffice/purchaseorder/+page.svelte b/src/routes/backoffice/purchaseorder/+page.svelte
index b9b3a1d..3cbba6d 100644
--- a/src/routes/backoffice/purchaseorder/+page.svelte
+++ b/src/routes/backoffice/purchaseorder/+page.svelte
@@ -4,7 +4,6 @@
     import { getSessionAuthId } from "$lib/utils/authUtil";
     import CurrencyInput from "$lib/CurrencyInput.svelte";
 
-
     type PurchaseOrderInsert = {
         issue_id: string;
         prepared_date: string;
@@ -56,7 +55,7 @@
         acknowledged: boolean;
         acknowledge_by: string;
         approved_by: string;
-        prepared: boolean | null; 
+        prepared: boolean | null;
         approved_price: number;
         approved_quantity: number;
         total_approved_order_amount: number;
@@ -78,7 +77,6 @@
     };
 
     const columns: columns[] = [
-        
         { key: "purchase_order_number", title: "PO Number" },
         { key: "issue_name", title: "Issue Name" },
         { key: "requested_date", title: "Requested Date" },
@@ -93,7 +91,7 @@
         { key: "completed", title: "Complete" },
         { key: "received", title: "Receive" },
         { key: "updated_at", title: "Updated At" },
-        { key: "payment", title: "Payment" }, 
+        { key: "payment", title: "Payment" },
         { key: "actions", title: "Actions" }, // For edit/delete buttons
     ];
     const excludedKeys = [
@@ -174,7 +172,7 @@
         acknowledged: null,
         completed: null,
         received: null,
-        po_remark: ""
+        po_remark: "",
     };
     let showAddPOModal = false;
     let addPOForm = {
@@ -185,8 +183,8 @@
         po_status: "requested",
         po_remark: "",
         requested_by: "",
-        requested_date: new Date().toISOString().split("T")[0]
-    };    
+        requested_date: new Date().toISOString().split("T")[0],
+    };
     let showApprovalModal = false;
     let approvalForm = {
         po_number: "",
@@ -199,14 +197,22 @@
         approved_vendor: "",
         approved_price: 0,
         po_item: "",
-        total_approved_order_amount: 0
+        total_approved_order_amount: 0,
     };
-    let villaOptions = [];
+
+    type VillaField = {
+        id: string;
+        villa_name: string;
+    };
+
+    let villaOptions: VillaField[] = [];
     let poItemOptions = [];
     let employeeOptions = [];
     let allRows: PurchaseOrderDisplay[] = [];
     let currentPage = 1;
     let rowsPerPage = 10;
+    let totalItems = 0;
+    let totalPages = 0;
     let currentUserId = "";
     let currentUserFullName = "";
     let showPaymentModal = false;
@@ -225,20 +231,20 @@
         "4th_pay_date": "",
         "5th_pay_date": "",
         "6th_pay_date": "",
-        due_remaining: 0
+        due_remaining: 0,
     };
     let showAcknowledgedModal = false;
     let acknowledgedForm = {
         po_number: "",
         acknowledged: "",
         acknowledged_by: "",
-        acknowledged_date: ""
+        acknowledged_date: "",
     };
     let selectedVillaId: string | null = null;
     let searchTerm: string = "";
     let showPreparedModal = false;
     let selectedStatus: string | null = null;
-    let selectedPO: string | null =  null;
+    let selectedPO: string | null = null;
     let preparedByOptions: any[] = [];
     let vendorOptions: any[] = [];
     let preparedForm = {
@@ -256,22 +262,22 @@
         approved_quantity: 0,
         approved_vendor: "",
         approved_price: 0,
-        total_approved_order_amount: 0
+        total_approved_order_amount: 0,
     };
-    let formattedPrice = "";    
+    let formattedPrice = "";
     let showReceivedModal = false;
     let receivedForm = {
         po_number: "",
         received: "",
         received_by: "",
-        received_date: ""
+        received_date: "",
     };
     let showCompletedModal = false;
     let completedForm = {
         po_number: "",
         completed: "",
         completed_by: "",
-        completed_date: ""
+        completed_date: "",
     };
     let showModal = false;
     let isEditing = false;
@@ -280,32 +286,21 @@
     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(
-        (currentPage - 1) * rowsPerPage,
-        currentPage * rowsPerPage,
-    );
-    $: currentPage = 1; // Reset to first page when allRows changes
+
     $: formattedPrice = preparedForm.q1_vendor_price.toLocaleString("id-ID", {
-    style: "currency",
-    currency: "IDR",
-    minimumFractionDigits: 0,
-  });
+        style: "currency",
+        currency: "IDR",
+        minimumFractionDigits: 0,
+    });
     // function Sort
     function toggleSort(column: string) {
-    if (sortColumn === column) {
-        sortOrder = sortOrder === "asc" ? "desc" : "asc";
-    } else {
-        sortColumn = column;
-        sortOrder = "asc";
-    }
-    fetchPurchaseOrder(
-        selectedVillaId,
-        searchTerm,
-        sortColumn,
-        sortOrder,
-    );
+        if (sortColumn === column) {
+            sortOrder = sortOrder === "asc" ? "desc" : "asc";
+        } else {
+            sortColumn = column;
+            sortOrder = "asc";
+        }
+        fetchPurchaseOrder(selectedVillaId, searchTerm, sortColumn, sortOrder);
     }
 
     // Function to format numbers as ordinal (1st, 2nd, 3rd, etc.)
@@ -329,11 +324,51 @@
             acknowledged: row.acknowledged,
             completed: row.completed,
             received: row.received,
-            po_remark: row.po_remark || ""
+            po_remark: row.po_remark || "",
         };
 
         showEditModal = true;
     }
+    function pageRange(
+        totalPages: number,
+        currentPage: number,
+    ): (number | string)[] {
+        const range: (number | string)[] = [];
+        const maxDisplay = 5;
+
+        if (totalPages <= maxDisplay + 2) {
+            for (let i = 1; i <= totalPages; i++) range.push(i);
+        } else {
+            const start = Math.max(2, currentPage - 2);
+            const end = Math.min(totalPages - 1, currentPage + 2);
+
+            range.push(1);
+            if (start > 2) range.push("...");
+
+            for (let i = start; i <= end; i++) {
+                range.push(i);
+            }
+
+            if (end < totalPages - 1) range.push("...");
+            range.push(totalPages);
+        }
+
+        return range;
+    }
+
+    function changePage(page: number) {
+        if (page < 1 || page > totalPages || page === currentPage) return;
+        currentPage = page;
+        fetchPurchaseOrder(
+            selectedVillaId,
+            searchTerm,
+            sortColumn,
+            sortOrder,
+            (currentPage - 1) * rowsPerPage,
+            rowsPerPage,
+            selectedStatus,
+        );
+    }
     // pagination functions
     function goToPage(page: number) {
         if (page >= 1 && page <= totalPages) currentPage = page;
@@ -353,7 +388,7 @@
             approved_vendor: row.approved_vendor || "",
             approved_price: row.approved_price || 0,
             po_item: row.po_item || "",
-            total_approved_order_amount: row.total_approved_order_amount || 0
+            total_approved_order_amount: row.total_approved_order_amount || 0,
         };
 
         showApprovalModal = true;
@@ -366,7 +401,7 @@
             po_number: row.purchase_order_number || "",
             acknowledged: row.acknowledged ? "acknowledged" : "reject",
             acknowledged_by: currentUserId,
-            acknowledged_date: new Date().toISOString().split("T")[0]
+            acknowledged_date: new Date().toISOString().split("T")[0],
         };
 
         showAcknowledgedModal = true;
@@ -379,7 +414,7 @@
             po_number: row.purchase_order_number || "",
             received: row.received ? "received" : "reject",
             received_by: currentUserId,
-            received_date: new Date().toISOString().split("T")[0]
+            received_date: new Date().toISOString().split("T")[0],
         };
 
         showReceivedModal = true;
@@ -392,15 +427,15 @@
             po_number: row.purchase_order_number || "",
             completed: row.completed ? "completed" : "reject",
             completed_by: currentUserId,
-            completed_date: new Date().toISOString().split("T")[0]
+            completed_date: new Date().toISOString().split("T")[0],
         };
 
         showCompletedModal = true;
     }
     // Update total amount in prepared form
     function updateTotalAmount() {
-        preparedForm.total_approved_order_amount = 
-        preparedForm.approved_quantity * preparedForm.approved_price;
+        preparedForm.total_approved_order_amount =
+            preparedForm.approved_quantity * preparedForm.approved_price;
     }
     function getStatusOption(value: string) {
         return statusOptions.find((option) => option.value === value) ?? null;
@@ -424,7 +459,7 @@
             "4th_pay_date": row["4th_pay_date"] || "",
             "5th_pay_date": row["5th_pay_date"] || "",
             "6th_pay_date": row["6th_pay_date"] || "",
-            due_remaining: calculateDueRemaining(row)
+            due_remaining: calculateDueRemaining(row),
         };
 
         showPaymentModal = true;
@@ -459,14 +494,14 @@
     }
     // Update due remaining amount in payment form
     function updateDueRemaining() {
-    paymentForm.due_remaining = 
-        paymentForm.total_approved_order_amount -
-        paymentForm["1st_pay_amt"] -
-        paymentForm["2nd_pay_amt"] -
-        paymentForm["3rd_pay_amt"] -
-        paymentForm["4th_pay_amt"] -
-        paymentForm["5th_pay_amt"] -
-        paymentForm["6th_pay_amt"];
+        paymentForm.due_remaining =
+            paymentForm.total_approved_order_amount -
+            paymentForm["1st_pay_amt"] -
+            paymentForm["2nd_pay_amt"] -
+            paymentForm["3rd_pay_amt"] -
+            paymentForm["4th_pay_amt"] -
+            paymentForm["5th_pay_amt"] -
+            paymentForm["6th_pay_amt"];
     }
     // Save payment data for purchase order
     async function savePayment() {
@@ -486,7 +521,7 @@
                 "4th_pay_date": paymentForm["4th_pay_date"] || null,
                 "5th_pay_date": paymentForm["5th_pay_date"] || null,
                 "6th_pay_date": paymentForm["6th_pay_date"] || null,
-                due_remaining: paymentForm.due_remaining
+                due_remaining: paymentForm.due_remaining,
             })
             .eq("id", selectedPO.id);
 
@@ -504,12 +539,13 @@
         const { error } = await supabase
             .from("vb_purchase_orders")
             .update({
-            approved: approvalForm.approval === "approve",
-            approved_by: approvalForm.approval === "approve" ? currentUserId : null,
-            approved_date: approvalForm.approved_date,
-            reject_comment: approvalForm.reject_comment || null,
-            po_status: "approved",
-            po_remark: approvalForm.po_remark || null
+                approved: approvalForm.approval === "approve",
+                approved_by:
+                    approvalForm.approval === "approve" ? currentUserId : null,
+                approved_date: approvalForm.approved_date,
+                reject_comment: approvalForm.reject_comment || null,
+                po_status: "approved",
+                po_remark: approvalForm.po_remark || null,
             })
             .eq("id", selectedPO.id);
 
@@ -524,11 +560,23 @@
     }
     // populate dropdowns for adding purchase orders
     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 }),
-            supabase.from("vb_employee").select("id, employee_name").eq("employee_status", "Active").order("employee_name", { ascending: true }),
-        ]);
+        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 }),
+                supabase
+                    .from("vb_employee")
+                    .select("id, employee_name")
+                    .eq("employee_status", "Active")
+                    .order("employee_name", { ascending: true }),
+            ]);
         villaOptions = villas || [];
         poItemOptions = items || [];
         employeeOptions = employees || [];
@@ -544,7 +592,7 @@
             po_status: "requested",
             po_remark: "",
             requested_by: "",
-            requested_date: new Date().toISOString().split("T")[0]
+            requested_date: new Date().toISOString().split("T")[0],
         };
         showAddPOModal = true;
     }
@@ -579,7 +627,7 @@
             po_remark: addPOForm.po_remark,
             requested_by: addPOForm.requested_by,
             requested_date: addPOForm.requested_date,
-            created_at: new Date().toISOString()
+            created_at: new Date().toISOString(),
         });
 
         if (error) {
@@ -594,20 +642,20 @@
     // Fetch current user details
     async function fetchCurrentUser() {
         const {
-            data: { user }
+            data: { user },
         } = await supabase.auth.getUser();
 
         if (user) {
             currentUserId = user.id;
 
             const { data, error } = await supabase
-            .from("vb_users")
-            .select("full_name")
-            .eq("id", user.id)
-            .single();
+                .from("vb_users")
+                .select("full_name")
+                .eq("id", user.id)
+                .single();
 
             if (!error && data) {
-            currentUserFullName = data.full_name;
+                currentUserFullName = data.full_name;
             }
         }
     }
@@ -616,14 +664,14 @@
         const { error } = await supabase
             .from("vb_purchase_orders")
             .update({
-            prepared: editForm.prepared,
-            approved: editForm.approved,
-            acknowledged: editForm.acknowledged,
-            completed: editForm.completed,
-            received: editForm.received,
-            po_remark: editForm.po_remark,
-            updated_at: new Date().toISOString(),   // ✅ safe current timestamp
-            updated_by: currentUserId               // ✅ user UUID
+                prepared: editForm.prepared,
+                approved: editForm.approved,
+                acknowledged: editForm.acknowledged,
+                completed: editForm.completed,
+                received: editForm.received,
+                po_remark: editForm.po_remark,
+                updated_at: new Date().toISOString(), // ✅ safe current timestamp
+                updated_by: currentUserId, // ✅ user UUID
             })
             .eq("id", selectedPO.id);
 
@@ -641,10 +689,13 @@
         const { error } = await supabase
             .from("vb_purchase_orders")
             .update({
-            completed: completedForm.completed === "completed",
-            completed_by: completedForm.completed === "completed" ? currentUserId : null,
-            completed_date: completedForm.completed_date,
-            po_status: "completed"
+                completed: completedForm.completed === "completed",
+                completed_by:
+                    completedForm.completed === "completed"
+                        ? currentUserId
+                        : null,
+                completed_date: completedForm.completed_date,
+                po_status: "completed",
             })
             .eq("id", selectedPO.id);
 
@@ -652,25 +703,31 @@
             console.error("Error saving completed:", error);
             alert("Failed to save.");
             return;
-    }
+        }
         // ✅ Fire the webhook after saving:
         try {
-            await fetch("https://flow.catalis.app/webhook-test/vb_need_complete_new", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({
-                po_id: selectedPO.id,
-                completed: completedForm.completed === "completed",
-                completed_by: completedForm.completed === "completed" ? currentUserId : null,
-                completed_date: completedForm.completed_date
-            })
-            });
+            await fetch(
+                "https://flow.catalis.app/webhook-test/vb_need_complete_new",
+                {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({
+                        po_id: selectedPO.id,
+                        completed: completedForm.completed === "completed",
+                        completed_by:
+                            completedForm.completed === "completed"
+                                ? currentUserId
+                                : null,
+                        completed_date: completedForm.completed_date,
+                    }),
+                },
+            );
         } catch (webhookError) {
             console.error("Webhook failed:", webhookError);
             alert("Saved, but webhook failed.");
         }
-    showCompletedModal = false;
-    await fetchPurchaseOrder();
+        showCompletedModal = false;
+        await fetchPurchaseOrder();
     }
     // open prepared modal for purchase order
     async function openPreparedModal(row) {
@@ -691,7 +748,8 @@
             approved_quantity: row.approved_quantity || 0,
             approved_vendor: row.approved_vendor || "",
             approved_price: row.approved_price || 0,
-            total_approved_order_amount: row.approved_quantity * row.approved_price
+            total_approved_order_amount:
+                row.approved_quantity * row.approved_price,
         };
 
         // Load dropdowns
@@ -701,11 +759,15 @@
     }
     // Fetch dropdowns for prepared modal
     async function fetchPreparedDropdowns() {
-        const [{ data: employees }, { data: items }, { data: vendors }] = await Promise.all([
-            supabase.from("vb_employee").select("id, employee_name").eq("employee_status", "Active"),
-            supabase.from("vb_po_item").select("id, item_name"),
-            supabase.from("vb_vendor").select("id, name")
-        ]);
+        const [{ data: employees }, { data: items }, { data: vendors }] =
+            await Promise.all([
+                supabase
+                    .from("vb_employee")
+                    .select("id, employee_name")
+                    .eq("employee_status", "Active"),
+                supabase.from("vb_po_item").select("id, item_name"),
+                supabase.from("vb_vendor").select("id, name"),
+            ]);
 
         preparedByOptions = employees || [];
         poItemOptions = items || [];
@@ -723,26 +785,31 @@
     ) {
         let query = supabase
             .from("vb_purchaseorder_data")
-            .select("*")
-            .order(sortColumn || "created_at", { ascending: sortOrder === "asc" })
+            .select("*", { count: "exact" })
+            .order(sortColumn || "created_at", {
+                ascending: sortOrder === "asc",
+            })
             .range(offset, offset + limit - 1);
 
-            if (filter) {
-                query = query.eq("villa_id", filter);
-                }
+        if (filter) {
+            query = query.eq("villa_id", filter);
+        }
 
-                if (search) {
-                query = query.or(
-                    `purchase_order_number.ilike.%${search}%,` +
+        if (search) {
+            query = query.or(
+                `purchase_order_number.ilike.%${search}%,` +
                     `issue_name.ilike.%${search}%,` +
-                    `po_item.ilike.%${search}%`
-                );
-            }
-            if (poStatus) {
-                query = query.eq("po_status", poStatus);
-            }
+                    `po_item.ilike.%${search}%`,
+            );
+        }
+        if (poStatus) {
+            query = query.eq("po_status", poStatus);
+        }
 
-        const { data, error } = await query;
+        const { data, count, error } = await query;
+
+        console.log("total count:", count);
+        
 
         if (error) {
             console.error("Error fetching purchase orders:", error);
@@ -755,23 +822,50 @@
             return;
         }
 
+
+
         allRows = data.map((row: any) => {
             return {
-            ...row,
-            issue_name: row.issue_name || "N/A",
-            villa_name: row.villa_data || "N/A",
-            po_number: row.purchase_order_number || "",
-            approval: row.approval || "",
-            completed_status: row.completed_status || "",
-            proses_to_approval: row.proses_to_approval || false,
-            po_price: row.po_price || 0,
-            po_total_price: row.po_total_price || 0,
+                ...row,
+                issue_name: row.issue_name || "N/A",
+                villa_name: row.villa_data || "N/A",
+                po_number: row.purchase_order_number || "",
+                approval: row.approval || "",
+                completed_status: row.completed_status || "",
+                proses_to_approval: row.proses_to_approval || false,
+                po_price: row.po_price || 0,
+                po_total_price: row.po_total_price || 0,
             } as PurchaseOrderDisplay;
         });
 
         console.log("✅ Fetched rows:", data);
         console.log("✅ Final mapped rows:", allRows);
+
+        totalItems = count || 0;
+
+        console.log("✅ Total items:", totalItems);
+        
     }
+
+        //fetch on mount
+    onMount(() => {
+        fetchPurchaseOrder(
+            selectedVillaId,
+            searchTerm,
+            sortColumn,
+            sortOrder,
+            (currentPage - 1) * rowsPerPage,
+            rowsPerPage,
+            selectedStatus,
+        );
+        fetchVendors();
+        fetchCurrentUser();
+        fetchDropdowns();
+    });
+
+    $: totalPages = Math.ceil(totalItems / rowsPerPage);
+    $: currentPage = 1;
+
     //fetch all issues
     async function fetchIssues() {
         const { data, error } = await supabase
@@ -820,58 +914,60 @@
     }
     // Save prepared purchase order
     async function savePrepared() {
-    const { error } = await supabase
-        .from("vb_purchase_orders")
-        .update({
-        prepared_by: preparedForm.prepared_by,
-        prepared_date: preparedForm.prepared_date,
-        po_item: preparedForm.po_item,
-        po_quantity: preparedForm.po_quantity,
-        q1_vendor: preparedForm.q1_vendor,
-        q2_vendor: preparedForm.q2_vendor,
-        q3_vendor: preparedForm.q3_vendor,
-        q1_vendor_price: preparedForm.q1_vendor_price,
-        q2_vendor_price: preparedForm.q2_vendor_price,
-        q3_vendor_price: preparedForm.q3_vendor_price,
-        approved_quantity: preparedForm.approved_quantity,
-        approved_vendor: preparedForm.approved_vendor,
-        approved_price: preparedForm.approved_price,
-        total_approved_order_amount: preparedForm.total_approved_order_amount,
-        po_remark: preparedForm.po_remark,
-        po_status: "prepared",
-        prepared: true,
-        })
-        .eq("id", selectedPO.id);
+        const { error } = await supabase
+            .from("vb_purchase_orders")
+            .update({
+                prepared_by: preparedForm.prepared_by,
+                prepared_date: preparedForm.prepared_date,
+                po_item: preparedForm.po_item,
+                po_quantity: preparedForm.po_quantity,
+                q1_vendor: preparedForm.q1_vendor,
+                q2_vendor: preparedForm.q2_vendor,
+                q3_vendor: preparedForm.q3_vendor,
+                q1_vendor_price: preparedForm.q1_vendor_price,
+                q2_vendor_price: preparedForm.q2_vendor_price,
+                q3_vendor_price: preparedForm.q3_vendor_price,
+                approved_quantity: preparedForm.approved_quantity,
+                approved_vendor: preparedForm.approved_vendor,
+                approved_price: preparedForm.approved_price,
+                total_approved_order_amount:
+                    preparedForm.total_approved_order_amount,
+                po_remark: preparedForm.po_remark,
+                po_status: "prepared",
+                prepared: true,
+            })
+            .eq("id", selectedPO.id);
 
-    if (error) {
-        console.error("Error saving prepared data:", error);
-        alert("Failed to save.");
-        return;
-    }
+        if (error) {
+            console.error("Error saving prepared data:", error);
+            alert("Failed to save.");
+            return;
+        }
 
-    try {
-    await fetch("https://flow.catalis.app/webhook/vb_approval_po_new", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-            po_id: selectedPO.id,
-            po_status: "prepared",
-            prepared_by: preparedForm.prepared_by,
-            prepared_date: preparedForm.prepared_date,
-            po_item: preparedForm.po_item,
-            po_quantity: preparedForm.po_quantity,
-            approved_quantity: preparedForm.approved_quantity,
-            approved_vendor: preparedForm.approved_vendor,
-            approved_price: preparedForm.approved_price,
-            total_approved_order_amount: preparedForm.total_approved_order_amount,
-        }),
-        });
-    } catch (webhookError) {
-        console.error("Failed to fire webhook:", webhookError);
-        alert("Save worked but webhook failed.");
-    }
-    showPreparedModal = false;
-    await fetchPurchaseOrder();
+        try {
+            await fetch("https://flow.catalis.app/webhook/vb_approval_po_new", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                    po_id: selectedPO.id,
+                    po_status: "prepared",
+                    prepared_by: preparedForm.prepared_by,
+                    prepared_date: preparedForm.prepared_date,
+                    po_item: preparedForm.po_item,
+                    po_quantity: preparedForm.po_quantity,
+                    approved_quantity: preparedForm.approved_quantity,
+                    approved_vendor: preparedForm.approved_vendor,
+                    approved_price: preparedForm.approved_price,
+                    total_approved_order_amount:
+                        preparedForm.total_approved_order_amount,
+                }),
+            });
+        } catch (webhookError) {
+            console.error("Failed to fire webhook:", webhookError);
+            alert("Save worked but webhook failed.");
+        }
+        showPreparedModal = false;
+        await fetchPurchaseOrder();
     }
     // Save project function
     async function saveProject() {
@@ -930,7 +1026,9 @@
     }
 
     async function deleteProject(id: string) {
-        const confirmed = confirm("Are you sure you want to delete this purchase order? This action cannot be undone.");
+        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.
         }
@@ -954,10 +1052,11 @@
         const { error } = await supabase
             .from("vb_purchase_orders")
             .update({
-            received: receivedForm.received === "received",
-            received_by: receivedForm.received === "received" ? currentUserId : null,
-            received_date: receivedForm.received_date,
-            po_status: "received",
+                received: receivedForm.received === "received",
+                received_by:
+                    receivedForm.received === "received" ? currentUserId : null,
+                received_date: receivedForm.received_date,
+                po_status: "received",
             })
             .eq("id", selectedPO.id);
 
@@ -968,16 +1067,22 @@
         }
         // ✅ Fire the webhook after the DB update succeeds:
         try {
-            await fetch("https://flow.catalis.app/webhook-test/vb_need_received_new", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({
-                po_id: selectedPO.id,
-                received: receivedForm.received === "received",
-                received_by: receivedForm.received === "received" ? currentUserId : null,
-                received_date: receivedForm.received_date
-            })
-            });
+            await fetch(
+                "https://flow.catalis.app/webhook-test/vb_need_received_new",
+                {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({
+                        po_id: selectedPO.id,
+                        received: receivedForm.received === "received",
+                        received_by:
+                            receivedForm.received === "received"
+                                ? currentUserId
+                                : null,
+                        received_date: receivedForm.received_date,
+                    }),
+                },
+            );
         } catch (webhookError) {
             console.error("Webhook failed:", webhookError);
             alert("Saved, but webhook failed.");
@@ -990,10 +1095,13 @@
         const { error } = await supabase
             .from("vb_purchase_orders")
             .update({
-            acknowledged: acknowledgedForm.acknowledged === "acknowledged",
-            acknowledge_by: acknowledgedForm.acknowledged === "acknowledged" ? currentUserId : null,
-            acknowledged_date: acknowledgedForm.acknowledged_date,
-            po_status: "acknowledged"
+                acknowledged: acknowledgedForm.acknowledged === "acknowledged",
+                acknowledge_by:
+                    acknowledgedForm.acknowledged === "acknowledged"
+                        ? currentUserId
+                        : null,
+                acknowledged_date: acknowledgedForm.acknowledged_date,
+                po_status: "acknowledged",
             })
             .eq("id", selectedPO.id);
 
@@ -1005,16 +1113,23 @@
 
         // ✅ Fire the webhook after successful update:
         try {
-            await fetch("https://flow.catalis.app/webhook/vb_acknowledged_new", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({
-                po_id: selectedPO.id,
-                acknowledged: acknowledgedForm.acknowledged === "acknowledged",
-                acknowledged_by: acknowledgedForm.acknowledged === "acknowledged" ? currentUserId : null,
-                acknowledged_date: acknowledgedForm.acknowledged_date
-            })
-            });
+            await fetch(
+                "https://flow.catalis.app/webhook/vb_acknowledged_new",
+                {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({
+                        po_id: selectedPO.id,
+                        acknowledged:
+                            acknowledgedForm.acknowledged === "acknowledged",
+                        acknowledged_by:
+                            acknowledgedForm.acknowledged === "acknowledged"
+                                ? currentUserId
+                                : null,
+                        acknowledged_date: acknowledgedForm.acknowledged_date,
+                    }),
+                },
+            );
         } catch (webhookError) {
             console.error("Failed to fire webhook:", webhookError);
             alert("Saved, but webhook failed.");
@@ -1025,18 +1140,24 @@
     }
     // Print purchase order
     async function printPO(row) {
-        printingId = row.id;  // set loading
+        printingId = row.id; // set loading
         try {
-            const response = await fetch("https://flow.catalis.app/webhook/vb_print_po_new", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify(row)
-            });
+            const response = await fetch(
+                "https://flow.catalis.app/webhook/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;
+                console.error(
+                    "Failed to call print webhook:",
+                    response.statusText,
+                );
+                alert("Failed to send print request.");
+                return;
             }
 
             alert("Print request sent successfully!");
@@ -1044,17 +1165,9 @@
             console.error("Error sending print request:", error);
             alert("An error occurred while sending the print request.");
         } finally {
-            printingId = null;  // unset loading
+            printingId = null; // unset loading
         }
     }
-
-    //fetch on mount
-    onMount(() => {
-        fetchPurchaseOrder();
-        fetchVendors();
-        fetchCurrentUser();
-        fetchDropdowns();
-    });
 </script>
 
 <div>
@@ -1074,72 +1187,81 @@
             </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) => {
-                    searchTerm = (e.target as HTMLInputElement).value.toLowerCase();
+                    searchTerm = (
+                        e.target as HTMLInputElement
+                    ).value.toLowerCase();
                     fetchPurchaseOrder(
-                    selectedVillaId,
-                    searchTerm,
-                    sortColumn,
-                    sortOrder,
-                    0,
-                    1000,
-                    selectedStatus
+                        selectedVillaId,
+                        searchTerm,
+                        sortColumn,
+                        sortOrder,
+                        currentPage - 1,
+                        rowsPerPage,
+                        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);
-              }}
+                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,
+                    );
+                }}
             >
-              <option value="">All Villas</option>
-              {#each villaOptions as villa}
-                <option value={villa.id}>{villa.villa_name}</option>
-              {/each}
+                <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) => {
-                selectedStatus = (e.target as HTMLSelectElement).value;
-                fetchPurchaseOrder(
-                    selectedVillaId,
-                    searchTerm,
-                    sortColumn,
-                    sortOrder,
-                    0,
-                    1000,
-                    selectedStatus
-                );
+                    selectedStatus = (e.target as HTMLSelectElement).value;
+                    fetchPurchaseOrder(
+                        selectedVillaId,
+                        searchTerm,
+                        sortColumn,
+                        sortOrder,
+                        currentPage - 1,
+                        rowsPerPage,
+                        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>
+            >
+                <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">
@@ -1154,7 +1276,7 @@
                             >
                                 {col.title}
                                 {#if sortColumn === col.key}
-                                {sortOrder === 'asc' ? ' 🔼' : ' 🔽'}
+                                    {sortOrder === "asc" ? " 🔼" : " 🔽"}
                                 {/if}
                             </th>
                         {:else}
@@ -1164,7 +1286,7 @@
                             >
                                 {col.title}
                                 {#if sortColumn === col.key}
-                                {sortOrder === 'asc' ? ' 🔼' : ' 🔽'}
+                                    {sortOrder === "asc" ? " 🔼" : " 🔽"}
                                 {/if}
                             </th>
                         {/if}
@@ -1172,172 +1294,178 @@
                 </tr>
             </thead>
             <tbody class="divide-y divide-gray-200 bg-white">
-                {#each paginatedRows as row}
-                  <tr class="hover:bg-gray-50 transition">
-                    {#each columns as col}
-                        {#if col.key === "requested_date" || col.key === "po_due" || col.key === "updated_at"}
-                            <td class="px-4 py-2 text-gray-500">
-                            {#if row[col.key]}
-                                {new Date(row[col.key]).toLocaleString()}
-                            {:else}
-                                —
-                            {/if}
-                            </td>
-                        {:else if col.key === "po_remark"}
-                        <td class="px-4 py-2 text-gray-700 max-w-xs whitespace-normal align-top break-words">
-                            {row[col.key] || "—"}
-                        </td>
-                        {:else if col.key === "purchase_order_number"}
-                        <td class="sticky left-0 px-4 py-2 font-medium text-blue-600 max-w-xs whitespace-normal align-top break-words"
-                                style="background-color: #f0f8ff; cursor: pointer;">
-                            {row.purchase_order_number || "—"}
-                        </td>
-                        {:else if col.key === "prepared"}
-                        <td class="px-4 py-2 text-center">
-                            <button
-                            class="bg-blue-600 text-white text-xs px-3 py-1.5 rounded hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
-                            on:click={() => openPreparedModal(row)}
-                            disabled={row.prepared === true }
-                          >
-                            {row.prepared === true  ? "Prepared" : "Set Prepared"}
-                          </button>
-                        </td>
-                        {:else if col.key === "approved"}
-                        <td class="px-4 py-2 text-center">
-                          <button
-                            class="inline-flex items-center gap-1 rounded bg-yellow-600 px-3 py-1.5 text-white text-xs font-medium 
-                            hover:bg-yellow-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
-                            on:click={() => openApprovalModal(row)}
-                            disabled={
-                              row.approved === true || 
-                              row.approved === false || 
-                              row.po_status !== 'prepared'
-                            }
-                          >
-                            {#if row.approved === true}
-                              Approved
-                            {:else if row.approved === false}
-                              Rejected
-                            {:else if row.po_status !== 'prepared'}
-                              Not Prepared
-                            {:else}
-                              Approval
-                            {/if}
-                          </button>
-                        </td>
-                        {:else if col.key === "acknowledged"}
-                        <td class="px-4 py-2 text-center">
-                          <button
-                            class="inline-flex items-center gap-1 rounded bg-green-600 px-3 py-1.5 text-white text-xs font-medium 
-                            hover:bg-green-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
-                            on:click={() => openAcknowledgedModal(row)}
-                            disabled={
-                              row.approved !== true || row.acknowledged === true || row.acknowledged === false
-                            }
-                          >
-                            {#if row.acknowledged === true}
-                              Acknowledged
-                            {:else if row.acknowledged === false}
-                              Rejected
-                            {:else if row.approved !== true}
-                              Pending
-                            {:else}
-                              Acknowledge
-                            {/if}
-                          </button>
-                        </td>
-                        {:else if col.key === "completed"}
-                            <td class="px-4 py-2 text-center">
-                                <button
-                                class="inline-flex items-center gap-1 rounded bg-purple-600 px-3 py-1.5 text-white text-xs font-medium 
-                                hover:bg-purple-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
-                                on:click={() => openCompletedModal(row)}
-                                disabled={
-                                    row.acknowledged !== true || row.completed === true || row.completed === false
-                                }
+                {#each allRows as row}
+                    <tr class="hover:bg-gray-50 transition">
+                        {#each columns as col}
+                            {#if col.key === "requested_date" || col.key === "po_due" || col.key === "updated_at"}
+                                <td class="px-4 py-2 text-gray-500">
+                                    {#if row[col.key]}
+                                        {new Date(
+                                            row[col.key],
+                                        ).toLocaleString()}
+                                    {:else}
+                                        —
+                                    {/if}
+                                </td>
+                            {:else if col.key === "po_remark"}
+                                <td
+                                    class="px-4 py-2 text-gray-700 max-w-xs whitespace-normal align-top break-words"
                                 >
-                                {#if row.completed === true}
-                                    Completed
-                                {:else if row.completed === false}
-                                    Rejected
-                                {:else if row.acknowledged !== true}
-                                    Pending
-                                {:else}
-                                    Complete
-                                {/if}
-                                </button>
-                            </td>
-
+                                    {row[col.key] || "—"}
+                                </td>
+                            {:else if col.key === "purchase_order_number"}
+                                <td
+                                    class="sticky left-0 px-4 py-2 font-medium text-blue-600 max-w-xs whitespace-normal align-top break-words"
+                                    style="background-color: #f0f8ff; cursor: pointer;"
+                                >
+                                    {row.purchase_order_number || "—"}
+                                </td>
+                            {:else if col.key === "prepared"}
+                                <td class="px-4 py-2 text-center">
+                                    <button
+                                        class="bg-blue-600 text-white text-xs px-3 py-1.5 rounded hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
+                                        on:click={() => openPreparedModal(row)}
+                                        disabled={row.prepared === true}
+                                    >
+                                        {row.prepared === true
+                                            ? "Prepared"
+                                            : "Set Prepared"}
+                                    </button>
+                                </td>
+                            {:else if col.key === "approved"}
+                                <td class="px-4 py-2 text-center">
+                                    <button
+                                        class="inline-flex items-center gap-1 rounded bg-yellow-600 px-3 py-1.5 text-white text-xs font-medium
+                            hover:bg-yellow-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
+                                        on:click={() => openApprovalModal(row)}
+                                        disabled={row.approved === true ||
+                                            row.approved === false ||
+                                            row.po_status !== "prepared"}
+                                    >
+                                        {#if row.approved === true}
+                                            Approved
+                                        {:else if row.approved === false}
+                                            Rejected
+                                        {:else if row.po_status !== "prepared"}
+                                            Not Prepared
+                                        {:else}
+                                            Approval
+                                        {/if}
+                                    </button>
+                                </td>
+                            {:else if col.key === "acknowledged"}
+                                <td class="px-4 py-2 text-center">
+                                    <button
+                                        class="inline-flex items-center gap-1 rounded bg-green-600 px-3 py-1.5 text-white text-xs font-medium
+                            hover:bg-green-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
+                                        on:click={() =>
+                                            openAcknowledgedModal(row)}
+                                        disabled={row.approved !== true ||
+                                            row.acknowledged === true ||
+                                            row.acknowledged === false}
+                                    >
+                                        {#if row.acknowledged === true}
+                                            Acknowledged
+                                        {:else if row.acknowledged === false}
+                                            Rejected
+                                        {:else if row.approved !== true}
+                                            Pending
+                                        {:else}
+                                            Acknowledge
+                                        {/if}
+                                    </button>
+                                </td>
+                            {:else if col.key === "completed"}
+                                <td class="px-4 py-2 text-center">
+                                    <button
+                                        class="inline-flex items-center gap-1 rounded bg-purple-600 px-3 py-1.5 text-white text-xs font-medium
+                                hover:bg-purple-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
+                                        on:click={() => openCompletedModal(row)}
+                                        disabled={row.acknowledged !== true ||
+                                            row.completed === true ||
+                                            row.completed === false}
+                                    >
+                                        {#if row.completed === true}
+                                            Completed
+                                        {:else if row.completed === false}
+                                            Rejected
+                                        {:else if row.acknowledged !== true}
+                                            Pending
+                                        {:else}
+                                            Complete
+                                        {/if}
+                                    </button>
+                                </td>
                             {:else if col.key === "received"}
-                            <td class="px-4 py-2 text-center">
-                              <button
-                                class="inline-flex items-center gap-1 rounded bg-green-600 px-3 py-1.5 text-white text-xs font-medium 
+                                <td class="px-4 py-2 text-center">
+                                    <button
+                                        class="inline-flex items-center gap-1 rounded bg-green-600 px-3 py-1.5 text-white text-xs font-medium
                                 hover:bg-green-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
-                                on:click={() => openReceivedModal(row)}
-                                disabled={
-                                  row.completed !== true || row.received === true || row.received === false
-                                }
-                              >
-                                {#if row.received === true}
-                                  Received
-                                {:else if row.received === false}
-                                  Rejected
-                                {:else if row.completed !== true}
-                                  Pending
-                                {:else}
-                                  Receive
-                                {/if}
-                              </button>
-                            </td>
-                          
-                      {:else if col.key === "payment"}
-                        <td class="px-4 py-2 text-center">
-                          <button
-                            class="inline-flex items-center gap-1 rounded bg-emerald-600 px-3 py-1.5 text-white text-xs font-medium hover:bg-emerald-700"
-                            on:click={() => openPaymentModal(row)}
-                          >
-                            Payment
-                          </button>
-                          
-                            <button
-                                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)}
-                                disabled={printingId === row.id || row.acknowledged !== true}
-                            >
-                                {#if printingId === row.id}
-                                🔄 Printing...
-                                {:else if row.acknowledged !== true}
-                                ❌ Not Acknowledged
-                                {:else}
-                                🖨️ Print
-                                {/if}
-                            </button>
-                        </td>
-                      {:else if col.key === "actions"}
-                        <td class="px-4 py-2">
-                            <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"
-                                on:click={() => openEditModal(row)}
-                            >
-                                ✏️ Edit
-                            </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">
-                          {row[col.key] ?? "—"}
-                        </td>
-                      {/if}
-                    {/each}
-                  </tr>
+                                        on:click={() => openReceivedModal(row)}
+                                        disabled={row.completed !== true ||
+                                            row.received === true ||
+                                            row.received === false}
+                                    >
+                                        {#if row.received === true}
+                                            Received
+                                        {:else if row.received === false}
+                                            Rejected
+                                        {:else if row.completed !== true}
+                                            Pending
+                                        {:else}
+                                            Receive
+                                        {/if}
+                                    </button>
+                                </td>
+                            {:else if col.key === "payment"}
+                                <td class="px-4 py-2 text-center">
+                                    <button
+                                        class="inline-flex items-center gap-1 rounded bg-emerald-600 px-3 py-1.5 text-white text-xs font-medium hover:bg-emerald-700"
+                                        on:click={() => openPaymentModal(row)}
+                                    >
+                                        Payment
+                                    </button>
+
+                                    <button
+                                        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)}
+                                        disabled={printingId === row.id ||
+                                            row.acknowledged !== true}
+                                    >
+                                        {#if printingId === row.id}
+                                            🔄 Printing...
+                                        {:else if row.acknowledged !== true}
+                                            ❌ Not Acknowledged
+                                        {:else}
+                                            🖨️ Print
+                                        {/if}
+                                    </button>
+                                </td>
+                            {:else if col.key === "actions"}
+                                <td class="px-4 py-2">
+                                    <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"
+                                        on:click={() => openEditModal(row)}
+                                    >
+                                        ✏️ Edit
+                                    </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">
+                                    {row[col.key] ?? "—"}
+                                </td>
+                            {/if}
+                        {/each}
+                    </tr>
                 {/each}
-              </tbody>
+            </tbody>
         </table>
     </div>
 
@@ -1345,36 +1473,63 @@
     <div class="flex justify-between items-center text-sm">
         <div>
             Showing {(currentPage - 1) * rowsPerPage + 1}–
-            {Math.min(currentPage * rowsPerPage, allRows.length)} of {allRows.length}
+            {Math.min(currentPage * rowsPerPage, totalItems)} of {totalItems} items
         </div>
-        <div class="space-x-2">
-            <button
-                class="px-2 py-1 border rounded disabled:opacity-50"
-                on:click={() => goToPage(currentPage - 1)}
-                disabled={currentPage === 1}
-            >
-                Previous
-            </button>
-            {#each Array(totalPages)
-                .fill(0)
-                .map((_, i) => i + 1) as page}
-                <button
-                    class="px-3 py-1 rounded border text-sm
-                        {currentPage === page
-                        ? 'bg-blue-600 text-white border-blue-600'
-                        : 'bg-white border-gray-300 hover:bg-gray-100'}"
-                    on:click={() => goToPage(page)}
+        <div class="flex items-center space-x-4">
+            
+            <div class="space-x-2">
+                <label for="rowsPerPage" class="text-sm">Rows per page:</label>
+                <select
+                    id="rowsPerPage"
+                    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,
+                        );
+                    }}
                 >
-                    {page}
+                    {#each [10, 20, 50, 100] as option}
+                        <option value={option}>{option}</option>
+                    {/each}
+                </select>
+                <button
+                    class="px-3 py-1 rounded border border-gray-300 bg-white hover:bg-gray-100 disabled:opacity-50"
+                    on:click={() => goToPage(currentPage - 1)}
+                    disabled={currentPage === 1}
+                >
+                    Previous
                 </button>
-            {/each}
-            <button
-                class="px-2 py-1 border rounded disabled:opacity-50"
-                on:click={() => goToPage(currentPage + 1)}
-                disabled={currentPage === totalPages}
-            >
-                Next
-            </button>
+                {#each pageRange(totalPages, currentPage) as page}
+                    {#if page === "..."}
+                        <span class="px-2">...</span>
+                    {:else}
+                        <button
+                            on:click={() => changePage(page as number)}
+                            class="px-2 py-1 border rounded {page ===
+                            currentPage
+                                ? 'bg-blue-600 text-white border-blue-600'
+                                : 'bg-white border-gray-300 hover:bg-gray-100'}"
+                        >
+                            {page}
+                        </button>
+                    {/if}
+                {/each}
+                <button
+                    class="px-3 py-1 rounded border border-gray-300 bg-white hover:bg-gray-100 disabled:opacity-50"
+                    on:click={() => goToPage(currentPage + 1)}
+                    disabled={currentPage === totalPages}
+                >
+                    Next
+                </button>
+            </div>
         </div>
     </div>
 </div>
@@ -1618,482 +1773,695 @@
     </div>
 {/if}
 {#if showPreparedModal}
-<div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 overflow-y-auto">
-    <div class="min-h-screen flex items-center justify-center p-4">
-        <div class="bg-white rounded-lg shadow-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto p-6 space-y-4">
-        <h2 class="text-lg font-bold">Set Prepared</h2>
+    <div
+        class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 overflow-y-auto"
+    >
+        <div class="min-h-screen flex items-center justify-center p-4">
+            <div
+                class="bg-white rounded-lg shadow-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto p-6 space-y-4"
+            >
+                <h2 class="text-lg font-bold">Set Prepared</h2>
 
-      <!-- prepared_by -->
-      <label>Prepared By</label>
-      <select bind:value={preparedForm.prepared_by} class="w-full border p-2">
-        <option value="" disabled>Select Employee</option>
-        {#each preparedByOptions as emp}
-          <option value={emp.id}>{emp.employee_name}</option>
-        {/each}
-      </select>
+                <!-- prepared_by -->
+                <label>Prepared By</label>
+                <select
+                    bind:value={preparedForm.prepared_by}
+                    class="w-full border p-2"
+                >
+                    <option value="" disabled>Select Employee</option>
+                    {#each preparedByOptions as emp}
+                        <option value={emp.id}>{emp.employee_name}</option>
+                    {/each}
+                </select>
 
-      <!-- prepared_date -->
-      <label>Prepared Date</label>
-      <input type="date" bind:value={preparedForm.prepared_date} class="w-full border p-2" />
+                <!-- prepared_date -->
+                <label>Prepared Date</label>
+                <input
+                    type="date"
+                    bind:value={preparedForm.prepared_date}
+                    class="w-full border p-2"
+                />
 
-      <!-- po_item -->
-      <label>PO Item</label>
-      <select bind:value={preparedForm.po_item} class="w-full border p-2">
-        <option value="" disabled>Select Item</option>
-        {#each poItemOptions as item}
-          <option value={item.item_name}>{item.item_name}</option>
-        {/each}
-      </select>
+                <!-- po_item -->
+                <label>PO Item</label>
+                <select
+                    bind:value={preparedForm.po_item}
+                    class="w-full border p-2"
+                >
+                    <option value="" disabled>Select Item</option>
+                    {#each poItemOptions as item}
+                        <option value={item.item_name}>{item.item_name}</option>
+                    {/each}
+                </select>
 
-      <!-- po_quantity -->
-      <label>PO Quantity</label>
-      <input type="number" bind:value={preparedForm.po_quantity} class="w-full border p-2" />
+                <!-- po_quantity -->
+                <label>PO Quantity</label>
+                <input
+                    type="number"
+                    bind:value={preparedForm.po_quantity}
+                    class="w-full border p-2"
+                />
 
-      <!-- Vendors and prices -->
-      <label>Q1 Vendor</label>
-      <select bind:value={preparedForm.q1_vendor} class="w-full border p-2">
-        <option value="" disabled>Select Vendor</option>
-        {#each vendorOptions as v}
-          <option value={v.name}>{v.name}</option>
-        {/each}
-      </select>
-      <CurrencyInput bind:value={preparedForm.q1_vendor_price} label="Q1 Vendor Price" />
-      <label>Q2 Vendor</label>
-      <select bind:value={preparedForm.q2_vendor} class="w-full border p-2">
-        <option value="" disabled>Select Vendor</option>
-        {#each vendorOptions as v}
-          <option value={v.name}>{v.name}</option>
-        {/each}
-      </select>
-      <CurrencyInput bind:value={preparedForm.q2_vendor_price} label="Q1 Vendor Price" />
-      <label>Q3 Vendor</label>
-      <select bind:value={preparedForm.q3_vendor} class="w-full border p-2">
-        <option value="" disabled>Select Vendor</option>
-        {#each vendorOptions as v}
-          <option value={v.name}>{v.name}</option>
-        {/each}
-      </select>
-      <CurrencyInput bind:value={preparedForm.q3_vendor_price} label="Q1 Vendor Price" />
-      <!-- Repeat for Q2, Q3 -->
-      <!-- Approved -->
-      <label>Approved Quantity</label>
-      <input type="number" bind:value={preparedForm.approved_quantity} on:input={() => updateTotalAmount()} class="w-full border p-2" />
+                <!-- Vendors and prices -->
+                <label>Q1 Vendor</label>
+                <select
+                    bind:value={preparedForm.q1_vendor}
+                    class="w-full border p-2"
+                >
+                    <option value="" disabled>Select Vendor</option>
+                    {#each vendorOptions as v}
+                        <option value={v.name}>{v.name}</option>
+                    {/each}
+                </select>
+                <CurrencyInput
+                    bind:value={preparedForm.q1_vendor_price}
+                    label="Q1 Vendor Price"
+                />
+                <label>Q2 Vendor</label>
+                <select
+                    bind:value={preparedForm.q2_vendor}
+                    class="w-full border p-2"
+                >
+                    <option value="" disabled>Select Vendor</option>
+                    {#each vendorOptions as v}
+                        <option value={v.name}>{v.name}</option>
+                    {/each}
+                </select>
+                <CurrencyInput
+                    bind:value={preparedForm.q2_vendor_price}
+                    label="Q1 Vendor Price"
+                />
+                <label>Q3 Vendor</label>
+                <select
+                    bind:value={preparedForm.q3_vendor}
+                    class="w-full border p-2"
+                >
+                    <option value="" disabled>Select Vendor</option>
+                    {#each vendorOptions as v}
+                        <option value={v.name}>{v.name}</option>
+                    {/each}
+                </select>
+                <CurrencyInput
+                    bind:value={preparedForm.q3_vendor_price}
+                    label="Q1 Vendor Price"
+                />
+                <!-- Repeat for Q2, Q3 -->
+                <!-- Approved -->
+                <label>Approved Quantity</label>
+                <input
+                    type="number"
+                    bind:value={preparedForm.approved_quantity}
+                    on:input={() => updateTotalAmount()}
+                    class="w-full border p-2"
+                />
 
-      <label>Approved Vendor</label>
-      <select bind:value={preparedForm.approved_vendor} class="w-full border p-2">
-        <option value="" disabled>Select Vendor</option>
-        {#each vendorOptions as v}
-          <option value={v.name}>{v.name}</option>
-        {/each}
-      </select>
-      <CurrencyInput
-        bind:value={preparedForm.approved_price}
-        label="Approved Price"
-        onInput={updateTotalAmount}
-        />
+                <label>Approved Vendor</label>
+                <select
+                    bind:value={preparedForm.approved_vendor}
+                    class="w-full border p-2"
+                >
+                    <option value="" disabled>Select Vendor</option>
+                    {#each vendorOptions as v}
+                        <option value={v.name}>{v.name}</option>
+                    {/each}
+                </select>
+                <CurrencyInput
+                    bind:value={preparedForm.approved_price}
+                    label="Approved Price"
+                    onInput={updateTotalAmount}
+                />
 
-      <label>Total Approved Order Amount</label>
-      <input type="number" value={preparedForm.total_approved_order_amount} disabled class="w-full border p-2 bg-gray-100" />
+                <label>Total Approved Order Amount</label>
+                <input
+                    type="number"
+                    value={preparedForm.total_approved_order_amount}
+                    disabled
+                    class="w-full border p-2 bg-gray-100"
+                />
 
-      <label>PO Remark</label>
-      <textarea bind:value={preparedForm.po_remark} class="w-full border p-2"></textarea>
+                <label>PO Remark</label>
+                <textarea
+                    bind:value={preparedForm.po_remark}
+                    class="w-full border p-2"
+                ></textarea>
 
-      <div class="flex justify-end space-x-2 pt-4">
-        <button on:click={savePrepared} class="bg-blue-600 text-white px-4 py-2 rounded">Save</button>
-        <button on:click={() => showPreparedModal = false} class="px-4 py-2 rounded border">Cancel</button>
-      </div>
+                <div class="flex justify-end space-x-2 pt-4">
+                    <button
+                        on:click={savePrepared}
+                        class="bg-blue-600 text-white px-4 py-2 rounded"
+                        >Save</button
+                    >
+                    <button
+                        on:click={() => (showPreparedModal = false)}
+                        class="px-4 py-2 rounded border">Cancel</button
+                    >
+                </div>
+            </div>
+        </div>
     </div>
-    </div>
-  </div>
 {/if}
 
 {#if showPaymentModal}
-  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 overflow-y-auto">
-    <div class="min-h-screen flex items-center justify-center p-4">
-      <div class="bg-white rounded-lg shadow-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto p-6 space-y-4">
-        <h2 class="text-xl font-bold">Set Payment</h2>
+    <div
+        class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 overflow-y-auto"
+    >
+        <div class="min-h-screen flex items-center justify-center p-4">
+            <div
+                class="bg-white rounded-lg shadow-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto p-6 space-y-4"
+            >
+                <h2 class="text-xl font-bold">Set Payment</h2>
 
-        <!-- Payment Method -->
-        <label>Payment Method</label>
-        <select bind:value={paymentForm.payment_method} class="w-full border p-2">
-          <option value="" disabled>Select Method</option>
-          <option value="Gradualy">Gradualy</option>
-          <option value="Full Before Received">Full Before Received</option>
-          <option value="Full After Received">Full After Received</option>
-        </select>
+                <!-- Payment Method -->
+                <label>Payment Method</label>
+                <select
+                    bind:value={paymentForm.payment_method}
+                    class="w-full border p-2"
+                >
+                    <option value="" disabled>Select Method</option>
+                    <option value="Gradualy">Gradualy</option>
+                    <option value="Full Before Received"
+                        >Full Before Received</option
+                    >
+                    <option value="Full After Received"
+                        >Full After Received</option
+                    >
+                </select>
 
-        <!-- Total Approved Order Amount (hidden input, readonly) -->
-        <label>Total Approved Order Amount</label>
-        <input type="number" value={paymentForm.total_approved_order_amount} disabled class="w-full border p-2 bg-gray-100"/>
+                <!-- Total Approved Order Amount (hidden input, readonly) -->
+                <label>Total Approved Order Amount</label>
+                <input
+                    type="number"
+                    value={paymentForm.total_approved_order_amount}
+                    disabled
+                    class="w-full border p-2 bg-gray-100"
+                />
 
-        <!-- Payment Amounts -->
-        {#each [1,2,3,4,5,6] as num}
-            <label>{ordinal(num)} Pay Amount</label>
-            <CurrencyInput
-                bind:value={paymentForm[`${ordinal(num)}_pay_amt`]}
-                onInput={updateDueRemaining}
-                className="w-full"
-            />
+                <!-- Payment Amounts -->
+                {#each [1, 2, 3, 4, 5, 6] as num}
+                    <label>{ordinal(num)} Pay Amount</label>
+                    <CurrencyInput
+                        bind:value={paymentForm[`${ordinal(num)}_pay_amt`]}
+                        onInput={updateDueRemaining}
+                        className="w-full"
+                    />
 
-            <label>{ordinal(num)} Pay Date</label>
-            <input 
-                type="date" 
-                bind:value={paymentForm[`${ordinal(num)}_pay_date`]}
-                class="w-full border p-2"
-            />
-        {/each}
+                    <label>{ordinal(num)} Pay Date</label>
+                    <input
+                        type="date"
+                        bind:value={paymentForm[`${ordinal(num)}_pay_date`]}
+                        class="w-full border p-2"
+                    />
+                {/each}
 
-        <!-- Due Remaining -->
-        <label>Due Remaining</label>
-        <CurrencyInput value={paymentForm.due_remaining} disabled className="w-full border p-2 bg-gray-100"/>
+                <!-- Due Remaining -->
+                <label>Due Remaining</label>
+                <CurrencyInput
+                    value={paymentForm.due_remaining}
+                    disabled
+                    className="w-full border p-2 bg-gray-100"
+                />
 
-        <!-- Buttons -->
-        <div class="flex justify-end space-x-2 pt-4">
-          <button on:click={savePayment} class="bg-blue-600 text-white px-4 py-2 rounded">Save</button>
-          <button on:click={() => showPaymentModal = false} class="px-4 py-2 rounded border">Cancel</button>
+                <!-- Buttons -->
+                <div class="flex justify-end space-x-2 pt-4">
+                    <button
+                        on:click={savePayment}
+                        class="bg-blue-600 text-white px-4 py-2 rounded"
+                        >Save</button
+                    >
+                    <button
+                        on:click={() => (showPaymentModal = false)}
+                        class="px-4 py-2 rounded border">Cancel</button
+                    >
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
 {/if}
 {#if showApprovalModal}
-  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 overflow-y-auto">
-    <div class="min-h-screen flex items-center justify-center p-4">
-      <div class="bg-white rounded-lg shadow-lg w-full max-w-md max-h-[90vh] overflow-y-auto p-6 space-y-4">
-        <h2 class="text-xl font-bold">Approve Purchase Order</h2>
+    <div
+        class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 overflow-y-auto"
+    >
+        <div class="min-h-screen flex items-center justify-center p-4">
+            <div
+                class="bg-white rounded-lg shadow-lg w-full max-w-md max-h-[90vh] overflow-y-auto p-6 space-y-4"
+            >
+                <h2 class="text-xl font-bold">Approve Purchase Order</h2>
 
-        <!-- PO Number -->
-        <label>PO Number</label>
-        <input
-          type="text"
-          value={approvalForm.po_number}
-          disabled
-          class="w-full border p-2 bg-gray-100"
-        />
+                <!-- PO Number -->
+                <label>PO Number</label>
+                <input
+                    type="text"
+                    value={approvalForm.po_number}
+                    disabled
+                    class="w-full border p-2 bg-gray-100"
+                />
 
-        <!-- PO Item -->
-        {#if approvalForm.po_item}
-          <label>PO Item</label>
-          <input
-            type="text"
-            value={approvalForm.po_item}
-            disabled
-            class="w-full border p-2 bg-gray-100"
-          />
-        {/if}
+                <!-- PO Item -->
+                {#if approvalForm.po_item}
+                    <label>PO Item</label>
+                    <input
+                        type="text"
+                        value={approvalForm.po_item}
+                        disabled
+                        class="w-full border p-2 bg-gray-100"
+                    />
+                {/if}
 
-        <!-- Approved Quantity -->
-        {#if approvalForm.approved_quantity != null}
-          <label>Approved Quantity</label>
-          <input
-            type="number"
-            value={approvalForm.approved_quantity}
-            disabled
-            class="w-full border p-2 bg-gray-100"
-          />
-        {/if}
+                <!-- Approved Quantity -->
+                {#if approvalForm.approved_quantity != null}
+                    <label>Approved Quantity</label>
+                    <input
+                        type="number"
+                        value={approvalForm.approved_quantity}
+                        disabled
+                        class="w-full border p-2 bg-gray-100"
+                    />
+                {/if}
 
-        <!-- Approved Price -->
-        {#if approvalForm.approved_price != null}
-          <label>Approved Price</label>
-          <CurrencyInput
-            value={approvalForm.approved_price}
-            disabled
-            className="w-full border p-2 bg-gray-100"
-          />
-        {/if}
+                <!-- Approved Price -->
+                {#if approvalForm.approved_price != null}
+                    <label>Approved Price</label>
+                    <CurrencyInput
+                        value={approvalForm.approved_price}
+                        disabled
+                        className="w-full border p-2 bg-gray-100"
+                    />
+                {/if}
 
-        <!-- Total Approved Order Amount -->
-        {#if approvalForm.total_approved_order_amount != null}
-          <label>Total Approved Order Amount</label>
-          <CurrencyInput
-            value={approvalForm.total_approved_order_amount}
-            disabled
-            className="w-full border p-2 bg-gray-100"
-          />
-        {/if}
+                <!-- Total Approved Order Amount -->
+                {#if approvalForm.total_approved_order_amount != null}
+                    <label>Total Approved Order Amount</label>
+                    <CurrencyInput
+                        value={approvalForm.total_approved_order_amount}
+                        disabled
+                        className="w-full border p-2 bg-gray-100"
+                    />
+                {/if}
 
-        <!-- Approved Vendor -->
-        {#if approvalForm.approved_vendor}
-          <label>Approved Vendor</label>
-          <input
-            type="text"
-            value={approvalForm.approved_vendor}
-            disabled
-            class="w-full border p-2 bg-gray-100"
-          />
-        {/if}
+                <!-- Approved Vendor -->
+                {#if approvalForm.approved_vendor}
+                    <label>Approved Vendor</label>
+                    <input
+                        type="text"
+                        value={approvalForm.approved_vendor}
+                        disabled
+                        class="w-full border p-2 bg-gray-100"
+                    />
+                {/if}
 
-        <!-- Approval Decision -->
-        <label>Approval</label>
-        <select bind:value={approvalForm.approval} class="w-full border p-2">
-          <option value="" disabled>Select Approval</option>
-          <option value="approve">Approve</option>
-          <option value="reject">Reject</option>
-        </select>
+                <!-- Approval Decision -->
+                <label>Approval</label>
+                <select
+                    bind:value={approvalForm.approval}
+                    class="w-full border p-2"
+                >
+                    <option value="" disabled>Select Approval</option>
+                    <option value="approve">Approve</option>
+                    <option value="reject">Reject</option>
+                </select>
 
-        <!-- Reject Comment -->
-        {#if approvalForm.approval === 'reject'}
-          <label>Reject Comment</label>
-          <textarea
-            bind:value={approvalForm.reject_comment}
-            class="w-full border p-2"
-            rows="3"
-            placeholder="Enter reason for rejection..."
-          ></textarea>
-        {/if}
+                <!-- Reject Comment -->
+                {#if approvalForm.approval === "reject"}
+                    <label>Reject Comment</label>
+                    <textarea
+                        bind:value={approvalForm.reject_comment}
+                        class="w-full border p-2"
+                        rows="3"
+                        placeholder="Enter reason for rejection..."
+                    ></textarea>
+                {/if}
 
-        <!-- PO Remark (editable!) -->
-        <label>PO Remark</label>
-        <textarea
-          bind:value={approvalForm.po_remark}
-          class="w-full border p-2"
-          rows="3"
-          placeholder="Add or edit PO remark..."
-        ></textarea>
+                <!-- PO Remark (editable!) -->
+                <label>PO Remark</label>
+                <textarea
+                    bind:value={approvalForm.po_remark}
+                    class="w-full border p-2"
+                    rows="3"
+                    placeholder="Add or edit PO remark..."
+                ></textarea>
 
-        <!-- Hidden fields -->
-        <input type="hidden" value={approvalForm.approved_by} />
-        <input type="hidden" value={approvalForm.approved_date} />
+                <!-- Hidden fields -->
+                <input type="hidden" value={approvalForm.approved_by} />
+                <input type="hidden" value={approvalForm.approved_date} />
 
-        <!-- Actions -->
-        <div class="flex justify-end space-x-2 pt-4">
-          <button on:click={saveApproval} class="bg-blue-600 text-white px-4 py-2 rounded">Save</button>
-          <button on:click={() => showApprovalModal = false} class="px-4 py-2 rounded border">Cancel</button>
+                <!-- Actions -->
+                <div class="flex justify-end space-x-2 pt-4">
+                    <button
+                        on:click={saveApproval}
+                        class="bg-blue-600 text-white px-4 py-2 rounded"
+                        >Save</button
+                    >
+                    <button
+                        on:click={() => (showApprovalModal = false)}
+                        class="px-4 py-2 rounded border">Cancel</button
+                    >
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
 {/if}
 
-
 {#if showAcknowledgedModal}
-  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 overflow-y-auto">
-    <div class="min-h-screen flex items-center justify-center p-4">
-      <div class="bg-white rounded-lg shadow-lg w-full max-w-md max-h-[90vh] overflow-y-auto p-6 space-y-4">
-        <h2 class="text-xl font-bold">Acknowledge Purchase Order</h2>
+    <div
+        class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 overflow-y-auto"
+    >
+        <div class="min-h-screen flex items-center justify-center p-4">
+            <div
+                class="bg-white rounded-lg shadow-lg w-full max-w-md max-h-[90vh] overflow-y-auto p-6 space-y-4"
+            >
+                <h2 class="text-xl font-bold">Acknowledge Purchase Order</h2>
 
-        <!-- PO Number -->
-        <label>PO Number</label>
-        <input
-          type="text"
-          value={acknowledgedForm.po_number}
-          disabled
-          class="w-full border p-2 bg-gray-100"
-        />
+                <!-- PO Number -->
+                <label>PO Number</label>
+                <input
+                    type="text"
+                    value={acknowledgedForm.po_number}
+                    disabled
+                    class="w-full border p-2 bg-gray-100"
+                />
 
-        <!-- Acknowledged -->
-        <label>Acknowledged</label>
-        <select bind:value={acknowledgedForm.acknowledged} class="w-full border p-2">
-          <option value="" disabled>Select Acknowledgement</option>
-          <option value="acknowledged">Acknowledged</option>
-          <option value="reject">Reject</option>
-        </select>
+                <!-- Acknowledged -->
+                <label>Acknowledged</label>
+                <select
+                    bind:value={acknowledgedForm.acknowledged}
+                    class="w-full border p-2"
+                >
+                    <option value="" disabled>Select Acknowledgement</option>
+                    <option value="acknowledged">Acknowledged</option>
+                    <option value="reject">Reject</option>
+                </select>
 
-        <!-- Hidden fields -->
-        <input type="hidden" value={acknowledgedForm.acknowledged_by} />
-        <input type="hidden" value={acknowledgedForm.acknowledged_date} />
+                <!-- Hidden fields -->
+                <input type="hidden" value={acknowledgedForm.acknowledged_by} />
+                <input
+                    type="hidden"
+                    value={acknowledgedForm.acknowledged_date}
+                />
 
-        <!-- Actions -->
-        <div class="flex justify-end space-x-2 pt-4">
-          <button on:click={saveAcknowledged} class="bg-blue-600 text-white px-4 py-2 rounded">Save</button>
-          <button on:click={() => showAcknowledgedModal = false} class="px-4 py-2 rounded border">Cancel</button>
+                <!-- Actions -->
+                <div class="flex justify-end space-x-2 pt-4">
+                    <button
+                        on:click={saveAcknowledged}
+                        class="bg-blue-600 text-white px-4 py-2 rounded"
+                        >Save</button
+                    >
+                    <button
+                        on:click={() => (showAcknowledgedModal = false)}
+                        class="px-4 py-2 rounded border">Cancel</button
+                    >
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
 {/if}
 
 {#if showCompletedModal}
-  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 overflow-y-auto">
-    <div class="min-h-screen flex items-center justify-center p-4">
-      <div class="bg-white rounded-lg shadow-lg w-full max-w-md max-h-[90vh] overflow-y-auto p-6 space-y-4">
-        <h2 class="text-xl font-bold">Complete Purchase Order</h2>
+    <div
+        class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 overflow-y-auto"
+    >
+        <div class="min-h-screen flex items-center justify-center p-4">
+            <div
+                class="bg-white rounded-lg shadow-lg w-full max-w-md max-h-[90vh] overflow-y-auto p-6 space-y-4"
+            >
+                <h2 class="text-xl font-bold">Complete Purchase Order</h2>
 
-        <!-- PO Number -->
-        <label>PO Number</label>
-        <input
-          type="text"
-          value={completedForm.po_number}
-          disabled
-          class="w-full border p-2 bg-gray-100"
-        />
+                <!-- PO Number -->
+                <label>PO Number</label>
+                <input
+                    type="text"
+                    value={completedForm.po_number}
+                    disabled
+                    class="w-full border p-2 bg-gray-100"
+                />
 
-        <!-- Completed -->
-        <label>Completion</label>
-        <select bind:value={completedForm.completed} class="w-full border p-2">
-          <option value="" disabled>Select Status</option>
-          <option value="completed">Completed</option>
-          <option value="reject">Reject</option>
-        </select>
+                <!-- Completed -->
+                <label>Completion</label>
+                <select
+                    bind:value={completedForm.completed}
+                    class="w-full border p-2"
+                >
+                    <option value="" disabled>Select Status</option>
+                    <option value="completed">Completed</option>
+                    <option value="reject">Reject</option>
+                </select>
 
-        <!-- Hidden -->
-        <input type="hidden" value={completedForm.completed_by} />
-        <input type="hidden" value={completedForm.completed_date} />
+                <!-- Hidden -->
+                <input type="hidden" value={completedForm.completed_by} />
+                <input type="hidden" value={completedForm.completed_date} />
 
-        <!-- Actions -->
-        <div class="flex justify-end space-x-2 pt-4">
-          <button on:click={saveCompleted} class="bg-blue-600 text-white px-4 py-2 rounded">Save</button>
-          <button on:click={() => showCompletedModal = false} class="px-4 py-2 rounded border">Cancel</button>
+                <!-- Actions -->
+                <div class="flex justify-end space-x-2 pt-4">
+                    <button
+                        on:click={saveCompleted}
+                        class="bg-blue-600 text-white px-4 py-2 rounded"
+                        >Save</button
+                    >
+                    <button
+                        on:click={() => (showCompletedModal = false)}
+                        class="px-4 py-2 rounded border">Cancel</button
+                    >
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
 {/if}
 {#if showReceivedModal}
-  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 overflow-y-auto">
-    <div class="min-h-screen flex items-center justify-center p-4">
-      <div class="bg-white rounded-lg shadow-lg w-full max-w-md max-h-[90vh] overflow-y-auto p-6 space-y-4">
-        <h2 class="text-xl font-bold">Receive Purchase Order</h2>
+    <div
+        class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 overflow-y-auto"
+    >
+        <div class="min-h-screen flex items-center justify-center p-4">
+            <div
+                class="bg-white rounded-lg shadow-lg w-full max-w-md max-h-[90vh] overflow-y-auto p-6 space-y-4"
+            >
+                <h2 class="text-xl font-bold">Receive Purchase Order</h2>
 
-        <!-- PO Number -->
-        <label>PO Number</label>
-        <input
-          type="text"
-          value={receivedForm.po_number}
-          disabled
-          class="w-full border p-2 bg-gray-100"
-        />
+                <!-- PO Number -->
+                <label>PO Number</label>
+                <input
+                    type="text"
+                    value={receivedForm.po_number}
+                    disabled
+                    class="w-full border p-2 bg-gray-100"
+                />
 
-        <!-- Received -->
-        <label>Received</label>
-        <select bind:value={receivedForm.received} class="w-full border p-2">
-          <option value="" disabled>Select Status</option>
-          <option value="received">Received</option>
-          <option value="reject">Reject</option>
-        </select>
+                <!-- Received -->
+                <label>Received</label>
+                <select
+                    bind:value={receivedForm.received}
+                    class="w-full border p-2"
+                >
+                    <option value="" disabled>Select Status</option>
+                    <option value="received">Received</option>
+                    <option value="reject">Reject</option>
+                </select>
 
-        <!-- Hidden -->
-        <input type="hidden" value={receivedForm.received_by} />
-        <input type="hidden" value={receivedForm.received_date} />
+                <!-- Hidden -->
+                <input type="hidden" value={receivedForm.received_by} />
+                <input type="hidden" value={receivedForm.received_date} />
 
-        <!-- Actions -->
-        <div class="flex justify-end space-x-2 pt-4">
-          <button on:click={saveReceived} class="bg-blue-600 text-white px-4 py-2 rounded">Save</button>
-          <button on:click={() => showReceivedModal = false} class="px-4 py-2 rounded border">Cancel</button>
+                <!-- Actions -->
+                <div class="flex justify-end space-x-2 pt-4">
+                    <button
+                        on:click={saveReceived}
+                        class="bg-blue-600 text-white px-4 py-2 rounded"
+                        >Save</button
+                    >
+                    <button
+                        on:click={() => (showReceivedModal = false)}
+                        class="px-4 py-2 rounded border">Cancel</button
+                    >
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
 {/if}
 {#if showEditModal}
-  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 overflow-y-auto">
-    <div class="min-h-screen flex items-center justify-center p-4">
-      <div class="bg-white rounded-lg shadow-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto p-6 space-y-4">
-        <h2 class="text-xl font-bold">Edit Purchase Order</h2>
+    <div
+        class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 overflow-y-auto"
+    >
+        <div class="min-h-screen flex items-center justify-center p-4">
+            <div
+                class="bg-white rounded-lg shadow-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto p-6 space-y-4"
+            >
+                <h2 class="text-xl font-bold">Edit Purchase Order</h2>
 
-        <!-- PO Number -->
-        <label>PO Number</label>
-        <input type="text" value={editForm.po_number} disabled class="w-full border p-2 bg-gray-100"/>
+                <!-- PO Number -->
+                <label>PO Number</label>
+                <input
+                    type="text"
+                    value={editForm.po_number}
+                    disabled
+                    class="w-full border p-2 bg-gray-100"
+                />
 
-        <!-- Issue Name -->
-        <label>Issue Name</label>
-        <input type="text" value={editForm.issue_name} disabled class="w-full border p-2 bg-gray-100"/>
+                <!-- Issue Name -->
+                <label>Issue Name</label>
+                <input
+                    type="text"
+                    value={editForm.issue_name}
+                    disabled
+                    class="w-full border p-2 bg-gray-100"
+                />
 
-        <!-- Villa ID -->
-        <label>Villa ID</label>
-        <input type="text" value={editForm.villa_name} disabled class="w-full border p-2 bg-gray-100"/>
+                <!-- Villa ID -->
+                <label>Villa ID</label>
+                <input
+                    type="text"
+                    value={editForm.villa_name}
+                    disabled
+                    class="w-full border p-2 bg-gray-100"
+                />
 
-        <!-- PO Status -->
-        <label>PO Status</label>
-        <input type="text" value={editForm.po_status} disabled class="w-full border p-2 bg-gray-100"/>
+                <!-- PO Status -->
+                <label>PO Status</label>
+                <input
+                    type="text"
+                    value={editForm.po_status}
+                    disabled
+                    class="w-full border p-2 bg-gray-100"
+                />
 
-        <!-- Status Toggles -->
-        <div class="space-y-2">
-          {#each ['prepared','approved','acknowledged','completed','received'] as key}
-            <div class="flex items-center gap-2">
-              <label class="w-32 capitalize">{key}</label>
-              <select bind:value={editForm[key]} class="w-40 border p-2">
-                <option value={null}>Unset</option>
-                <option value={true}>True</option>
-                <option value={false}>False</option>
-              </select>
-              <button
-                type="button"
-                class="text-xs text-blue-600 underline"
-                on:click={() => editForm[key] = null}
-              >Reset</button>
+                <!-- Status Toggles -->
+                <div class="space-y-2">
+                    {#each ["prepared", "approved", "acknowledged", "completed", "received"] as key}
+                        <div class="flex items-center gap-2">
+                            <label class="w-32 capitalize">{key}</label>
+                            <select
+                                bind:value={editForm[key]}
+                                class="w-40 border p-2"
+                            >
+                                <option value={null}>Unset</option>
+                                <option value={true}>True</option>
+                                <option value={false}>False</option>
+                            </select>
+                            <button
+                                type="button"
+                                class="text-xs text-blue-600 underline"
+                                on:click={() => (editForm[key] = null)}
+                                >Reset</button
+                            >
+                        </div>
+                    {/each}
+                </div>
+
+                <!-- PO Remark -->
+                <label>PO Remark</label>
+                <textarea
+                    bind:value={editForm.po_remark}
+                    class="w-full border p-2"
+                    rows="3"
+                ></textarea>
+
+                <!-- Actions -->
+                <div class="flex justify-end space-x-2 pt-4">
+                    <button
+                        on:click={saveEdit}
+                        class="bg-blue-600 text-white px-4 py-2 rounded"
+                        >Save</button
+                    >
+                    <button
+                        on:click={() => (showEditModal = false)}
+                        class="px-4 py-2 rounded border">Cancel</button
+                    >
+                </div>
             </div>
-          {/each}
         </div>
-
-        <!-- PO Remark -->
-        <label>PO Remark</label>
-        <textarea
-          bind:value={editForm.po_remark}
-          class="w-full border p-2"
-          rows="3"
-        ></textarea>
-
-        <!-- Actions -->
-        <div class="flex justify-end space-x-2 pt-4">
-          <button on:click={saveEdit} class="bg-blue-600 text-white px-4 py-2 rounded">Save</button>
-          <button on:click={() => showEditModal = false} class="px-4 py-2 rounded border">Cancel</button>
-        </div>
-      </div>
     </div>
-  </div>
 {/if}
 {#if showAddPOModal}
-  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 overflow-y-auto">
-    <div class="min-h-screen flex items-center justify-center p-4">
-      <div class="bg-white rounded-lg shadow-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto p-6 space-y-4">
-        <h2 class="text-xl font-bold">Add Purchase Order</h2>
+    <div
+        class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 overflow-y-auto"
+    >
+        <div class="min-h-screen flex items-center justify-center p-4">
+            <div
+                class="bg-white rounded-lg shadow-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto p-6 space-y-4"
+            >
+                <h2 class="text-xl font-bold">Add Purchase Order</h2>
 
-        <!-- PO Type -->
-        <label>PO Type</label>
-        <select bind:value={addPOForm.po_type} class="w-full border p-2">
-          <option value="" disabled>Select PO Type</option>
-          <option value="purchase">Purchase</option>
-          <option value="project">Project</option>
-          <option value="repair">Repair</option>
-        </select>
+                <!-- PO Type -->
+                <label>PO Type</label>
+                <select
+                    bind:value={addPOForm.po_type}
+                    class="w-full border p-2"
+                >
+                    <option value="" disabled>Select PO Type</option>
+                    <option value="purchase">Purchase</option>
+                    <option value="project">Project</option>
+                    <option value="repair">Repair</option>
+                </select>
 
-        <!-- Villa -->
-        <label>Villa</label>
-        <select bind:value={addPOForm.villa_id} class="w-full border p-2">
-          <option value="" disabled>Select Villa</option>
-          {#each villaOptions as v}
-            <option value={v.id}>{v.villa_name}</option>
-          {/each}
-        </select>
+                <!-- Villa -->
+                <label>Villa</label>
+                <select
+                    bind:value={addPOForm.villa_id}
+                    class="w-full border p-2"
+                >
+                    <option value="" disabled>Select Villa</option>
+                    {#each villaOptions as v}
+                        <option value={v.id}>{v.villa_name}</option>
+                    {/each}
+                </select>
 
-        <!-- PO Item -->
-        <label>PO Item</label>
-        <select bind:value={addPOForm.po_item} class="w-full border p-2">
-          <option value="" disabled>Select Item</option>
-          {#each poItemOptions as item}
-            <option value={item.item_name}>{item.item_name}</option>
-          {/each}
-        </select>
+                <!-- PO Item -->
+                <label>PO Item</label>
+                <select
+                    bind:value={addPOForm.po_item}
+                    class="w-full border p-2"
+                >
+                    <option value="" disabled>Select Item</option>
+                    {#each poItemOptions as item}
+                        <option value={item.item_name}>{item.item_name}</option>
+                    {/each}
+                </select>
 
-        <!-- Quantity -->
-        <label>PO Quantity</label>
-        <input type="number" bind:value={addPOForm.po_quantity} class="w-full border p-2"/>
+                <!-- Quantity -->
+                <label>PO Quantity</label>
+                <input
+                    type="number"
+                    bind:value={addPOForm.po_quantity}
+                    class="w-full border p-2"
+                />
 
-        <!-- Remark -->
-        <label>PO Remark</label>
-        <textarea bind:value={addPOForm.po_remark} class="w-full border p-2"></textarea>
+                <!-- Remark -->
+                <label>PO Remark</label>
+                <textarea
+                    bind:value={addPOForm.po_remark}
+                    class="w-full border p-2"
+                ></textarea>
 
-        <!-- Requested By -->
-        <label>Requested By</label>
-        <select bind:value={addPOForm.requested_by} class="w-full border p-2">
-          <option value="" disabled>Select Employee</option>
-          {#each employeeOptions as e}
-            <option value={e.id}>{e.employee_name}</option>
-          {/each}
-        </select>
+                <!-- Requested By -->
+                <label>Requested By</label>
+                <select
+                    bind:value={addPOForm.requested_by}
+                    class="w-full border p-2"
+                >
+                    <option value="" disabled>Select Employee</option>
+                    {#each employeeOptions as e}
+                        <option value={e.id}>{e.employee_name}</option>
+                    {/each}
+                </select>
 
-        <!-- Requested Date -->
-        <label>Requested Date</label>
-        <input type="date" bind:value={addPOForm.requested_date} class="w-full border p-2"/>
+                <!-- Requested Date -->
+                <label>Requested Date</label>
+                <input
+                    type="date"
+                    bind:value={addPOForm.requested_date}
+                    class="w-full border p-2"
+                />
 
-        <!-- Actions -->
-        <div class="flex justify-end space-x-2 pt-4">
-          <button on:click={saveAddPO} class="bg-blue-600 text-white px-4 py-2 rounded">Save</button>
-          <button on:click={() => showAddPOModal = false} class="px-4 py-2 rounded border">Cancel</button>
+                <!-- Actions -->
+                <div class="flex justify-end space-x-2 pt-4">
+                    <button
+                        on:click={saveAddPO}
+                        class="bg-blue-600 text-white px-4 py-2 rounded"
+                        >Save</button
+                    >
+                    <button
+                        on:click={() => (showAddPOModal = false)}
+                        class="px-4 py-2 rounded border">Cancel</button
+                    >
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
-{/if}
\ No newline at end of file
+{/if}
diff --git a/src/routes/backoffice/timesheets/+page.svelte b/src/routes/backoffice/timesheets/+page.svelte
index a6d01b0..55c8604 100644
--- a/src/routes/backoffice/timesheets/+page.svelte
+++ b/src/routes/backoffice/timesheets/+page.svelte
@@ -2,8 +2,8 @@
     import { supabase } from "$lib/supabaseClient";
     import { onMount } from "svelte";
     import { v4 as uuidv4 } from "uuid";
-    import * as XLSX from 'xlsx';
-    
+    import * as XLSX from "xlsx";
+
     type Timesheets = {
         id: number;
         entered_by: string;
@@ -32,7 +32,7 @@
     type TimesheetsJoined = Timesheets & {
         vb_employee: { id: string; employee_name: string } | null;
         villa_name?: string;
-    };    
+    };
     type TimesheetDisplay = {
         id: number;
         name: string;
@@ -241,9 +241,8 @@
     }
     // Function to go to a specific page
     function goToPage(page: number) {
-
         console.log("Going to page:", page);
-        
+
         if (page >= 1 && page <= totalPages) currentPage = page;
 
         // Re-fetch timesheets with the current filters and pagination
@@ -272,8 +271,8 @@
                 type_of_work: tsdata.type_of_work,
                 category_of_work: tsdata.category_of_work,
                 villa_id:
-                    villas.find((v) => v.villa_name === tsdata.villa_name)?.id ||
-                    "",
+                    villas.find((v) => v.villa_name === tsdata.villa_name)
+                        ?.id || "",
                 datetime_in: tsdata.date_in?.toISOString().slice(0, 16),
                 datetime_out: tsdata.date_out?.toISOString().slice(0, 16),
                 total_work_hour: 0,
@@ -311,35 +310,21 @@
         offset: number = 0,
         limit: number = 20,
     ) {
-
-        console.log("Fetching timesheets with filters:", {
-            villaIdFilter,
-            searchTerm,
-            sortColumn,
-            sortOrder,
-            offset,
-            limit,
-        });
-        
-
         const fromIndex = offset;
         const toIndex = offset + limit - 1;
 
         let query = supabase
             .from("vb_timesheet_data")
-            .select(
-                '*',
-                { count: "exact" },
-            )
+            .select("*", { count: "exact" })
             .order(getDBColumn(sortColumn) || "created_at", {
-            ascending: sortOrder === "asc"
+                ascending: sortOrder === "asc",
             })
-            .range(fromIndex, toIndex);   
-        
+            .range(fromIndex, toIndex);
+
         if (typeof searchTerm === "string" && searchTerm.length > 4) {
             // Supabase ilike only supports one column at a time, so use or for multiple columns
             query = query.or(
-            `work_description.ilike.%${searchTerm}%,entered_name.ilike.%${searchTerm}%`
+                `work_description.ilike.%${searchTerm}%,entered_name.ilike.%${searchTerm}%`,
             );
         }
 
@@ -353,8 +338,6 @@
         console.log("Fetched timesheets:", count);
 
         console.log("Fetched timesheets data:", data);
-        
-        
 
         if (error) {
             console.error("Error fetching timesheets:", error);
@@ -375,18 +358,19 @@
                     tsdata.approval == null
                         ? "PENDING"
                         : tsdata.approval
-                            ? "APPROVED"
-                            : "REJECTED",
+                          ? "APPROVED"
+                          : "REJECTED",
                 total_hours_work:
                     Math.abs(
                         new Date(tsdata.datetime_out).getTime() -
                             new Date(tsdata.datetime_in).getTime(),
-                    ) / (1000 * 60 * 60),
-                approved_by:   tsdata.approved_name?.trim()
+                    ) /
+                    (1000 * 60 * 60),
+                approved_by: tsdata.approved_name?.trim()
                     ? tsdata.approved_name
                     : tsdata.approval === true
-                    ? "Auto Approve"
-                    : "Not Approved",
+                      ? "Auto Approve"
+                      : "Not Approved",
                 approved_date: tsdata.approved_date
                     ? new Date(tsdata.approved_date)
                     : undefined,
@@ -403,7 +387,10 @@
     $: totalPages = Math.ceil(totalItems / rowsPerPage);
     $: currentPage = 1;
 
-    function pageRange(totalPages: number, currentPage: number,): (number | string)[] {
+    function pageRange(
+        totalPages: number,
+        currentPage: number,
+    ): (number | string)[] {
         const range: (number | string)[] = [];
         const maxDisplay = 5;
 
@@ -426,12 +413,16 @@
 
         return range;
     }
+
     function getDBColumn(key: string) {
         switch (key) {
-            case "name": return "work_description";
-            case "staff_id": return "entered_by";
-            default: return key;
-    }
+            case "name":
+                return "work_description";
+            case "staff_id":
+                return "entered_by";
+            default:
+                return key;
+        }
     }
     function changePage(page: number) {
         if (page < 1 || page > totalPages || page === currentPage) return;
@@ -448,43 +439,46 @@
 
     async function exportTimesheets() {
         if (!selectedMonth || !selectedYear) {
-                alert("Please select a month and year to export.");
-                return;
-            }
+            alert("Please select a month and year to export.");
+            return;
+        }
 
-            try {
-                const response = await fetch("https://flow.catalis.app/webhook-test/villabugis-timesheets", {
+        try {
+            const response = await fetch(
+                "https://flow.catalis.app/webhook-test/villabugis-timesheets",
+                {
                     method: "PATCH",
                     headers: {
-                        "Content-Type": "application/json"
+                        "Content-Type": "application/json",
                     },
                     body: JSON.stringify({
                         month: selectedMonth,
-                        year: selectedYear
-                    })
-                });
+                        year: selectedYear,
+                    }),
+                },
+            );
 
-                if (!response.ok) {
-                    throw new Error(`Export failed: ${response.statusText}`);
-                }
-
-                const randomUuid = uuidv4().toString();
-
-                // Jika response adalah file (application/octet-stream atau Excel)
-                const blob = await response.blob();
-                const url = window.URL.createObjectURL(blob);
-                const link = document.createElement("a");
-                link.href = url;
-                link.download = `timesheet-${selectedYear}-${String(selectedMonth).padStart(2, '0')}-${randomUuid}.xlsx`;
-                document.body.appendChild(link);
-                link.click();
-                document.body.removeChild(link);
-                window.URL.revokeObjectURL(url);
-            } catch (error) {
-                console.error("Export error:", error);
-                alert("Failed to export timesheet.");
+            if (!response.ok) {
+                throw new Error(`Export failed: ${response.statusText}`);
             }
+
+            const randomUuid = uuidv4().toString();
+
+            // Jika response adalah file (application/octet-stream atau Excel)
+            const blob = await response.blob();
+            const url = window.URL.createObjectURL(blob);
+            const link = document.createElement("a");
+            link.href = url;
+            link.download = `timesheet-${selectedYear}-${String(selectedMonth).padStart(2, "0")}-${randomUuid}.xlsx`;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            window.URL.revokeObjectURL(url);
+        } catch (error) {
+            console.error("Export error:", error);
+            alert("Failed to export timesheet.");
         }
+    }
     async function exportToExcelFromFrontend() {
         if (!selectedMonth || !selectedYear) {
             alert("Please select both month and year");
@@ -497,7 +491,8 @@
         // 1. Fetch timesheet data
         const { data: timesheetData, error: timesheetErr } = await supabase
             .from("vb_timesheet_data")
-            .select(`
+            .select(
+                `
                 id,
                 work_description,
                 total_work_hour,
@@ -511,7 +506,8 @@
                 villa_name,
                 entered_name,
                 approved_name
-            `)
+            `,
+            )
             .gte("datetime_in", startDate.toISOString())
             .lte("datetime_in", endDate.toISOString());
 
@@ -540,7 +536,7 @@
             "Supervision",
             "Guest Service",
             "Administration",
-            "Non Billable"
+            "Non Billable",
         ];
 
         const sheet2Name = "Data";
@@ -586,20 +582,26 @@
             return row;
         };
 
-        [headerRowIdx, officeRowIdx, fbRowIdx, villasOnlyRowIdx].forEach((idx) => {
-            sheet1Rows[idx] = sheet1Rows[idx] || [];
-            ensureCols(sheet1Rows[idx], 13); // at least to column M
-        });
+        [headerRowIdx, officeRowIdx, fbRowIdx, villasOnlyRowIdx].forEach(
+            (idx) => {
+                sheet1Rows[idx] = sheet1Rows[idx] || [];
+                ensureCols(sheet1Rows[idx], 13); // at least to column M
+            },
+        );
 
         // Insert labels and formulas
         sheet1Rows[headerRowIdx][10] = "Total Work Hours"; // K2
         sheet1Rows[headerRowIdx][11] = { f: `SUM(${sheet2Name}!$C:$C)` }; // L2
 
         sheet1Rows[officeRowIdx][10] = "Office"; // K3
-        sheet1Rows[officeRowIdx][11] = { f: `SUMIFS(${sheet2Name}!$C:$C, ${sheet2Name}!$K:$K, K3)` }; // L3
+        sheet1Rows[officeRowIdx][11] = {
+            f: `SUMIFS(${sheet2Name}!$C:$C, ${sheet2Name}!$K:$K, K3)`,
+        }; // L3
 
         sheet1Rows[fbRowIdx][10] = "FB"; // K4
-        sheet1Rows[fbRowIdx][11] = { f: `SUMIFS(${sheet2Name}!$C:$C, ${sheet2Name}!$K:$K, K4)` }; // L4
+        sheet1Rows[fbRowIdx][11] = {
+            f: `SUMIFS(${sheet2Name}!$C:$C, ${sheet2Name}!$K:$K, K4)`,
+        }; // L4
 
         sheet1Rows[villasOnlyRowIdx][10] = "Villas Only"; // K5
         sheet1Rows[villasOnlyRowIdx][11] = { f: `L2-L3` }; // L5
@@ -687,8 +689,6 @@
         let error = null;
 
         if (isEditing && currentEditingId) {
-            
-
             const { error: updateError } = await supabase
                 .from("vb_timesheet")
                 .update({
@@ -755,8 +755,6 @@
             showModal = false;
         }
     }
-
-
 </script>
 
 <div>
@@ -778,7 +776,9 @@
                 placeholder="🔍 Search by work description or 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"
                 on:input={(e) => {
-                    currentSearchTerm = (e.target as HTMLInputElement).value.toLowerCase();
+                    currentSearchTerm = (
+                        e.target as HTMLInputElement
+                    ).value.toLowerCase();
                     fetchTimeSheets(currentVillaFilter, currentSearchTerm);
                 }}
             />
@@ -786,7 +786,8 @@
                 id="villa-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) => {
-                    currentVillaFilter = (e.target as HTMLSelectElement).value || null;
+                    currentVillaFilter =
+                        (e.target as HTMLSelectElement).value || null;
                     fetchTimeSheets(currentVillaFilter, currentSearchTerm);
                 }}
             >
@@ -797,17 +798,21 @@
             </select>
             <button
                 class="bg-gray-200 text-gray-700 px-4 py-2 rounded-xl hover:bg-gray-300 text-sm transition"
-                on:click={() =>{
+                on:click={() => {
                     currentVillaFilter = null;
                     currentSearchTerm = null;
-            
+
                     // Optional: reset UI elements if you use bind:value
-                    const searchInput = document.querySelector('#search-input') as HTMLInputElement;
+                    const searchInput = document.querySelector(
+                        "#search-input",
+                    ) as HTMLInputElement;
                     if (searchInput) searchInput.value = "";
-            
-                    const villaSelect = document.querySelector('#villa-select') as HTMLSelectElement;
+
+                    const villaSelect = document.querySelector(
+                        "#villa-select",
+                    ) as HTMLSelectElement;
                     if (villaSelect) villaSelect.value = "";
-            
+
                     fetchTimeSheets(null, null);
                 }}
             >
@@ -831,22 +836,21 @@
                                 class="sticky left-0 px-4 py-3 text-left font-semibold text-gray-700 uppercase tracking-wider whitespace-nowrap"
                                 style="background-color: #f0f8ff; z-index: 10;"
                                 on:click={() => toggleSort(col.key)}
-                                
                             >
                                 {col.title}
                                 {#if sortColumn === col.key}
-                                    {sortOrder === 'asc' ? ' 🔼' : ' 🔽'}
+                                    {sortOrder === "asc" ? " 🔼" : " 🔽"}
                                 {/if}
                             </th>
                         {:else}
                             <th
-                                class="cursor-pointer px-4 py-3 text-left font-semibold text-gray-700 uppercase tracking-wider whitespace-nowrap" on:click={() => toggleSort(col.key)}
+                                class="cursor-pointer px-4 py-3 text-left font-semibold text-gray-700 uppercase tracking-wider whitespace-nowrap"
+                                on:click={() => toggleSort(col.key)}
                             >
-                            
                                 {col.title}
-                                    {#if sortColumn === col.key}
-                                    {sortOrder === 'asc' ? ' 🔼' : ' 🔽'}
-                                    {/if}
+                                {#if sortColumn === col.key}
+                                    {sortOrder === "asc" ? " 🔼" : " 🔽"}
+                                {/if}
                             </th>
                         {/if}
                     {/each}
@@ -902,8 +906,20 @@
                             {:else if col.key === "approved_date"}
                                 <td class="px-4 py-2">
                                     {row[col.key] &&
-                                    !isNaN(new Date(row[col.key] as string | number | Date).getTime())
-                                        ? new Date(row[col.key] as string | number | Date).toLocaleString()
+                                    !isNaN(
+                                        new Date(
+                                            row[col.key] as
+                                                | string
+                                                | number
+                                                | Date,
+                                        ).getTime(),
+                                    )
+                                        ? new Date(
+                                              row[col.key] as
+                                                  | string
+                                                  | number
+                                                  | Date,
+                                          ).toLocaleString()
                                         : "N/A"}
                                 </td>
                             {:else if col.key === "total_hours_work"}
@@ -913,12 +929,19 @@
                             {:else if col.key === "created_at"}
                                 <td class="px-4 py-2">
                                     {row[col.key] !== undefined
-                                        ? new Date(row[col.key] as string | number | Date).toLocaleString()
+                                        ? new Date(
+                                              row[col.key] as
+                                                  | string
+                                                  | number
+                                                  | Date,
+                                          ).toLocaleString()
                                         : "N/A"}
                                 </td>
                             {:else if col.key === "villa_name"}
-                                <td class="sticky left-0 px-4 py-2 font-medium text-blue-600 max-w-xs whitespace-normal align-top break-words"
-                                style="background-color: #f0f8ff; cursor: pointer;">
+                                <td
+                                    class="sticky left-0 px-4 py-2 font-medium text-blue-600 max-w-xs whitespace-normal align-top break-words"
+                                    style="background-color: #f0f8ff; cursor: pointer;"
+                                >
                                     {row[col.key] || "Unknown Villa"}
                                 </td>
                             {:else if col.key === "staff_id"}
@@ -948,7 +971,9 @@
                             {:else if col.key === "date_in" || col.key === "date_out"}
                                 <td class="px-4 py-2">
                                     {row[col.key]
-                                        ? new Date(row[col.key]).toLocaleString()
+                                        ? new Date(
+                                              row[col.key],
+                                          ).toLocaleString()
                                         : "N/A"}
                                 </td>
                             {:else}
@@ -975,35 +1000,35 @@
                 <!-- Month Selector -->
                 <label for="month" class="text-sm">Month:</label>
                 <select
-                id="month"
-                class="border border-gray-300 px-2 py-1 rounded text-sm"
-                bind:value={selectedMonth}
+                    id="month"
+                    class="border border-gray-300 px-2 py-1 rounded text-sm"
+                    bind:value={selectedMonth}
                 >
-                <option value="" disabled selected>Select</option>
-                {#each Array.from({ length: 12 }, (_, i) => i + 1) as m}
-                    <option value={m}>{m}</option>
-                {/each}
+                    <option value="" disabled selected>Select</option>
+                    {#each Array.from({ length: 12 }, (_, i) => i + 1) as m}
+                        <option value={m}>{m}</option>
+                    {/each}
                 </select>
 
                 <!-- Year Selector -->
                 <label for="year" class="text-sm ml-2">Year:</label>
                 <select
-                id="year"
-                class="border border-gray-300 px-2 py-1 rounded text-sm"
-                bind:value={selectedYear}
+                    id="year"
+                    class="border border-gray-300 px-2 py-1 rounded text-sm"
+                    bind:value={selectedYear}
                 >
-                <option value="" disabled selected>Select</option>
-                {#each Array.from({ length: 5 }, (_, i) => new Date().getFullYear() - i) as y}
-                    <option value={y}>{y}</option>
-                {/each}
+                    <option value="" disabled selected>Select</option>
+                    {#each Array.from({ length: 5 }, (_, i) => new Date().getFullYear() - i) as y}
+                        <option value={y}>{y}</option>
+                    {/each}
                 </select>
 
                 <!-- Export Button -->
                 <button
-                class="bg-green-600 text-white px-3 py-1 rounded hover:bg-green-700 text-sm"
-                on:click={exportToExcelFromFrontend}
+                    class="bg-green-600 text-white px-3 py-1 rounded hover:bg-green-700 text-sm"
+                    on:click={exportToExcelFromFrontend}
                 >
-                ⬇️ Export
+                    ⬇️ Export
                 </button>
             </div>
             <div class="space-x-2">
@@ -1041,7 +1066,8 @@
                     {:else}
                         <button
                             on:click={() => changePage(page as number)}
-                            class="px-2 py-1 border rounded {page === currentPage
+                            class="px-2 py-1 border rounded {page ===
+                            currentPage
                                 ? 'bg-blue-600 text-white border-blue-600'
                                 : 'bg-white border-gray-300 hover:bg-gray-100'}"
                         >
@@ -1058,7 +1084,7 @@
                 </button>
             </div>
         </div>
-      </div>
+    </div>
 </div>
 
 <!-- Modal -->
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index c1cf4d7..364e6e5 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -227,14 +227,14 @@
             </button>
         </form>
 
-        <p class="text-center text-sm text-gray-500">
+        <!-- <p class="text-center text-sm text-gray-500">
             Don’t have an account?
             <a
                 href="/register"
                 class="text-blue-600 hover:underline font-bold ml-1"
                 >Sign Up Now</a
             >
-        </p>
+        </p> -->
     </div>
 </div>
 
diff --git a/yarn.lock b/yarn.lock
index c798851..dcb66b6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10,6 +10,148 @@
     "@jridgewell/gen-mapping" "^0.3.5"
     "@jridgewell/trace-mapping" "^0.3.24"
 
+"@emnapi/core@^1.4.3":
+  version "1.4.5"
+  resolved "https://registry.yarnpkg.com/@emnapi/core/-/core-1.4.5.tgz#bfbb0cbbbb9f96ec4e2c4fd917b7bbe5495ceccb"
+  integrity sha512-XsLw1dEOpkSX/WucdqUhPWP7hDxSvZiY+fsUC14h+FtQ2Ifni4znbBt8punRX+Uj2JG/uDb8nEHVKvrVlvdZ5Q==
+  dependencies:
+    "@emnapi/wasi-threads" "1.0.4"
+    tslib "^2.4.0"
+
+"@emnapi/runtime@^1.4.3":
+  version "1.4.5"
+  resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.4.5.tgz#c67710d0661070f38418b6474584f159de38aba9"
+  integrity sha512-++LApOtY0pEEz1zrd9vy1/zXVaVJJ/EbAF3u0fXIzPJEDtnITsBGbbK0EkM72amhl/R5b+5xx0Y/QhcVOpuulg==
+  dependencies:
+    tslib "^2.4.0"
+
+"@emnapi/wasi-threads@1.0.4", "@emnapi/wasi-threads@^1.0.2":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@emnapi/wasi-threads/-/wasi-threads-1.0.4.tgz#703fc094d969e273b1b71c292523b2f792862bf4"
+  integrity sha512-PJR+bOmMOPH8AtcTGAyYNiuJ3/Fcoj2XN/gBEWzDIKh254XO+mM9XoXHk5GNEhodxeMznbg7BlRojVbKN+gC6g==
+  dependencies:
+    tslib "^2.4.0"
+
+"@esbuild/aix-ppc64@0.25.4":
+  version "0.25.4"
+  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.25.4.tgz#830d6476cbbca0c005136af07303646b419f1162"
+  integrity sha512-1VCICWypeQKhVbE9oW/sJaAmjLxhVqacdkvPLEjwlttjfwENRSClS8EjBz0KzRyFSCPDIkuXW34Je/vk7zdB7Q==
+
+"@esbuild/android-arm64@0.25.4":
+  version "0.25.4"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.25.4.tgz#d11d4fc299224e729e2190cacadbcc00e7a9fd67"
+  integrity sha512-bBy69pgfhMGtCnwpC/x5QhfxAz/cBgQ9enbtwjf6V9lnPI/hMyT9iWpR1arm0l3kttTr4L0KSLpKmLp/ilKS9A==
+
+"@esbuild/android-arm@0.25.4":
+  version "0.25.4"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.25.4.tgz#5660bd25080553dd2a28438f2a401a29959bd9b1"
+  integrity sha512-QNdQEps7DfFwE3hXiU4BZeOV68HHzYwGd0Nthhd3uCkkEKK7/R6MTgM0P7H7FAs5pU/DIWsviMmEGxEoxIZ+ZQ==
+
+"@esbuild/android-x64@0.25.4":
+  version "0.25.4"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.25.4.tgz#18ddde705bf984e8cd9efec54e199ac18bc7bee1"
+  integrity sha512-TVhdVtQIFuVpIIR282btcGC2oGQoSfZfmBdTip2anCaVYcqWlZXGcdcKIUklfX2wj0JklNYgz39OBqh2cqXvcQ==
+
+"@esbuild/darwin-arm64@0.25.4":
+  version "0.25.4"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.25.4.tgz#b0b7fb55db8fc6f5de5a0207ae986eb9c4766e67"
+  integrity sha512-Y1giCfM4nlHDWEfSckMzeWNdQS31BQGs9/rouw6Ub91tkK79aIMTH3q9xHvzH8d0wDru5Ci0kWB8b3up/nl16g==
+
+"@esbuild/darwin-x64@0.25.4":
+  version "0.25.4"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.25.4.tgz#e6813fdeba0bba356cb350a4b80543fbe66bf26f"
+  integrity sha512-CJsry8ZGM5VFVeyUYB3cdKpd/H69PYez4eJh1W/t38vzutdjEjtP7hB6eLKBoOdxcAlCtEYHzQ/PJ/oU9I4u0A==
+
+"@esbuild/freebsd-arm64@0.25.4":
+  version "0.25.4"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.4.tgz#dc11a73d3ccdc308567b908b43c6698e850759be"
+  integrity sha512-yYq+39NlTRzU2XmoPW4l5Ifpl9fqSk0nAJYM/V/WUGPEFfek1epLHJIkTQM6bBs1swApjO5nWgvr843g6TjxuQ==
+
+"@esbuild/freebsd-x64@0.25.4":
+  version "0.25.4"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.25.4.tgz#91da08db8bd1bff5f31924c57a81dab26e93a143"
+  integrity sha512-0FgvOJ6UUMflsHSPLzdfDnnBBVoCDtBTVyn/MrWloUNvq/5SFmh13l3dvgRPkDihRxb77Y17MbqbCAa2strMQQ==
+
+"@esbuild/linux-arm64@0.25.4":
+  version "0.25.4"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.25.4.tgz#efc15e45c945a082708f9a9f73bfa8d4db49728a"
+  integrity sha512-+89UsQTfXdmjIvZS6nUnOOLoXnkUTB9hR5QAeLrQdzOSWZvNSAXAtcRDHWtqAUtAmv7ZM1WPOOeSxDzzzMogiQ==
+
+"@esbuild/linux-arm@0.25.4":
+  version "0.25.4"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.25.4.tgz#9b93c3e54ac49a2ede6f906e705d5d906f6db9e8"
+  integrity sha512-kro4c0P85GMfFYqW4TWOpvmF8rFShbWGnrLqlzp4X1TNWjRY3JMYUfDCtOxPKOIY8B0WC8HN51hGP4I4hz4AaQ==
+
+"@esbuild/linux-ia32@0.25.4":
+  version "0.25.4"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.25.4.tgz#be8ef2c3e1d99fca2d25c416b297d00360623596"
+  integrity sha512-yTEjoapy8UP3rv8dB0ip3AfMpRbyhSN3+hY8mo/i4QXFeDxmiYbEKp3ZRjBKcOP862Ua4b1PDfwlvbuwY7hIGQ==
+
+"@esbuild/linux-loong64@0.25.4":
+  version "0.25.4"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.25.4.tgz#b0840a2707c3fc02eec288d3f9defa3827cd7a87"
+  integrity sha512-NeqqYkrcGzFwi6CGRGNMOjWGGSYOpqwCjS9fvaUlX5s3zwOtn1qwg1s2iE2svBe4Q/YOG1q6875lcAoQK/F4VA==
+
+"@esbuild/linux-mips64el@0.25.4":
+  version "0.25.4"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.25.4.tgz#2a198e5a458c9f0e75881a4e63d26ba0cf9df39f"
+  integrity sha512-IcvTlF9dtLrfL/M8WgNI/qJYBENP3ekgsHbYUIzEzq5XJzzVEV/fXY9WFPfEEXmu3ck2qJP8LG/p3Q8f7Zc2Xg==
+
+"@esbuild/linux-ppc64@0.25.4":
+  version "0.25.4"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.25.4.tgz#64f4ae0b923d7dd72fb860b9b22edb42007cf8f5"
+  integrity sha512-HOy0aLTJTVtoTeGZh4HSXaO6M95qu4k5lJcH4gxv56iaycfz1S8GO/5Jh6X4Y1YiI0h7cRyLi+HixMR+88swag==
+
+"@esbuild/linux-riscv64@0.25.4":
+  version "0.25.4"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.25.4.tgz#fb2844b11fdddd39e29d291c7cf80f99b0d5158d"
+  integrity sha512-i8JUDAufpz9jOzo4yIShCTcXzS07vEgWzyX3NH2G7LEFVgrLEhjwL3ajFE4fZI3I4ZgiM7JH3GQ7ReObROvSUA==
+
+"@esbuild/linux-s390x@0.25.4":
+  version "0.25.4"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.25.4.tgz#1466876e0aa3560c7673e63fdebc8278707bc750"
+  integrity sha512-jFnu+6UbLlzIjPQpWCNh5QtrcNfMLjgIavnwPQAfoGx4q17ocOU9MsQ2QVvFxwQoWpZT8DvTLooTvmOQXkO51g==
+
+"@esbuild/linux-x64@0.25.4":
+  version "0.25.4"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.25.4.tgz#c10fde899455db7cba5f11b3bccfa0e41bf4d0cd"
+  integrity sha512-6e0cvXwzOnVWJHq+mskP8DNSrKBr1bULBvnFLpc1KY+d+irZSgZ02TGse5FsafKS5jg2e4pbvK6TPXaF/A6+CA==
+
+"@esbuild/netbsd-arm64@0.25.4":
+  version "0.25.4"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.4.tgz#02e483fbcbe3f18f0b02612a941b77be76c111a4"
+  integrity sha512-vUnkBYxZW4hL/ie91hSqaSNjulOnYXE1VSLusnvHg2u3jewJBz3YzB9+oCw8DABeVqZGg94t9tyZFoHma8gWZQ==
+
+"@esbuild/netbsd-x64@0.25.4":
+  version "0.25.4"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.25.4.tgz#ec401fb0b1ed0ac01d978564c5fc8634ed1dc2ed"
+  integrity sha512-XAg8pIQn5CzhOB8odIcAm42QsOfa98SBeKUdo4xa8OvX8LbMZqEtgeWE9P/Wxt7MlG2QqvjGths+nq48TrUiKw==
+
+"@esbuild/openbsd-arm64@0.25.4":
+  version "0.25.4"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.4.tgz#f272c2f41cfea1d91b93d487a51b5c5ca7a8c8c4"
+  integrity sha512-Ct2WcFEANlFDtp1nVAXSNBPDxyU+j7+tId//iHXU2f/lN5AmO4zLyhDcpR5Cz1r08mVxzt3Jpyt4PmXQ1O6+7A==
+
+"@esbuild/openbsd-x64@0.25.4":
+  version "0.25.4"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.25.4.tgz#2e25950bc10fa9db1e5c868e3d50c44f7c150fd7"
+  integrity sha512-xAGGhyOQ9Otm1Xu8NT1ifGLnA6M3sJxZ6ixylb+vIUVzvvd6GOALpwQrYrtlPouMqd/vSbgehz6HaVk4+7Afhw==
+
+"@esbuild/sunos-x64@0.25.4":
+  version "0.25.4"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.25.4.tgz#cd596fa65a67b3b7adc5ecd52d9f5733832e1abd"
+  integrity sha512-Mw+tzy4pp6wZEK0+Lwr76pWLjrtjmJyUB23tHKqEDP74R3q95luY/bXqXZeYl4NYlvwOqoRKlInQialgCKy67Q==
+
+"@esbuild/win32-arm64@0.25.4":
+  version "0.25.4"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.25.4.tgz#b4dbcb57b21eeaf8331e424c3999b89d8951dc88"
+  integrity sha512-AVUP428VQTSddguz9dO9ngb+E5aScyg7nOeJDrF1HPYu555gmza3bDGMPhmVXL8svDSoqPCsCPjb265yG/kLKQ==
+
+"@esbuild/win32-ia32@0.25.4":
+  version "0.25.4"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.25.4.tgz#410842e5d66d4ece1757634e297a87635eb82f7a"
+  integrity sha512-i1sW+1i+oWvQzSgfRcxxG2k4I9n3O9NRqy8U+uugaT2Dy7kLO9Y7wI72haOahxceMX8hZAzgGou1FhndRldxRg==
+
 "@esbuild/win32-x64@0.25.4":
   version "0.25.4"
   resolved "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.4.tgz"
@@ -74,6 +216,15 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@napi-rs/wasm-runtime@^0.2.9":
+  version "0.2.12"
+  resolved "https://registry.yarnpkg.com/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz#3e78a8b96e6c33a6c517e1894efbd5385a7cb6f2"
+  integrity sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==
+  dependencies:
+    "@emnapi/core" "^1.4.3"
+    "@emnapi/runtime" "^1.4.3"
+    "@tybys/wasm-util" "^0.10.0"
+
 "@polka/url@^1.0.0-next.24":
   version "1.0.0-next.29"
   resolved "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz"
@@ -119,6 +270,106 @@
     estree-walker "^2.0.2"
     picomatch "^4.0.2"
 
+"@rollup/rollup-android-arm-eabi@4.41.1":
+  version "4.41.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.41.1.tgz#f39f09f60d4a562de727c960d7b202a2cf797424"
+  integrity sha512-NELNvyEWZ6R9QMkiytB4/L4zSEaBC03KIXEghptLGLZWJ6VPrL63ooZQCOnlx36aQPGhzuOMwDerC1Eb2VmrLw==
+
+"@rollup/rollup-android-arm64@4.41.1":
+  version "4.41.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.41.1.tgz#d19af7e23760717f1d879d4ca3d2cd247742dff2"
+  integrity sha512-DXdQe1BJ6TK47ukAoZLehRHhfKnKg9BjnQYUu9gzhI8Mwa1d2fzxA1aw2JixHVl403bwp1+/o/NhhHtxWJBgEA==
+
+"@rollup/rollup-darwin-arm64@4.41.1":
+  version "4.41.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.41.1.tgz#1c3a2fbf205d80641728e05f4a56c909e95218b7"
+  integrity sha512-5afxvwszzdulsU2w8JKWwY8/sJOLPzf0e1bFuvcW5h9zsEg+RQAojdW0ux2zyYAz7R8HvvzKCjLNJhVq965U7w==
+
+"@rollup/rollup-darwin-x64@4.41.1":
+  version "4.41.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.41.1.tgz#aa66d2ba1a25e609500e13bef06dc0e71cc0c0d4"
+  integrity sha512-egpJACny8QOdHNNMZKf8xY0Is6gIMz+tuqXlusxquWu3F833DcMwmGM7WlvCO9sB3OsPjdC4U0wHw5FabzCGZg==
+
+"@rollup/rollup-freebsd-arm64@4.41.1":
+  version "4.41.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.41.1.tgz#df10a7b6316a0ef1028c6ca71a081124c537e30d"
+  integrity sha512-DBVMZH5vbjgRk3r0OzgjS38z+atlupJ7xfKIDJdZZL6sM6wjfDNo64aowcLPKIx7LMQi8vybB56uh1Ftck/Atg==
+
+"@rollup/rollup-freebsd-x64@4.41.1":
+  version "4.41.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.41.1.tgz#a3fdce8a05e95b068cbcb46e4df5185e407d0c35"
+  integrity sha512-3FkydeohozEskBxNWEIbPfOE0aqQgB6ttTkJ159uWOFn42VLyfAiyD9UK5mhu+ItWzft60DycIN1Xdgiy8o/SA==
+
+"@rollup/rollup-linux-arm-gnueabihf@4.41.1":
+  version "4.41.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.41.1.tgz#49f766c55383bd0498014a9d76924348c2f3890c"
+  integrity sha512-wC53ZNDgt0pqx5xCAgNunkTzFE8GTgdZ9EwYGVcg+jEjJdZGtq9xPjDnFgfFozQI/Xm1mh+D9YlYtl+ueswNEg==
+
+"@rollup/rollup-linux-arm-musleabihf@4.41.1":
+  version "4.41.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.41.1.tgz#1d4d7d32fc557e17d52e1857817381ea365e2959"
+  integrity sha512-jwKCca1gbZkZLhLRtsrka5N8sFAaxrGz/7wRJ8Wwvq3jug7toO21vWlViihG85ei7uJTpzbXZRcORotE+xyrLA==
+
+"@rollup/rollup-linux-arm64-gnu@4.41.1":
+  version "4.41.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.41.1.tgz#f4fc317268441e9589edad3be8f62b6c03009bc1"
+  integrity sha512-g0UBcNknsmmNQ8V2d/zD2P7WWfJKU0F1nu0k5pW4rvdb+BIqMm8ToluW/eeRmxCared5dD76lS04uL4UaNgpNA==
+
+"@rollup/rollup-linux-arm64-musl@4.41.1":
+  version "4.41.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.41.1.tgz#63a1f1b0671cb17822dabae827fef0e443aebeb7"
+  integrity sha512-XZpeGB5TKEZWzIrj7sXr+BEaSgo/ma/kCgrZgL0oo5qdB1JlTzIYQKel/RmhT6vMAvOdM2teYlAaOGJpJ9lahg==
+
+"@rollup/rollup-linux-loongarch64-gnu@4.41.1":
+  version "4.41.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.41.1.tgz#c659b01cc6c0730b547571fc3973e1e955369f98"
+  integrity sha512-bkCfDJ4qzWfFRCNt5RVV4DOw6KEgFTUZi2r2RuYhGWC8WhCA8lCAJhDeAmrM/fdiAH54m0mA0Vk2FGRPyzI+tw==
+
+"@rollup/rollup-linux-powerpc64le-gnu@4.41.1":
+  version "4.41.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.41.1.tgz#612e746f9ad7e58480f964d65e0d6c3f4aae69a8"
+  integrity sha512-3mr3Xm+gvMX+/8EKogIZSIEF0WUu0HL9di+YWlJpO8CQBnoLAEL/roTCxuLncEdgcfJcvA4UMOf+2dnjl4Ut1A==
+
+"@rollup/rollup-linux-riscv64-gnu@4.41.1":
+  version "4.41.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.41.1.tgz#4610dbd1dcfbbae32fbc10c20ae7387acb31110c"
+  integrity sha512-3rwCIh6MQ1LGrvKJitQjZFuQnT2wxfU+ivhNBzmxXTXPllewOF7JR1s2vMX/tWtUYFgphygxjqMl76q4aMotGw==
+
+"@rollup/rollup-linux-riscv64-musl@4.41.1":
+  version "4.41.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.41.1.tgz#054911fab40dc83fafc21e470193c058108f19d8"
+  integrity sha512-LdIUOb3gvfmpkgFZuccNa2uYiqtgZAz3PTzjuM5bH3nvuy9ty6RGc/Q0+HDFrHrizJGVpjnTZ1yS5TNNjFlklw==
+
+"@rollup/rollup-linux-s390x-gnu@4.41.1":
+  version "4.41.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.41.1.tgz#98896eca8012547c7f04bd07eaa6896825f9e1a5"
+  integrity sha512-oIE6M8WC9ma6xYqjvPhzZYk6NbobIURvP/lEbh7FWplcMO6gn7MM2yHKA1eC/GvYwzNKK/1LYgqzdkZ8YFxR8g==
+
+"@rollup/rollup-linux-x64-gnu@4.41.1":
+  version "4.41.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.41.1.tgz#01cf56844a1e636ee80dfb364e72c2b7142ad896"
+  integrity sha512-cWBOvayNvA+SyeQMp79BHPK8ws6sHSsYnK5zDcsC3Hsxr1dgTABKjMnMslPq1DvZIp6uO7kIWhiGwaTdR4Og9A==
+
+"@rollup/rollup-linux-x64-gnu@4.9.5":
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.9.5.tgz#85946ee4d068bd12197aeeec2c6f679c94978a49"
+  integrity sha512-Dq1bqBdLaZ1Gb/l2e5/+o3B18+8TI9ANlA1SkejZqDgdU/jK/ThYaMPMJpVMMXy2uRHvGKbkz9vheVGdq3cJfA==
+
+"@rollup/rollup-linux-x64-musl@4.41.1":
+  version "4.41.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.41.1.tgz#e67c7531df6dff0b4c241101d4096617fbca87c3"
+  integrity sha512-y5CbN44M+pUCdGDlZFzGGBSKCA4A/J2ZH4edTYSSxFg7ce1Xt3GtydbVKWLlzL+INfFIZAEg1ZV6hh9+QQf9YQ==
+
+"@rollup/rollup-win32-arm64-msvc@4.41.1":
+  version "4.41.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.41.1.tgz#7eeada98444e580674de6989284e4baacd48ea65"
+  integrity sha512-lZkCxIrjlJlMt1dLO/FbpZbzt6J/A8p4DnqzSa4PWqPEUUUnzXLeki/iyPLfV0BmHItlYgHUqJe+3KiyydmiNQ==
+
+"@rollup/rollup-win32-ia32-msvc@4.41.1":
+  version "4.41.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.41.1.tgz#516c4b54f80587b4a390aaf4940b40870271d35d"
+  integrity sha512-+psFT9+pIh2iuGsxFYYa/LhS5MFKmuivRsx9iPJWNSGbh2XVEjk90fmpUEjCnILPEPJnikAU6SFDiEUyOv90Pg==
+
 "@rollup/rollup-win32-x64-msvc@4.41.1":
   version "4.41.1"
   resolved "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.41.1.tgz"
@@ -138,7 +389,7 @@
   dependencies:
     "@supabase/node-fetch" "^2.6.14"
 
-"@supabase/node-fetch@^2.6.14", "@supabase/node-fetch@2.6.15":
+"@supabase/node-fetch@2.6.15", "@supabase/node-fetch@^2.6.14":
   version "2.6.15"
   resolved "https://registry.npmjs.org/@supabase/node-fetch/-/node-fetch-2.6.15.tgz"
   integrity sha512-1ibVeYUacxWYi9i0cf5efil6adJ9WRyZBLivgjs+AUpewx1F3xPi7gLgaASI2SmIQxPoCEjAsLAzKPgMJVgOUQ==
@@ -176,7 +427,7 @@
   dependencies:
     "@supabase/node-fetch" "^2.6.14"
 
-"@supabase/supabase-js@^2.43.4", "@supabase/supabase-js@^2.49.8":
+"@supabase/supabase-js@^2.49.8":
   version "2.49.8"
   resolved "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.49.8.tgz"
   integrity sha512-zzBQLgS/jZs7btWcIAc7V5yfB+juG7h0AXxKowMJuySsO5vK+F7Vp+HCa07Z+tu9lZtr3sT9fofkc86bdylmtw==
@@ -208,7 +459,7 @@
     "@rollup/plugin-node-resolve" "^16.0.0"
     rollup "^4.9.5"
 
-"@sveltejs/kit@^2.0.0", "@sveltejs/kit@^2.16.0", "@sveltejs/kit@^2.4.0":
+"@sveltejs/kit@^2.16.0":
   version "2.21.1"
   resolved "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.21.1.tgz"
   integrity sha512-vLbtVwtDcK8LhJKnFkFYwM0uCdFmzioQnif0bjEYH1I24Arz22JPr/hLUiXGVYAwhu8INKx5qrdvr4tHgPwX6w==
@@ -233,7 +484,7 @@
   dependencies:
     debug "^4.3.7"
 
-"@sveltejs/vite-plugin-svelte@^3.0.0 || ^4.0.0-next.1 || ^5.0.0", "@sveltejs/vite-plugin-svelte@^5.0.0":
+"@sveltejs/vite-plugin-svelte@^5.0.0":
   version "5.0.3"
   resolved "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-5.0.3.tgz"
   integrity sha512-MCFS6CrQDu1yGwspm4qtli0e63vaPCehf6V7pIMP15AsWgMKrqDGCPFF/0kn4SP0ii4aySu4Pa62+fIRGFMjgw==
@@ -258,6 +509,68 @@
     source-map-js "^1.2.1"
     tailwindcss "4.1.7"
 
+"@tailwindcss/oxide-android-arm64@4.1.7":
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.7.tgz#3b115097b64aff6487715304ebe0bb43d7a2d42a"
+  integrity sha512-IWA410JZ8fF7kACus6BrUwY2Z1t1hm0+ZWNEzykKmMNM09wQooOcN/VXr0p/WJdtHZ90PvJf2AIBS/Ceqx1emg==
+
+"@tailwindcss/oxide-darwin-arm64@4.1.7":
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.7.tgz#6c9d8cd3cd631a2ac0dff58a766c958cff5b0046"
+  integrity sha512-81jUw9To7fimGGkuJ2W5h3/oGonTOZKZ8C2ghm/TTxbwvfSiFSDPd6/A/KE2N7Jp4mv3Ps9OFqg2fEKgZFfsvg==
+
+"@tailwindcss/oxide-darwin-x64@4.1.7":
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.7.tgz#a022b5ef006570ac8bb92128ec7fc9cc2314bdd1"
+  integrity sha512-q77rWjEyGHV4PdDBtrzO0tgBBPlQWKY7wZK0cUok/HaGgbNKecegNxCGikuPJn5wFAlIywC3v+WMBt0PEBtwGw==
+
+"@tailwindcss/oxide-freebsd-x64@4.1.7":
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.7.tgz#efc133e6065c3c6299a981caa9c5f426e1d60e5e"
+  integrity sha512-RfmdbbK6G6ptgF4qqbzoxmH+PKfP4KSVs7SRlTwcbRgBwezJkAO3Qta/7gDy10Q2DcUVkKxFLXUQO6J3CRvBGw==
+
+"@tailwindcss/oxide-linux-arm-gnueabihf@4.1.7":
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.7.tgz#7a4dc1d9636c1b1e62936bd679a8867030dc0ad6"
+  integrity sha512-OZqsGvpwOa13lVd1z6JVwQXadEobmesxQ4AxhrwRiPuE04quvZHWn/LnihMg7/XkN+dTioXp/VMu/p6A5eZP3g==
+
+"@tailwindcss/oxide-linux-arm64-gnu@4.1.7":
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.7.tgz#9a0da009c37d135fe983d1093bfb6d370fe926dc"
+  integrity sha512-voMvBTnJSfKecJxGkoeAyW/2XRToLZ227LxswLAwKY7YslG/Xkw9/tJNH+3IVh5bdYzYE7DfiaPbRkSHFxY1xA==
+
+"@tailwindcss/oxide-linux-arm64-musl@4.1.7":
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.7.tgz#ef2398b48c426148c1b9949fdbdd86d364dca10d"
+  integrity sha512-PjGuNNmJeKHnP58M7XyjJyla8LPo+RmwHQpBI+W/OxqrwojyuCQ+GUtygu7jUqTEexejZHr/z3nBc/gTiXBj4A==
+
+"@tailwindcss/oxide-linux-x64-gnu@4.1.7":
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.7.tgz#4d36aec4c4df87f8c332526bb6874b2c36230901"
+  integrity sha512-HMs+Va+ZR3gC3mLZE00gXxtBo3JoSQxtu9lobbZd+DmfkIxR54NO7Z+UQNPsa0P/ITn1TevtFxXTpsRU7qEvWg==
+
+"@tailwindcss/oxide-linux-x64-musl@4.1.7":
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.7.tgz#6e3045edc70d5156089aba0cd4a9760caa53965c"
+  integrity sha512-MHZ6jyNlutdHH8rd+YTdr3QbXrHXqwIhHw9e7yXEBcQdluGwhpQY2Eku8UZK6ReLaWtQ4gijIv5QoM5eE+qlsA==
+
+"@tailwindcss/oxide-wasm32-wasi@4.1.7":
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.7.tgz#79b41b0c8da6e2f1dc5b722fe43528aa324222d5"
+  integrity sha512-ANaSKt74ZRzE2TvJmUcbFQ8zS201cIPxUDm5qez5rLEwWkie2SkGtA4P+GPTj+u8N6JbPrC8MtY8RmJA35Oo+A==
+  dependencies:
+    "@emnapi/core" "^1.4.3"
+    "@emnapi/runtime" "^1.4.3"
+    "@emnapi/wasi-threads" "^1.0.2"
+    "@napi-rs/wasm-runtime" "^0.2.9"
+    "@tybys/wasm-util" "^0.9.0"
+    tslib "^2.8.0"
+
+"@tailwindcss/oxide-win32-arm64-msvc@4.1.7":
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.7.tgz#6c695b870eb8a3f9a958d0afccc67b1b6ee7e78d"
+  integrity sha512-HUiSiXQ9gLJBAPCMVRk2RT1ZrBjto7WvqsPBwUrNK2BcdSxMnk19h4pjZjI7zgPhDxlAbJSumTC4ljeA9y0tEw==
+
 "@tailwindcss/oxide-win32-x64-msvc@4.1.7":
   version "4.1.7"
   resolved "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.7.tgz"
@@ -293,17 +606,31 @@
     "@tailwindcss/oxide" "4.1.7"
     tailwindcss "4.1.7"
 
+"@tybys/wasm-util@^0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@tybys/wasm-util/-/wasm-util-0.10.0.tgz#2fd3cd754b94b378734ce17058d0507c45c88369"
+  integrity sha512-VyyPYFlOMNylG45GoAe0xDoLwWuowvf92F9kySqzYh8vmYm7D2u4iUJKa1tOUpS70Ku13ASrOkS4ScXFsTaCNQ==
+  dependencies:
+    tslib "^2.4.0"
+
+"@tybys/wasm-util@^0.9.0":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@tybys/wasm-util/-/wasm-util-0.9.0.tgz#3e75eb00604c8d6db470bf18c37b7d984a0e3355"
+  integrity sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==
+  dependencies:
+    tslib "^2.4.0"
+
 "@types/cookie@^0.6.0":
   version "0.6.0"
   resolved "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz"
   integrity sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==
 
-"@types/estree@*", "@types/estree@^1.0.0", "@types/estree@^1.0.5", "@types/estree@^1.0.6", "@types/estree@1.0.7":
+"@types/estree@*", "@types/estree@1.0.7", "@types/estree@^1.0.0", "@types/estree@^1.0.5", "@types/estree@^1.0.6":
   version "1.0.7"
   resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz"
   integrity sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==
 
-"@types/node@*", "@types/node@^18.0.0 || ^20.0.0 || >=22.0.0":
+"@types/node@*":
   version "22.15.21"
   resolved "https://registry.npmjs.org/@types/node/-/node-22.15.21.tgz"
   integrity sha512-EV/37Td6c+MgKAbkcLG6vqZ2zEYHD7bvSrzqqs2RIhbA6w3x+Dqz8MZM3sP6kGTeLrdoOgKZe+Xja7tUB2DNkQ==
@@ -327,7 +654,7 @@
   dependencies:
     "@types/node" "*"
 
-acorn@^8.12.1, acorn@^8.14.1, acorn@^8.9.0:
+acorn@^8.12.1, acorn@^8.14.1:
   version "8.14.1"
   resolved "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz"
   integrity sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==
@@ -485,6 +812,11 @@ frac@~1.1.2:
   resolved "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz"
   integrity sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==
 
+fsevents@~2.3.2, fsevents@~2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
 function-bind@^1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"
@@ -514,13 +846,6 @@ is-module@^1.0.0:
   resolved "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz"
   integrity sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==
 
-is-reference@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz"
-  integrity sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==
-  dependencies:
-    "@types/estree" "^1.0.6"
-
 is-reference@1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz"
@@ -528,7 +853,14 @@ is-reference@1.2.1:
   dependencies:
     "@types/estree" "*"
 
-jiti@^2.4.2, jiti@>=1.21.0:
+is-reference@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz"
+  integrity sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==
+  dependencies:
+    "@types/estree" "^1.0.6"
+
+jiti@^2.4.2:
   version "2.4.2"
   resolved "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz"
   integrity sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==
@@ -538,12 +870,57 @@ kleur@^4.1.5:
   resolved "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz"
   integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==
 
+lightningcss-darwin-arm64@1.30.1:
+  version "1.30.1"
+  resolved "https://registry.yarnpkg.com/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz#3d47ce5e221b9567c703950edf2529ca4a3700ae"
+  integrity sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==
+
+lightningcss-darwin-x64@1.30.1:
+  version "1.30.1"
+  resolved "https://registry.yarnpkg.com/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz#e81105d3fd6330860c15fe860f64d39cff5fbd22"
+  integrity sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==
+
+lightningcss-freebsd-x64@1.30.1:
+  version "1.30.1"
+  resolved "https://registry.yarnpkg.com/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz#a0e732031083ff9d625c5db021d09eb085af8be4"
+  integrity sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==
+
+lightningcss-linux-arm-gnueabihf@1.30.1:
+  version "1.30.1"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz#1f5ecca6095528ddb649f9304ba2560c72474908"
+  integrity sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==
+
+lightningcss-linux-arm64-gnu@1.30.1:
+  version "1.30.1"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz#eee7799726103bffff1e88993df726f6911ec009"
+  integrity sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==
+
+lightningcss-linux-arm64-musl@1.30.1:
+  version "1.30.1"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz#f2e4b53f42892feeef8f620cbb889f7c064a7dfe"
+  integrity sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==
+
+lightningcss-linux-x64-gnu@1.30.1:
+  version "1.30.1"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz#2fc7096224bc000ebb97eea94aea248c5b0eb157"
+  integrity sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==
+
+lightningcss-linux-x64-musl@1.30.1:
+  version "1.30.1"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz#66dca2b159fd819ea832c44895d07e5b31d75f26"
+  integrity sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==
+
+lightningcss-win32-arm64-msvc@1.30.1:
+  version "1.30.1"
+  resolved "https://registry.yarnpkg.com/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz#7d8110a19d7c2d22bfdf2f2bb8be68e7d1b69039"
+  integrity sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==
+
 lightningcss-win32-x64-msvc@1.30.1:
   version "1.30.1"
   resolved "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz"
   integrity sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==
 
-lightningcss@^1.21.0, lightningcss@1.30.1:
+lightningcss@1.30.1:
   version "1.30.1"
   resolved "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz"
   integrity sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==
@@ -620,7 +997,7 @@ picocolors@^1.0.0, picocolors@^1.1.1:
   resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz"
   integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
 
-"picomatch@^3 || ^4", picomatch@^4.0.2:
+picomatch@^4.0.2:
   version "4.0.2"
   resolved "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz"
   integrity sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==
@@ -648,7 +1025,7 @@ resolve@^1.22.1:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
-rollup@^1.20.0||^2.0.0||^3.0.0||^4.0.0, rollup@^2.68.0||^3.0.0||^4.0.0, rollup@^2.78.0||^3.0.0||^4.0.0, rollup@^4.34.9, rollup@^4.9.5:
+rollup@^4.34.9, rollup@^4.9.5:
   version "4.41.1"
   resolved "https://registry.npmjs.org/rollup/-/rollup-4.41.1.tgz"
   integrity sha512-cPmwD3FnFv8rKMBc1MxWCwVQFxwf1JEmSX3iQXrRVVG15zerAIXRjMFVWnd5Q5QvgKF7Aj+5ykXFhUl+QGnyOw==
@@ -746,7 +1123,7 @@ svelte-table@^0.6.4:
   resolved "https://registry.npmjs.org/svelte-table/-/svelte-table-0.6.4.tgz"
   integrity sha512-6Rla/xdGIH84R24OFsEm6Fu6/Nugh7k/nYGTO7CvJiEiQwOHywnZgLIc1dRQyPdDA81JEgWarcYiFy6s7KgUxQ==
 
-"svelte@^4.0.0 || ^5.0.0-next.0", svelte@^5.0.0:
+svelte@^5.0.0:
   version "5.33.1"
   resolved "https://registry.npmjs.org/svelte/-/svelte-5.33.1.tgz"
   integrity sha512-7znzaaQALL62NBzkdKV04tmYIVla8qjrW+k6GdgFZcKcj8XOb8iEjmfRPo40iaWZlKv3+uiuc0h4iaGgwoORtA==
@@ -766,7 +1143,7 @@ svelte-table@^0.6.4:
     magic-string "^0.30.11"
     zimmerframe "^1.1.2"
 
-tailwindcss@^4.1.7, tailwindcss@4.1.7:
+tailwindcss@4.1.7, tailwindcss@^4.1.7:
   version "4.1.7"
   resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.7.tgz"
   integrity sha512-kr1o/ErIdNhTz8uzAYL7TpaUuzKIE6QPQ4qmSdxnoX/lo+5wmUHQA6h3L5yIqEImSRnAAURDirLu/BgiXGPAhg==
@@ -806,7 +1183,12 @@ tr46@~0.0.3:
   resolved "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz"
   integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
 
-typescript@^5.0.0, typescript@>=5.0.0:
+tslib@^2.4.0, tslib@^2.8.0:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
+
+typescript@^5.0.0:
   version "5.8.3"
   resolved "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz"
   integrity sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==
@@ -821,7 +1203,7 @@ uuid@^11.1.0:
   resolved "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz"
   integrity sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==
 
-"vite@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0", "vite@^5.0.3 || ^6.0.0", "vite@^5.2.0 || ^6", vite@^6.0.0, vite@^6.2.6:
+vite@^6.2.6:
   version "6.3.5"
   resolved "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz"
   integrity sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==