Mejora 1: Implementado sistema de notificaciones global con Snackbar y modal de confirmación.

frontend/src/components/Dashboard.tsx

@@ -1,8 +1,5 @@
 import { useEffect, useState, useCallback } from 'react';
-import {
-  Box, Button, Stack, Chip, CircularProgress,
-  Accordion, AccordionSummary, AccordionDetails, Typography
-} from '@mui/material';
+import { Box, Button, Stack, Chip, CircularProgress, Accordion, AccordionSummary, AccordionDetails, Typography } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import SyncIcon from '@mui/icons-material/Sync';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
@@ -10,11 +7,13 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import type { Titular, Configuracion } from '../types';
 import * as api from '../services/apiService';
 import { useSignalR } from '../hooks/useSignalR';
+import { useNotification } from '../hooks/useNotification'; // <-- Importar hook de notificación
 import FormularioConfiguracion from './FormularioConfiguracion';
 import TablaTitulares from './TablaTitulares';
 import AddTitularModal from './AddTitularModal';
 import EditarTitularModal from './EditarTitularModal';
 import { PowerSwitch } from './PowerSwitch';
+import ConfirmationModal from './ConfirmationModal';
 
 const Dashboard = () => {
   const [titulares, setTitulares] = useState<Titular[]>([]);
@@ -23,6 +22,11 @@ const Dashboard = () => {
   const [isGeneratingCsv, setIsGeneratingCsv] = useState(false);
   const [titularAEditar, setTitularAEditar] = useState<Titular | null>(null);
 
+  // Estado para el modal de confirmación
+  const [confirmState, setConfirmState] = useState<{ open: boolean; onConfirm: (() => void) | null }>({ open: false, onConfirm: null });
+
+  const { showNotification } = useNotification();
+
   const onTitularesActualizados = useCallback((titularesActualizados: Titular[]) => {
     setTitulares(titularesActualizados);
   }, []);
@@ -75,20 +79,27 @@ const Dashboard = () => {
     }
   };
 
-  const handleDelete = async (id: number) => {
-    if (window.confirm('¿Estás seguro de que quieres eliminar este titular?')) {
+  const handleDelete = (id: number) => {
+    const onConfirm = async () => {
       try {
         await api.eliminarTitular(id);
+        showNotification('Titular eliminado correctamente', 'success');
       } catch (err) {
+        showNotification('Error al eliminar el titular', 'error');
         console.error("Error al eliminar:", err);
+      } finally {
+        setConfirmState({ open: false, onConfirm: null }); // Cierra el modal
       }
-    }
+    };
+    setConfirmState({ open: true, onConfirm });
   };
 
   const handleAdd = async (texto: string) => {
     try {
       await api.crearTitularManual(texto);
+      showNotification('Titular manual añadido', 'success');
     } catch (err) {
+      showNotification('Error al añadir el titular', 'error');
       console.error("Error al añadir titular:", err);
     }
   };
@@ -109,8 +120,10 @@ const Dashboard = () => {
     setIsGeneratingCsv(true);
     try {
       await api.generarCsvManual();
+      showNotification('CSV generado manualmente', 'success');
     } catch (error) {
-      console.error("Error al generar CSV manually", error);
+      showNotification('Error al generar el CSV', 'error');
+      console.error("Error al generar CSV manualmente", error);
     } finally {
       setIsGeneratingCsv(false);
     }
@@ -119,7 +132,9 @@ const Dashboard = () => {
   const handleSaveEdit = async (id: number, texto: string, viñeta: string) => {
     try {
       await api.actualizarTitular(id, { texto, viñeta: viñeta || null });
+      showNotification('Titular actualizado', 'success');
     } catch (err) {
+      showNotification('Error al guardar los cambios', 'error');
       console.error("Error al guardar cambios:", err);
     }
   };
@@ -195,6 +210,13 @@ const Dashboard = () => {
         onSave={handleSaveEdit}
         titular={titularAEditar}
       />
+      <ConfirmationModal
+        open={confirmState.open}
+        onClose={() => setConfirmState({ open: false, onConfirm: null })}
+        onConfirm={() => confirmState.onConfirm?.()}
+        title="Confirmar Eliminación"
+        message="¿Estás seguro de que quieres eliminar este titular? Esta acción no se puede deshacer."
+      />
     </>
   );
 };