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:
71
src/lib/utils/currency.ts
Normal file
71
src/lib/utils/currency.ts
Normal file
@@ -0,0 +1,71 @@
|
||||
/**
|
||||
* Single source of truth for money formatting + the supported-currency
|
||||
* dropdown list. Everywhere in the CRM that renders an amount should
|
||||
* call `formatCurrency()` rather than spinning up its own
|
||||
* `Intl.NumberFormat`, and every form that captures an amount should
|
||||
* use the curated `SUPPORTED_CURRENCIES` list rather than a free-text
|
||||
* 3-letter input.
|
||||
*/
|
||||
|
||||
export const SUPPORTED_CURRENCIES = [
|
||||
{ code: 'USD', symbol: '$', label: 'US Dollar' },
|
||||
{ code: 'EUR', symbol: '€', label: 'Euro' },
|
||||
{ code: 'GBP', symbol: '£', label: 'British Pound' },
|
||||
{ code: 'CAD', symbol: 'CA$', label: 'Canadian Dollar' },
|
||||
{ code: 'AUD', symbol: 'A$', label: 'Australian Dollar' },
|
||||
{ code: 'CHF', symbol: 'CHF', label: 'Swiss Franc' },
|
||||
{ code: 'JPY', symbol: '¥', label: 'Japanese Yen' },
|
||||
{ code: 'AED', symbol: 'د.إ', label: 'UAE Dirham' },
|
||||
{ code: 'SGD', symbol: 'S$', label: 'Singapore Dollar' },
|
||||
{ code: 'HKD', symbol: 'HK$', label: 'Hong Kong Dollar' },
|
||||
] as const;
|
||||
|
||||
export type SupportedCurrencyCode = (typeof SUPPORTED_CURRENCIES)[number]['code'];
|
||||
|
||||
const SUPPORTED_SET: ReadonlySet<string> = new Set(SUPPORTED_CURRENCIES.map((c) => c.code));
|
||||
|
||||
/**
|
||||
* Format an amount for display. Accepts numbers, numeric strings, and
|
||||
* null/undefined (returns the empty string for the latter so callers
|
||||
* can short-circuit display logic).
|
||||
*
|
||||
* Defaults to `en-US` locale because the CRM is single-locale today;
|
||||
* pass `locale` explicitly when rendering for portal users in the
|
||||
* future. Unknown ISO codes fall through to Intl unchanged so the
|
||||
* function never throws on legacy data.
|
||||
*/
|
||||
export function formatCurrency(
|
||||
amount: number | string | null | undefined,
|
||||
currency: string | null | undefined = 'USD',
|
||||
options: { locale?: string; minFractionDigits?: number; maxFractionDigits?: number } = {},
|
||||
): string {
|
||||
if (amount === null || amount === undefined || amount === '') return '';
|
||||
const value = typeof amount === 'number' ? amount : Number(amount);
|
||||
if (!Number.isFinite(value)) return '';
|
||||
const code = (currency ?? 'USD').toUpperCase();
|
||||
const { locale = 'en-US', minFractionDigits = 2, maxFractionDigits = 2 } = options;
|
||||
try {
|
||||
return new Intl.NumberFormat(locale, {
|
||||
style: 'currency',
|
||||
currency: code,
|
||||
minimumFractionDigits: minFractionDigits,
|
||||
maximumFractionDigits: maxFractionDigits,
|
||||
}).format(value);
|
||||
} catch {
|
||||
// Unknown currency code — degrade to a bare number with the code
|
||||
// appended rather than throwing. Keeps display robust against any
|
||||
// legacy NocoDB rows that smuggled non-ISO strings into the column.
|
||||
return `${value.toFixed(maxFractionDigits)} ${code}`;
|
||||
}
|
||||
}
|
||||
|
||||
/** Whether a 3-letter code is in the curated supported list. */
|
||||
export function isSupportedCurrency(code: string): boolean {
|
||||
return SUPPORTED_SET.has(code.toUpperCase());
|
||||
}
|
||||
|
||||
/** Symbol for a given currency code, falling back to the code itself. */
|
||||
export function currencySymbol(code: string): string {
|
||||
const match = SUPPORTED_CURRENCIES.find((c) => c.code === code.toUpperCase());
|
||||
return match?.symbol ?? code.toUpperCase();
|
||||
}
|
||||
Reference in New Issue
Block a user