From 5d3b45a3a4b83f16c98af8393b47e61d64f58c5d Mon Sep 17 00:00:00 2001
From: "Claude (auto-fix)" <claude-autofix@pelagiamarine.com>
Date: Fri, 19 Jun 2026 03:39:19 +0530
Subject: [PATCH] fix(po-detail): show approval date as PO date on detail
 screen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The PO date field was only displayed when a submitter explicitly set it.
For approved POs without an explicit date, the approval date is now shown.
Precedence: submitter-set poDate → approvedAt → createdAt (matches the
export route which already used this logic).

Fixes #5
---
 App/components/po/po-detail.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/App/components/po/po-detail.tsx b/App/components/po/po-detail.tsx
index 7c74b32..21288b0 100644
--- a/App/components/po/po-detail.tsx
+++ b/App/components/po/po-detail.tsx
@@ -163,6 +163,9 @@ export async function PoDetail({ po, currentUserId, currentRole, readOnly = fals
     .reverse()
     .find((a) => a.actionType === "APPROVED" || a.actionType === "APPROVED_WITH_NOTE");
 
+  // PO date: submitter-set date → approved date → creation date
+  const poDisplayDate = po.poDate ?? po.approvedAt ?? po.createdAt;
+
   return (
     <div className="space-y-6">
       {/* Header */}
@@ -302,7 +305,7 @@ export async function PoDetail({ po, currentUserId, currentRole, readOnly = fals
           {approvalAction && (
             <div><dt className="text-neutral-500">Approved By</dt><dd className="font-medium text-neutral-900">{approvalAction.actor.name}</dd></div>
           )}
-          {po.poDate && <div><dt className="text-neutral-500">PO Date</dt><dd className="font-medium text-neutral-900">{formatDate(po.poDate)}</dd></div>}
+          <div><dt className="text-neutral-500">PO Date</dt><dd className="font-medium text-neutral-900">{formatDate(poDisplayDate)}</dd></div>
           {po.projectCode && <div><dt className="text-neutral-500">Project Code</dt><dd className="font-medium text-neutral-900">{po.projectCode}</dd></div>}
           {po.dateRequired && <div><dt className="text-neutral-500">Delivery Date Required</dt><dd className="font-medium text-neutral-900">{formatDate(po.dateRequired)}</dd></div>}
           {po.piQuotationNo && <div><dt className="text-neutral-500">PI / Quotation No.</dt><dd className="font-medium text-neutral-900">{po.piQuotationNo}</dd></div>}