Fase 5 Completa: Implementada la generación de CSV automática y manual.

frontend/src/components/Dashboard.tsx

@@ -1,7 +1,7 @@
 // frontend/src/components/Dashboard.tsx
 
 import { useEffect, useState, useCallback } from 'react';
-import { Box, Button, Typography, Stack, Chip } from '@mui/material';
+import { Box, Button, Typography, Stack, Chip, CircularProgress } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import SyncIcon from '@mui/icons-material/Sync';
 
@@ -15,6 +15,7 @@ import AddTitularModal from './AddTitularModal';
 const Dashboard = () => {
   const [titulares, setTitulares] = useState<Titular[]>([]);
   const [modalOpen, setModalOpen] = useState(false);
+  const [isGeneratingCsv, setIsGeneratingCsv] = useState(false);
 
   // Usamos useCallback para que la función de callback no se recree en cada render,
   // evitando que el useEffect del hook se ejecute innecesariamente.
@@ -81,6 +82,19 @@ const Dashboard = () => {
     }
   }
 
+  const handleGenerateCsv = async () => {
+    setIsGeneratingCsv(true);
+    try {
+      await api.generarCsvManual();
+      // Opcional: mostrar una notificación de éxito
+    } catch (error) {
+      console.error("Error al generar CSV manualmente", error);
+      // Opcional: mostrar una notificación de error
+    } finally {
+      setIsGeneratingCsv(false);
+    }
+  };
+
   return (
     <>
       <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
@@ -91,8 +105,13 @@ const Dashboard = () => {
           {getStatusChip()}
         </Stack>
         <Stack direction="row" spacing={2}>
-          <Button variant="outlined" startIcon={<SyncIcon />}>
-            Generate CSV
+          <Button
+            variant="outlined"
+            startIcon={isGeneratingCsv ? <CircularProgress size={20} /> : <SyncIcon />}
+            onClick={handleGenerateCsv}
+            disabled={isGeneratingCsv}
+          >
+            {isGeneratingCsv ? 'Generando...' : 'Generate CSV'}
           </Button>
           <Button variant="contained" startIcon={<AddIcon />} onClick={() => setModalOpen(true)}>
             Add Manual