diff --git a/frontend/src/pages/SettingsCurrencies.tsx b/frontend/src/pages/SettingsCurrencies.tsx new file mode 100644 index 0000000..7694b5f --- /dev/null +++ b/frontend/src/pages/SettingsCurrencies.tsx @@ -0,0 +1,142 @@ +import React, { useState, useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; +import { apiGet, apiPost, apiPatch, apiDelete } from '@/api/client'; + +interface Currency { + id: string; + code: string; + name: string; + symbol: string; + is_default: boolean; +} + +export function SettingsCurrenciesPage() { + const { t } = useTranslation(); + const [currencies, setCurrencies] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + const [showForm, setShowForm] = useState(false); + const [editing, setEditing] = useState(null); + const [formData, setFormData] = useState({ code: '', name: '', symbol: '', is_default: false }); + + const fetchCurrencies = useCallback(async () => { + setLoading(true); + setError(null); + try { + const data = await apiGet<{ items: Currency[]; total: number }>('/currencies'); + setCurrencies(data.items); + } catch (err: any) { + setError(err.message || t('common.error')); + } finally { + setLoading(false); + } + }, [t]); + + React.useEffect(() => { fetchCurrencies(); }, [fetchCurrencies]); + + const handleSave = async (e: React.FormEvent) => { + e.preventDefault(); + try { + if (editing) { + await apiPatch(`/currencies/${editing.id}`, formData); + } else { + await apiPost('/currencies', formData); + } + setShowForm(false); + setEditing(null); + setFormData({ code: '', name: '', symbol: '', is_default: false }); + await fetchCurrencies(); + } catch (err: any) { + setError(err.message || t('common.error')); + } + }; + + const handleDelete = async (id: string) => { + if (!window.confirm(t('currencies.confirmDelete'))) return; + try { + await apiDelete(`/currencies/${id}`); + await fetchCurrencies(); + } catch (err: any) { + setError(err.message || t('common.error')); + } + }; + + const handleEdit = (c: Currency) => { + setEditing(c); + setFormData({ code: c.code, name: c.name, symbol: c.symbol, is_default: c.is_default }); + setShowForm(true); + }; + + if (loading) return
{t('common.loading')}
; + + return ( +
+
+

{t('currencies.title')}

+ +
+ + {error &&
{error}
} + + {showForm && ( +
+
+
+ + setFormData({ ...formData, code: e.target.value.toUpperCase() })} maxLength={3} required disabled={!!editing} className="mt-1 block w-full rounded-md border border-secondary-300 px-3 py-1.5 text-sm disabled:bg-secondary-100" /> +
+
+ + setFormData({ ...formData, symbol: e.target.value })} maxLength={5} required className="mt-1 block w-full rounded-md border border-secondary-300 px-3 py-1.5 text-sm" /> +
+
+
+ + setFormData({ ...formData, name: e.target.value })} required className="mt-1 block w-full rounded-md border border-secondary-300 px-3 py-1.5 text-sm" /> +
+ +
+ + +
+
+ )} + +
+ + + + + + + + + + + + {currencies.map((c) => ( + + + + + + + + ))} + +
{t('currencies.code')}{t('currencies.name')}{t('currencies.symbol')}{t('currencies.isDefault')}
{c.code}{c.name}{c.symbol}{c.is_default && } + + +
+
+
+ ); +}