Feat: Edición y Manejo de Titulares, entre otros.

frontend/src/components/EditarTitularModal.tsx

@@ -0,0 +1,66 @@
+// frontend/src/components/EditarTitularModal.tsx
+
+import { useEffect, useState } from 'react';
+import { Modal, Box, Typography, TextField, Button } from '@mui/material';
+import type { Titular } from '../types';
+
+const style = {
+  position: 'absolute' as 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 400,
+  bgcolor: 'background.paper',
+  boxShadow: 24,
+  p: 4,
+};
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  onSave: (id: number, texto: string, viñeta: string) => void;
+  titular: Titular | null;
+}
+
+const EditarTitularModal = ({ open, onClose, onSave, titular }: Props) => {
+  const [texto, setTexto] = useState('');
+  const [viñeta, setViñeta] = useState('');
+
+  // Este efecto actualiza el estado del formulario cuando se selecciona un titular para editar
+  useEffect(() => {
+    if (titular) {
+      setTexto(titular.texto);
+      setViñeta(titular.viñeta ?? '•'); // Default a '•' si es nulo
+    }
+  }, [titular]);
+
+  const handleSave = () => {
+    if (titular && texto.trim()) {
+      onSave(titular.id, texto.trim(), viñeta.trim());
+      onClose();
+    }
+  };
+
+  return (
+    <Modal open={open} onClose={onClose}>
+      <Box sx={style}>
+        <Typography variant="h6" component="h2">Editar Titular</Typography>
+        <TextField
+          fullWidth autoFocus margin="normal" label="Texto del titular"
+          value={texto} onChange={(e) => setTexto(e.target.value)}
+        />
+        <TextField
+          fullWidth margin="normal" label="Viñeta (ej: •, !, o dejar vacío)"
+          value={viñeta} onChange={(e) => setViñeta(e.target.value)}
+          onKeyDown={(e) => e.key === 'Enter' && handleSave()}
+        />
+        <Box sx={{ mt: 2, display: 'flex', justifyContent: 'flex-end' }}>
+          <Button onClick={onClose} sx={{ mr: 1 }}>Cancelar</Button>
+          <Button variant="contained" onClick={handleSave}>Guardar Cambios</Button>
+        </Box>
+      </Box>
+    </Modal>
+  );
+};
+
+export default EditarTitularModal;