feat: Implementación CRUD Canillitas, Distribuidores y Precios de Publicación

Backend API:
- Canillitas (`dist_dtCanillas`):
  - Implementado CRUD completo (Modelos, DTOs, Repositorio, Servicio, Controlador).
  - Lógica para manejo de `Accionista`, `Baja`, `FechaBaja`.
  - Auditoría en `dist_dtCanillas_H`.
  - Validación de legajo único y lógica de empresa vs accionista.
- Distribuidores (`dist_dtDistribuidores`):
  - Implementado CRUD completo (Modelos, DTOs, Repositorio, Servicio, Controlador).
  - Auditoría en `dist_dtDistribuidores_H`.
  - Creación de saldos iniciales para el nuevo distribuidor en todas las empresas.
  - Verificación de NroDoc único y Nombre opcionalmente único.
- Precios de Publicación (`dist_Precios`):
  - Implementado CRUD básico (Modelos, DTOs, Repositorio, Servicio, Controlador).
  - Endpoints anidados bajo `/publicaciones/{idPublicacion}/precios`.
  - Lógica de negocio para cerrar período de precio anterior al crear uno nuevo.
  - Lógica de negocio para reabrir período de precio anterior al eliminar el último.
  - Auditoría en `dist_Precios_H`.
- Auditoría en Eliminación de Publicaciones:
  - Extendido `PublicacionService.EliminarAsync` para eliminar en cascada registros de precios, recargos, porcentajes de pago (distribuidores y canillitas) y secciones de publicación.
  - Repositorios correspondientes (`PrecioRepository`, `RecargoZonaRepository`, `PorcPagoRepository`, `PorcMonCanillaRepository`, `PubliSeccionRepository`) actualizados con métodos `DeleteByPublicacionIdAsync` que registran en sus respectivas tablas `_H` (si existen y se implementó la lógica).
  - Asegurada la correcta propagación del `idUsuario` para la auditoría en cascada.
- Correcciones de Nulabilidad:
  - Ajustados los métodos `MapToDto` y su uso en `CanillaService` y `PublicacionService` para manejar correctamente tipos anulables.

Frontend React:
- Canillitas:
  - `canillaService.ts`.
  - `CanillaFormModal.tsx` con selectores para Zona y Empresa, y lógica de Accionista.
  - `GestionarCanillitasPage.tsx` con filtros, paginación, y acciones (editar, toggle baja).
- Distribuidores:
  - `distribuidorService.ts`.
  - `DistribuidorFormModal.tsx` con múltiples campos y selector de Zona.
  - `GestionarDistribuidoresPage.tsx` con filtros, paginación, y acciones (editar, eliminar).
- Precios de Publicación:
  - `precioService.ts`.
  - `PrecioFormModal.tsx` para crear/editar períodos de precios (VigenciaD, VigenciaH opcional, precios por día).
  - `GestionarPreciosPublicacionPage.tsx` accesible desde la gestión de publicaciones, para listar y gestionar los períodos de precios de una publicación específica.
- Layout:
  - Reemplazado el uso de `Grid` por `Box` con Flexbox en `CanillaFormModal`, `GestionarCanillitasPage` (filtros), `DistribuidorFormModal` y `PrecioFormModal` para resolver problemas de tipos y mejorar la consistencia del layout de formularios.
- Navegación:
  - Actualizadas las rutas y pestañas para los nuevos módulos y sub-módulos.

Frontend/src/components/Modals/Distribucion/CanillaFormModal.tsx

