Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 15 additions & 17 deletions app/frontend/src/components/forms/ConfigForm.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -12,23 +12,21 @@
});

import { config, type Config } from '$lib/stores/config';
import { listCurrencies } from '$lib/utils/currencies';

let localConfig: Config[] = $state([]);

const userLocale = navigator.language || 'en';

const currencyOptions = listCurrencies(userLocale);

const dateFormatOptions = [
{ value: 'dd/MM/yyyy', label: 'dd/MM/yyyy (e.g., 31/12/2000)' },
{ value: 'MM/dd/yyyy', label: 'MM/dd/yyyy (e.g., 12/25/2000)' },
{ value: 'yyyy-MM-dd', label: 'yyyy-MM-dd (e.g., 2000-12-31)' },
{ value: 'dd MMM, yyyy', label: 'dd MMM, yyyy (e.g., 31 Dec, 2000)' }
];

const currencyOptions = [
{ value: 'INR', label: 'INR (₹)' },
{ value: 'USD', label: 'USD ($)' },
{ value: 'EUR', label: 'EUR (€)' },
{ value: 'GBP', label: 'GBP (£)' }
];


const uomOptions = [
{ value: 'metric', label: 'Metric' },
{ value: 'imperial', label: 'Imperial' }
Expand Down Expand Up @@ -76,15 +74,15 @@
{/each}
</select>
{:else if item.key === 'currency'}
<select
id={item.key}
bind:value={item.value}
class="block w-full rounded-lg border border-gray-300 bg-gray-50 px-4 py-3 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none sm:text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100"
>
{#each currencyOptions as option}
<option value={option.value}>{option.label}</option>
{/each}
</select>
<select
id={item.key}
bind:value={item.value}
class="block w-full rounded-lg border border-gray-300 bg-gray-50 px-4 py-3 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none sm:text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100"
>
{#each currencyOptions as option}
<option value={option.value}>{option.label}</option>
{/each}
</select>
{:else if item.key === 'unitOfMeasure'}
<select
id={item.key}
Expand Down
51 changes: 51 additions & 0 deletions app/frontend/src/lib/utils/currencies.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
// Utility for currency listing/formatting using the Intl API.

interface CurrencyOption {
value: string; // ISO-4217 code (e.g., "EUR")
label: string; // Localized name with code and symbol
symbol: string; // Display symbol (€, $, …)
}

const FALLBACK_CURRENCIES = [
"USD","EUR","GBP","JPY","CNY","INR","AUD","CAD","CHF","HKD","SEK","NOK","DKK",
"PLN","CZK","HUF","TRY","BRL","ZAR","MXN","AED","SAR","ILS","KRW","TWD","SGD",
"NZD","THB","MYR","IDR","PHP","CLP","COP","ARS","PEN","VND","RON","BGN","HRK",
"ISK","KWD","QAR","BHD","RUB","UAH","GHS","NGN","KES"
];

function getSupportedCurrencyCodes(): string[] {
// Prefer runtime-supported values; fall back to a curated list.
if (typeof Intl.supportedValuesOf === "function") {
return Intl.supportedValuesOf("currency") as string[];
}
return [...FALLBACK_CURRENCIES];
}


export function listCurrencies(locale = "en"): CurrencyOption[] {
const codes = getSupportedCurrencyCodes();

const dn = new Intl.DisplayNames(locale, { type: "currency" });
const safeName = (c: string) => (dn.of(c) ?? c);

return codes
.map((code) => {
const symbol = extractSymbol(code, locale);
const name = safeName(code);
return {
value: code,
label: `${name} (${code}) – ${symbol}`,
symbol
};
})
.sort((a, b) => a.label.localeCompare(b.label, locale));
}

function extractSymbol(currency: string, locale = "en"): string {
const nf = new Intl.NumberFormat(locale, { style: "currency", currency });
const parts = nf.formatToParts(0);
const sym = parts.find((p) => p.type === "currency")?.value;
return (sym ?? nf.format(0).replace(/[\d\s.,\-+]/g, "").trim()) || currency;
}