diff --git a/src/app.css b/src/app.css
index 9bdbe7e..3ff1bf1 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,4 +1,5 @@
 @import "tailwindcss";
 table td {
     vertical-align: top;
+    text-align: left;
 }
\ No newline at end of file
diff --git a/src/routes/backoffice/purchaseorder/+page.svelte b/src/routes/backoffice/purchaseorder/+page.svelte
index 646dd31..5e265b6 100644
--- a/src/routes/backoffice/purchaseorder/+page.svelte
+++ b/src/routes/backoffice/purchaseorder/+page.svelte
@@ -1,18 +1,9 @@
 <script lang="ts">
     import { onMount } from "svelte";
-    import Select from "svelte-select";
     import { supabase } from "$lib/supabaseClient";
-    import { timestampToDateTime } from "$lib/utils/conversion";
     import { getSessionAuthId } from "$lib/utils/authUtil";
 
 
-    function ordinal(num: number) {
-        if (num === 1) return "1st";
-        if (num === 2) return "2nd";
-        if (num === 3) return "3rd";
-        return `${num}th`;
-    }
-    
     type PurchaseOrderInsert = {
         issue_id: string;
         prepared_date: string;
@@ -24,7 +15,139 @@
         updated_by: string;
         updated_at: string;
     };
+    type PurchaseOrders = {
+        id: string;
+        purchase_order_number: string;
+        prepared_date: string;
+        po_type: string;
+        po_quantity: number;
+        po_status: string;
+        approved_vendor: string;
+        proses_to_approval: boolean;
+        acknowledged: boolean;
+        approved_vendor_id: string;
+        acknowledge_by: string;
+        approved_price: number;
+        approved_quantity: number;
+        total_approved_order_amount: number;
+        approval: string;
+        completed_status: string;
+        received: boolean;
+        received_by: string;
+        input_by: string;
+        issue_id: string;
+        approved_by: string;
+        created_at: string;
+    };
+    type PurchaseOrderDisplay = {
+        id: string;
+        name: string;
+        purchase_order_number: string;
+        villa_name: string;
+        priority: string;
+        prepared_date: string;
+        po_type: string;
+        po_quantity: number;
+        po_price: number;
+        po_total_price: number;
+        po_status: string;
+        approved_vendor: string;
+        acknowledged: boolean;
+        acknowledge_by: string;
+        approved_by: string;
+        prepared: boolean | null; 
+        approved_price: number;
+        approved_quantity: number;
+        total_approved_order_amount: number;
+        proses_to_approval: boolean;
+        approval: string;
+        completed_status: string;
+        received: boolean;
+        received_by: string;
+        created_at: string;
+        updated_at?: string;
+        updated_by?: string;
+        updated_name?: string;
+        input_by?: string;
+        input_name?: string;
+    };
+    type columns = {
+        key: string;
+        title: string;
+    };
 
+    const columns: columns[] = [
+        { key: "issue_name", title: "Issue Name" },
+        { key: "requested_date", title: "Requested Date" },
+        { key: "purchase_order_number", title: "PO Number" },
+        { key: "po_status", title: "PO Status" },
+        { key: "villa_data", title: "Villa Name" },
+        { key: "po_item", title: "PO Product" },
+        { key: "po_remark", title: "PO Remark" },
+        { key: "po_due", title: "PO Due" },
+        { key: "prepared", title: "Prepare PO" },
+        { key: "approved", title: "Approval" },
+        { key: "acknowledged", title: "Acknowledge" },
+        { key: "completed", title: "Complete" },
+        { key: "received", title: "Receive" },
+        { key: "updated_at", title: "Updated At" },
+        { key: "payment", title: "Payment" }, 
+        { key: "actions", title: "Actions" }, // For edit/delete buttons
+    ];
+    const excludedKeys = [
+        "id",
+        "priority",
+        "villa_name",
+        "purchase_order_number",
+        "issue_id",
+        "number_project",
+        "input_by",
+        "created_at",
+        "actions",
+        "acknowledged",
+        "acknowledge_by",
+        "approval",
+        "completed_status",
+        "received",
+        "received_by",
+        "proses_to_approval",
+        "approved_by",
+        "name",
+        "po_status",
+        "approved_quantity",
+        "total_approved_order_amount",
+        "approved_vendor",
+        "approved_price",
+        "updated_at",
+        "updated_by",
+        "updated_name",
+        "inputed_name",
+        "approved_name",
+        "acknowledged_name",
+        "received_name",
+    ];
+    const formColumns = columns.filter(
+        (col) => !excludedKeys.includes(col.key),
+    );
+    const statusOptions = [
+        { label: "Requested", value: "REQUESTED", color: "#e5e7eb" },
+        { label: "Prepared", value: "PREPARED", color: "#93c5fd" },
+        { label: "Approved", value: "APPROVED", color: "#34d399" },
+        { label: "Acknowledged", value: "ACKNOWLEDGE", color: "#60a5fa" },
+        {
+            label: "Received - Incomplete",
+            value: "RECEIVED INCOMPLETE",
+            color: "#fb923c",
+        },
+        {
+            label: "Received - Completed",
+            value: "RECEIVED COMPLETED",
+            color: "#10b981",
+        },
+        { label: "Canceled", value: "CANCELED", color: "#f87171" },
+    ];
+
+    //reactive variables
     let purchaseOrderInsert: PurchaseOrderInsert = {
         issue_id: "",
         prepared_date: "",
@@ -37,8 +160,7 @@
         updated_at: new Date().toISOString(),
     };
     let showEditModal = false;
-
-        let editForm = {
+    let editForm = {
         po_number: "",
         issue_name: "",
         villa_name: "",
@@ -51,33 +173,325 @@
         po_remark: ""
     };
     let showAddPOModal = false;
-
     let addPOForm = {
-    po_type: "",
-    villa_id: "",
-    po_item: "",
-    po_quantity: 1,
-    po_status: "requested",
-    po_remark: "",
-    requested_by: "",
-    requested_date: new Date().toISOString().split("T")[0]
+        po_type: "",
+        villa_id: "",
+        po_item: "",
+        po_quantity: 1,
+        po_status: "requested",
+        po_remark: "",
+        requested_by: "",
+        requested_date: new Date().toISOString().split("T")[0]
+    };    
+    let showApprovalModal = false;
+    let approvalForm = {
+        po_number: "",
+        approval: "",
+        approved_by: "",
+        approved_date: "",
+        reject_comment: ""
     };
-
     let villaOptions = [];
     let poItemOptions = [];
     let employeeOptions = [];
+    let allRows: PurchaseOrderDisplay[] = [];
+    let currentPage = 1;
+    let rowsPerPage = 10;
+    let currentUserId = "";
+    let currentUserFullName = "";
+    let showPaymentModal = false;
+    let paymentForm = {
+        payment_method: "",
+        total_approved_order_amount: 0,
+        "1st_pay_amt": 0,
+        "2nd_pay_amt": 0,
+        "3rd_pay_amt": 0,
+        "4th_pay_amt": 0,
+        "5th_pay_amt": 0,
+        "6th_pay_amt": 0,
+        "1st_pay_date": "",
+        "2nd_pay_date": "",
+        "3rd_pay_date": "",
+        "4th_pay_date": "",
+        "5th_pay_date": "",
+        "6th_pay_date": "",
+        due_remaining: 0
+    };
+    let showAcknowledgedModal = false;
+    let acknowledgedForm = {
+        po_number: "",
+        acknowledged: "",
+        acknowledged_by: "",
+        acknowledged_date: ""
+    };
+    let showPreparedModal = false;
+    let selectedPO = null;
+    let preparedByOptions: any[] = [];
+    let vendorOptions: any[] = [];
+    let preparedForm = {
+        prepared_by: "",
+        prepared_date: "",
+        po_item: "",
+        po_quantity: 1,
+        q1_vendor: "",
+        q2_vendor: "",
+        q3_vendor: "",
+        q1_vendor_price: 0,
+        q2_vendor_price: 0,
+        q3_vendor_price: 0,
+        po_remark: "",
+        approved_quantity: 0,
+        approved_vendor: "",
+        approved_price: 0,
+        total_approved_order_amount: 0
+    };    
+    let showReceivedModal = false;
+    let receivedForm = {
+        po_number: "",
+        received: "",
+        received_by: "",
+        received_date: ""
+    };
+    let showCompletedModal = false;
+    let completedForm = {
+        po_number: "",
+        completed: "",
+        completed_by: "",
+        completed_date: ""
+    };
+    let showModal = false;
+    let isEditing = false;
+    let currentEditingId: string | null = null;
+    let newPurchaseOrders: Record<string, any> = {};
+    let vendors: { id: string; name: string }[] = [];
+    let issues: { id: string; name: string }[] = [];
+    // 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
 
+    // Function to format numbers as ordinal (1st, 2nd, 3rd, etc.)
+    function ordinal(num: number) {
+        if (num === 1) return "1st";
+        if (num === 2) return "2nd";
+        if (num === 3) return "3rd";
+        return `${num}th`;
+    }
+    // Open edit modal for purchase order
+    function openEditModal(row) {
+        selectedPO = row;
+
+        editForm = {
+            po_number: row.purchase_order_number || "",
+            issue_name: row.issue_name || "",
+            villa_name: row.villa_data || "",
+            po_status: row.po_status || "",
+            prepared: row.prepared,
+            approved: row.approved,
+            acknowledged: row.acknowledged,
+            completed: row.completed,
+            received: row.received,
+            po_remark: row.po_remark || ""
+        };
+
+        showEditModal = true;
+    }
+    // pagination functions
+    function goToPage(page: number) {
+        if (page >= 1 && page <= totalPages) currentPage = page;
+    }
+    // Open approval modal for purchase order
+    function openApprovalModal(row) {
+        selectedPO = row;
+
+        approvalForm = {
+            po_number: row.purchase_order_number || "",
+            approval: row.approval ? "approve" : "reject",
+            approved_by: currentUserId,
+            approved_date: new Date().toISOString().split("T")[0],
+            reject_comment: row.reject_comment || ""
+        };
+
+        showApprovalModal = true;
+    }
+    // acknowledge purchase order
+    function openAcknowledgedModal(row) {
+        selectedPO = row;
+
+        acknowledgedForm = {
+            po_number: row.purchase_order_number || "",
+            acknowledged: row.acknowledged ? "acknowledged" : "reject",
+            acknowledged_by: currentUserId,
+            acknowledged_date: new Date().toISOString().split("T")[0]
+        };
+
+        showAcknowledgedModal = true;
+    }
+    // open receive modal
+    function openReceivedModal(row) {
+        selectedPO = row;
+
+        receivedForm = {
+            po_number: row.purchase_order_number || "",
+            received: row.received ? "received" : "reject",
+            received_by: currentUserId,
+            received_date: new Date().toISOString().split("T")[0]
+        };
+
+        showReceivedModal = true;
+    }
+    // open completed modal
+    function openCompletedModal(row) {
+        selectedPO = row;
+
+        completedForm = {
+            po_number: row.purchase_order_number || "",
+            completed: row.completed ? "completed" : "reject",
+            completed_by: currentUserId,
+            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;
+    }
+    function getStatusOption(value: string) {
+        return statusOptions.find((option) => option.value === value) ?? null;
+    }
+    // open payment modal for purchase order
+    function openPaymentModal(row) {
+        selectedPO = row;
+
+        paymentForm = {
+            payment_method: row.payment_method || "",
+            total_approved_order_amount: row.total_approved_order_amount || 0,
+            "1st_pay_amt": row["1st_pay_amt"] || 0,
+            "2nd_pay_amt": row["2nd_pay_amt"] || 0,
+            "3rd_pay_amt": row["3rd_pay_amt"] || 0,
+            "4th_pay_amt": row["4th_pay_amt"] || 0,
+            "5th_pay_amt": row["5th_pay_amt"] || 0,
+            "6th_pay_amt": row["6th_pay_amt"] || 0,
+            "1st_pay_date": row["1st_pay_date"] || "",
+            "2nd_pay_date": row["2nd_pay_date"] || "",
+            "3rd_pay_date": row["3rd_pay_date"] || "",
+            "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)
+        };
+
+        showPaymentModal = true;
+    }
+    //validate input fields purchase order
+    function validateInput() {
+        const requiredFields = [
+            "prepared_date",
+            "po_type",
+            "po_quantity",
+            "po_price",
+        ];
+        for (const field of requiredFields) {
+            if (!newPurchaseOrders[field]) {
+                alert(`Please fill in the ${field} field.`);
+                return false;
+            }
+        }
+        return true;
+    }
+    // Calculate remaining due amount
+    function calculateDueRemaining(source) {
+        const total = source.total_approved_order_amount || 0;
+        const sum =
+            (source["1st_pay_amt"] || 0) +
+            (source["2nd_pay_amt"] || 0) +
+            (source["3rd_pay_amt"] || 0) +
+            (source["4th_pay_amt"] || 0) +
+            (source["5th_pay_amt"] || 0) +
+            (source["6th_pay_amt"] || 0);
+        return total - sum;
+    }
+    // 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"];
+    }
+    // Save payment data for purchase order
+    async function savePayment() {
+        const { error } = await supabase
+            .from("vb_purchase_orders")
+            .update({
+                payment_method: paymentForm.payment_method,
+                "1st_pay_amt": paymentForm["1st_pay_amt"],
+                "2nd_pay_amt": paymentForm["2nd_pay_amt"],
+                "3rd_pay_amt": paymentForm["3rd_pay_amt"],
+                "4th_pay_amt": paymentForm["4th_pay_amt"],
+                "5th_pay_amt": paymentForm["5th_pay_amt"],
+                "6th_pay_amt": paymentForm["6th_pay_amt"],
+                "1st_pay_date": paymentForm["1st_pay_date"] || null,
+                "2nd_pay_date": paymentForm["2nd_pay_date"] || null,
+                "3rd_pay_date": paymentForm["3rd_pay_date"] || null,
+                "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
+            })
+            .eq("id", selectedPO.id);
+
+        if (error) {
+            console.error("Error saving payment data:", error);
+            alert("Failed to save.");
+            return;
+        }
+
+        showPaymentModal = false;
+        await fetchPurchaseOrder();
+    }
+    // Save approval for purchase order
+    async function saveApproval() {
+        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"
+            })
+            .eq("id", selectedPO.id);
+
+        if (error) {
+            console.error("Error saving approval:", error);
+            alert("Failed to save.");
+            return;
+        }
+
+        showApprovalModal = false;
+        await fetchPurchaseOrder();
+    }
+    // populate dropdowns for adding purchase orders
     async function fetchAddPODropdowns() {
         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 || [];
     }
