From 6f536734bdad2d951236056c81598390b3284baf Mon Sep 17 00:00:00 2001
From: Hardik <shardik99@gmail.com>
Date: Wed, 6 May 2026 00:45:39 +0530
Subject: [PATCH] fix(ui): cohesive currency symbol and vendor field styling

formatCurrency: manually prepend Rs symbol instead of using Intl currency
style, which could inject a non-breaking space between the symbol and number.

po-detail vendor section: replace font-mono on Vendor ID with font-medium
text-neutral-900 so it matches all other detail fields. Not assigned
indicator changed from italic warning text to a small pill badge.
GSTIN keeps mono (it is a standardised code) but now has correct text colour
and tracking for legibility.
---
 App/pelagia-portal/components/po/po-detail.tsx | 18 ++++++++++++++++--
 App/pelagia-portal/lib/utils.ts                | 10 ++++++----
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/App/pelagia-portal/components/po/po-detail.tsx b/App/pelagia-portal/components/po/po-detail.tsx
index 558e15d..71ec1eb 100644
--- a/App/pelagia-portal/components/po/po-detail.tsx
+++ b/App/pelagia-portal/components/po/po-detail.tsx
@@ -194,8 +194,22 @@ export async function PoDetail({ po, currentUserId, currentRole, readOnly = fals
           <h3 className="text-sm font-semibold text-neutral-900 mb-3">Vendor</h3>
           <dl className="grid grid-cols-2 gap-x-6 gap-y-2 text-sm">
             <div><dt className="text-neutral-500">Name</dt><dd className="font-medium text-neutral-900">{po.vendor.name}</dd></div>
-            <div><dt className="text-neutral-500">Vendor ID</dt><dd className="font-mono">{po.vendor.vendorId ?? <span className="text-warning-700 italic">Not assigned</span>}</dd></div>
-            {po.vendor.gstin && <div><dt className="text-neutral-500">GSTIN</dt><dd className="font-mono text-sm">{po.vendor.gstin}</dd></div>}
+            <div>
+              <dt className="text-neutral-500">Vendor ID</dt>
+              <dd className="font-medium text-neutral-900">
+                {po.vendor.vendorId ?? (
+                  <span className="inline-flex items-center rounded-full bg-warning-50 px-2 py-0.5 text-xs font-medium text-warning-700 ring-1 ring-inset ring-warning-200">
+                    Not assigned
+                  </span>
+                )}
+              </dd>
+            </div>
+            {po.vendor.gstin && (
+              <div>
+                <dt className="text-neutral-500">GSTIN</dt>
+                <dd className="font-medium text-neutral-900 font-mono tracking-wide text-sm">{po.vendor.gstin}</dd>
+              </div>
+            )}
             {po.vendor.address && <div className="col-span-2"><dt className="text-neutral-500">Address</dt><dd className="font-medium text-neutral-900 whitespace-pre-wrap">{po.vendor.address}</dd></div>}
             {(po.vendor.contactName || po.vendor.contactMobile || po.vendor.contactEmail) && (
               <div className="col-span-2">
diff --git a/App/pelagia-portal/lib/utils.ts b/App/pelagia-portal/lib/utils.ts
index 5ad136e..c79ea91 100644
--- a/App/pelagia-portal/lib/utils.ts
+++ b/App/pelagia-portal/lib/utils.ts
@@ -6,10 +6,12 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
 
-export function formatCurrency(amount: number | string, currency = "INR"): string {
-  return new Intl.NumberFormat("en-IN", { style: "currency", currency }).format(
-    Number(amount)
-  );
+export function formatCurrency(amount: number | string, _currency = "INR"): string {
+  const formatted = new Intl.NumberFormat("en-IN", {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(Number(amount));
+  return `₹${formatted}`;
 }
 
 export function formatDate(date: Date | string): string {