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.

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>
 

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)

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;

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;

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;

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;

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>
   );
 };

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;

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;

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;

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;

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',