+    // Fetch purchase orders add
     async function openAddPOModal() {
         await fetchAddPODropdowns();
         addPOForm = {
@@ -92,7 +506,7 @@
         };
         showAddPOModal = true;
     }
-
+    // Save new purchase order
     async function saveAddPO() {
         // Basic required field check
         if (
@@ -135,134 +549,7 @@
         showAddPOModal = false;
         await fetchPurchaseOrder();
     }
-
-    function openEditModal(row) {
-        selectedPO = row;
-
-        editForm = {
-            po_number: row.purchase_order_number || "",
-            issue_name: row.issue_name || "",
-            villa_name: row.villa_data || "",
-            po_status: row.po_status || "",
-            prepared: row.prepared,
-            approved: row.approved,
-            acknowledged: row.acknowledged,
-            completed: row.completed,
-            received: row.received,
-            po_remark: row.po_remark || ""
-        };
-
-        showEditModal = true;
-    }
-
-    type PurchaseOrders = {
-        id: string;
-        purchase_order_number: string;
-        prepared_date: string;
-        po_type: string;
-        po_quantity: number;
-        po_status: string;
-        approved_vendor: string;
-        proses_to_approval: boolean;
-        acknowledged: boolean;
-        approved_vendor_id: string;
-        acknowledge_by: string;
-        approved_price: number;
-        approved_quantity: number;
-        total_approved_order_amount: number;
-        approval: string;
-        completed_status: string;
-        received: boolean;
-        received_by: string;
-        input_by: string;
-        issue_id: string;
-        approved_by: string;
-        created_at: string;
-    };
-
-    type PurchaseOrderDisplay = {
-        id: string;
-        name: string;
-        purchase_order_number: string;
-        villa_name: string;
-        priority: string;
-        prepared_date: string;
-        po_type: string;
-        po_quantity: number;
-        po_price: number;
-        po_total_price: number;
-        po_status: string;
-        approved_vendor: string;
-        acknowledged: boolean;
-        acknowledge_by: string;
-        approved_by: string;
-        prepared: boolean | null; 
-        approved_price: number;
-        approved_quantity: number;
-        total_approved_order_amount: number;
-        proses_to_approval: boolean;
-        approval: string;
-        completed_status: string;
-        received: boolean;
-        received_by: string;
-        created_at: string;
-        updated_at?: string;
-        updated_by?: string;
-        updated_name?: string;
-        input_by?: string;
-        input_name?: string;
-    };
-
-    let allRows: PurchaseOrderDisplay[] = [];
-
-    type columns = {
-        key: string;
-        title: string;
-    };
-
-    const columns: columns[] = [
-        { key: "issue_name", title: "Issue Name" },
-        { key: "requested_date", title: "Requested Date" },
-        { key: "purchase_order_number", title: "PO Number" },
-        { key: "po_status", title: "PO Status" },
-        { key: "villa_data", title: "Villa Name" },
-        { key: "po_item", title: "PO Product" },
-        { key: "po_remark", title: "PO Remark" },
-        { key: "po_due", title: "PO Due" },
-        { key: "prepared", title: "Prepare PO" },
-        { key: "approved", title: "Approval" },
-        { key: "acknowledged", title: "Acknowledge" },
-        { key: "completed", title: "Complete" },
-        { key: "received", title: "Receive" },
-        { key: "updated_at", title: "Updated At" },
-        { key: "payment", title: "Payment" }, 
-        { key: "actions", title: "Actions" }, // For edit/delete buttons
-    ];
-
-    let currentPage = 1;
-    let rowsPerPage = 10;
-    $: totalPages = Math.ceil(allRows.length / rowsPerPage);
-    $: paginatedRows = allRows.slice(
-        (currentPage - 1) * rowsPerPage,
-        currentPage * rowsPerPage,
-    );
-
-    function goToPage(page: number) {
-        if (page >= 1 && page <= totalPages) currentPage = page;
-    }
-
-    let showApprovalModal = false;
-    let approvalForm = {
-        po_number: "",
-        approval: "",
-        approved_by: "",
-        approved_date: "",
-        reject_comment: ""
-    };
-
-    let currentUserId = "";
-    let currentUserFullName = "";
-
+    // Fetch current user details
     async function fetchCurrentUser() {
         const {
             data: { user }
@@ -282,6 +569,7 @@
             }
         }
     }
