add Sort Function

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

@@ -161,6 +161,8 @@
         updated_by: "",
         updated_at: new Date().toISOString(),
     };
+    let sortColumn: string | null = "created_at"; // or any default
+    let sortOrder: "asc" | "desc" = "desc";
     let showEditModal = false;
     let editForm = {
         po_number: "",
@@ -191,7 +193,13 @@
         approval: "",
         approved_by: "",
         approved_date: "",
-        reject_comment: ""
+        reject_comment: "",
+        po_remark: "",
+        approved_quantity: 0,
+        approved_vendor: "",
+        approved_price: 0,
+        po_item: "",
+        total_approved_order_amount: 0
     };
     let villaOptions = [];
     let poItemOptions = [];
@@ -283,6 +291,21 @@
     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,
+    );
+    }
 
     // Function to format numbers as ordinal (1st, 2nd, 3rd, etc.)
     function ordinal(num: number) {
@@ -323,7 +346,13 @@
             approval: row.approval ? "approve" : "reject",
             approved_by: currentUserId,
             approved_date: new Date().toISOString().split("T")[0],
-            reject_comment: row.reject_comment || ""
+            reject_comment: row.reject_comment || "",
+            po_remark: row.po_remark || "",
+            approved_quantity: row.approved_quantity || 0,
+            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
         };
 
         showApprovalModal = true;
@@ -478,7 +507,8 @@
             approved_by: approvalForm.approval === "approve" ? currentUserId : null,
             approved_date: approvalForm.approved_date,
             reject_comment: approvalForm.reject_comment || null,
-            po_status: "approved"
+            po_status: "approved",
+            po_remark: approvalForm.po_remark || null
             })
             .eq("id", selectedPO.id);
 
@@ -692,7 +722,7 @@
         let query = supabase
             .from("vb_purchaseorder_data")
             .select("*")
-            .order(sort || "purchase_order_number", { ascending: order === "desc" })
+            .order(sortColumn || "created_at", { ascending: sortOrder === "asc" })
             .range(offset, offset + limit - 1);
 
             if (filter) {
@@ -1070,7 +1100,7 @@
             </button>
         </div>
     </div>
-    <div class="overflow-x-auto rounded-lg shadow mb-4">
+    <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">
             <thead class="bg-gray-100">
                 <tr>
@@ -1079,14 +1109,22 @@
                             <th
                                 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' ? ' 🔼' : ' 🔽'}
+                                {/if}
                             </th>
                         {:else}
                             <th
                                 class="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}
                             </th>
                         {/if}
                     {/each}
@@ -1650,11 +1688,10 @@
         <!-- Payment Amounts -->
         {#each [1,2,3,4,5,6] as num}
             <label>{ordinal(num)} Pay Amount</label>
-            <input 
-                type="number" 
+            <CurrencyInput
                 bind:value={paymentForm[`${ordinal(num)}_pay_amt`]}
-                on:input={updateDueRemaining}
-                class="w-full border p-2"
+                onInput={updateDueRemaining}
+                className="w-full"
             />
 
             <label>{ordinal(num)} Pay Date</label>
@@ -1667,7 +1704,7 @@
 
         <!-- Due Remaining -->
         <label>Due Remaining</label>
-        <input type="number" value={paymentForm.due_remaining} disabled class="w-full border p-2 bg-gray-100"/>
+        <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">
@@ -1693,27 +1730,89 @@
           class="w-full border p-2 bg-gray-100"
         />
 
-        <!-- Approval -->
+        <!-- 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 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}
+
+        <!-- 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>
+
+        <!-- Reject Comment -->
         {#if approvalForm.approval === 'reject'}
-        <label>Reject Comment</label>
-        <textarea
+          <label>Reject Comment</label>
+          <textarea
             bind:value={approvalForm.reject_comment}
             class="w-full border p-2"
             rows="3"
             placeholder="Enter reason for rejection..."
-        ></textarea>
+          ></textarea>
         {/if}
 
-        <!-- Hidden: approved_by -->
-        <input type="hidden" value={approvalForm.approved_by} />
+        <!-- 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: approved_date -->
+        <!-- Hidden fields -->
+        <input type="hidden" value={approvalForm.approved_by} />
         <input type="hidden" value={approvalForm.approved_date} />
 
         <!-- Actions -->
@@ -1726,6 +1825,7 @@
   </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">