@@ -0,0 +1,239 @@
+import React, { useState, useEffect } from 'react';
+import {
+    Modal, Box, Typography, TextField, Button, CircularProgress, Alert,
+    FormControl, InputLabel, Select, MenuItem, FormControlLabel, Checkbox
+} from '@mui/material';
+import type { CanillaDto } from '../../../models/dtos/Distribucion/CanillaDto';
+import type { CreateCanillaDto } from '../../../models/dtos/Distribucion/CreateCanillaDto';
+import type { UpdateCanillaDto } from '../../../models/dtos/Distribucion/UpdateCanillaDto';
+import type { ZonaDto } from '../../../models/dtos/Zonas/ZonaDto'; // Para el dropdown de zonas
+import type { EmpresaDto } from '../../../models/dtos/Distribucion/EmpresaDto'; // Para el dropdown de empresas
+import zonaService from '../../../services/Distribucion/zonaService';
+import empresaService from '../../../services/Distribucion/empresaService';
+
+const modalStyle = {
+    position: 'absolute' as 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: { xs: '90%', sm: 600 }, // Un poco más ancho
+    bgcolor: 'background.paper',
+    border: '2px solid #000',
+    boxShadow: 24,
+    p: 4,
+    maxHeight: '90vh',
+    overflowY: 'auto'
+};
+
+interface CanillaFormModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (data: CreateCanillaDto | UpdateCanillaDto, id?: number) => Promise<void>;
+  initialData?: CanillaDto | null;
+  errorMessage?: string | null;
+  clearErrorMessage: () => void;
+}
+
+const CanillaFormModal: React.FC<CanillaFormModalProps> = ({
+  open,
+  onClose,
+  onSubmit,
+  initialData,
+  errorMessage,
+  clearErrorMessage
+}) => {
+  const [legajo, setLegajo] = useState<string>(''); // Manejar como string para el TextField
+  const [nomApe, setNomApe] = useState('');
+  const [parada, setParada] = useState('');
+  const [idZona, setIdZona] = useState<number | string>('');
+  const [accionista, setAccionista] = useState(false);
+  const [obs, setObs] = useState('');
+  const [empresa, setEmpresa] = useState<number | string>(0); // 0 para N/A (accionista)
+
+  const [zonas, setZonas] = useState<ZonaDto[]>([]);
+  const [empresas, setEmpresas] = useState<EmpresaDto[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [loadingDropdowns, setLoadingDropdowns] = useState(false);
+  const [localErrors, setLocalErrors] = useState<{ [key: string]: string | null }>({});
+
+  const isEditing = Boolean(initialData);
+
+  useEffect(() => {
+    const fetchDropdownData = async () => {
+        setLoadingDropdowns(true);
+        try {
+            const [zonasData, empresasData] = await Promise.all([
+                zonaService.getAllZonas(), // Asume que este servicio devuelve zonas activas
+                empresaService.getAllEmpresas()
+            ]);
+            setZonas(zonasData);
+            setEmpresas(empresasData);
+        } catch (error) {
+            console.error("Error al cargar datos para dropdowns", error);
+            setLocalErrors(prev => ({...prev, dropdowns: 'Error al cargar zonas/empresas.'}));
+        } finally {
+            setLoadingDropdowns(false);
+        }
+    };
+
+    if (open) {
+        fetchDropdownData();
+        setLegajo(initialData?.legajo?.toString() || '');
+        setNomApe(initialData?.nomApe || '');
+        setParada(initialData?.parada || '');
+        setIdZona(initialData?.idZona || '');
+        setAccionista(initialData ? initialData.accionista : false);
+        setObs(initialData?.obs || '');
+        setEmpresa(initialData ? initialData.empresa : 0); // Si es accionista, empresa es 0
+        setLocalErrors({});
+        clearErrorMessage();
+    }
+  }, [open, initialData, clearErrorMessage]);
+
+
+  const validate = (): boolean => {
+    const errors: { [key: string]: string | null } = {};
+    if (!nomApe.trim()) errors.nomApe = 'Nombre y Apellido son obligatorios.';
+    if (!idZona) errors.idZona = 'Debe seleccionar una zona.';
+
+    const legajoNum = legajo ? parseInt(legajo, 10) : null;
+    if (legajo.trim() && (isNaN(legajoNum!) || legajoNum! < 0)) {
+        errors.legajo = 'Legajo debe ser un número positivo o vacío.';
+    }
+
+    // Lógica de empresa y accionista
+    if (accionista && empresa !== 0 && empresa !== '') {
+        errors.empresa = 'Si es Accionista, la Empresa debe ser N/A (0).';
+    }
+    if (!accionista && (empresa === 0 || empresa === '')) {
+        errors.empresa = 'Si no es Accionista, debe seleccionar una Empresa.';
+    }
+
+
+    setLocalErrors(errors);
+    return Object.keys(errors).length === 0;
+  };
+
+  const handleInputChange = (fieldName: string) => {
+    if (localErrors[fieldName]) {
+        setLocalErrors(prev => ({ ...prev, [fieldName]: null }));
+    }
+    if (errorMessage) clearErrorMessage();
+  };
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    clearErrorMessage();
+    if (!validate()) return;
+
+    setLoading(true);
+    try {
+      const legajoParsed = legajo.trim() ? parseInt(legajo, 10) : null;
+
+      const dataToSubmit = {
+          legajo: legajoParsed,
+          nomApe,
+          parada: parada || undefined,
+          idZona: Number(idZona),
+          accionista,
+          obs: obs || undefined,
+          empresa: Number(empresa)
+      };
+
+      if (isEditing && initialData) {
+        await onSubmit(dataToSubmit as UpdateCanillaDto, initialData.idCanilla);
+      } else {
+        await onSubmit(dataToSubmit as CreateCanillaDto);
+      }
+      onClose();
+    } catch (error: any) {
+      console.error("Error en submit de CanillaFormModal:", error);
+    } finally {
+       setLoading(false);
+    }
+  };
+
+  return (
+    <Modal open={open} onClose={onClose}>
+      <Box sx={modalStyle}>
+        <Typography variant="h6" component="h2" gutterBottom>
+          {isEditing ? 'Editar Canillita' : 'Agregar Nuevo Canillita'}
+        </Typography>
+        <Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
+            {/* SECCIÓN DE CAMPOS CON BOX Y FLEXBOX */}
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+                <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'flex-start' }}>
+                    <TextField label="Legajo" value={legajo} type="number"
+                        onChange={(e) => {setLegajo(e.target.value); handleInputChange('legajo');}}
+                        margin="dense" fullWidth error={!!localErrors.legajo} helperText={localErrors.legajo || ''}
+                        disabled={loading}
+                        sx={{ flex: 1, minWidth: 'calc(50% - 8px)' }}
+                    />
+                    <TextField label="Nombre y Apellido" value={nomApe} required
+                        onChange={(e) => {setNomApe(e.target.value); handleInputChange('nomApe');}}
+                        margin="dense" fullWidth error={!!localErrors.nomApe} helperText={localErrors.nomApe || ''}
+                        disabled={loading} autoFocus={!isEditing}
+                        sx={{ flex: 1, minWidth: 'calc(50% - 8px)' }}
+                    />
+                </Box>
+                <TextField label="Parada (Dirección)" value={parada}
+                    onChange={(e) => setParada(e.target.value)}
+                    margin="dense" fullWidth multiline rows={2} disabled={loading}
+                />
+                <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'flex-start', mt: 1 }}>
+                    <FormControl fullWidth margin="dense" error={!!localErrors.idZona} sx={{ flex: 1, minWidth: 'calc(50% - 8px)' }}>
+                        <InputLabel id="zona-select-label" required>Zona</InputLabel>
+                        <Select labelId="zona-select-label" label="Zona" value={idZona}
+                            onChange={(e) => {setIdZona(e.target.value as number); handleInputChange('idZona');}}
+                            disabled={loading || loadingDropdowns}
+                        >
+                            <MenuItem value="" disabled><em>Seleccione una zona</em></MenuItem>
+                            {zonas.map((z) => (<MenuItem key={z.idZona} value={z.idZona}>{z.nombre}</MenuItem>))}
+                        </Select>
+                        {localErrors.idZona && <Typography color="error" variant="caption">{localErrors.idZona}</Typography>}
+                    </FormControl>
+                    <FormControl fullWidth margin="dense" error={!!localErrors.empresa} sx={{ flex: 1, minWidth: 'calc(50% - 8px)' }}>
+                        <InputLabel id="empresa-select-label">Empresa</InputLabel>
+                        <Select labelId="empresa-select-label" label="Empresa" value={empresa}
+                            onChange={(e) => {setEmpresa(e.target.value as number); handleInputChange('empresa');}}
+                            disabled={loading || loadingDropdowns || accionista}
+                        >
+                            <MenuItem value={0}><em>N/A (Accionista)</em></MenuItem>
+                            {empresas.map((e) => (<MenuItem key={e.idEmpresa} value={e.idEmpresa}>{e.nombre}</MenuItem>))}
+                        </Select>
+                        {localErrors.empresa && <Typography color="error" variant="caption">{localErrors.empresa}</Typography>}
+                    </FormControl>
+                </Box>
+                <TextField label="Observaciones" value={obs}
+                    onChange={(e) => setObs(e.target.value)}
+                    margin="dense" fullWidth multiline rows={2} disabled={loading} sx={{mt:1}}
+                />
+                <Box sx={{mt:1}}>
+                    <FormControlLabel
+                        control={<Checkbox checked={accionista} onChange={(e) => {
+                            setAccionista(e.target.checked);
+                            if (e.target.checked) setEmpresa(0);
+                            handleInputChange('accionista');
+                            handleInputChange('empresa');
+                        }} disabled={loading}/>}
+                        label="Es Accionista"
+                    />
+                </Box>
+            </Box>
+
+          {errorMessage && <Alert severity="error" sx={{ mt: 2, width: '100%' }}>{errorMessage}</Alert>}
+          {localErrors.dropdowns && <Alert severity="warning" sx={{ mt: 1 }}>{localErrors.dropdowns}</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 || loadingDropdowns}>
+              {loading ? <CircularProgress size={24} /> : (isEditing ? 'Guardar Cambios' : 'Crear Canillita')}
+            </Button>
+          </Box>
+        </Box>
+      </Box>
+    </Modal>
+  );
+};
+
+export default CanillaFormModal;