+    // Save edited purchase order
     async function saveEdit() {
         const { error } = await supabase
             .from("vb_purchase_orders")
@@ -306,125 +594,7 @@
         showEditModal = false;
         await fetchPurchaseOrder();
     }
-    function openApprovalModal(row) {
-        selectedPO = row;
-
-        approvalForm = {
-            po_number: row.purchase_order_number || "",
-            approval: row.approval ? "approve" : "reject",
-            approved_by: currentUserId,
-            approved_date: new Date().toISOString().split("T")[0],
-            reject_comment: row.reject_comment || ""
-        };
-
-        showApprovalModal = true;
-    }
-    let showPaymentModal = false;
-    let paymentForm = {
-        payment_method: "",
-        total_approved_order_amount: 0,
-        "1st_pay_amt": 0,
-        "2nd_pay_amt": 0,
-        "3rd_pay_amt": 0,
-        "4th_pay_amt": 0,
-        "5th_pay_amt": 0,
-        "6th_pay_amt": 0,
-        "1st_pay_date": "",
-        "2nd_pay_date": "",
-        "3rd_pay_date": "",
-        "4th_pay_date": "",
-        "5th_pay_date": "",
-        "6th_pay_date": "",
-        due_remaining: 0
-    };
-
-    let showAcknowledgedModal = false;
-
-    let acknowledgedForm = {
-        po_number: "",
-        acknowledged: "",
-        acknowledged_by: "",
-        acknowledged_date: ""
-    };
-
-    function openAcknowledgedModal(row) {
-        selectedPO = row;
-
-        acknowledgedForm = {
-            po_number: row.purchase_order_number || "",
-            acknowledged: row.acknowledged ? "acknowledged" : "reject",
-            acknowledged_by: currentUserId,
-            acknowledged_date: new Date().toISOString().split("T")[0]
-        };
-
-        showAcknowledgedModal = true;
-    }
-
-    let showPreparedModal = false;
-    let selectedPO = null;
-
-    let preparedByOptions: any[] = [];
-    let vendorOptions: any[] = [];
-
-    let preparedForm = {
-    prepared_by: "",
-    prepared_date: "",
-    po_item: "",
-    po_quantity: 1,
-    q1_vendor: "",
-    q2_vendor: "",
-    q3_vendor: "",
-    q1_vendor_price: 0,
-    q2_vendor_price: 0,
-    q3_vendor_price: 0,
-    po_remark: "",
-    approved_quantity: 0,
-    approved_vendor: "",
-    approved_price: 0,
-    total_approved_order_amount: 0
-    };
-    
-    let showReceivedModal = false;
-    let receivedForm = {
-    po_number: "",
-    received: "",
-    received_by: "",
-    received_date: ""
-    };
-    function openReceivedModal(row) {
-        selectedPO = row;
-
-        receivedForm = {
-            po_number: row.purchase_order_number || "",
-            received: row.received ? "received" : "reject",
-            received_by: currentUserId,
-            received_date: new Date().toISOString().split("T")[0]
-        };
-
-        showReceivedModal = true;
-    }
-
-    let showCompletedModal = false;
-
-    let completedForm = {
-        po_number: "",
-        completed: "",
-        completed_by: "",
-        completed_date: ""
-    };
-
-    function openCompletedModal(row) {
-        selectedPO = row;
-
-        completedForm = {
-            po_number: row.purchase_order_number || "",
-            completed: row.completed ? "completed" : "reject",
-            completed_by: currentUserId,
-            completed_date: new Date().toISOString().split("T")[0]
-        };
-
-        showCompletedModal = true;
-    }
+    // save completed purchase order
     async function saveCompleted() {
         const { error } = await supabase
             .from("vb_purchase_orders")
@@ -460,99 +630,98 @@
     showCompletedModal = false;
     await fetchPurchaseOrder();
     }
