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