shad0w/pelagia-portal
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): remove font-mono from line items numeric cells; revert formatCurrency

Browse source 
font-mono (monospace) renders optically larger than the surrounding
sans-serif at the same em size. Removing it from quantity, unit price,
taxable, GST% and total cells in both read-only and edit mode makes
all numbers visually consistent with the rest of the page.

formatCurrency reverted to Intl.NumberFormat with style:currency (the
original implementation); the spacing issue the user saw was font-related,
not symbol-related.
This commit is contained in:
Hardik 2026-05-06 00:50:32 +05:30
parent 6f536734bd
commit dd7a40e523
2 changed files with 17 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
App/pelagia-portal/components/po/po-line-items-editor.tsx
View file

@ -127,18 +127,18 @@ export function LineItemsEditor({ items, onChange, readOnly = false, originalIte
<span className={descChanged ? "text-amber-700 font-medium" : "text-neutral-900"}>{item.description}</span> <span className={descChanged ? "text-amber-700 font-medium" : "text-neutral-900"}>{item.description}</span>
</td> </td>
<td className="py-2 pl-4 text-right"> <td className="py-2 pl-4 text-right">
{qtyChanged && <span className="block text-neutral-400 line-through text-xs font-mono">{Number(orig.quantity)}</span>} {qtyChanged && <span className="block text-neutral-400 line-through text-xs">{Number(orig.quantity)}</span>}
<span className={`font-mono ${qtyChanged ? "text-amber-700 font-medium" : ""}`}>{item.quantity}</span> <span className={qtyChanged ? "text-amber-700 font-medium" : ""}>{item.quantity}</span>
</td> </td>
<td className="py-2 pl-3 text-neutral-500">{item.unit}</td> <td className="py-2 pl-3 text-neutral-500">{item.unit}</td>
{hasSize && <td className="py-2 pl-3 text-neutral-500">{item.size ?? "—"}</td>} {hasSize && <td className="py-2 pl-3 text-neutral-500">{item.size ?? "—"}</td>}
<td className="py-2 pl-4 text-right"> <td className="py-2 pl-4 text-right">
{priceChanged && <span className="block text-neutral-400 line-through text-xs font-mono">{formatCurrency(Number(orig.unitPrice))}</span>} {priceChanged && <span className="block text-neutral-400 line-through text-xs">{formatCurrency(Number(orig.unitPrice))}</span>}
<span className={`font-mono ${priceChanged ? "text-amber-700 font-medium" : ""}`}>{formatCurrency(item.unitPrice)}</span> <span className={priceChanged ? "text-amber-700 font-medium" : ""}>{formatCurrency(item.unitPrice)}</span>
</td> </td>
<td className="py-2 pl-4 text-right font-mono">{formatCurrency(taxableAmt)}</td> <td className="py-2 pl-4 text-right">{formatCurrency(taxableAmt)}</td>
<td className="py-2 pl-4 text-right text-neutral-500">{Math.round((item.gstRate ?? 0.18) * 100)}%</td> <td className="py-2 pl-4 text-right text-neutral-500">{Math.round((item.gstRate ?? 0.18) * 100)}%</td>
<td className="py-2 pl-4 text-right font-mono">{formatCurrency(taxableAmt + gstAmt)}</td> <td className="py-2 pl-4 text-right">{formatCurrency(taxableAmt + gstAmt)}</td>
</tr> </tr>
); );
})} })}
@ -146,15 +146,15 @@ export function LineItemsEditor({ items, onChange, readOnly = false, originalIte
<tfoot> <tfoot>
<tr className="border-t border-neutral-100"> <tr className="border-t border-neutral-100">
<td colSpan={hasSize ? 5 : 4} className="pt-3 text-right text-sm text-neutral-500">Taxable subtotal</td> <td colSpan={hasSize ? 5 : 4} className="pt-3 text-right text-sm text-neutral-500">Taxable subtotal</td>
<td className="pt-3 pl-4 text-right font-mono text-neutral-700" colSpan={3}>{formatCurrency(taxable)}</td> <td className="pt-3 pl-4 text-right text-sm text-neutral-700" colSpan={3}>{formatCurrency(taxable)}</td>
</tr> </tr>
<tr> <tr>
<td colSpan={hasSize ? 5 : 4} className="py-0.5 text-right text-sm text-neutral-500">GST</td> <td colSpan={hasSize ? 5 : 4} className="py-0.5 text-right text-sm text-neutral-500">GST</td>
<td className="py-0.5 pl-4 text-right font-mono text-neutral-700" colSpan={3}>{formatCurrency(gst)}</td> <td className="py-0.5 pl-4 text-right text-sm text-neutral-700" colSpan={3}>{formatCurrency(gst)}</td>
</tr> </tr>
<tr className="border-t border-neutral-200"> <tr className="border-t border-neutral-200">
<td colSpan={hasSize ? 5 : 4} className="pt-2 text-right text-sm font-semibold text-neutral-900">Grand Total</td> <td colSpan={hasSize ? 5 : 4} className="pt-2 text-right text-sm font-semibold text-neutral-900">Grand Total</td>
<td className="pt-2 pl-4 text-right font-mono font-semibold text-neutral-900" colSpan={3}>{formatCurrency(grand)}</td> <td className="pt-2 pl-4 text-right text-sm font-semibold text-neutral-900" colSpan={3}>{formatCurrency(grand)}</td>
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
@ -248,7 +248,7 @@ export function LineItemsEditor({ items, onChange, readOnly = false, originalIte
<option value="0.28">28%</option> <option value="0.28">28%</option>
</select> </select>
</td> </td>
<td className="py-2 pl-4 text-right font-mono text-sm"> <td className="py-2 pl-4 text-right text-sm">
{formatCurrency(taxableAmt * (1 + gstR))} {formatCurrency(taxableAmt * (1 + gstR))}
</td> </td>
<td className="py-2 pl-4"> <td className="py-2 pl-4">
@ -269,15 +269,15 @@ export function LineItemsEditor({ items, onChange, readOnly = false, originalIte
<tfoot> <tfoot>
<tr className="border-t border-neutral-100"> <tr className="border-t border-neutral-100">
<td colSpan={6} className="pt-3 text-right text-sm text-neutral-500">Taxable subtotal</td> <td colSpan={6} className="pt-3 text-right text-sm text-neutral-500">Taxable subtotal</td>
<td className="pt-3 pl-4 text-right font-mono text-neutral-700" colSpan={2}>{formatCurrency(taxable)}</td> <td className="pt-3 pl-4 text-right text-sm text-neutral-700" colSpan={2}>{formatCurrency(taxable)}</td>
</tr> </tr>
<tr> <tr>
<td colSpan={6} className="py-0.5 text-right text-sm text-neutral-500">GST</td> <td colSpan={6} className="py-0.5 text-right text-sm text-neutral-500">GST</td>
<td className="py-0.5 pl-4 text-right font-mono text-neutral-700" colSpan={2}>{formatCurrency(gst)}</td> <td className="py-0.5 pl-4 text-right text-sm text-neutral-700" colSpan={2}>{formatCurrency(gst)}</td>
</tr> </tr>
<tr className="border-t border-neutral-200"> <tr className="border-t border-neutral-200">
<td colSpan={6} className="pt-2 text-right text-sm font-semibold text-neutral-900">Grand Total</td> <td colSpan={6} className="pt-2 text-right text-sm font-semibold text-neutral-900">Grand Total</td>
<td className="pt-2 pl-4 text-right font-mono font-semibold text-neutral-900" colSpan={2}>{formatCurrency(grand)}</td> <td className="pt-2 pl-4 text-right text-sm font-semibold text-neutral-900" colSpan={2}>{formatCurrency(grand)}</td>
</tr> </tr>
</tfoot> </tfoot>
</table> </table>

10
App/pelagia-portal/lib/utils.ts
View file

@ -6,12 +6,10 @@ export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs)); return twMerge(clsx(inputs));
} }
export function formatCurrency(amount: number | string, _currency = "INR"): string { export function formatCurrency(amount: number | string, currency = "INR"): string {
const formatted = new Intl.NumberFormat("en-IN", { return new Intl.NumberFormat("en-IN", { style: "currency", currency }).format(
minimumFractionDigits: 2, Number(amount)
maximumFractionDigits: 2, );
}).format(Number(amount));
return `₹${formatted}`;
} }
export function formatDate(date: Date | string): string { export function formatDate(date: Date | string): string {