+    // open prepared modal for purchase order
     async function openPreparedModal(row) {
-    selectedPO = row;
+        selectedPO = row;
+        // Prefill existing values
+        preparedForm = {
+            prepared_by: row.prepared_by || "",
+            prepared_date: row.prepared_date || "",
+            po_item: row.po_item || "",
+            po_quantity: row.po_quantity || 1,
+            q1_vendor: row.q1_vendor || "",
+            q2_vendor: row.q2_vendor || "",
+            q3_vendor: row.q3_vendor || "",
+            q1_vendor_price: row.q1_vendor_price || 0,
+            q2_vendor_price: row.q2_vendor_price || 0,
+            q3_vendor_price: row.q3_vendor_price || 0,
+            po_remark: row.po_remark || "",
+            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
+        };
 
-    // Prefill existing values
-    preparedForm = {
-        prepared_by: row.prepared_by || "",
-        prepared_date: row.prepared_date || "",
-        po_item: row.po_item || "",
-        po_quantity: row.po_quantity || 1,
-        q1_vendor: row.q1_vendor || "",
-        q2_vendor: row.q2_vendor || "",
-        q3_vendor: row.q3_vendor || "",
-        q1_vendor_price: row.q1_vendor_price || 0,
-        q2_vendor_price: row.q2_vendor_price || 0,
-        q3_vendor_price: row.q3_vendor_price || 0,
-        po_remark: row.po_remark || "",
-        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
-    };
+        // Load dropdowns
+        await fetchPreparedDropdowns();
 
-    // Load dropdowns
-    await fetchPreparedDropdowns();
-
-    showPreparedModal = true;
+        showPreparedModal = true;
     }
