feat: Implementación módulos Empresas, Plantas, Tipos y Estados Bobina

Backend API: - Implementado CRUD completo para Empresas (DE001-DE004): - EmpresaRepository, EmpresaService, EmpresasController. - Lógica de creación/eliminación de saldos iniciales en EmpresaService. - Transacciones y registro en tablas _H. - Verificación de permisos específicos. - Implementado CRUD completo para Plantas de Impresión (IP001-IP004): - PlantaRepository, PlantaService, PlantasController. - Transacciones y registro en tablas _H. - Verificación de permisos. - Implementado CRUD completo para Tipos de Bobina (IB006-IB009): - TipoBobinaRepository, TipoBobinaService, TiposBobinaController. - Transacciones y registro en tablas _H. - Verificación de permisos. - Implementado CRUD completo para Estados de Bobina (IB010-IB013): - EstadoBobinaRepository, EstadoBobinaService, EstadosBobinaController. - Transacciones y registro en tablas _H. - Verificación de permisos. Frontend React: - Módulo Empresas: - empresaService.ts para interactuar con la API. - EmpresaFormModal.tsx para crear/editar empresas. - GestionarEmpresasPage.tsx con tabla, filtro, paginación y menú de acciones. - Integración con el hook usePermissions para control de acceso. - Módulo Plantas de Impresión: - plantaService.ts. - PlantaFormModal.tsx. - GestionarPlantasPage.tsx con tabla, filtro, paginación y acciones. - Integración con usePermissions. - Módulo Tipos de Bobina: - tipoBobinaService.ts. - TipoBobinaFormModal.tsx. - GestionarTiposBobinaPage.tsx con tabla, filtro, paginación y acciones. - Integración con usePermissions. - Módulo Estados de Bobina: - estadoBobinaService.ts. - EstadoBobinaFormModal.tsx. - GestionarEstadosBobinaPage.tsx con tabla, filtro, paginación y acciones. - Integración con usePermissions. - Navegación: - Añadidas sub-pestañas y rutas para los nuevos módulos dentro de "Distribución" (Empresas) e "Impresión" (Plantas, Tipos Bobina, Estados Bobina). - Creado ImpresionIndexPage.tsx para la navegación interna del módulo de Impresión. Correcciones: - Corregido el uso de CommitAsync/RollbackAsync a Commit/Rollback síncronos en PlantaService.cs debido a que IDbTransaction no los soporta asíncronamente.
2025-05-09 10:08:53 -03:00
parent 5c4b961073
commit daf84d2708
98 changed files with 6059 additions and 71 deletions
--- a/Frontend/src/assets/eldia.png
+++ b/Frontend/src/assets/eldia.png
--- a/Frontend/src/components/Modals/EmpresaFormModal.tsx
+++ b/Frontend/src/components/Modals/EmpresaFormModal.tsx
@@ -0,0 +1,142 @@
+import React, { useState, useEffect } from 'react';
+import { Modal, Box, Typography, TextField, Button, CircularProgress, Alert } from '@mui/material';
+import type { EmpresaDto } from '../../models/dtos/Empresas/EmpresaDto';
+import type { CreateEmpresaDto } from '../../models/dtos/Empresas/CreateEmpresaDto';
+import type { UpdateEmpresaDto } from '../../models/dtos/Empresas/UpdateEmpresaDto'; // Necesitamos Update DTO también
+
+const modalStyle = {
+  position: 'absolute' as 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 400,
+  bgcolor: 'background.paper',
+  border: '2px solid #000',
+  boxShadow: 24,
+  p: 4,
+};
+
+interface EmpresaFormModalProps {
+  open: boolean;
+  onClose: () => void;
+  // El tipo de dato enviado depende si es creación o edición
+  onSubmit: (data: CreateEmpresaDto | (UpdateEmpresaDto & { idEmpresa: number })) => Promise<void>;
+  initialData?: EmpresaDto | null; // Para editar
+  errorMessage?: string | null;    // Error de la API pasado desde el padre
+  clearErrorMessage: () => void;    // Función para limpiar el error en el padre
+}
+
+const EmpresaFormModal: React.FC<EmpresaFormModalProps> = ({
+  open,
+  onClose,
+  onSubmit,
+  initialData,
+  errorMessage,
+  clearErrorMessage
+}) => {
+  const [nombre, setNombre] = useState('');
+  const [detalle, setDetalle] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [localError, setLocalError] = useState<string | null>(null); // Para validaciones locales (ej: campo requerido)
+
+  const isEditing = Boolean(initialData);
+
+  useEffect(() => {
+    if (open) {
+        // Poblar formulario si es edición, limpiar si es creación
+        setNombre(initialData?.nombre || '');
+        setDetalle(initialData?.detalle || '');
+        setLocalError(null); // Limpiar error local al abrir/cambiar
+        clearErrorMessage(); // Limpiar error API del padre
+    }
+    // No necesitamos limpiar al cerrar, ya que el useEffect se ejecuta al abrir `open = true`
+  }, [open, initialData, clearErrorMessage]);
+
+   // Limpia errores cuando el usuario empieza a escribir
+   const handleInputChange = () => {
+      if (localError) setLocalError(null);
+      if (errorMessage) clearErrorMessage();
+  };
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setLocalError(null);
+    clearErrorMessage(); // Limpiar errores antes de enviar
+
+    // Validación local simple
+    if (!nombre.trim()) {
+        setLocalError('El nombre es obligatorio.');
+        return;
+    }
+
+    setLoading(true);
+    try {
+      // Preparar datos según sea creación o edición
+      const dataToSubmit = { nombre, detalle: detalle || undefined }; // Usa undefined si detalle está vacío
+
+      if (isEditing && initialData) {
+        // Si es edición, combina los datos del formulario con el ID existente
+        await onSubmit({ ...dataToSubmit, idEmpresa: initialData.idEmpresa });
+      } else {
+        // Si es creación, envía solo los datos del formulario
+        await onSubmit(dataToSubmit as CreateEmpresaDto);
+      }
+      onClose(); // Cierra el modal SOLO si onSubmit fue exitoso
+    } catch (error: any) {
+      // El error de la API será manejado por el componente padre y mostrado vía 'errorMessage'
+      // No necesitamos setear localError aquí a menos que sea un error específico del submit no cubierto por la API
+      console.error("Error en submit de EmpresaFormModal:", error);
+      // El componente padre es responsable de poner setLoading(false) si onSubmit falla
+    } finally {
+      // Asegúrate de que el loading se detenga incluso si hay un error no capturado por el padre
+       setLoading(false);
+    }
+  };
+
+  return (
+    <Modal open={open} onClose={onClose}>
+      <Box sx={modalStyle}>
+        <Typography variant="h6" component="h2">
+          {isEditing ? 'Editar Empresa' : 'Agregar Nueva Empresa'}
+        </Typography>
+        <Box component="form" onSubmit={handleSubmit} sx={{ mt: 2 }}>
+          <TextField
+            label="Nombre"
+            fullWidth
+            required // HTML5 required
+            value={nombre}
+            onChange={(e) => {setNombre(e.target.value); handleInputChange();} }
+            margin="normal"
+            error={!!localError} // Mostrar error si localError tiene un mensaje
+            helperText={localError ? localError : ''} // Mostrar el mensaje de error local
+            disabled={loading}
+            autoFocus // Poner el foco en el primer campo
+          />
+          <TextField
+            label="Detalle (Opcional)"
+            fullWidth
+            value={detalle}
+            onChange={(e) => {setDetalle(e.target.value); handleInputChange();}}
+            margin="normal"
+            multiline
+            rows={3}
+            disabled={loading}
+          />
+          {/* Mostrar error de la API si existe */}
+          {errorMessage && <Alert severity="error" sx={{ mt: 1 }}>{errorMessage}</Alert>}
+
+          <Box sx={{ mt: 3, display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
+            <Button onClick={onClose} color="secondary" disabled={loading}>
+              Cancelar
+            </Button>
+            <Button type="submit" variant="contained" disabled={loading}>
+              {loading ? <CircularProgress size={24} /> : (isEditing ? 'Guardar Cambios' : 'Agregar')}
+            </Button>
+          </Box>
+        </Box>
+      </Box>
+    </Modal>
+  );
+};
+
+export default EmpresaFormModal;
--- a/Frontend/src/components/Modals/EstadoBobinaFormModal.tsx
+++ b/Frontend/src/components/Modals/EstadoBobinaFormModal.tsx
@@ -0,0 +1,128 @@
+import React, { useState, useEffect } from 'react';
+import { Modal, Box, Typography, TextField, Button, CircularProgress, Alert } from '@mui/material';
+import type { EstadoBobinaDto } from '../../models/dtos/Impresion/EstadoBobinaDto';
+import type { CreateEstadoBobinaDto } from '../../models/dtos/Impresion/CreateEstadoBobinaDto';
+import type { UpdateEstadoBobinaDto } from '../../models/dtos/Impresion/UpdateEstadoBobinaDto';
+
+const modalStyle = {
+    position: 'absolute' as 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: 400,
+    bgcolor: 'background.paper',
+    border: '2px solid #000',
+    boxShadow: 24,
+    p: 4,
+};
+
+interface EstadoBobinaFormModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (data: CreateEstadoBobinaDto | (UpdateEstadoBobinaDto & { idEstadoBobina: number })) => Promise<void>;
+  initialData?: EstadoBobinaDto | null;
+  errorMessage?: string | null;
+  clearErrorMessage: () => void;
+}
+
+const EstadoBobinaFormModal: React.FC<EstadoBobinaFormModalProps> = ({
+  open,
+  onClose,
+  onSubmit,
+  initialData,
+  errorMessage,
+  clearErrorMessage
+}) => {
+  const [denominacion, setDenominacion] = useState('');
+  const [obs, setObs] = useState(''); // Observación
+  const [loading, setLoading] = useState(false);
+  const [localErrorDenominacion, setLocalErrorDenominacion] = useState<string | null>(null);
+
+  const isEditing = Boolean(initialData);
+
+  useEffect(() => {
+    if (open) {
+        setDenominacion(initialData?.denominacion || '');
+        setObs(initialData?.obs || ''); // Inicializar obs
+        setLocalErrorDenominacion(null);
+        clearErrorMessage();
+    }
+  }, [open, initialData, clearErrorMessage]);
+
+   const handleInputChange = () => {
+      if (localErrorDenominacion) setLocalErrorDenominacion(null);
+      if (errorMessage) clearErrorMessage();
+  };
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setLocalErrorDenominacion(null);
+    clearErrorMessage();
+
+    if (!denominacion.trim()) {
+        setLocalErrorDenominacion('La denominación es obligatoria.');
+        return;
+    }
+
+    setLoading(true);
+    try {
+      const dataToSubmit = { denominacion, obs: obs || undefined }; // Enviar obs si tiene valor
+
+      if (isEditing && initialData) {
+        await onSubmit({ ...dataToSubmit, idEstadoBobina: initialData.idEstadoBobina });
+      } else {
+        await onSubmit(dataToSubmit as CreateEstadoBobinaDto);
+      }
+      onClose();
+    } catch (error: any) {
+      console.error("Error en submit de EstadoBobinaFormModal:", error);
+    } finally {
+       setLoading(false);
+    }
+  };
+
+  return (
+    <Modal open={open} onClose={onClose}>
+      <Box sx={modalStyle}>
+        <Typography variant="h6" component="h2">
+          {isEditing ? 'Editar Estado de Bobina' : 'Agregar Nuevo Estado de Bobina'}
+        </Typography>
+        <Box component="form" onSubmit={handleSubmit} sx={{ mt: 2 }}>
+          <TextField
+            label="Denominación"
+            fullWidth
+            required
+            value={denominacion}
+            onChange={(e) => { setDenominacion(e.target.value); handleInputChange(); }}
+            margin="normal"
+            error={!!localErrorDenominacion}
+            helperText={localErrorDenominacion || ''}
+            disabled={loading}
+            autoFocus
+          />
+          <TextField
+            label="Observación (Opcional)"
+            fullWidth
+            value={obs}
+            onChange={(e) => setObs(e.target.value)} // No necesita handleInputChange si no tiene validación local
+            margin="normal"
+            multiline
+            rows={3}
+            disabled={loading}
+          />
+          {errorMessage && <Alert severity="error" sx={{ mt: 1 }}>{errorMessage}</Alert>}
+          <Box sx={{ mt: 3, display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
+            <Button onClick={onClose} color="secondary" disabled={loading}>
+              Cancelar
+            </Button>
+            <Button type="submit" variant="contained" disabled={loading}>
+              {loading ? <CircularProgress size={24} /> : (isEditing ? 'Guardar Cambios' : 'Agregar')}
+            </Button>
+          </Box>
+        </Box>
+      </Box>
+    </Modal>
+  );
+};
+
+export default EstadoBobinaFormModal;
--- a/Frontend/src/components/Modals/PlantaFormModal.tsx
+++ b/Frontend/src/components/Modals/PlantaFormModal.tsx
@@ -0,0 +1,144 @@
+import React, { useState, useEffect } from 'react';
+import { Modal, Box, Typography, TextField, Button, CircularProgress, Alert } from '@mui/material';
+import type { PlantaDto } from '../../models/dtos/Impresion/PlantaDto';
+import type { CreatePlantaDto } from '../../models/dtos/Impresion/CreatePlantaDto';
+import type { UpdatePlantaDto } from '../../models/dtos/Impresion/UpdatePlantaDto';
+
+const modalStyle = { /* ... (mismo estilo que otros modales) ... */
+    position: 'absolute' as 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: 400,
+    bgcolor: 'background.paper',
+    border: '2px solid #000',
+    boxShadow: 24,
+    p: 4,
+};
+
+interface PlantaFormModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (data: CreatePlantaDto | (UpdatePlantaDto & { idPlanta: number })) => Promise<void>;
+  initialData?: PlantaDto | null;
+  errorMessage?: string | null;
+  clearErrorMessage: () => void;
+}
+
+const PlantaFormModal: React.FC<PlantaFormModalProps> = ({
+  open,
+  onClose,
+  onSubmit,
+  initialData,
+  errorMessage,
+  clearErrorMessage
+}) => {
+  const [nombre, setNombre] = useState('');
+  const [detalle, setDetalle] = useState(''); // Detalle es string, no opcional según la BD
+  const [loading, setLoading] = useState(false);
+  const [localErrorNombre, setLocalErrorNombre] = useState<string | null>(null);
+  const [localErrorDetalle, setLocalErrorDetalle] = useState<string | null>(null);
+
+  const isEditing = Boolean(initialData);
+
+  useEffect(() => {
+    if (open) {
+        setNombre(initialData?.nombre || '');
+        setDetalle(initialData?.detalle || ''); // Inicializar detalle
+        setLocalErrorNombre(null);
+        setLocalErrorDetalle(null);
+        clearErrorMessage();
+    }
+  }, [open, initialData, clearErrorMessage]);
+
+   const handleInputChange = (field: 'nombre' | 'detalle') => {
+      if (field === 'nombre' && localErrorNombre) setLocalErrorNombre(null);
+      if (field === 'detalle' && localErrorDetalle) setLocalErrorDetalle(null);
+      if (errorMessage) clearErrorMessage();
+  };
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setLocalErrorNombre(null);
+    setLocalErrorDetalle(null);
+    clearErrorMessage();
+
+    let hasError = false;
+    if (!nombre.trim()) {
+        setLocalErrorNombre('El nombre es obligatorio.');
+        hasError = true;
+    }
+    if (!detalle.trim()) { // Detalle también es requerido según la BD
+        setLocalErrorDetalle('El detalle es obligatorio.');
+        hasError = true;
+    }
+
+    if (hasError) return;
+
+    setLoading(true);
+    try {
+      const dataToSubmit = { nombre, detalle }; // Detalle siempre se envía
+
+      if (isEditing && initialData) {
+        await onSubmit({ ...dataToSubmit, idPlanta: initialData.idPlanta });
+      } else {
+        await onSubmit(dataToSubmit as CreatePlantaDto);
+      }
+      onClose();
+    } catch (error: any) {
+      console.error("Error en submit de PlantaFormModal:", error);
+      // El error API se muestra vía 'errorMessage'
+    } finally {
+       setLoading(false);
+    }
+  };
+
+  return (
+    <Modal open={open} onClose={onClose}>
+      <Box sx={modalStyle}>
+        <Typography variant="h6" component="h2">
+          {isEditing ? 'Editar Planta de Impresión' : 'Agregar Nueva Planta de Impresión'}
+        </Typography>
+        <Box component="form" onSubmit={handleSubmit} sx={{ mt: 2 }}>
+          <TextField
+            label="Nombre"
+            fullWidth
+            required
+            value={nombre}
+            onChange={(e) => { setNombre(e.target.value); handleInputChange('nombre'); }}
+            margin="normal"
+            error={!!localErrorNombre}
+            helperText={localErrorNombre || ''}
+            disabled={loading}
+            autoFocus
+          />
+          <TextField
+            label="Detalle" // Ya no es opcional
+            fullWidth
+            required // Marcar como requerido
+            value={detalle}
+            onChange={(e) => { setDetalle(e.target.value); handleInputChange('detalle'); }}
+            margin="normal"
+            multiline
+            rows={3}
+            error={!!localErrorDetalle} // Añadir manejo de error para detalle
+            helperText={localErrorDetalle || ''} // Mostrar error de detalle
+            disabled={loading}
+          />
+          {errorMessage && <Alert severity="error" sx={{ mt: 1 }}>{errorMessage}</Alert>}
+
+          <Box sx={{ mt: 3, display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
+            <Button onClick={onClose} color="secondary" disabled={loading}>
+              Cancelar
+            </Button>
+            <Button type="submit" variant="contained" disabled={loading}>
+              {loading ? <CircularProgress size={24} /> : (isEditing ? 'Guardar Cambios' : 'Agregar')}
+            </Button>
+          </Box>
+        </Box>
+      </Box>
+    </Modal>
+  );
+};
+
+export default PlantaFormModal;
--- a/Frontend/src/components/Modals/TipoBobinaFormModal.tsx
+++ b/Frontend/src/components/Modals/TipoBobinaFormModal.tsx
@@ -0,0 +1,117 @@
+import React, { useState, useEffect } from 'react';
+import { Modal, Box, Typography, TextField, Button, CircularProgress, Alert } from '@mui/material';
+import type { TipoBobinaDto } from '../../models/dtos/Impresion/TipoBobinaDto';
+import type { CreateTipoBobinaDto } from '../../models/dtos/Impresion/CreateTipoBobinaDto';
+import type { UpdateTipoBobinaDto } from '../../models/dtos/Impresion/UpdateTipoBobinaDto';
+
+const modalStyle = { /* ... (mismo estilo que otros modales) ... */
+    position: 'absolute' as 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: 400,
+    bgcolor: 'background.paper',
+    border: '2px solid #000',
+    boxShadow: 24,
+    p: 4,
+};
+
+interface TipoBobinaFormModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (data: CreateTipoBobinaDto | (UpdateTipoBobinaDto & { idTipoBobina: number })) => Promise<void>;
+  initialData?: TipoBobinaDto | null;
+  errorMessage?: string | null;
+  clearErrorMessage: () => void;
+}
+
+const TipoBobinaFormModal: React.FC<TipoBobinaFormModalProps> = ({
+  open,
+  onClose,
+  onSubmit,
+  initialData,
+  errorMessage,
+  clearErrorMessage
+}) => {
+  const [denominacion, setDenominacion] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [localError, setLocalError] = useState<string | null>(null);
+
+  const isEditing = Boolean(initialData);
+
+  useEffect(() => {
+    if (open) {
+        setDenominacion(initialData?.denominacion || '');
+        setLocalError(null);
+        clearErrorMessage();
+    }
+  }, [open, initialData, clearErrorMessage]);
+
+   const handleInputChange = () => {
+      if (localError) setLocalError(null);
+      if (errorMessage) clearErrorMessage();
+  };
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setLocalError(null);
+    clearErrorMessage();
+
+    if (!denominacion.trim()) {
+        setLocalError('La denominación es obligatoria.');
+        return;
+    }
+
+    setLoading(true);
+    try {
+      const dataToSubmit = { denominacion };
+
+      if (isEditing && initialData) {
+        await onSubmit({ ...dataToSubmit, idTipoBobina: initialData.idTipoBobina });
+      } else {
+        await onSubmit(dataToSubmit as CreateTipoBobinaDto);
+      }
+      onClose();
+    } catch (error: any) {
+      console.error("Error en submit de TipoBobinaFormModal:", error);
+      // El error API se muestra vía 'errorMessage'
+    } finally {
+       setLoading(false);
+    }
+  };
+
+  return (
+    <Modal open={open} onClose={onClose}>
+      <Box sx={modalStyle}>
+        <Typography variant="h6" component="h2">
+          {isEditing ? 'Editar Tipo de Bobina' : 'Agregar Nuevo Tipo de Bobina'}
+        </Typography>
+        <Box component="form" onSubmit={handleSubmit} sx={{ mt: 2 }}>
+          <TextField
+            label="Denominación"
+            fullWidth
+            required
+            value={denominacion}
+            onChange={(e) => { setDenominacion(e.target.value); handleInputChange(); }}
+            margin="normal"
+            error={!!localError}
+            helperText={localError || ''}
+            disabled={loading}
+            autoFocus
+          />
+          {errorMessage && <Alert severity="error" sx={{ mt: 1 }}>{errorMessage}</Alert>}
+          <Box sx={{ mt: 3, display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
+            <Button onClick={onClose} color="secondary" disabled={loading}>
+              Cancelar
+            </Button>
+            <Button type="submit" variant="contained" disabled={loading}>
+              {loading ? <CircularProgress size={24} /> : (isEditing ? 'Guardar Cambios' : 'Agregar')}
+            </Button>
+          </Box>
+        </Box>
+      </Box>
+    </Modal>
+  );
+};
+
+export default TipoBobinaFormModal;
--- a/Frontend/src/components/Modals/ZonaFormModal.tsx
+++ b/Frontend/src/components/Modals/ZonaFormModal.tsx
@@ -0,0 +1,128 @@
+import React, { useState, useEffect } from 'react';
+import { Modal, Box, Typography, TextField, Button, CircularProgress, Alert } from '@mui/material';
+import type { ZonaDto } from '../../models/dtos/Zonas/ZonaDto'; // Usamos el DTO de la API para listar
+import type { CreateZonaDto } from '../../models/dtos/Zonas/CreateZonaDto';
+
+const modalStyle = {
+  position: 'absolute' as 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 400,
+  bgcolor: 'background.paper',
+  border: '2px solid #000',
+  boxShadow: 24,
+  p: 4,
+};
+
+
+interface ZonaFormModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (data: CreateZonaDto | (CreateZonaDto & { idZona: number })) => Promise<void>;
+  initialData?: ZonaDto | null; // Puede recibir una Zona para editar
+  errorMessage?: string | null;
+  clearErrorMessage: () => void;
+}
+
+const ZonaFormModal: React.FC<ZonaFormModalProps> = ({
+  open,
+  onClose,
+  onSubmit,
+  initialData,
+  errorMessage,
+  clearErrorMessage
+}) => {
+  const [nombre, setNombre] = useState('');
+  const [descripcion, setDescripcion] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [localError, setLocalError] = useState<string | null>(null);
+
+  const isEditing = Boolean(initialData);
+
+  useEffect(() => {
+    if (open) {
+        setNombre(initialData?.nombre || '');
+        setDescripcion(initialData?.descripcion || '');
+        setLocalError(null);
+        clearErrorMessage();
+    }
+  }, [open, initialData, clearErrorMessage]);
+
+  const handleInputChange = () => {
+      if (localError) setLocalError(null);
+      if (errorMessage) clearErrorMessage();
+  };
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setLocalError(null);
+    clearErrorMessage();
+
+    if (!nombre.trim()) {
+        setLocalError('El nombre es obligatorio.');
+        return;
+    }
+
+    setLoading(true);
+    try {
+      const dataToSubmit: CreateZonaDto = { nombre, descripcion: descripcion || undefined };
+      if (isEditing && initialData) {
+        await onSubmit({ ...dataToSubmit, idZona: initialData.idZona }); // Añadir idZona si es edición
+      } else {
+        await onSubmit(dataToSubmit);
+      }
+      onClose(); // Cerrar en éxito
+    } catch (error: any) {
+      console.error("Error en submit de ZonaFormModal:", error);
+      // El error API se muestra a través de errorMessage
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Modal open={open} onClose={onClose}>
+      <Box sx={modalStyle}>
+        <Typography variant="h6" component="h2">
+          {isEditing ? 'Editar Zona' : 'Agregar Nueva Zona'}
+        </Typography>
+        <Box component="form" onSubmit={handleSubmit} sx={{ mt: 2 }}>
+          <TextField
+            label="Nombre"
+            fullWidth
+            required
+            value={nombre}
+            onChange={(e) => { setNombre(e.target.value); handleInputChange(); }}
+            margin="normal"
+            error={!!localError && !nombre.trim()}
+            helperText={localError && !nombre.trim() ? localError : ''}
+            disabled={loading}
+            autoFocus
+          />
+          <TextField
+            label="Descripción (Opcional)"
+            fullWidth
+            value={descripcion}
+            onChange={(e) => { setDescripcion(e.target.value); handleInputChange();}}
+            margin="normal"
+            multiline
+            rows={3}
+            disabled={loading}
+          />
+          {errorMessage && <Alert severity="error" sx={{ mt: 1 }}>{errorMessage}</Alert>}
+          <Box sx={{ mt: 3, display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
+            <Button onClick={onClose} color="secondary" disabled={loading}>
+              Cancelar
+            </Button>
+            <Button type="submit" variant="contained" disabled={loading}>
+              {loading ? <CircularProgress size={24} /> : (isEditing ? 'Guardar Cambios' : 'Agregar')}
+            </Button>
+          </Box>
+        </Box>
+      </Box>
+    </Modal>
+  );
+};
+
+export default ZonaFormModal;
--- a/Frontend/src/models/Empresa.ts
+++ b/Frontend/src/models/Empresa.ts
@@ -0,0 +1,5 @@
+export interface Empresa {
+  idEmpresa: number;
+  nombre: string;
+  detalle?: string;
+}
--- a/Frontend/src/models/dtos/Empresas/CreateEmpresaDto.ts
+++ b/Frontend/src/models/dtos/Empresas/CreateEmpresaDto.ts
@@ -0,0 +1,4 @@
+export interface CreateEmpresaDto {
+  nombre: string;
+  detalle?: string;
+}
--- a/Frontend/src/models/dtos/Empresas/EmpresaDto.ts
+++ b/Frontend/src/models/dtos/Empresas/EmpresaDto.ts
@@ -0,0 +1,5 @@
+export interface EmpresaDto {
+  idEmpresa: number;
+  nombre: string;
+  detalle?: string; // Puede ser null o undefined
+}
--- a/Frontend/src/models/dtos/Empresas/UpdateEmpresaDto.ts
+++ b/Frontend/src/models/dtos/Empresas/UpdateEmpresaDto.ts
@@ -0,0 +1,4 @@
+export interface UpdateEmpresaDto {
+  nombre: string;
+  detalle?: string;
+}
--- a/Frontend/src/models/dtos/Impresion/CreateEstadoBobinaDto.ts
+++ b/Frontend/src/models/dtos/Impresion/CreateEstadoBobinaDto.ts
@@ -0,0 +1,4 @@
+export interface CreateEstadoBobinaDto {
+  denominacion: string;
+  obs?: string;
+}
--- a/Frontend/src/models/dtos/Impresion/CreatePlantaDto.ts
+++ b/Frontend/src/models/dtos/Impresion/CreatePlantaDto.ts
@@ -0,0 +1,4 @@
+export interface CreatePlantaDto {
+  nombre: string;
+  detalle: string; // Basado en la tabla, no es opcional
+}
--- a/Frontend/src/models/dtos/Impresion/CreateTipoBobinaDto.ts
+++ b/Frontend/src/models/dtos/Impresion/CreateTipoBobinaDto.ts
@@ -0,0 +1,3 @@
+export interface CreateTipoBobinaDto {
+  denominacion: string;
+}
--- a/Frontend/src/models/dtos/Impresion/EstadoBobinaDto.ts
+++ b/Frontend/src/models/dtos/Impresion/EstadoBobinaDto.ts
@@ -0,0 +1,5 @@
+export interface EstadoBobinaDto {
+  idEstadoBobina: number;
+  denominacion: string;
+  obs?: string;
+}
--- a/Frontend/src/models/dtos/Impresion/PlantaDto.ts
+++ b/Frontend/src/models/dtos/Impresion/PlantaDto.ts
@@ -0,0 +1,5 @@
+export interface PlantaDto {
+  idPlanta: number;
+  nombre: string;
+  detalle: string; // Basado en la tabla, no es opcional
+}
--- a/Frontend/src/models/dtos/Impresion/TipoBobinaDto.ts
+++ b/Frontend/src/models/dtos/Impresion/TipoBobinaDto.ts
@@ -0,0 +1,4 @@
+export interface TipoBobinaDto {
+  idTipoBobina: number;
+  denominacion: string;
+}
--- a/Frontend/src/models/dtos/Impresion/UpdateEstadoBobinaDto.ts
+++ b/Frontend/src/models/dtos/Impresion/UpdateEstadoBobinaDto.ts
@@ -0,0 +1,4 @@
+export interface UpdateEstadoBobinaDto {
+  denominacion: string;
+  obs?: string;
+}
--- a/Frontend/src/models/dtos/Impresion/UpdatePlantaDto.ts
+++ b/Frontend/src/models/dtos/Impresion/UpdatePlantaDto.ts
@@ -0,0 +1,4 @@
+export interface UpdatePlantaDto {
+  nombre: string;
+  detalle: string; // Basado en la tabla, no es opcional
+}
--- a/Frontend/src/models/dtos/Impresion/UpdateTipoBobinaDto.ts
+++ b/Frontend/src/models/dtos/Impresion/UpdateTipoBobinaDto.ts
@@ -0,0 +1,3 @@
+export interface UpdateTipoBobinaDto {
+  denominacion: string;
+}
--- a/Frontend/src/models/dtos/Zonas/CreateZonaDto.ts
+++ b/Frontend/src/models/dtos/Zonas/CreateZonaDto.ts
@@ -0,0 +1,4 @@
+export interface CreateZonaDto {
+  nombre: string;
+  descripcion?: string;
+}
--- a/Frontend/src/models/dtos/Zonas/UpdateZonaDto.ts
+++ b/Frontend/src/models/dtos/Zonas/UpdateZonaDto.ts
@@ -0,0 +1,4 @@
+export interface UpdateZonaDto {
+  nombre: string;
+  descripcion?: string;
+}
--- a/Frontend/src/models/dtos/Zonas/ZonaDto.ts
+++ b/Frontend/src/models/dtos/Zonas/ZonaDto.ts
@@ -0,0 +1,6 @@
+export interface ZonaDto {
+  idZona: number;
+  nombre: string;
+  descripcion?: string;
+  // Nota: No incluye 'estado', ya que la API por defecto devuelve solo activas
+}
--- a/Frontend/src/pages/Contables/GestionarTiposPagoPage.tsx
+++ b/Frontend/src/pages/Contables/GestionarTiposPagoPage.tsx
@@ -148,14 +148,16 @@ const GestionarTiposPagoPage: React.FC = () => {
          {/* <Button variant="contained" onClick={cargarTiposPago}>Buscar</Button> */}
        </Box>
        {puedeCrear && (
-          <Button
-            variant="contained"
-            startIcon={<AddIcon />}
-            onClick={() => handleOpenModal()}
-            sx={{ mb: 2 }}
-          >
-            Agregar Nuevo Tipo
-          </Button>
+          <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2 }}>
+            <Button
+              variant="contained"
+              startIcon={<AddIcon />}
+              onClick={() => handleOpenModal()}
+              sx={{ mb: 2 }}
+            >
+              Agregar Nuevo Tipo
+            </Button>
+          </Box>
        )}
      </Paper>

--- a/Frontend/src/pages/Distribucion/DistribucionIndexPage.tsx
+++ b/Frontend/src/pages/Distribucion/DistribucionIndexPage.tsx
@@ -1,7 +1,7 @@
 // src/pages/distribucion/DistribucionIndexPage.tsx
 import React, { useState, useEffect } from 'react';
 import { Box, Tabs, Tab, Paper, Typography } from '@mui/material';
-import { Outlet, useNavigate, useLocation, Link as RouterLink } from 'react-router-dom';
+import { Outlet, useNavigate, useLocation } from 'react-router-dom';

 // Define las sub-pestañas del módulo Distribución
 // El path es relativo a la ruta base del módulo (ej: /distribucion)
--- a/Frontend/src/pages/Distribucion/EmpresasPage.tsx
+++ b/Frontend/src/pages/Distribucion/EmpresasPage.tsx
@@ -1,7 +0,0 @@
-import React from 'react';
-import { Typography } from '@mui/material';
-
-const EmpresasPage: React.FC = () => {
-  return <Typography variant="h6">Página de Gestión de Empresas</Typography>;
-};
-export default EmpresasPage;
--- a/Frontend/src/pages/Distribucion/GestionarEmpresasPage.tsx
+++ b/Frontend/src/pages/Distribucion/GestionarEmpresasPage.tsx
@@ -0,0 +1,276 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+    Box, Typography, TextField, Button, Paper, IconButton, Menu, MenuItem,
+    Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TablePagination,
+    CircularProgress, Alert
+} from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import empresaService from '../../services/empresaService'; // Importar el servicio de Empresas
+import type { EmpresaDto } from '../../models/dtos/Empresas/EmpresaDto';
+import type { CreateEmpresaDto } from '../../models/dtos/Empresas/CreateEmpresaDto';
+import type { UpdateEmpresaDto } from '../../models/dtos/Empresas/UpdateEmpresaDto';
+import EmpresaFormModal from '../../components/Modals/EmpresaFormModal'; // Importar el modal de Empresas
+import { usePermissions } from '../../hooks/usePermissions'; // Importar hook de permisos
+import axios from 'axios'; // Para manejo de errores de API
+
+const GestionarEmpresasPage: React.FC = () => {
+  const [empresas, setEmpresas] = useState<EmpresaDto[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null); // Para errores al cargar datos
+  const [filtroNombre, setFiltroNombre] = useState('');
+  // const [filtroDetalle, setFiltroDetalle] = useState(''); // Descomentar si añades filtro por detalle
+
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editingEmpresa, setEditingEmpresa] = useState<EmpresaDto | null>(null);
+  const [apiErrorMessage, setApiErrorMessage] = useState<string | null>(null); // Para errores del modal (Create/Update/Delete)
+
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(5);
+
+  // Para el menú contextual de acciones por fila
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [selectedEmpresaRow, setSelectedEmpresaRow] = useState<EmpresaDto | null>(null);
+
+  const { tienePermiso, isSuperAdmin } = usePermissions(); // Usar el hook
+
+  // Determinar permisos específicos para Empresas (basado en los códigos DE001 a DE004)
+  const puedeVer = isSuperAdmin || tienePermiso("DE001"); // Necesario para mostrar la página
+  const puedeCrear = isSuperAdmin || tienePermiso("DE002");
+  const puedeModificar = isSuperAdmin || tienePermiso("DE003");
+  const puedeEliminar = isSuperAdmin || tienePermiso("DE004");
+
+  const cargarEmpresas = useCallback(async () => {
+    if (!puedeVer) { // Si no tiene permiso de ver, no cargar nada
+        setError("No tiene permiso para ver esta sección.");
+        setLoading(false);
+        return;
+    }
+    setLoading(true);
+    setError(null);
+    setApiErrorMessage(null); // Limpiar errores API al recargar
+    try {
+      const data = await empresaService.getAllEmpresas(filtroNombre/*, filtroDetalle*/);
+      setEmpresas(data);
+    } catch (err) {
+      console.error(err);
+      setError('Error al cargar las empresas.');
+    } finally {
+      setLoading(false);
+    }
+  }, [filtroNombre, puedeVer /*, filtroDetalle*/]); // Añadir puedeVer como dependencia
+
+  useEffect(() => {
+    cargarEmpresas();
+  }, [cargarEmpresas]); // Ejecutar al montar y cuando cambien las dependencias de cargarEmpresas
+
+  const handleOpenModal = (empresa?: EmpresaDto) => {
+    setEditingEmpresa(empresa || null);
+    setApiErrorMessage(null); // Limpiar error API antes de abrir modal
+    setModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setModalOpen(false);
+    setEditingEmpresa(null);
+    // No limpiamos apiErrorMessage aquí, se limpia al intentar un nuevo submit o al recargar
+  };
+
+  const handleSubmitModal = async (data: CreateEmpresaDto | (UpdateEmpresaDto & { idEmpresa: number })) => {
+    setApiErrorMessage(null); // Limpiar error previo
+    // No necesitamos setLoading aquí, el modal lo maneja
+    try {
+      if (editingEmpresa && 'idEmpresa' in data) { // Es Update (verificamos si initialData existe Y data tiene id)
+        await empresaService.updateEmpresa(editingEmpresa.idEmpresa, data);
+      } else { // Es Create
+        await empresaService.createEmpresa(data as CreateEmpresaDto);
+      }
+      cargarEmpresas(); // Recargar lista en éxito
+      // handleCloseModal(); // El modal se cierra solo desde su propio onSubmit exitoso
+    } catch (err: any) {
+      console.error("Error en submit modal (padre):", err);
+      const message = axios.isAxiosError(err) && err.response?.data?.message
+                        ? err.response.data.message
+                        : 'Ocurrió un error inesperado al guardar la empresa.';
+      setApiErrorMessage(message);
+      throw err; // Re-lanzar para que el modal sepa que hubo error y no se cierre
+    }
+    // No poner finally setLoading(false) aquí, el modal lo controla
+  };
+
+  const handleDelete = async (id: number) => {
+    // Opcional: mostrar un mensaje de confirmación más detallado
+    if (window.confirm(`¿Está seguro de que desea eliminar esta empresa (ID: ${id})? Esta acción también eliminará los saldos asociados.`)) {
+       setApiErrorMessage(null); // Limpiar errores previos
+       try {
+        await empresaService.deleteEmpresa(id);
+        cargarEmpresas(); // Recargar la lista para reflejar la eliminación
+      } catch (err: any) {
+         console.error("Error al eliminar empresa:", err);
+         const message = axios.isAxiosError(err) && err.response?.data?.message
+                         ? err.response.data.message
+                         : 'Ocurrió un error inesperado al eliminar la empresa.';
+         setApiErrorMessage(message); // Mostrar error de API
+      }
+    }
+    handleMenuClose(); // Cerrar el menú de acciones
+  };
+
+  // --- Handlers para el menú y paginación (sin cambios respecto a Zonas/TiposPago) ---
+  const handleMenuOpen = (event: React.MouseEvent<HTMLElement>, empresa: EmpresaDto) => {
+    setAnchorEl(event.currentTarget);
+    setSelectedEmpresaRow(empresa);
+  };
+
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+    setSelectedEmpresaRow(null);
+  };
+
+   const handleChangePage = (_event: unknown, newPage: number) => {
+     setPage(newPage);
+   };
+
+   const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+     setRowsPerPage(parseInt(event.target.value, 10));
+     setPage(0);
+   };
+
+   // Datos a mostrar en la tabla actual según paginación
+   const displayData = empresas.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
+
+  // Si no tiene permiso para ver, mostrar mensaje y salir
+  if (!loading && !puedeVer) {
+      return (
+           <Box sx={{ p: 2 }}>
+              <Typography variant="h4" gutterBottom>Gestionar Empresas</Typography>
+              <Alert severity="error">{error || "No tiene permiso para acceder a esta sección."}</Alert>
+           </Box>
+      );
+  }
+
+  return (
+    <Box sx={{ p: 2 }}>
+      <Typography variant="h4" gutterBottom>
+        Gestionar Empresas
+      </Typography>
+
+      <Paper sx={{ p: 2, mb: 2 }}>
+         <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 2 }}>
+            <TextField
+                label="Filtrar por Nombre"
+                variant="outlined"
+                size="small"
+                value={filtroNombre}
+                onChange={(e) => setFiltroNombre(e.target.value)}
+                // Puedes añadir un botón de buscar explícito o dejar que filtre al escribir
+            />
+         </Box>
+         {/* Mostrar botón de agregar solo si tiene permiso */}
+         {puedeCrear && (
+             <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2 }}>
+             <Button
+               variant="contained"
+               startIcon={<AddIcon />}
+               onClick={() => handleOpenModal()}
+             >
+               Agregar Nueva Empresa
+             </Button>
+           </Box>
+        )}
+      </Paper>
+
+      {/* Indicador de carga */}
+      {loading && <Box sx={{ display: 'flex', justifyContent: 'center', my: 2 }}><CircularProgress /></Box>}
+      {/* Mensaje de error al cargar datos */}
+      {error && !loading && <Alert severity="error" sx={{my: 2}}>{error}</Alert>}
+      {/* Mensaje de error de la API (modal/delete) */}
+      {apiErrorMessage && <Alert severity="error" sx={{my: 2}}>{apiErrorMessage}</Alert>}
+
+      {/* Tabla de datos (solo si no está cargando y no hubo error de carga inicial) */}
+      {!loading && !error && (
+         <TableContainer component={Paper}>
+           <Table>
+             <TableHead>
+               <TableRow>
+                 <TableCell>Nombre</TableCell>
+                 <TableCell>Detalle</TableCell>
+                 {/* Mostrar columna de acciones solo si tiene permiso de modificar o eliminar */}
+                 {(puedeModificar || puedeEliminar) && <TableCell align="right">Acciones</TableCell>}
+               </TableRow>
+             </TableHead>
+             <TableBody>
+               {displayData.length === 0 && !loading ? (
+                  <TableRow><TableCell colSpan={(puedeModificar || puedeEliminar) ? 3 : 2} align="center">No se encontraron empresas.</TableCell></TableRow>
+               ) : (
+                 displayData.map((emp) => (
+                     <TableRow key={emp.idEmpresa}>
+                     <TableCell>{emp.nombre}</TableCell>
+                     <TableCell>{emp.detalle || '-'}</TableCell>
+                     {/* Mostrar botón de acciones solo si tiene permiso */}
+                     {(puedeModificar || puedeEliminar) && (
+                        <TableCell align="right">
+                            <IconButton
+                                onClick={(e) => handleMenuOpen(e, emp)}
+                                // Deshabilitar si no tiene ningún permiso específico (redundante por la condición de la celda, pero seguro)
+                                disabled={!puedeModificar && !puedeEliminar}
+                            >
+                                <MoreVertIcon />
+                            </IconButton>
+                        </TableCell>
+                     )}
+                     </TableRow>
+                 ))
+               )}
+             </TableBody>
+           </Table>
+           {/* Paginación */}
+           <TablePagination
+             rowsPerPageOptions={[5, 10, 25]}
+             component="div"
+             count={empresas.length}
+             rowsPerPage={rowsPerPage}
+             page={page}
+             onPageChange={handleChangePage}
+             onRowsPerPageChange={handleChangeRowsPerPage}
+             labelRowsPerPage="Filas por página:"
+           />
+         </TableContainer>
+       )}
+
+      {/* Menú contextual para acciones de fila */}
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleMenuClose}
+      >
+        {/* Mostrar opción Modificar solo si tiene permiso */}
+        {puedeModificar && (
+            <MenuItem onClick={() => { handleOpenModal(selectedEmpresaRow!); handleMenuClose(); }}>
+                Modificar
+            </MenuItem>
+        )}
+        {/* Mostrar opción Eliminar solo si tiene permiso */}
+        {puedeEliminar && (
+            <MenuItem onClick={() => handleDelete(selectedEmpresaRow!.idEmpresa)}>
+                Eliminar
+            </MenuItem>
+        )}
+        {/* Mensaje si no hay acciones disponibles (por si acaso) */}
+        {(!puedeModificar && !puedeEliminar) && <MenuItem disabled>Sin acciones</MenuItem>}
+      </Menu>
+
+      {/* Modal para Crear/Editar */}
+      <EmpresaFormModal
+        open={modalOpen}
+        onClose={handleCloseModal}
+        onSubmit={handleSubmitModal}
+        initialData={editingEmpresa}
+        errorMessage={apiErrorMessage} // Pasar el mensaje de error de la API al modal
+        clearErrorMessage={() => setApiErrorMessage(null)} // Pasar función para limpiar el error
+      />
+    </Box>
+  );
+};
+
+export default GestionarEmpresasPage;
--- a/Frontend/src/pages/Distribucion/GestionarZonasPage.tsx
+++ b/Frontend/src/pages/Distribucion/GestionarZonasPage.tsx
@@ -0,0 +1,244 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  Box, Typography, TextField, Button, Paper, IconButton, Menu, MenuItem,
+  Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TablePagination,
+  CircularProgress, Alert
+} from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import zonaService from '../../services/zonaService'; // Servicio de Zonas
+import type { ZonaDto } from '../../models/dtos/Zonas/ZonaDto'; // DTO de Zonas
+import type { CreateZonaDto } from '../../models/dtos/Zonas/CreateZonaDto'; // DTOs Create
+import type { UpdateZonaDto } from '../../models/dtos/Zonas/UpdateZonaDto'; // DTOs Update
+import ZonaFormModal from '../../components/Modals/ZonaFormModal'; // Modal de Zonas
+import { usePermissions } from '../../hooks/usePermissions'; // Hook de permisos
+import axios from 'axios'; // Para manejo de errores
+
+const GestionarZonasPage: React.FC = () => {
+  const [zonas, setZonas] = useState<ZonaDto[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [filtroNombre, setFiltroNombre] = useState('');
+  // const [filtroDescripcion, setFiltroDescripcion] = useState(''); // Si añades filtro por descripción
+
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editingZona, setEditingZona] = useState<ZonaDto | null>(null); // Usar ZonaDto aquí también
+  const [apiErrorMessage, setApiErrorMessage] = useState<string | null>(null);
+
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(5);
+
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [selectedZonaRow, setSelectedZonaRow] = useState<ZonaDto | null>(null);
+
+  const { tienePermiso, isSuperAdmin } = usePermissions();
+
+  // Ajustar códigos de permiso para Zonas
+  const puedeCrear = isSuperAdmin || tienePermiso("ZD002");
+  const puedeModificar = isSuperAdmin || tienePermiso("ZD003");
+  const puedeEliminar = isSuperAdmin || tienePermiso("ZD004");
+
+
+  const cargarZonas = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      // Usar servicio de zonas y filtros
+      const data = await zonaService.getAllZonas(filtroNombre/*, filtroDescripcion*/);
+      setZonas(data);
+    } catch (err) {
+      console.error(err);
+      setError('Error al cargar las zonas.');
+    } finally {
+      setLoading(false);
+    }
+  }, [filtroNombre/*, filtroDescripcion*/]); // Añadir dependencias de filtro
+
+  useEffect(() => {
+    cargarZonas();
+  }, [cargarZonas]);
+
+  const handleOpenModal = (zona?: ZonaDto) => {
+    setEditingZona(zona || null);
+    setApiErrorMessage(null);
+    setModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setModalOpen(false);
+    setEditingZona(null);
+  };
+
+  const handleSubmitModal = async (data: CreateZonaDto | UpdateZonaDto) => {
+    setApiErrorMessage(null);
+    try {
+      if (editingZona) { // Es Update
+        await zonaService.updateZona(editingZona.idZona, data as UpdateZonaDto);
+      } else { // Es Create
+        await zonaService.createZona(data as CreateZonaDto);
+      }
+      cargarZonas(); // Recargar lista
+    } catch (err: any) {
+      console.error("Error en submit modal (padre):", err);
+      if (axios.isAxiosError(err) && err.response) {
+        setApiErrorMessage(err.response.data?.message || 'Error al guardar la zona.');
+      } else {
+        setApiErrorMessage('Ocurrió un error inesperado al guardar la zona.');
+      }
+      throw err;
+    }
+  };
+
+
+  const handleDelete = async (id: number) => {
+    if (window.confirm('¿Está seguro de que desea eliminar esta zona? (Se marcará como inactiva)')) {
+      setApiErrorMessage(null);
+      try {
+        await zonaService.deleteZona(id); // Llama al soft delete
+        cargarZonas(); // Recarga la lista (la zona eliminada ya no debería aparecer si el filtro es solo activas)
+      } catch (err: any) {
+        console.error("Error al eliminar zona:", err);
+        if (axios.isAxiosError(err) && err.response) {
+          setApiErrorMessage(err.response.data?.message || 'Error al eliminar.');
+        } else {
+          setApiErrorMessage('Ocurrió un error inesperado al eliminar.');
+        }
+      }
+    }
+    handleMenuClose();
+  };
+
+  const handleMenuOpen = (event: React.MouseEvent<HTMLElement>, zona: ZonaDto) => {
+    setAnchorEl(event.currentTarget);
+    setSelectedZonaRow(zona);
+  };
+
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+    setSelectedZonaRow(null);
+  };
+
+  const handleChangePage = (_event: unknown, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+  // Adaptar para paginación
+  const displayData = zonas.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
+
+
+  return (
+    <Box sx={{ p: 2 }}>
+      <Typography variant="h4" gutterBottom>
+        Gestionar Zonas
+      </Typography>
+
+      <Paper sx={{ p: 2, mb: 2 }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 2 }}>
+          <TextField
+            label="Filtrar por Nombre"
+            variant="outlined"
+            size="small"
+            value={filtroNombre}
+            onChange={(e) => setFiltroNombre(e.target.value)}
+          />
+          {/* <TextField label="Filtrar por Descripción" ... /> */}
+        </Box>
+        {puedeCrear && (
+          <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2 }}>
+            <Button
+              variant="contained"
+              startIcon={<AddIcon />}
+              onClick={() => handleOpenModal()}
+              sx={{ mb: 2 }}
+            >
+              Agregar Nueva Zona
+            </Button>
+          </Box>
+        )}
+      </Paper>
+
+      {loading && <Box sx={{ display: 'flex', justifyContent: 'center', my: 2 }}><CircularProgress /></Box>}
+      {error && !loading && <Alert severity="error" sx={{ my: 2 }}>{error}</Alert>}
+      {apiErrorMessage && <Alert severity="error" sx={{ my: 2 }}>{apiErrorMessage}</Alert>}
+
+
+      {!loading && !error && (
+        <TableContainer component={Paper}>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableCell>Nombre</TableCell>
+                <TableCell>Descripción</TableCell>
+                <TableCell align="right">Acciones</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {displayData.length === 0 && !loading ? (
+                <TableRow><TableCell colSpan={3} align="center">No se encontraron zonas.</TableCell></TableRow>
+              ) : (
+                displayData.map((zona) => (
+                  <TableRow key={zona.idZona}>
+                    <TableCell>{zona.nombre}</TableCell>
+                    <TableCell>{zona.descripcion || '-'}</TableCell>
+                    <TableCell align="right">
+                      <IconButton
+                        onClick={(e) => handleMenuOpen(e, zona)}
+                        disabled={!puedeModificar && !puedeEliminar}
+                      >
+                        <MoreVertIcon />
+                      </IconButton>
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+          <TablePagination
+            rowsPerPageOptions={[5, 10, 25]}
+            component="div"
+            count={zonas.length}
+            rowsPerPage={rowsPerPage}
+            page={page}
+            onPageChange={handleChangePage}
+            onRowsPerPageChange={handleChangeRowsPerPage}
+            labelRowsPerPage="Filas por página:"
+          />
+        </TableContainer>
+      )}
+
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleMenuClose}
+      >
+        {puedeModificar && (
+          <MenuItem onClick={() => { handleOpenModal(selectedZonaRow!); handleMenuClose(); }}>
+            Modificar
+          </MenuItem>
+        )}
+        {puedeEliminar && (
+          <MenuItem onClick={() => handleDelete(selectedZonaRow!.idZona)}>
+            Eliminar
+          </MenuItem>
+        )}
+        {(!puedeModificar && !puedeEliminar) && <MenuItem disabled>Sin acciones</MenuItem>}
+      </Menu>
+
+      <ZonaFormModal
+        open={modalOpen}
+        onClose={handleCloseModal}
+        onSubmit={handleSubmitModal}
+        initialData={editingZona}
+        errorMessage={apiErrorMessage}
+        clearErrorMessage={() => setApiErrorMessage(null)}
+      />
+    </Box>
+  );
+};
+
+export default GestionarZonasPage;
--- a/Frontend/src/pages/Distribucion/ZonasPage.tsx
+++ b/Frontend/src/pages/Distribucion/ZonasPage.tsx
@@ -1,7 +0,0 @@
-import React from 'react';
-import { Typography } from '@mui/material';
-
-const ZonasPage: React.FC = () => {
-  return <Typography variant="h6">Página de Gestión de Zonas</Typography>;
-};
-export default ZonasPage;
--- a/Frontend/src/pages/HomePage.tsx
+++ b/Frontend/src/pages/HomePage.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Typography, Container } from '@mui/material';
+import { Typography, Container, Box } from '@mui/material';
+import logo from '../assets/eldia.png';

 const HomePage: React.FC = () => {
  return (
@@ -10,6 +11,21 @@ const HomePage: React.FC = () => {
      <Typography variant="body1">
        Seleccione una opción del menú principal para comenzar.
      </Typography>
+      <Box
+          component="div"
+          sx={{
+            marginTop: 20,
+            width: '100%',        // ocupa todo el ancho disponible
+            maxWidth: 429,        // pero no más de 429px
+            mx: 'auto',           // margin-left/right auto para centrar
+          }}
+        >
+          <img
+            src={logo}
+            alt="Logo"
+            style={{ width: '100%', height: 'auto', display: 'block' }}
+          />
+        </Box>
    </Container>
  );
 };
--- a/Frontend/src/pages/Impresion/GestionarEstadosBobinaPage.tsx
+++ b/Frontend/src/pages/Impresion/GestionarEstadosBobinaPage.tsx
@@ -0,0 +1,252 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  Box, Typography, TextField, Button, Paper, IconButton, Menu, MenuItem,
+  Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TablePagination,
+  CircularProgress, Alert
+} from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import estadoBobinaService from '../../services/estadoBobinaService';
+import type { EstadoBobinaDto } from '../../models/dtos/Impresion/EstadoBobinaDto';
+import type { CreateEstadoBobinaDto } from '../../models/dtos/Impresion/CreateEstadoBobinaDto';
+import type { UpdateEstadoBobinaDto } from '../../models/dtos/Impresion/UpdateEstadoBobinaDto';
+import EstadoBobinaFormModal from '../../components/Modals/EstadoBobinaFormModal';
+import { usePermissions } from '../../hooks/usePermissions';
+import axios from 'axios';
+
+const GestionarEstadosBobinaPage: React.FC = () => {
+  const [estadosBobina, setEstadosBobina] = useState<EstadoBobinaDto[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [filtroDenominacion, setFiltroDenominacion] = useState('');
+
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editingEstado, setEditingEstado] = useState<EstadoBobinaDto | null>(null);
+  const [apiErrorMessage, setApiErrorMessage] = useState<string | null>(null);
+
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(5);
+
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [selectedEstadoRow, setSelectedEstadoRow] = useState<EstadoBobinaDto | null>(null);
+
+  const { tienePermiso, isSuperAdmin } = usePermissions();
+
+  // Permisos para Estados de Bobina (ej: IB010 a IB013)
+  const puedeVer = isSuperAdmin || tienePermiso("IB010");
+  const puedeCrear = isSuperAdmin || tienePermiso("IB011");
+  const puedeModificar = isSuperAdmin || tienePermiso("IB012");
+  const puedeEliminar = isSuperAdmin || tienePermiso("IB013");
+
+  const cargarEstadosBobina = useCallback(async () => {
+    if (!puedeVer) {
+      setError("No tiene permiso para ver esta sección.");
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    setApiErrorMessage(null);
+    try {
+      const data = await estadoBobinaService.getAllEstadosBobina(filtroDenominacion);
+      setEstadosBobina(data);
+    } catch (err) {
+      console.error(err);
+      setError('Error al cargar los estados de bobina.');
+    } finally {
+      setLoading(false);
+    }
+  }, [filtroDenominacion, puedeVer]);
+
+  useEffect(() => {
+    cargarEstadosBobina();
+  }, [cargarEstadosBobina]);
+
+  const handleOpenModal = (estado?: EstadoBobinaDto) => {
+    setEditingEstado(estado || null);
+    setApiErrorMessage(null);
+    setModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setModalOpen(false);
+    setEditingEstado(null);
+  };
+
+  const handleSubmitModal = async (data: CreateEstadoBobinaDto | (UpdateEstadoBobinaDto & { idEstadoBobina: number })) => {
+    setApiErrorMessage(null);
+    try {
+      if (editingEstado && 'idEstadoBobina' in data) {
+        await estadoBobinaService.updateEstadoBobina(editingEstado.idEstadoBobina, data);
+      } else {
+        await estadoBobinaService.createEstadoBobina(data as CreateEstadoBobinaDto);
+      }
+      cargarEstadosBobina();
+    } catch (err: any) {
+      console.error("Error en submit modal (padre - EstadosBobina):", err);
+      const message = axios.isAxiosError(err) && err.response?.data?.message
+        ? err.response.data.message
+        : 'Ocurrió un error inesperado al guardar el estado de bobina.';
+      setApiErrorMessage(message);
+      throw err;
+    }
+  };
+
+  const handleDelete = async (id: number) => {
+    if (window.confirm(`¿Está seguro de que desea eliminar este estado de bobina (ID: ${id})?`)) {
+      setApiErrorMessage(null);
+      try {
+        await estadoBobinaService.deleteEstadoBobina(id);
+        cargarEstadosBobina();
+      } catch (err: any) {
+        console.error("Error al eliminar estado de bobina:", err);
+        const message = axios.isAxiosError(err) && err.response?.data?.message
+          ? err.response.data.message
+          : 'Ocurrió un error inesperado al eliminar el estado de bobina.';
+        setApiErrorMessage(message);
+      }
+    }
+    handleMenuClose();
+  };
+
+  const handleMenuOpen = (event: React.MouseEvent<HTMLElement>, estado: EstadoBobinaDto) => {
+    setAnchorEl(event.currentTarget);
+    setSelectedEstadoRow(estado);
+  };
+
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+    setSelectedEstadoRow(null);
+  };
+
+  const handleChangePage = (_event: unknown, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+  const displayData = estadosBobina.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
+
+  if (!loading && !puedeVer) {
+    return (
+      <Box sx={{ p: 2 }}>
+        <Typography variant="h4" gutterBottom>Gestionar Estados de Bobina</Typography>
+        <Alert severity="error">{error || "No tiene permiso para acceder a esta sección."}</Alert>
+      </Box>
+    );
+  }
+
+  return (
+    <Box sx={{ p: 2 }}>
+      <Typography variant="h4" gutterBottom>
+        Gestionar Estados de Bobina
+      </Typography>
+
+      <Paper sx={{ p: 2, mb: 2 }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 2 }}>
+          <TextField
+            label="Filtrar por Denominación"
+            variant="outlined"
+            size="small"
+            value={filtroDenominacion}
+            onChange={(e) => setFiltroDenominacion(e.target.value)}
+          />
+        </Box>
+        {puedeCrear && (
+          <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2 }}>
+            <Button
+              variant="contained"
+              startIcon={<AddIcon />}
+              onClick={() => handleOpenModal()}
+              sx={{ mb: 2 }}
+            >
+              Agregar Nuevo Estado
+            </Button>
+          </Box>
+        )}
+      </Paper>
+
+      {loading && <Box sx={{ display: 'flex', justifyContent: 'center', my: 2 }}><CircularProgress /></Box>}
+      {error && !loading && <Alert severity="error" sx={{ my: 2 }}>{error}</Alert>}
+      {apiErrorMessage && <Alert severity="error" sx={{ my: 2 }}>{apiErrorMessage}</Alert>}
+
+      {!loading && !error && (
+        <TableContainer component={Paper}>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableCell>Denominación</TableCell>
+                <TableCell>Observación</TableCell>
+                {(puedeModificar || puedeEliminar) && <TableCell align="right">Acciones</TableCell>}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {displayData.length === 0 && !loading ? (
+                <TableRow><TableCell colSpan={(puedeModificar || puedeEliminar) ? 3 : 2} align="center">No se encontraron estados de bobina.</TableCell></TableRow>
+              ) : (
+                displayData.map((estado) => (
+                  <TableRow key={estado.idEstadoBobina}>
+                    <TableCell>{estado.denominacion}</TableCell>
+                    <TableCell>{estado.obs || '-'}</TableCell>
+                    {(puedeModificar || puedeEliminar) && (
+                      <TableCell align="right">
+                        <IconButton
+                          onClick={(e) => handleMenuOpen(e, estado)}
+                          disabled={!puedeModificar && !puedeEliminar}
+                        >
+                          <MoreVertIcon />
+                        </IconButton>
+                      </TableCell>
+                    )}
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+          <TablePagination
+            rowsPerPageOptions={[5, 10, 25]}
+            component="div"
+            count={estadosBobina.length}
+            rowsPerPage={rowsPerPage}
+            page={page}
+            onPageChange={handleChangePage}
+            onRowsPerPageChange={handleChangeRowsPerPage}
+            labelRowsPerPage="Filas por página:"
+          />
+        </TableContainer>
+      )}
+
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleMenuClose}
+      >
+        {puedeModificar && (
+          <MenuItem onClick={() => { handleOpenModal(selectedEstadoRow!); handleMenuClose(); }}>
+            Modificar
+          </MenuItem>
+        )}
+        {puedeEliminar && (
+          <MenuItem onClick={() => handleDelete(selectedEstadoRow!.idEstadoBobina)}>
+            Eliminar
+          </MenuItem>
+        )}
+        {(!puedeModificar && !puedeEliminar) && <MenuItem disabled>Sin acciones</MenuItem>}
+      </Menu>
+
+      <EstadoBobinaFormModal
+        open={modalOpen}
+        onClose={handleCloseModal}
+        onSubmit={handleSubmitModal}
+        initialData={editingEstado}
+        errorMessage={apiErrorMessage}
+        clearErrorMessage={() => setApiErrorMessage(null)}
+      />
+    </Box>
+  );
+};
+
+export default GestionarEstadosBobinaPage;
--- a/Frontend/src/pages/Impresion/GestionarPlantasPage.tsx
+++ b/Frontend/src/pages/Impresion/GestionarPlantasPage.tsx
@@ -0,0 +1,263 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  Box, Typography, TextField, Button, Paper, IconButton, Menu, MenuItem,
+  Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TablePagination,
+  CircularProgress, Alert
+} from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import plantaService from '../../services/plantaService'; // Servicio de Plantas
+import type { PlantaDto } from '../../models/dtos/Impresion/PlantaDto';
+import type { CreatePlantaDto } from '../../models/dtos/Impresion/CreatePlantaDto';
+import type { UpdatePlantaDto } from '../../models/dtos/Impresion/UpdatePlantaDto';
+import PlantaFormModal from '../../components/Modals/PlantaFormModal'; // Modal de Plantas
+import { usePermissions } from '../../hooks/usePermissions';
+import axios from 'axios';
+
+const GestionarPlantasPage: React.FC = () => {
+  const [plantas, setPlantas] = useState<PlantaDto[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [filtroNombre, setFiltroNombre] = useState('');
+  const [filtroDetalle, setFiltroDetalle] = useState(''); // Añadir filtro por detalle si se desea
+
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editingPlanta, setEditingPlanta] = useState<PlantaDto | null>(null);
+  const [apiErrorMessage, setApiErrorMessage] = useState<string | null>(null);
+
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(5);
+
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [selectedPlantaRow, setSelectedPlantaRow] = useState<PlantaDto | null>(null);
+
+  const { tienePermiso, isSuperAdmin } = usePermissions();
+
+  // Permisos específicos para Plantas (IP001 a IP004)
+  const puedeVer = isSuperAdmin || tienePermiso("IP001");
+  const puedeCrear = isSuperAdmin || tienePermiso("IP002");
+  const puedeModificar = isSuperAdmin || tienePermiso("IP003");
+  const puedeEliminar = isSuperAdmin || tienePermiso("IP004");
+
+  const cargarPlantas = useCallback(async () => {
+    if (!puedeVer) {
+      setError("No tiene permiso para ver esta sección.");
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    setApiErrorMessage(null);
+    try {
+      // Pasar ambos filtros al servicio
+      const data = await plantaService.getAllPlantas(filtroNombre, filtroDetalle);
+      setPlantas(data);
+    } catch (err) {
+      console.error(err);
+      setError('Error al cargar las plantas de impresión.');
+    } finally {
+      setLoading(false);
+    }
+    // Añadir filtroDetalle a las dependencias si se usa
+  }, [filtroNombre, filtroDetalle, puedeVer]);
+
+  useEffect(() => {
+    cargarPlantas();
+  }, [cargarPlantas]);
+
+  const handleOpenModal = (planta?: PlantaDto) => {
+    setEditingPlanta(planta || null);
+    setApiErrorMessage(null);
+    setModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setModalOpen(false);
+    setEditingPlanta(null);
+  };
+
+  const handleSubmitModal = async (data: CreatePlantaDto | (UpdatePlantaDto & { idPlanta: number })) => {
+    setApiErrorMessage(null);
+    try {
+      if (editingPlanta && 'idPlanta' in data) {
+        await plantaService.updatePlanta(editingPlanta.idPlanta, data);
+      } else {
+        await plantaService.createPlanta(data as CreatePlantaDto);
+      }
+      cargarPlantas();
+    } catch (err: any) {
+      console.error("Error en submit modal (padre - Plantas):", err);
+      const message = axios.isAxiosError(err) && err.response?.data?.message
+        ? err.response.data.message
+        : 'Ocurrió un error inesperado al guardar la planta.';
+      setApiErrorMessage(message);
+      throw err;
+    }
+  };
+
+  const handleDelete = async (id: number) => {
+    if (window.confirm(`¿Está seguro de que desea eliminar esta planta (ID: ${id})?`)) {
+      setApiErrorMessage(null);
+      try {
+        await plantaService.deletePlanta(id);
+        cargarPlantas();
+      } catch (err: any) {
+        console.error("Error al eliminar planta:", err);
+        const message = axios.isAxiosError(err) && err.response?.data?.message
+          ? err.response.data.message
+          : 'Ocurrió un error inesperado al eliminar la planta.';
+        setApiErrorMessage(message);
+      }
+    }
+    handleMenuClose();
+  };
+
+  const handleMenuOpen = (event: React.MouseEvent<HTMLElement>, planta: PlantaDto) => {
+    setAnchorEl(event.currentTarget);
+    setSelectedPlantaRow(planta);
+  };
+
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+    setSelectedPlantaRow(null);
+  };
+
+  const handleChangePage = (_event: unknown, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+  const displayData = plantas.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
+
+  if (!loading && !puedeVer) {
+    return (
+      <Box sx={{ p: 2 }}>
+        <Typography variant="h4" gutterBottom>Gestionar Plantas de Impresión</Typography>
+        <Alert severity="error">{error || "No tiene permiso para acceder a esta sección."}</Alert>
+      </Box>
+    );
+  }
+
+  return (
+    <Box sx={{ p: 2 }}>
+      <Typography variant="h4" gutterBottom>
+        Gestionar Plantas de Impresión
+      </Typography>
+
+      <Paper sx={{ p: 2, mb: 2 }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 2 }}>
+          <TextField
+            label="Filtrar por Nombre"
+            variant="outlined"
+            size="small"
+            value={filtroNombre}
+            onChange={(e) => setFiltroNombre(e.target.value)}
+          />
+          <TextField
+            label="Filtrar por Detalle"
+            variant="outlined"
+            size="small"
+            value={filtroDetalle}
+            onChange={(e) => setFiltroDetalle(e.target.value)}
+          />
+          {/* <Button variant="contained" onClick={cargarPlantas}>Buscar</Button> */}
+        </Box>
+        {puedeCrear && (
+          <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2 }}>
+            <Button
+              variant="contained"
+              startIcon={<AddIcon />}
+              onClick={() => handleOpenModal()}
+              sx={{ mb: 2 }}
+            >
+              Agregar Nueva Planta
+            </Button>
+          </Box>
+        )}
+      </Paper>
+
+      {loading && <Box sx={{ display: 'flex', justifyContent: 'center', my: 2 }}><CircularProgress /></Box>}
+      {error && !loading && <Alert severity="error" sx={{ my: 2 }}>{error}</Alert>}
+      {apiErrorMessage && <Alert severity="error" sx={{ my: 2 }}>{apiErrorMessage}</Alert>}
+
+      {!loading && !error && (
+        <TableContainer component={Paper}>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableCell>Nombre</TableCell>
+                <TableCell>Detalle</TableCell>
+                {(puedeModificar || puedeEliminar) && <TableCell align="right">Acciones</TableCell>}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {displayData.length === 0 && !loading ? (
+                <TableRow><TableCell colSpan={(puedeModificar || puedeEliminar) ? 3 : 2} align="center">No se encontraron plantas de impresión.</TableCell></TableRow>
+              ) : (
+                displayData.map((planta) => (
+                  <TableRow key={planta.idPlanta}>
+                    <TableCell>{planta.nombre}</TableCell>
+                    <TableCell>{planta.detalle}</TableCell> {/* Detalle no es opcional */}
+                    {(puedeModificar || puedeEliminar) && (
+                      <TableCell align="right">
+                        <IconButton
+                          onClick={(e) => handleMenuOpen(e, planta)}
+                          disabled={!puedeModificar && !puedeEliminar}
+                        >
+                          <MoreVertIcon />
+                        </IconButton>
+                      </TableCell>
+                    )}
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+          <TablePagination
+            rowsPerPageOptions={[5, 10, 25]}
+            component="div"
+            count={plantas.length}
+            rowsPerPage={rowsPerPage}
+            page={page}
+            onPageChange={handleChangePage}
+            onRowsPerPageChange={handleChangeRowsPerPage}
+            labelRowsPerPage="Filas por página:"
+          />
+        </TableContainer>
+      )}
+
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleMenuClose}
+      >
+        {puedeModificar && (
+          <MenuItem onClick={() => { handleOpenModal(selectedPlantaRow!); handleMenuClose(); }}>
+            Modificar
+          </MenuItem>
+        )}
+        {puedeEliminar && (
+          <MenuItem onClick={() => handleDelete(selectedPlantaRow!.idPlanta)}>
+            Eliminar
+          </MenuItem>
+        )}
+        {(!puedeModificar && !puedeEliminar) && <MenuItem disabled>Sin acciones</MenuItem>}
+      </Menu>
+
+      <PlantaFormModal
+        open={modalOpen}
+        onClose={handleCloseModal}
+        onSubmit={handleSubmitModal}
+        initialData={editingPlanta}
+        errorMessage={apiErrorMessage}
+        clearErrorMessage={() => setApiErrorMessage(null)}
+      />
+    </Box>
+  );
+};
+
+export default GestionarPlantasPage;
--- a/Frontend/src/pages/Impresion/GestionarTiposBobinaPage.tsx
+++ b/Frontend/src/pages/Impresion/GestionarTiposBobinaPage.tsx
@@ -0,0 +1,251 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  Box, Typography, TextField, Button, Paper, IconButton, Menu, MenuItem,
+  Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TablePagination,
+  CircularProgress, Alert
+} from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import tipoBobinaService from '../../services/tipoBobinaService'; // Servicio específico
+import type { TipoBobinaDto } from '../../models/dtos/Impresion/TipoBobinaDto';
+import type { CreateTipoBobinaDto } from '../../models/dtos/Impresion/CreateTipoBobinaDto';
+import type { UpdateTipoBobinaDto } from '../../models/dtos/Impresion/UpdateTipoBobinaDto';
+import TipoBobinaFormModal from '../../components/Modals/TipoBobinaFormModal'; // Modal específico
+import { usePermissions } from '../../hooks/usePermissions';
+import axios from 'axios';
+
+const GestionarTiposBobinaPage: React.FC = () => {
+  const [tiposBobina, setTiposBobina] = useState<TipoBobinaDto[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [filtroDenominacion, setFiltroDenominacion] = useState('');
+
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editingTipoBobina, setEditingTipoBobina] = useState<TipoBobinaDto | null>(null);
+  const [apiErrorMessage, setApiErrorMessage] = useState<string | null>(null);
+
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(5);
+
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [selectedTipoBobinaRow, setSelectedTipoBobinaRow] = useState<TipoBobinaDto | null>(null);
+
+  const { tienePermiso, isSuperAdmin } = usePermissions();
+
+  // Permisos específicos para Tipos de Bobina (IB006 a IB009)
+  const puedeVer = isSuperAdmin || tienePermiso("IB006");
+  const puedeCrear = isSuperAdmin || tienePermiso("IB007");
+  const puedeModificar = isSuperAdmin || tienePermiso("IB008");
+  const puedeEliminar = isSuperAdmin || tienePermiso("IB009");
+
+  const cargarTiposBobina = useCallback(async () => {
+    if (!puedeVer) {
+      setError("No tiene permiso para ver esta sección.");
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    setApiErrorMessage(null);
+    try {
+      const data = await tipoBobinaService.getAllTiposBobina(filtroDenominacion);
+      setTiposBobina(data);
+    } catch (err) {
+      console.error(err);
+      setError('Error al cargar los tipos de bobina.');
+    } finally {
+      setLoading(false);
+    }
+  }, [filtroDenominacion, puedeVer]);
+
+  useEffect(() => {
+    cargarTiposBobina();
+  }, [cargarTiposBobina]);
+
+  const handleOpenModal = (tipoBobina?: TipoBobinaDto) => {
+    setEditingTipoBobina(tipoBobina || null);
+    setApiErrorMessage(null);
+    setModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setModalOpen(false);
+    setEditingTipoBobina(null);
+  };
+
+  const handleSubmitModal = async (data: CreateTipoBobinaDto | (UpdateTipoBobinaDto & { idTipoBobina: number })) => {
+    setApiErrorMessage(null);
+    try {
+      if (editingTipoBobina && 'idTipoBobina' in data) {
+        await tipoBobinaService.updateTipoBobina(editingTipoBobina.idTipoBobina, data);
+      } else {
+        await tipoBobinaService.createTipoBobina(data as CreateTipoBobinaDto);
+      }
+      cargarTiposBobina();
+    } catch (err: any) {
+      console.error("Error en submit modal (padre - TiposBobina):", err);
+      const message = axios.isAxiosError(err) && err.response?.data?.message
+        ? err.response.data.message
+        : 'Ocurrió un error inesperado al guardar el tipo de bobina.';
+      setApiErrorMessage(message);
+      throw err;
+    }
+  };
+
+  const handleDelete = async (id: number) => {
+    if (window.confirm(`¿Está seguro de que desea eliminar este tipo de bobina (ID: ${id})?`)) {
+      setApiErrorMessage(null);
+      try {
+        await tipoBobinaService.deleteTipoBobina(id);
+        cargarTiposBobina();
+      } catch (err: any) {
+        console.error("Error al eliminar tipo de bobina:", err);
+        const message = axios.isAxiosError(err) && err.response?.data?.message
+          ? err.response.data.message
+          : 'Ocurrió un error inesperado al eliminar el tipo de bobina.';
+        setApiErrorMessage(message);
+      }
+    }
+    handleMenuClose();
+  };
+
+  const handleMenuOpen = (event: React.MouseEvent<HTMLElement>, tipoBobina: TipoBobinaDto) => {
+    setAnchorEl(event.currentTarget);
+    setSelectedTipoBobinaRow(tipoBobina);
+  };
+
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+    setSelectedTipoBobinaRow(null);
+  };
+
+  const handleChangePage = (_event: unknown, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+  const displayData = tiposBobina.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
+
+  if (!loading && !puedeVer) {
+    return (
+      <Box sx={{ p: 2 }}>
+        <Typography variant="h4" gutterBottom>Gestionar Tipos de Bobina</Typography>
+        <Alert severity="error">{error || "No tiene permiso para acceder a esta sección."}</Alert>
+      </Box>
+    );
+  }
+
+  return (
+    <Box sx={{ p: 2 }}>
+      <Typography variant="h4" gutterBottom>
+        Gestionar Tipos de Bobina
+      </Typography>
+
+      <Paper sx={{ p: 2, mb: 2 }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 2 }}>
+          <TextField
+            label="Filtrar por Denominación"
+            variant="outlined"
+            size="small"
+            value={filtroDenominacion}
+            onChange={(e) => setFiltroDenominacion(e.target.value)}
+          />
+          {/* <Button variant="contained" onClick={cargarTiposBobina}>Buscar</Button> */}
+        </Box>
+        {puedeCrear && (
+          <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2 }}>
+            <Button
+              variant="contained"
+              startIcon={<AddIcon />}
+              onClick={() => handleOpenModal()}
+              sx={{ mb: 2 }}
+            >
+              Agregar Nuevo Tipo
+            </Button>
+          </Box>
+        )}
+      </Paper>
+
+      {loading && <Box sx={{ display: 'flex', justifyContent: 'center', my: 2 }}><CircularProgress /></Box>}
+      {error && !loading && <Alert severity="error" sx={{ my: 2 }}>{error}</Alert>}
+      {apiErrorMessage && <Alert severity="error" sx={{ my: 2 }}>{apiErrorMessage}</Alert>}
+
+      {!loading && !error && (
+        <TableContainer component={Paper}>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableCell>Denominación</TableCell>
+                {(puedeModificar || puedeEliminar) && <TableCell align="right">Acciones</TableCell>}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {displayData.length === 0 && !loading ? (
+                <TableRow><TableCell colSpan={(puedeModificar || puedeEliminar) ? 2 : 1} align="center">No se encontraron tipos de bobina.</TableCell></TableRow>
+              ) : (
+                displayData.map((tipo) => (
+                  <TableRow key={tipo.idTipoBobina}>
+                    <TableCell>{tipo.denominacion}</TableCell>
+                    {(puedeModificar || puedeEliminar) && (
+                      <TableCell align="right">
+                        <IconButton
+                          onClick={(e) => handleMenuOpen(e, tipo)}
+                          disabled={!puedeModificar && !puedeEliminar}
+                        >
+                          <MoreVertIcon />
+                        </IconButton>
+                      </TableCell>
+                    )}
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+          <TablePagination
+            rowsPerPageOptions={[5, 10, 25]}
+            component="div"
+            count={tiposBobina.length}
+            rowsPerPage={rowsPerPage}
+            page={page}
+            onPageChange={handleChangePage}
+            onRowsPerPageChange={handleChangeRowsPerPage}
+            labelRowsPerPage="Filas por página:"
+          />
+        </TableContainer>
+      )}
+
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleMenuClose}
+      >
+        {puedeModificar && (
+          <MenuItem onClick={() => { handleOpenModal(selectedTipoBobinaRow!); handleMenuClose(); }}>
+            Modificar
+          </MenuItem>
+        )}
+        {puedeEliminar && (
+          <MenuItem onClick={() => handleDelete(selectedTipoBobinaRow!.idTipoBobina)}>
+            Eliminar
+          </MenuItem>
+        )}
+        {(!puedeModificar && !puedeEliminar) && <MenuItem disabled>Sin acciones</MenuItem>}
+      </Menu>
+
+      <TipoBobinaFormModal
+        open={modalOpen}
+        onClose={handleCloseModal}
+        onSubmit={handleSubmitModal}
+        initialData={editingTipoBobina}
+        errorMessage={apiErrorMessage}
+        clearErrorMessage={() => setApiErrorMessage(null)}
+      />
+    </Box>
+  );
+};
+
+export default GestionarTiposBobinaPage;
--- a/Frontend/src/pages/Impresion/ImpresionIndexPage.tsx
+++ b/Frontend/src/pages/Impresion/ImpresionIndexPage.tsx
@@ -0,0 +1,71 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Tabs, Tab, Paper, Typography } from '@mui/material';
+import { Outlet, useNavigate, useLocation } from 'react-router-dom';
+
+// Define las sub-pestañas del módulo Impresión
+const impresionSubModules = [
+  { label: 'Plantas', path: 'plantas' },
+  { label: 'Tipos Bobina', path: 'tipos-bobina' },
+  { label: 'Estados Bobina', path: 'estados-bobina' },
+  // { label: 'Stock Bobinas', path: 'stock-bobinas' },
+  // { label: 'Tiradas', path: 'tiradas' },
+];
+
+const ImpresionIndexPage: React.FC = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [selectedSubTab, setSelectedSubTab] = useState<number | false>(false);
+
+  useEffect(() => {
+    const currentBasePath = '/impresion'; // Ruta base de este módulo
+    const subPath = location.pathname.startsWith(currentBasePath + '/')
+                      ? location.pathname.substring(currentBasePath.length + 1)
+                      : (location.pathname === currentBasePath ? impresionSubModules[0]?.path : undefined);
+
+    const activeTabIndex = impresionSubModules.findIndex(
+      (subModule) => subModule.path === subPath
+    );
+
+    if (activeTabIndex !== -1) {
+      setSelectedSubTab(activeTabIndex);
+    } else {
+       if (location.pathname === currentBasePath && impresionSubModules.length > 0) {
+         navigate(impresionSubModules[0].path, { replace: true });
+         setSelectedSubTab(0);
+       } else {
+          setSelectedSubTab(false);
+       }
+    }
+  }, [location.pathname, navigate]);
+
+  const handleSubTabChange = (_event: React.SyntheticEvent, newValue: number) => {
+    setSelectedSubTab(newValue);
+    navigate(impresionSubModules[newValue].path);
+  };
+
+  return (
+    <Box>
+      <Typography variant="h5" gutterBottom>Módulo de Impresión</Typography>
+      <Paper square elevation={1}>
+        <Tabs
+          value={selectedSubTab}
+          onChange={handleSubTabChange}
+          indicatorColor="primary"
+          textColor="primary"
+          variant="scrollable"
+          scrollButtons="auto"
+          aria-label="sub-módulos de impresión"
+        >
+          {impresionSubModules.map((subModule) => (
+            <Tab key={subModule.path} label={subModule.label} />
+          ))}
+        </Tabs>
+      </Paper>
+      <Box sx={{ pt: 2 }}>
+        <Outlet /> {/* Renderizará GestionarPlantasPage, etc. */}
+      </Box>
+    </Box>
+  );
+};
+
+export default ImpresionIndexPage;
--- a/Frontend/src/pages/LoginPage.tsx
+++ b/Frontend/src/pages/LoginPage.tsx
@@ -7,6 +7,8 @@ import type { LoginRequestDto } from '../models/dtos/LoginRequestDto'; // Usar t
 import { Container, TextField, Button, Typography, Box, Alert } from '@mui/material';
 import authService from '../services/authService';

