Amount *
-
+ setValue('amount', v ?? Number.NaN, { shouldDirty: true, shouldValidate: true })
+ }
/>
{errors.amount &&
{errors.amount.message}
}
Currency
-
+
+ setValue('currency', v, { shouldDirty: true })
+ }
+ />
{errors.currency && (
{errors.currency.message}
)}
diff --git a/src/components/invoices/invoice-card.tsx b/src/components/invoices/invoice-card.tsx
index f1f1282b..998f851a 100644
--- a/src/components/invoices/invoice-card.tsx
+++ b/src/components/invoices/invoice-card.tsx
@@ -22,6 +22,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 { InvoiceRow } from './invoice-columns';
const STATUS_COLORS: Record = {
@@ -48,13 +49,7 @@ const STATUS_ACCENT: Record = {
cancelled: 'bg-slate-200',
};
-function formatAmount(total: string, currency: string): string {
- try {
- return new Intl.NumberFormat('en', { style: 'currency', currency }).format(Number(total));
- } catch {
- return `${currency} ${total}`;
- }
-}
+const formatAmount = (total: string, currency: string) => formatCurrency(total, currency);
interface InvoiceCardProps {
invoice: InvoiceRow;
diff --git a/src/components/invoices/invoice-line-items.tsx b/src/components/invoices/invoice-line-items.tsx
index c52529d4..47081060 100644
--- a/src/components/invoices/invoice-line-items.tsx
+++ b/src/components/invoices/invoice-line-items.tsx
@@ -5,6 +5,8 @@ import { Plus, Trash2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
+import { CurrencyInput } from '@/components/shared/currency-input';
+import { formatCurrency } from '@/lib/utils/currency';
interface LineItem {
description: string;
@@ -14,10 +16,13 @@ interface LineItem {
interface InvoiceLineItemsProps {
name?: string;
+ /** Currency code from the parent invoice form (drives both the
+ * unit-price input symbol and the subtotal formatting). */
+ currency?: string;
}
-export function InvoiceLineItems({ name = 'lineItems' }: InvoiceLineItemsProps) {
- const { register, watch } = useFormContext();
+export function InvoiceLineItems({ name = 'lineItems', currency = 'USD' }: InvoiceLineItemsProps) {
+ const { register, setValue, watch } = useFormContext();
const { fields, append, remove } = useFieldArray({ name });
const lineItems: LineItem[] = watch(name) ?? [];
@@ -66,22 +71,18 @@ export function InvoiceLineItems({ name = 'lineItems' }: InvoiceLineItemsProps)
/>
-
-
- {lineTotal.toLocaleString('en-US', {
- minimumFractionDigits: 2,
- maximumFractionDigits: 2,
- })}
-
+ {formatCurrency(lineTotal, currency)}
{fields.length > 0 && (
- Subtotal:{' '}
-
- {subtotal.toLocaleString('en-US', {
- minimumFractionDigits: 2,
- maximumFractionDigits: 2,
- })}
-
+ Subtotal: {formatCurrency(subtotal, currency)}
)}
diff --git a/src/components/shared/currency-input.tsx b/src/components/shared/currency-input.tsx
new file mode 100644
index 00000000..8ef4fd2b
--- /dev/null
+++ b/src/components/shared/currency-input.tsx
@@ -0,0 +1,66 @@
+'use client';
+
+import * as React from 'react';
+
+import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
+import { currencySymbol } from '@/lib/utils/currency';
+
+interface CurrencyInputProps
+ extends Omit
, 'value' | 'onChange' | 'type'> {
+ /** Controlled raw numeric value. `null` / `undefined` render empty. */
+ value: number | string | null | undefined;
+ /** Fires with a raw number (or `null` if cleared). */
+ onChange: (value: number | null) => void;
+ /** ISO currency code; renders as a leading symbol prefix. */
+ currency?: string;
+ className?: string;
+}
+
+/**
+ * Numeric input pre-decorated with a currency symbol. The display
+ * value is the raw number the user typed (we don't fight the keystroke
+ * cadence by re-formatting on every key) — formatted display lives in
+ * read-only contexts via `formatCurrency()`. This keeps form behaviour
+ * predictable while still scoping the input to a money field via the
+ * symbol prefix and the `decimal` inputMode.
+ */
+export const CurrencyInput = React.forwardRef(
+ ({ value, onChange, currency = 'USD', className, ...props }, ref) => {
+ const symbol = currencySymbol(currency);
+
+ const display =
+ value === null || value === undefined || value === '' ? '' : String(value);
+
+ return (
+
+
+ {symbol}
+
+
+ );
+ },
+);
+CurrencyInput.displayName = 'CurrencyInput';
diff --git a/src/components/shared/currency-select.tsx b/src/components/shared/currency-select.tsx
new file mode 100644
index 00000000..aede6a3e
--- /dev/null
+++ b/src/components/shared/currency-select.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '@/components/ui/select';
+import { SUPPORTED_CURRENCIES } from '@/lib/utils/currency';
+
+interface CurrencySelectProps {
+ value: string | undefined;
+ onValueChange: (value: string) => void;
+ disabled?: boolean;
+ id?: string;
+ className?: string;
+}
+
+/**
+ * Select dropdown over the curated `SUPPORTED_CURRENCIES` list. Replaces
+ * the free-text `
+
+
+
+ {SUPPORTED_CURRENCIES.map((c) => (
+
+ {c.symbol}
+ {c.code}
+ {c.label}
+
+ ))}
+
+
+ );
+}
diff --git a/src/lib/utils/currency.ts b/src/lib/utils/currency.ts
new file mode 100644
index 00000000..e0b22fcb
--- /dev/null
+++ b/src/lib/utils/currency.ts
@@ -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 = 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();
+}