-
+    // 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 || [];
-    vendorOptions = vendors || [];
+        preparedByOptions = employees || [];
+        poItemOptions = items || [];
+        vendorOptions = vendors || [];
     }
+    // Save fetch purchase order
     async function fetchPurchaseOrder(
-    filter: string | null = null,
-    search: string | null = null,
-    sort: string | null = null,
-    order: "asc" | "desc" = "desc",
-    offset: number = 0,
-    limit: number = 1000,
+        filter: string | null = null,
+        search: string | null = null,
+        sort: string | null = null,
+        order: "asc" | "desc" = "desc",
+        offset: number = 0,
+        limit: number = 1000,
     ) {
-    let query = supabase
-        .from("vb_purchaseorder_data")
-        .select("*")
-        .order(sort || "created_at", { ascending: order === "asc" })
-        .range(offset, offset + limit - 1);
+        let query = supabase
+            .from("vb_purchaseorder_data")
+            .select("*")
+            .order(sort || "created_at", { ascending: order === "asc" })
+            .range(offset, offset + limit - 1);
 
-    if (filter) {
-        query = query.eq("po_type", filter);
+        if (filter) {
+            query = query.eq("po_type", filter);
+        }
+
+        if (search) {
+            query = query.ilike("purchase_order_number", `%${search}%`);
+        }
+
+        const { data, error } = await query;
+
+        if (error) {
+            console.error("Error fetching purchase orders:", error);
+            return;
+        }
+
+        if (!data || data.length === 0) {
+            console.warn("No purchase orders found.");
+            allRows = [];
+            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,
+            } as PurchaseOrderDisplay;
+        });
+
+        console.log("✅ Fetched rows:", data);
+        console.log("✅ Final mapped rows:", allRows);
     }
-
-    if (search) {
-        query = query.ilike("purchase_order_number", `%${search}%`);
-    }
-
-    const { data, error } = await query;
-
-    if (error) {
-        console.error("Error fetching purchase orders:", error);
-        return;
-    }
-
-    if (!data || data.length === 0) {
-        console.warn("No purchase orders found.");
-        allRows = [];
-        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,
-        } as PurchaseOrderDisplay;
-    });
-
-    console.log("✅ Fetched rows:", data);
-    console.log("✅ Final mapped rows:", allRows);
-    }
-
-
     //fetch all issues
     async function fetchIssues() {
         const { data, error } = await supabase
@@ -569,7 +738,7 @@
             name: issue.name,
         }));
     }
-
+    // Fetch vendors for dropdown
     async function fetchVendors() {
         const { data, error } = await supabase
             .from("vb_vendor")
@@ -585,58 +754,7 @@
             name: vendor.name,
         }));
     }
-
-    onMount(() => {
-        fetchPurchaseOrder();
-        fetchVendors();
-        fetchCurrentUser();
-    });
-
-    $: currentPage = 1; // Reset to first page when allRows changes
-
-    let showModal = false;
-    let isEditing = false;
-    let currentEditingId: string | null = null;
-    let newPurchaseOrders: Record<string, any> = {};
-    let vendors: { id: string; name: string }[] = [];
-    let issues: { id: string; name: string }[] = [];
-    const excludedKeys = [
-        "id",
-        "priority",
-        "villa_name",
-        "purchase_order_number",
-        "issue_id",
-        "number_project",
-        "input_by",
-        "created_at",
-        "actions",
-        "acknowledged",
-        "acknowledge_by",
-        "approval",
-        "completed_status",
-        "received",
-        "received_by",
-        "proses_to_approval",
-        "approved_by",
-        "name",
-        "po_status",
-        "approved_quantity",
-        "total_approved_order_amount",
-        "approved_vendor",
-        "approved_price",
-        "updated_at",
-        "updated_by",
-        "updated_name",
-        "inputed_name",
-        "approved_name",
-        "acknowledged_name",
-        "received_name",
-    ];
-    const formColumns = columns.filter(
-        (col) => !excludedKeys.includes(col.key),
-    );
-
-
+    // Open modal for adding or editing purchase order
     async function openModal(purchase: PurchaseOrderDisplay | null = null) {
         await fetchIssues();
         if (purchase) {
@@ -650,12 +768,7 @@
         }
         showModal = true;
     }
-
-    function updateTotalAmount() {
-        preparedForm.total_approved_order_amount = 
-        preparedForm.approved_quantity * preparedForm.approved_price;
-    }
-
+    // Save prepared purchase order
     async function savePrepared() {
     const { error } = await supabase
         .from("vb_purchase_orders")
@@ -710,6 +823,7 @@
     showPreparedModal = false;
     await fetchPurchaseOrder();
     }
