feat(currency): centralise money formatting + curated currency picker

New `src/lib/utils/currency.ts` is the single source of truth for
display formatting (`formatCurrency`) and the supported-currency
catalog (`SUPPORTED_CURRENCIES`, 10 codes covering the marina market).

New shared components:
- `<CurrencyInput>` — number input with leading symbol prefix and
  decimal inputMode, raw number value out via onChange.
- `<CurrencySelect>` — Select dropdown over `SUPPORTED_CURRENCIES`
  with symbol + code + label per row, replaces the free-text 3-letter
  inputs that let reps type "EURO" or "$$$" into a 3-char ISO column.

Threaded through every money input + display:
- Forms: berth (price/currency), expense (amount/currency), invoice
  (currency Select + line-items unit-price + step-3 review totals).
- Reads: berth-card / berth-columns / invoice-card / expense-card /
  dashboard KPIs / dashboard revenue-forecast / portal-invoices page.
  Each had its own ad-hoc `Intl.NumberFormat` wrapper with slightly
  different fallbacks; collapsed onto the shared helper.

`InvoiceLineItems` gained a `currency` prop so the unit-price input
prefix and the subtotal use the parent invoice's currency rather than
hard-coded `en-US` formatting.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-09 04:24:46 +02:00
parent 72ab7180cf
commit ee2da8f67e
14 changed files with 264 additions and 99 deletions

View File

@@ -13,6 +13,7 @@ import {
import { TagBadge } from '@/components/shared/tag-badge';
import { ListCard, ListCardAvatar, ListCardMeta } from '@/components/shared/list-card';
import { cn } from '@/lib/utils';
import { formatCurrency } from '@/lib/utils/currency';
import type { BerthRow } from './berth-columns';
import { mooringLetterDot } from './mooring-letter-tone';
@@ -28,18 +29,6 @@ const STATUS_LABELS: Record<string, string> = {
sold: 'Sold',
};
function formatPrice(price: string, currency: string): string {
try {
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: currency || 'USD',
maximumFractionDigits: 0,
}).format(Number(price));
} catch {
return `${currency} ${price}`;
}
}
interface BerthCardProps {
berth: BerthRow;
}
@@ -66,7 +55,10 @@ export function BerthCard({ berth }: BerthCardProps) {
const metaParts: string[] = [];
if (dimText) metaParts.push(dimText);
if (berth.price) metaParts.push(formatPrice(berth.price, berth.priceCurrency));
if (berth.price)
metaParts.push(
formatCurrency(berth.price, berth.priceCurrency, { maxFractionDigits: 0 }),
);
const tags = berth.tags ?? [];