parent
f641256dd8
commit
912f18efe7
@ -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 /> |
||||||
|
Buscar |
||||||
|
</Button> |
||||||
|
<Button |
||||||
|
size='sm' |
||||||
|
variant='success' |
||||||
|
onClick={() => { |
||||||
|
downloadExcel(); |
||||||
|
}} |
||||||
|
style={{marginRight:'5px'}} |
||||||
|
> |
||||||
|
<BsFileEarmarkExcel /> |
||||||
|
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> |
||||||
|
) |
||||||
|
|
||||||
|
} |
@ -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; |
||||||
|
} |
@ -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() |
Loading…
Reference in new issue