Creacion de los componentes para el reporte general de facturacion

5 days ago · 912f18efe7
parent f641256dd8
commit 912f18efe7
6 changed files with 367 additions and 10 deletions
--- a/src/Components/ReportesClientes/Facturacion/ReporteGeneral.tsx
+++ b/src/Components/ReportesClientes/Facturacion/ReporteGeneral.tsx
@ -0,0 +1,308 @@
+import moment from "moment"
+import React, { useEffect } from "react"
+import { useState } from "react"
+import { Button, Card, Col, Form, ProgressBar, Row } from "react-bootstrap"
+import { BsFileEarmarkExcel, BsSearch } from "react-icons/bs"
+import DTORptCorresponsalesTraficos from "../../../DTO/Corresponsales/DTORptCorresponsalesTraficos"
+import ICatCorresponsales from "../../../Interfaces/Catalogos/ICatCorresponsales"
+import IClientes from "../../../Interfaces/Catalogos/IClientes"
+import CorresponsalesDataService from '../../../Services/Catalogos/Corresponsales.Services'
+import { AgGridReact } from "ag-grid-react"
+import { DTOReporteGeneral } from "../../../DTO/Facturacion/DTOReporteGeneral"
+import ReportesFacturacionService from "../../../Services/Reportes/ReportesFacturacion.Service"
+import ClientesServices from "../../../Services/Catalogos/Clientes.Services"
+
+export const ReporteGeneralFacturacion: React.FC = () => {
+    const [UserId, setUserId] = useState(() => {
+        const stickyValue = window.localStorage.getItem('UserId')
+        return stickyValue !== null ? JSON.parse(stickyValue) : 0
+      })
+    const [Data, setData] = useState<DTOReporteGeneral[]>([])
+    const [filteredData, setFilteredData] = useState<DTOReporteGeneral[]>([])
+    const [Inicio, setInicio] = useState(currentDate(-365))
+    const [Fin, setFin] = useState(currentDate(0))
+    const [Corresponsal, setCorresponsal] = useState(() => {
+        const stickyValue = window.localStorage.getItem('IdCorresponsal')
+        return stickyValue !== null ? JSON.parse(stickyValue) : 0
+    })
+    const [Clientes, setClientes] = useState<Array<IClientes>>()
+    const [Cliente, setCliente] = useState(0)
+    const [header, setHeader] = useState('')
+    const [msg, setMsg] = useState('')
+    const [show, setShowMsg] = useState(false)
+    const gridRef = React.useRef<any>(null)
+    const [DataCorresponsales, setDataCorresponsales] = useState<ICatCorresponsales[]>([])
+    // const [Estado, setEstado] = useState(0)
+    const [columnDefs] = useState([
+        { field: 'trafico', headerName: 'Trafico', minWidth: 70, sortable: true, resizable: true},
+        { field: 'corresponsal', headerName: 'Corresponsal', minWidth: 70, sortable: true,  resizable: true},
+        { field: 'aduana', headerName: 'Aduana', minWidth: 70, sortable: true, resizable: true},
+        { field: 'patente', headerName: 'Patente', minWidth: 70, sortable: true, resizable: true},
+        { field: 'pedimentoCorresponsal', headerName: 'Pedimento Corresponsal', minWidth: 70, sortable: true, resizable: true},
+        { field: 'pedimentoCorresponsalR1', headerName: 'Pedimento Corresponsal R1', minWidth: 70, sortable: true, resizable: true},
+        { field: 'fechaPago', headerName: 'Fecha Pago', minWidth: 70, sortable: true, resizable: true},
+        { field: 'fechaAnticipo', headerName: 'Fecha Anticipo', minWidth: 70, sortable: true, resizable: true},
+        { field: 'sumaAnticipoCorresponsalFinanciado', headerName: 'Suma Anticipo Corresponsal Financiado', minWidth: 70, maxWidth:350, sortable: true, resizable: true},
+        { field: 'fechaAlta', headerName: 'Fecha Alta', minWidth: 70, sortable: true, resizable: true},
+        { field: 'usuarioAlta', headerName: 'Usuario Alta', minWidth: 70, sortable: true, resizable: true},
+        { field: 'cliente', headerName: 'Cliente', minWidth: 70, sortable: true, resizable: true},
+        { field: 'nombreCliente', headerName: 'Nombre Cliente', minWidth: 70, sortable: true, resizable: true},
+        { field: 'cuenta', headerName: 'Cuenta', minWidth: 70, sortable: true, resizable: true},
+        { field: 'tipoOperacion', headerName: 'Tipo Operacion', minWidth: 70, sortable: true, resizable: true},
+        { field: 'terminado', headerName: 'Terminado', minWidth: 70, sortable: true, resizable: true},
+        { field: 'fechaTerminado', headerName: 'Fecha Terminado', minWidth: 70, sortable: true, resizable: true},
+        { field: 'fechaRegistroContabilizar', headerName: 'Fecha Registro Contabilizar', minWidth: 70, sortable: true, resizable: true},
+        { field: 'fechaContabilizado', headerName: 'Fecha Contabilizado', minWidth: 70, sortable: true, resizable: true},
+        { field: 'fechaFacturaCorresponsal', headerName: 'Fecha Factura Corresponsal', minWidth: 70, sortable: true, resizable: true},
+        { field: 'motivoCuentaRechazada', headerName: 'Motivo Cuenta Rechazada', minWidth: 70, sortable: true, resizable: true},
+        { field: 'estatusOperacion', headerName: 'Estatus Operacion', minWidth: 70, sortable: true, resizable: true},
+        { field: 'cargoShipper', headerName: 'Cargo Shipper', minWidth: 70, sortable: true, resizable: true}
+    ])
+
+    function currentDate(days: number): string {
+        var today = new Date()
+        today.setDate(today.getDate() + days)
+        var dd = String(today.getDate()).padStart(2, '0')
+        var mm = String(today.getMonth() + 1).padStart(2, '0')
+        var yyyy = today.getFullYear()
+        return yyyy + '-' + mm + '-' + dd
+    }
+
+    useEffect(() => {
+      ClientesServices.getAllClientes(0)
+      .then((response) => {
+        setClientes(response.data)
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+      CorresponsalesDataService.getAll()
+      .then((response) => {
+        setDataCorresponsales(response.data)
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+      })
+        generaReporte()
+      }, [])
+
+    const generaReporte = () => {
+        const data: DTORptCorresponsalesTraficos = {
+        Inicio: moment(Inicio).format('YYYY-MM-DD'),
+        Fin: moment(Fin).format('YYYY-MM-DD'),
+        TipoOperacion: 0,
+        NoCliente: Cliente,
+        IdCorresponsal: Corresponsal,
+        Pedimento: 0,
+        Aduana: '0',
+        Patente: 0,
+        Proceso: 0,
+        Modo: 0,
+        Referencia: ''
+        }
+        ReportesFacturacionService
+        .GetReporteGeneral(data)
+        .then((response) => {
+            setData(response.data)
+            setFilteredData(response.data)
+        })
+        .catch((e: Error) => {
+            return
+        })
+    }
+
+    const filtraReporte = (e: any) => {
+        gridRef.current.api.setQuickFilter(e.target.value)
+    }
+
+    const downloadExcel = () => {
+      const data: DTORptCorresponsalesTraficos = {
+        Inicio: moment(Inicio).format('YYYY-MM-DD'),
+        Fin: moment(Fin).format('YYYY-MM-DD'),
+        TipoOperacion: 0,
+        NoCliente: 0,
+        IdCorresponsal: Corresponsal,
+        Pedimento: 0,
+        Aduana: '0',
+        Patente: 0,
+        Proceso: 0,
+        Modo: 0,
+        Referencia: ''
+        }
+        ReportesFacturacionService.DownloadExcel(data)
+        .then(resp => {
+            const url = window.URL.createObjectURL(new Blob([resp.data]));
+            const link = document.createElement('a');
+            link.href = url;
+            link.setAttribute('download', `ReporteFacturacion.xlsx`);
+            document.body.appendChild(link);
+            link.click();
+        })
+    } 
+
+    return (
+        <div>
+          <Card>
+            <Card.Body>
+              <Row>
+                <Col xs={2}>
+                    <Form.Label style={{width:'100%', fontSize:'smaller'}}>
+                        Buscar
+                        <Form.Control
+                        type='text'
+                        size='sm'
+                        placeholder='Search...'
+                        onChange={(e) => {
+                            filtraReporte(e)
+                        }}
+                        />
+                    </Form.Label>    
+                </Col>
+                    <Col xs={2}>
+                        <Form.Label style={{width:'100%', fontSize:'smaller'}}>
+                            Inicio
+                            <Form.Control
+                            defaultValue={Inicio}
+                            type='date'
+                            name='Inicio'
+                            placeholder='Inicio'
+                            title='Inicio'
+                            alt='Inicio'
+                            data-date-format='YYYY-mm-dd'
+                            onChange={(e) => setInicio(e.target.value)}
+                            size='sm'
+                            />
+                        </Form.Label>    
+                    </Col>
+                    <Col xs={2}>
+                        <Form.Label style={{width:'100%', fontSize:'smaller'}}>
+                            Fin
+                            <Form.Control
+                            defaultValue={Fin}
+                            type='date'
+                            name='Fin'
+                            placeholder='Fin'
+                            title='Fin'
+                            alt='Fin'
+                            onChange={(e) => setFin(e.target.value)}
+                            size='sm'
+                            />
+                        </Form.Label>    
+                    </Col>
+                    <Col lg={3}>
+                        <Form.Label style={{width:'100%', fontSize:'smaller'}}>
+                            Corresponsal
+                            <Form.Control
+                              as='select'
+                              onChange={(e) => {
+                                  setCorresponsal(parseInt(e.target.value))
+                              }}
+                              className='form-select form-select-sm'
+                              value={Corresponsal}
+                            >
+                            <option value='0'>-SELECCIONE-</option>
+                            {DataCorresponsales
+                                ? DataCorresponsales.map((c) => {
+                                    return (
+                                    <option value={c.id} key={c.id}>
+                                        {c.nombre}
+                                    </option>
+                                    )
+                                })
+                                : null}
+                            </Form.Control>
+                        </Form.Label>
+                    </Col>
+                    <Col lg={3}>
+                      <Form.Label style={{width:'100%', fontSize:'smaller'}}>
+                        Cliente
+                        <Form.Control
+                          as='select'
+                          onChange={(e) => {
+                            setCliente(parseInt(e.target.value))
+                          }}
+                          className='form-select form-select-sm'
+                          value={Cliente}
+                        >
+                          <option value='0'>-SELECCIONE-</option>
+                          {Clientes
+                            ? Clientes.map((c) => {
+                                return (
+                                  <option value={c.sClave} key={c.sClave}>
+                                    {c.sRazonSocial}
+                                  </option>
+                                )
+                              })
+                            : null}
+                        </Form.Control>
+                      </Form.Label>
+                    </Col>
+              </Row>
+              {/* <Row>
+                <Col lg={2}>
+                  <Form.Label style={{width:'100%', fontSize:'smaller'}}>
+                    Estado
+                    <Form.Control
+                      as='select'
+                      onChange={(e) => {
+                        setEstado(parseInt(e.target.value))
+                      }}
+                      className='form-select form-select-sm'
+                      value={Estado}
+                    >
+                      <option value='0'>-SELECCIONE-</option>
+                      <option value='3'>NO FACTURADO</option>
+                      <option value='4'>FACTURADO</option>
+                    </Form.Control>
+                  </Form.Label>
+                </Col>
+              </Row> */}
+              <Row style={{paddingTop:'10px'}}>
+                <Col lg={12} style={{textAlign:'end'}}>
+                  <Button
+                    variant='primary'
+                    size='sm'
+                    onClick={() => {
+                      generaReporte()
+                    }}
+                    style={{marginRight:'5px'}}
+                  >
+                    <BsSearch />
+                    &nbsp; Buscar
+                  </Button>
+                  <Button
+                    size='sm'
+                    variant='success'
+                    onClick={() => {
+                      downloadExcel();
+                    }}
+                    style={{marginRight:'5px'}}
+                  >
+                    <BsFileEarmarkExcel />
+                    &nbsp; Excel
+                  </Button>
+                </Col>
+              </Row>
+            </Card.Body>
+          </Card>
+          <br />
+          <div className='ag-theme-alpine' style={{ height: 500, width: '100%' }}>
+            <AgGridReact
+              rowData={filteredData}
+              columnDefs={columnDefs}
+              pagination={true}
+              paginationAutoPageSize={true}
+              ref={gridRef}
+              rowSelection={'multiple'}
+              rowMultiSelectWithClick={true}
+            ></AgGridReact>
+          </div>
+        </div>
+      )
+
+}
--- a/src/Components/Utils/FileManager/FileManager.tsx
+++ b/src/Components/Utils/FileManager/FileManager.tsx
@ -63,16 +63,7 @@ export const FileManager: FC<IProps> = (props) => {
            const formData = new FormData()
            formData.append('name', file.name)
            formData.append('file', file)
-            axios
-              .post(
-                URL.get() +
-                  `/FileManager/AppendFileByProcess?IdUsuario=${props.IDUser}&Proceso=${props.IDProcess}&Tags=${props.IdFile}&crud=1`,
-                formData, {
-                  headers:{
-                    'Authorization': 'Bearer ' +  token
-                  }
-                }
-              )
+            FileManagerDataService.AppendFile(formData, props.IDUser, props.IDProcess, props.IdFile)
              .then((res) => {
                if (res.data.id > 0) {
                  setArchivo(res.data)
--- a/src/DTO/Facturacion/DTOReporteGeneral.ts
+++ b/src/DTO/Facturacion/DTOReporteGeneral.ts
@ -0,0 +1,29 @@
+export interface DTOReporteGeneral{
+    trafico: string;
+    corresponsal: string;
+    aduana: string;
+    patente: number;
+    pedimentoCorreponsal: string;
+    pedimentoCorresponsalR1: string;
+    fechaPago: string;
+    fechaAnticipo: string;
+    sumaanticipoCorresponsalFinanciado: number;
+    fechaAlta: string;
+    usuarioAlta: string;
+    cliente: number;
+    nombrecliente:number;
+    cuenta: string;
+    tipoOperacion: string;
+    terminado: string;
+    fechaRegistroContabilizar: string;
+    fechaContabilizado: string;
+    fechaFacturado: string;
+    fechaFacturaCorresponsal: string;
+    fechaCruce: string;
+    motivoCuentaRechazadaContabilidad: string;
+    motivoCuentaRechazadaFacturacion: string;
+    motivoSolicitaReapertura: string;
+    solicitudReaperturaAutorizada: string;
+    estatusOperacion: string;
+    cargoShipper: string;
+}
--- a/src/Services/Reportes/ReportesFacturacion.Service.ts
+++ b/src/Services/Reportes/ReportesFacturacion.Service.ts
@ -0,0 +1,16 @@
+import http from "../common/http-common";
+
+import DTORptCorresponsalesTraficos from "../../DTO/Corresponsales/DTORptCorresponsalesTraficos";
+import { DTOReporteGeneral } from "../../DTO/Facturacion/DTOReporteGeneral";
+
+class ReportesFacturacionService{
+    GetReporteGeneral(data: DTORptCorresponsalesTraficos){
+        return http.get<DTOReporteGeneral[]>(`ReportesFacturacion/CuentasFacturadas?Inicio=${data.Inicio}&Fin=${data.Fin}&TipoOperacion=${data.TipoOperacion}&NoCliente=${data.NoCliente}&IdCorresponsal=${data.IdCorresponsal}&Pedimento=${data.Pedimento}&Aduana=${data.Aduana}&Patente=${data.Patente}&Proceso=${data.Proceso}&Modo=${data.Modo}`)
+    }
+
+    DownloadExcel(data: DTORptCorresponsalesTraficos){
+        return http.get(`ReportesFacturacion/FacturacionExcel?Inicio=${data.Inicio}&Fin=${data.Fin}&TipoOperacion=${data.TipoOperacion}&NoCliente=${data.NoCliente}&IdCorresponsal=${data.IdCorresponsal}&Pedimento=${data.Pedimento}&Aduana=${data.Aduana}&Patente=${data.Patente}&Proceso=${data.Proceso}&Modo=${data.Modo}`, {responseType: 'blob'});
+    }
+}
+
+export default new ReportesFacturacionService()
--- a/src/Services/Utils/FileManager.Services.ts
+++ b/src/Services/Utils/FileManager.Services.ts
@ -3,6 +3,17 @@ import IRespuesta from "../../Interfaces/IRespuesta";
 import IFileManager from "../../Interfaces/Utils/IFileManager";

 class FileManagerDataService {
+  AppendFile(formData: FormData, IDUser: number, IDProcess: number, IdFile: number){
+    return http.post(`/FileManager/AppendFileByProcess?IdUsuario=${IDUser}&Proceso=${IDProcess}&Tags=${IdFile}&crud=1`, formData, 
+      {
+        headers:{
+          "Content-Type":'multipart/form-data'
+        },
+        maxContentLength: Infinity,
+        maxBodyLength: Infinity
+      }
+    )
+  }

  getFileContent(id: number, Proceso: number) {
    return http.get(`/FileManager/getFile?id=${id}&proceso=${Proceso}`, {responseType: 'arraybuffer'})
--- a/src/index.tsx
+++ b/src/index.tsx
@ -32,6 +32,7 @@ import { ReporteFacturasConsolidados } from './Components/ReportesClientes/Alen/
 import { CuentasCerradas } from './Components/ReportesClientes/CuentasCerradas.tsx/CuentasCerradas'
 import { ReporteArchivoElectronico } from './Components/ReportesClientes/ReporteArchivoElectronico'
 import { EstadosCuenta } from './Components/EstadosCuenta/EstadosCuenta'
+import { ReporteGeneralFacturacion } from './Components/ReportesClientes/Facturacion/ReporteGeneral'
 require (`./css/${process.env.REACT_APP_ENVIRONMENT}-home.css`)

 function PageNotFound() {
@ -95,6 +96,7 @@ root.render(
                <Route path='/Reportes/Alen/FacturasConsolidados' element={<ReporteFacturasConsolidados/>}/>
              </Route>
              <Route path='/Reportes/ArchivoElectronico/' element={<ReporteArchivoElectronico/>}/>
+              <Route path='/Reportes/Facturacion/ReporteGeneral/' element={<ReporteGeneralFacturacion/>}/>
            </Route>
            <Route path="Clientes" element={<Outlet/>}>{/*Aqui van todas las rutas relacionadas a los clientes */}
              <Route path='/Clientes/Reportes/' element={<ClientesExternos/>}>{/*Aqui van todas las rutas relacionadas a los reportes de los clientes*/}