fix(F6.1): add explicit audited inspection cancellation form

web-v2/src/pages/InspectionVisitEditorF4Page.tsx

@@ -109,6 +109,8 @@ export function InspectionVisitEditorF4Page() {
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState('');
   const [success, setSuccess] = useState('');
+  const [showCancelForm, setShowCancelForm] = useState(false);
+  const [cancelReason, setCancelReason] = useState('');
 
   const applyVisit = (value: InspectionVisit, syncForm = true) => {
     setVisit(value);
@@ -287,7 +289,7 @@ export function InspectionVisitEditorF4Page() {
     finally { setBusy(false); }
   };
 
-  const lifecycleAction = async (action: 'PLAN' | 'UNPLAN' | 'CANCEL') => {
+  const lifecycleAction = async (action: 'PLAN' | 'UNPLAN') => {
     if (!id) return;
     setBusy(true); setError(''); setSuccess('');
     try {
@@ -295,23 +297,38 @@ export function InspectionVisitEditorF4Page() {
       if (action === 'PLAN') {
         updated = await planInspectionVisit(id);
         setSuccess('Inspección planificada. Ya puede iniciarse desde la APK.');
-      } else if (action === 'UNPLAN') {
+      } else {
         updated = await unplanInspectionVisit(id);
         setSuccess('La Inspección volvió a borrador para corregir la planificación.');
-      } else {
-        const reason = window.prompt('Indicá el motivo de cancelación (mínimo 10 caracteres):')?.trim() ?? '';
-        if (reason.length < 10) {
-          if (reason) setError('El motivo debe tener al menos 10 caracteres.');
-          return;
-        }
-        updated = await cancelInspectionVisit(id, reason);
-        setSuccess('Inspección cancelada con motivo auditado.');
       }
       applyVisit(updated);
     } catch (requestError) { setError(errorMessage(requestError)); }
     finally { setBusy(false); }
   };
 
+  const cancelCurrentVisit = async (event: FormEvent) => {
+    event.preventDefault();
+    if (!id) return;
+    const reason = cancelReason.trim();
+    if (reason.length < 10) {
+      setError('El motivo de cancelación debe tener al menos 10 caracteres.');
+      return;
+    }
+    if (reason.length > 500) {
+      setError('El motivo de cancelación no puede superar los 500 caracteres.');
+      return;
+    }
+    setBusy(true); setError(''); setSuccess('');
+    try {
+      const updated = await cancelInspectionVisit(id, reason);
+      applyVisit(updated);
+      setCancelReason('');
+      setShowCancelForm(false);
+      setSuccess('Inspección cancelada. El motivo quedó registrado y auditado.');
+    } catch (requestError) { setError(errorMessage(requestError)); }
+    finally { setBusy(false); }
+  };
+
   if (loading) return <LoadingBlock label="Cargando inspección…" />;
 
   return <section className="survey-editor inspection-editor">
@@ -353,7 +370,9 @@ export function InspectionVisitEditorF4Page() {
 
     {visit && <InspectionActsPanel visit={visit} />}
 
-    {visit && <article className="panel survey-status-actions"><div><strong>Flujo de la Inspección</strong><p>La oficina planifica. El inicio y cierre operativo se realizan desde la APK. Una Inspección no puede cerrarse hasta que todas sus Actas estén selladas.</p></div><div className="form-actions">{canManage && visit.status === 'DRAFT' && <button type="button" className="button primary" disabled={busy} onClick={() => void lifecycleAction('PLAN')}>Confirmar planificación</button>}{canManage && visit.status === 'PLANNED' && <button type="button" className="button secondary" disabled={busy} onClick={() => void lifecycleAction('UNPLAN')}>Volver a borrador</button>}{canManage && ['DRAFT', 'PLANNED'].includes(visit.status) && <button type="button" className="button danger-outline" disabled={busy} onClick={() => void lifecycleAction('CANCEL')}>Cancelar</button>}</div></article>}
+    {visit && <article className="panel survey-status-actions"><div><strong>Flujo de la Inspección</strong><p>La oficina planifica. El inicio y cierre operativo se realizan desde la APK. Una Inspección no puede cerrarse hasta que todas sus Actas estén selladas.</p></div><div className="form-actions">{canManage && visit.status === 'DRAFT' && <button type="button" className="button primary" disabled={busy} onClick={() => void lifecycleAction('PLAN')}>Confirmar planificación</button>}{canManage && visit.status === 'PLANNED' && <button type="button" className="button secondary" disabled={busy} onClick={() => void lifecycleAction('UNPLAN')}>Volver a borrador</button>}{canManage && ['DRAFT', 'PLANNED', 'IN_PROGRESS'].includes(visit.status) && <button type="button" className="button danger-outline" disabled={busy} onClick={() => { setError(''); setSuccess(''); setShowCancelForm(true); }}>Cancelar inspección</button>}</div></article>}
+
+    {visit && showCancelForm && ['DRAFT', 'PLANNED', 'IN_PROGRESS'].includes(visit.status) && <form className="panel form-panel" onSubmit={cancelCurrentVisit}><div className="panel-heading"><div><span className="eyebrow">CANCELACIÓN</span><h2>Cancelar inspección</h2><p className="section-copy">La cancelación es definitiva y queda auditada. No se permite si la Inspección ya tiene un Acta sellada.</p></div></div><label className="field"><span>Motivo de cancelación</span><textarea value={cancelReason} onChange={(event) => setCancelReason(event.target.value)} minLength={10} maxLength={500} rows={4} placeholder="Explicá el motivo de la cancelación…" required /><small className="muted">{cancelReason.trim().length}/500 · mínimo 10 caracteres</small></label><div className="form-actions"><button type="button" className="button secondary" disabled={busy} onClick={() => { setShowCancelForm(false); setCancelReason(''); }}>Volver</button><button type="submit" className="button danger-outline" disabled={busy || cancelReason.trim().length < 10 || cancelReason.trim().length > 500}>{busy ? 'Cancelando…' : 'Confirmar cancelación'}</button></div></form>}
 
     {visit?.status === 'PLANNED' && <div className="temporal-notice"><Icon name="clipboard" /><p><strong>Planificación lista.</strong> El Inspector asignado debe iniciar la Inspección desde la APK.</p></div>}
     {visit?.status === 'IN_PROGRESS' && <div className="temporal-notice"><Icon name="clipboard" /><p><strong>Inspección en curso.</strong> Actas, Hallazgos, firmas y cierre se registran desde la APK.</p></div>}