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>

src/components/berths/berth-card.tsx

@@ -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 ?? [];
 

src/components/berths/berth-columns.tsx

@@ -12,6 +12,7 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { TagBadge } from '@/components/shared/tag-badge';
+import { formatCurrency } from '@/lib/utils/currency';
 import { mooringLetterDot } from './mooring-letter-tone';
 
 export type BerthRow = {
@@ -176,11 +177,7 @@ function joinNonNull(parts: Array<string | null | undefined>, sep = ' · '): str
 
 function formatMoney(amount: string | null, currency: string): string | null {
   if (!amount) return null;
-  return new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: currency || 'USD',
-    maximumFractionDigits: 0,
-  }).format(Number(amount));
+  return formatCurrency(amount, currency, { maxFractionDigits: 0 });
 }
 
 export const berthColumns: ColumnDef<BerthRow, unknown>[] = [

src/components/berths/berth-form.tsx

@@ -20,6 +20,8 @@ import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetFooter } from '@/com
 import { Separator } from '@/components/ui/separator';
 import { Switch } from '@/components/ui/switch';
 import { TagPicker } from '@/components/shared/tag-picker';
+import { CurrencyInput } from '@/components/shared/currency-input';
+import { CurrencySelect } from '@/components/shared/currency-select';
 import { apiFetch } from '@/lib/api/client';
 import { toastError } from '@/lib/api/toast-error';
 import { updateBerthSchema, type UpdateBerthInput } from '@/lib/validators/berths';
@@ -400,11 +402,22 @@ export function BerthForm({ berth, open, onOpenChange }: BerthFormProps) {
             <div className="grid grid-cols-2 gap-4">
               <div className="space-y-2">
                 <Label>Price</Label>
-                <Input type="number" step="0.01" {...register('price')} />
+                <CurrencyInput
+                  value={watch('price') ?? ''}
+                  currency={watch('priceCurrency') ?? 'USD'}
+                  onChange={(v) =>
+                    setValue('price', v ?? undefined, { shouldDirty: true })
+                  }
+                />
               </div>
               <div className="space-y-2">
                 <Label>Currency</Label>
-                <Input {...register('priceCurrency')} placeholder="USD" maxLength={3} />
+                <CurrencySelect
+                  value={watch('priceCurrency') ?? 'USD'}
+                  onValueChange={(v) =>
+                    setValue('priceCurrency', v, { shouldDirty: true })
+                  }
+                />
               </div>
             </div>
           </div>