Created a new dashboard for the IT departament to keep visibility of the server D: drive storage. Authorized advanced payments now can be deleted. Removed the date filter and added a range of dates filter in the Alen's account statements component.

src/Components/Corresponsales/Anticipos/Anticipos.tsx

@@ -105,7 +105,6 @@ export const Anticipos: FC<IProps> = (props) => {
                     style={{ cursor: 'pointer' }}
                   />
                 </IconContext.Provider>&nbsp;&nbsp;&nbsp;
-                { params.data.autoriza === 0 ?
                 <IconContext.Provider value={{ color: 'red', size: '20px' }}>
                   <BsTrash
                     onClick={() => {
@@ -116,8 +115,7 @@ export const Anticipos: FC<IProps> = (props) => {
                     }}
                     style={{ cursor: 'pointer' }}
                   />
-                </IconContext.Provider> : ""
+                </IconContext.Provider>
-                }
               </div> : 
               <div>
                 <IconContext.Provider value={{ color: 'blue', size: '18px' }}>

src/Components/Dashboard/Dashboard.tsx

@@ -6,6 +6,7 @@ import { DashboardFacturacion } from './DashboardFacturacion'
 import DashboardClientes from './DashboardClientes'
 import { useSelector } from 'react-redux'
 import { RootState } from '../../store/store'
+import { DashboardSistemas } from './DashboardSistemas'
 
 interface IProps {}
 
@@ -28,6 +29,11 @@ export default function Dashboard(props: IProps) {
       <br />
       <Container>
         <Row xs={1} md={3} className='g-4'>
+          {[Depto === 'Sistemas' ? <DashboardSistemas /> : ''].map(
+              (item) => {
+                return <React.Fragment>{item}</React.Fragment>
+              }
+          )}
           {[['Direccion', 'Sistemas', 'Corresponsalias'].includes(Depto) ? <DashboardCorresponsales Perfil={Perfil} /> : ''].map(
             (item) => {
               return <React.Fragment>{item}</React.Fragment>

src/Components/Dashboard/DashboardSistemas.tsx

@@ -0,0 +1,124 @@
+import { ApexOptions } from "apexcharts";
+import { useEffect, useState } from "react";
+import ReactApexChart from "react-apexcharts"
+import { Card, Col, Row } from "react-bootstrap"
+import { Link } from "react-router-dom"
+import DashboardDataService from '../../Services/Dashboard/Dashboard.Corresponsales.Services';
+
+export const DashboardSistemas:React.FC = () => {
+    const [TotalCorresponsales, setTotalCorresponsales] = useState(0);
+    const [series, setseries] = useState<number[]>([]);
+    const [Label, setLabel] = useState('');
+    const [CircleOptions, setCirleOpcions] = useState<ApexOptions>({
+        labels: [],
+          colors: ['#EB984E',],
+          legend: { position: 'bottom' },
+          plotOptions: {
+            pie: {
+              donut: {
+                size: '55%',
+              },
+            },
+          },
+    });
+
+    useEffect(() => {
+        DashboardDataService.getDisk()
+          .then((response) => {
+             console.log(response.data);
+            setLabel(response.data.descripcion)
+            setseries([response.data.total]);
+    
+            setCirleOpcions({
+              labels: [response.data.descripcion],
+              colors: ['#ABEB4E'],
+              legend: { position: 'bottom' },
+                plotOptions: {
+                  radialBar: {
+                    startAngle: -135,
+                    endAngle: 135,
+                    track: {
+                      background: "#e7e7e7",
+                      strokeWidth: '100%',
+                      margin: 5, // margin is in pixels
+                      dropShadow: {
+                        enabled: false,
+                        top: 2,
+                        left: 0,
+                        color: '#999',
+                        opacity: 1,
+                        blur: 2
+                      }
+                    },
+                    dataLabels: {
+                      name:{
+                        show:false
+                      },
+                      value: {
+                        show: true,
+                        fontSize: '43px',
+                        fontWeight: 'bold',
+                      },
+                    }
+                  }
+                },
+                grid: {
+                  padding: {
+                    top: -10
+                  }
+                },
+            });
+          })
+          .catch((e: Error) => {
+            return;
+          });
+        //getTipoCambio(currentDate())
+      }, []);
+
+    return (
+        <Col>
+        <Card style={{ width: '18rem' }} className='dashboardComponentFont'>
+          <Card.Header style={{fontSize:'15.9px'}}>
+            <b>Sistemas </b>
+          </Card.Header>
+          <Card.Body style={{ paddingBottom: '0px'}}>
+            <Card.Title>Almacenamiento interno</Card.Title>
+              <ReactApexChart
+                type='radialBar'
+                options={CircleOptions}
+                series={series}
+                width={250}
+                height={310}
+              />
+              <div style={{textAlign:"center"}}>{Label}</div>
+          </Card.Body>
+          <Card.Footer>
+            <Row>
+              <Col xs={6} style={{ paddingRight: '5px' }}>
+                {/*                 <Link
+                  to={`../RptCorresponsalesTraficosHst?proc=0&status=0`}
+                  style={{ textDecoration: 'none', float: 'right', paddingRight: '10px' }}
+                >
+                  Buscar
+                </Link> */}
+                {/* <span style={{ fontWeight: 'bold' }}>Tipo cambio: ${TipoCambio}</span> */}
+              </Col>
+              {/*  <Col xs={3}></Col> */}
+              <Col xs={6} style={{ paddingRight: '5px' }}>
+                <Link
+                  to={`../RptCorresponsalesTraficos/proc=1/modo=1`}
+                  style={{
+                    textDecoration: 'none',
+                    float: 'right',
+                    paddingRight: '10px',
+                  }}
+                >
+                  Ver mas...
+                </Link>
+              </Col>
+            </Row>
+          </Card.Footer>
+        </Card>
+      </Col>
+    )
+}

src/Components/EstadosCuenta/EstadosCuenta.tsx

@@ -34,7 +34,8 @@ export const EstadosCuenta:React.FC = () => {
     const [Patente, setPatente] = useState('')
     const [Pedimento, setPedimento] = useState('')
     const [TipoOperacion, setTipoOperacion] = useState('')
-    const [Fecha, setFecha] = useState('')
+    const [Inicio, setInicio] = useState('')
+    const [Fin, setFin] = useState('')
     const [Remitente, setRemitente] = useState('')
     const [Programado, setProgramado] = useState(0)
     //
@@ -206,7 +207,8 @@ export const EstadosCuenta:React.FC = () => {
             Aduana: Aduana,
             Patente: Patente,
             Pedimento: Pedimento,
-            Fecha: Fecha,
+            Inicio: Inicio,
+            Fin: Fin,
             Remitente: Remitente,
             Programado: Programado
         }
@@ -387,15 +389,30 @@ export const EstadosCuenta:React.FC = () => {
                         </Col>
                         <Col xs={2}>
                             <Form.Label style={{width:'100%'}}>
-                                Fecha
+                                Inicio
                                 <Form.Control
-                                    defaultValue={Fecha}
+                                    defaultValue={Inicio}
                                     type='date'
                                     name='Fecha'
                                     placeholder='Fecha'
                                     title='Fecha'
                                     alt='Fecha'
-                                    onChange={(e) => setFecha(e.target.value)}
+                                    onChange={(e) => setInicio(e.target.value)}
+                                    size='sm'
+                                />
+                            </Form.Label>
+                        </Col>
+                        <Col xs={2}>
+                            <Form.Label style={{width:'100%'}}>
+                                Fin
+                                <Form.Control
+                                    defaultValue={Fin}
+                                    type='date'
+                                    name='Fecha'
+                                    placeholder='Fecha'
+                                    title='Fecha'
+                                    alt='Fecha'
+                                    onChange={(e) => setFin(e.target.value)}
                                     size='sm'
                                 />
                             </Form.Label>
@@ -420,6 +437,8 @@ export const EstadosCuenta:React.FC = () => {
                                 </Form.Control>
                             </Form.Label>
                         </Col>
+                    </Row>
+                    <Row className="justify-content-between justify-items-end">
                         <Col xs={2}>
                             <Form.Label style={{width:'100%'}}>
                                 Tipo Operacion
@@ -437,8 +456,6 @@ export const EstadosCuenta:React.FC = () => {
                                 </Form.Control>
                             </Form.Label>
                         </Col>
-                    </Row>
-                    <Row className="justify-content-between justify-items-end">
                         <Col xs={2}>
                             <Form.Label style={{width:'100%'}}>
                                 Estado
@@ -456,7 +473,7 @@ export const EstadosCuenta:React.FC = () => {
                                 </Form.Control>
                             </Form.Label>
                         </Col>
-                        <Col xs={4} className="d-flex align-items-end">
+                        <Col xs={8} className="d-flex align-items-end">
                             <div style={{textAlign:'end', width:'100%'}}>
                                 <Button variant='primary' onClick={() => getCuentas()} style={{marginRight:'10px'}}>Buscar</Button>
                                 {['Administrador', 'Facturacion', 'Sup. Facturacion'].includes(Perfil) ? <Button variant='primary' onClick={() => {selectFile()}} style={{marginRight:'10px'}}>Cargar Estados</Button> : ''}

src/DTO/EstadosCuenta/DTOEstadosCuentaAlenFilters.ts

@@ -4,7 +4,8 @@ export interface DTOEstadoCuentaAlenFilters{
     Aduana: string,
     Patente: string,
     Pedimento: string,
-    Fecha: string,
+    Inicio: string,
+    Fin: string, 
     Remitente: string,
     Programado: number
 }

src/Services/Dashboard/Dashboard.Corresponsales.Services.ts

@@ -2,6 +2,9 @@ import http from "../common/http-common";
 import DashboardCorresponsales from "../../Interfaces/Dashboard/DashboardCorresponsales";
 
 class Dashboard_Corresponsales_DataService {
+  getDisk() {
+    return http.get<DashboardCorresponsales>(`/Dashboard/Corresponsales/GetDiskUsage`);
+  }
   getCorresponsales() {
     return http.get<DashboardCorresponsales[]>(`/Dashboard/Corresponsales/Get`);
   }