diff --git a/src/routes/backoffice/purchaseorder/+page.svelte b/src/routes/backoffice/purchaseorder/+page.svelte
index 4e49a45..50e62a1 100644
--- a/src/routes/backoffice/purchaseorder/+page.svelte
+++ b/src/routes/backoffice/purchaseorder/+page.svelte
@@ -414,6 +414,19 @@
 
         showApprovalModal = true;
     }
+    let showDetailsModal = false;
+    let detailsRow: any = null;
+
+    function openDetailsModal(row) {
+        detailsRow = row;     // id is already in row.id if you need it as a matcher
+        showDetailsModal = true;
+    }
+
+    function closeDetailsModal() {
+        showDetailsModal = false;
+        detailsRow = null;
+    }
+
     // acknowledge purchase order
     function openAcknowledgedModal(row) {
 
@@ -1496,6 +1509,12 @@
                                 </td>
                             {:else if col.key === "actions"}
                                 <td class="px-4 py-2">
+                                    <button
+                                        class="inline-flex items-center gap-1 rounded bg-gray-700 px-3 py-1.5 text-white text-xs font-medium hover:bg-gray-800"
+                                        on:click={() => openDetailsModal(row)}
+                                    >
+                                        👁️ Details
+                                    </button>
                                     <button
                                         class="inline-flex items-center gap-1 rounded bg-blue-600 px-3 py-1.5 text-white text-xs font-medium hover:bg-blue-700"
                                         on:click={() => openEditModal(row)}
@@ -2698,3 +2717,285 @@
         </div>
     </div>
 {/if}
+{#if showDetailsModal}
+  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+    <div class="bg-white w-full max-w-3xl max-h-[90vh] overflow-y-auto rounded-2xl shadow-lg p-6">
+      <div class="flex items-start justify-between mb-4">
+        <h2 class="text-xl font-bold">Purchase Order Details</h2>
+        <button class="text-gray-500 hover:text-gray-700" on:click={closeDetailsModal}>✕</button>
+      </div>
+
+      <!-- Top detail fields -->
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label class="block text-sm text-gray-600">PO Number</label>
+          <input class="w-full border rounded p-2 bg-gray-100" readonly value={detailsRow?.purchase_order_number ?? "—"} />
+        </div>
+        <div>
+          <label class="block text-sm text-gray-600">PO Status</label>
+          <input class="w-full border rounded p-2 bg-gray-100" readonly value={detailsRow?.po_status ?? "—"} />
+        </div>
+        <div>
+          <label class="block text-sm text-gray-600">Villa Name</label>
+          <input class="w-full border rounded p-2 bg-gray-100" readonly value={detailsRow?.villa_data ?? "—"} />
+        </div>
+        <div>
+          <label class="block text-sm text-gray-600">PO Type</label>
+          <input class="w-full border rounded p-2 bg-gray-100" readonly value={detailsRow?.po_type ?? "—"} />
+        </div>
+        <div class="md:col-span-2">
+          <label class="block text-sm text-gray-600">Related Issue</label>
+          <textarea class="w-full border rounded p-2 bg-gray-100" rows="3" readonly>
+{detailsRow?.po_issue_name ?? "no issue"}</textarea>
+        </div>
+        <div>
+          <label class="block text-sm text-gray-600">PO Item</label>
+          <input class="w-full border rounded p-2 bg-gray-100" readonly value={detailsRow?.po_item ?? "—"} />
+        </div>
+        <div>
+          <label class="block text-sm text-gray-600">PO Qty</label>
+          <input class="w-full border rounded p-2 bg-gray-100" readonly value={detailsRow?.po_quantity ?? "—"} />
+        </div>
+        <div>
+          <label class="block text-sm text-gray-600">Request Date</label>
+          <input class="w-full border rounded p-2 bg-gray-100" readonly value={detailsRow?.requested_date ?? "—"} />
+        </div>
+        <div>
+          <label class="block text-sm text-gray-600">Request By</label>
+          <input class="w-full border rounded p-2 bg-gray-100" readonly value={detailsRow?.requested_by_name ?? "—"} />
+        </div>
+        <div>
+          <label class="block text-sm text-gray-600">PO Due Date</label>
+          <input class="w-full border rounded p-2 bg-gray-100" readonly value={detailsRow?.po_due ?? "—"} />
+        </div>
+      </div>
+
+      <!-- Prepared section -->
+      <div class="my-6 border-t pt-4">
+        <h3 class="text-lg font-semibold mb-3">Prepared Section</h3>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label class="block text-sm text-gray-600">Prepared Date</label>
+            <input class="w-full border rounded p-2 bg-gray-100" readonly value={detailsRow?.prepared_date ?? "—"} />
+          </div>
+          <div>
+            <label class="block text-sm text-gray-600">Prepared By</label>
+            <input class="w-full border rounded p-2 bg-gray-100" readonly value={detailsRow?.prepared_by_name ?? "—"} />
+          </div>
+          <div>
+            <label class="block text-sm text-gray-600">Q1 Vendor</label>
+            <input class="w-full border rounded p-2 bg-gray-100" readonly value={detailsRow?.q1_vendor ?? "—"} />
+          </div>
+          <div>
+            <label class="block text-sm text-gray-600">Q1 Vendor Price</label>
+            <CurrencyInput
+                value={detailsRow?.q1_vendor_price ?? "—"}
+                disabled
+                className="w-full border p-2 bg-gray-100"
+            />
+          </div>
+          <div>
+            <label class="block text-sm text-gray-600">Q2 Vendor</label>
+            <input class="w-full border rounded p-2 bg-gray-100" readonly value={detailsRow?.q2_vendor ?? "—"} />
+          </div>
+          <div>
+            <label class="block text-sm text-gray-600">Q2 Vendor Price</label>            
+            <CurrencyInput
+                value={detailsRow?.q2_vendor_price ?? "—"}
+                disabled
+                className="w-full border p-2 bg-gray-100"
+            />
+          </div>
+          <div>
+            <label class="block text-sm text-gray-600">Q3 Vendor</label>
+            <input class="w-full border rounded p-2 bg-gray-100" readonly value={detailsRow?.q3_vendor ?? "—"} />
+          </div>
+          <div>
+            <label class="block text-sm text-gray-600">Q3 Vendor Price</label>            
+            <CurrencyInput
+                value={detailsRow?.q3_vendor_price ?? "—"}
+                disabled
+                className="w-full border p-2 bg-gray-100"
+            />
+          </div>
+          <div class="md:col-span-2">
+            <label class="block text-sm text-gray-600">Remarks</label>
+            <textarea class="w-full border rounded p-2 bg-gray-100" rows="3" readonly>
+{detailsRow?.po_remark ?? "—"}</textarea>
+          </div>
+          <!-- Newly added approved vendor/pricing fields -->
+          <div>
+            <label class="block text-sm text-gray-600">Approved Vendor</label>
+            <input class="w-full border rounded p-2 bg-gray-100" readonly value={detailsRow?.approved_vendor ?? "—"} />
+          </div>
+          <div>
+            <label class="block text-sm text-gray-600">Approved Price</label>
+            <CurrencyInput
+                value={detailsRow?.approved_price ?? "—"}
+                disabled
+                className="w-full border p-2 bg-gray-100"
+            />
+          </div>
+          <div>
+            <label class="block text-sm text-gray-600">Approved Quantity</label>
+            <input class="w-full border rounded p-2 bg-gray-100" readonly value={detailsRow?.approved_quantity ?? "—"} />
+          </div>
+          <div>
+            <label class="block text-sm text-gray-600">Approved Total Price</label>
+            <CurrencyInput
+                value={detailsRow?.total_approved_order_amount ?? "—"}
+                disabled
+                className="w-full border p-2 bg-gray-100"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- Payment section -->
+      <div class="my-6 border-t pt-4">
+        <h3 class="text-lg font-semibold mb-3">Payment Section</h3>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          
+          <div>
+            <label class="block text-sm text-gray-600">Payment Method</label>
+            <input class="w-full border rounded p-2 bg-gray-100" readonly value={detailsRow?.payment_method ?? "—"} />
+          </div>
+          <div>
+            <label class="block text-sm text-gray-600">Full Payment Date</label>
+            <input class="w-full border rounded p-2 bg-gray-100" readonly value={detailsRow?.full_pay_date ?? "—"} />
+          </div>
+          <div>
+            <label class="block text-sm text-gray-600">1st Payment Amount</label>
+            <CurrencyInput
+                value={detailsRow?.["1st_pay_amt"] ?? "—"}
+                disabled
+                className="w-full border p-2 bg-gray-100"
+            />
+          </div>
+          <div>
+            <label class="block text-sm text-gray-600">1st Payment Date</label>
+            <input class="w-full border rounded p-2 bg-gray-100" readonly value={detailsRow?.["1st_pay_date"] ?? "—"} />
+          </div>
+          <div>
+            <label class="block text-sm text-gray-600">2nd Payment Amount</label>
+            <CurrencyInput
+                value={detailsRow?.["2rd_pay_amt"] ?? "—"}
+                disabled
+                className="w-full border p-2 bg-gray-100"
+            />
+          </div>
+          <div>
+            <label class="block text-sm text-gray-600">2nd Payment Date</label>
+            <input class="w-full border rounded p-2 bg-gray-100" readonly value={detailsRow?.["2rd_pay_date"] ?? "—"} />
+          </div>
+          <div>
+            <label class="block text-sm text-gray-600">3rd Payment Amount</label>
+            <CurrencyInput
+                value={detailsRow?.["3rd_pay_amt"] ?? "—"}
+                disabled
+                className="w-full border p-2 bg-gray-100"
+            />
+          </div>
+          <div>
+            <label class="block text-sm text-gray-600">3rd Payment Date</label>
+            <input class="w-full border rounded p-2 bg-gray-100" readonly value={detailsRow?.["3rd_pay_date"] ?? "—"} />
+          </div>
+          <div>
+            <label class="block text-sm text-gray-600">4th Payment Amount</label>
+            <CurrencyInput
+                value={detailsRow?.["4th_pay_amt"] ?? "—"}
+                disabled
+                className="w-full border p-2 bg-gray-100"
+            />
+          </div>
+          <div>
+            <label class="block text-sm text-gray-600">4th Payment Date</label>
+            <input class="w-full border rounded p-2 bg-gray-100" readonly value={detailsRow?.["4th_pay_date"] ?? "—"} />
+          </div>
+          <div>
+            <label class="block text-sm text-gray-600">5th Payment Amount</label>
+            <CurrencyInput
+                value={detailsRow?.["5th_pay_amt"] ?? "—"}
+                disabled
+                className="w-full border p-2 bg-gray-100"
+            />
+          </div>
+          <div>
+            <label class="block text-sm text-gray-600">5th Payment Date</label>
+            <input class="w-full border rounded p-2 bg-gray-100" readonly value={detailsRow?.["5th_pay_date"] ?? "—"} />
+          </div>
+          <div>
+            <label class="block text-sm text-gray-600">6th Payment Amount</label>
+            <CurrencyInput
+                value={detailsRow?.["6th_pay_amt"] ?? "—"}
+                disabled
+                className="w-full border p-2 bg-gray-100"
+            />
+          </div>
+          <div>
+            <label class="block text-sm text-gray-600">6th Payment Date</label>
+            <input class="w-full border rounded p-2 bg-gray-100" readonly value={detailsRow?.["6th_pay_date"] ?? "—"} />
+          </div>
+          <div>
+            <label class="block text-sm text-gray-600">Due Payment</label>
+            <CurrencyInput
+                value={detailsRow?.due_remaining ?? "—"}
+                disabled
+                className="w-full border p-2 bg-gray-100"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- Approval section -->
+      <div class="my-6 border-t pt-4">
+        <h3 class="text-lg font-semibold mb-3">Approval Section</h3>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label class="block text-sm text-gray-600">Approved By</label>
+            <input class="w-full border rounded p-2 bg-gray-100" readonly value={detailsRow?.approved_name ?? "—"} />
+          </div>
+          <div>
+            <label class="block text-sm text-gray-600">Approved Date</label>
+            <input class="w-full border rounded p-2 bg-gray-100" readonly value={detailsRow?.approved_date ?? "—"} />
+          </div>
+        </div>
+      </div>
+
+      <!-- Acknowledged section -->
+      <div class="my-6 border-t pt-4">
+        <h3 class="text-lg font-semibold mb-3">Acknowledged Section</h3>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label class="block text-sm text-gray-600">Acknowledged By</label>
+            <input class="w-full border rounded p-2 bg-gray-100" readonly value={detailsRow?.acknowledged_name ?? "—"} />
+          </div>
+          <div>
+            <label class="block text-sm text-gray-600">Acknowledged Date</label>
+            <input class="w-full border rounded p-2 bg-gray-100" readonly value={detailsRow?.acknowledged_date ?? "—"} />
+          </div>
+        </div>
+      </div>
+
+      <!-- Received section -->
+      <div class="my-6 border-t pt-4">
+        <h3 class="text-lg font-semibold mb-3">Received Section</h3>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label class="block text-sm text-gray-600">Received By</label>
+            <input class="w-full border rounded p-2 bg-gray-100" readonly value={detailsRow?.received_name ?? "—"} />
+          </div>
+          <div>
+            <label class="block text-sm text-gray-600">Received Date</label>
+            <input class="w-full border rounded p-2 bg-gray-100" readonly value={detailsRow?.received_date ?? "—"} />
+          </div>
+        </div>
+      </div>
+
+      <div class="flex justify-end mt-4">
+        <button class="px-4 py-2 rounded border hover:bg-gray-100" on:click={closeDetailsModal}>Close</button>
+      </div>
+    </div>
+  </div>
+{/if}
+