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:
parent
2ca1861226
commit
6f536734bd
2 changed files with 22 additions and 6 deletions
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue