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.
This commit is contained in:
Hardik 2026-05-06 00:45:39 +05:30
parent 2ca1861226
commit 6f536734bd
2 changed files with 22 additions and 6 deletions

View file

@ -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">

View file

@ -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 {