Compare commits
29 Commits
@ -0,0 +1,125 @@ |
||||
import { FC, useEffect, useState } from 'react'; |
||||
import { Card, Col, Row } from 'react-bootstrap'; |
||||
import { Link } from 'react-router-dom'; |
||||
import { IconContext } from 'react-icons'; |
||||
import { FcSurvey } from 'react-icons/fc'; |
||||
import { FaCcMastercard } from 'react-icons/fa'; |
||||
import ClientesServices from '../../Services/Catalogos/Clientes.Services'; |
||||
import { AxiosError } from 'axios'; |
||||
import IClientes from '../../Interfaces/Catalogos/IClientes'; |
||||
import { MsgInformativo } from '../Utils/Toast/msgInformativo'; |
||||
|
||||
export default function DashboardClientes() { |
||||
const [UserId, setUserId] = useState(() => { |
||||
const stickyValue = window.localStorage.getItem('UserId') |
||||
return stickyValue !== null ? JSON.parse(stickyValue) : 0 |
||||
}) |
||||
//const [ShowEstadosCuenta, setShowEstadosCuenta] = useState(false)
|
||||
const [show, setShow] = useState(false) |
||||
const [msg, setMsg] = useState('') |
||||
const [header, setHeader] = useState('') |
||||
const [msgColor, setMsgColor] = useState('primary') |
||||
//
|
||||
const [clientes, setClientes] = useState<IClientes[]>([]) |
||||
|
||||
/* useEffect(() => { |
||||
ClientesServices.getUsuariosAsignados(UserId) |
||||
.then(resp => { |
||||
setClientes(resp.data) |
||||
let cliente = resp.data.filter((x) => x.sClave===1896 && x.agrupado===1) |
||||
if(cliente.length > 0){ |
||||
setShowEstadosCuenta(true) |
||||
} |
||||
}) |
||||
.catch((err: AxiosError)=>{ |
||||
setShow(true) |
||||
setMsg(err.request.responseText) |
||||
setHeader('Error') |
||||
return |
||||
}) |
||||
}, []) */ |
||||
|
||||
return ( |
||||
<> |
||||
<Col> |
||||
<Card style={{ width: '18rem' }} className='dashboardComponentFont'> |
||||
<Card.Header style={{fontSize:'15.9px'}}> |
||||
Clientes |
||||
</Card.Header> |
||||
<Card.Body style={{ paddingBottom: '50px' }}> |
||||
<Card.Title> |
||||
Traficos |
||||
<br /> |
||||
<br /> |
||||
</Card.Title> |
||||
<Card.Img variant='top' src='' onClick={() => {}} /> |
||||
<div style={{ fontSize: '6em' }} className='text-center'> |
||||
<FcSurvey /> |
||||
</div> |
||||
</Card.Body> |
||||
<Card.Footer> |
||||
<Row> |
||||
<Col xs={6} style={{ paddingRight: '5px' }}> |
||||
{/* <Link |
||||
to={`../RptCorresponsalesTraficosHst?proc=0&status=0`} |
||||
style={{ textDecoration: 'none', float: 'right', paddingRight: '10px' }} |
||||
> |
||||
Buscar |
||||
</Link> */} |
||||
{/* <span style={{ fontWeight: 'bold' }}>Tipo cambio: ${TipoCambio}</span> */} |
||||
</Col> |
||||
{/* <Col xs={3}></Col> */} |
||||
<Col xs={6} style={{ paddingRight: '5px' }}> |
||||
<Link |
||||
to={`../Clientes/Traficos`} |
||||
style={{ |
||||
textDecoration: 'none', |
||||
float: 'right', |
||||
paddingRight: '10px', |
||||
}} |
||||
> |
||||
Ver mas... |
||||
</Link> |
||||
</Col> |
||||
</Row> |
||||
</Card.Footer> |
||||
</Card> |
||||
</Col> |
||||
<Col> |
||||
<Card style={{ width: '18rem' }} className='dashboardComponentFont'> |
||||
<Card.Header>Clientes</Card.Header> |
||||
<Card.Body style={{ paddingBottom: '50px' }}> |
||||
<Card.Title> |
||||
Estados de cuenta |
||||
<br /> |
||||
<br /> |
||||
</Card.Title> |
||||
<Card.Img variant='top' src='' onClick={() => {}} /> |
||||
<div style={{ fontSize: '6em' }} className='text-center'> |
||||
<IconContext.Provider value={{ color: 'orange' }}> |
||||
<FaCcMastercard /> |
||||
</IconContext.Provider> |
||||
</div> |
||||
</Card.Body> |
||||
<Card.Footer style={{ paddingRight: '5px' }}> |
||||
<Link |
||||
to='../Clientes/EstadosCuenta' |
||||
style={{ textDecoration: 'none', float: 'right', paddingRight: '10px' }} |
||||
> |
||||
Ver mas... |
||||
</Link> |
||||
</Card.Footer> |
||||
</Card> |
||||
</Col> |
||||
<MsgInformativo |
||||
show={show} |
||||
msg={msg} |
||||
header={header} |
||||
msgColor={msgColor} |
||||
closeToast={function (arg: boolean): void { |
||||
setShow(false) |
||||
}} |
||||
/> |
||||
</> |
||||
); |
||||
}; |
||||
@ -0,0 +1,125 @@ |
||||
import { ApexOptions } from "apexcharts"; |
||||
import { useEffect, useState } from "react"; |
||||
import ReactApexChart from "react-apexcharts" |
||||
import { Card, Col, Row } from "react-bootstrap" |
||||
import { Link } from "react-router-dom" |
||||
import DashboardDataService from '../../Services/Dashboard/Dashboard.Corresponsales.Services'; |
||||
|
||||
export const DashboardSistemas:React.FC = () => { |
||||
const [TotalCorresponsales, setTotalCorresponsales] = useState(0); |
||||
const [series, setseries] = useState<number[]>([]); |
||||
const [Label, setLabel] = useState(''); |
||||
const [CircleOptions, setCirleOpcions] = useState<ApexOptions>({ |
||||
labels: [], |
||||
colors: ['#EB984E',], |
||||
legend: { position: 'bottom' }, |
||||
plotOptions: { |
||||
pie: { |
||||
donut: { |
||||
size: '55%', |
||||
}, |
||||
}, |
||||
}, |
||||
}); |
||||
|
||||
useEffect(() => { |
||||
DashboardDataService.getDisk() |
||||
.then((response) => { |
||||
console.log(response.data); |
||||
setLabel(response.data.descripcion) |
||||
setseries([response.data.total]); |
||||
|
||||
setCirleOpcions({ |
||||
labels: [response.data.descripcion], |
||||
colors: ['#ABEB4E'], |
||||
legend: { position: 'bottom' }, |
||||
plotOptions: { |
||||
radialBar: { |
||||
startAngle: -135, |
||||
endAngle: 135, |
||||
track: { |
||||
background: "#e7e7e7", |
||||
strokeWidth: '100%', |
||||
margin: 5, // margin is in pixels
|
||||
dropShadow: { |
||||
enabled: false, |
||||
top: 2, |
||||
left: 0, |
||||
color: '#999', |
||||
opacity: 1, |
||||
blur: 2 |
||||
} |
||||
}, |
||||
dataLabels: { |
||||
name:{ |
||||
show:false |
||||
}, |
||||
value: { |
||||
show: true, |
||||
fontSize: '43px', |
||||
fontWeight: 'bold', |
||||
}, |
||||
} |
||||
} |
||||
}, |
||||
grid: { |
||||
padding: { |
||||
top: -10 |
||||
} |
||||
}, |
||||
}); |
||||
}) |
||||
.catch((e: Error) => { |
||||
return; |
||||
}); |
||||
//getTipoCambio(currentDate())
|
||||
}, []); |
||||
|
||||
return ( |
||||
<Col> |
||||
<Card style={{ width: '18rem' }} className='dashboardComponentFont'> |
||||
<Card.Header style={{fontSize:'15.9px'}}> |
||||
<b>Sistemas </b> |
||||
</Card.Header> |
||||
<Card.Body style={{ paddingBottom: '0px'}}> |
||||
<Card.Title>Almacenamiento interno</Card.Title> |
||||
<ReactApexChart |
||||
type='radialBar' |
||||
options={CircleOptions} |
||||
series={series} |
||||
width={250} |
||||
height={310} |
||||
/> |
||||
<div style={{textAlign:"center"}}>{Label}</div> |
||||
</Card.Body> |
||||
<Card.Footer> |
||||
<Row> |
||||
<Col xs={6} style={{ paddingRight: '5px' }}> |
||||
{/* <Link |
||||
to={`../RptCorresponsalesTraficosHst?proc=0&status=0`} |
||||
style={{ textDecoration: 'none', float: 'right', paddingRight: '10px' }} |
||||
> |
||||
Buscar |
||||
</Link> */} |
||||
{/* <span style={{ fontWeight: 'bold' }}>Tipo cambio: ${TipoCambio}</span> */} |
||||
</Col> |
||||
{/* <Col xs={3}></Col> */} |
||||
<Col xs={6} style={{ paddingRight: '5px' }}> |
||||
<Link |
||||
to={``} |
||||
style={{ |
||||
visibility: 'hidden', |
||||
textDecoration: 'none', |
||||
float: 'right', |
||||
paddingRight: '10px', |
||||
}} |
||||
> |
||||
Ver mas... |
||||
</Link> |
||||
</Col> |
||||
</Row> |
||||
</Card.Footer> |
||||
</Card> |
||||
</Col> |
||||
) |
||||
} |
||||
@ -0,0 +1,517 @@ |
||||
import { useEffect, useRef, useState } from "react" |
||||
import { Button, Card, Col, Row, Form } from "react-bootstrap" |
||||
import ClientesServices from "../../Services/Catalogos/Clientes.Services" |
||||
import IClientes from "../../Interfaces/Catalogos/IClientes" |
||||
import { AxiosError } from "axios" |
||||
import { MsgInformativo } from "../Utils/Toast/msgInformativo" |
||||
import { AgGridReact } from "ag-grid-react" |
||||
import EstadosCuentaAlenService from "../../Services/EstadosCuenta/EstadosCuentaAlen.Service" |
||||
import { DTOEstadoCuentaAlen } from "../../DTO/EstadosCuenta/DTOEstadoCuentaAlen" |
||||
import { ColDef, ILargeTextEditorParams } from "ag-grid-community" |
||||
import { BsFileEarmarkExcelFill } from "react-icons/bs" |
||||
import { DTOEstadoCuentaAlenFilters } from "../../DTO/EstadosCuenta/DTOEstadosCuentaAlenFilters" |
||||
import { FaDownload } from "react-icons/fa" |
||||
import { IconContext } from "react-icons" |
||||
import FileManagerServices from "../../Services/Utils/FileManager.Services" |
||||
|
||||
export const EstadosCuenta:React.FC = () => { |
||||
const [Perfil, setPerfil] = useState(() => { |
||||
const stickyValue = window.localStorage.getItem('Perfil') |
||||
return stickyValue !== null ? JSON.parse(stickyValue) : '' |
||||
}) |
||||
const [Cuentas, setCuentas] = useState<DTOEstadoCuentaAlen[]> ([]) |
||||
const [show, setShow] = useState(false) |
||||
const [msg, setMsg] = useState('') |
||||
const [header, setHeader] = useState('') |
||||
const [msgColor, setMsgColor] = useState('primary') |
||||
const hiddenFileInputRef = useRef<HTMLInputElement>(null); |
||||
const [showSpinner, setShowSpinner] = useState(false) |
||||
const [File, setFile] = useState<File | null>(); |
||||
//Estados de los filtros
|
||||
const [Remitentes, setRemitentes] = useState<string[]>([]) |
||||
const [Trafico, setTrafico] = useState('') |
||||
const [Aduana, setAduana] = useState('') |
||||
const [Patente, setPatente] = useState('') |
||||
const [Pedimento, setPedimento] = useState('') |
||||
const [TipoOperacion, setTipoOperacion] = useState('') |
||||
const [Inicio, setInicio] = useState('') |
||||
const [Fin, setFin] = useState('') |
||||
const [Remitente, setRemitente] = useState('') |
||||
const [Programado, setProgramado] = useState(0) |
||||
//
|
||||
const [columnDefs] = useState<ColDef[]>([ |
||||
{ |
||||
field:'serie', headerName:'Serie', |
||||
valueGetter: ({data}:any) => {return data.serie + data.noMovimiento}, |
||||
width:100, |
||||
filter: true |
||||
},/* { |
||||
field:'noMovimiento', headerName:'Movimiento' |
||||
}, */{ |
||||
field:'fecha', filter: true |
||||
},{ |
||||
field:'trafico', width:150, sortable: true, filter: true |
||||
},{ |
||||
field:'aduana', width:100, filter: true |
||||
},{ |
||||
field:'patente', width:100, filter: true |
||||
},{ |
||||
field:'pedimento', width:120, filter: true |
||||
},{ |
||||
field:'clave', headerName:'Cve. Pedim', width:120, filter: true |
||||
},{ |
||||
field:'impexp', headerName: 'Impo/Expo', width:120, filter: true |
||||
},{ |
||||
field:'noCliente', headerName: 'No. Cte.', width:100, filter: true |
||||
},{ |
||||
field:'nombre', headerName: 'Nombre Cliente', width:300, filter: true |
||||
},{ |
||||
field:'cargos', width:100, filter: true |
||||
},{ |
||||
field:'abonos', width:100, filter: true |
||||
},{ |
||||
field:'saldoFinal', width:120, filter: true |
||||
},{ |
||||
field:'ivaAl', headerName: '% IVA', width:100, filter: true |
||||
},{ |
||||
field:'descripcion', width:300, wrapText:true, autoHeight: true, filter: true |
||||
},{ |
||||
field:'remitente', width:300, wrapText:true, autoHeight: true, filter: true |
||||
},{ |
||||
field:'pedido', width:300, wrapText:true, autoHeight: true, filter: true |
||||
},{ |
||||
field:'ordenCompra', editable: true, filter: true, wrapText: true, autoHeight:true |
||||
} |
||||
,{ |
||||
field:'tipoMercancia', headerName: 'Tipo Mcia', filter: true |
||||
}, |
||||
{ |
||||
field:'idPdf', headerName: 'PDF', |
||||
cellRenderer: ({data}:any)=>{ |
||||
return ( |
||||
<IconContext.Provider value={{color: 'blue', size:'20px'}}> |
||||
<FaDownload style={{cursor:'pointer'}} onClick={() => { |
||||
if(data.trafico[data.trafico.length-1].toUpperCase() === 'C') |
||||
getCorresponsaliasFile(data.idPdf, 37, data.pdf) |
||||
else |
||||
getAEO(data.serie, data.noMovimiento, 'pdf', data.trafico); |
||||
} |
||||
}/> |
||||
</IconContext.Provider> |
||||
) |
||||
} |
||||
}, |
||||
{ |
||||
field:'idXml', headerName: 'XML', |
||||
cellRenderer: ({data}:any)=>{ |
||||
return ( |
||||
<IconContext.Provider value={{color: 'blue', size:'20px'}}> |
||||
<FaDownload style={{cursor:'pointer'}} onClick={() => { |
||||
if(data.trafico[data.trafico.length-1].toUpperCase() === 'C') |
||||
getCorresponsaliasFile(data.idXml, 38, data.xml) |
||||
else |
||||
getAEO(data.serie, data.noMovimiento, 'xml', data.trafico); |
||||
} |
||||
}/> |
||||
</IconContext.Provider> |
||||
) |
||||
} |
||||
}, |
||||
{ |
||||
field: "observaciones",
|
||||
editable:true, |
||||
filter: true, |
||||
wrapText: true, |
||||
cellEditor: "agLargeTextCellEditor", |
||||
cellEditorPopup: true, |
||||
cellEditorParams: { |
||||
rows: 5, |
||||
maxLength: 1000 |
||||
} as ILargeTextEditorParams, |
||||
autoHeight:true
|
||||
}, |
||||
/* { |
||||
field:'idNotasCargo', headerName: 'Notas de Cargo', |
||||
cellRenderer: ({data}:any)=>{ |
||||
return ( |
||||
data.idNotasCargo !== 0 ?
|
||||
<IconContext.Provider value={{color: 'blue', size:'20px'}}> |
||||
<FaDownload style={{cursor:'pointer'}} onClick={() => { |
||||
if(data.trafico[data.trafico.length-1].toUpperCase() === 'C') |
||||
getCorresponsaliasFile(data.idNotasCargo, 41, data.notasCargo) |
||||
/* else |
||||
getAEO(data.serie, data.noMovimiento);
|
||||
} |
||||
}/> |
||||
</IconContext.Provider> : '' |
||||
) |
||||
} |
||||
}, */ |
||||
]) |
||||
useEffect(() => { |
||||
getCuentas(); |
||||
},[]) |
||||
|
||||
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 uploadFile = (file: File) => { |
||||
setShowSpinner(true) |
||||
const formData = new FormData() |
||||
formData.append('name', file.name) |
||||
formData.append('file', file) |
||||
if(Perfil === 'Administrador'){ |
||||
EstadosCuentaAlenService.Append(formData) |
||||
.then((res) => { |
||||
hiddenFileInputRef.current!.value = '' |
||||
setCuentas(res.data) |
||||
setShowSpinner(false) |
||||
}) |
||||
.catch((err: AxiosError) => { |
||||
setShowSpinner(false) |
||||
hiddenFileInputRef.current!.value = '' |
||||
setShow(true) |
||||
setMsg(err.request.responseText) |
||||
setHeader('Error') |
||||
return |
||||
}) |
||||
} |
||||
if(['Facturacion', 'Sup. Facturacion'].includes(Perfil)){ |
||||
EstadosCuentaAlenService.AppendProgramacionesPago(formData) |
||||
.then((res) => { |
||||
hiddenFileInputRef.current!.value = '' |
||||
setCuentas(res.data) |
||||
setShowSpinner(false) |
||||
}) |
||||
.catch((err: AxiosError) => { |
||||
setShowSpinner(false) |
||||
hiddenFileInputRef.current!.value = '' |
||||
setShow(true) |
||||
setMsg(err.request.responseText) |
||||
setHeader('Error') |
||||
return |
||||
}) |
||||
} |
||||
} |
||||
|
||||
const getCuentas = () => { |
||||
var filters: DTOEstadoCuentaAlenFilters = { |
||||
Trafico: Trafico, |
||||
Impexp: TipoOperacion, |
||||
Aduana: Aduana, |
||||
Patente: Patente, |
||||
Pedimento: Pedimento, |
||||
Inicio: Inicio, |
||||
Fin: Fin, |
||||
Remitente: Remitente, |
||||
Programado: Programado |
||||
} |
||||
EstadosCuentaAlenService.GetAll(filters) |
||||
.then(resp => { |
||||
setCuentas(resp.data) |
||||
if(resp.data.length === 0){ |
||||
setShow(true) |
||||
setMsg("No se encontraron registros") |
||||
setHeader('Informativo') |
||||
return; |
||||
} |
||||
if(Remitentes.length === 0){ |
||||
let remitentes = resp.data.map((x:any) => { |
||||
if(x.remitente==='' || x.remitente===null) x.remitente = 'SIN REMITENTE' |
||||
return x.remitente |
||||
}) |
||||
setRemitentes(remitentes.filter(function(elem, index, self) { |
||||
return index === self.indexOf(elem); |
||||
}).sort((a,b) => (a < b ? -1 : 1))) |
||||
} |
||||
}) |
||||
.catch((err: AxiosError) => { |
||||
setShowSpinner(false) |
||||
setShow(true) |
||||
setMsg(err.request.responseText) |
||||
setHeader('Error') |
||||
return |
||||
}) |
||||
} |
||||
|
||||
const selectFile = () => { |
||||
hiddenFileInputRef.current?.click() |
||||
} |
||||
|
||||
const downloadEstadosCuenta = () => { |
||||
EstadosCuentaAlenService.ExportEstadosCuenta(Cuentas) |
||||
.then((resp:any) => { |
||||
const url = window.URL.createObjectURL(new Blob([resp.data])) |
||||
const link = document.createElement('a') |
||||
link.href = url |
||||
link.setAttribute('download', "EstadosDeCuenta.xlsx") |
||||
document.body.appendChild(link) |
||||
link.click() |
||||
}).catch((err:AxiosError) => { |
||||
setShow(true) |
||||
setMsg(err.request.responseText) |
||||
setHeader('Error') |
||||
return; |
||||
}) |
||||
} |
||||
|
||||
const getRowStyle = (params: any) => { |
||||
var styles = { |
||||
backgroundColor:'', |
||||
border: '0.5px solid #aaaaaa', |
||||
} |
||||
/* if (params.data.programado === 1) { |
||||
styles.backgroundColor = 'rgb(98, 190, 255, 0.5)'; |
||||
} */ |
||||
if(params.data.programado === true){ |
||||
styles.backgroundColor = "rgb(255, 193, 7, 0.5)"; |
||||
} |
||||
|
||||
return styles; |
||||
}; |
||||
|
||||
const getCorresponsaliasFile = (id:number, proceso: number, fileName: string) => { |
||||
FileManagerServices.getFileContent(id, proceso) |
||||
.then((resp: any) => { |
||||
const url = window.URL.createObjectURL(new Blob([resp.data])) |
||||
const link = document.createElement('a') |
||||
link.href = url |
||||
link.setAttribute('download', fileName) |
||||
document.body.appendChild(link) |
||||
link.click() |
||||
}).catch((err:AxiosError) => { |
||||
setShow(true) |
||||
setMsg("No se encontró el archivo solicitado") |
||||
setHeader('Error') |
||||
return; |
||||
}) |
||||
} |
||||
|
||||
const getAEO = (serie: string, noMovimiento: string, mime: string, trafico: string) => { |
||||
FileManagerServices.getAEO(serie, noMovimiento, mime, trafico) |
||||
.then((resp: any) => { |
||||
const url = window.URL.createObjectURL(new Blob([resp.data])) |
||||
const link = document.createElement('a') |
||||
link.href = url |
||||
link.setAttribute('download', `EstadoCuenta_${serie}${noMovimiento}.${mime}`) |
||||
document.body.appendChild(link) |
||||
link.click() |
||||
}).catch((err:AxiosError) => { |
||||
setShow(true) |
||||
setMsg("No se encontró el archivo solicitado") |
||||
setHeader('Error') |
||||
return; |
||||
}) |
||||
} |
||||
|
||||
const onCellValueChanged = (event: any) => { |
||||
var data: DTOEstadoCuentaAlen = event.data; |
||||
let ColDef = event.colDef; |
||||
if(ColDef.field === 'ordenCompra'){ |
||||
EstadosCuentaAlenService.AppendOrdenCompra(data) |
||||
.then(() => getCuentas()) |
||||
.catch((err:AxiosError) => { |
||||
setShow(true) |
||||
setMsg(err.request.responseText) |
||||
setHeader('Error') |
||||
return; |
||||
}) |
||||
} |
||||
if(ColDef.field === 'observaciones'){ |
||||
EstadosCuentaAlenService.AppendObservaciones(data) |
||||
.then(() => getCuentas()) |
||||
.catch((err:AxiosError) => { |
||||
setShow(true) |
||||
setMsg(err.request.responseText) |
||||
setHeader('Error') |
||||
return; |
||||
}) |
||||
} |
||||
} |
||||
return ( |
||||
<div> |
||||
<Card> |
||||
<Card.Body> |
||||
<Row> |
||||
<Col xs={2}> |
||||
<Form.Label style={{width:'100%'}}> |
||||
Trafico |
||||
<Form.Control |
||||
size="sm" |
||||
type="text" |
||||
value={Trafico} |
||||
onChange={(e) => setTrafico(e.target.value)} |
||||
> |
||||
</Form.Control> |
||||
</Form.Label> |
||||
</Col> |
||||
<Col xs={1}> |
||||
<Form.Label style={{width:'100%'}}> |
||||
Aduana |
||||
<Form.Control |
||||
size="sm" |
||||
type="text" |
||||
value={Aduana} |
||||
onChange={(e) => setAduana(e.target.value)} |
||||
> |
||||
</Form.Control> |
||||
</Form.Label> |
||||
</Col> |
||||
<Col xs={1}> |
||||
<Form.Label style={{width:'100%'}}> |
||||
Patente |
||||
<Form.Control |
||||
size="sm" |
||||
type="text" |
||||
value={Patente} |
||||
onChange={(e) => setPatente(e.target.value)} |
||||
> |
||||
</Form.Control> |
||||
</Form.Label> |
||||
</Col> |
||||
<Col xs={2}> |
||||
<Form.Label style={{width:'100%'}}> |
||||
Pedimento |
||||
<Form.Control |
||||
size="sm" |
||||
type="text" |
||||
value={Pedimento} |
||||
onChange={(e) => setPedimento(e.target.value)} |
||||
> |
||||
</Form.Control> |
||||
</Form.Label> |
||||
</Col> |
||||
<Col xs={2}> |
||||
<Form.Label style={{width:'100%'}}> |
||||
Inicio |
||||
<Form.Control |
||||
defaultValue={Inicio} |
||||
type='date' |
||||
name='Fecha' |
||||
placeholder='Fecha' |
||||
title='Fecha' |
||||
alt='Fecha' |
||||
onChange={(e) => setInicio(e.target.value)} |
||||
size='sm' |
||||
/> |
||||
</Form.Label> |
||||
</Col> |
||||
<Col xs={2}> |
||||
<Form.Label style={{width:'100%'}}> |
||||
Fin |
||||
<Form.Control |
||||
defaultValue={Fin} |
||||
type='date' |
||||
name='Fecha' |
||||
placeholder='Fecha' |
||||
title='Fecha' |
||||
alt='Fecha' |
||||
onChange={(e) => setFin(e.target.value)} |
||||
size='sm' |
||||
/> |
||||
</Form.Label> |
||||
</Col> |
||||
<Col xs={2}> |
||||
<Form.Label style={{width:'100%'}}> |
||||
Remitente |
||||
<Form.Control |
||||
as='select' |
||||
value={Remitente!} |
||||
onChange={(e) => { |
||||
setRemitente(e.target.value) |
||||
}} |
||||
className='form-select form-select-sm' |
||||
> |
||||
<option value={''}>- SELECCIONE -</option> |
||||
{Remitentes.map((r) => { |
||||
return ( |
||||
<option key={r} value={r}>{r}</option> |
||||
) |
||||
})} |
||||
</Form.Control> |
||||
</Form.Label> |
||||
</Col> |
||||
</Row> |
||||
<Row className="justify-content-between justify-items-end"> |
||||
<Col xs={2}> |
||||
<Form.Label style={{width:'100%'}}> |
||||
Tipo Operacion |
||||
<Form.Control |
||||
as='select' |
||||
value={TipoOperacion!} |
||||
onChange={(e) => { |
||||
setTipoOperacion(e.target.value) |
||||
}} |
||||
className='form-select form-select-sm' |
||||
> |
||||
<option value={''} key={'0'}>- SELECCIONE -</option> |
||||
<option value={'I'} key={'I'}>IMPORTACION</option> |
||||
<option value={'E'} key={'E'}>EXPORTACION</option> |
||||
</Form.Control> |
||||
</Form.Label> |
||||
</Col> |
||||
<Col xs={2}> |
||||
<Form.Label style={{width:'100%'}}> |
||||
Estado |
||||
<Form.Control |
||||
as='select' |
||||
value={Programado!} |
||||
onChange={(e) => { |
||||
setProgramado(+e.target.value) |
||||
}} |
||||
className='form-select form-select-sm' |
||||
> |
||||
<option value={0} key={0}>- SELECCIONE -</option> |
||||
<option value={1} key={1}>EN PLATAFORMA</option> |
||||
<option value={2} key={2}>NO EN PLATAFORMA</option> |
||||
</Form.Control> |
||||
</Form.Label> |
||||
</Col> |
||||
<Col xs={8} className="d-flex align-items-end"> |
||||
<div style={{textAlign:'end', width:'100%'}}> |
||||
<Button variant='primary' onClick={() => getCuentas()} style={{marginRight:'10px'}}>Buscar</Button> |
||||
{['Administrador', 'Facturacion', 'Sup. Facturacion'].includes(Perfil) ? <Button variant='primary' onClick={() => {selectFile()}} style={{marginRight:'10px'}}>Cargar Estados</Button> : ''} |
||||
<Button variant='success' onClick={() => {downloadEstadosCuenta()}} style={{marginRight:'10px'}}><BsFileEarmarkExcelFill/> Excel</Button> |
||||
<input type="file" ref={hiddenFileInputRef} style={{display:'none'}} |
||||
onChange={(e:any) => { |
||||
uploadFile(e.target.files[0]); |
||||
setFile(e.target.files[0]); |
||||
}} |
||||
/> |
||||
</div> |
||||
</Col> |
||||
</Row> |
||||
</Card.Body> |
||||
</Card> |
||||
<br /> |
||||
<div className='ag-theme-alpine' style={{ height: 500, width: '100%' }}> |
||||
<AgGridReact |
||||
rowData={Cuentas} |
||||
columnDefs={columnDefs} |
||||
pagination={true} |
||||
paginationAutoPageSize={true} |
||||
//ref={gridRef}
|
||||
/* rowSelection={'multiple'} |
||||
rowMultiSelectWithClick={true} */ |
||||
getRowStyle={getRowStyle} |
||||
onCellValueChanged={onCellValueChanged} |
||||
></AgGridReact> |
||||
</div> |
||||
<MsgInformativo |
||||
show={show} |
||||
msg={msg} |
||||
header={header} |
||||
msgColor={msgColor} |
||||
closeToast={function (arg: boolean): void { |
||||
setShow(false) |
||||
}} |
||||
/> |
||||
</div> |
||||
) |
||||
} |
||||
@ -0,0 +1,195 @@ |
||||
import React, { FC, useEffect, useState } from 'react' |
||||
// Bootstrap
|
||||
import { Button, Col, Container, Modal, Row } from 'react-bootstrap' |
||||
import { BsCloudDownload } from 'react-icons/bs' |
||||
// Interfaces
|
||||
import IArchivoElectronico from '../../../Interfaces/IArchivoElectronico' |
||||
// DTOs
|
||||
import DTOgetArchivosPorReferencia from '../../../DTO/DTOgetArchivosPorReferencia' |
||||
// Redux
|
||||
import { RootState } from '../../../store/store' |
||||
import { useSelector } from 'react-redux' |
||||
// Servicios
|
||||
import AEOServices from '../../../Services/Catalogos/ArchivoElectronico.Services' |
||||
import ArchivoElectronicoDataServices from '../../../Services/Catalogos/ArchivoElectronico.Services' |
||||
// Otros
|
||||
import { AgGridReact } from 'ag-grid-react' |
||||
import { MsgInformativo } from '../../Utils/Toast/msgInformativo' |
||||
import { TargetURL } from '../../../Constants/TargetURL' |
||||
import IFileManager from '../../../Interfaces/Utils/IFileManager' |
||||
import FileManagerServices from '../../../Services/Utils/FileManager.Services' |
||||
import { IconContext } from 'react-icons' |
||||
import { FaDownload } from 'react-icons/fa' |
||||
|
||||
interface IProps { |
||||
showDialog: boolean |
||||
header: string |
||||
closeDialog: (arg: boolean) => void |
||||
archivos: IFileManager[] |
||||
} |
||||
|
||||
interface ListaArchivos { |
||||
archivo: string |
||||
} |
||||
|
||||
const URL = new TargetURL() |
||||
|
||||
export const DialogAE: FC<IProps> = (props) => { |
||||
const [curURL, setCurURL] = useState(URL.get()) |
||||
const Referencia = useSelector((state: RootState) => state.ArchivoElectronico.Referencia) |
||||
const Pedimento = useSelector((state: RootState) => state.ArchivoElectronico.Pedimento) |
||||
const NoCliente = useSelector((state: RootState) => state.ArchivoElectronico.NoCliente) |
||||
const [filteredData, setFilteredData] = useState<IFileManager[]>([]) |
||||
const [columnDefs] = useState([ |
||||
{ |
||||
field: 'nombreArchivo', |
||||
cellRender: (params:any) => {return params.data.nombreArchivo}, |
||||
width: 430, |
||||
headerCheckboxSelection: false, |
||||
headerCheckboxSelectionFilteredOnly: false, |
||||
checkboxSelection: false, |
||||
sortable: true, |
||||
filter: true, |
||||
},{ |
||||
field: 'Descargar', |
||||
width: 100, |
||||
cellRenderer: (params:any) => { |
||||
return ( |
||||
<div style={{textAlign:'center'}}> |
||||
<IconContext.Provider value={{ color: 'blue', size: '25px' }}> |
||||
<FaDownload onClick={() => {getFile(params.data)}} style={{cursor:'pointer'}}/> |
||||
</IconContext.Provider> |
||||
</div> |
||||
) |
||||
//return <Button variant='warning' onClick={() => {getFile(params.data)}}></Button>
|
||||
}, |
||||
} |
||||
]) |
||||
const gridRef = React.useRef<any>(null) |
||||
const [msgColor, setMsgColor] = React.useState('primary') |
||||
const [show, setShowMsg] = useState(false) |
||||
const [header, setHeader] = useState('') |
||||
const [msg, setMsg] = useState('') |
||||
|
||||
const viewFileContent = (fileName: string) => { |
||||
window.open( |
||||
`${curURL}/ArchivoElectronico/getFileContent?Referencia=${Referencia}&PedimentoLargo=dummy&NoCliente=${NoCliente}&IdUsuario=0&Archivo=${fileName}` |
||||
) |
||||
} |
||||
|
||||
useEffect(() => { |
||||
setFilteredData(props.archivos) |
||||
}, [props.archivos]) |
||||
|
||||
const getFile = (file: IFileManager) => { |
||||
FileManagerServices.getFileContent(parseInt(file.tags), file.proceso).then((resp: any) => { |
||||
const url = window.URL.createObjectURL(new Blob([resp.data])) |
||||
const link = document.createElement('a') |
||||
link.href = url |
||||
link.setAttribute('download', file.nombreArchivo) |
||||
document.body.appendChild(link) |
||||
link.click() |
||||
}).catch(() => { |
||||
setHeader('Error') |
||||
setMsg('Ocurrio un error durante la descarga, favor de intentar nuevamente') |
||||
setShowMsg(true) |
||||
return |
||||
}) |
||||
} |
||||
|
||||
const getFilesByReference = () => { |
||||
let selectedNodes = gridRef.current.api.getSelectedNodes() |
||||
let selectedData = selectedNodes.map((node: any) => node.data) |
||||
const Archivos = selectedData.map((item: ListaArchivos) => item.archivo) |
||||
const data: DTOgetArchivosPorReferencia = { |
||||
Referencia: Referencia, |
||||
PedimentoLargo: Pedimento, |
||||
NoCliente: NoCliente, |
||||
IdUsuario: 0, |
||||
Archivo: 'dummy', |
||||
Archivos: Archivos, |
||||
} |
||||
/* AEOServices.getTheseFilesByReferences(data) |
||||
.then((response: any) => { |
||||
const url = window.URL.createObjectURL(new Blob([response.data])) |
||||
const link = document.createElement('a') |
||||
link.href = url |
||||
link.setAttribute('download', Referencia + '.zip') |
||||
document.body.appendChild(link) |
||||
link.click() |
||||
}) |
||||
.catch((e: Error) => { |
||||
setHeader('Error') |
||||
setMsg('Ocurrio un error: ' + e) |
||||
setShowMsg(true) |
||||
return |
||||
}) */ |
||||
props.closeDialog(false) |
||||
} |
||||
|
||||
return ( |
||||
<div> |
||||
{' '} |
||||
<Modal |
||||
dialogClassName='modal-50w' |
||||
show={props.showDialog} |
||||
onHide={() => { |
||||
props.closeDialog(false) |
||||
}} |
||||
centered |
||||
> |
||||
<Modal.Header closeButton> |
||||
<Modal.Title>Referencia: {Referencia}</Modal.Title> |
||||
</Modal.Header> |
||||
<Modal.Body> |
||||
{filteredData ? ( |
||||
<div style={{ height: '350px', width: '100%' }} className='ag-theme-alpine'> |
||||
<AgGridReact |
||||
rowData={filteredData} |
||||
columnDefs={columnDefs} |
||||
pagination={true} |
||||
paginationPageSize={50} |
||||
ref={gridRef} |
||||
/* rowSelection={'multiple'} |
||||
rowMultiSelectWithClick={true} */ |
||||
></AgGridReact> |
||||
</div> |
||||
) : ( |
||||
'Sin archivos que mostrar' |
||||
)} |
||||
<MsgInformativo show={show} msg={msg} header={header} msgColor={msgColor} closeToast={() => setShowMsg(false)} /> |
||||
</Modal.Body> |
||||
{/* <Modal.Footer> |
||||
<Container> |
||||
<Row> |
||||
<Col md={2}></Col> |
||||
<Col md={4}> |
||||
<Button |
||||
variant='warning' |
||||
size='sm' |
||||
onClick={() => { |
||||
getFilesByReference() |
||||
}} |
||||
> |
||||
<BsCloudDownload /> Descargar |
||||
</Button> |
||||
</Col> |
||||
<Col md={3}></Col> |
||||
<Col md={3}> |
||||
<Button |
||||
variant='primary' |
||||
size='sm' |
||||
onClick={() => { |
||||
props.closeDialog(false) |
||||
}} |
||||
> |
||||
Cerrar |
||||
</Button> |
||||
</Col> |
||||
</Row> |
||||
</Container> |
||||
</Modal.Footer> */} |
||||
</Modal> |
||||
</div> |
||||
) |
||||
} |
||||
@ -0,0 +1,42 @@ |
||||
import { ICellRendererParams } from "ag-grid-community"; |
||||
import { FC, useState, useEffect } from "react"; |
||||
|
||||
export const ClienteProgressBar: FC<ICellRendererParams> = (props: ICellRendererParams) => { |
||||
const [Color, setColor] = useState('progress-bar bg-CORRESPONSAL_NORMAL') |
||||
|
||||
useEffect(() => { |
||||
if (props.data.proceso === 1) setColor('progress-bar bg-RECHAZOS_PARA_CORRESPONSAL') |
||||
if (props.data.proceso === 2 || props.data.proceso === 3) { |
||||
setColor('progress-bar bg-FACTURACION_LISTOS_PARA_FACTURAR') |
||||
} |
||||
if (props.data.proceso === 4) setColor('progress-bar bg-CORRESPONSAL_NORMAL') |
||||
}, [props]) |
||||
|
||||
const getTooltipTitle = () => { |
||||
let proceso = props.data.proceso; |
||||
switch(proceso){ |
||||
case 1: |
||||
return "Por Terminar" |
||||
break; |
||||
case 2: |
||||
return "Despachado Sin Facturar" |
||||
break; |
||||
case 3: |
||||
return "Despachado Sin Facturar" |
||||
break; |
||||
case 4: |
||||
return "Despachado y Facturado" |
||||
break; |
||||
} |
||||
} |
||||
|
||||
return ( |
||||
<div> |
||||
<div style={{ paddingTop: '20%' }}> |
||||
<div className='progress' style={{ maxWidth: '80%' }}> |
||||
<div className={Color} style={{ width: '100%' }} data-toggle="tooltip" data-placement="bottom" title={getTooltipTitle()}></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
@ -0,0 +1,41 @@ |
||||
import React, { FC, useState } from 'react' |
||||
import { Button } from 'react-bootstrap' |
||||
import { DialogAE } from '../ArchivoElectronico/DialogAE' |
||||
import ArchivoElectronicoDataServices from '../../../Services/Catalogos/ArchivoElectronico.Services' |
||||
import IFileManager from '../../../Interfaces/Utils/IFileManager'; |
||||
import FileManagerServices from '../../../Services/Utils/FileManager.Services'; |
||||
interface IProps { |
||||
referencia: string; |
||||
} |
||||
|
||||
export const VerDocumentos: FC<IProps> = (props) => { |
||||
const [showDialog, setShowDialog] = useState(false) |
||||
const [Archivos, setArchivos] = useState<IFileManager[]>([]); |
||||
const showDocumentos = () => { |
||||
FileManagerServices.getFileListByreferencia(props.referencia) |
||||
.then((response) => { |
||||
const filteredFileList = response.data.filter(x=> [2,10,11,12,13,14,15,19,17,18,37,38,39,41].includes(x.proceso)) |
||||
setArchivos(filteredFileList) |
||||
}) |
||||
.catch((e: Error) => { |
||||
console.log(e) |
||||
return |
||||
}) |
||||
setShowDialog(true) |
||||
} |
||||
|
||||
const closeDialog = () => { |
||||
setShowDialog(false) |
||||
} |
||||
|
||||
return ( |
||||
<div> |
||||
<span> |
||||
<Button onClick={() => showDocumentos()} variant='secondary'> |
||||
ver Documentos |
||||
</Button> |
||||
</span> |
||||
<DialogAE showDialog={showDialog} header={''} closeDialog={closeDialog} archivos={Archivos}/> |
||||
</div> |
||||
) |
||||
} |
||||
@ -0,0 +1,210 @@ |
||||
import { useEffect, useState } from "react"; |
||||
import { Button, Card, Col, Form, Row } from "react-bootstrap"; |
||||
import ReportesAlenService from "../../../Services/Reportes/ReportesAlen.Service"; |
||||
import { MsgInformativo } from "../../Utils/Toast/msgInformativo"; |
||||
import ClientesServices from "../../../Services/Catalogos/Clientes.Services"; |
||||
import IClientes from "../../../Interfaces/Catalogos/IClientes"; |
||||
import { useSelector } from "react-redux"; |
||||
import { RootState } from "../../../store/store"; |
||||
import ICatCorresponsales from "../../../Interfaces/Catalogos/ICatCorresponsales"; |
||||
import CorresponsalesServices from "../../../Services/Catalogos/Corresponsales.Services"; |
||||
import ReporteCuentasCerradasService from "../../../Services/Reportes/ReporteCuentasCerradas.Service"; |
||||
export const CuentasCerradas: React.FC<{}> = () => { |
||||
const [Inicio, setInicio] = useState(currentDate(-7)) |
||||
const [Fin, setFin] = useState(currentDate(0)) |
||||
const [show, setShowMsg] = useState(false) |
||||
const [header, setHeader] = useState('') |
||||
const [msg, setMsg] = useState('') |
||||
const [msgColor, setMsgColor] = useState('primary') |
||||
const [TipoOperacion, setTipoOperacion] = useState(0) |
||||
const [IDCliente, setIDCliente] = useState(0) |
||||
const [Clientes, setClientes] = useState<Array<IClientes>>() |
||||
const [IDCorresponsal, setIDCorresponsal] = useState(0) |
||||
const [Corresponsales, setCorresponsales] = useState<Array<ICatCorresponsales>>() |
||||
|
||||
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) => { |
||||
//clientes = response.data;
|
||||
setClientes(response.data) |
||||
}) |
||||
.catch((e: Error) => { |
||||
setHeader('Error') |
||||
setMsg('Ocurrio un error: ' + e) |
||||
setShowMsg(true) |
||||
return |
||||
}) |
||||
CorresponsalesServices.getAll() |
||||
.then((response) => { |
||||
setCorresponsales(response.data) |
||||
}) |
||||
.catch((e: Error) => { |
||||
setHeader('Error') |
||||
setMsg('Ocurrio un error: ' + e) |
||||
setShowMsg(true) |
||||
return |
||||
}) |
||||
}, []) |
||||
|
||||
const GetExcel = () => { |
||||
if(IDCliente === 0 && IDCorresponsal === 0){ |
||||
setHeader('Error') |
||||
setMsg('Debe seleccionar un cliente o un corresponsal') |
||||
setShowMsg(true) |
||||
return |
||||
} |
||||
ReporteCuentasCerradasService.DownloadExcel(Inicio, Fin, TipoOperacion, IDCliente, IDCorresponsal) |
||||
.then(resp => { |
||||
const url = window.URL.createObjectURL(new Blob([resp.data])); |
||||
const link = document.createElement('a'); |
||||
link.href = url; |
||||
link.setAttribute('download', `Cuentas Cerradas ${Inicio} - ${Fin}.xlsx`); |
||||
document.body.appendChild(link); |
||||
link.click(); |
||||
}).catch(e => { |
||||
setHeader('Error') |
||||
setMsg('Ocurrio un error al generar el reporte. Por favor, intentelo de nuevo.') |
||||
setShowMsg(true) |
||||
return |
||||
}) |
||||
} |
||||
return( |
||||
<> |
||||
<Row style={{height:'90vh'}} className="align-items-center justify-content-center"> |
||||
<Col xs={6}> |
||||
<Card style={{width:'100%'}}> |
||||
<Card.Header><h4>Reporte de Cuentas Cerradas</h4></Card.Header> |
||||
<Card.Body> |
||||
<Row> |
||||
<Col xs={3}> |
||||
<Form.Label style={{width:'100%'}}> |
||||
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={3}> |
||||
<Form.Label style={{width:'100%'}}> |
||||
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 xs={3}> |
||||
<Form.Label style={{width:'100%'}}> |
||||
Tipo de Operación |
||||
<Form.Control |
||||
as="select" |
||||
onChange={(e) => |
||||
setTipoOperacion(parseInt(e.target.value)) |
||||
} |
||||
value={TipoOperacion} |
||||
className="form-select form-select-sm" |
||||
> |
||||
<option value="0">--Seleccione--</option> |
||||
<option value="1">Importacion</option> |
||||
<option value="2">Exportacion</option> |
||||
</Form.Control> |
||||
</Form.Label> |
||||
</Col> |
||||
</Row> |
||||
<Row> |
||||
<Col xs={6}> |
||||
<Form.Label> |
||||
Cliente |
||||
<Form.Control |
||||
as="select" |
||||
id="CmbCliente" |
||||
onChange={(e) => { |
||||
setIDCliente(parseInt(e.target.value)) |
||||
}} |
||||
value={IDCliente} |
||||
className="form-select form-select-sm" |
||||
> |
||||
<option value="0">-SELECCIONE-</option> |
||||
{Clientes |
||||
? Clientes.map((c) => { |
||||
return ( |
||||
<option key={c.sClave} value={c.sClave}> |
||||
{c.sRazonSocial} |
||||
</option> |
||||
) |
||||
}) |
||||
: null} |
||||
</Form.Control> |
||||
</Form.Label> |
||||
</Col> |
||||
<Col xs={6}> |
||||
<Form.Label> |
||||
Corresponsal |
||||
<Form.Control |
||||
as="select" |
||||
id="CmbIDCorresponsal" |
||||
onChange={(e) => { |
||||
setIDCorresponsal(parseInt(e.target.value)) |
||||
}} |
||||
className="form-select form-select-sm" |
||||
value={IDCorresponsal} |
||||
> |
||||
<option value="0">-SELECCIONE-</option> |
||||
{Corresponsales |
||||
? Corresponsales.map((item, index) => { |
||||
return ( |
||||
<option key={item.id} value={item.id}> |
||||
{item.nombre} | {item.patente} | {item.aduana} |
||||
</option> |
||||
) |
||||
}) |
||||
: ''} |
||||
</Form.Control> |
||||
</Form.Label> |
||||
</Col> |
||||
</Row> |
||||
</Card.Body> |
||||
<Card.Footer style={{textAlign:'end'}}> |
||||
<Button variant="primary" title="Quitar archivo cargado" style={{marginRight:'10px'}} onClick={GetExcel}> |
||||
Generar Excel |
||||
</Button> |
||||
</Card.Footer> |
||||
</Card> |
||||
</Col> |
||||
|
||||
</Row> |
||||
<MsgInformativo |
||||
show={show} |
||||
msg={msg} |
||||
header={header} |
||||
msgColor={msgColor} |
||||
closeToast={() => { |
||||
setShowMsg(false) |
||||
}} |
||||
/> |
||||
</> |
||||
) |
||||
} |
||||
@ -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,372 @@ |
||||
import React, { useEffect, useState } from "react" |
||||
import { Button, Card, Col, Form, Modal, Row } from "react-bootstrap" |
||||
import IClientes from "../../Interfaces/Catalogos/IClientes" |
||||
import IRpArchivoElectronicoOficial from "../../Interfaces/Reportes/IRptArchivoElectronicoOficial" |
||||
import { VerDocumentos } from "../Reportes/customCells/verDocumentos" |
||||
import { MsgInformativo } from "../Utils/Toast/msgInformativo" |
||||
import { AgGridReact } from "ag-grid-react" |
||||
import { BsSearch, BsFileEarmarkExcel, BsCloudDownload } from "react-icons/bs" |
||||
import { RowClickedEvent } from "ag-grid-community" |
||||
import IArchivoElectronico from "../../Interfaces/IArchivoElectronico" |
||||
import * as XLSX from 'xlsx' |
||||
import DTOAEPeriodo from "../../DTO/DTOAEPeriodo" |
||||
import ClientesServices from "../../Services/Catalogos/Clientes.Services" |
||||
import reportesServices from "../../Services/Reportes/reportes.services" |
||||
import loadingImg from '../../images/ajaxloader.gif' |
||||
import ArchivoElectronicoServices from "../../Services/Catalogos/ArchivoElectronico.Services" |
||||
|
||||
export const ReporteArchivoElectronico:React.FC = () => { |
||||
//const dispatch = useDispatch()
|
||||
const [UserId, setUserId] = useState(() => { |
||||
const stickyValue = window.localStorage.getItem('UserId') |
||||
return stickyValue !== null ? JSON.parse(stickyValue) : 0 |
||||
}) |
||||
const [Years, setYears] = useState(generateArrayOfYears()) |
||||
const [Months, setMonths] = useState([ |
||||
'Enero', |
||||
'Febrero', |
||||
'Marzo', |
||||
'Abril', |
||||
'Mayo', |
||||
'Junio', |
||||
'Julio', |
||||
'Agosto', |
||||
'Septiembre', |
||||
'Octubre', |
||||
'Noviembre', |
||||
'Diciembre', |
||||
]) |
||||
const [Anio, setAnio] = useState(currentDate(1)) |
||||
const [Mes, setMes] = useState(currentDate(2)) |
||||
const [Clientes, setClientes] = useState<Array<IClientes>>() |
||||
const [Data, setData] = useState<Array<IRpArchivoElectronicoOficial>>([]) |
||||
const [filteredData, setFilteredData] = useState<Array<IRpArchivoElectronicoOficial>>([]) |
||||
const [TipoOperacion, setTipoOperacion] = useState(0) |
||||
const [Cliente, setCliente] = useState(0) |
||||
const [msgColor, setMsgColor] = React.useState('primary') |
||||
const [show, setShowMsg] = useState(false) |
||||
const [header, setHeader] = useState('') |
||||
const [msg, setMsg] = useState('') |
||||
const [filtro, setFiltro] = useState('') |
||||
const [showDialog, setShowDialog] = useState(false) |
||||
const gridRef = React.useRef<any>(null) |
||||
const [columnDefs] = useState([ |
||||
{ |
||||
field: 'referencia', |
||||
headerCheckboxSelection: true, |
||||
headerCheckboxSelectionFilteredOnly: true, |
||||
checkboxSelection: true, |
||||
sortable: true, |
||||
filter: true, |
||||
}, |
||||
{ field: 'ver documentos', sortable: true, cellRenderer: (params: any) => {return <VerDocumentos referencia={params.data.referencia}/>} }, |
||||
{ field: 'aduana', sortable: true, filter: true }, |
||||
{ field: 'patente', sortable: true, filter: true }, |
||||
{ field: 'pedimento', sortable: true, filter: true }, |
||||
{ field: 'fechaPago', sortable: true, filter: true }, |
||||
]) |
||||
|
||||
const handleClose = () => setShowDialog(false) |
||||
|
||||
function generateArrayOfYears() { |
||||
var max = new Date().getFullYear() |
||||
var min = 2020 |
||||
var years = [] |
||||
for (var i = max; i >= min; i--) { |
||||
years.push(i) |
||||
} |
||||
return years |
||||
} |
||||
|
||||
function currentDate(mode: number): number { |
||||
var today = new Date() |
||||
var mm = String(today.getMonth() + 1).padStart(2, '0') //January is 0!
|
||||
var yyyy = today.getFullYear() |
||||
return mode === 1 ? yyyy : parseInt(mm) |
||||
} |
||||
|
||||
const generaReporte = () => { |
||||
if(Anio === 0){ |
||||
setHeader('Error') |
||||
setMsg('Especifique el año de búsqueda.') |
||||
setShowMsg(true) |
||||
return; |
||||
} |
||||
if(Mes === 0){ |
||||
setHeader('Error') |
||||
setMsg('Especifique el mes de búsqueda.') |
||||
setShowMsg(true) |
||||
return; |
||||
} |
||||
if(Cliente===0 && Clientes!.length > 1){ |
||||
setHeader('Error') |
||||
setMsg('Seleccione una razón social') |
||||
setShowMsg(true) |
||||
return; |
||||
} |
||||
const data: DTOAEPeriodo = { |
||||
Anio: Anio, |
||||
Mes: Mes, |
||||
TipoOperacion: TipoOperacion, |
||||
NoCliente: Cliente, |
||||
} |
||||
console.log(JSON.stringify(data)) |
||||
reportesServices |
||||
.getRptArchivoElectronicoOficial(data) |
||||
.then((response) => { |
||||
setData(response.data) |
||||
setFilteredData(response.data) |
||||
console.log(response.data) |
||||
setHeader('Informativo') |
||||
setMsg('Se encontro la siguiente informacion...') |
||||
setShowMsg(true) |
||||
}) |
||||
.catch((e: Error) => { |
||||
setHeader('Error') |
||||
setMsg('Ocurrio un error: ' + e) |
||||
setShowMsg(true) |
||||
return |
||||
}) |
||||
} |
||||
|
||||
const downloadExcel = () => { |
||||
exportExcel(Data, 'Reporte archivo electronico oficial') |
||||
} |
||||
|
||||
function exportExcel(jsonData: any[], fileName: string): void { |
||||
let Heading = [['Referencia', 'Aduana', 'Patente', 'Pedimento', 'Fecha pago']] |
||||
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() |
||||
} |
||||
} |
||||
|
||||
const filtraReporte = (e: any) => { |
||||
setFiltro(e.target.value) |
||||
gridRef.current.api.setQuickFilter(e.target.value) |
||||
} |
||||
|
||||
useEffect(() => { |
||||
ClientesServices.getAllClientes(parseInt(UserId)) |
||||
.then((response) => { |
||||
setClientes(response.data) |
||||
if(response.data.length === 1) |
||||
setCliente(response.data[0].sClave) |
||||
}) |
||||
.catch((e: Error) => { |
||||
console.log(e) |
||||
setHeader('Error') |
||||
setMsg('Ocurrio un error: ' + e) |
||||
setShowMsg(true) |
||||
return |
||||
}) |
||||
}, []) |
||||
|
||||
/* function getParams(e: RowClickedEvent) { |
||||
const data: IArchivoElectronico = { |
||||
Referencia: e.data.referencia, |
||||
PedimentoLargo: |
||||
Anio.toString().substring(2, 2) + |
||||
' ' + |
||||
e.data.aduana.toString().substring(0, 2) + |
||||
' ' + |
||||
e.data.patente.toString() + |
||||
' ' + |
||||
e.data.pedimento.toString(), |
||||
NoCliente: Cliente, |
||||
IdUsuario: 0, |
||||
Archivo: '', |
||||
} |
||||
console.log('.......................................................' + data) |
||||
//dispatch(setArchivoElectronico(data))
|
||||
} */ |
||||
|
||||
const downloadReferences = () => { |
||||
setShowDialog(true) |
||||
if (Cliente === 0) { |
||||
setMsg('Seleccione el cliente') |
||||
setHeader('Para poder continuar, favor de: ') |
||||
setShowMsg(true) |
||||
} |
||||
let selectedNodes = gridRef.current.api.getSelectedNodes() |
||||
let selectedData = selectedNodes.map((node: any) => node.data) |
||||
const Referencias = selectedData.map((item: IRpArchivoElectronicoOficial) => item.referencia) |
||||
const data = { |
||||
Anio: Anio, |
||||
Mes: Mes, |
||||
NoCliente: Cliente, |
||||
TipoOperacion: TipoOperacion, |
||||
Referencias: Referencias, |
||||
} |
||||
console.log(data) |
||||
ArchivoElectronicoServices.getZippedReferences(data) |
||||
.then((response: any) => { |
||||
const url = window.URL.createObjectURL(response.data) |
||||
const link = document.createElement('a') |
||||
link.href = url |
||||
link.setAttribute('download', 'Archivo Electronico Oficial.zip') |
||||
document.body.appendChild(link) |
||||
link.click() |
||||
setShowDialog(false) |
||||
}) |
||||
.catch((e: Error) => { |
||||
console.log(e) |
||||
setHeader('Error') |
||||
setMsg('Ocurrio un error: ' + e) |
||||
setShowMsg(true) |
||||
return |
||||
}) |
||||
} |
||||
|
||||
return ( |
||||
<div> |
||||
<Card> |
||||
<Card.Body> |
||||
<div className='row'> |
||||
<div className='col-md-1'></div> |
||||
<div className='col-md-1'> |
||||
<Form.Select |
||||
aria-label='Año' |
||||
onChange={(e) => setAnio(parseInt(e.target.value))} |
||||
size='sm' |
||||
defaultValue={Anio} |
||||
> |
||||
{Years.map((x, i) => ( |
||||
<option value={x}>{x}</option> |
||||
))} |
||||
</Form.Select> |
||||
</div> |
||||
<div className='col-md-1'> |
||||
<Form.Select |
||||
aria-label='Mes' |
||||
onChange={(e) => setMes(parseInt(e.target.value))} |
||||
size='sm' |
||||
defaultValue={Mes} |
||||
> |
||||
<option value='0'>Mes</option> |
||||
{Months.map((x, i) => ( |
||||
<option value={i + 1}>{x}</option> |
||||
))} |
||||
</Form.Select> |
||||
</div> |
||||
<div className='col-md-1 right-label'> |
||||
<Form.Label>Tipo oper</Form.Label> |
||||
</div> |
||||
<div className='col-md-1'> |
||||
<Form.Control |
||||
as='select' |
||||
onChange={(e) => setTipoOperacion(parseInt(e.target.value))} |
||||
className='form-select form-select-sm' |
||||
> |
||||
<option value='0'>- Seleccione -</option> |
||||
<option value='1'>Importacion</option> |
||||
<option value='2'>Exportacion</option> |
||||
</Form.Control> |
||||
</div> |
||||
<div className='col-md-1 right-label'> |
||||
<Form.Label>Cliente</Form.Label> |
||||
</div> |
||||
<div className='col-md-4 form-group'> |
||||
<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 c.agrupado === 1 ? <option value={c.sClave}>{c.sRazonSocial}</option> : '' |
||||
}) |
||||
: null} |
||||
</Form.Control> |
||||
</div> |
||||
|
||||
<div className='col-md-1 right-label'> |
||||
<Button |
||||
variant='primary' |
||||
size='sm' |
||||
onClick={() => { |
||||
generaReporte() |
||||
}} |
||||
> |
||||
<BsSearch /> |
||||
Buscar |
||||
</Button> |
||||
</div> |
||||
</div> |
||||
<div className='row' style={{ paddingTop: 5 }}> |
||||
<div className='col'> </div> |
||||
<div className='col-4'> |
||||
<Form.Control |
||||
type='text' |
||||
placeholder='Search...' |
||||
size='sm' |
||||
onChange={(e) => { |
||||
filtraReporte(e) |
||||
}} |
||||
/> |
||||
</div> |
||||
<div className='col'> |
||||
<Button |
||||
size='sm' |
||||
variant='success' |
||||
onClick={() => { |
||||
downloadExcel() |
||||
}} |
||||
> |
||||
<BsFileEarmarkExcel /> |
||||
Excel |
||||
</Button> |
||||
|
||||
<Button |
||||
variant='danger' |
||||
size='sm' |
||||
onClick={() => { |
||||
downloadReferences() |
||||
}} |
||||
> |
||||
<BsCloudDownload /> |
||||
Descarga |
||||
</Button> |
||||
</div> |
||||
</div> |
||||
</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} |
||||
onRowClicked={(e) => {/* getParams(e) */}} |
||||
></AgGridReact> |
||||
</div> |
||||
<MsgInformativo show={show} msg={msg} header={header} msgColor={msgColor} closeToast={() => setShowMsg(false)} /> |
||||
<Modal show={showDialog} onHide={handleClose} backdrop='static' keyboard={false} size='sm' centered> |
||||
<Modal.Header closeButton> |
||||
<Modal.Title></Modal.Title> |
||||
</Modal.Header> |
||||
<Modal.Body> |
||||
<img src={loadingImg} style={{ width: '50%', height: '50%' }} alt='proccessing' /> |
||||
Espere, por favor... |
||||
</Modal.Body> |
||||
<Modal.Footer></Modal.Footer> |
||||
</Modal> |
||||
</div> |
||||
) |
||||
} |
||||
@ -1,6 +1,6 @@ |
||||
export default interface DTOTraficoCompleto { |
||||
id: number, |
||||
idUsuario: number, |
||||
estatus: number, |
||||
pedimentoObligatorio: number, |
||||
comentarios: string |
||||
}
|
||||
@ -1,4 +1,4 @@ |
||||
export interface DTOTraficoSolicitudReapertura{ |
||||
export interface DTOTraficoSolicitud{ |
||||
id: number, |
||||
idTrafico: number, |
||||
idUsuarioSolicita: number, |
||||
@ -0,0 +1,48 @@ |
||||
export interface DTOEstadoCuentaAlen{ |
||||
id: number, |
||||
tipoMovimiento: string |
||||
noSerie: string |
||||
noMovimiento: string |
||||
trafico: string |
||||
impexp: string |
||||
aduana: string |
||||
patente: string |
||||
pedimento: string |
||||
clave: string |
||||
noCliente: string |
||||
noCentro: string |
||||
subCentro: string |
||||
nombre: string |
||||
subCtaNombre: string |
||||
tipoRangos: string |
||||
cargos: string |
||||
abonos: string |
||||
fecha: string |
||||
fechaPedimento: string |
||||
fechaRev: string |
||||
diasPedimCta: string |
||||
diasCtaRev: string |
||||
diasRev: string |
||||
ivaAl: string |
||||
totalFacturado: string |
||||
saldoFinal: string |
||||
anticipo: string |
||||
uuid: string |
||||
descripcion: string |
||||
remitente: string |
||||
pedido: string |
||||
tipoMercancia: string |
||||
campoAdicional5: string |
||||
idPdf:number |
||||
pdf: string |
||||
idXml:number |
||||
xml: number |
||||
idNotasCargo: number |
||||
notasCargo: string |
||||
programado: boolean |
||||
serie: string |
||||
idOrdenCompra: number |
||||
ordenCompra: string |
||||
idObservaciones: number |
||||
observaciones: string |
||||
} |
||||
@ -0,0 +1,11 @@ |
||||
export interface DTOEstadoCuentaAlenFilters{ |
||||
Trafico: string, |
||||
Impexp: string, |
||||
Aduana: string, |
||||
Patente: string, |
||||
Pedimento: string, |
||||
Inicio: string, |
||||
Fin: string,
|
||||
Remitente: string, |
||||
Programado: number |
||||
} |
||||
@ -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,21 @@ |
||||
export interface DTOReporteCuentasCerradas{ |
||||
Trafico: string, |
||||
TipoOperacion: string, |
||||
Cliente: string, |
||||
Proveedor: string, |
||||
Corresponsal: string, |
||||
Aduana: string, |
||||
Patente: string, |
||||
Pedimento: string, |
||||
FechaPago: string, |
||||
Facturas: string, |
||||
Descripcion: string, |
||||
FechaAlta: string, |
||||
Clave: string, |
||||
ValorMn: string, |
||||
ValorDls: string, |
||||
TipoCambio: string, |
||||
ValorComercial: string, |
||||
Fracciones: string, |
||||
Caja: string |
||||
} |
||||
@ -0,0 +1,4 @@ |
||||
export interface ICatTiposContenedores{ |
||||
id: number; |
||||
descripcion: number; |
||||
} |
||||
@ -1,4 +1,4 @@ |
||||
export interface ICorresponsalTraficoSolicitudReapertura{ |
||||
export interface ICorresponsalTraficoSolicitud{ |
||||
id:number, |
||||
idTrafico: number, |
||||
idUsuarioSolicita: number, |
||||
@ -1,5 +1,5 @@ |
||||
export default interface IReporteOperacionesNewell{ |
||||
aduana: number; patente: number; pedimento: number; fechaDeEntrada: string|Date; fechaDePago: string|Date; |
||||
aduana: string; patente: number; pedimento: number; fechaDeEntrada: string|Date; fechaDePago: string|Date; |
||||
valorComercialMxn: number; valorComercialDlls: number; valorAduana: number; clave: string; iva: number; |
||||
dta: number; prv: number; lgi: number; factura: string; tc: number; proveedor: string; taxId: number; producto: string; |
||||
gc:number; contenedor: string; cuentaDeGastos: string; razon: string; maniobras: number; |
||||
|
||||
@ -0,0 +1,10 @@ |
||||
import http from "../common/http-common"; |
||||
import { ICatTiposContenedores } from "../../Interfaces/Catalogos/ICatTiposContenedores"; |
||||
|
||||
class CatTiposContenedoresService{ |
||||
getAll(){ |
||||
return http.get<ICatTiposContenedores[]>('/Catalogos/CatTiposContenedores/'); |
||||
} |
||||
} |
||||
|
||||
export default new CatTiposContenedoresService(); |
||||
@ -0,0 +1,19 @@ |
||||
import { DTOTraficoSolicitud } from "../../DTO/Corresponsales/DTOTraficoSolicitud" |
||||
import { ICorresponsalTraficoSolicitud } from "../../Interfaces/Corresponsales/ICorresponsalTraficoSolicitud" |
||||
import http from "../common/http-common"; |
||||
class TraficoSolicitudServices { |
||||
AppendSolicitudReapertura(solicitud: ICorresponsalTraficoSolicitud){ |
||||
return http.post<ICorresponsalTraficoSolicitud>(`/Corresponsalias/Solicitudes/Reapertura/Append`, solicitud) |
||||
} |
||||
AppendSolicitudEliminarReferencia(solicitud: ICorresponsalTraficoSolicitud){ |
||||
return http.post<ICorresponsalTraficoSolicitud>(`/Corresponsalias/Solicitudes/EliminarCuenta/Append`, solicitud) |
||||
} |
||||
GetSolicitudReapertura(idTrafico: number){ |
||||
return http.get<DTOTraficoSolicitud>(`/Corresponsalias/Solicitudes/Reapertura/Get?idTrafico=${idTrafico}`) |
||||
} |
||||
GetSolicitudEliminarReferencia(idTrafico: number){ |
||||
return http.get<DTOTraficoSolicitud>(`/Corresponsalias/Solicitudes/EliminarCuenta/Get?idTrafico=${idTrafico}`) |
||||
} |
||||
} |
||||
|
||||
export default new TraficoSolicitudServices() |
||||
@ -0,0 +1,41 @@ |
||||
import { DTOEstadoCuentaAlen } from "../../DTO/EstadosCuenta/DTOEstadoCuentaAlen"; |
||||
import { DTOEstadoCuentaAlenFilters } from "../../DTO/EstadosCuenta/DTOEstadosCuentaAlenFilters"; |
||||
import http from "../common/http-common"; |
||||
|
||||
class EstadosCuentaAlenService { |
||||
Append(formData: FormData){ |
||||
return http.post<DTOEstadoCuentaAlen[]>(`ReporteEstadosCuentaAlen/Append`,formData,{ |
||||
headers:{ |
||||
"Content-Type":'multipart/form-data' |
||||
} |
||||
}) |
||||
} |
||||
|
||||
AppendOrdenCompra(data:DTOEstadoCuentaAlen){ |
||||
return http.post<DTOEstadoCuentaAlen[]>(`ReporteEstadosCuentaAlen/AppendOrdenCompra`,data) |
||||
} |
||||
|
||||
AppendObservaciones(data:DTOEstadoCuentaAlen){ |
||||
return http.post<DTOEstadoCuentaAlen[]>(`ReporteEstadosCuentaAlen/AppendObservaciones`,data) |
||||
} |
||||
|
||||
AppendProgramacionesPago(formData: FormData){ |
||||
return http.post<DTOEstadoCuentaAlen[]>(`ReporteEstadosCuentaAlen/AppendProgramacionesPago`,formData,{ |
||||
headers:{ |
||||
"Content-Type":'multipart/form-data' |
||||
} |
||||
}) |
||||
} |
||||
|
||||
GetAll(filters: DTOEstadoCuentaAlenFilters){ |
||||
return http.get<DTOEstadoCuentaAlen[]>(`ReporteEstadosCuentaAlen/GetAll`, { |
||||
params:filters |
||||
}) |
||||
} |
||||
|
||||
ExportEstadosCuenta(cuentas: DTOEstadoCuentaAlen[]){ |
||||
return http.post(`ReporteEstadosCuentaAlen/Export`, cuentas, {responseType: 'arraybuffer'}) |
||||
} |
||||
} |
||||
|
||||
export default new EstadosCuentaAlenService(); |
||||
@ -0,0 +1,8 @@ |
||||
import http from "../common/http-common"; |
||||
class ReporteGC50Service{ |
||||
DownloadExcel(Inicio: string, Fin: string, TipoOperacion: number, NoCliente: number, IdCorresponsal: number){ |
||||
return http.get(`ReporteCuentasCerradas/GetExcel?Inicio=${Inicio}&Fin=${Fin}&TipoOperacion=${TipoOperacion}&NoCliente=${NoCliente}&IdCorresponsal=${IdCorresponsal}`, {responseType: 'blob'}); |
||||
} |
||||
} |
||||
|
||||
export default new ReporteGC50Service(); |
||||
@ -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() |
||||
@ -0,0 +1,21 @@ |
||||
import { createSlice, PayloadAction } from '@reduxjs/toolkit' |
||||
import { ICatTiposContenedores } from '../../../Interfaces/Catalogos/ICatTiposContenedores' |
||||
|
||||
const CatTiposContenedores: ICatTiposContenedores[] = [] |
||||
const initialState = {CatTiposContenedores} |
||||
|
||||
export const CatTiposContenedoresSlice = createSlice({ |
||||
name: 'CatTiposContenedores', |
||||
initialState: initialState, |
||||
reducers: { |
||||
populateCatTiposContenedores : (state, action: PayloadAction<ICatTiposContenedores[]>) => { |
||||
state.CatTiposContenedores = [] |
||||
state.CatTiposContenedores.push(... action.payload) |
||||
}, |
||||
} |
||||
}) |
||||
|
||||
export const { |
||||
populateCatTiposContenedores,
|
||||
} = CatTiposContenedoresSlice.actions; |
||||
export default CatTiposContenedoresSlice.reducer; |
||||
Loading…
Reference in new issue