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/SettingsTaxes.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 TaxRate {
@@ -10,6 +13,16 @@ interface TaxRate {
   country: string | null;
 }
 
+// ── Zod Schema ──
+const taxSchema = z.object({
+  name: z.string().min(1, 'required'),
+  rate: z.coerce.number().min(0, 'invalidNumber').max(100, 'invalidNumber'),
+  is_default: z.boolean().default(false),
+  country: z.string().max(2, 'maxLength').optional().default(''),
+});
+
+type TaxFormData = z.infer<typeof taxSchema>;
+
 export function SettingsTaxesPage() {
   const { t } = useTranslation();
   const [taxes, setTaxes] = useState<TaxRate[]>([]);
@@ -17,7 +30,16 @@ export function SettingsTaxesPage() {
   const [error, setError] = useState<string | null>(null);
   const [showForm, setShowForm] = useState(false);
   const [editing, setEditing] = useState<TaxRate | null>(null);
-  const [formData, setFormData] = useState({ name: '', rate: 0, is_default: false, country: '' });
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<TaxFormData>({
+    resolver: zodResolver(taxSchema),
+    defaultValues: { name: '', rate: 0, is_default: false, country: '' },
+  });
 
   const fetchTaxes = useCallback(async () => {
     setLoading(true);
@@ -34,10 +56,9 @@ export function SettingsTaxesPage() {
 
   React.useEffect(() => { fetchTaxes(); }, [fetchTaxes]);
 
-  const handleSave = async (e: React.FormEvent) => {
-    e.preventDefault();
+  const onSubmit = async (data: TaxFormData) => {
     try {
-      const payload = { ...formData, country: formData.country || null };
+      const payload = { ...data, country: data.country || null };
       if (editing) {
         await apiPatch(`/taxes/${editing.id}`, payload);
       } else {
@@ -45,7 +66,7 @@ export function SettingsTaxesPage() {
       }
       setShowForm(false);
       setEditing(null);
-      setFormData({ name: '', rate: 0, is_default: false, country: '' });
+      reset({ name: '', rate: 0, is_default: false, country: '' });
       await fetchTaxes();
     } catch (err: any) {
       setError(err.message || t('common.error'));
@@ -64,10 +85,24 @@ export function SettingsTaxesPage() {
 
   const handleEdit = (tax: TaxRate) => {
     setEditing(tax);
-    setFormData({ name: tax.name, rate: tax.rate, is_default: tax.is_default, country: tax.country || '' });
+    reset({ name: tax.name, rate: tax.rate, is_default: tax.is_default, country: tax.country || '' });
     setShowForm(true);
   };
 
+  const handleNew = () => {
+    setEditing(null);
+    reset({ name: '', rate: 0, is_default: false, country: '' });
+    setShowForm(true);
+  };
+
+  const errorMsg = (key: string | undefined) => {
+    if (!key) return undefined;
+    if (key === 'required') return t('validation.required');
+    if (key === 'invalidNumber') return t('validation.invalidNumber', 'Invalid number');
+    if (key === 'maxLength') return t('validation.maxLength', { count: 2 });
+    return key;
+  };
+
   if (loading) return <div className="text-secondary-500">{t('common.loading')}</div>;
 
   return (
@@ -75,7 +110,7 @@ export function SettingsTaxesPage() {
       <div className="flex items-center justify-between">
         <h1 className="text-2xl font-bold text-secondary-900">{t('taxes.title')}</h1>
         <button
-          onClick={() => { setEditing(null); setFormData({ name: '', rate: 0, is_default: false, country: '' }); 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('taxes.add')}
@@ -85,28 +120,31 @@ export function SettingsTaxesPage() {
       {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>
             <label className="block text-sm font-medium text-secondary-700">{t('taxes.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>
           <div className="grid grid-cols-2 gap-3">
             <div>
               <label className="block text-sm font-medium text-secondary-700">{t('taxes.rate')} (%)</label>
-              <input type="number" step="0.01" value={formData.rate} onChange={(e) => setFormData({ ...formData, rate: parseFloat(e.target.value) || 0 })} required className="mt-1 block w-full rounded-md border border-secondary-300 px-3 py-1.5 text-sm" />
+              <input type="number" step="0.01" {...register('rate')} className="mt-1 block w-full rounded-md border border-secondary-300 px-3 py-1.5 text-sm" />
+              {errors.rate && <p className="text-xs text-danger-600 mt-1">{errorMsg(errors.rate.message)}</p>}
             </div>
             <div>
               <label className="block text-sm font-medium text-secondary-700">{t('taxes.country')}</label>
-              <input type="text" value={formData.country} onChange={(e) => setFormData({ ...formData, country: e.target.value })} maxLength={2} placeholder="DE" className="mt-1 block w-full rounded-md border border-secondary-300 px-3 py-1.5 text-sm" />
+              <input type="text" {...register('country')} maxLength={2} placeholder="DE" className="mt-1 block w-full rounded-md border border-secondary-300 px-3 py-1.5 text-sm" />
+              {errors.country && <p className="text-xs text-danger-600 mt-1">{errorMsg(errors.country.message)}</p>}
             </div>
           </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('taxes.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>
       )}