avance al proceso de heineken

feature/ConsolidarPedimentos_20231229
Felix Morales 11 months ago
parent 31d91c6e3b
commit 422a0f7821
  1. 4
      src/App.tsx
  2. 12
      src/Classes/Corresponsales/CCorresponsalesTrafico.ts
  3. 5
      src/Components/Clientes/Clientes.tsx
  4. 390
      src/Components/Corresponsales/TraficoCorresponsales.tsx
  5. 163
      src/Components/ReportesClientes/Embarques/BuscarEmbarques.tsx
  6. 217
      src/Components/ReportesClientes/Embarques/EmbarquesDespachados.tsx
  7. 163
      src/Components/ReportesClientes/Embarques/EmbarquesPorImportar.tsx
  8. 31
      src/Components/ReportesClientes/Embarques/ReportesEmbarques.tsx
  9. 74
      src/Components/Utils/CellIcon/CellIcon.tsx
  10. 43
      src/DTO/Reportes/Embarques/DTOBuscarEmbarques.ts
  11. 2
      src/DTO/Reportes/Embarques/DTOReportesEmabarquesDespachados.ts
  12. 61
      src/DTO/Reportes/Embarques/DTOReportesEmabarquesPorImportar.ts
  13. 7
      src/Interfaces/Corresponsales/ICorresponsalPedimento.ts
  14. 2
      src/Interfaces/Corresponsales/ICorresponsalTrafico.ts
  15. 34
      src/Services/Reportes/reportesEmbarques.Service.ts
  16. 10
      src/Services/Utils/FileManager.Services.ts
  17. 6
      src/Services/Utils/MFileManager.Service.ts
  18. 4
      src/store/features/Corresponsales/CorresponsalesTraficoSlice.ts

@ -11,6 +11,7 @@ import { RootState } from './store/store'
import { MsgInformativo } from './Components/Utils/Toast/msgInformativo' import { MsgInformativo } from './Components/Utils/Toast/msgInformativo'
import { IconContext } from 'react-icons' import { IconContext } from 'react-icons'
import { BsPersonCircle } from 'react-icons/bs' import { BsPersonCircle } from 'react-icons/bs'
import {TbDoorExit} from 'react-icons/tb'
import Submenu from './Components/Submenu/Submenu' import Submenu from './Components/Submenu/Submenu'
function App() { function App() {
@ -102,9 +103,8 @@ function App() {
<Nav.Link href="/#/logout">Logout</Nav.Link> <Nav.Link href="/#/logout">Logout</Nav.Link>
<div style={{ paddingTop: '5px', paddingLeft:'5px' }}></div> <div style={{ paddingTop: '5px', paddingLeft:'5px' }}></div>
<IconContext.Provider value={{ size: '25px' }}> <IconContext.Provider value={{ size: '25px' }}>
<BsPersonCircle /> <TbDoorExit />
</IconContext.Provider> </IconContext.Provider>
&nbsp;<div style={{ paddingTop: '5px' }}>{Depto}&nbsp;</div>
</> </>
)} )}
</Form> </Form>

@ -45,6 +45,8 @@ export default class CCorresponsalesTrafico implements ICorresponsalTrafico {
idTipoMercancia: number | null; idTipoMercancia: number | null;
cargoA: number; cargoA: number;
causaRectificacion: string; causaRectificacion: string;
totalHonorariosAA: number;
totalGastosTerceros: number;
constructor() { constructor() {
this.id=0 this.id=0
@ -91,6 +93,8 @@ export default class CCorresponsalesTrafico implements ICorresponsalTrafico {
this.idTipoMercancia=null; this.idTipoMercancia=null;
this.cargoA = 0; this.cargoA = 0;
this.causaRectificacion = '' this.causaRectificacion = ''
this.totalHonorariosAA = 0
this.totalGastosTerceros = 0
} }
public getEmptyObject(): ICorresponsalTrafico { public getEmptyObject(): ICorresponsalTrafico {
@ -138,7 +142,9 @@ export default class CCorresponsalesTrafico implements ICorresponsalTrafico {
activo :1 , activo :1 ,
idTipoMercancia: null, idTipoMercancia: null,
cargoA: 0, cargoA: 0,
causaRectificacion: '' causaRectificacion: '',
totalHonorariosAA: 0,
totalGastosTerceros: 0
} }
} }
@ -187,7 +193,9 @@ export default class CCorresponsalesTrafico implements ICorresponsalTrafico {
activo : data.activo, activo : data.activo,
idTipoMercancia: data.idTipoMercancia, idTipoMercancia: data.idTipoMercancia,
cargoA: data.cargoA, cargoA: data.cargoA,
causaRectificacion: data.causaRectificacion causaRectificacion: data.causaRectificacion,
totalHonorariosAA: data.totalHonorariosAA,
totalGastosTerceros: data.totalGastosTerceros
} }
} }
} }

@ -1,17 +1,16 @@
import React from "react"; import React from "react";
import { SideBarMenu } from "../Utils/SideBar/SideBar"; import { SideBarMenu } from "../Utils/SideBar/SideBar";
import { Outlet, Route, Routes } from "react-router-dom"; import { Outlet} from "react-router-dom";
export const ClientesExternos: React.FC = () => { export const ClientesExternos: React.FC = () => {
return ( return (
<>
<div className="container-fluid m-1"> <div className="container-fluid m-1">
<div className="row flex-nowrap"> <div className="row flex-nowrap">
<SideBarMenu/> <SideBarMenu/>
<Outlet/> <Outlet/>
</div> </div>
</div> </div>
</>
) )
} }