Frontend/src/components/Modals/Distribucion/DistribuidorFormModal.tsx

@@ -0,0 +1,239 @@
+import React, { useState, useEffect } from 'react';
+import {
+    Modal, Box, Typography, TextField, Button, CircularProgress, Alert,
+    FormControl, InputLabel, Select, MenuItem
+} from '@mui/material';
+import type { DistribuidorDto } from '../../../models/dtos/Distribucion/DistribuidorDto';
+import type { CreateDistribuidorDto } from '../../../models/dtos/Distribucion/CreateDistribuidorDto';
+import type { UpdateDistribuidorDto } from '../../../models/dtos/Distribucion/UpdateDistribuidorDto';
+import type { ZonaDto } from '../../../models/dtos/Zonas/ZonaDto';
+import zonaService from '../../../services/Distribucion/zonaService';
+
+const modalStyle = {
+    position: 'absolute' as 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: { xs: '95%', sm: '80%', md: '600px' },
+    bgcolor: 'background.paper',
+    border: '2px solid #000',
+    boxShadow: 24,
+    p: 4,
+    maxHeight: '90vh',
+    overflowY: 'auto'
+};
+
+interface DistribuidorFormModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (data: CreateDistribuidorDto | UpdateDistribuidorDto, id?: number) => Promise<void>;
+  initialData?: DistribuidorDto | null;
+  errorMessage?: string | null;
+  clearErrorMessage: () => void;
+}
+
+const DistribuidorFormModal: React.FC<DistribuidorFormModalProps> = ({
+  open,
+  onClose,
+  onSubmit,
+  initialData,
+  errorMessage,
+  clearErrorMessage
+}) => {
+  const [nombre, setNombre] = useState('');
+  const [contacto, setContacto] = useState('');
+  const [nroDoc, setNroDoc] = useState('');
+  const [idZona, setIdZona] = useState<number | string>(''); // Puede ser string vacío
+  const [calle, setCalle] = useState('');
+  const [numero, setNumero] = useState('');
+  const [piso, setPiso] = useState('');
+  const [depto, setDepto] = useState('');
+  const [telefono, setTelefono] = useState('');
+  const [email, setEmail] = useState('');
+  const [localidad, setLocalidad] = useState('');
+
+  const [zonas, setZonas] = useState<ZonaDto[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [loadingZonas, setLoadingZonas] = useState(false);
+  const [localErrors, setLocalErrors] = useState<{ [key: string]: string | null }>({});
+
+  const isEditing = Boolean(initialData);
+
+  useEffect(() => {
+    const fetchZonas = async () => {
+        setLoadingZonas(true);
+        try {
+            const data = await zonaService.getAllZonas(); // Solo activas por defecto
+            setZonas(data);
+        } catch (error) {
+            console.error("Error al cargar zonas", error);
+            setLocalErrors(prev => ({...prev, zonas: 'Error al cargar zonas.'}));
+        } finally {
+            setLoadingZonas(false);
+        }
+    };
+
+    if (open) {
+        fetchZonas();
+        setNombre(initialData?.nombre || '');
+        setContacto(initialData?.contacto || '');
+        setNroDoc(initialData?.nroDoc || '');
+        setIdZona(initialData?.idZona || '');
+        setCalle(initialData?.calle || '');
+        setNumero(initialData?.numero || '');
+        setPiso(initialData?.piso || '');
+        setDepto(initialData?.depto || '');
+        setTelefono(initialData?.telefono || '');
+        setEmail(initialData?.email || '');
+        setLocalidad(initialData?.localidad || '');
+        setLocalErrors({});
+        clearErrorMessage();
+    }
+  }, [open, initialData, clearErrorMessage]);
+
+  const validate = (): boolean => {
+    const errors: { [key: string]: string | null } = {};
+    if (!nombre.trim()) errors.nombre = 'El nombre es obligatorio.';
+    if (!nroDoc.trim()) errors.nroDoc = 'El Nro. Documento es obligatorio.';
+    else if (nroDoc.trim().length > 11) errors.nroDoc = 'El Nro. Documento no debe exceder los 11 caracteres.';
+
+    if (email.trim() && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+        errors.email = 'Formato de email inválido.';
+    }
+    // No es obligatorio que IdZona tenga valor
+    setLocalErrors(errors);
+    return Object.keys(errors).length === 0;
+  };
+
+  const handleInputChange = (fieldName: string) => {
+    if (localErrors[fieldName]) {
+        setLocalErrors(prev => ({ ...prev, [fieldName]: null }));
+    }
+    if (errorMessage) clearErrorMessage();
+  };
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    clearErrorMessage();
+    if (!validate()) return;
+
+    setLoading(true);
+    try {
+      const dataToSubmit = {
+          nombre,
+          contacto: contacto || undefined,
+          nroDoc,
+          idZona: idZona ? Number(idZona) : null, // Enviar null si está vacío
+          calle: calle || undefined,
+          numero: numero || undefined,
+          piso: piso || undefined,
+          depto: depto || undefined,
+          telefono: telefono || undefined,
+          email: email || undefined,
+          localidad: localidad || undefined,
+      };
+
+      if (isEditing && initialData) {
+        await onSubmit(dataToSubmit as UpdateDistribuidorDto, initialData.idDistribuidor);
+      } else {
+        await onSubmit(dataToSubmit as CreateDistribuidorDto);
+      }
+      onClose();
+    } catch (error: any) {
+      console.error("Error en submit de DistribuidorFormModal:", error);
+    } finally {
+       setLoading(false);
+    }
+  };
+
+  return (
+    <Modal open={open} onClose={onClose}>
+      <Box sx={modalStyle}>
+        <Typography variant="h6" component="h2" gutterBottom>
+          {isEditing ? 'Editar Distribuidor' : 'Agregar Nuevo Distribuidor'}
+        </Typography>
+        <Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
+            {/* Usando Box con Flexbox para layout de dos columnas responsivo */}
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+                <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+                    <TextField label="Nombre Distribuidor" value={nombre} required
+                        onChange={(e) => {setNombre(e.target.value); handleInputChange('nombre');}}
+                        margin="dense" fullWidth error={!!localErrors.nombre} helperText={localErrors.nombre || ''}
+                        disabled={loading} autoFocus={!isEditing}
+                        sx={{ flex: 1, minWidth: 'calc(50% - 8px)' }} // -8px es la mitad del gap
+                    />
+                    <TextField label="Nro. Documento (CUIT/CUIL)" value={nroDoc} required
+                        onChange={(e) => {setNroDoc(e.target.value); handleInputChange('nroDoc');}}
+                        margin="dense" fullWidth error={!!localErrors.nroDoc} helperText={localErrors.nroDoc || ''}
+                        disabled={loading}
+                        sx={{ flex: 1, minWidth: 'calc(50% - 8px)' }}
+                    />
+                </Box>
+                <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', mt:1 }}>
+                     <TextField label="Contacto" value={contacto}
+                        onChange={(e) => setContacto(e.target.value)}
+                        margin="dense" fullWidth disabled={loading}
+                        sx={{ flex: 1, minWidth: 'calc(50% - 8px)' }}
+                    />
+                    <FormControl fullWidth margin="dense" error={!!localErrors.idZona} sx={{ flex: 1, minWidth: 'calc(50% - 8px)' }}>
+                        <InputLabel id="zona-dist-select-label">Zona (Opcional)</InputLabel>
+                        <Select labelId="zona-dist-select-label" label="Zona (Opcional)" value={idZona}
+                            onChange={(e) => {setIdZona(e.target.value as number); handleInputChange('idZona');}}
+                            disabled={loading || loadingZonas}
+                        >
+                            <MenuItem value=""><em>Ninguna</em></MenuItem>
+                            {zonas.map((z) => (<MenuItem key={z.idZona} value={z.idZona}>{z.nombre}</MenuItem>))}
+                        </Select>
+                    </FormControl>
+                </Box>
+                <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', mt:1 }}>
+                    <TextField label="Calle" value={calle} onChange={(e) => setCalle(e.target.value)} margin="dense"
+                        sx={{ flex: 3, minWidth: 'calc(60% - 8px)'}} // Más ancho para la calle
+                        disabled={loading}
+                    />
+                    <TextField label="Número" value={numero} onChange={(e) => setNumero(e.target.value)} margin="dense"
+                        sx={{ flex: 1, minWidth: 'calc(40% - 8px)'}}
+                        disabled={loading}
+                    />
+                </Box>
+                <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', mt:1 }}>
+                     <TextField label="Piso" value={piso} onChange={(e) => setPiso(e.target.value)} margin="dense"
+                        sx={{ flex: 1, minWidth: 'calc(50% - 8px)'}}
+                        disabled={loading}
+                    />
+                    <TextField label="Depto." value={depto} onChange={(e) => setDepto(e.target.value)} margin="dense"
+                        sx={{ flex: 1, minWidth: 'calc(50% - 8px)'}}
+                        disabled={loading}
+                    />
+                </Box>
+                 <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', mt:1 }}>
+                    <TextField label="Teléfono" value={telefono} onChange={(e) => setTelefono(e.target.value)} margin="dense"
+                        sx={{ flex: 1, minWidth: 'calc(50% - 8px)'}}
+                        disabled={loading}
+                    />
+                    <TextField label="Email" value={email} type="email"
+                        onChange={(e) => {setEmail(e.target.value); handleInputChange('email');}}
+                        margin="dense" fullWidth error={!!localErrors.email} helperText={localErrors.email || ''}
+                        disabled={loading}
+                        sx={{ flex: 1, minWidth: 'calc(50% - 8px)' }}
+                    />
+                </Box>
+                <TextField label="Localidad" value={localidad} onChange={(e) => setLocalidad(e.target.value)} margin="dense" fullWidth disabled={loading} sx={{mt:1}}/>
+            </Box>
+
+          {errorMessage && <Alert severity="error" sx={{ mt: 2, width: '100%' }}>{errorMessage}</Alert>}
+          {localErrors.zonas && <Alert severity="warning" sx={{ mt: 1 }}>{localErrors.zonas}</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 || loadingZonas}>
+              {loading ? <CircularProgress size={24} /> : (isEditing ? 'Guardar Cambios' : 'Crear Distribuidor')}
+            </Button>
+          </Box>
+        </Box>
+      </Box>
+    </Modal>
+  );
+};
+
+export default DistribuidorFormModal;