+    // Save project function
     async function saveProject() {
         // session check
         const session = await supabase.auth.getSession();
@@ -778,56 +892,7 @@
 
         await fetchPurchaseOrder();
     }
-
-    const statusOptions = [
-        { label: "Requested", value: "REQUESTED", color: "#e5e7eb" },
-        { label: "Prepared", value: "PREPARED", color: "#93c5fd" },
-        { label: "Approved", value: "APPROVED", color: "#34d399" },
-        { label: "Acknowledged", value: "ACKNOWLEDGE", color: "#60a5fa" },
-        {
-            label: "Received - Incomplete",
-            value: "RECEIVED INCOMPLETE",
-            color: "#fb923c",
-        },
-        {
-            label: "Received - Completed",
-            value: "RECEIVED COMPLETED",
-            color: "#10b981",
-        },
-        { label: "Canceled", value: "CANCELED", color: "#f87171" },
-    ];
-
-    function getStatusOption(value: string) {
-        return statusOptions.find((option) => option.value === value) ?? null;
-    }
-
-    //validate input fields purchase order
-    function validateInput() {
-        const requiredFields = [
-            "prepared_date",
-            "po_type",
-            "po_quantity",
-            "po_price",
-        ];
-        for (const field of requiredFields) {
-            if (!newPurchaseOrders[field]) {
-                alert(`Please fill in the ${field} field.`);
-                return false;
-            }
-        }
-        return true;
-    }
-
-    function validateInputApproval() {
-        const requiredFields = ["approved_price"];
-        for (const field of requiredFields) {
-            if (!newPurchaseOrders[field]) {
-                alert(`Please fill in the ${field} field.`);
-                return false;
-            }
-        }
-        return true;
-    }
+    // Save received purchase order
     async function saveReceived() {
         const { error } = await supabase
             .from("vb_purchase_orders")
@@ -863,112 +928,7 @@
         showReceivedModal = false;
         await fetchPurchaseOrder();
     }
-
-    function validateInputProsesToAprroval() {
-        const requiredFields = ["po_type", "po_quantity", "po_price"];
-        for (const field of requiredFields) {
-            if (!newPurchaseOrders[field]) {
-                alert(`Please fill in the ${field} field.`);
-                return false;
-            }
-        }
-        return true;
-    }
-
-    async function updateProsesToApproval(id: string, status: boolean) {
-        const sessionId = await getSessionAuthId();
-        if (!sessionId) {
-            alert("You must be logged in to perform this action.");
-            return;
-        }
-
-        if (!validateInputProsesToAprroval()) {
-            return;
-        }
-
-        const { data, error } = await supabase
-            .from("vb_purchase_orders")
-            .update({
-                proses_to_approval: status,
-                po_status: "REQUESTED",
-                updated_by: sessionId,
-                updated_at: new Date().toISOString(),
-            })
-            .eq("id", id);
-
-        if (error) {
-            console.error(
-                "Error updating purchase order proses to approval:",
-                error,
-            );
-            return;
-        }
-
-        await fetchPurchaseOrder();
-    }
-
-    async function updatePurchaseOrderStatus(
-        e: Event,
-        id: string,
-        row: PurchaseOrderDisplay,
-    ) {
-        const sessionId = await getSessionAuthId();
-        if (!sessionId) {
-            alert("You must be logged in to perform this action.");
-            return;
-        }
-        const selectedOption = (e.target as HTMLSelectElement)?.value ?? "";
-        const option = getStatusOption(selectedOption);
-
-        newPurchaseOrders = {
-            ...row,
-            po_status: option?.value || row.po_status,
-        };
-
-        if (option?.value === "APPROVED") {
-            if (!validateInput()) {
-                e.preventDefault();
-                return;
-            }
-        }
-
-        const { data, error } = await supabase
-            .from("vb_purchase_orders")
-            .update({ po_status: newPurchaseOrders.po_status })
-            .eq("id", id);
-
-        if (error) {
-            console.error("Error updating purchase order status:", error);
-            return;
-        }
-
-        await fetchPurchaseOrder();
-    }
-
-    async function acknowledgedOk(id: string, status: boolean) {
-        const sessionId = await getSessionAuthId();
-        if (!sessionId) {
-            alert("You must be logged in to perform this action.");
-            return;
-        }
-
-        const { data, error } = await supabase
-            .from("vb_purchase_orders")
-            .update({
-                acknowledged: status,
-                updated_by: sessionId,
-                updated_at: new Date().toISOString(),
-            })
-            .eq("id", id);
-
-        if (error) {
-            console.error("Error acknowledging purchase order:", error);
-            return;
-        }
-
-        await fetchPurchaseOrder();
-    }
-
+    // Save acknowledged purchase order
     async function saveAcknowledged() {
         const { error } = await supabase
             .from("vb_purchase_orders")
@@ -1006,170 +966,12 @@
         showAcknowledgedModal = false;
         await fetchPurchaseOrder();
     }
