ya se pueden eliminar las filas de las plantillas

frontend/src/components/GastoSheet.jsx

@@ -1,6 +1,8 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo, useRef } from 'react';
 import { sheetsApi } from '../api/client';
 import { useAuth } from '../context/AuthContext';
+import { useSheetAutoSave } from '../hooks/useSheetAutoSave';
+import SaveStatus from './SaveStatus';
 import { emptyGastoRow, formatMoney } from '../utils/calc';
 
 export default function GastoSheet({ sheetType, title, defaultClasificacion }) {
@@ -8,28 +10,48 @@ export default function GastoSheet({ sheetType, title, defaultClasificacion }) {
   const editable = canEdit(sheetType);
   const [rows, setRows] = useState([emptyGastoRow()]);
   const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-  const [message, setMessage] = useState(null);
-  const [error, setError] = useState(null);
+  const [loadError, setLoadError] = useState(null);
+  const skipNotifyRef = useRef(false);
+
+  const { status, error: saveError, setReady, notifyChange, saveNow } = useSheetAutoSave({
+    enabled: editable,
+    sheetType,
+  });
 
   useEffect(() => {
+    let active = true;
+    setLoading(true);
+    setLoadError(null);
+    setReady(false);
+
     (async () => {
       try {
         const data = await sheetsApi.get(sheetType);
+        if (!active) return;
         const loaded = data.rows?.length ? data.rows : [emptyGastoRow()];
-        setRows(
-          loaded.map((r) => ({
-            ...r,
-            clasificacion: r.clasificacion || defaultClasificacion,
-          }))
-        );
+        skipNotifyRef.current = true;
+        setRows(loaded.map((r) => ({ ...r, clasificacion: r.clasificacion || defaultClasificacion })));
+        setReady(true);
       } catch (e) {
-        setError(e.message);
+        if (active) setLoadError(e.message);
       } finally {
-        setLoading(false);
+        if (active) setLoading(false);
       }
     })();
-  }, [sheetType, defaultClasificacion]);
+
+    return () => {
+      active = false;
+    };
+  }, [sheetType, defaultClasificacion, setReady]);
+
+  useEffect(() => {
+    if (loading || !editable) return;
+    if (skipNotifyRef.current) {
+      skipNotifyRef.current = false;
+      return;
+    }
+    notifyChange({ rows });
+  }, [rows, loading, editable, notifyChange]);
 
   const total = useMemo(
     () => rows.reduce((acc, r) => acc + (Number(r.monto) || 0), 0),
@@ -42,22 +64,22 @@ export default function GastoSheet({ sheetType, title, defaultClasificacion }) {
 
   const addRow = () =>
     setRows((prev) => [...prev, { ...emptyGastoRow(), clasificacion: defaultClasificacion }]);
-  const removeRow = (index) => setRows((prev) => (prev.length > 1 ? prev.filter((_, i) => i !== index) : prev));
 
-  const handleSave = async () => {
-    if (!editable) return;
-    setSaving(true);
-    setMessage(null);
-    setError(null);
-    try {
-      const data = await sheetsApi.save(sheetType, { rows });
-      setRows(data.rows?.length ? data.rows : [{ ...emptyGastoRow(), clasificacion: defaultClasificacion }]);
-      setMessage('Planilla guardada correctamente');
-    } catch (e) {
-      setError(e.message);
-    } finally {
-      setSaving(false);
-    }
+  const removeRow = (index) => {
+    skipNotifyRef.current = true;
+    const next = rows.filter((_, i) => i !== index);
+    const result =
+      next.length > 0 ? next : [{ ...emptyGastoRow(), clasificacion: defaultClasificacion }];
+    setRows(result);
+    saveNow({ rows: result });
+  };
+
+  const clearSheet = () => {
+    if (!window.confirm('¿Vaciar toda la planilla? Se eliminarán todas las filas.')) return;
+    const blank = [{ ...emptyGastoRow(), clasificacion: defaultClasificacion }];
+    skipNotifyRef.current = true;
+    setRows(blank);
+    saveNow({ rows: blank });
   };
 
   if (loading) return <p className="loading">Cargando planilla…</p>;
@@ -65,8 +87,8 @@ export default function GastoSheet({ sheetType, title, defaultClasificacion }) {
   return (
     <div>
       <h1 className="page-title">{title}</h1>
-      {error && <div className="alert alert-error">{error}</div>}
-      {message && <div className="alert alert-success">{message}</div>}
+      {loadError && <div className="alert alert-error">{loadError}</div>}
+      {editable && <SaveStatus status={status} error={saveError} />}
       {!editable && <div className="alert alert-info">Solo lectura</div>}
 
       <div className="toolbar">
@@ -75,8 +97,11 @@ export default function GastoSheet({ sheetType, title, defaultClasificacion }) {
             <button type="button" className="btn btn-primary btn-icon" onClick={addRow}>
               +
             </button>
-            <button type="button" className="btn btn-primary" onClick={handleSave} disabled={saving}>
-              {saving ? 'Guardando…' : 'Guardar planilla'}
+            <button type="button" className="btn btn-secondary" onClick={() => saveNow({ rows })} disabled={status === 'saving'}>
+              Guardar ahora
+            </button>
+            <button type="button" className="btn btn-danger" onClick={clearSheet}>
+              Vaciar planilla
             </button>
           </>
         )}
@@ -122,7 +147,16 @@ export default function GastoSheet({ sheetType, title, defaultClasificacion }) {
                 </td>
                 {editable && (
                   <td>
-                    <button type="button" className="btn btn-danger btn-icon" onClick={() => removeRow(i)}>
+                    <button
+                      type="button"
+                      className="btn btn-danger btn-icon"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        removeRow(i);
+                      }}
+                      title="Eliminar fila"
+                    >
                       ×
                     </button>
                   </td>