add detail button
This commit is contained in:
@@ -414,6 +414,19 @@
|
|||||||
|
|
||||||
showApprovalModal = true;
|
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
|
// acknowledge purchase order
|
||||||
function openAcknowledgedModal(row) {
|
function openAcknowledgedModal(row) {
|
||||||
|
|
||||||
@@ -1496,6 +1509,12 @@
|
|||||||
</td>
|
</td>
|
||||||
{:else if col.key === "actions"}
|
{:else if col.key === "actions"}
|
||||||
<td class="px-4 py-2">
|
<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
|
<button
|
||||||
class="inline-flex items-center gap-1 rounded bg-blue-600 px-3 py-1.5 text-white text-xs font-medium hover:bg-blue-700"
|
class="inline-flex items-center gap-1 rounded bg-blue-600 px-3 py-1.5 text-white text-xs font-medium hover:bg-blue-700"
|
||||||
on:click={() => openEditModal(row)}
|
on:click={() => openEditModal(row)}
|
||||||
@@ -2698,3 +2717,285 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/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}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user