+import logo from '../assets/eldia.png';
+
 const LoginPage: React.FC = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
@@ -40,9 +42,25 @@ const LoginPage: React.FC = () => {

  return (
    <Container component="main" maxWidth="xs">
+       {/* Contenedor responsive para la imagen */}
+       <Box
+          component="div"
+          sx={{
+            marginTop: 3,
+            width: '100%',        // ocupa todo el ancho disponible
+            maxWidth: 429,        // pero no más de 429px
+            mx: 'auto',           // margin-left/right auto para centrar
+          }}
+        >
+          <img
+            src={logo}
+            alt="Logo"
+            style={{ width: '100%', height: 'auto', display: 'block' }}
+          />
+        </Box>
      <Box
        sx={{
-          marginTop: 8,
+          marginTop: 3,
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
--- a/Frontend/src/routes/AppRoutes.tsx
+++ b/Frontend/src/routes/AppRoutes.tsx
@@ -17,12 +17,18 @@ import CanillasPage from '../pages/Distribucion/CanillasPage';
 import DistribuidoresPage from '../pages/Distribucion/DistribuidoresPage';
 import PublicacionesPage from '../pages/Distribucion/PublicacionesPage';
 import OtrosDestinosPage from '../pages/Distribucion/OtrosDestinosPage';
-import ZonasPage from '../pages/Distribucion/ZonasPage';
-import EmpresasPage from '../pages/Distribucion/EmpresasPage';
+import GestionarZonasPage from '../pages/Distribucion/GestionarZonasPage';
+import GestionarEmpresasPage from '../pages/Distribucion/GestionarEmpresasPage';
+
+// Impresión
+import ImpresionIndexPage from '../pages/Impresion/ImpresionIndexPage';
+import GestionarPlantasPage from '../pages/Impresion/GestionarPlantasPage';
+import GestionarTiposBobinaPage from '../pages/Impresion/GestionarTiposBobinaPage';
+import GestionarEstadosBobinaPage from '../pages/Impresion/GestionarEstadosBobinaPage';

 // Contables
 import ContablesIndexPage from '../pages/Contables/ContablesIndexPage';
-import GestionarTiposPagoPage from '../pages/Contables/GestionarTiposPagoPage'; // Asumiendo que lo moviste aquí
+import GestionarTiposPagoPage from '../pages/Contables/GestionarTiposPagoPage';

 // --- ProtectedRoute y PublicRoute SIN CAMBIOS ---
 const ProtectedRoute: React.FC<{ children: JSX.Element }> = ({ children }) => {
@@ -31,7 +37,7 @@ const ProtectedRoute: React.FC<{ children: JSX.Element }> = ({ children }) => {
  if (isLoading) return null;
  if (!isAuthenticated) {
    //    console.log("ProtectedRoute: Not authenticated, redirecting to /login");
-       return <Navigate to="/login" replace />;
+    return <Navigate to="/login" replace />;
  }
  // console.log("ProtectedRoute: Authenticated, rendering children");
  return children;
@@ -51,53 +57,61 @@ const PublicRoute: React.FC<{ children: JSX.Element }> = ({ children }) => {

 const MainLayoutWrapper: React.FC = () => (
  <MainLayout>
-      <Outlet />
+    <Outlet />
  </MainLayout>
 );

 // Placeholder simple
 const PlaceholderPage: React.FC<{ moduleName: string }> = ({ moduleName }) => (
-    <Typography variant="h5" sx={{ p:2 }}>Página Principal del Módulo: {moduleName}</Typography>
+  <Typography variant="h5" sx={{ p: 2 }}>Página Principal del Módulo: {moduleName}</Typography>
 );

 const AppRoutes = () => {
-return (
-  <BrowserRouter>
-    <Routes> {/* Un solo <Routes> de nivel superior */}
-      <Route path="/login" element={<PublicRoute><LoginPage /></PublicRoute>} />
+  return (
+    <BrowserRouter>
+      <Routes> {/* Un solo <Routes> de nivel superior */}
+        <Route path="/login" element={<PublicRoute><LoginPage /></PublicRoute>} />

-      {/* Rutas Protegidas que usan el MainLayout */}
-      <Route
-        path="/" // La ruta padre para todas las secciones protegidas
-        element={
-          <ProtectedRoute>
-             <MainLayoutWrapper/>
-          </ProtectedRoute>
-        }
-      >
+        {/* Rutas Protegidas que usan el MainLayout */}
+        <Route
+          path="/" // La ruta padre para todas las secciones protegidas
+          element={
+            <ProtectedRoute>
+              <MainLayoutWrapper />
+            </ProtectedRoute>
+          }
+        >
          {/* Rutas hijas que se renderizarán en el Outlet de MainLayoutWrapper */}
          <Route index element={<HomePage />} /> {/* Para la ruta exacta "/" */}

          {/* Módulo de Distribución (anidado) */}
          <Route path="distribucion" element={<DistribucionIndexPage />}>
-              <Route index element={<Navigate to="es-canillas" replace />} />
-              <Route path="es-canillas" element={<ESCanillasPage />} />
-              <Route path="control-devoluciones" element={<ControlDevolucionesPage />} />
-              <Route path="es-distribuidores" element={<ESDistribuidoresPage />} />
-              <Route path="salidas-otros-destinos" element={<SalidasOtrosDestinosPage />} />
-              <Route path="canillas" element={<CanillasPage />} />
-              <Route path="distribuidores" element={<DistribuidoresPage />} />
-              <Route path="publicaciones" element={<PublicacionesPage />} />
-              <Route path="otros-destinos" element={<OtrosDestinosPage />} />
-              <Route path="zonas" element={<ZonasPage />} />
-              <Route path="empresas" element={<EmpresasPage />} />
+            <Route index element={<Navigate to="es-canillas" replace />} />
+            <Route path="es-canillas" element={<ESCanillasPage />} />
+            <Route path="control-devoluciones" element={<ControlDevolucionesPage />} />
+            <Route path="es-distribuidores" element={<ESDistribuidoresPage />} />
+            <Route path="salidas-otros-destinos" element={<SalidasOtrosDestinosPage />} />
+            <Route path="canillas" element={<CanillasPage />} />
+            <Route path="distribuidores" element={<DistribuidoresPage />} />
+            <Route path="publicaciones" element={<PublicacionesPage />} />
+            <Route path="otros-destinos" element={<OtrosDestinosPage />} />
+            <Route path="zonas" element={<GestionarZonasPage />} />
+            <Route path="empresas" element={<GestionarEmpresasPage />} />
          </Route>

          {/* Módulo Contable (anidado) */}
          <Route path="contables" element={<ContablesIndexPage />}>
-              <Route index element={<Navigate to="tipos-pago" replace />} />
-              <Route path="tipos-pago" element={<GestionarTiposPagoPage />} />
-              {/* Futuras sub-rutas de contables aquí */}
+            <Route index element={<Navigate to="tipos-pago" replace />} />
+            <Route path="tipos-pago" element={<GestionarTiposPagoPage />} />
+            {/* Futuras sub-rutas de contables aquí */}
+          </Route>
+
+          {/* Módulo de Impresión (anidado) */}
+          <Route path="impresion" element={<ImpresionIndexPage />}>
+            <Route index element={<Navigate to="plantas" replace />} />
+            <Route path="plantas" element={<GestionarPlantasPage />} />
+            <Route path="tipos-bobina" element={<GestionarTiposBobinaPage />} />
+            <Route path="estados-bobina" element={<GestionarEstadosBobinaPage />} />
          </Route>

          {/* Otros Módulos Principales (estos son "finales", no tienen más hijos) */}
@@ -108,18 +122,18 @@ return (

          {/* Ruta catch-all DENTRO del layout protegido */}
          <Route path="*" element={<Navigate to="/" replace />} />
-      </Route> {/* Cierre de la ruta padre "/" */}
+        </Route> {/* Cierre de la ruta padre "/" */}

-      {/* Podrías tener un catch-all global aquí si una ruta no coincide EN ABSOLUTO,
+        {/* Podrías tener un catch-all global aquí si una ruta no coincide EN ABSOLUTO,
          pero el path="*" dentro de la ruta "/" ya debería manejar la mayoría de los casos
          después de un login exitoso.
          Si un usuario no autenticado intenta una ruta inválida, ProtectedRoute lo manda a /login.
      */}
-      {/* <Route path="*" element={<Navigate to="/login" replace />} /> */}
+        {/* <Route path="*" element={<Navigate to="/login" replace />} /> */}

-    </Routes>
-  </BrowserRouter>
-);
+      </Routes>
+    </BrowserRouter>
+  );
 };

 export default AppRoutes;
--- a/Frontend/src/services/empresaService.ts
+++ b/Frontend/src/services/empresaService.ts
@@ -0,0 +1,46 @@
+import apiClient from './apiClient';
+import type { EmpresaDto } from '../models/dtos/Empresas/EmpresaDto';
+import type { CreateEmpresaDto } from '../models/dtos/Empresas/CreateEmpresaDto';
+import type { UpdateEmpresaDto } from '../models/dtos/Empresas/UpdateEmpresaDto';
+
+const getAllEmpresas = async (nombreFilter?: string, detalleFilter?: string): Promise<EmpresaDto[]> => {
+    const params: Record<string, string> = {};
+    if (nombreFilter) params.nombre = nombreFilter;
+    if (detalleFilter) params.detalle = detalleFilter; // Asegúrate que la API soporte esto
+
+    // Llama a GET /api/empresas
+    const response = await apiClient.get<EmpresaDto[]>('/empresas', { params });
+    return response.data;
+};
+
+const getEmpresaById = async (id: number): Promise<EmpresaDto> => {
+     // Llama a GET /api/empresas/{id}
+    const response = await apiClient.get<EmpresaDto>(`/empresas/${id}`);
+    return response.data;
+};
+
+const createEmpresa = async (data: CreateEmpresaDto): Promise<EmpresaDto> => {
+    // Llama a POST /api/empresas
+    const response = await apiClient.post<EmpresaDto>('/empresas', data);
+    return response.data; // La API devuelve el objeto creado (201 Created)
+};
+
+const updateEmpresa = async (id: number, data: UpdateEmpresaDto): Promise<void> => {
+    // Llama a PUT /api/empresas/{id} (204 No Content en éxito)
+    await apiClient.put(`/empresas/${id}`, data);
+};
+
+const deleteEmpresa = async (id: number): Promise<void> => {
+    // Llama a DELETE /api/empresas/{id} (204 No Content en éxito)
+    await apiClient.delete(`/empresas/${id}`);
+};
+
+const empresaService = {
+    getAllEmpresas,
+    getEmpresaById,
+    createEmpresa,
+    updateEmpresa,
+    deleteEmpresa,
+};
+
+export default empresaService;
--- a/Frontend/src/services/estadoBobinaService.ts
+++ b/Frontend/src/services/estadoBobinaService.ts
@@ -0,0 +1,40 @@
+import apiClient from './apiClient';
+import type { EstadoBobinaDto } from '../models/dtos/Impresion/EstadoBobinaDto';
+import type { CreateEstadoBobinaDto } from '../models/dtos/Impresion/CreateEstadoBobinaDto';
+import type { UpdateEstadoBobinaDto } from '../models/dtos/Impresion/UpdateEstadoBobinaDto';
+
+const getAllEstadosBobina = async (denominacionFilter?: string): Promise<EstadoBobinaDto[]> => {
+    const params: Record<string, string> = {};
+    if (denominacionFilter) params.denominacion = denominacionFilter;
+
+    const response = await apiClient.get<EstadoBobinaDto[]>('/estadosbobina', { params });
+    return response.data;
+};
+
+const getEstadoBobinaById = async (id: number): Promise<EstadoBobinaDto> => {
+    const response = await apiClient.get<EstadoBobinaDto>(`/estadosbobina/${id}`);
+    return response.data;
+};
+
+const createEstadoBobina = async (data: CreateEstadoBobinaDto): Promise<EstadoBobinaDto> => {
+    const response = await apiClient.post<EstadoBobinaDto>('/estadosbobina', data);
+    return response.data;
+};
+
+const updateEstadoBobina = async (id: number, data: UpdateEstadoBobinaDto): Promise<void> => {
+    await apiClient.put(`/estadosbobina/${id}`, data);
+};
+
+const deleteEstadoBobina = async (id: number): Promise<void> => {
+    await apiClient.delete(`/estadosbobina/${id}`);
+};
+
+const estadoBobinaService = {
+    getAllEstadosBobina,
+    getEstadoBobinaById,
+    createEstadoBobina,
+    updateEstadoBobina,
+    deleteEstadoBobina,
+};
+
+export default estadoBobinaService;
--- a/Frontend/src/services/plantaService.ts
+++ b/Frontend/src/services/plantaService.ts
@@ -0,0 +1,46 @@
+import apiClient from './apiClient';
+import type { PlantaDto } from '../models/dtos/Impresion/PlantaDto';
+import type { CreatePlantaDto } from '../models/dtos/Impresion/CreatePlantaDto'; 
+import type { UpdatePlantaDto } from '../models/dtos/Impresion/UpdatePlantaDto';
+
+const getAllPlantas = async (nombreFilter?: string, detalleFilter?: string): Promise<PlantaDto[]> => {
+    const params: Record<string, string> = {};
+    if (nombreFilter) params.nombre = nombreFilter;
+    if (detalleFilter) params.detalle = detalleFilter; // La API debe soportar esto
+
+    // Llama a GET /api/plantas
+    const response = await apiClient.get<PlantaDto[]>('/plantas', { params });
+    return response.data;
+};
+
+const getPlantaById = async (id: number): Promise<PlantaDto> => {
+     // Llama a GET /api/plantas/{id}
+    const response = await apiClient.get<PlantaDto>(`/plantas/${id}`);
+    return response.data;
+};
+
+const createPlanta = async (data: CreatePlantaDto): Promise<PlantaDto> => {
+    // Llama a POST /api/plantas
+    const response = await apiClient.post<PlantaDto>('/plantas', data);
+    return response.data; // La API devuelve el objeto creado (201 Created)
+};
+
+const updatePlanta = async (id: number, data: UpdatePlantaDto): Promise<void> => {
+    // Llama a PUT /api/plantas/{id} (204 No Content en éxito)
+    await apiClient.put(`/plantas/${id}`, data);
+};
+
+const deletePlanta = async (id: number): Promise<void> => {
+    // Llama a DELETE /api/plantas/{id} (204 No Content en éxito)
+    await apiClient.delete(`/plantas/${id}`);
+};
+
+const plantaService = {
+    getAllPlantas,
+    getPlantaById,
+    createPlanta,
+    updatePlanta,
+    deletePlanta,
+};
+
+export default plantaService;
--- a/Frontend/src/services/tipoBobinaService.ts
+++ b/Frontend/src/services/tipoBobinaService.ts
@@ -0,0 +1,45 @@
+import apiClient from './apiClient';
+import type { TipoBobinaDto } from '../models/dtos/Impresion/TipoBobinaDto';
+import type { CreateTipoBobinaDto } from '../models/dtos/Impresion/CreateTipoBobinaDto';
+import type { UpdateTipoBobinaDto } from '../models/dtos/Impresion/UpdateTipoBobinaDto';
+
+const getAllTiposBobina = async (denominacionFilter?: string): Promise<TipoBobinaDto[]> => {
+    const params: Record<string, string> = {};
+    if (denominacionFilter) params.denominacion = denominacionFilter;
+
+    // Llama a GET /api/tiposbobina
+    const response = await apiClient.get<TipoBobinaDto[]>('/tiposbobina', { params });
+    return response.data;
+};
+
+const getTipoBobinaById = async (id: number): Promise<TipoBobinaDto> => {
+     // Llama a GET /api/tiposbobina/{id}
+    const response = await apiClient.get<TipoBobinaDto>(`/tiposbobina/${id}`);
+    return response.data;
+};
+
+const createTipoBobina = async (data: CreateTipoBobinaDto): Promise<TipoBobinaDto> => {
+    // Llama a POST /api/tiposbobina
+    const response = await apiClient.post<TipoBobinaDto>('/tiposbobina', data);
+    return response.data; // La API devuelve el objeto creado (201 Created)
+};
+
+const updateTipoBobina = async (id: number, data: UpdateTipoBobinaDto): Promise<void> => {
+    // Llama a PUT /api/tiposbobina/{id} (204 No Content en éxito)
+    await apiClient.put(`/tiposbobina/${id}`, data);
+};
+
+const deleteTipoBobina = async (id: number): Promise<void> => {
+    // Llama a DELETE /api/tiposbobina/{id} (204 No Content en éxito)
+    await apiClient.delete(`/tiposbobina/${id}`);
+};
+
+const tipoBobinaService = {
+    getAllTiposBobina,
+    getTipoBobinaById,
+    createTipoBobina,
+    updateTipoBobina,
+    deleteTipoBobina,
+};
+
+export default tipoBobinaService;
--- a/Frontend/src/services/zonaService.ts
+++ b/Frontend/src/services/zonaService.ts
@@ -0,0 +1,46 @@
+import apiClient from './apiClient';
+import type { ZonaDto } from '../models/dtos/Zonas/ZonaDto'; // DTO para recibir listas
+import type { CreateZonaDto } from '../models/dtos/Zonas/CreateZonaDto';
+import type { UpdateZonaDto } from '../models/dtos/Zonas/UpdateZonaDto';
+
+const getAllZonas = async (nombreFilter?: string, descripcionFilter?: string): Promise<ZonaDto[]> => {
+    const params: Record<string, string> = {};
+    if (nombreFilter) params.nombre = nombreFilter;
+    if (descripcionFilter) params.descripcion = descripcionFilter; // Asegúrate que la API soporte este filtro si lo necesitas
+
+    // Llama al GET /api/zonas (que por defecto devuelve solo activas según el servicio)
+    const response = await apiClient.get<ZonaDto[]>('/zonas', { params });
+    return response.data;
+};
+
+const getZonaById = async (id: number): Promise<ZonaDto> => {
+     // Llama al GET /api/zonas/{id} (que por defecto devuelve solo activas según el servicio)
+    const response = await apiClient.get<ZonaDto>(`/zonas/${id}`);
+    return response.data;
+};
+
+const createZona = async (data: CreateZonaDto): Promise<ZonaDto> => {
+    // Llama a POST /api/zonas
+    const response = await apiClient.post<ZonaDto>('/zonas', data);
+    return response.data; // La API devuelve el objeto creado
+};
+
+const updateZona = async (id: number, data: UpdateZonaDto): Promise<void> => {
+    // Llama a PUT /api/zonas/{id}
+    await apiClient.put(`/zonas/${id}`, data);
+};
+
+const deleteZona = async (id: number): Promise<void> => {
+    // Llama a DELETE /api/zonas/{id} (que hará el soft delete)
+    await apiClient.delete(`/zonas/${id}`);
+};
+
+const zonaService = {
+    getAllZonas,
+    getZonaById,
+    createZona,
+    updateZona,
+    deleteZona,
+};
+
+export default zonaService;