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/expenses/expense-card.tsx

@@ -13,6 +13,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { ListCard, ListCardAvatar, ListCardMeta } from '@/components/shared/list-card';
 import { cn } from '@/lib/utils';
+import { formatCurrency } from '@/lib/utils/currency';
 import type { ExpenseRow } from './expense-columns';
 
 const PAYMENT_STATUS_COLORS: Record<string, string> = {
@@ -47,13 +48,7 @@ function deriveAccent(status: string | null, duplicateOf: string | null): string
   }
 }
 
-function formatAmount(amount: string, currency: string): string {
-  try {
-    return new Intl.NumberFormat('en', { style: 'currency', currency }).format(Number(amount));
-  } catch {
-    return `${currency} ${amount}`;
-  }
-}
+const formatAmount = (amount: string, currency: string) => formatCurrency(amount, currency);
 
 interface ExpenseCardProps {
   expense: ExpenseRow;

src/components/expenses/expense-form-dialog.tsx

@@ -19,6 +19,8 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetFooter } from '@/components/ui/sheet';
+import { CurrencyInput } from '@/components/shared/currency-input';
+import { CurrencySelect } from '@/components/shared/currency-select';
 import { apiFetch } from '@/lib/api/client';
 import { createExpenseSchema, type CreateExpenseInput } from '@/lib/validators/expenses';
 import { EXPENSE_CATEGORIES, PAYMENT_METHODS } from '@/lib/constants';
@@ -50,6 +52,7 @@ export function ExpenseFormDialog({ open, onOpenChange, expense }: ExpenseFormDi
     handleSubmit,
     setValue,
     reset,
+    watch,
     formState: { errors, isSubmitting },
   } = useForm<CreateExpenseInput>({
     resolver: zodResolver(createExpenseSchema),
@@ -215,20 +218,26 @@ export function ExpenseFormDialog({ open, onOpenChange, expense }: ExpenseFormDi
           <div className="grid grid-cols-2 gap-3">
             <div className="space-y-2">
               <Label htmlFor="amount">Amount *</Label>
-              <Input
+              <CurrencyInput
                 id="amount"
-                type="number"
-                step="0.01"
-                min="0"
-                placeholder="0.00"
-                {...register('amount', { valueAsNumber: true })}
+                value={watch('amount') ?? ''}
+                currency={watch('currency') ?? 'USD'}
+                onChange={(v) =>
+                  setValue('amount', v ?? Number.NaN, { shouldDirty: true, shouldValidate: true })
+                }
               />
               {errors.amount && <p className="text-xs text-destructive">{errors.amount.message}</p>}
             </div>
 
             <div className="space-y-2">
               <Label htmlFor="currency">Currency</Label>
-              <Input id="currency" placeholder="USD" maxLength={3} {...register('currency')} />
+              <CurrencySelect
+                id="currency"
+                value={watch('currency') ?? 'USD'}
+                onValueChange={(v) =>
+                  setValue('currency', v, { shouldDirty: true })
+                }
+              />
               {errors.currency && (
                 <p className="text-xs text-destructive">{errors.currency.message}</p>
               )}