Phase 6.3: SettingsForms on RHF + Zod

- SettingsCurrencies: RHF+Zod (code required max 3, name required, symbol required max 5)
- SettingsTaxes: RHF+Zod (name required, rate numeric 0-100, country max 2)
- SettingsSequences: RHF+Zod (name required, padding numeric 1-10)
- SettingsUsers: RHF+Zod (name required, email valid, password min 8)
- SettingsRoles: RHF+Zod for create form (name required)
- SettingsGroups: RHF+Zod for create form (name required, description optional)
- Error display under each field
- Preserved all existing functionality: CRUD, permissions, members
- Added 2 validation tests for SettingsCurrencies

frontend/src/pages/SettingsCurrencies.tsx

@@ -1,5 +1,8 @@
 import React, { useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
 import { apiGet, apiPost, apiPatch, apiDelete } from '@/api/client';
 
 interface Currency {
@@ -10,6 +13,16 @@ interface Currency {
   is_default: boolean;
 }
 
+// ── Zod Schema ──
+const currencySchema = z.object({
+  code: z.string().min(1, 'required').max(3, 'maxLength').toUpperCase(),
+  name: z.string().min(1, 'required'),
+  symbol: z.string().min(1, 'required').max(5, 'maxLength'),
+  is_default: z.boolean().default(false),
+});
+
+type CurrencyFormData = z.infer<typeof currencySchema>;
+
 export function SettingsCurrenciesPage() {
   const { t } = useTranslation();
   const [currencies, setCurrencies] = useState<Currency[]>([]);
@@ -17,7 +30,16 @@ export function SettingsCurrenciesPage() {
   const [error, setError] = useState<string | null>(null);
   const [showForm, setShowForm] = useState(false);
   const [editing, setEditing] = useState<Currency | null>(null);
-  const [formData, setFormData] = useState({ code: '', name: '', symbol: '', is_default: false });
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<CurrencyFormData>({
+    resolver: zodResolver(currencySchema),
+    defaultValues: { code: '', name: '', symbol: '', is_default: false },
+  });
 
   const fetchCurrencies = useCallback(async () => {
     setLoading(true);
@@ -34,17 +56,16 @@ export function SettingsCurrenciesPage() {
 
   React.useEffect(() => { fetchCurrencies(); }, [fetchCurrencies]);
 
-  const handleSave = async (e: React.FormEvent) => {
-    e.preventDefault();
+  const onSubmit = async (data: CurrencyFormData) => {
     try {
       if (editing) {
-        await apiPatch(`/currencies/${editing.id}`, formData);
+        await apiPatch(`/currencies/${editing.id}`, data);
       } else {
-        await apiPost('/currencies', formData);
+        await apiPost('/currencies', data);
       }
       setShowForm(false);
       setEditing(null);
-      setFormData({ code: '', name: '', symbol: '', is_default: false });
+      reset({ code: '', name: '', symbol: '', is_default: false });
       await fetchCurrencies();
     } catch (err: any) {
       setError(err.message || t('common.error'));
@@ -63,10 +84,23 @@ export function SettingsCurrenciesPage() {
 
   const handleEdit = (c: Currency) => {
     setEditing(c);
-    setFormData({ code: c.code, name: c.name, symbol: c.symbol, is_default: c.is_default });
+    reset({ code: c.code, name: c.name, symbol: c.symbol, is_default: c.is_default });
     setShowForm(true);
   };
 
+  const handleNew = () => {
+    setEditing(null);
+    reset({ code: '', name: '', symbol: '', is_default: false });
+    setShowForm(true);
+  };
+
+  const errorMsg = (key: string | undefined) => {
+    if (!key) return undefined;
+    if (key === 'required') return t('validation.required');
+    if (key === 'maxLength') return t('validation.maxLength', { count: key === 'maxLength' ? 5 : 3 });
+    return key;
+  };
+
   if (loading) return <div className="text-secondary-500">{t('common.loading')}</div>;
 
   return (
@@ -74,7 +108,7 @@ export function SettingsCurrenciesPage() {
       <div className="flex items-center justify-between">
         <h1 className="text-2xl font-bold text-secondary-900">{t('currencies.title')}</h1>
         <button
-          onClick={() => { setEditing(null); setFormData({ code: '', name: '', symbol: '', is_default: false }); setShowForm(true); }}
+          onClick={handleNew}
           className="px-4 py-2 text-sm font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700"
         >
           {t('currencies.add')}
@@ -84,28 +118,31 @@ export function SettingsCurrenciesPage() {
       {error && <div className="p-3 text-sm text-red-700 bg-red-50 rounded-lg">{error}</div>}
 
       {showForm && (
-        <form onSubmit={handleSave} className="p-4 border border-secondary-200 rounded-lg space-y-3">
+        <form onSubmit={handleSubmit(onSubmit)} className="p-4 border border-secondary-200 rounded-lg space-y-3">
           <div className="grid grid-cols-2 gap-3">
             <div>
               <label className="block text-sm font-medium text-secondary-700">{t('currencies.code')}</label>
-              <input type="text" value={formData.code} onChange={(e) => 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" />
+              <input type="text" {...register('code')} maxLength={3} 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" />
+              {errors.code && <p className="text-xs text-danger-600 mt-1">{errorMsg(errors.code.message)}</p>}
             </div>
             <div>
               <label className="block text-sm font-medium text-secondary-700">{t('currencies.symbol')}</label>
-              <input type="text" value={formData.symbol} onChange={(e) => 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" />
+              <input type="text" {...register('symbol')} maxLength={5} className="mt-1 block w-full rounded-md border border-secondary-300 px-3 py-1.5 text-sm" />
+              {errors.symbol && <p className="text-xs text-danger-600 mt-1">{errorMsg(errors.symbol.message)}</p>}
             </div>
           </div>
           <div>
             <label className="block text-sm font-medium text-secondary-700">{t('currencies.name')}</label>
-            <input type="text" value={formData.name} onChange={(e) => 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" />
+            <input type="text" {...register('name')} className="mt-1 block w-full rounded-md border border-secondary-300 px-3 py-1.5 text-sm" />
+            {errors.name && <p className="text-xs text-danger-600 mt-1">{errorMsg(errors.name.message)}</p>}
           </div>
           <label className="flex items-center gap-2 text-sm font-medium text-secondary-700">
-            <input type="checkbox" checked={formData.is_default} onChange={(e) => setFormData({ ...formData, is_default: e.target.checked })} />
+            <input type="checkbox" {...register('is_default')} />
             {t('currencies.isDefault')}
           </label>
           <div className="flex justify-end gap-2">
             <button type="button" onClick={() => { setShowForm(false); setEditing(null); }} className="px-3 py-1.5 text-sm font-medium text-secondary-700 bg-secondary-100 rounded-lg hover:bg-secondary-200">{t('common.cancel')}</button>
-            <button type="submit" className="px-3 py-1.5 text-sm font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700">{t('common.save')}</button>
+            <button type="submit" disabled={isSubmitting} className="px-3 py-1.5 text-sm font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700">{t('common.save')}</button>
           </div>
         </form>
       )}