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/SettingsSequences.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 Sequence {
@@ -10,6 +13,15 @@ interface Sequence {
   padding: number;
 }
 
+// ── Zod Schema ──
+const sequenceSchema = z.object({
+  name: z.string().min(1, 'required'),
+  prefix: z.string().optional().default(''),
+  padding: z.coerce.number().int().min(1, 'invalidNumber').max(10, 'invalidNumber'),
+});
+
+type SequenceFormData = z.infer<typeof sequenceSchema>;
+
 export function SettingsSequencesPage() {
   const { t } = useTranslation();
   const [sequences, setSequences] = useState<Sequence[]>([]);
@@ -17,7 +29,16 @@ export function SettingsSequencesPage() {
   const [error, setError] = useState<string | null>(null);
   const [showForm, setShowForm] = useState(false);
   const [editing, setEditing] = useState<Sequence | null>(null);
-  const [formData, setFormData] = useState({ name: '', prefix: '', padding: 4 });
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<SequenceFormData>({
+    resolver: zodResolver(sequenceSchema),
+    defaultValues: { name: '', prefix: '', padding: 4 },
+  });
 
   const fetchSequences = useCallback(async () => {
     setLoading(true);
@@ -34,17 +55,16 @@ export function SettingsSequencesPage() {
 
   React.useEffect(() => { fetchSequences(); }, [fetchSequences]);
 
-  const handleSave = async (e: React.FormEvent) => {
-    e.preventDefault();
+  const onSubmit = async (data: SequenceFormData) => {
     try {
       if (editing) {
-        await apiPatch(`/sequences/${editing.id}`, formData);
+        await apiPatch(`/sequences/${editing.id}`, data);
       } else {
-        await apiPost('/sequences', formData);
+        await apiPost('/sequences', data);
       }
       setShowForm(false);
       setEditing(null);
-      setFormData({ name: '', prefix: '', padding: 4 });
+      reset({ name: '', prefix: '', padding: 4 });
       await fetchSequences();
     } catch (err: any) {
       setError(err.message || t('common.error'));
@@ -63,10 +83,23 @@ export function SettingsSequencesPage() {
 
   const handleEdit = (seq: Sequence) => {
     setEditing(seq);
-    setFormData({ name: seq.name, prefix: seq.prefix, padding: seq.padding });
+    reset({ name: seq.name, prefix: seq.prefix, padding: seq.padding });
     setShowForm(true);
   };
 
+  const handleNew = () => {
+    setEditing(null);
+    reset({ name: '', prefix: '', padding: 4 });
+    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');
+    return key;
+  };
+
   if (loading) return <div className="text-secondary-500">{t('common.loading')}</div>;
 
   return (
@@ -74,7 +107,7 @@ export function SettingsSequencesPage() {
       <div className="flex items-center justify-between">
         <h1 className="text-2xl font-bold text-secondary-900">{t('sequences.title')}</h1>
         <button
-          onClick={() => { setEditing(null); setFormData({ name: '', prefix: '', padding: 4 }); 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('sequences.add')}
@@ -84,24 +117,27 @@ export function SettingsSequencesPage() {
       {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('sequences.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('sequences.prefix')}</label>
-              <input type="text" value={formData.prefix} onChange={(e) => setFormData({ ...formData, prefix: e.target.value })} placeholder="RE-" className="mt-1 block w-full rounded-md border border-secondary-300 px-3 py-1.5 text-sm" />
+              <input type="text" {...register('prefix')} placeholder="RE-" className="mt-1 block w-full rounded-md border border-secondary-300 px-3 py-1.5 text-sm" />
+              {errors.prefix && <p className="text-xs text-danger-600 mt-1">{errorMsg(errors.prefix.message)}</p>}
             </div>
             <div>
               <label className="block text-sm font-medium text-secondary-700">{t('sequences.padding')}</label>
-              <input type="number" min={1} max={10} value={formData.padding} onChange={(e) => setFormData({ ...formData, padding: parseInt(e.target.value) || 4 })} required className="mt-1 block w-full rounded-md border border-secondary-300 px-3 py-1.5 text-sm" />
+              <input type="number" min={1} max={10} {...register('padding')} className="mt-1 block w-full rounded-md border border-secondary-300 px-3 py-1.5 text-sm" />
+              {errors.padding && <p className="text-xs text-danger-600 mt-1">{errorMsg(errors.padding.message)}</p>}
             </div>
           </div>
           <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>
       )}