From 9dd16d70390dc557f9e2ce71bc0fda2da494061f Mon Sep 17 00:00:00 2001 From: Felix Morales Date: Wed, 29 Nov 2023 09:31:37 -0600 Subject: [PATCH] Reestructuracion del ruteo para clientes y creacion del componente para enlistar sus traficos --- .../Clientes/Traficos/TraficosClientes.tsx | 570 ++++++++++++++++++ src/Components/Login/login.tsx | 2 +- .../Reportes/RptCorresponsalesTraficos.tsx | 5 +- .../DTOFiltrosTraficosClientes.ts | 12 + src/Services/Catalogos/Clientes.Services.ts | 6 + src/index.tsx | 12 +- 6 files changed, 602 insertions(+), 5 deletions(-) create mode 100644 src/Components/Clientes/Traficos/TraficosClientes.tsx create mode 100644 src/DTO/Corresponsales/DTOFiltrosTraficosClientes.ts diff --git a/src/Components/Clientes/Traficos/TraficosClientes.tsx b/src/Components/Clientes/Traficos/TraficosClientes.tsx new file mode 100644 index 0000000..277110e --- /dev/null +++ b/src/Components/Clientes/Traficos/TraficosClientes.tsx @@ -0,0 +1,570 @@ +import React, { FC, useEffect, useRef, useState } from 'react' +import { useParams } from 'react-router-dom' +import { useDispatch } from 'react-redux' +import { IconContext } from 'react-icons' + +import { Button, Card, Col, Form, Modal, Row } from 'react-bootstrap' +import { + BsPlusLg, + BsFileEarmarkExcel, + BsSearch, + BsFillXCircleFill, + BsCheckCircleFill, +} from 'react-icons/bs' +import { RowClickedEvent } from 'ag-grid-community' +import { AgGridReact } from 'ag-grid-react' +import { MsgInformativo } from '../../Utils/Toast/msgInformativo' + +import * as XLSX from 'xlsx' +import moment from 'moment' + +import { ProgressBar } from '../../Reportes/customCells/progressBar' + +import DTORptCorresponsalesTraficos from '../../../DTO/Corresponsales/DTORptCorresponsalesTraficos' +import ICatCorresponsales from '../../../Interfaces/Catalogos/ICatCorresponsales' +import IClientes from '../../../Interfaces/Catalogos/IClientes' +import ICorresponsalTrafico from '../../../Interfaces/Corresponsales/ICorresponsalTrafico' +import { InitCorresponsalesContenedores } from '../../../store/features/Corresponsales/CorresponsalesContenedoresSlice' +import { InitCorresponsalesFacturas } from '../../../store/features/Corresponsales/CorresponsalesFacturasSlice' +import { InitCorresponsalesFacturasTerceros } from '../../../store/features/Corresponsales/CorresponsalesFacturasTercerosSlice' +import TraficoCorresponsales from '../../Corresponsales/TraficoCorresponsales' +import ClientesServices from '../../../Services/Catalogos/Clientes.Services' +import reportesServices from '../../../Services/Reportes/reportes.services' +import DTOFiltrosTraficosClientes from '../../../DTO/Corresponsales/DTOFiltrosTraficosClientes' +/* import '../../css/generic01.css' */ + +interface IProps {} + +export default function TraficosClientes(props: IProps) { + const { proc, modo } = useParams() + const [UserId, setUserId] = useState(() => { + const stickyValue = window.localStorage.getItem('UserId') + return stickyValue !== null ? JSON.parse(stickyValue) : 0 + }) + const [Depto, setDepto] = useState(() => { + const stickyValue = window.localStorage.getItem('Departamento') + return stickyValue !== null ? JSON.parse(stickyValue) : '' + }) + const [Perfil, setPerfil] = useState(() => { + const stickyValue = window.localStorage.getItem('Perfil') + return stickyValue !== null ? JSON.parse(stickyValue) : '' + }) + const queryParams = new URLSearchParams(window.location.search) + const status = queryParams.get('status') + const [StatusAnticipos, setStatusAnticipos] = useState( + status ? parseInt(status) : 0 + ) + const dispatch = useDispatch() + const [IDTrafico, setIDTrafico] = useState(0) + const [Data, setData] = useState([]) + const [filteredData, setFilteredData] = useState([]) + const [show, setShowMsg] = useState(false) + const [ShowModal, setShowModal] = useState(false) + const [header, setHeader] = useState('') + const [msg, setMsg] = useState('') + const [Inicio, setInicio] = useState(currentDate(-365)) + const [Fin, setFin] = useState(currentDate(0)) + const [TipoOperacion, setTipoOperacion] = useState(0) + const [Cliente, setCliente] = useState(0) + const [Corresponsal, setCorresponsal] = useState(() => { + const stickyValue = window.localStorage.getItem('IdCorresponsal') + return stickyValue !== null ? JSON.parse(stickyValue) : 0 + }) + //const [Corresponsal, setCorresponsal] = useState(0) + const [Pedimento, setPedimento] = useState(0) + const [Patente, setPatente] = useState(0); + const [Aduana, setAduana] = useState(0); + const [Referencia, setReferencia] = useState('') + const [Clientes, setClientes] = useState>() + const [filtro, setFiltro] = useState('') + const gridRef = React.useRef(null) + const [DataCorresponsales, setDataCorresponsales] = useState< + ICatCorresponsales[] + >([]) + const hiddenFileInputRef = useRef(null); + const [columnDefs] = useState([ + { field: 'id', headerName: 'id', width: 70, sortable: true, filter: true }, + { + field: 'proceso', + headerName: 'Status', + width: 90, + center: true, + sortable: true, + filter: true, + cellRenderer: ProgressBar, + }, + { + field: 'folioGemco', + headerName: 'Trafico', + width: 140, + sortable: true, + filter: true, + cellRenderer: (params: any) => { + return params.data.folioGemco + }, + }, + { + field: 'fechaRegistro', + sortable: true, + filter: true, + cellRenderer: (params: any) => { + return params.value?.substring(0, 10) + }, + }, + { field: 'sUsuario', headerName: 'Usuario', sortable: true, filter: true }, + { + field: 'sCliente', + headerName: 'Cliente', + sortable: true, + filter: true, + }, + { + field: 'sTipoOperacion', + headerName: 'Tipo operacion', + sortable: true, + filter: true, + }, + { + field: 'sEstatus', + headerName: 'Estado operacion', + sortable: true, + filter: true, + }, + { + field: 'sCorresponsal', + headerName: 'Corresponsal', + sortable: true, + filter: true, + hide: Perfil === 'Corresponsales' || Perfil === 'Clientes', + }, + { field: 'patente', sortable: true, filter: true }, + { field: 'aduana', sortable: true, filter: true }, + { field: 'pedimento', sortable: true, filter: true }, + { + field: 'fechaPago', + sortable: true, + filter: true, + cellRenderer: (params: any) => { + if (params.value) return params.value.substring(0, 10) + else return '' + }, + }, + { + field: 'fechaDesaduanamiento', + sortable: true, + filter: true, + cellRenderer: (params: any) => { + if (params.value) return params.value.substring(0, 10) + else return '' + }, + }, + { + field: 'zipgemco', + headerName: 'Zip GEMCO', + sortable: true, + filter: true, + hide: Perfil === 'Corresponsales' || Perfil === 'Clientes', + cellRenderer: (params: any) => { + if (params.value === 'No') + return ( +
+ + + +
+ ) + else + return ( +
+ + + +
+ ) + }, + }, + { + field: 'zipCorresponsal', + headerName: 'Zip Corresponsal', + sortable: true, + filter: true, + hide: Perfil === 'Corresponsales' || Perfil === 'Clientes', + cellRenderer: (params: any) => { + if (params.value === 'No') + return ( +
+ + + +
+ ) + else + return ( +
+ + + +
+ ) + }, + }, + { field: 'ultimaActualizacion', sortable: true, filter: true }, + ]) + const [msgColor, setMsgColor] = useState('primary') + + function ConvertHexToString(str: string) { + return unescape(str.replace(/\\/g, '%')) + } + + 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(UserId) + .then((response) => { + setClientes(response.data) + }) + .catch((e: Error) => { + setHeader('Error') + setMsg('Ocurrio un error: ' + e) + setShowMsg(true) + return + }) + generaReporte() + }, []) + + function getParams(e: RowClickedEvent) { + AbreTrafico(e.data.id) + } + + function AbreTrafico(id: number) { + dispatch(InitCorresponsalesFacturas(IDTrafico)) + dispatch(InitCorresponsalesFacturasTerceros(IDTrafico)) + dispatch(InitCorresponsalesContenedores(IDTrafico)) + setIDTrafico(id) + setShowModal(true) + } + + const generaReporte = () => { + const data: DTOFiltrosTraficosClientes = { + Inicio: moment(Inicio).format('YYYY-MM-DD'), + Fin: moment(Fin).format('YYYY-MM-DD'), + TipoOperacion: TipoOperacion, + NoCliente: Cliente, + IdCorresponsal: Corresponsal, + Pedimento: Pedimento, + Aduana: Aduana, + Patente: Patente, + Referencia: Referencia, + IdUsuario: UserId + } + ClientesServices + .GetTraficos(data) + .then((response) => { + setData(response.data) + setFilteredData(response.data) + }) + .catch((e: Error) => { + setHeader('Error') + setMsg('Ocurrio un error: ' + e) + setShowMsg(true) + return + }) + } + + const filtraReporte = (e: any) => { + setFiltro(e.target.value) + gridRef.current.api.setQuickFilter(e.target.value) + } + + const downloadExcel = () => { + exportExcel(Data, 'Traficos de corresponsales') + } + + function exportExcel(jsonData: any[], fileName: string): void { + let Heading = [ + [ + { + title: 'Aduana Seccion Despacho', + style: { font: { sz: '18', bold: true } }, + }, + 'Patente', + 'Referencia', + 'Pedimento', + 'Fecha Pago', + 'Fecha Entrada Presentacion', + 'Clave Docto', + 'Es rectificacion', + 'Tipo Cambio', + 'Valor Dls', + 'Valor Aduana', + 'Numero Factura', + 'Fecha Factura', + 'Proveedor Factura', + 'Incrementables Fact', + 'Fraccion', + 'Subdiv NICO', + 'Descripcion', + 'Pais Origen', + 'Pais Vendedor', + 'Tasa DTA', + 'Tasa IGI', + 'Numero Parte', + 'Cantidad Comercial', + 'TL Pais', + 'Tipo Tasa', + 'Unidad Comercial', + 'Valor Factura Item', + 'Valor Comercial Ped', + 'Valor Factura Item MN', + ], + ] + const wb = XLSX.utils.book_new() + const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet([]) + XLSX.utils.sheet_add_aoa(ws, Heading) + XLSX.utils.sheet_add_json(ws, jsonData, { origin: 'A2', skipHeader: true }) + XLSX.utils.book_append_sheet(wb, ws, 'Sheet1') + + XLSX.writeFile(wb, fileName + '.xlsx') + var range = XLSX.utils.decode_range(ws['!ref?']) + for (var C = range.s.c; C <= range.e.c; ++C) { + var address = XLSX.utils.encode_col(C) + '1' // <-- first row, column number C + if (!ws[address]) continue + ws[address].v = ws[address].v.toUpperCase() + } + } + + return ( +
+ + + + + + + { + setReferencia(e.target.value) + //filtraReporte(e) + }} + /> + + + setPedimento(+e.target.value)} + /> + + + setAduana(+e.target.value)} + /> + + + setPatente(+e.target.value)} + /> + + + + + + + setInicio(e.target.value)} + size='sm' + /> + + + setFin(e.target.value)} + size='sm' + /> + + + + + + + + Tipo operacion + setTipoOperacion(parseInt(e.target.value))} + className='form-select form-select-sm' + > + + + + + + + + + Cliente + { + setCliente(parseInt(e.target.value)) + }} + className='form-select form-select-sm' + > + + {Clientes + ? Clientes.map((c) => { + return ( + + ) + }) + : null} + + + + {(Perfil !== "Corresponsales")? <> + + + Corresponsal + { + setCorresponsal(parseInt(e.target.value)) + }} + className='form-select form-select-sm' + > + + {DataCorresponsales + ? DataCorresponsales.map((c) => { + return ( + + ) + }) + : null} + + + : "" + } + + + + + {(Depto === 'Corresponsalias' || Depto === 'Sistemas') ? ( + + ) : ( + '' + )} + + + + + +
+
+ getParams(e)} + > +
+ { + setShowMsg(false) + }} + /> + + +
+ +
+ + +
+ ) +} diff --git a/src/Components/Login/login.tsx b/src/Components/Login/login.tsx index 8fd086e..aa5ff90 100644 --- a/src/Components/Login/login.tsx +++ b/src/Components/Login/login.tsx @@ -59,7 +59,7 @@ export const Login: React.FC<{}> = () => { if(values.Perfil === 'Corresponsales'){ navigate('/RptCorresponsalesTraficos/proc=1/modo=1') }else if(values.Perfil === 'Clientes'){ - navigate('/Clientes') + navigate('/Clientes/Traficos') }else{ navigate('/') } diff --git a/src/Components/Reportes/RptCorresponsalesTraficos.tsx b/src/Components/Reportes/RptCorresponsalesTraficos.tsx index ebe688b..5ac7625 100644 --- a/src/Components/Reportes/RptCorresponsalesTraficos.tsx +++ b/src/Components/Reportes/RptCorresponsalesTraficos.tsx @@ -146,6 +146,7 @@ export default function RptCorresponsalesTraficos(props: IProps) { headerName: 'Corresponsal', sortable: true, filter: true, + hide: Perfil === 'Corresponsales' || Perfil === 'Clientes', }, { field: 'patente', sortable: true, filter: true }, { field: 'aduana', sortable: true, filter: true }, @@ -173,6 +174,7 @@ export default function RptCorresponsalesTraficos(props: IProps) { headerName: 'Zip GEMCO', sortable: true, filter: true, + hide: Perfil === 'Corresponsales' || Perfil === 'Clientes', cellRenderer: (params: any) => { if (params.value === 'No') return ( @@ -197,6 +199,7 @@ export default function RptCorresponsalesTraficos(props: IProps) { headerName: 'Zip Corresponsal', sortable: true, filter: true, + hide: Perfil === 'Corresponsales' || Perfil === 'Clientes', cellRenderer: (params: any) => { if (params.value === 'No') return ( @@ -234,7 +237,7 @@ export default function RptCorresponsalesTraficos(props: IProps) { } useEffect(() => { - if(Perfil !== "Corresponsales"){ + if(Perfil !== "Corresponsales" && Perfil !== "Clientes"){ ClientesDataService.getAllClientes(0) .then((response) => { setClientes(response.data) diff --git a/src/DTO/Corresponsales/DTOFiltrosTraficosClientes.ts b/src/DTO/Corresponsales/DTOFiltrosTraficosClientes.ts new file mode 100644 index 0000000..40114f5 --- /dev/null +++ b/src/DTO/Corresponsales/DTOFiltrosTraficosClientes.ts @@ -0,0 +1,12 @@ +export default interface DTOFiltrosTraficosClientes { + Inicio: string; + Fin: string; + TipoOperacion: number; + NoCliente: number; + IdCorresponsal: number; + Pedimento: number; + Aduana: number; + Patente: number; + Referencia: string; + IdUsuario: number; +} \ No newline at end of file diff --git a/src/Services/Catalogos/Clientes.Services.ts b/src/Services/Catalogos/Clientes.Services.ts index 4aeadd9..bfc6f55 100644 --- a/src/Services/Catalogos/Clientes.Services.ts +++ b/src/Services/Catalogos/Clientes.Services.ts @@ -6,6 +6,8 @@ import DTOUsuarioCliente from '../../DTO/DTOUsuarioCliente' import DTOasignaClienteProveedor from "../../DTO/DTOasignaClienteProveedor"; import DTOClienteTransportista from "../../DTO/DTOClienteTransportita"; import { IRegister } from "../../Interfaces/IRegister"; +import DTOFiltrosTraficosClientes from "../../DTO/Corresponsales/DTOFiltrosTraficosClientes"; +import ICorresponsalTrafico from "../../Interfaces/Corresponsales/ICorresponsalTrafico"; class ClientesDataService { @@ -31,5 +33,9 @@ class ClientesDataService { asignaClienteTransportista(data:DTOClienteTransportista) { return http.post("/Clientes/asignaClienteTransportista", data); } + + GetTraficos(data: DTOFiltrosTraficosClientes){ + return http.get(`/Clientes/Traficos?Inicio=${data.Inicio}&Fin=${data.Fin}&TipoOperacion=${data.TipoOperacion}&NoCliente=${data.NoCliente}&IdCorresponsal=${data.IdCorresponsal}&Pedimento=${data.Pedimento}&Aduana=${data.Aduana}&Patente=${data.Patente}&Referencia=${data.Referencia}&IdUsuario=${data.IdUsuario}`) + } } export default new ClientesDataService(); \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index dbc6a4d..65f591c 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -26,6 +26,7 @@ import { CatCentroConstos } from './Components/Catalogos/CatCentroCostos/CatCent import { ReportesEmbarques } from './Components/ReportesClientes/Embarques/ReportesEmbarques' import { ClientesExternos } from './Components/Clientes/Clientes' import { ReporteGC50 } from './Components/ReportesClientes/GC50/ReporteGC50' +import TraficosClientes from './Components/Clientes/Traficos/TraficosClientes' require (`./css/${process.env.REACT_APP_ENVIRONMENT}-home.css`) function PageNotFound() { @@ -80,13 +81,18 @@ root.render( }/> }> - }> - }/> - }/> }/> }/> + }>{/*Aqui van todas las rutas relacionadas a los clientes */} + }>{/*Aqui van todas las rutas relacionadas a los reportes de los clientes*/} + }>{/*Aqui van todas las rutas relacionadas a los reportes de Heineken*/} + }/> + + + }/> +