parent
31d91c6e3b
commit
422a0f7821
@ -1,17 +1,16 @@ |
||||
import React from "react"; |
||||
import { SideBarMenu } from "../Utils/SideBar/SideBar"; |
||||
import { Outlet, Route, Routes } from "react-router-dom"; |
||||
import { Outlet} from "react-router-dom"; |
||||
|
||||
|
||||
export const ClientesExternos: React.FC = () => { |
||||
|
||||
return ( |
||||
<> |
||||
<div className="container-fluid m-1"> |
||||
<div className="row flex-nowrap"> |
||||
<SideBarMenu/> |
||||
<Outlet/> |
||||
</div> |
||||
</div> |
||||
</> |
||||
) |
||||
} |
@ -0,0 +1,163 @@ |
||||
import { AgGridReact } from "ag-grid-react"; |
||||
import React, { useState } from "react"; |
||||
import { Card, Row, Col, Button, Form } from "react-bootstrap"; |
||||
import { DTOReportesEmbarquesDespachados } from "../../../DTO/Reportes/Embarques/DTOReportesEmabarquesDespachados"; |
||||
import reportesEmbarquesService from "../../../Services/Reportes/reportesEmbarques.Service"; |
||||
import { CellIcon } from "../../Utils/CellIcon/CellIcon"; |
||||
import { DTOBuscarEmbarques } from "../../../DTO/Reportes/Embarques/DTOBuscarEmbarques"; |
||||
import { FaDownload } from "react-icons/fa"; |
||||
|
||||
export const BuscarEmbarques: React.FC = () => { |
||||
const gridRef = React.useRef<any>(null) |
||||
const [Busqueda, setBusqueda] = useState<string>(''); |
||||
const [Embarques, setEmbarques] = useState<DTOBuscarEmbarques[]>([]); |
||||
const [columnDefs] = useState([ |
||||
{ field: 'id', headerName: 'id', width: 70, sortable: true, filter: true }, |
||||
{ field: 'aduana', headerName: 'ADUANA', }, |
||||
{ field: 'tipoEmbarque', headerName: 'TIPO DE EMBARQUE', }, |
||||
{ field: 'destino', headerName: 'DESTINO', }, |
||||
{ field: 'diasEnAduana', headerName: 'DIAS EN ADUANA', }, |
||||
{ field: 'nombre', headerName: 'NOMBRE', }, |
||||
{ field: 'noPedimento', headerName: 'NO DE PEDIMENTO', }, |
||||
{ field: 'tipo', headerName: 'TIPO', }, |
||||
{ field: 'ordenCompra', headerName: 'ORDEN DE COMPRA', }, |
||||
{ field: 'factura', headerName: 'FACTURA', }, |
||||
{ field: 'proveedor', headerName: 'PROVEEDOR', }, |
||||
{ field: 'descripcionMercancia', headerName: 'DESCRIPCION', }, |
||||
{ field: 'bultos', headerName: 'BULTOS', }, |
||||
{ field: 'cantidadContenedores', headerName: 'CANTIDAD DE CONTENEDORES', }, |
||||
{ field: 'pesoNeto', headerName: 'PESO NETO', }, |
||||
{ field: 'incoterm', headerName: 'INCOTERM', }, |
||||
{ field: 'fechaETA', headerName: 'FECHA ETA', }, |
||||
{ field: 'estatus', headerName: 'ESTATUS', }, |
||||
{ field: 'observaciones', headerName: 'OBSERVACIONES', }, |
||||
{ field: 'fechaInicioGastosAlmacenaje', headerName: 'FECHA DE INICIO DE GASTOS DE ALMACENAJE', }, |
||||
{ field: 'costoDiarioAlmacenaje', headerName: 'COSTO DIARIO ALMACENAJE', cellRenderer: (params: any) => {return `$ ${params.data.costoDiarioAlmacenaje}`}}, |
||||
{ field: 'costoDiarioConexion', headerName: 'COSTO DIARIO CONEXION', cellRenderer: (params: any) => {return `$ ${params.data.costoDiarioConexion}`}}, |
||||
{ field: 'totalPagar', headerName: 'TOTAL A PAGAR ALMACENAJE', cellRenderer: (params: any) => {return `$ ${params.data.totalPagar}`}}, |
||||
{ field: 'totalPagarConexion', headerName: 'TOTAL PAGAR CONEXION', cellRenderer: (params: any) => {return `$ ${params.data.totalPagarConexion}`}}, |
||||
{ field: 'fechaDespacho', headerName: 'FECHA DE DESPACHO', }, |
||||
{ field: 'nombrePaqueteria', headerName: 'NOMBRE DE PAQUETERIA O TRANSPORTISTA', }, |
||||
{ field: 'noGuiaEmbarqueDestino', headerName: 'NO. DE GUIA DE EMBARQUE A DESTINO', }, |
||||
{ field: 'fechaEntregaDestinoFinal', headerName: 'FECHA DE ENTREGA EN DESTINO FINAL', }, |
||||
{ field: 'facturaCorresponsal', headerName: 'FACTURA', cellRenderer: (params: any) => { |
||||
return <CellIcon hasFile={params.data.facturaCorresponsal} idTrafico={params.data.id} proceso={16} ></CellIcon> |
||||
}}, |
||||
{ field: 'certificadoCalidad', headerName: 'CERTIFICADO DE CALIDAD', cellRenderer: (params: any) => { |
||||
return <CellIcon hasFile={params.data.certificadoCalidad} idTrafico={params.data.id} proceso={15} ></CellIcon> |
||||
}}, |
||||
{ field: 'packingList', headerName: 'PACKING LIST', cellRenderer: (params: any) => { |
||||
return <CellIcon hasFile={params.data.packingList} idTrafico={params.data.id} proceso={18} ></CellIcon> |
||||
}}, |
||||
{ field: 'hojaTecnica', headerName: 'HOJA TECNICA', cellRenderer: (params: any) => { |
||||
return <CellIcon hasFile={params.data.hojaTecnica} idTrafico={params.data.id} proceso={17} ></CellIcon> |
||||
}}, |
||||
{ field: 'bl', headerName: 'BL', cellRenderer: (params: any) => { |
||||
return <CellIcon hasFile={params.data.bl} idTrafico={params.data.id} proceso={14} ></CellIcon> |
||||
}}, |
||||
{ field: 'pedimentoInformativo', headerName: 'PEDIMENTO INFORMATIVO', cellRenderer: (params: any) => { |
||||
return <CellIcon hasFile={params.data.pedimentoInformativo} idTrafico={params.data.id} proceso={12} ></CellIcon> |
||||
}, width: 130}, |
||||
{ field: 'pedimentoSimplificado', headerName: 'PEDIMENTO SIMPLIFICADO', cellRenderer: (params: any) => { |
||||
return <CellIcon hasFile={params.data.pedimentoSimplificado} idTrafico={params.data.id} proceso={13} ></CellIcon> |
||||
}, width: 130}, |
||||
{ field: 'doda', headerName: 'DODA', cellRenderer: (params: any) => { |
||||
return <CellIcon hasFile={params.data.doda} idTrafico={params.data.id} proceso={11} ></CellIcon> |
||||
}, width: 100}, |
||||
{ field: 'honorarios', headerName: 'HONORARIOS AA', cellRenderer: (params: any) => { |
||||
return <CellIcon hasFile={params.data.honorarios} idTrafico={params.data.id} proceso={37} ></CellIcon> |
||||
}, width: 130}, |
||||
{ field: 'totalHonorarios', headerName: 'TOTAL HONORARIOS AA', cellRenderer: (params: any) => {return `$ ${params.data.totalHonorarios}`}}, |
||||
{ field: 'gastosTerceros', headerName: 'GASTOS A TERCEROS', cellRenderer: (params: any) => { |
||||
return <CellIcon hasFile={params.data.gastosTerceros} idTrafico={params.data.id} proceso={41} ></CellIcon> |
||||
}, width: 130}, |
||||
{ field: 'totalGastosTerceros', headerName: 'TOTAL GASTOS A TERCEROS', }, |
||||
{ field: 'comprobantesGastosTerceros', headerName: 'COMPROBANTES GASTOS A TERCEROS', } |
||||
]); |
||||
|
||||
const filtraEmbarques = (e: any) => { |
||||
gridRef.current.api.setQuickFilter(e.target.value) |
||||
} |
||||
|
||||
const buscarEmbarques = () => { |
||||
if(Busqueda !== '' && Busqueda !== null && Busqueda !== undefined){ |
||||
reportesEmbarquesService.BuscarEmbarques(Busqueda) |
||||
.then((response) => { |
||||
setEmbarques(response.data); |
||||
}); |
||||
}else{ |
||||
//Mostrar mensaje de error
|
||||
} |
||||
} |
||||
|
||||
const exportarEmbarques = () => { |
||||
reportesEmbarquesService.GetExcelBuscados(Busqueda) |
||||
.then(resp => { |
||||
const url = window.URL.createObjectURL(new Blob([resp.data])); |
||||
const link = document.createElement('a'); |
||||
link.href = url; |
||||
link.setAttribute('download', `ReporteBusquedaDeEmbarques.xlsx`); |
||||
document.body.appendChild(link); |
||||
link.click(); |
||||
}) |
||||
} |
||||
|
||||
return ( |
||||
<> |
||||
<Card> |
||||
<Card.Body> |
||||
<Row className="mb-2"> |
||||
<Col xs={5}> |
||||
<Form.Control |
||||
value={Busqueda} |
||||
type='text' |
||||
size='sm' |
||||
placeholder='Search...' |
||||
onChange={(e) => { |
||||
setBusqueda(e.target.value) |
||||
}} |
||||
/> |
||||
</Col> |
||||
<Col> |
||||
<Button className="me-2" variant="primary" onClick={buscarEmbarques}>Generar</Button> |
||||
{ Embarques.length > 0 ? <Button onClick={exportarEmbarques}><FaDownload/> Excel</Button> : "" } |
||||
</Col> |
||||
</Row> |
||||
</Card.Body> |
||||
</Card> |
||||
<Card className='mt-2' style={{visibility: Embarques.length > 0 ? "visible" : "hidden"}}> |
||||
<Card.Body>
|
||||
<Row className="mb-2"> |
||||
<Col xs={5}> |
||||
<Form.Control |
||||
type='text' |
||||
size='sm' |
||||
placeholder='Search...' |
||||
onChange={(e) => { |
||||
filtraEmbarques(e) |
||||
}} |
||||
/> |
||||
</Col> |
||||
</Row> |
||||
<div className='ag-theme-alpine' style={{ height: 500, width: '100%' }}> |
||||
<AgGridReact |
||||
rowData={Embarques} |
||||
columnDefs={columnDefs} |
||||
defaultColDef={{ |
||||
resizable: true, |
||||
initialWidth: 200, |
||||
wrapHeaderText: true, |
||||
autoHeaderHeight: true, |
||||
}} |
||||
pagination={true} |
||||
paginationAutoPageSize={true} |
||||
ref={gridRef} |
||||
rowSelection={'single'} |
||||
rowMultiSelectWithClick={true} |
||||
></AgGridReact> |
||||
</div> |
||||
</Card.Body> |
||||
</Card> |
||||
</> |
||||
); |
||||
} |
@ -0,0 +1,217 @@ |
||||
import { AgGridReact } from "ag-grid-react"; |
||||
import React, { useState, useEffect } from "react"; |
||||
import { DTOReportesEmbarquesDespachados } from "../../../DTO/Reportes/Embarques/DTOReportesEmabarquesDespachados"; |
||||
import reportesEmbarquesService from "../../../Services/Reportes/reportesEmbarques.Service"; |
||||
import { Card, Row, Col, Form, Button } from "react-bootstrap"; |
||||
import { CellIcon } from "../../Utils/CellIcon/CellIcon"; |
||||
import { FaDownload } from "react-icons/fa"; |
||||
|
||||
export const EmbarquesDespachados: React.FC = () => { |
||||
const gridRef = React.useRef<any>(null) |
||||
const [Inicio, setInicio] = useState(currentDate(-7)) |
||||
const [Fin, setFin] = useState(currentDate(0)) |
||||
const [filteredData, setFilteredData] = useState<DTOReportesEmbarquesDespachados[]>([]); |
||||
const [EmbarquesDespachados, setEmbarquesDespachados] = useState<DTOReportesEmbarquesDespachados[]>([]); |
||||
const [columnDefs] = useState([ |
||||
{ field: 'id', headerName: 'id', width: 70, sortable: true, filter: true }, |
||||
{ field: 'aduana', headerName: 'ADUANA', }, |
||||
{ field: 'tipoEmbarque', headerName: 'TIPO DE EMBARQUE', }, |
||||
{ field: 'destino', headerName: 'DESTINO', }, |
||||
{ field: 'diasEnAduana', headerName: 'DIAS EN ADUANA', }, |
||||
{ field: 'nombre', headerName: 'NOMBRE', }, |
||||
{ field: 'trafico', headerName: 'TRAFICO', }, |
||||
{ field: 'referencia', headerName: 'REFERENCIA', }, |
||||
{ field: 'noPedimento', headerName: 'NO DE PEDIMENTO', }, |
||||
{ field: 'clavePedimento', headerName: 'CLAVE DE PADIMENTO', }, |
||||
{ field: 'tipo', headerName: 'TIPO', }, |
||||
{ field: 'ordenCompra', headerName: 'ORDEN DE COMPRA', }, |
||||
{ field: 'factura', headerName: 'FACTURA', }, |
||||
{ field: 'proveedor', headerName: 'PROVEEDOR', }, |
||||
{ field: 'descripcionMercancia', headerName: 'DESCRIPCION', }, |
||||
{ field: 'lineaTransportistaInternacional', headerName: 'LINEA TRANSPORTISTA INTERNACIONAL', }, |
||||
{ field: 'lineaNaviera', headerName: 'LINEA NAVIERA', }, |
||||
{ field: 'mawb', headerName: 'MAWB', }, |
||||
{ field: 'hawb', headerName: 'HAWB', }, |
||||
{ field: 'fechaNotificacion', headerName: 'FECHA DE NOTIFICACION', }, |
||||
{ field: 'bultos', headerName: 'BULTOS', }, |
||||
{ field: 'cantidadContenedores', headerName: 'CANTIDAD DE CONTENEDORES', }, |
||||
{ field: 'numerosContenedores', headerName: 'NO. CONTENEDORES', }, |
||||
{ field: 'pesoBruto', headerName: 'PESO BRUTO', }, |
||||
{ field: 'pesoNeto', headerName: 'PESO NETO', }, |
||||
{ field: 'incoterm', headerName: 'INCOTERM', }, |
||||
{ field: 'fechaETA', headerName: 'FECHA ETA', }, |
||||
{ field: 'fechaEntrada', headerName: 'FECHA DE ENTRADA', }, |
||||
{ field: 'fechaRevalidacionGuia', headerName: 'FECHA DE REVALIDACION GUIA', }, |
||||
{ field: 'montoUSD', headerName: 'MONTO USD', cellRenderer: (params: any) => {return `$ ${params.data.montoUSD}`}}, |
||||
{ field: 'origen', headerName: 'ORIGEN', }, |
||||
{ field: 'fraccionArancelaria', headerName: 'FRACCION ARANCELARIA', }, |
||||
{ field: 'descripcion', headerName: 'DESCRIPCION', }, |
||||
{ field: 'preferenciaArancelaria', headerName: 'PREFERENCIA ARANCELARIA', }, |
||||
{ field: 'estatus', headerName: 'ESTATUS', }, |
||||
{ field: 'observaciones', headerName: 'OBSERVACIONES', }, |
||||
{ field: 'fechaInicioGastosAlmacenaje', headerName: 'FECHA DE INICIO DE GASTOS DE ALMACENAJE', }, |
||||
{ field: 'costoDiarioAlmacenaje', headerName: 'COSTO DIARIO ALMACENAJE', cellRenderer: (params: any) => {return `$ ${params.data.costoDiarioAlmacenaje}`}}, |
||||
{ field: 'costoDiarioConexion', headerName: 'COSTO DIARIO CONEXION', cellRenderer: (params: any) => {return `$ ${params.data.costoDiarioConexion}`}}, |
||||
{ field: 'totalPagar', headerName: 'TOTAL A PAGAR ALMACENAJE', cellRenderer: (params: any) => {return `$ ${params.data.totalPagar}`}}, |
||||
{ field: 'totalPagarConexion', headerName: 'TOTAL PAGAR CONEXION', cellRenderer: (params: any) => {return `$ ${params.data.totalPagarConexion}`}}, |
||||
{ field: 'fechaPagoPedimento', headerName: 'FECHA DE PAGO PEDIMENTO', }, |
||||
{ field: 'fechaInstrucciones', headerName: 'FECHA DE INSTRUCCIONES', }, |
||||
{ field: 'horaInstrucciones', headerName: 'HORA DE INSTRUCCIONES', }, |
||||
{ field: 'fechaDespacho', headerName: 'FECHA DE DESPACHO', }, |
||||
{ field: 'diasCPPagado', headerName: 'DIAS C/PDTO PAGADO', }, |
||||
{ field: 'fechaSalidaContenedores', headerName: 'FECHA SALIDA DE CONTENEDORES', }, |
||||
{ field: 'nombrePaqueteria', headerName: 'NOMBRE DE PAQUETERIA O TRANSPORTISTA', }, |
||||
{ field: 'noGuiaEmbarqueDestino', headerName: 'NO. DE GUIA DE EMBARQUE A DESTINO', }, |
||||
{ field: 'fechaEntregaDestinoFinal', headerName: 'FECHA DE ENTREGA EN DESTINO FINAL', }, |
||||
{ field: 'horaEntregaDestinoFinal', headerName: 'HORA DE ENTREGA EN DESTINO FINAL', }, |
||||
{ field: 'facturaCorresponsal', headerName: 'FACTURA', cellRenderer: (params: any) => { |
||||
return <CellIcon hasFile={params.data.facturaCorresponsal} idTrafico={params.data.id} proceso={16} ></CellIcon> |
||||
}}, |
||||
{ field: 'certificadoCalidad', headerName: 'CERTIFICADO DE CALIDAD', cellRenderer: (params: any) => { |
||||
return <CellIcon hasFile={params.data.certificadoCalidad} idTrafico={params.data.id} proceso={15} ></CellIcon> |
||||
}}, |
||||
{ field: 'packingList', headerName: 'PACKING LIST', cellRenderer: (params: any) => { |
||||
return <CellIcon hasFile={params.data.packingList} idTrafico={params.data.id} proceso={18} ></CellIcon> |
||||
}}, |
||||
{ field: 'hojaTecnica', headerName: 'HOJA TECNICA', cellRenderer: (params: any) => { |
||||
return <CellIcon hasFile={params.data.hojaTecnica} idTrafico={params.data.id} proceso={17} ></CellIcon> |
||||
}}, |
||||
{ field: 'bl', headerName: 'BL', cellRenderer: (params: any) => { |
||||
return <CellIcon hasFile={params.data.bl} idTrafico={params.data.id} proceso={14} ></CellIcon> |
||||
}}, |
||||
{ field: 'pedimentoInformativo', headerName: 'PEDIMENTO INFORMATIVO', cellRenderer: (params: any) => { |
||||
return <CellIcon hasFile={params.data.pedimentoInformativo} idTrafico={params.data.id} proceso={12} ></CellIcon> |
||||
}, width: 130}, |
||||
{ field: 'pedimentoSimplificado', headerName: 'PEDIMENTO SIMPLIFICADO', cellRenderer: (params: any) => { |
||||
return <CellIcon hasFile={params.data.pedimentoSimplificado} idTrafico={params.data.id} proceso={13} ></CellIcon> |
||||
}, width: 130}, |
||||
{ field: 'doda', headerName: 'DODA', cellRenderer: (params: any) => { |
||||
return <CellIcon hasFile={params.data.doda} idTrafico={params.data.id} proceso={11} ></CellIcon> |
||||
}, width: 100}, |
||||
{ field: 'honorarios', headerName: 'HONORARIOS AA', cellRenderer: (params: any) => { |
||||
return <CellIcon hasFile={params.data.honorarios} idTrafico={params.data.id} proceso={37} ></CellIcon> |
||||
}, width: 130}, |
||||
{ field: 'totalHonorarios', headerName: 'TOTAL HONORARIOS AA', cellRenderer: (params: any) => {return `$ ${params.data.totalHonorarios}`}}, |
||||
{ field: 'gastosTerceros', headerName: 'GASTOS A TERCEROS', cellRenderer: (params: any) => { |
||||
return <CellIcon hasFile={params.data.gastosTerceros} idTrafico={params.data.id} proceso={41} ></CellIcon> |
||||
}, width: 130}, |
||||
{ field: 'totalGastosTerceros', headerName: 'TOTAL GASTOS A TERCEROS', cellRenderer: (params: any) => {return `$ ${params.data.totalGastosTerceros}`}}, |
||||
{ field: 'comprobantesGastosTerceros', headerName: 'COMPROBANTES GASTOS A TERCEROS', cellRenderer: (params: any) => { |
||||
return <CellIcon hasFile={params.data.comprobantesGastosTerceros} idTrafico={params.data.id} proceso={2} ></CellIcon> |
||||
}, width: 130}, |
||||
{ field: 'pruebaEntrega', headerName: 'PRUEBA DE ENTREGA', }, |
||||
{ field: 'descargarTodos', headerName: 'DESCARGAR TODOS', }, |
||||
]); |
||||
|
||||
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 |
||||
} |
||||
|
||||
const GetEmbarquesDespachados = () => { |
||||
reportesEmbarquesService.getReporteEmbarquesDespachados(Inicio, Fin) |
||||
.then(res => { |
||||
setEmbarquesDespachados(res.data) |
||||
setFilteredData(res.data) |
||||
}); |
||||
} |
||||
|
||||
const filtraEmbarques = (e: any) => { |
||||
gridRef.current.api.setQuickFilter(e.target.value) |
||||
} |
||||
|
||||
const exportarEmbarques = () => { |
||||
reportesEmbarquesService.GetExcelDespachados(Inicio, Fin) |
||||
.then(resp => { |
||||
const url = window.URL.createObjectURL(new Blob([resp.data])); |
||||
const link = document.createElement('a'); |
||||
link.href = url; |
||||
link.setAttribute('download', `ReporteEmbarquesDespachados.xlsx`); |
||||
document.body.appendChild(link); |
||||
link.click(); |
||||
}) |
||||
} |
||||
|
||||
return ( |
||||
<> |
||||
<Card> |
||||
<Card.Body> |
||||
<Row> |
||||
<Col xs={3}> |
||||
<Form.Label style={{width:'100%'}}> |
||||
Fecha Inicial |
||||
<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={3}> |
||||
<Form.Label style={{width:'100%'}}> |
||||
Fecha Final |
||||
<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 style={{margin:'auto 0px'}}> |
||||
<Button className="me-2" variant="primary" onClick={GetEmbarquesDespachados}>Generar</Button> |
||||
{ EmbarquesDespachados.length > 0 ? <Button onClick={exportarEmbarques}><FaDownload/> Excel</Button> : "" } |
||||
</Col> |
||||
</Row> |
||||
</Card.Body> |
||||
</Card> |
||||
<Card className='mt-2' style={{visibility: EmbarquesDespachados.length > 0 ? "visible" : "hidden"}}> |
||||
<Card.Body>
|
||||
<Row className="mb-2"> |
||||
<Col xs={5}> |
||||
<Form.Control |
||||
type='text' |
||||
size='sm' |
||||
placeholder='Search...' |
||||
onChange={(e) => { |
||||
filtraEmbarques(e) |
||||
}} |
||||
/> |
||||
</Col> |
||||
</Row> |
||||
<div className='ag-theme-alpine' style={{ height: 500, width: '100%' }}> |
||||
<AgGridReact |
||||
rowData={filteredData} |
||||
columnDefs={columnDefs} |
||||
defaultColDef={{ |
||||
resizable: true, |
||||
initialWidth: 200, |
||||
wrapHeaderText: true, |
||||
autoHeaderHeight: true, |
||||
}} |
||||
pagination={true} |
||||
paginationAutoPageSize={true} |
||||
ref={gridRef} |
||||
rowSelection={'single'} |
||||
rowMultiSelectWithClick={true} |
||||
></AgGridReact> |
||||
</div> |
||||
</Card.Body> |
||||
</Card> |
||||
</> |
||||
); |
||||
} |
@ -0,0 +1,163 @@ |
||||
import { AgGridReact } from "ag-grid-react"; |
||||
import React, { useState, useEffect } from "react"; |
||||
import { DTOReportesEmbarquesPorImportar } from "../../../DTO/Reportes/Embarques/DTOReportesEmabarquesPorImportar"; |
||||
import reportesEmbarquesService from "../../../Services/Reportes/reportesEmbarques.Service"; |
||||
import { ColDef } from "ag-grid-community"; |
||||
import { Card, Row, Col, Form, Button } from "react-bootstrap"; |
||||
import { CellIcon } from "../../Utils/CellIcon/CellIcon"; |
||||
import { FaDownload } from "react-icons/fa"; |
||||
|
||||
export const EmbarquesPorImportar: React.FC = () => { |
||||
const gridRef = React.useRef<any>(null) |
||||
const [EmbarquesPorImportar, setEmbarquesPorImportar] = useState<DTOReportesEmbarquesPorImportar[]>([]); |
||||
const [columnDefs] = useState<ColDef[]>([ |
||||
{ field: 'id', headerName: 'id', width: 70, sortable: true, filter: true }, |
||||
{ field: 'aduana', headerName: 'ADUANA', }, |
||||
{ field: 'tipoEmbarque', headerName: 'TIPO DE EMBARQUE', }, |
||||
{ field: 'destino', headerName: 'DESTINO', }, |
||||
{ field: 'diasEnAduana', headerName: 'DIAS EN ADUANA', }, |
||||
{ field: 'nombre', headerName: 'NOMBRE', }, |
||||
{ field: 'trafico', headerName: 'TRAFICO', }, |
||||
{ field: 'referencia', headerName: 'REFERENCIA', }, |
||||
{ field: 'noPedimento', headerName: 'NO DE PEDIMENTO', }, |
||||
{ field: 'clavePedimento', headerName: 'CLAVE DE PADIMENTO', }, |
||||
{ field: 'tipo', headerName: 'TIPO', }, |
||||
{ field: 'ordenCompra', headerName: 'ORDEN DE COMPRA', }, |
||||
{ field: 'factura', headerName: 'FACTURA', }, |
||||
{ field: 'proveedor', headerName: 'PROVEEDOR', }, |
||||
{ field: 'descripcionMercancia', headerName: 'DESCRIPCION', }, |
||||
{ field: 'lineaTransportistaInternacional', headerName: 'LINEA TRANSPORTISTA INTERNACIONAL', }, |
||||
{ field: 'lineaNaviera', headerName: 'LINEA NAVIERA', }, |
||||
{ field: 'mawb', headerName: 'MAWB', }, |
||||
{ field: 'hawb', headerName: 'HAWB', }, |
||||
{ field: 'fechaNotificacion', headerName: 'FECHA DE NOTIFICACION', }, |
||||
{ field: 'bultos', headerName: 'BULTOS', }, |
||||
{ field: 'cantidadContenedores', headerName: 'CANTIDAD DE CONTENEDORES', }, |
||||
{ field: 'numerosContenedores', headerName: 'NO. CONTENEDORES', }, |
||||
{ field: 'pesoBruto', headerName: 'PESO BRUTO', }, |
||||
{ field: 'pesoNeto', headerName: 'PESO NETO', }, |
||||
{ field: 'incoterm', headerName: 'INCOTERM', }, |
||||
{ field: 'fechaETA', headerName: 'FECHA ETA', }, |
||||
{ field: 'fechaEntrada', headerName: 'FECHA DE ENTRADA', }, |
||||
{ field: 'fechaRevalidacionGuia', headerName: 'FECHA DE REVALIDACION GUIA', }, |
||||
{ field: 'montoUSD', headerName: 'MONTO USD', cellRenderer: (params: any) => {return `$ ${params.data.montoUSD}`}}, |
||||
{ field: 'origen', headerName: 'ORIGEN', }, |
||||
{ field: 'fraccionArancelaria', headerName: 'FRACCION ARANCELARIA', }, |
||||
{ field: 'descripcion', headerName: 'DESCRIPCION', }, |
||||
{ field: 'preferenciaArancelaria', headerName: 'PREFERENCIA ARANCELARIA', }, |
||||
{ field: 'estatus', headerName: 'ESTATUS', }, |
||||
{ field: 'observaciones', headerName: 'OBSERVACIONES', }, |
||||
{ field: 'fechaInicioGastosAlmacenaje', headerName: 'FECHA DE INICIO DE GASTOS DE ALMACENAJE', }, |
||||
{ field: 'costoDiarioAlmacenaje', headerName: 'COSTO DIARIO ALMACENAJE', cellRenderer: (params: any) => {return `$ ${params.data.costoDiarioAlmacenaje}`}}, |
||||
{ field: 'costoDiarioConexion', headerName: 'COSTO DIARIO CONEXION', cellRenderer: (params: any) => {return `$ ${params.data.costoDiarioConexion}`}}, |
||||
{ field: 'totalPagar', headerName: 'TOTAL A PAGAR ALMACENAJE', cellRenderer: (params: any) => {return `$ ${params.data.totalPagar}`}}, |
||||
{ field: 'totalPagarConexion', headerName: 'TOTAL PAGAR CONEXION', cellRenderer: (params: any) => {return `$ ${params.data.totalPagarConexion}`}}, |
||||
{ field: 'fechaPagoPedimento', headerName: 'FECHA DE PAGO PEDIMENTO', }, |
||||
{ field: 'fechaInstrucciones', headerName: 'FECHA DE INSTRUCCIONES', }, |
||||
{ field: 'horaInstrucciones', headerName: 'HORA DE INSTRUCCIONES', }, |
||||
{ field: 'fechaDespacho', headerName: 'FECHA DE DESPACHO', }, |
||||
{ field: 'diasCPPagado', headerName: 'DIAS C/PDTO PAGADO', }, |
||||
{ field: 'fechaSalidaContenedores', headerName: 'FECHA SALIDA DE CONTENEDORES', }, |
||||
{ field: 'nombrePaqueteria', headerName: 'NOMBRE DE PAQUETERIA O TRANSPORTISTA', }, |
||||
{ field: 'noGuiaEmbarqueDestino', headerName: 'NO. DE GUIA DE EMBARQUE A DESTINO', }, |
||||
{ field: 'fechaEntregaDestinoFinal', headerName: 'FECHA DE ENTREGA EN DESTINO FINAL', }, |
||||
{ field: 'horaEntregaDestinoFinal', headerName: 'HORA DE ENTREGA EN DESTINO FINAL', }, |
||||
{ field: 'facturaCorresponsal', headerName: 'FACTURA', cellRenderer: (params: any) => { |
||||
return <CellIcon hasFile={params.data.facturaCorresponsal} idTrafico={params.data.id} proceso={16} ></CellIcon> |
||||
}}, |
||||
{ field: 'certificadoCalidad', headerName: 'CERTIFICADO DE CALIDAD', cellRenderer: (params: any) => { |
||||
return <CellIcon hasFile={params.data.certificadoCalidad} idTrafico={params.data.id} proceso={15} ></CellIcon> |
||||
}}, |
||||
{ field: 'packingList', headerName: 'PACKING LIST', cellRenderer: (params: any) => { |
||||
return <CellIcon hasFile={params.data.packingList} idTrafico={params.data.id} proceso={18} ></CellIcon> |
||||
}}, |
||||
{ field: 'hojaTecnica', headerName: 'HOJA TECNICA', cellRenderer: (params: any) => { |
||||
return <CellIcon hasFile={params.data.hojaTecnica} idTrafico={params.data.id} proceso={17} ></CellIcon> |
||||
}}, |
||||
{ field: 'bl', headerName: 'BL', cellRenderer: (params: any) => { |
||||
return <CellIcon hasFile={params.data.bl} idTrafico={params.data.id} proceso={14} ></CellIcon> |
||||
}}, |
||||
{ field: 'pedimentoInformativo', headerName: 'PEDIMENTO INFORMATIVO', cellRenderer: (params: any) => { |
||||
return <CellIcon hasFile={params.data.pedimentoInformativo} idTrafico={params.data.id} proceso={12} ></CellIcon> |
||||
}, width: 130}, |
||||
{ field: 'pedimentoSimplificado', headerName: 'PEDIMENTO SIMPLIFICADO', cellRenderer: (params: any) => { |
||||
return <CellIcon hasFile={params.data.pedimentoSimplificado} idTrafico={params.data.id} proceso={13} ></CellIcon> |
||||
}, width: 130}, |
||||
{ field: 'doda', headerName: 'DODA', cellRenderer: (params: any) => { |
||||
return <CellIcon hasFile={params.data.doda} idTrafico={params.data.id} proceso={11} ></CellIcon> |
||||
}, width: 100}, |
||||
{ field: 'cuentaDeGastos', headerName: 'CUENTA DE GASTOS', cellRenderer: (params: any) => { |
||||
return <CellIcon hasFile={params.data.cuentaDeGastos} idTrafico={params.data.id} proceso={37} ></CellIcon> |
||||
}, width: 100}, |
||||
]); |
||||
|
||||
const fetchEmbarquesPorImportar = () => { |
||||
reportesEmbarquesService.getReporteEmbarquesPorImportar() |
||||
.then(res => { |
||||
console.log(res.data) |
||||
setEmbarquesPorImportar(res.data) |
||||
}); |
||||
} |
||||
useEffect(() => { |
||||
fetchEmbarquesPorImportar(); |
||||
},[]) |
||||
|
||||
const filtraEmbarques = (e: any) => { |
||||
gridRef.current.api.setQuickFilter(e.target.value) |
||||
} |
||||
|
||||
const exportarEmbarques = () => { |
||||
reportesEmbarquesService.GetExcelPorImportar() |
||||
.then(resp => { |
||||
const url = window.URL.createObjectURL(new Blob([resp.data])); |
||||
const link = document.createElement('a'); |
||||
link.href = url; |
||||
link.setAttribute('download', `ReporteEmbarquesPorImportar.xlsx`); |
||||
document.body.appendChild(link); |
||||
link.click(); |
||||
}) |
||||
} |
||||
|
||||
return ( |
||||
<Card className='mt-2'> |
||||
<Card.Body> |
||||
<Row className="mb-4"> |
||||
<Col> |
||||
<Button className="me-2" onClick={fetchEmbarquesPorImportar}>Actualizar</Button> |
||||
<Button onClick={exportarEmbarques}><FaDownload/> Excel</Button> |
||||
</Col> |
||||
</Row> |
||||
<hr/> |
||||
<Row className="mb-2"> |
||||
<Col xs={5}> |
||||
<Form.Control |
||||
type='text' |
||||
size='sm' |
||||
placeholder='Search...' |
||||
onChange={(e) => { |
||||
filtraEmbarques(e) |
||||
}} |
||||
/> |
||||
</Col> |
||||
</Row> |
||||
<div className='ag-theme-alpine' style={{ height: 500, width: '100%' }}> |
||||
<AgGridReact |
||||
rowData={EmbarquesPorImportar} |
||||
columnDefs={columnDefs} |
||||
defaultColDef={{ |
||||
resizable: true, |
||||
initialWidth: 200, |
||||
wrapHeaderText: true, |
||||
autoHeaderHeight: true, |
||||
}} |
||||
pagination={true} |
||||
paginationAutoPageSize={true} |
||||
ref={gridRef} |
||||
rowSelection={'single'} |
||||
rowMultiSelectWithClick={true} |
||||
></AgGridReact> |
||||
</div> |
||||
</Card.Body> |
||||
</Card> |
||||
); |
||||
} |
@ -0,0 +1,74 @@ |
||||
import { useState, useEffect } from "react"; |
||||
import { IconContext } from "react-icons"; |
||||
import { BsFillXCircleFill, BsCheckCircleFill } from "react-icons/bs"; |
||||
import IFileManager from "../../../Interfaces/Utils/IFileManager"; |
||||
import MFileManagerService from "../../../Services/Utils/MFileManager.Service"; |
||||
import FileManagerDataService from "../../../Services/Utils/FileManager.Services"; |
||||
import { Form } from "react-bootstrap"; |
||||
|
||||
interface IProps{ |
||||
hasFile: number; |
||||
idTrafico: number; |
||||
proceso: number; |
||||
} |
||||
|
||||
export const CellIcon: React.FC<IProps> = (props: IProps) => { |
||||
const [Archvios, setArchivos] = useState<IFileManager[]>([]); |
||||
|
||||
useEffect(() => { |
||||
MFileManagerService.Get(props.idTrafico, props.proceso).then(response => { |
||||
setArchivos(response.data); |
||||
}) |
||||
},[]); |
||||
|
||||
const getFileById = (idTrafico:number) => { |
||||
FileManagerDataService.getFileContentById(idTrafico) |
||||
.then((response:any) => { |
||||
const blob = new Blob([response.data], { type: 'application/pdf' }) |
||||
const url = window.URL.createObjectURL(blob) |
||||
window.open(url) |
||||
}) |
||||
} |
||||
|
||||
const getFileByProcess = (idTrafico:number, proceso: number) => { |
||||
FileManagerDataService.getFileContent(idTrafico, proceso) |
||||
.then((response:any) => { |
||||
const blob = new Blob([response.data], { type: 'application/pdf' }) |
||||
const url = window.URL.createObjectURL(blob) |
||||
window.open(url) |
||||
}) |
||||
} |
||||
return ( |
||||
<div style={{ paddingLeft: '20px', textAlign:'center' }}> |
||||
{ |
||||
props.hasFile === 0 ? |
||||
<IconContext.Provider value={{ color: 'red', size: '25px' }}> |
||||
<BsFillXCircleFill /> |
||||
</IconContext.Provider> |
||||
: [14, 15 , 16, 17, 18].includes(props.proceso) ?
|
||||
<Form.Control |
||||
as="select" |
||||
id={`Select_${props.idTrafico}_${props.proceso}`} |
||||
onChange={(e) => {getFileById(+e.target!.value) }} |
||||
value={0} |
||||
className="form-select form-select-sm" |
||||
> |
||||
<option value="0">-SELECCIONE-</option> |
||||
{Archvios |
||||
? Archvios.map((a) => { |
||||
return ( |
||||
<option key={a.id} value={a.id}> |
||||
{a.nombreArchivo} |
||||
</option> |
||||
) |
||||
}) |
||||
: null} |
||||
</Form.Control>
|
||||
: |
||||
<IconContext.Provider value={{ color: 'green', size: '25px' }}> |
||||
<BsCheckCircleFill onClick={() => getFileByProcess(props.idTrafico, props.proceso)} style={{cursor:'pointer'}}/> |
||||
</IconContext.Provider> |
||||
} |
||||
</div> |
||||
) |
||||
} |
@ -0,0 +1,43 @@ |
||||
export interface DTOBuscarEmbarques{ |
||||
id:number; |
||||
aduana: string; |
||||
tipoEmbarque: string; |
||||
destino: string; |
||||
diasEnAduana: number; |
||||
nombre: string; //nombre del cliente
|
||||
noPedimento: string; |
||||
tipo: string; //Tipo de operacion
|
||||
ordenCompra: string; |
||||
factura: string; //Facturas concatenadas
|
||||
proveedor: string; |
||||
descripcionMercancia: string; |
||||
bultos: number; |
||||
cantidadContenedores: number; |
||||
pesoNeto: number; |
||||
incoterm: string; |
||||
fechaETA: Date; |
||||
estatus: string; |
||||
observaciones: string; |
||||
fechaInicioGastosAlmacenaje: Date; |
||||
costoDiarioAlmacenaje: number; |
||||
costoDiarioConexion: number; |
||||
totalPagar: string; |
||||
totalPagarConexion: string; |
||||
fechaDespacho: Date; |
||||
nombrePaqueteria: string; |
||||
noGuiaEmbarqueDestino: string; |
||||
fechaEntregaDestinoFinal: Date; |
||||
facturaCorresponsal: number; |
||||
certificadoCalidad: number; |
||||
packingList: number; |
||||
hojaTecnica: number; |
||||
BL: number; |
||||
pedimentoInformativo: number; |
||||
pedimentoSimplificado: number; |
||||
DODA: number; |
||||
honorarios: number; |
||||
totalHonorarios: number; |
||||
gastosTerceros: number; |
||||
totalGastosTerceros: number; |
||||
comprobantesGastosTerceros: number; |
||||
} |
@ -1,4 +1,4 @@ |
||||
export interface IDTOReportesEmbarques{ |
||||
export interface DTOReportesEmbarquesDespachados{ |
||||
id:number; |
||||
aduana: string; |
||||
tipoEmbarque: string; |
@ -0,0 +1,61 @@ |
||||
export interface DTOReportesEmbarquesPorImportar{ |
||||
id:number; |
||||
aduana: string; |
||||
tipoEmbarque: string; |
||||
destino: string; |
||||
diasEnAduana: number; |
||||
nombre: string; //nombre del cliente
|
||||
trafico:string; |
||||
referencia: string; |
||||
noPedimento: string; |
||||
clavePedimento: string; |
||||
tipo: string; //Tipo de operacion
|
||||
ordenCompra: string; |
||||
factura: string; //Facturas concatenadas
|
||||
proveedor: string; |
||||
descripcionMercancia: string; |
||||
lineaTransportistaInternacional: string; |
||||
lineaNaviera: string; |
||||
MAWB: string; |
||||
HAWB: string; |
||||
fechaNotificacion: Date; |
||||
bultos: number; |
||||
cantidadContenedores: number; |
||||
numerosContenedores: number; |
||||
pesoBruto: number; |
||||
pesoNeto: number; |
||||
incoterm: string; |
||||
fechaETA: Date; |
||||
fechaEntrada: Date; |
||||
fechaRevalidacionGuia: Date; |
||||
montoUSD: number; |
||||
origen: string; |
||||
fraccionArancelaria: string; |
||||
descripcion: string; |
||||
preferenciaArancelaria: string; |
||||
estatus: string; |
||||
observaciones: string; |
||||
fechaInicioGastosAlmacenaje: Date; |
||||
costoDiarioAlmacenaje: number; |
||||
costoDiarioConexion: number; |
||||
totalPagar: string; |
||||
totalPagarConexion: string; |
||||
fechaPagoPedimento:Date; |
||||
fechaInstrucciones: Date; |
||||
horaInstrucciones: string; |
||||
fechaDespacho: Date; |
||||
diasCPPagado: number; |
||||
fechaSalidaContenedores: Date; |
||||
nombrePaqueteria: string; |
||||
noGuiaEmbarqueDestino: string; |
||||
fechaEntregaDestinoFinal: Date; |
||||
horaEntregaDestinoFinal: string; |
||||
facturaCorresponsal: number; |
||||
certificadoCalidad: number; |
||||
packingList: number; |
||||
hojaTecnica: number; |
||||
BL: number; |
||||
pedimentoInformativo: number; |
||||
pedimentoSimplificado: number; |
||||
DODA: number; |
||||
} |
@ -0,0 +1,34 @@ |
||||
import React from "react"; |
||||
import http from "../common/http-common"; |
||||
import { DTOReportesEmbarquesPorImportar } from "../../DTO/Reportes/Embarques/DTOReportesEmabarquesPorImportar"; |
||||
import { DTOReportesEmbarquesDespachados } from "../../DTO/Reportes/Embarques/DTOReportesEmabarquesDespachados"; |
||||
import { DTOBuscarEmbarques } from "../../DTO/Reportes/Embarques/DTOBuscarEmbarques"; |
||||
|
||||
class ReportesEmbarquesService{ |
||||
|
||||
getReporteEmbarquesPorImportar(){ |
||||
return http.get<DTOReportesEmbarquesPorImportar[]>(`ReportesEmbarques/PorImportar`); |
||||
} |
||||
|
||||
getReporteEmbarquesDespachados(inicio: string, fin: string){ |
||||
return http.get<DTOReportesEmbarquesDespachados[]>(`ReportesEmbarques/Despachados?inicio=${inicio}&fin=${fin}`); |
||||
} |
||||
|
||||
BuscarEmbarques(filtro: string){ |
||||
return http.get<DTOBuscarEmbarques[]>(`ReportesEmbarques/BuscarEmbarques?filtro=${filtro}`); |
||||
} |
||||
|
||||
GetExcelPorImportar(){ |
||||
return http.get(`ReportesEmbarques/ExcelEmbarquesPorImportar`, {responseType: 'blob'}) |
||||
} |
||||
|
||||
GetExcelDespachados(inicio: string, fin: string){ |
||||
return http.get(`ReportesEmbarques/ExcelEmbarquesDespachados?inicio=${inicio}&fin=${fin}`, {responseType: 'blob'}) |
||||
} |
||||
|
||||
GetExcelBuscados(busqueda: string){ |
||||
return http.get(`ReportesEmbarques/ExcelBuscarEmbarques?filtro=${busqueda}`, {responseType: 'blob'}) |
||||
} |
||||
} |
||||
|
||||
export default new ReportesEmbarquesService(); |
Loading…
Reference in new issue