Frontend/src/components/Modals/Distribucion/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/Distribucion/EmpresaDto';
+import type { CreateEmpresaDto } from '../../../models/dtos/Distribucion/CreateEmpresaDto';
+import type { UpdateEmpresaDto } from '../../../models/dtos/Distribucion/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;

Frontend/src/components/Modals/Distribucion/OtroDestinoFormModal.tsx

@@ -0,0 +1,128 @@
+import React, { useState, useEffect } from 'react';
+import { Modal, Box, Typography, TextField, Button, CircularProgress, Alert } from '@mui/material';
+import type { OtroDestinoDto } from '../../models/dtos/Distribucion/OtroDestinoDto';
+import type { CreateOtroDestinoDto } from '../../models/dtos/Distribucion/CreateOtroDestinoDto';
+import type { UpdateOtroDestinoDto } from '../../models/dtos/Distribucion/UpdateOtroDestinoDto';
+
+const modalStyle = { /* ... (mismo estilo) ... */
+    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 OtroDestinoFormModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (data: CreateOtroDestinoDto | (UpdateOtroDestinoDto & { idDestino: number })) => Promise<void>;
+  initialData?: OtroDestinoDto | null;
+  errorMessage?: string | null;
+  clearErrorMessage: () => void;
+}
+
+const OtroDestinoFormModal: React.FC<OtroDestinoFormModalProps> = ({
+  open,
+  onClose,
+  onSubmit,
+  initialData,
+  errorMessage,
+  clearErrorMessage
+}) => {
+  const [nombre, setNombre] = useState('');
+  const [obs, setObs] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [localErrorNombre, setLocalErrorNombre] = useState<string | null>(null);
+
+  const isEditing = Boolean(initialData);
+
+  useEffect(() => {
+    if (open) {
+        setNombre(initialData?.nombre || '');
+        setObs(initialData?.obs || '');
+        setLocalErrorNombre(null);
+        clearErrorMessage();
+    }
+  }, [open, initialData, clearErrorMessage]);
+
+   const handleInputChange = () => {
+      if (localErrorNombre) setLocalErrorNombre(null);
+      if (errorMessage) clearErrorMessage();
+  };
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setLocalErrorNombre(null);
+    clearErrorMessage();
+
+    if (!nombre.trim()) {
+        setLocalErrorNombre('El nombre es obligatorio.');
+        return;
+    }
+
+    setLoading(true);
+    try {
+      const dataToSubmit = { nombre, obs: obs || undefined };
+
+      if (isEditing && initialData) {
+        await onSubmit({ ...dataToSubmit, idDestino: initialData.idDestino });
+      } else {
+        await onSubmit(dataToSubmit as CreateOtroDestinoDto);
+      }
+      onClose();
+    } catch (error: any) {
+      console.error("Error en submit de OtroDestinoFormModal:", error);
+    } finally {
+       setLoading(false);
+    }
+  };
+
+  return (
+    <Modal open={open} onClose={onClose}>
+      <Box sx={modalStyle}>
+        <Typography variant="h6" component="h2">
+          {isEditing ? 'Editar Otro Destino' : 'Agregar Nuevo Destino'}
+        </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={!!localErrorNombre}
+            helperText={localErrorNombre || ''}
+            disabled={loading}
+            autoFocus
+          />
+          <TextField
+            label="Observación (Opcional)"
+            fullWidth
+            value={obs}
+            onChange={(e) => setObs(e.target.value)}
+            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 OtroDestinoFormModal;

Frontend/src/components/Modals/Distribucion/PrecioFormModal.tsx

@@ -0,0 +1,225 @@
+import React, { useState, useEffect } from 'react';
+import {
+    Modal, Box, Typography, TextField, Button, CircularProgress, Alert,
+    InputAdornment
+    // Quitar Grid si no se usa
+} from '@mui/material';
+import type { PrecioDto } from '../../../models/dtos/Distribucion/PrecioDto';
+import type { CreatePrecioDto } from '../../../models/dtos/Distribucion/CreatePrecioDto';
+import type { UpdatePrecioDto } from '../../../models/dtos/Distribucion/UpdatePrecioDto';
+
+const modalStyle = {
+    position: 'absolute' as 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: { xs: '95%', sm: '80%', md: '700px' },
+    bgcolor: 'background.paper',
+    border: '2px solid #000',
+    boxShadow: 24,
+    p: 4,
+    maxHeight: '90vh',
+    overflowY: 'auto'
+};
+
+const diasSemana = ["Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sabado", "Domingo"] as const;
+type DiaSemana = typeof diasSemana[number];
+
+interface PrecioFormModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (data: CreatePrecioDto | UpdatePrecioDto, idPrecio?: number) => Promise<void>;
+  idPublicacion: number;
+  initialData?: PrecioDto | null;
+  errorMessage?: string | null;
+  clearErrorMessage: () => void;
+}
+
+const PrecioFormModal: React.FC<PrecioFormModalProps> = ({
+  open,
+  onClose,
+  onSubmit,
+  idPublicacion,
+  initialData,
+  errorMessage,
+  clearErrorMessage
+}) => {
+  const [vigenciaD, setVigenciaD] = useState('');
+  const [vigenciaH, setVigenciaH] = useState('');
+  const [preciosDia, setPreciosDia] = useState<Record<DiaSemana, string>>({
+    Lunes: '', Martes: '', Miercoles: '', Jueves: '', Viernes: '', Sabado: '', Domingo: ''
+  });
+
+  const [loading, setLoading] = useState(false);
+  const [localErrors, setLocalErrors] = useState<{ [key: string]: string | null }>({});
+  const isEditing = Boolean(initialData);
+
+  useEffect(() => {
+    if (open) {
+        setVigenciaD(initialData?.vigenciaD || '');
+        setVigenciaH(initialData?.vigenciaH || '');
+        const initialPrecios: Record<DiaSemana, string> = { Lunes: '', Martes: '', Miercoles: '', Jueves: '', Viernes: '', Sabado: '', Domingo: '' };
+        if (initialData) {
+            diasSemana.forEach(dia => {
+                const key = dia.toLowerCase() as keyof Omit<PrecioDto, 'idPrecio' | 'idPublicacion' | 'vigenciaD' | 'vigenciaH'>;
+                initialPrecios[dia] = initialData[key]?.toString() || '';
+            });
+        }
+        setPreciosDia(initialPrecios);
+        setLocalErrors({});
+        clearErrorMessage();
+    }
+  }, [open, initialData, clearErrorMessage]);
+
+  const validate = (): boolean => {
+    const errors: { [key: string]: string | null } = {};
+    if (!isEditing && !vigenciaD.trim()) {
+        errors.vigenciaD = 'La Vigencia Desde es obligatoria.';
+    } else if (vigenciaD.trim() && !/^\d{4}-\d{2}-\d{2}$/.test(vigenciaD)) {
+        errors.vigenciaD = 'Formato de fecha inválido (YYYY-MM-DD).';
+    }
+
+    if (vigenciaH.trim() && !/^\d{4}-\d{2}-\d{2}$/.test(vigenciaH)) {
+        errors.vigenciaH = 'Formato de fecha inválido (YYYY-MM-DD).';
+    } else if (vigenciaH.trim() && vigenciaD.trim() && new Date(vigenciaH) < new Date(vigenciaD)) {
+        errors.vigenciaH = 'Vigencia Hasta no puede ser anterior a Vigencia Desde.';
+    }
+
+    let alMenosUnPrecio = false;
+    diasSemana.forEach(dia => {
+        const valor = preciosDia[dia];
+        if (valor.trim()) {
+            alMenosUnPrecio = true;
+            if (isNaN(parseFloat(valor)) || parseFloat(valor) < 0) {
+                errors[dia.toLowerCase()] = `Precio de ${dia} inválido.`;
+            }
+        }
+    });
+    if (!isEditing && !alMenosUnPrecio) {
+        errors.dias = 'Debe ingresar al menos un precio para un día de la semana.';
+    }
+
+    setLocalErrors(errors);
+    return Object.keys(errors).length === 0;
+  };
+
+  const handlePrecioDiaChange = (dia: DiaSemana, value: string) => {
+    setPreciosDia(prev => ({ ...prev, [dia]: value }));
+    if (localErrors[dia.toLowerCase()] || localErrors.dias) {
+        setLocalErrors(prev => ({ ...prev, [dia.toLowerCase()]: null, dias: null }));
+    }
+    if (errorMessage) clearErrorMessage();
+  };
+  const handleDateChange = (setter: React.Dispatch<React.SetStateAction<string>>, fieldName: string) => (e: React.ChangeEvent<HTMLInputElement>) => {
+    setter(e.target.value);
+    if (localErrors[fieldName]) {
+        setLocalErrors(prev => ({ ...prev, [fieldName]: null }));
+    }
+    if (errorMessage) clearErrorMessage();
+  };
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    clearErrorMessage();
+    if (!validate()) return;
+
+    setLoading(true);
+    try {
+      const preciosNumericos: Partial<Record<keyof Omit<PrecioDto, 'idPrecio'|'idPublicacion'|'vigenciaD'|'vigenciaH'>, number | null>> = {};
+        diasSemana.forEach(dia => {
+            const valor = preciosDia[dia].trim();
+            // Convertir el nombre del día a la clave correcta del DTO (ej. "Lunes" -> "lunes")
+            const key = dia.toLowerCase() as keyof typeof preciosNumericos;
+            preciosNumericos[key] = valor ? parseFloat(valor) : null;
+        });
+
+
+      if (isEditing && initialData) {
+        const dataToSubmit: UpdatePrecioDto = {
+            vigenciaH: vigenciaH.trim() ? vigenciaH : null,
+            ...preciosNumericos // Spread de los precios de los días
+        };
+        await onSubmit(dataToSubmit, initialData.idPrecio);
+      } else {
+        const dataToSubmit: CreatePrecioDto = {
+            idPublicacion,
+            vigenciaD,
+            ...preciosNumericos
+        };
+        await onSubmit(dataToSubmit);
+      }
+      onClose();
+    } catch (error: any) {
+      console.error("Error en submit de PrecioFormModal:", error);
+    } finally {
+       setLoading(false);
+    }
+  };
+
+  return (
+    <Modal open={open} onClose={onClose}>
+      <Box sx={modalStyle}>
+        <Typography variant="h6" component="h2" gutterBottom>
+          {isEditing ? 'Editar Período de Precio' : 'Agregar Nuevo Período de Precio'}
+        </Typography>
+        <Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
+            {/* Sección de Vigencias */}
+            <Box sx={{ display: 'flex', gap: 2, mb: 2, flexWrap: 'wrap' }}>
+                <TextField label="Vigencia Desde" type="date" value={vigenciaD} required={!isEditing}
+                    onChange={handleDateChange(setVigenciaD, 'vigenciaD')} margin="dense"
+                    error={!!localErrors.vigenciaD} helperText={localErrors.vigenciaD || ''}
+                    disabled={loading || isEditing}
+                    InputLabelProps={{ shrink: true }}
+                    sx={{ flex: 1, minWidth: isEditing ? 'calc(50% - 8px)' : '100%' }}
+                    autoFocus={!isEditing}
+                />
+                {isEditing && (
+                    <TextField label="Vigencia Hasta (Opcional)" type="date" value={vigenciaH}
+                        onChange={handleDateChange(setVigenciaH, 'vigenciaH')} margin="dense"
+                        error={!!localErrors.vigenciaH} helperText={localErrors.vigenciaH || ''}
+                        disabled={loading}
+                        InputLabelProps={{ shrink: true }}
+                        sx={{ flex: 1, minWidth: 'calc(50% - 8px)' }}
+                    />
+                )}
+            </Box>
+
+            {/* Sección de Precios por Día con Flexbox */}
+            <Typography variant="subtitle1" sx={{mt: 2, mb: 1}}>Precios por Día:</Typography>
+            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
+                {diasSemana.map(dia => (
+                    <Box key={dia} sx={{ flexBasis: { xs: 'calc(50% - 8px)', sm: 'calc(33.33% - 11px)', md: 'calc(25% - 12px)' }, minWidth: '120px' }}>
+                         {/* El ajuste de -Xpx en flexBasis es aproximado para compensar el gap. 
+                             Para 3 columnas (33.33%): gap es 16px, se distribuye entre 2 espacios -> 16/2 * 2/3 = ~11px
+                             Para 4 columnas (25%): gap es 16px, se distribuye entre 3 espacios -> 16/3 * 3/4 = 12px
+                         */}
+                        <TextField label={dia} type="number"
+                            value={preciosDia[dia]}
+                            onChange={(e) => handlePrecioDiaChange(dia, e.target.value)}
+                            margin="dense" fullWidth
+                            error={!!localErrors[dia.toLowerCase()]} helperText={localErrors[dia.toLowerCase()] || ''}
+                            disabled={loading}
+                            InputProps={{ startAdornment: <InputAdornment position="start">$</InputAdornment> }}
+                            inputProps={{ step: "0.01", lang:"es-AR" }}
+                        />
+                    </Box>
+                ))}
+            </Box>
+            {localErrors.dias && <Alert severity="error" sx={{width: '100%', mt:1}}>{localErrors.dias}</Alert>}
+
+
+          {errorMessage && <Alert severity="error" sx={{ mt: 2, width: '100%' }}>{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 Período')}
+            </Button>
+          </Box>
+        </Box>
+      </Box>
+    </Modal>
+  );
+};
+
+export default PrecioFormModal;

Frontend/src/components/Modals/Distribucion/PublicacionFormModal.tsx

@@ -0,0 +1,180 @@
+import React, { useState, useEffect } from 'react';
+import {
+    Modal, Box, Typography, TextField, Button, CircularProgress, Alert,
+    FormControl, InputLabel, Select, MenuItem, FormControlLabel, Checkbox
+} from '@mui/material';
+import type { PublicacionDto } from '../../../models/dtos/Distribucion/PublicacionDto';
+import type { CreatePublicacionDto } from '../../../models/dtos/Distribucion/CreatePublicacionDto';
+import type { UpdatePublicacionDto } from '../../../models/dtos/Distribucion/UpdatePublicacionDto';
+import type { EmpresaDto } from '../../../models/dtos/Distribucion/EmpresaDto';
+import empresaService from '../../../services/Distribucion/empresaService'; // Para cargar empresas
+
+const modalStyle = { /* ... (mismo estilo) ... */
+    position: 'absolute' as 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: { xs: '90%', sm: 500 },
+    bgcolor: 'background.paper',
+    border: '2px solid #000',
+    boxShadow: 24,
+    p: 4,
+    maxHeight: '90vh',
+    overflowY: 'auto'
+};
+
+interface PublicacionFormModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (data: CreatePublicacionDto | UpdatePublicacionDto, id?: number) => Promise<void>;
+  initialData?: PublicacionDto | null;
+  errorMessage?: string | null;
+  clearErrorMessage: () => void;
+}
+
+const PublicacionFormModal: React.FC<PublicacionFormModalProps> = ({
+  open,
+  onClose,
+  onSubmit,
+  initialData,
+  errorMessage,
+  clearErrorMessage
+}) => {
+  const [nombre, setNombre] = useState('');
+  const [observacion, setObservacion] = useState('');
+  const [idEmpresa, setIdEmpresa] = useState<number | string>('');
+  const [ctrlDevoluciones, setCtrlDevoluciones] = useState(false);
+  const [habilitada, setHabilitada] = useState(true);
+
+  const [empresas, setEmpresas] = useState<EmpresaDto[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [loadingEmpresas, setLoadingEmpresas] = useState(false);
+  const [localErrors, setLocalErrors] = useState<{ [key: string]: string | null }>({});
+
+  const isEditing = Boolean(initialData);
+
+  useEffect(() => {
+    const fetchEmpresas = async () => {
+        setLoadingEmpresas(true);
+        try {
+            const data = await empresaService.getAllEmpresas();
+            setEmpresas(data);
+        } catch (error) {
+            console.error("Error al cargar empresas", error);
+            setLocalErrors(prev => ({...prev, empresas: 'Error al cargar empresas.'}));
+        } finally {
+            setLoadingEmpresas(false);
+        }
+    };
+
+    if (open) {
+        fetchEmpresas();
+        setNombre(initialData?.nombre || '');
+        setObservacion(initialData?.observacion || '');
+        setIdEmpresa(initialData?.idEmpresa || '');
+        setCtrlDevoluciones(initialData ? initialData.ctrlDevoluciones : false);
+        setHabilitada(initialData ? initialData.habilitada : true);
+        setLocalErrors({});
+        clearErrorMessage();
+    }
+  }, [open, initialData, clearErrorMessage]);
+
+  const validate = (): boolean => {
+    const errors: { [key: string]: string | null } = {};
+    if (!nombre.trim()) errors.nombre = 'El nombre es obligatorio.';
+    if (!idEmpresa) errors.idEmpresa = 'Debe seleccionar una empresa.';
+    setLocalErrors(errors);
+    return Object.keys(errors).length === 0;
+  };
+
+  const handleInputChange = (fieldName: string) => {
+    if (localErrors[fieldName]) {
+        setLocalErrors(prev => ({ ...prev, [fieldName]: null }));
+    }
+    if (errorMessage) clearErrorMessage();
+  };
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    clearErrorMessage();
+    if (!validate()) return;
+
+    setLoading(true);
+    try {
+      const dataToSubmit = {
+          nombre,
+          observacion: observacion || undefined,
+          idEmpresa: Number(idEmpresa),
+          ctrlDevoluciones,
+          habilitada
+      };
+
+      if (isEditing && initialData) {
+        await onSubmit(dataToSubmit as UpdatePublicacionDto, initialData.idPublicacion);
+      } else {
+        await onSubmit(dataToSubmit as CreatePublicacionDto);
+      }
+      onClose();
+    } catch (error: any) {
+      console.error("Error en submit de PublicacionFormModal:", error);
+    } finally {
+       setLoading(false);
+    }
+  };
+
+  return (
+    <Modal open={open} onClose={onClose}>
+      <Box sx={modalStyle}>
+        <Typography variant="h6" component="h2" gutterBottom>
+          {isEditing ? 'Editar Publicación' : 'Agregar Nueva Publicación'}
+        </Typography>
+        <Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
+             <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+                <TextField label="Nombre Publicación" value={nombre} required
+                    onChange={(e) => {setNombre(e.target.value); handleInputChange('nombre');}}
+                    margin="dense" fullWidth error={!!localErrors.nombre} helperText={localErrors.nombre || ''}
+                    disabled={loading} autoFocus={!isEditing}
+                />
+                <FormControl fullWidth margin="dense" error={!!localErrors.idEmpresa}>
+                    <InputLabel id="empresa-pub-select-label" required>Empresa</InputLabel>
+                    <Select labelId="empresa-pub-select-label" label="Empresa" value={idEmpresa}
+                        onChange={(e) => {setIdEmpresa(e.target.value as number); handleInputChange('idEmpresa');}}
+                        disabled={loading || loadingEmpresas}
+                    >
+                        <MenuItem value="" disabled><em>Seleccione una empresa</em></MenuItem>
+                        {empresas.map((e) => (<MenuItem key={e.idEmpresa} value={e.idEmpresa}>{e.nombre}</MenuItem>))}
+                    </Select>
+                    {localErrors.idEmpresa && <Typography color="error" variant="caption">{localErrors.idEmpresa}</Typography>}
+                </FormControl>
+                <TextField label="Observación (Opcional)" value={observacion}
+                    onChange={(e) => setObservacion(e.target.value)}
+                    margin="dense" fullWidth multiline rows={3} disabled={loading}
+                />
+                <Box sx={{ display: 'flex', justifyContent: 'space-around', mt: 1, flexWrap: 'wrap' }}>
+                    <FormControlLabel
+                        control={<Checkbox checked={ctrlDevoluciones} onChange={(e) => setCtrlDevoluciones(e.target.checked)} disabled={loading}/>}
+                        label="Controla Devoluciones"
+                    />
+                    <FormControlLabel
+                        control={<Checkbox checked={habilitada} onChange={(e) => setHabilitada(e.target.checked)} disabled={loading}/>}
+                        label="Habilitada"
+                    />
+                </Box>
+            </Box>
+
+          {errorMessage && <Alert severity="error" sx={{ mt: 2, width: '100%' }}>{errorMessage}</Alert>}
+          {localErrors.empresas && <Alert severity="warning" sx={{ mt: 1 }}>{localErrors.empresas}</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 || loadingEmpresas}>
+              {loading ? <CircularProgress size={24} /> : (isEditing ? 'Guardar Cambios' : 'Crear Publicación')}
+            </Button>
+          </Box>
+        </Box>
+      </Box>
+    </Modal>
+  );
+};
+
+export default PublicacionFormModal;

Frontend/src/components/Modals/Distribucion/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;