Final de creación de Módulos de Reportes. Se procede a testeos y ordenamientos...

Frontend/src/pages/Reportes/SeleccionaReporteConsumoBobinasSeccion.tsx

@@ -0,0 +1,155 @@
+import React, { useState, useEffect } from 'react';
+import {
+    Box, Typography, TextField, Button, CircularProgress, Alert,
+    FormControl, InputLabel, Select, MenuItem, FormControlLabel, Checkbox
+} from '@mui/material';
+import type { PlantaDto } from '../../models/dtos/Impresion/PlantaDto';
+import plantaService from '../../services/Impresion/plantaService';
+
+interface SeleccionaReporteConsumoBobinasSeccionProps {
+  onGenerarReporte: (params: {
+    fechaDesde: string;
+    fechaHasta: string;
+    idPlanta?: number | null;
+    consolidado: boolean;
+  }) => Promise<void>;
+  onCancel: () => void;
+  isLoading?: boolean;
+  apiErrorMessage?: string | null;
+}
+
+const SeleccionaReporteConsumoBobinasSeccion: React.FC<SeleccionaReporteConsumoBobinasSeccionProps> = ({
+  onGenerarReporte,
+  onCancel,
+  isLoading,
+  apiErrorMessage
+}) => {
+  const [fechaDesde, setFechaDesde] = useState<string>(new Date().toISOString().split('T')[0]);
+  const [fechaHasta, setFechaHasta] = useState<string>(new Date().toISOString().split('T')[0]);
+  const [idPlanta, setIdPlanta] = useState<number | string>('');
+  const [consolidado, setConsolidado] = useState<boolean>(false);
+
+  const [plantas, setPlantas] = useState<PlantaDto[]>([]);
+  const [loadingDropdowns, setLoadingDropdowns] = useState(false);
+  const [localErrors, setLocalErrors] = useState<{ [key: string]: string | null }>({});
+
+  useEffect(() => {
+    const fetchPlantas = async () => {
+      setLoadingDropdowns(true);
+      try {
+        const plantasData = await plantaService.getAllPlantas();
+        setPlantas(plantasData);
+      } catch (error) {
+        console.error("Error al cargar plantas:", error);
+        setLocalErrors(prev => ({ ...prev, dropdowns: 'Error al cargar plantas.' }));
+      } finally {
+        setLoadingDropdowns(false);
+      }
+    };
+    fetchPlantas();
+  }, []);
+
+  useEffect(() => {
+    if (consolidado) {
+      setIdPlanta('');
+    }
+  }, [consolidado]);
+
+  const validate = (): boolean => {
+    const errors: { [key: string]: string | null } = {};
+    if (!fechaDesde) errors.fechaDesde = 'Fecha Desde es obligatoria.';
+    if (!fechaHasta) errors.fechaHasta = 'Fecha Hasta es obligatoria.';
+    if (fechaDesde && fechaHasta && new Date(fechaDesde) > new Date(fechaHasta)) {
+      errors.fechaHasta = 'Fecha Hasta no puede ser anterior a Fecha Desde.';
+    }
+    if (!consolidado && !idPlanta) {
+      errors.idPlanta = 'Seleccione una planta si no es consolidado.';
+    }
+    setLocalErrors(errors);
+    return Object.keys(errors).length === 0;
+  };
+
+  const handleGenerar = () => {
+    if (!validate()) return;
+    onGenerarReporte({
+      fechaDesde,
+      fechaHasta,
+      idPlanta: consolidado ? null : Number(idPlanta),
+      consolidado
+    });
+  };
+
+  return (
+    <Box sx={{ p: 2, border: '1px solid #ccc', borderRadius: '4px', minWidth: 380 }}>
+      <Typography variant="h6" gutterBottom>
+        Parámetros: Consumo de Bobinas por Sección
+      </Typography>
+      <TextField
+        label="Fecha Desde"
+        type="date"
+        value={fechaDesde}
+        onChange={(e) => { setFechaDesde(e.target.value); setLocalErrors(p => ({ ...p, fechaDesde: null, fechaHasta: null })); }}
+        margin="normal"
+        fullWidth
+        required
+        error={!!localErrors.fechaDesde}
+        helperText={localErrors.fechaDesde}
+        disabled={isLoading}
+        InputLabelProps={{ shrink: true }}
+      />
+      <TextField
+        label="Fecha Hasta"
+        type="date"
+        value={fechaHasta}
+        onChange={(e) => { setFechaHasta(e.target.value); setLocalErrors(p => ({ ...p, fechaHasta: null })); }}
+        margin="normal"
+        fullWidth
+        required
+        error={!!localErrors.fechaHasta}
+        helperText={localErrors.fechaHasta}
+        disabled={isLoading}
+        InputLabelProps={{ shrink: true }}
+      />
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={consolidado}
+            onChange={(e) => setConsolidado(e.target.checked)}
+            disabled={isLoading}
+          />
+        }
+        label="Consolidado (Todas las Plantas)"
+        sx={{ mt: 1, mb: 1 }}
+      />
+      <FormControl fullWidth margin="normal" error={!!localErrors.idPlanta} disabled={isLoading || loadingDropdowns || consolidado}>
+        <InputLabel id="planta-select-label-consumo" required={!consolidado}>Planta</InputLabel>
+        <Select
+          labelId="planta-select-label-consumo"
+          label="Planta"
+          value={consolidado ? '' : idPlanta}
+          onChange={(e) => { setIdPlanta(e.target.value as number); setLocalErrors(p => ({ ...p, idPlanta: null })); }}
+        >
+          <MenuItem value="" disabled><em>{consolidado ? 'N/A (Consolidado)' : 'Seleccione una planta'}</em></MenuItem>
+          {plantas.map((p) => (
+            <MenuItem key={p.idPlanta} value={p.idPlanta}>{p.nombre}</MenuItem>
+          ))}
+        </Select>
+        {localErrors.idPlanta && <Typography color="error" variant="caption" sx={{ml:1.5}}>{localErrors.idPlanta}</Typography>}
+      </FormControl>
+
+      {apiErrorMessage && <Alert severity="error" sx={{ mt: 2 }}>{apiErrorMessage}</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={onCancel} color="secondary" disabled={isLoading}>
+          Cancelar
+        </Button>
+        <Button onClick={handleGenerar} variant="contained" disabled={isLoading || loadingDropdowns}>
+          {isLoading ? <CircularProgress size={24} /> : 'Generar Reporte'}
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default SeleccionaReporteConsumoBobinasSeccion;