-
-    async function receivedOk(id: string, status: boolean) {
-        const sessionId = await getSessionAuthId();
-        if (!sessionId) {
-            alert("You must be logged in to perform this action.");
-            return;
-        }
-
-        const { data, error } = await supabase
-            .from("vb_purchase_orders")
-            .update({
-                receivedOk: status,
-                updated_by: sessionId,
-                updated_at: new Date().toISOString(),
-            })
-            .eq("id", id);
-
-        if (error) {
-            console.error("Error acknowledging purchase order:", error);
-            return;
-        }
-
-        await fetchPurchaseOrder();
-    }
-
-    async function updatePurchaseOrderApprovalStatus(
-        e: Event,
-        id: string,
-        row: PurchaseOrderDisplay,
-    ) {
-        const sessionId = await getSessionAuthId();
-        if (!sessionId) {
-            alert("You must be logged in to perform this action.");
-            return;
-        }
-        const selectedOption = (e.target as HTMLSelectElement)?.value ?? "";
-        const option = getStatusOption(selectedOption);
-
-        newPurchaseOrders = {
-            ...row,
-            approval: option?.value || row.approval,
-        };
-
-        if (option?.value === "APPROVED") {
-            if (!validateInputApproval()) {
-                e.preventDefault();
-                return;
-            }
-        }
-
-        const { data, error } = await supabase
-            .from("vb_purchase_orders")
-            .update({
-                approval: newPurchaseOrders.approval,
-                updated_by: sessionId,
-                updated_at: new Date().toISOString(),
-            })
-            .eq("id", id);
-
-        if (error) {
-            console.error("Error updating purchase order status:", error);
-            return;
-        }
-
-        await fetchPurchaseOrder();
-    }
-
-    function openPaymentModal(row) {
-        selectedPO = row;
-
-        paymentForm = {
-            payment_method: row.payment_method || "",
-            total_approved_order_amount: row.total_approved_order_amount || 0,
-            "1st_pay_amt": row["1st_pay_amt"] || 0,
-            "2nd_pay_amt": row["2nd_pay_amt"] || 0,
-            "3rd_pay_amt": row["3rd_pay_amt"] || 0,
-            "4th_pay_amt": row["4th_pay_amt"] || 0,
-            "5th_pay_amt": row["5th_pay_amt"] || 0,
-            "6th_pay_amt": row["6th_pay_amt"] || 0,
-            "1st_pay_date": row["1st_pay_date"] || "",
-            "2nd_pay_date": row["2nd_pay_date"] || "",
-            "3rd_pay_date": row["3rd_pay_date"] || "",
-            "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)
-        };
-
-        showPaymentModal = true;
-        }
-
-        function calculateDueRemaining(source) {
-        const total = source.total_approved_order_amount || 0;
-        const sum =
-            (source["1st_pay_amt"] || 0) +
-            (source["2nd_pay_amt"] || 0) +
-            (source["3rd_pay_amt"] || 0) +
-            (source["4th_pay_amt"] || 0) +
-            (source["5th_pay_amt"] || 0) +
-            (source["6th_pay_amt"] || 0);
-        return total - sum;
-        }
-
-        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"];
-        }
-        async function savePayment() {
-            const { error } = await supabase
-                .from("vb_purchase_orders")
-                .update({
-                    payment_method: paymentForm.payment_method,
-                    "1st_pay_amt": paymentForm["1st_pay_amt"],
-                    "2nd_pay_amt": paymentForm["2nd_pay_amt"],
-                    "3rd_pay_amt": paymentForm["3rd_pay_amt"],
-                    "4th_pay_amt": paymentForm["4th_pay_amt"],
-                    "5th_pay_amt": paymentForm["5th_pay_amt"],
-                    "6th_pay_amt": paymentForm["6th_pay_amt"],
-                    "1st_pay_date": paymentForm["1st_pay_date"] || null,
-                    "2nd_pay_date": paymentForm["2nd_pay_date"] || null,
-                    "3rd_pay_date": paymentForm["3rd_pay_date"] || null,
-                    "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
-                })
-                .eq("id", selectedPO.id);
-
-            if (error) {
-                console.error("Error saving payment data:", error);
-                alert("Failed to save.");
-                return;
-            }
-
-            showPaymentModal = false;
-            await fetchPurchaseOrder();
-        }
-        async function saveApproval() {
-            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"
-                })
-                .eq("id", selectedPO.id);
-
-            if (error) {
-                console.error("Error saving approval:", error);
-                alert("Failed to save.");
-                return;
-            }
-
-            showApprovalModal = false;
-            await fetchPurchaseOrder();
-        }
+    //fetch on mount
+    onMount(() => {
+        fetchPurchaseOrder();
+        fetchVendors();
+        fetchCurrentUser();
+    });
 </script>
 
 <div>