@ -267,6 +267,7 @@ export default function TraficoCorresponsales (props:IProps) {
]) ])
const [IDAduana, setIDAduana] = useState(0) const [IDAduana, setIDAduana] = useState(0)
const [CostoDiario, setCostoDiario] = useState(0) const [CostoDiario, setCostoDiario] = useState(0)
const [CostoDiarioConexion, setCostoDiarioConexion] = useState(0)
const [Descripcion, setDescripcion] = useState<string>('') const [Descripcion, setDescripcion] = useState<string>('')
const [IDDestino, setIDDestino] = useState(0) const [IDDestino, setIDDestino] = useState(0)
const [DiasPedPagado, setDiasPedPagado] = useState(0) const [DiasPedPagado, setDiasPedPagado] = useState(0)
@ -285,6 +286,8 @@ export default function TraficoCorresponsales (props:IProps) {
const [Incoterm, setIncoterm] = useState('') const [Incoterm, setIncoterm] = useState('')
const [LineaTransportistaInternacional, setLineaTransportistaInternacional] = const [LineaTransportistaInternacional, setLineaTransportistaInternacional] =
useState('') useState('')
const [LineaNaviera, setLineaNaviera] = useState('')
const [FNotificacion, setFNotificacion] = useState<string>('')
const [MAWB, setMAWB] = useState('') const [MAWB, setMAWB] = useState('')
const [MontoUSD, setMontoUSD] = useState(0) const [MontoUSD, setMontoUSD] = useState(0)
const [NoGuia, setNoGuia] = useState('') const [NoGuia, setNoGuia] = useState('')
@ -292,10 +295,12 @@ export default function TraficoCorresponsales (props:IProps) {
const [Otros, setOtros] = useState(0) const [Otros, setOtros] = useState(0)
const [Transportista, setTransportista] = useState('') const [Transportista, setTransportista] = useState('')
const [PesoNeto, setPesoNeto] = useState(0) const [PesoNeto, setPesoNeto] = useState(0)
const [FraccionArancelaria, setFraccionArancelaria] = useState('')
const [PreferenciaArancelaria, setPreferenciaArancelaria] = useState(0) const [PreferenciaArancelaria, setPreferenciaArancelaria] = useState(0)
const [Seguros, setSeguros] = useState(0) const [Seguros, setSeguros] = useState(0)
const [IDTipoEmbarque, setIDTipoEmbarque] = useState(0) const [IDTipoEmbarque, setIDTipoEmbarque] = useState(0)
const [TotalPagar, setTotalPagar] = useState(0) const [TotalPagar, setTotalPagar] = useState(0)
const [TotalPagarConexion, setTotalPagarConexion] = useState(0)
const [ChangePermission, setChangePermission] = useState(false) const [ChangePermission, setChangePermission] = useState(false)
const [Ready4NextProcess, setReady4NextProcess] = useState(false) const [Ready4NextProcess, setReady4NextProcess] = useState(false)
const [TerminaProceso, setTerminaProceso] = useState(-100) const [TerminaProceso, setTerminaProceso] = useState(-100)
@ -308,6 +313,8 @@ export default function TraficoCorresponsales (props:IProps) {
const [PedimentoH, setPedimentoH] = useState('') const [PedimentoH, setPedimentoH] = useState('')
const [ClavePedimentoH, setClavePedimentoH] = useState('') const [ClavePedimentoH, setClavePedimentoH] = useState('')
const [FechaPagoH, setFechaPagoH] = useState('') const [FechaPagoH, setFechaPagoH] = useState('')
const [TotalHonorariosAA, setTotalHonorariosAA] = useState(0)
const [TotalGastosTerceros, setTotalGastosTerceros] = useState(0)
const [showNextStepModal, setShowNexStepModal] = useState<boolean>(false); const [showNextStepModal, setShowNexStepModal] = useState<boolean>(false);
const [nextStepModalHeader, setNextStepModalHeader] = useState<string>(""); const [nextStepModalHeader, setNextStepModalHeader] = useState<string>("");
@ -419,6 +426,8 @@ export default function TraficoCorresponsales (props:IProps) {
data.idTipoMercancia = IDTipoMercancia data.idTipoMercancia = IDTipoMercancia
data.cargoA = CargoPara data.cargoA = CargoPara
data.causaRectificacion = CausaRectificacion data.causaRectificacion = CausaRectificacion
data.totalHonorariosAA = TotalHonorariosAA
data.totalGastosTerceros = TotalGastosTerceros
CTrafDataService.Append(data) CTrafDataService.Append(data)
.then((response) => { .then((response) => {
if (response.data.estatusCode === 0) { if (response.data.estatusCode === 0) {
@ -462,7 +471,12 @@ export default function TraficoCorresponsales (props:IProps) {
seguros: Seguros, seguros: Seguros,
tipoEmbarque: IDTipoEmbarque, tipoEmbarque: IDTipoEmbarque,
totalPagar: TotalPagar, totalPagar: TotalPagar,
activo: 1 activo: 1,
lineaNaviera: LineaNaviera,
fNotificacion: FNotificacion,
fraccionArancelaria: FraccionArancelaria,
costoDiarioConexion: CostoDiarioConexion,
totalPagarConexion: TotalPagarConexion
} }
CPedimentoService.Append(Detail) CPedimentoService.Append(Detail)
/*.then((responseDetail) => { /*.then((responseDetail) => {
@ -721,6 +735,8 @@ export default function TraficoCorresponsales (props:IProps) {
setIDTipoMercancia(response.data.idTipoMercancia); setIDTipoMercancia(response.data.idTipoMercancia);
setCargoPara(response.data.cargoA) setCargoPara(response.data.cargoA)
setCausaRectificacion(response.data.causaRectificacion) setCausaRectificacion(response.data.causaRectificacion)
setTotalHonorariosAA(response.data.totalHonorariosAA)
setTotalGastosTerceros(response.data.totalGastosTerceros)
}) })
.catch((e: Error) => { .catch((e: Error) => {
setHeader('Error') setHeader('Error')
@ -811,6 +827,7 @@ export default function TraficoCorresponsales (props:IProps) {
}) })
CPedimentoService.Get(IDTrafico) CPedimentoService.Get(IDTrafico)
.then((responsed) => { .then((responsed) => {
setFDespacho(setDate(responsed.data.fDespacho))
setIDDetail(responsed.data.id) setIDDetail(responsed.data.id)
setIDAduana(responsed.data.aduana) setIDAduana(responsed.data.aduana)
setCostoDiario(responsed.data.costoDiario) setCostoDiario(responsed.data.costoDiario)
@ -842,6 +859,11 @@ export default function TraficoCorresponsales (props:IProps) {
setSeguros(responsed.data.seguros) setSeguros(responsed.data.seguros)
setIDTipoEmbarque(responsed.data.tipoEmbarque) setIDTipoEmbarque(responsed.data.tipoEmbarque)
setTotalPagar(responsed.data.totalPagar) setTotalPagar(responsed.data.totalPagar)
setFNotificacion(setDate(responsed.data.fNotificacion))
setLineaNaviera(responsed.data.lineaNaviera)
setFraccionArancelaria(responsed.data.fraccionArancelaria)
setCostoDiarioConexion(responsed.data.costoDiarioConexion)
setTotalPagarConexion(responsed.data.totalPagarConexion)
}) })
.catch((e: Error) => { .catch((e: Error) => {
/* setHeader('Error') /* setHeader('Error')
@ -1393,6 +1415,19 @@ export default function TraficoCorresponsales (props:IProps) {
} }
const cerrarTrafico = () => { const cerrarTrafico = () => {
if(TotalHonorariosAA == 0){
setHeader('Error')
setMsg('Para cerrar la cuenta debe capturar el total de horarios')
setShowMsg(true)
return;
}
if(TotalGastosTerceros == 0){
setHeader('Error')
setMsg('Para cerrar la cuenta debe capturar el total de gastos a terceros')
setShowMsg(true)
return;
}
saveForm();
FileManagerServices.GetClientesZip(IDTrafico) FileManagerServices.GetClientesZip(IDTrafico)
.then(response => { .then(response => {
CTrafDataService.ValidateComplete({id: IDTrafico, idUsuario:UserId, estatus: 4, comentarios:'Todo Correcto'}) CTrafDataService.ValidateComplete({id: IDTrafico, idUsuario:UserId, estatus: 4, comentarios:'Todo Correcto'})
@ -2977,12 +3012,12 @@ export default function TraficoCorresponsales (props:IProps) {
</Col> </Col>
</Row> </Row>
<Row style={{ paddingTop: 5 }}> <Row style={{ paddingTop: 5 }}>
<Col xs={1}> <Col xs={2}>
<Form.Label <Form.Label
onClick={() => { onClick={() => {
showModalBox(2) showModalBox(2)
}} }}
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer', width:'100%'}}
> >
<IconContext.Provider <IconContext.Provider
value={{ color: 'green', size: '15px' }} value={{ color: 'green', size: '15px' }}
@ -2990,51 +3025,81 @@ export default function TraficoCorresponsales (props:IProps) {
<HiCurrencyDollar /> <HiCurrencyDollar />
</IconContext.Provider> </IconContext.Provider>
&nbsp;{LblFacturas} &nbsp;{LblFacturas}
<Form.Control
as="select"
onChange={(e) => {}}
className="form-select form-select-sm"
disabled={Depto !== 'Corresponsalias'}
>
{mCFacturas
? mCFacturas.map((item, index) => {
return item.idTrafico === IDTrafico ? (
<option key={item.id} value={item.id}>
{item.factura}
</option>
) : (
<option value="0">-Seleccione-</option>
)
})
: ''}
</Form.Control>
</Form.Label> </Form.Label>
</Col> </Col>
<Col xs={2}> <Col xs={2}>
<Form.Control <Form.Label style={{width:'100%'}}>
as="select" Descripcion
onChange={(e) => {}} <Form.Control
className="form-select form-select-sm" type="text"
disabled={Depto !== 'Corresponsalias'} id="Descripcion"
> size="sm"
{mCFacturas value={Descripcion}
? mCFacturas.map((item, index) => { disabled={Depto !== 'Corresponsalias'}
return item.idTrafico === IDTrafico ? ( onChange={(e) => setDescripcion(e.target.value)}
<option key={item.id} value={item.id}> />
{item.factura} </Form.Label>
</option>
) : (
<option value="0">-Seleccione-</option>
)
})
: ''}
</Form.Control>
</Col> </Col>
<Col xs={1}>Descripcion</Col>
<Col xs={3}> <Col xs={3}>
<Form.Control <Form.Label style={{width:'100%'}}>
type="text" Linea transportista internacional
id="Descripcion" <Form.Control
size="sm" type="text"
value={Descripcion} id="LineaTransportistaInternacional"
disabled={Depto !== 'Corresponsalias'} size="sm"
onChange={(e) => setDescripcion(e.target.value)} value={LineaTransportistaInternacional}
/> disabled={Depto !== 'Corresponsalias'}
onChange={(e) =>
setLineaTransportistaInternacional(e.target.value)
}
/>
</Form.Label>
</Col> </Col>
<Col xs={2}>Linea transportista internacional</Col>
<Col xs={3}> <Col xs={3}>
<Form.Control <Form.Label style={{width:'100%'}}>
type="text" Linea Naviera
id="LineaTransportistaInternacional" <Form.Control
size="sm" type="text"
value={LineaTransportistaInternacional} id="LineaNaviera"
disabled={Depto !== 'Corresponsalias'} size="sm"
onChange={(e) => value={LineaNaviera}
setLineaTransportistaInternacional(e.target.value) disabled={Depto !== 'Corresponsalias'}
} onChange={(e) =>
/> setLineaNaviera(e.target.value)
}
/>
</Form.Label>
</Col>
<Col xs={2}>
<Form.Label style={{width:'100%'}}>
Fecha Notificacion
<Form.Control
type="date"
id="FNotificacion"
size="sm"
value={FNotificacion}
disabled={Depto !== 'Corresponsalias'}
onChange={(e) => setFNotificacion(e.target.value)}
/>
</Form.Label>
</Col> </Col>
</Row> </Row>
<Row style={{ paddingTop: 5 }}> <Row style={{ paddingTop: 5 }}>
@ -3229,46 +3294,65 @@ export default function TraficoCorresponsales (props:IProps) {
</Col> </Col>
</Row> </Row>
<Row style={{ paddingTop: 5 }}> <Row style={{ paddingTop: 5 }}>
<Col xs={2}>Preferencia arancelaria</Col> <Col xs={3}>
<Col xs={1}> <Form.Label style={{width:'100%'}}>
<Form.Control Fraccion Arancelaria
as="select" <Form.Control
onChange={(e) => { type="text"
setPreferenciaArancelaria(parseInt(e.target.value)) id="FraccionArancelaria"
}} size="sm"
value={PreferenciaArancelaria} value={FraccionArancelaria}
className="form-select form-select-sm" disabled={Depto !== 'Corresponsalias'}
disabled={Depto !== 'Corresponsalias'} onChange={(e) => setFraccionArancelaria(e.target.value)}
> />
<option value="0">No</option> </Form.Label>
<option value="1">Si</option>
</Form.Control>
</Col> </Col>
<Col xs={2}>Fecha/hora instrucciones</Col>
<Col xs={2}> <Col xs={2}>
<DatePicker <Form.Label>
selected={FHInstrucciones} Preferencia arancelaria
disabled={Depto !== 'Corresponsalias'} <Form.Control
onChange={(date: any) => setFHInstrucciones(date)} as="select"
showTimeSelect onChange={(e) => {
timeClassName={handleColor} setPreferenciaArancelaria(parseInt(e.target.value))
dateFormat="MM/dd/yyyy HH:mm:ss" }}
placeholderText="No definido" value={PreferenciaArancelaria}
isClearable className="form-select form-select-sm"
/> disabled={Depto !== 'Corresponsalias'}
>
<option value="0">No</option>
<option value="1">Si</option>
</Form.Control>
</Form.Label>
</Col> </Col>
<Col xs={2}>Fecha/hora entrega en planta</Col>
<Col xs={2}> <Col xs={2}>
<DatePicker <Form.Label style={{width:'100%'}}>
selected={FHEntregaPlanta} Fecha/hora instrucciones
disabled={Depto !== 'Corresponsalias'} <DatePicker
onChange={(date: any) => setFHEntregaPlanta(date)} selected={FHInstrucciones}
showTimeSelect disabled={Depto !== 'Corresponsalias'}
timeClassName={handleColor} onChange={(date: any) => setFHInstrucciones(date)}
dateFormat="MM/dd/yyyy HH:mm:ss" showTimeSelect
placeholderText="No definido" timeClassName={handleColor}
isClearable dateFormat="MM/dd/yyyy HH:mm:ss"
/>{' '} placeholderText="No definido"
isClearable
/>
</Form.Label>
</Col>
<Col xs={2}>
<Form.Label style={{width:'100%'}}>
Fecha/hora entrega en planta
<DatePicker
selected={FHEntregaPlanta}
disabled={Depto !== 'Corresponsalias'}
onChange={(date: any) => setFHEntregaPlanta(date)}
showTimeSelect
timeClassName={handleColor}
dateFormat="MM/dd/yyyy HH:mm:ss"
placeholderText="No definido"
isClearable
/>{' '}
</Form.Label>
</Col> </Col>
</Row> </Row>
<Row style={{ paddingTop: 5 }}> <Row style={{ paddingTop: 5 }}>
@ -3630,6 +3714,72 @@ export default function TraficoCorresponsales (props:IProps) {
/> />
</Col> </Col>
</Row> </Row>
<Row>
<Col xs={3}></Col>
<Col></Col>
<Col style={{ textAlign: 'right' }}>Costo diario Conexion</Col>
<Col>
<CurrencyFormat
value={CostoDiarioConexion}
thousandSeparator={true}
disabled={Depto !== 'Corresponsalias' && Perfil !== 'Corresponsales'}
onValueChange={(values: any) => {
const { value } = values
setCostoDiarioConexion(value)
}}
style={
Depto === 'Corresponsalias'
? {
fontSize: '15px',
backgroundColor: '#FFFFFF',
border: '1px solid #000000',
width: '90px',
borderRadius: '3px'
}
: {
fontSize: '15px',
backgroundColor: '#FFFFFF',
paddingLeft: '20px',
paddingRight: '5px',
border: '1px solid #000000',
width: '90px',
borderRadius: '3px'
}
}
/>
</Col>
<Col style={{ textAlign: 'right' }}>Total a pagar conexion</Col>
<Col>
<CurrencyFormat
value={TotalPagarConexion}
thousandSeparator={true}
disabled={Depto !== 'Corresponsalias' && Perfil !== 'Corresponsales'}
onValueChange={(values: any) => {
const { value } = values
setTotalPagarConexion(value)
}}
style={
Depto === 'Corresponsalias'
? {
fontSize: '15px',
backgroundColor: '#FFFFFF',
border: '1px solid #000000',
width: '90px',
borderRadius: '3px'
}
: {
fontSize: '15px',
backgroundColor: '#FFFFFF',
paddingLeft: '20px',
paddingRight: '5px',
border: '1px solid #000000',
width: '90px',
borderRadius: '3px'
}
}
/>
</Col>
</Row>
</Card> </Card>
</Col> </Col>
<Col xs={5}> <Col xs={5}>
@ -3751,7 +3901,7 @@ export default function TraficoCorresponsales (props:IProps) {
IdFile={IDTrafico} IdFile={IDTrafico}
FileName={''} FileName={''}
canDelete={ canDelete={
Depto === 'Corresponsalias' && Perfil !== 'Corresponsales' Depto === 'Corresponsalias' || Perfil !== 'Corresponsal'
} }
FileType={['pdf']} FileType={['pdf']}
setBackgroundColor={c.id} setBackgroundColor={c.id}
@ -3861,7 +4011,10 @@ export default function TraficoCorresponsales (props:IProps) {
<Form.Label>XML Cuenta Mexicana</Form.Label> <Form.Label>XML Cuenta Mexicana</Form.Label>
</Col> </Col>
<Col xs={4}> <Col xs={4}>
<Form.Label>Archivos Adicionales</Form.Label> <Row>
<Col sm={6}>Total Honorarios A.A</Col>
<Col sm={6}>Total Gastos Terceros</Col>
</Row>
</Col> </Col>
</Row> </Row>
<Row> <Row>
@ -3897,6 +4050,85 @@ export default function TraficoCorresponsales (props:IProps) {
onAppendFM={function (idFile: number): void {}} onAppendFM={function (idFile: number): void {}}
/> />
</Col> </Col>
<Col xs={4}>
<Row>
<Col sm={6}>
<CurrencyFormat
value={TotalHonorariosAA}
displayType='input'
readOnly={Depto !== 'Facturacion' || Proceso !== 3}
thousandSeparator={true}
onValueChange={(values: any) => {
const { value } = values
setTotalHonorariosAA(value)
}}
style={{
fontSize: '18px',
backgroundColor: '#FEFDF5',
border: '2px solid #837F5D',
width: '100%',
textAlign: 'right',
borderRadius: '10px',
paddingLeft: '20px',
paddingRight: '10px',
}}
/>
</Col>
<Col sm={6}>
<CurrencyFormat
value={TotalGastosTerceros}
thousandSeparator={true}
displayType='input'
readOnly={Depto !== 'Facturacion' || Proceso !== 3}
onValueChange={(values: any) => {
const { value } = values
setTotalGastosTerceros(value)
}}
style={{
fontSize: '18px',
backgroundColor: '#FEFDF5',
border: '2px solid #837F5D',
width: '100%',
textAlign: 'right',
borderRadius: '10px',
paddingLeft: '20px',
paddingRight: '10px',
}}
/>
</Col>
</Row>
</Col>
</Row>
<Row>
<Col xs={4}>
<Form.Label>PDF de Gastos a Terceros</Form.Label>
</Col>
<Col xs={4}>
<Form.Label>Archivos Adicionales</Form.Label>
</Col>
<Col xs={4}>
<Form.Label></Form.Label>
</Col>
</Row>
<Row>
<Col xs={4}>
<FileManager
IDUser={UserId}
width={'100%'}
height={100}
IDProcess={41}
IdFile={IDTrafico}
FileName={''}
canDelete={
Depto === 'Facturacion' && Proceso === 3
}
FileType={['pdf']}
Leyenda={`Seleccione el PDF de las notas de cargos para subirlo al servidor...`}
onAppendFM={function (idFile: number): void {
}}
/>
</Col>
<Col xs={4}> <Col xs={4}>
<FileManager <FileManager
IDUser={UserId} IDUser={UserId}

@ -0,0 +1,163 @@
import { AgGridReact } from "ag-grid-react";
import React, { useState } from "react";
import { Card, Row, Col, Button, Form } from "react-bootstrap";
import { DTOReportesEmbarquesDespachados } from "../../../DTO/Reportes/Embarques/DTOReportesEmabarquesDespachados";
import reportesEmbarquesService from "../../../Services/Reportes/reportesEmbarques.Service";
import { CellIcon } from "../../Utils/CellIcon/CellIcon";
import { DTOBuscarEmbarques } from "../../../DTO/Reportes/Embarques/DTOBuscarEmbarques";
import { FaDownload } from "react-icons/fa";
export const BuscarEmbarques: React.FC = () => {
const gridRef = React.useRef<any>(null)
const [Busqueda, setBusqueda] = useState<string>('');
const [Embarques, setEmbarques] = useState<DTOBuscarEmbarques[]>([]);
const [columnDefs] = useState([
{ field: 'id', headerName: 'id', width: 70, sortable: true, filter: true },
{ field: 'aduana', headerName: 'ADUANA', },
{ field: 'tipoEmbarque', headerName: 'TIPO DE EMBARQUE', },
{ field: 'destino', headerName: 'DESTINO', },
{ field: 'diasEnAduana', headerName: 'DIAS EN ADUANA', },
{ field: 'nombre', headerName: 'NOMBRE', },
{ field: 'noPedimento', headerName: 'NO DE PEDIMENTO', },
{ field: 'tipo', headerName: 'TIPO', },
{ field: 'ordenCompra', headerName: 'ORDEN DE COMPRA', },
{ field: 'factura', headerName: 'FACTURA', },
{ field: 'proveedor', headerName: 'PROVEEDOR', },
{ field: 'descripcionMercancia', headerName: 'DESCRIPCION', },
{ field: 'bultos', headerName: 'BULTOS', },
{ field: 'cantidadContenedores', headerName: 'CANTIDAD DE CONTENEDORES', },
{ field: 'pesoNeto', headerName: 'PESO NETO', },
{ field: 'incoterm', headerName: 'INCOTERM', },
{ field: 'fechaETA', headerName: 'FECHA ETA', },
{ field: 'estatus', headerName: 'ESTATUS', },
{ field: 'observaciones', headerName: 'OBSERVACIONES', },
{ field: 'fechaInicioGastosAlmacenaje', headerName: 'FECHA DE INICIO DE GASTOS DE ALMACENAJE', },
{ field: 'costoDiarioAlmacenaje', headerName: 'COSTO DIARIO ALMACENAJE', cellRenderer: (params: any) => {return `$ ${params.data.costoDiarioAlmacenaje}`}},
{ field: 'costoDiarioConexion', headerName: 'COSTO DIARIO CONEXION', cellRenderer: (params: any) => {return `$ ${params.data.costoDiarioConexion}`}},
{ field: 'totalPagar', headerName: 'TOTAL A PAGAR ALMACENAJE', cellRenderer: (params: any) => {return `$ ${params.data.totalPagar}`}},
{ field: 'totalPagarConexion', headerName: 'TOTAL PAGAR CONEXION', cellRenderer: (params: any) => {return `$ ${params.data.totalPagarConexion}`}},
{ field: 'fechaDespacho', headerName: 'FECHA DE DESPACHO', },
{ field: 'nombrePaqueteria', headerName: 'NOMBRE DE PAQUETERIA O TRANSPORTISTA', },
{ field: 'noGuiaEmbarqueDestino', headerName: 'NO. DE GUIA DE EMBARQUE A DESTINO', },
{ field: 'fechaEntregaDestinoFinal', headerName: 'FECHA DE ENTREGA EN DESTINO FINAL', },
{ field: 'facturaCorresponsal', headerName: 'FACTURA', cellRenderer: (params: any) => {
return <CellIcon hasFile={params.data.facturaCorresponsal} idTrafico={params.data.id} proceso={16} ></CellIcon>
}},
{ field: 'certificadoCalidad', headerName: 'CERTIFICADO DE CALIDAD', cellRenderer: (params: any) => {
return <CellIcon hasFile={params.data.certificadoCalidad} idTrafico={params.data.id} proceso={15} ></CellIcon>
}},
{ field: 'packingList', headerName: 'PACKING LIST', cellRenderer: (params: any) => {
return <CellIcon hasFile={params.data.packingList} idTrafico={params.data.id} proceso={18} ></CellIcon>
}},
{ field: 'hojaTecnica', headerName: 'HOJA TECNICA', cellRenderer: (params: any) => {
return <CellIcon hasFile={params.data.hojaTecnica} idTrafico={params.data.id} proceso={17} ></CellIcon>
}},
{ field: 'bl', headerName: 'BL', cellRenderer: (params: any) => {
return <CellIcon hasFile={params.data.bl} idTrafico={params.data.id} proceso={14} ></CellIcon>
}},
{ field: 'pedimentoInformativo', headerName: 'PEDIMENTO INFORMATIVO', cellRenderer: (params: any) => {
return <CellIcon hasFile={params.data.pedimentoInformativo} idTrafico={params.data.id} proceso={12} ></CellIcon>
}, width: 130},
{ field: 'pedimentoSimplificado', headerName: 'PEDIMENTO SIMPLIFICADO', cellRenderer: (params: any) => {
return <CellIcon hasFile={params.data.pedimentoSimplificado} idTrafico={params.data.id} proceso={13} ></CellIcon>
}, width: 130},
{ field: 'doda', headerName: 'DODA', cellRenderer: (params: any) => {
return <CellIcon hasFile={params.data.doda} idTrafico={params.data.id} proceso={11} ></CellIcon>
}, width: 100},
{ field: 'honorarios', headerName: 'HONORARIOS AA', cellRenderer: (params: any) => {
return <CellIcon hasFile={params.data.honorarios} idTrafico={params.data.id} proceso={37} ></CellIcon>
}, width: 130},
{ field: 'totalHonorarios', headerName: 'TOTAL HONORARIOS AA', cellRenderer: (params: any) => {return `$ ${params.data.totalHonorarios}`}},
{ field: 'gastosTerceros', headerName: 'GASTOS A TERCEROS', cellRenderer: (params: any) => {
return <CellIcon hasFile={params.data.gastosTerceros} idTrafico={params.data.id} proceso={41} ></CellIcon>
}, width: 130},
{ field: 'totalGastosTerceros', headerName: 'TOTAL GASTOS A TERCEROS', },
{ field: 'comprobantesGastosTerceros', headerName: 'COMPROBANTES GASTOS A TERCEROS', }
]);
const filtraEmbarques = (e: any) => {
gridRef.current.api.setQuickFilter(e.target.value)
}
const buscarEmbarques = () => {
if(Busqueda !== '' && Busqueda !== null && Busqueda !== undefined){
reportesEmbarquesService.BuscarEmbarques(Busqueda)
.then((response) => {
setEmbarques(response.data);
});
}else{
//Mostrar mensaje de error
}
}
const exportarEmbarques = () => {
reportesEmbarquesService.GetExcelBuscados(Busqueda)
.then(resp => {
const url = window.URL.createObjectURL(new Blob([resp.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', `ReporteBusquedaDeEmbarques.xlsx`);
document.body.appendChild(link);
link.click();
})
}
return (
<>
<Card>
<Card.Body>
<Row className="mb-2">
<Col xs={5}>
<Form.Control
value={Busqueda}
type='text'
size='sm'
placeholder='Search...'
onChange={(e) => {
setBusqueda(e.target.value)
}}
/>
</Col>
<Col>
<Button className="me-2" variant="primary" onClick={buscarEmbarques}>Generar</Button>
{ Embarques.length > 0 ? <Button onClick={exportarEmbarques}><FaDownload/>&nbsp;Excel</Button> : "" }
</Col>
</Row>
</Card.Body>
</Card>
<Card className='mt-2' style={{visibility: Embarques.length > 0 ? "visible" : "hidden"}}>
<Card.Body>
<Row className="mb-2">
<Col xs={5}>
<Form.Control
type='text'
size='sm'
placeholder='Search...'
onChange={(e) => {
filtraEmbarques(e)
}}
/>
</Col>
</Row>
<div className='ag-theme-alpine' style={{ height: 500, width: '100%' }}>
<AgGridReact
rowData={Embarques}
columnDefs={columnDefs}
defaultColDef={{
resizable: true,
initialWidth: 200,
wrapHeaderText: true,
autoHeaderHeight: true,
}}
pagination={true}
paginationAutoPageSize={true}
ref={gridRef}
rowSelection={'single'}
rowMultiSelectWithClick={true}
></AgGridReact>
</div>
</Card.Body>
</Card>
</>
);
}

@ -0,0 +1,217 @@
import { AgGridReact } from "ag-grid-react";
import React, { useState, useEffect } from "react";
import { DTOReportesEmbarquesDespachados } from "../../../DTO/Reportes/Embarques/DTOReportesEmabarquesDespachados";
import reportesEmbarquesService from "../../../Services/Reportes/reportesEmbarques.Service";
import { Card, Row, Col, Form, Button } from "react-bootstrap";
import { CellIcon } from "../../Utils/CellIcon/CellIcon";
import { FaDownload } from "react-icons/fa";
export const EmbarquesDespachados: React.FC = () => {
const gridRef = React.useRef<any>(null)
const [Inicio, setInicio] = useState(currentDate(-7))
const [Fin, setFin] = useState(currentDate(0))
const [filteredData, setFilteredData] = useState<DTOReportesEmbarquesDespachados[]>([]);
const [EmbarquesDespachados, setEmbarquesDespachados] = useState<DTOReportesEmbarquesDespachados[]>([]);
const [columnDefs] = useState([
{ field: 'id', headerName: 'id', width: 70, sortable: true, filter: true },
{ field: 'aduana', headerName: 'ADUANA', },
{ field: 'tipoEmbarque', headerName: 'TIPO DE EMBARQUE', },
{ field: 'destino', headerName: 'DESTINO', },
{ field: 'diasEnAduana', headerName: 'DIAS EN ADUANA', },
{ field: 'nombre', headerName: 'NOMBRE', },
{ field: 'trafico', headerName: 'TRAFICO', },
{ field: 'referencia', headerName: 'REFERENCIA', },
{ field: 'noPedimento', headerName: 'NO DE PEDIMENTO', },
{ field: 'clavePedimento', headerName: 'CLAVE DE PADIMENTO', },
{ field: 'tipo', headerName: 'TIPO', },
{ field: 'ordenCompra', headerName: 'ORDEN DE COMPRA', },
{ field: 'factura', headerName: 'FACTURA', },
{ field: 'proveedor', headerName: 'PROVEEDOR', },
{ field: 'descripcionMercancia', headerName: 'DESCRIPCION', },
{ field: 'lineaTransportistaInternacional', headerName: 'LINEA TRANSPORTISTA INTERNACIONAL', },
{ field: 'lineaNaviera', headerName: 'LINEA NAVIERA', },
{ field: 'mawb', headerName: 'MAWB', },
{ field: 'hawb', headerName: 'HAWB', },
{ field: 'fechaNotificacion', headerName: 'FECHA DE NOTIFICACION', },
{ field: 'bultos', headerName: 'BULTOS', },
{ field: 'cantidadContenedores', headerName: 'CANTIDAD DE CONTENEDORES', },
{ field: 'numerosContenedores', headerName: 'NO. CONTENEDORES', },
{ field: 'pesoBruto', headerName: 'PESO BRUTO', },
{ field: 'pesoNeto', headerName: 'PESO NETO', },
{ field: 'incoterm', headerName: 'INCOTERM', },
{ field: 'fechaETA', headerName: 'FECHA ETA', },
{ field: 'fechaEntrada', headerName: 'FECHA DE ENTRADA', },
{ field: 'fechaRevalidacionGuia', headerName: 'FECHA DE REVALIDACION GUIA', },
{ field: 'montoUSD', headerName: 'MONTO USD', cellRenderer: (params: any) => {return `$ ${params.data.montoUSD}`}},
{ field: 'origen', headerName: 'ORIGEN', },
{ field: 'fraccionArancelaria', headerName: 'FRACCION ARANCELARIA', },
{ field: 'descripcion', headerName: 'DESCRIPCION', },
{ field: 'preferenciaArancelaria', headerName: 'PREFERENCIA ARANCELARIA', },
{ field: 'estatus', headerName: 'ESTATUS', },
{ field: 'observaciones', headerName: 'OBSERVACIONES', },
{ field: 'fechaInicioGastosAlmacenaje', headerName: 'FECHA DE INICIO DE GASTOS DE ALMACENAJE', },
{ field: 'costoDiarioAlmacenaje', headerName: 'COSTO DIARIO ALMACENAJE', cellRenderer: (params: any) => {return `$ ${params.data.costoDiarioAlmacenaje}`}},
{ field: 'costoDiarioConexion', headerName: 'COSTO DIARIO CONEXION', cellRenderer: (params: any) => {return `$ ${params.data.costoDiarioConexion}`}},
{ field: 'totalPagar', headerName: 'TOTAL A PAGAR ALMACENAJE', cellRenderer: (params: any) => {return `$ ${params.data.totalPagar}`}},
{ field: 'totalPagarConexion', headerName: 'TOTAL PAGAR CONEXION', cellRenderer: (params: any) => {return `$ ${params.data.totalPagarConexion}`}},
{ field: 'fechaPagoPedimento', headerName: 'FECHA DE PAGO PEDIMENTO', },
{ field: 'fechaInstrucciones', headerName: 'FECHA DE INSTRUCCIONES', },
{ field: 'horaInstrucciones', headerName: 'HORA DE INSTRUCCIONES', },
{ field: 'fechaDespacho', headerName: 'FECHA DE DESPACHO', },
{ field: 'diasCPPagado', headerName: 'DIAS C/PDTO PAGADO', },
{ field: 'fechaSalidaContenedores', headerName: 'FECHA SALIDA DE CONTENEDORES', },
{ field: 'nombrePaqueteria', headerName: 'NOMBRE DE PAQUETERIA O TRANSPORTISTA', },
{ field: 'noGuiaEmbarqueDestino', headerName: 'NO. DE GUIA DE EMBARQUE A DESTINO', },
{ field: 'fechaEntregaDestinoFinal', headerName: 'FECHA DE ENTREGA EN DESTINO FINAL', },
{ field: 'horaEntregaDestinoFinal', headerName: 'HORA DE ENTREGA EN DESTINO FINAL', },
{ field: 'facturaCorresponsal', headerName: 'FACTURA', cellRenderer: (params: any) => {
return <CellIcon hasFile={params.data.facturaCorresponsal} idTrafico={params.data.id} proceso={16} ></CellIcon>
}},
{ field: 'certificadoCalidad', headerName: 'CERTIFICADO DE CALIDAD', cellRenderer: (params: any) => {
return <CellIcon hasFile={params.data.certificadoCalidad} idTrafico={params.data.id} proceso={15} ></CellIcon>
}},
{ field: 'packingList', headerName: 'PACKING LIST', cellRenderer: (params: any) => {
return <CellIcon hasFile={params.data.packingList} idTrafico={params.data.id} proceso={18} ></CellIcon>
}},
{ field: 'hojaTecnica', headerName: 'HOJA TECNICA', cellRenderer: (params: any) => {
return <CellIcon hasFile={params.data.hojaTecnica} idTrafico={params.data.id} proceso={17} ></CellIcon>
}},
{ field: 'bl', headerName: 'BL', cellRenderer: (params: any) => {
return <CellIcon hasFile={params.data.bl} idTrafico={params.data.id} proceso={14} ></CellIcon>
}},
{ field: 'pedimentoInformativo', headerName: 'PEDIMENTO INFORMATIVO', cellRenderer: (params: any) => {
return <CellIcon hasFile={params.data.pedimentoInformativo} idTrafico={params.data.id} proceso={12} ></CellIcon>
}, width: 130},
{ field: 'pedimentoSimplificado', headerName: 'PEDIMENTO SIMPLIFICADO', cellRenderer: (params: any) => {
return <CellIcon hasFile={params.data.pedimentoSimplificado} idTrafico={params.data.id} proceso={13} ></CellIcon>
}, width: 130},
{ field: 'doda', headerName: 'DODA', cellRenderer: (params: any) => {
return <CellIcon hasFile={params.data.doda} idTrafico={params.data.id} proceso={11} ></CellIcon>
}, width: 100},
{ field: 'honorarios', headerName: 'HONORARIOS AA', cellRenderer: (params: any) => {
return <CellIcon hasFile={params.data.honorarios} idTrafico={params.data.id} proceso={37} ></CellIcon>
}, width: 130},
{ field: 'totalHonorarios', headerName: 'TOTAL HONORARIOS AA', cellRenderer: (params: any) => {return `$ ${params.data.totalHonorarios}`}},
{ field: 'gastosTerceros', headerName: 'GASTOS A TERCEROS', cellRenderer: (params: any) => {
return <CellIcon hasFile={params.data.gastosTerceros} idTrafico={params.data.id} proceso={41} ></CellIcon>
}, width: 130},
{ field: 'totalGastosTerceros', headerName: 'TOTAL GASTOS A TERCEROS', cellRenderer: (params: any) => {return `$ ${params.data.totalGastosTerceros}`}},
{ field: 'comprobantesGastosTerceros', headerName: 'COMPROBANTES GASTOS A TERCEROS', cellRenderer: (params: any) => {
return <CellIcon hasFile={params.data.comprobantesGastosTerceros} idTrafico={params.data.id} proceso={2} ></CellIcon>
}, width: 130},
{ field: 'pruebaEntrega', headerName: 'PRUEBA DE ENTREGA', },
{ field: 'descargarTodos', headerName: 'DESCARGAR TODOS', },
]);
function currentDate(days: number): string {
var today = new Date()
today.setDate(today.getDate() + days)
var dd = String(today.getDate()).padStart(2, '0')
var mm = String(today.getMonth() + 1).padStart(2, '0')
var yyyy = today.getFullYear()
return yyyy + '-' + mm + '-' + dd
}
const GetEmbarquesDespachados = () => {
reportesEmbarquesService.getReporteEmbarquesDespachados(Inicio, Fin)
.then(res => {
setEmbarquesDespachados(res.data)
setFilteredData(res.data)
});
}
const filtraEmbarques = (e: any) => {
gridRef.current.api.setQuickFilter(e.target.value)
}
const exportarEmbarques = () => {
reportesEmbarquesService.GetExcelDespachados(Inicio, Fin)
.then(resp => {
const url = window.URL.createObjectURL(new Blob([resp.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', `ReporteEmbarquesDespachados.xlsx`);
document.body.appendChild(link);
link.click();
})
}
return (
<>
<Card>
<Card.Body>
<Row>
<Col xs={3}>
<Form.Label style={{width:'100%'}}>
Fecha Inicial
<Form.Control
defaultValue={Inicio}
type='date'
name='Inicio'
placeholder='Inicio'
title='Inicio'
alt='Inicio'
data-date-format='YYYY-mm-dd'
onChange={(e) => setInicio(e.target.value)}
size='sm'
/>
</Form.Label>
</Col>
<Col xs={3}>
<Form.Label style={{width:'100%'}}>
Fecha Final
<Form.Control
defaultValue={Fin}
type='date'
name='Fin'
placeholder='Fin'
title='Fin'
alt='Fin'
onChange={(e) => setFin(e.target.value)}
size='sm'
/>
</Form.Label>
</Col>
<Col style={{margin:'auto 0px'}}>
<Button className="me-2" variant="primary" onClick={GetEmbarquesDespachados}>Generar</Button>
{ EmbarquesDespachados.length > 0 ? <Button onClick={exportarEmbarques}><FaDownload/>&nbsp;Excel</Button> : "" }
</Col>
</Row>
</Card.Body>
</Card>
<Card className='mt-2' style={{visibility: EmbarquesDespachados.length > 0 ? "visible" : "hidden"}}>
<Card.Body>
<Row className="mb-2">
<Col xs={5}>
<Form.Control
type='text'
size='sm'
placeholder='Search...'
onChange={(e) => {
filtraEmbarques(e)
}}
/>
</Col>
</Row>
<div className='ag-theme-alpine' style={{ height: 500, width: '100%' }}>
<AgGridReact
rowData={filteredData}
columnDefs={columnDefs}
defaultColDef={{
resizable: true,
initialWidth: 200,
wrapHeaderText: true,
autoHeaderHeight: true,
}}
pagination={true}
paginationAutoPageSize={true}
ref={gridRef}
rowSelection={'single'}
rowMultiSelectWithClick={true}
></AgGridReact>
</div>
</Card.Body>
</Card>
</>
);
}

@ -0,0 +1,163 @@
import { AgGridReact } from "ag-grid-react";
import React, { useState, useEffect } from "react";
import { DTOReportesEmbarquesPorImportar } from "../../../DTO/Reportes/Embarques/DTOReportesEmabarquesPorImportar";
import reportesEmbarquesService from "../../../Services/Reportes/reportesEmbarques.Service";
import { ColDef } from "ag-grid-community";
import { Card, Row, Col, Form, Button } from "react-bootstrap";
import { CellIcon } from "../../Utils/CellIcon/CellIcon";
import { FaDownload } from "react-icons/fa";
export const EmbarquesPorImportar: React.FC = () => {
const gridRef = React.useRef<any>(null)
const [EmbarquesPorImportar, setEmbarquesPorImportar] = useState<DTOReportesEmbarquesPorImportar[]>([]);
const [columnDefs] = useState<ColDef[]>([
{ field: 'id', headerName: 'id', width: 70, sortable: true, filter: true },
{ field: 'aduana', headerName: 'ADUANA', },
{ field: 'tipoEmbarque', headerName: 'TIPO DE EMBARQUE', },
{ field: 'destino', headerName: 'DESTINO', },
{ field: 'diasEnAduana', headerName: 'DIAS EN ADUANA', },
{ field: 'nombre', headerName: 'NOMBRE', },
{ field: 'trafico', headerName: 'TRAFICO', },
{ field: 'referencia', headerName: 'REFERENCIA', },
{ field: 'noPedimento', headerName: 'NO DE PEDIMENTO', },
{ field: 'clavePedimento', headerName: 'CLAVE DE PADIMENTO', },
{ field: 'tipo', headerName: 'TIPO', },
{ field: 'ordenCompra', headerName: 'ORDEN DE COMPRA', },
{ field: 'factura', headerName: 'FACTURA', },
{ field: 'proveedor', headerName: 'PROVEEDOR', },
{ field: 'descripcionMercancia', headerName: 'DESCRIPCION', },
{ field: 'lineaTransportistaInternacional', headerName: 'LINEA TRANSPORTISTA INTERNACIONAL', },
{ field: 'lineaNaviera', headerName: 'LINEA NAVIERA', },
{ field: 'mawb', headerName: 'MAWB', },
{ field: 'hawb', headerName: 'HAWB', },
{ field: 'fechaNotificacion', headerName: 'FECHA DE NOTIFICACION', },
{ field: 'bultos', headerName: 'BULTOS', },
{ field: 'cantidadContenedores', headerName: 'CANTIDAD DE CONTENEDORES', },
{ field: 'numerosContenedores', headerName: 'NO. CONTENEDORES', },
{ field: 'pesoBruto', headerName: 'PESO BRUTO', },
{ field: 'pesoNeto', headerName: 'PESO NETO', },
{ field: 'incoterm', headerName: 'INCOTERM', },
{ field: 'fechaETA', headerName: 'FECHA ETA', },
{ field: 'fechaEntrada', headerName: 'FECHA DE ENTRADA', },
{ field: 'fechaRevalidacionGuia', headerName: 'FECHA DE REVALIDACION GUIA', },
{ field: 'montoUSD', headerName: 'MONTO USD', cellRenderer: (params: any) => {return `$ ${params.data.montoUSD}`}},
{ field: 'origen', headerName: 'ORIGEN', },
{ field: 'fraccionArancelaria', headerName: 'FRACCION ARANCELARIA', },
{ field: 'descripcion', headerName: 'DESCRIPCION', },
{ field: 'preferenciaArancelaria', headerName: 'PREFERENCIA ARANCELARIA', },
{ field: 'estatus', headerName: 'ESTATUS', },
{ field: 'observaciones', headerName: 'OBSERVACIONES', },
{ field: 'fechaInicioGastosAlmacenaje', headerName: 'FECHA DE INICIO DE GASTOS DE ALMACENAJE', },
{ field: 'costoDiarioAlmacenaje', headerName: 'COSTO DIARIO ALMACENAJE', cellRenderer: (params: any) => {return `$ ${params.data.costoDiarioAlmacenaje}`}},
{ field: 'costoDiarioConexion', headerName: 'COSTO DIARIO CONEXION', cellRenderer: (params: any) => {return `$ ${params.data.costoDiarioConexion}`}},
{ field: 'totalPagar', headerName: 'TOTAL A PAGAR ALMACENAJE', cellRenderer: (params: any) => {return `$ ${params.data.totalPagar}`}},
{ field: 'totalPagarConexion', headerName: 'TOTAL PAGAR CONEXION', cellRenderer: (params: any) => {return `$ ${params.data.totalPagarConexion}`}},
{ field: 'fechaPagoPedimento', headerName: 'FECHA DE PAGO PEDIMENTO', },
{ field: 'fechaInstrucciones', headerName: 'FECHA DE INSTRUCCIONES', },
{ field: 'horaInstrucciones', headerName: 'HORA DE INSTRUCCIONES', },
{ field: 'fechaDespacho', headerName: 'FECHA DE DESPACHO', },
{ field: 'diasCPPagado', headerName: 'DIAS C/PDTO PAGADO', },
{ field: 'fechaSalidaContenedores', headerName: 'FECHA SALIDA DE CONTENEDORES', },
{ field: 'nombrePaqueteria', headerName: 'NOMBRE DE PAQUETERIA O TRANSPORTISTA', },
{ field: 'noGuiaEmbarqueDestino', headerName: 'NO. DE GUIA DE EMBARQUE A DESTINO', },
{ field: 'fechaEntregaDestinoFinal', headerName: 'FECHA DE ENTREGA EN DESTINO FINAL', },
{ field: 'horaEntregaDestinoFinal', headerName: 'HORA DE ENTREGA EN DESTINO FINAL', },
{ field: 'facturaCorresponsal', headerName: 'FACTURA', cellRenderer: (params: any) => {
return <CellIcon hasFile={params.data.facturaCorresponsal} idTrafico={params.data.id} proceso={16} ></CellIcon>
}},
{ field: 'certificadoCalidad', headerName: 'CERTIFICADO DE CALIDAD', cellRenderer: (params: any) => {
return <CellIcon hasFile={params.data.certificadoCalidad} idTrafico={params.data.id} proceso={15} ></CellIcon>
}},
{ field: 'packingList', headerName: 'PACKING LIST', cellRenderer: (params: any) => {
return <CellIcon hasFile={params.data.packingList} idTrafico={params.data.id} proceso={18} ></CellIcon>
}},
{ field: 'hojaTecnica', headerName: 'HOJA TECNICA', cellRenderer: (params: any) => {
return <CellIcon hasFile={params.data.hojaTecnica} idTrafico={params.data.id} proceso={17} ></CellIcon>
}},
{ field: 'bl', headerName: 'BL', cellRenderer: (params: any) => {
return <CellIcon hasFile={params.data.bl} idTrafico={params.data.id} proceso={14} ></CellIcon>
}},
{ field: 'pedimentoInformativo', headerName: 'PEDIMENTO INFORMATIVO', cellRenderer: (params: any) => {
return <CellIcon hasFile={params.data.pedimentoInformativo} idTrafico={params.data.id} proceso={12} ></CellIcon>
}, width: 130},
{ field: 'pedimentoSimplificado', headerName: 'PEDIMENTO SIMPLIFICADO', cellRenderer: (params: any) => {
return <CellIcon hasFile={params.data.pedimentoSimplificado} idTrafico={params.data.id} proceso={13} ></CellIcon>
}, width: 130},
{ field: 'doda', headerName: 'DODA', cellRenderer: (params: any) => {
return <CellIcon hasFile={params.data.doda} idTrafico={params.data.id} proceso={11} ></CellIcon>
}, width: 100},
{ field: 'cuentaDeGastos', headerName: 'CUENTA DE GASTOS', cellRenderer: (params: any) => {
return <CellIcon hasFile={params.data.cuentaDeGastos} idTrafico={params.data.id} proceso={37} ></CellIcon>
}, width: 100},
]);
const fetchEmbarquesPorImportar = () => {
reportesEmbarquesService.getReporteEmbarquesPorImportar()
.then(res => {
console.log(res.data)
setEmbarquesPorImportar(res.data)
});
}
useEffect(() => {
fetchEmbarquesPorImportar();
},[])
const filtraEmbarques = (e: any) => {
gridRef.current.api.setQuickFilter(e.target.value)
}
const exportarEmbarques = () => {
reportesEmbarquesService.GetExcelPorImportar()
.then(resp => {
const url = window.URL.createObjectURL(new Blob([resp.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', `ReporteEmbarquesPorImportar.xlsx`);
document.body.appendChild(link);
link.click();
})
}
return (
<Card className='mt-2'>
<Card.Body>
<Row className="mb-4">
<Col>
<Button className="me-2" onClick={fetchEmbarquesPorImportar}>Actualizar</Button>
<Button onClick={exportarEmbarques}><FaDownload/>&nbsp;Excel</Button>
</Col>
</Row>
<hr/>
<Row className="mb-2">
<Col xs={5}>
<Form.Control
type='text'
size='sm'
placeholder='Search...'
onChange={(e) => {
filtraEmbarques(e)
}}
/>
</Col>
</Row>
<div className='ag-theme-alpine' style={{ height: 500, width: '100%' }}>
<AgGridReact
rowData={EmbarquesPorImportar}
columnDefs={columnDefs}
defaultColDef={{
resizable: true,
initialWidth: 200,
wrapHeaderText: true,
autoHeaderHeight: true,
}}
pagination={true}
paginationAutoPageSize={true}
ref={gridRef}
rowSelection={'single'}
rowMultiSelectWithClick={true}
></AgGridReact>
</div>
</Card.Body>
</Card>
);
}

@ -1,7 +1,12 @@
import React from 'react'; import React from 'react';
import { Card, Tab, Tabs } from 'react-bootstrap'; import { Card, Tab, Tabs } from 'react-bootstrap';
import { EmbarquesPorImportar } from './EmbarquesPorImportar';
import { EmbarquesDespachados } from './EmbarquesDespachados';
import { BuscarEmbarques } from './BuscarEmbarques';
import { BsTruck } from 'react-icons/bs';
export const ReportesEmbarques: React.FC = () => {
export const ReportesEmbarques: React.FC = () => {
return ( return (
<div className='px-2' style={{width:'85%'}}> <div className='px-2' style={{width:'85%'}}>
<Card> <Card>
@ -12,36 +17,24 @@ export const ReportesEmbarques: React.FC = () => {
> >
<Tab <Tab
eventKey="EmbarquesPorImportar" eventKey="EmbarquesPorImportar"
title="Embarques por importar" title={<span><BsTruck className='me-2'/>{"Embarques Por Importar"}</span>}
id="TabEmbarquesPorImportar" id="TabEmbarquesPorImportar"
> >
<Card className='mt-2'> {<EmbarquesPorImportar/>}
<Card.Body>
Aqui va la tabla donde se muestran los embarques del cliente
</Card.Body>
</Card>
</Tab> </Tab>
<Tab <Tab
eventKey="EmbarquesDespachados" eventKey="EmbarquesDespachados"
title="Embarques Despachados" title={<span><BsTruck className='me-2'/>{"Embarques Despachados"}</span>}
id="TabEmbarquesdespachados" id="TabEmbarquesdespachados"
> >
<Card> {<EmbarquesDespachados/>}
<Card.Body>
Reporte de embarques despachados
</Card.Body>
</Card>
</Tab> </Tab>
<Tab <Tab
eventKey="BuscarEmbarques" eventKey="BuscarEmbarques"
title="Buscar Embarques" title={<span><BsTruck className='me-2'/>{"Buscar Embarques"}</span>}
id="TabBuscarEmbarques" id="TabBuscarEmbarques"
> >
<Card> <BuscarEmbarques/>
<Card.Body>
Buscador de embarques
</Card.Body>
</Card>
</Tab> </Tab>
</Tabs> </Tabs>
</Card.Body> </Card.Body>

@ -0,0 +1,74 @@
import { useState, useEffect } from "react";
import { IconContext } from "react-icons";
import { BsFillXCircleFill, BsCheckCircleFill } from "react-icons/bs";
import IFileManager from "../../../Interfaces/Utils/IFileManager";
import MFileManagerService from "../../../Services/Utils/MFileManager.Service";
import FileManagerDataService from "../../../Services/Utils/FileManager.Services";
import { Form } from "react-bootstrap";
interface IProps{
hasFile: number;
idTrafico: number;
proceso: number;
}
export const CellIcon: React.FC<IProps> = (props: IProps) => {
const [Archvios, setArchivos] = useState<IFileManager[]>([]);
useEffect(() => {
MFileManagerService.Get(props.idTrafico, props.proceso).then(response => {
setArchivos(response.data);
})
},[]);
const getFileById = (idTrafico:number) => {
FileManagerDataService.getFileContentById(idTrafico)
.then((response:any) => {
const blob = new Blob([response.data], { type: 'application/pdf' })
const url = window.URL.createObjectURL(blob)
window.open(url)
})
}
const getFileByProcess = (idTrafico:number, proceso: number) => {
FileManagerDataService.getFileContent(idTrafico, proceso)
.then((response:any) => {
const blob = new Blob([response.data], { type: 'application/pdf' })
const url = window.URL.createObjectURL(blob)
window.open(url)
})
}
return (
<div style={{ paddingLeft: '20px', textAlign:'center' }}>
{
props.hasFile === 0 ?
<IconContext.Provider value={{ color: 'red', size: '25px' }}>
<BsFillXCircleFill />
</IconContext.Provider>
: [14, 15 , 16, 17, 18].includes(props.proceso) ?
<Form.Control
as="select"
id={`Select_${props.idTrafico}_${props.proceso}`}
onChange={(e) => {getFileById(+e.target!.value) }}
value={0}
className="form-select form-select-sm"
>
<option value="0">-SELECCIONE-</option>
{Archvios
? Archvios.map((a) => {
return (
<option key={a.id} value={a.id}>
{a.nombreArchivo}
</option>
)
})
: null}
</Form.Control>
:
<IconContext.Provider value={{ color: 'green', size: '25px' }}>
<BsCheckCircleFill onClick={() => getFileByProcess(props.idTrafico, props.proceso)} style={{cursor:'pointer'}}/>
</IconContext.Provider>
}
</div>
)
}

@ -0,0 +1,43 @@
export interface DTOBuscarEmbarques{
id:number;
aduana: string;
tipoEmbarque: string;
destino: string;
diasEnAduana: number;
nombre: string; //nombre del cliente
noPedimento: string;
tipo: string; //Tipo de operacion
ordenCompra: string;
factura: string; //Facturas concatenadas
proveedor: string;
descripcionMercancia: string;
bultos: number;
cantidadContenedores: number;
pesoNeto: number;
incoterm: string;
fechaETA: Date;
estatus: string;
observaciones: string;
fechaInicioGastosAlmacenaje: Date;
costoDiarioAlmacenaje: number;
costoDiarioConexion: number;
totalPagar: string;
totalPagarConexion: string;
fechaDespacho: Date;
nombrePaqueteria: string;
noGuiaEmbarqueDestino: string;
fechaEntregaDestinoFinal: Date;
facturaCorresponsal: number;
certificadoCalidad: number;
packingList: number;
hojaTecnica: number;
BL: number;
pedimentoInformativo: number;
pedimentoSimplificado: number;
DODA: number;
honorarios: number;
totalHonorarios: number;
gastosTerceros: number;
totalGastosTerceros: number;
comprobantesGastosTerceros: number;
}

@ -1,4 +1,4 @@
export interface IDTOReportesEmbarques{ export interface DTOReportesEmbarquesDespachados{
id:number; id:number;
aduana: string; aduana: string;
tipoEmbarque: string; tipoEmbarque: string;

@ -0,0 +1,61 @@
export interface DTOReportesEmbarquesPorImportar{
id:number;
aduana: string;
tipoEmbarque: string;
destino: string;
diasEnAduana: number;
nombre: string; //nombre del cliente
trafico:string;
referencia: string;
noPedimento: string;
clavePedimento: string;
tipo: string; //Tipo de operacion
ordenCompra: string;
factura: string; //Facturas concatenadas
proveedor: string;
descripcionMercancia: string;
lineaTransportistaInternacional: string;
lineaNaviera: string;
MAWB: string;
HAWB: string;
fechaNotificacion: Date;
bultos: number;
cantidadContenedores: number;
numerosContenedores: number;
pesoBruto: number;
pesoNeto: number;
incoterm: string;
fechaETA: Date;
fechaEntrada: Date;
fechaRevalidacionGuia: Date;
montoUSD: number;
origen: string;
fraccionArancelaria: string;
descripcion: string;
preferenciaArancelaria: string;
estatus: string;
observaciones: string;
fechaInicioGastosAlmacenaje: Date;
costoDiarioAlmacenaje: number;
costoDiarioConexion: number;
totalPagar: string;
totalPagarConexion: string;
fechaPagoPedimento:Date;
fechaInstrucciones: Date;
horaInstrucciones: string;
fechaDespacho: Date;
diasCPPagado: number;
fechaSalidaContenedores: Date;
nombrePaqueteria: string;
noGuiaEmbarqueDestino: string;
fechaEntregaDestinoFinal: Date;
horaEntregaDestinoFinal: string;
facturaCorresponsal: number;
certificadoCalidad: number;
packingList: number;
hojaTecnica: number;
BL: number;
pedimentoInformativo: number;
pedimentoSimplificado: number;
DODA: number;
}

@ -31,5 +31,10 @@ export default interface ICorresponsalPedimento {
seguros : number, seguros : number,
tipoEmbarque : number, tipoEmbarque : number,
totalPagar : number, totalPagar : number,
activo: number activo: number,
lineaNaviera: string;
fNotificacion: string;
fraccionArancelaria: string;
costoDiarioConexion: number;
totalPagarConexion: number;
} }

@ -43,4 +43,6 @@ export default interface ICorresponsalTrafico {
idTipoMercancia: number | null, idTipoMercancia: number | null,
cargoA: number, cargoA: number,
causaRectificacion: string, causaRectificacion: string,
totalHonorariosAA: number;
totalGastosTerceros: number;
} }

@ -0,0 +1,34 @@
import React from "react";
import http from "../common/http-common";
import { DTOReportesEmbarquesPorImportar } from "../../DTO/Reportes/Embarques/DTOReportesEmabarquesPorImportar";
import { DTOReportesEmbarquesDespachados } from "../../DTO/Reportes/Embarques/DTOReportesEmabarquesDespachados";
import { DTOBuscarEmbarques } from "../../DTO/Reportes/Embarques/DTOBuscarEmbarques";
class ReportesEmbarquesService{
getReporteEmbarquesPorImportar(){
return http.get<DTOReportesEmbarquesPorImportar[]>(`ReportesEmbarques/PorImportar`);
}
getReporteEmbarquesDespachados(inicio: string, fin: string){
return http.get<DTOReportesEmbarquesDespachados[]>(`ReportesEmbarques/Despachados?inicio=${inicio}&fin=${fin}`);
}
BuscarEmbarques(filtro: string){
return http.get<DTOBuscarEmbarques[]>(`ReportesEmbarques/BuscarEmbarques?filtro=${filtro}`);
}
GetExcelPorImportar(){
return http.get(`ReportesEmbarques/ExcelEmbarquesPorImportar`, {responseType: 'blob'})
}
GetExcelDespachados(inicio: string, fin: string){
return http.get(`ReportesEmbarques/ExcelEmbarquesDespachados?inicio=${inicio}&fin=${fin}`, {responseType: 'blob'})
}
GetExcelBuscados(busqueda: string){
return http.get(`ReportesEmbarques/ExcelBuscarEmbarques?filtro=${busqueda}`, {responseType: 'blob'})
}
}
export default new ReportesEmbarquesService();

@ -31,5 +31,15 @@ class FileManagerDataService {
return http.get(`/FileManager/GetClientesZip?id=${id}`, {responseType: 'blob'}); return http.get(`/FileManager/GetClientesZip?id=${id}`, {responseType: 'blob'});
} }
getFileContentById(id: number) {
return http.get<ArrayBuffer>(`/FileManager/GetFileById?fileId=${id}`, {responseType: 'arraybuffer'})
.then(function (response) {
return response
})
.catch(function (error) {
console.log(error)
})
}
} }
export default new FileManagerDataService(); export default new FileManagerDataService();

@ -5,7 +5,11 @@ import IFileManager from "../../Interfaces/Utils/IFileManager";
class MFileManagerDataService { class MFileManagerDataService {
Append(formData: any, IDTrafico: number, Proceso: number, Usuario: number) { Append(formData: any, IDTrafico: number, Proceso: number, Usuario: number) {
return http.post<IFileManager[]>(`/Utils/MFileManager/Append?Tags=${IDTrafico}&Proceso=${Proceso}&Usuario=${Usuario}`, formData) return http.post<IFileManager[]>(`/Utils/MFileManager/Append?Tags=${IDTrafico}&Proceso=${Proceso}&Usuario=${Usuario}`, formData,{
headers:{
"Content-Type":'multipart/form-data'
}
})
} }
DeleteFile(id: number) { DeleteFile(id: number) {
return http.delete<IRespuesta>(`/FileManager/DeleteById/${id}`); return http.delete<IRespuesta>(`/FileManager/DeleteById/${id}`);

@ -44,7 +44,9 @@ const CorresponsalesTrafico: ICorresponsalTrafico[] = [{
activo: 0, activo: 0,
idTipoMercancia:0, idTipoMercancia:0,
cargoA: 0, cargoA: 0,
causaRectificacion: '' causaRectificacion: '',
totalHonorariosAA: 0,
totalGastosTerceros: 0
}] }]
const initialState = { CorresponsalesTrafico } const initialState = { CorresponsalesTrafico }

Loading…
Cancel
Save