Feat Se Añade Total a Canillas Page

Frontend/src/pages/Distribucion/GestionarEntradasSalidasCanillaPage.tsx

@@ -88,7 +88,7 @@ const GestionarEntradasSalidasCanillaPage: React.FC = () => {
         setLoadingFiltersDropdown(false); // Detiene el spinner de los filtros
         return;
       }
-      
+
       setLoadingFiltersDropdown(true);
       setError(null);
       try {
@@ -130,14 +130,14 @@ const GestionarEntradasSalidasCanillaPage: React.FC = () => {
 
   const cargarMovimientos = useCallback(async () => {
     if (!puedeVer) {
-      setError("No tiene permiso para ver esta sección."); 
-      setLoading(false); 
-      return; 
+      setError("No tiene permiso para ver esta sección.");
+      setLoading(false);
+      return;
     }
     if (!filtroFecha || !filtroIdCanillitaSeleccionado) {
-        if (loading) setLoading(false);
-        setMovimientos([]);
-        return;
+      if (loading) setLoading(false);
+      setMovimientos([]);
+      return;
     }
     setLoading(true); setError(null); setApiErrorMessage(null);
     try {
@@ -164,37 +164,37 @@ const GestionarEntradasSalidasCanillaPage: React.FC = () => {
 
   useEffect(() => {
     if (filtroFecha && filtroIdCanillitaSeleccionado) {
-        cargarMovimientos();
+      cargarMovimientos();
     } else {
-        setMovimientos([]);
-        if (loading) setLoading(false);
+      setMovimientos([]);
+      if (loading) setLoading(false);
     }
   }, [cargarMovimientos, filtroFecha, filtroIdCanillitaSeleccionado]);
-  
+
   const handleOpenModal = (item?: EntradaSalidaCanillaDto) => {
     if (!puedeCrear && !item) {
-        setApiErrorMessage("No tiene permiso para registrar nuevos movimientos.");
-        return;
+      setApiErrorMessage("No tiene permiso para registrar nuevos movimientos.");
+      return;
     }
     if (item && !puedeModificar) {
-        setApiErrorMessage("No tiene permiso para modificar movimientos.");
-        return;
+      setApiErrorMessage("No tiene permiso para modificar movimientos.");
+      return;
     }
 
     if (item) {
-        setEditingMovimiento(item);
-        setPrefillModalData(null);
+      setEditingMovimiento(item);
+      setPrefillModalData(null);
     } else {
-        const canillitaSeleccionado = destinatariosDropdown.find(
-            c => c.idCanilla === Number(filtroIdCanillitaSeleccionado)
-        );
-        setEditingMovimiento(null);
-        setPrefillModalData({
-            fecha: filtroFecha,
-            idCanilla: filtroIdCanillitaSeleccionado,
-            nombreCanilla: canillitaSeleccionado?.nomApe,
-            idPublicacion: filtroIdPublicacion
-        });
+      const canillitaSeleccionado = destinatariosDropdown.find(
+        c => c.idCanilla === Number(filtroIdCanillitaSeleccionado)
+      );
+      setEditingMovimiento(null);
+      setPrefillModalData({
+        fecha: filtroFecha,
+        idCanilla: filtroIdCanillitaSeleccionado,
+        nombreCanilla: canillitaSeleccionado?.nomApe,
+        idPublicacion: filtroIdPublicacion
+      });
     }
     setApiErrorMessage(null);
     setModalOpen(true);
@@ -224,7 +224,7 @@ const GestionarEntradasSalidasCanillaPage: React.FC = () => {
     });
   };
   const handleSelectAllForLiquidar = (event: React.ChangeEvent<HTMLInputElement>) => {
-     if (event.target.checked) {
+    if (event.target.checked) {
       const newSelectedIds = new Set(movimientos.filter(m => !m.liquidado).map(m => m.idParte));
       setSelectedIdsParaLiquidar(newSelectedIds);
     } else {
@@ -248,17 +248,17 @@ const GestionarEntradasSalidasCanillaPage: React.FC = () => {
     const fechaLiquidacionDate = new Date(fechaLiquidacionDialog + 'T00:00:00Z');
     let fechaMovimientoMasReciente: Date | null = null;
     selectedIdsParaLiquidar.forEach(idParte => {
-        const movimiento = movimientos.find(m => m.idParte === idParte);
-        if (movimiento && movimiento.fecha) {
-            const movFecha = new Date(movimiento.fecha.split('T')[0] + 'T00:00:00Z');
-            if (fechaMovimientoMasReciente === null || movFecha.getTime() > (fechaMovimientoMasReciente as Date).getTime()) {
-                fechaMovimientoMasReciente = movFecha;
-            }
+      const movimiento = movimientos.find(m => m.idParte === idParte);
+      if (movimiento && movimiento.fecha) {
+        const movFecha = new Date(movimiento.fecha.split('T')[0] + 'T00:00:00Z');
+        if (fechaMovimientoMasReciente === null || movFecha.getTime() > (fechaMovimientoMasReciente as Date).getTime()) {
+          fechaMovimientoMasReciente = movFecha;
         }
+      }
     });
     if (fechaMovimientoMasReciente !== null && fechaLiquidacionDate.getTime() < (fechaMovimientoMasReciente as Date).getTime()) {
-        setApiErrorMessage(`La fecha de liquidación (${fechaLiquidacionDate.toLocaleDateString('es-AR', {timeZone: 'UTC'})}) no puede ser inferior a la fecha del movimiento más reciente a liquidar (${(fechaMovimientoMasReciente as Date).toLocaleDateString('es-AR', {timeZone: 'UTC'})}).`);
-        return;
+      setApiErrorMessage(`La fecha de liquidación (${fechaLiquidacionDate.toLocaleDateString('es-AR', { timeZone: 'UTC' })}) no puede ser inferior a la fecha del movimiento más reciente a liquidar (${(fechaMovimientoMasReciente as Date).toLocaleDateString('es-AR', { timeZone: 'UTC' })}).`);
+      return;
     }
     setApiErrorMessage(null);
     setLoading(true);
@@ -277,9 +277,9 @@ const GestionarEntradasSalidasCanillaPage: React.FC = () => {
       if (movimientoParaTicket && !movimientoParaTicket.canillaEsAccionista) {
         console.log("Liquidación exitosa, generando ticket para canillita NO accionista:", movimientoParaTicket.idCanilla);
         await handleImprimirTicketLiquidacion(
-            movimientoParaTicket.idCanilla,
-            movimientoParaTicket.fecha, 
-            false
+          movimientoParaTicket.idCanilla,
+          movimientoParaTicket.fecha,
+          false
         );
       } else if (movimientoParaTicket && movimientoParaTicket.canillaEsAccionista) {
         console.log("Liquidación exitosa para accionista. No se genera ticket automáticamente.");
@@ -344,9 +344,13 @@ const GestionarEntradasSalidasCanillaPage: React.FC = () => {
   };
   const displayData = movimientos.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
 
-  const totalARendirVisible = useMemo(() => 
+  const totalARendirVisible = useMemo(() =>
     displayData.filter(m => !m.liquidado).reduce((sum, item) => sum + item.montoARendir, 0)
-  , [displayData]);
+    , [displayData]);
+
+  const montoARendirAll = useMemo(() =>
+    movimientos.reduce((sum, item) => sum + item.montoARendir, 0)
+    , [movimientos]);
 
   if (!puedeVer) {
     return (
@@ -367,7 +371,7 @@ const GestionarEntradasSalidasCanillaPage: React.FC = () => {
       <Paper sx={{ p: 2, mb: 2 }}>
         <Typography variant="h6" gutterBottom>Filtros <FilterListIcon fontSize="small" /></Typography>
         <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, alignItems: 'center', mb: 2 }}>
-           <TextField label="Fecha" type="date" size="small" value={filtroFecha}
+          <TextField label="Fecha" type="date" size="small" value={filtroFecha}
             onChange={(e) => setFiltroFecha(e.target.value)}
             InputLabelProps={{ shrink: true }} sx={{ minWidth: 170 }}
             required
@@ -398,9 +402,9 @@ const GestionarEntradasSalidasCanillaPage: React.FC = () => {
               onChange={(e) => setFiltroIdCanillitaSeleccionado(e.target.value as number | string)}
             >
               <MenuItem value=""><em>Seleccione uno</em></MenuItem>
-              {destinatariosDropdown.map(c => <MenuItem key={c.idCanilla} value={c.idCanilla}>{c.nomApe} {c.legajo ? `(Leg: ${c.legajo})`: ''}</MenuItem>)}
+              {destinatariosDropdown.map(c => <MenuItem key={c.idCanilla} value={c.idCanilla}>{c.nomApe} {c.legajo ? `(Leg: ${c.legajo})` : ''}</MenuItem>)}
             </Select>
-            {!filtroIdCanillitaSeleccionado && <Typography component="p" color="error" variant="caption" sx={{ml:1.5, fontSize:'0.65rem'}}>Selección obligatoria</Typography>}
+            {!filtroIdCanillitaSeleccionado && <Typography component="p" color="error" variant="caption" sx={{ ml: 1.5, fontSize: '0.65rem' }}>Selección obligatoria</Typography>}
           </FormControl>
 
           <FormControl size="small" sx={{ minWidth: 180, flexGrow: 1 }} disabled={loadingFiltersDropdown}>
@@ -411,15 +415,15 @@ const GestionarEntradasSalidasCanillaPage: React.FC = () => {
             </Select>
           </FormControl>
         </Box>
-        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap:2 }}>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 2 }}>
           {puedeCrear && (
-            <Button 
-                variant="contained" 
-                startIcon={<AddIcon />} 
-                onClick={() => handleOpenModal()}
-                disabled={!filtroFecha || !filtroIdCanillitaSeleccionado}
+            <Button
+              variant="contained"
+              startIcon={<AddIcon />}
+              onClick={() => handleOpenModal()}
+              disabled={!filtroFecha || !filtroIdCanillitaSeleccionado}
             >
-                Registrar Movimiento
+              Registrar Movimiento
             </Button>
           )}
           {puedeLiquidar && numSelectedToLiquidate > 0 && movimientos.some(m => selectedIdsParaLiquidar.has(m.idParte) && !m.liquidado) && (
@@ -429,32 +433,39 @@ const GestionarEntradasSalidasCanillaPage: React.FC = () => {
           )}
         </Box>
       </Paper>
-      
-       {!filtroFecha && <Alert severity="info" sx={{my:1}}>Por favor, seleccione una fecha.</Alert>}
-      {filtroFecha && !filtroIdCanillitaSeleccionado && <Alert severity="info" sx={{my:1}}>Por favor, seleccione un {filtroTipoDestinatario === 'canillitas' ? 'canillita' : 'accionista'}.</Alert>}
+
+      {!filtroFecha && <Alert severity="info" sx={{ my: 1 }}>Por favor, seleccione una fecha.</Alert>}
+      {filtroFecha && !filtroIdCanillitaSeleccionado && <Alert severity="info" sx={{ my: 1 }}>Por favor, seleccione un {filtroTipoDestinatario === 'canillitas' ? 'canillita' : 'accionista'}.</Alert>}
 
       {loading && <Box sx={{ display: 'flex', justifyContent: 'center', my: 2 }}><CircularProgress /></Box>}
       {error && !loading && !apiErrorMessage && <Alert severity="error" sx={{ my: 2 }}>{error}</Alert>}
       {apiErrorMessage && <Alert severity="error" sx={{ my: 2 }}>{apiErrorMessage}</Alert>}
-      {loadingTicketPdf && ( <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', my: 2 }}> <CircularProgress size={20} sx={{ mr: 1 }} /> <Typography variant="body2">Cargando ticket...</Typography> </Box> )}
+      {loadingTicketPdf && (<Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', my: 2 }}> <CircularProgress size={20} sx={{ mr: 1 }} /> <Typography variant="body2">Cargando ticket...</Typography> </Box>)}
 
 
       {!loading && movimientos.length > 0 && (
-        <Paper sx={{ p: 1.5, mb: 2, mt:1, backgroundColor: 'grey.100' }}>
-            <Box sx={{display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}>
-                <Typography variant="subtitle1" sx={{mr:2}}>
-                    Total a Liquidar:
-                </Typography>
-                <Typography variant="h6" sx={{fontWeight: 'bold', color: 'error.main'}}>
-                    {totalARendirVisible.toLocaleString('es-AR', { style: 'currency', currency: 'ARS' })}
-                </Typography>
-            </Box>
+        <Paper sx={{ p: 1.5, mb: 2, mt: 1, backgroundColor: 'grey.100' }}>
+          <Box sx={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
+            <Typography variant="subtitle1" sx={{ mr: 1 }}>
+              Total:
+            </Typography>
+            <Typography variant="h6" sx={{ paddingRight: '5px', fontWeight: 'bold', color: 'text.main' }}>
+              {montoARendirAll.toLocaleString('es-AR', { style: 'currency', currency: 'ARS' })}
+            </Typography>
+            -
+            <Typography variant="subtitle1" sx={{ mr: 1, paddingLeft: '5px', }}>
+              Total a Liquidar:
+            </Typography>
+            <Typography variant="h6" sx={{ fontWeight: 'bold', color: totalARendirVisible > 0 ? 'error.main' : 'green' }}>
+              {totalARendirVisible.toLocaleString('es-AR', { style: 'currency', currency: 'ARS' })}
+            </Typography>
+          </Box>
         </Paper>
       )}
 
       {!loading && !error && puedeVer && filtroFecha && filtroIdCanillitaSeleccionado && (
         <TableContainer component={Paper}>
-           <Table size="small">
+          <Table size="small">
             <TableHead>
               <TableRow>
                 {puedeLiquidar && (
@@ -545,10 +556,10 @@ const GestionarEntradasSalidasCanillaPage: React.FC = () => {
         </TableContainer>
       )}
 
-        <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleMenuClose}>
+      <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleMenuClose}>
         {puedeModificar && selectedRow && !selectedRow.liquidado && (
           <MenuItem onClick={() => { handleOpenModal(selectedRow); handleMenuClose(); }}><EditIcon fontSize="small" sx={{ mr: 1 }} /> Modificar</MenuItem>)}
-        
+
         {selectedRow && selectedRow.liquidado && puedeLiquidar && (
           <MenuItem
             onClick={() => {
@@ -560,7 +571,7 @@ const GestionarEntradasSalidasCanillaPage: React.FC = () => {
                   selectedRow.canillaEsAccionista
                 );
               }
-               handleMenuClose();
+              handleMenuClose();
             }}
             disabled={loadingTicketPdf}
           >
@@ -572,9 +583,9 @@ const GestionarEntradasSalidasCanillaPage: React.FC = () => {
         {selectedRow && (
           ((!selectedRow.liquidado && puedeEliminar) || (selectedRow.liquidado && puedeEliminarLiquidados))
         ) && (
-            <MenuItem onClick={() => {if (selectedRow) handleDelete(selectedRow.idParte);}}>
-                <DeleteIcon fontSize="small" sx={{ mr: 1 }} />
-                  Eliminar
+            <MenuItem onClick={() => { if (selectedRow) handleDelete(selectedRow.idParte); }}>
+              <DeleteIcon fontSize="small" sx={{ mr: 1 }} />
+              Eliminar
             </MenuItem>
           )}
       </Menu>
@@ -589,7 +600,7 @@ const GestionarEntradasSalidasCanillaPage: React.FC = () => {
         clearErrorMessage={() => setApiErrorMessage(null)}
       />
 
-       <Dialog open={openLiquidarDialog} onClose={handleCloseLiquidarDialog}>
+      <Dialog open={openLiquidarDialog} onClose={handleCloseLiquidarDialog}>
         <DialogTitle>Confirmar Liquidación</DialogTitle>
         <DialogContent>
           <DialogContentText>