From 463a70d266f6b1feac3875676454e38cbf9dc529 Mon Sep 17 00:00:00 2001 From: Felix Morales Date: Thu, 6 Jul 2023 10:45:06 -0500 Subject: [PATCH] feature responsividad de interfaz de captura --- .../Corresponsales/TraficoCorresponsales.tsx | 2067 +++++++++-------- 1 file changed, 1088 insertions(+), 979 deletions(-) diff --git a/src/Components/Corresponsales/TraficoCorresponsales.tsx b/src/Components/Corresponsales/TraficoCorresponsales.tsx index 6a16709..4edd583 100644 --- a/src/Components/Corresponsales/TraficoCorresponsales.tsx +++ b/src/Components/Corresponsales/TraficoCorresponsales.tsx @@ -1095,7 +1095,7 @@ export default function TraficoCorresponsales (props:IProps) {
{ props.onClose(true) }} @@ -1112,1069 +1112,1177 @@ export default function TraficoCorresponsales (props:IProps) { - - - { - showModalBox(11) - }} - style={{ cursor: 'pointer' }} - > - - - -  Trafico - - - - - - - - - - - Fecha registro - - - - - - Usuario - - - - - - - - Cliente - - - { - setIDCliente(parseInt(e.target.value)) - }} - value={IDCliente} - className="form-select form-select-sm" - > - - {Clientes - ? Clientes.map((c) => { - return ( - - ) - }) - : null} - - - - { - return (Depto === 'Corresponsalias' || Depto === 'Sistemas') - ? showModalBox(10) - : '' - }} - style={{ cursor: 'pointer' }} - > - - - -  Precuenta - - - - { - setIDTabulador(parseInt(e.target.value)) - }} - value={IDTabulador} - className="form-select form-select-sm" - > - - {Tabuladores - ? Tabuladores.map((t) => { - return ( - - ) - }) - : null} - - - - {ChangePermission ? ( - - ) : ( - '' - )} - - - - - T. Operacion - - - - setTipoOperacion(parseInt(e.target.value)) - } - value={TipoOperacion} - disabled={(Depto !== 'Corresponsalias' && Depto !== 'Sistemas')} - className="form-select form-select-sm" - > - - - - - - setOpEntrada(parseInt(e.target.value))} - value={OpEntrada} - disabled={(Depto !== 'Corresponsalias' && Depto !== 'Sistemas')} - className="form-select form-select-sm" - > - - - - - - - - - setOpSalida(parseInt(e.target.value))} - value={OpSalida} - disabled={(Depto !== 'Corresponsalias' && Depto !== 'Sistemas')} - className="form-select form-select-sm" - > - - - - - - - - - { - return Depto === 'Corresponsalias' - ? showModalBox(1) - : '' - }} - style={{ cursor: 'pointer' }} - > - - - -  Nombre Corresponsal - - - - { - setIDCorresponsal(parseInt(e.target.value)) - }} - className="form-select form-select-sm" - value={IDCorresponsal} - disabled={(Depto !== 'Corresponsalias' && Depto !== 'Sistemas')} - > - - {mCorresponsales - ? mCorresponsales.map((item, index) => { - return ( - - ) - }) - : ''} - - - - - - - -
- - - - - - + + - - - - - - Bultos - - - { - const { value } = values - setBultos(value) - }} - style={ - Depto === 'Corresponsalias' - ? { - fontSize: '15px', - backgroundColor: '#FFFFFF', - border: '1px solid #000000', - width: '70px', - borderRadius: '3px' - } - : { - fontSize: '15px', - backgroundColor: '#FFFFFF', - paddingLeft: '20px', - paddingRight: '5px', - border: '1px solid #000000', - width: '70px', - borderRadius: '3px' - } - } - /> - - - Kilos - - - { - const { value } = values - setKilos(value) - }} - style={ - Depto === 'Corresponsalias' - ? { - fontSize: '15px', - backgroundColor: '#FFFFFF', - border: '1px solid #000000', - width: '100px', - borderRadius: '3px' - } - : { - fontSize: '15px', - backgroundColor: '#FFFFFF', - paddingLeft: '20px', - paddingRight: '5px', - border: '1px solid #000000', - width: '100px', - borderRadius: '3px' - } - } - /> - - - Estatus - - - { - setEstatus(parseInt(e.target.value)) - }} - > - - {DataCatEstatus - ? DataCatEstatus.map((c) => { - return ( - - ) - }) - : null} - - - - - - - Trafico - - - { - setTrafico(e.target.value) - }} - /> - - - Aduana - - - - - - Patente - - - - - + { - openSOIA() + showModalBox(11) }} - style={{ cursor: 'pointer' }} + style={{ cursor: 'pointer', display: 'flex'}} > - Pedimento - - - - { - const { value } = values - setPedimento(value.length === 0 ? 0 : value) - }} - style={ - Depto === 'Corresponsalias' - ? { - fontSize: '18px', - backgroundColor: '#FEFDF5', - border: '2px solid #837F5D', - width: '100px', - textAlign: 'right', - borderRadius: '10px' - } - : { - fontSize: '16px', - backgroundColor: '#FEFDF5', - border: '2px solid #837F5D', - width: '100px', - textAlign: 'right', - borderRadius: '10px' - } - } - /> - - - Clave - - - setClavePedimento(e.target.value)} - /> - - - Fec. Pago - - - setFechaPago(e.target.value)} - /> - - - - 0 && PatenteH.length>0 && PedimentoH.length>0 && FechaPagoH.length>0) ? 'visible' : 'hidden' }}> - - - - Aduana - - - - - - Patente - - - - - - - Pedimento - - - - - - - Clave - - - - - - Fec. Pago - - - - - - - - - Tipo cambio - - - - { - const { value } = values - setTipoCambio(value) - }} - style={ - Depto === 'Corresponsalias' - ? { - fontSize: '18px', - backgroundColor: '#F5FFED', - border: '2px solid #25D05B', - width: '100px', - textAlign: 'right', - borderRadius: '10px' - } - : { - fontSize: '18px', - backgroundColor: '#F5FFED', - border: '2px solid #25D05B', - width: '100px', - textAlign: 'right', - borderRadius: '10px', - paddingRight: '5px', - paddingLeft: '5px' - } - } - /> - - - - Val Aduana MN - - - - { - const { value } = values - setValorAduanaMN(value) - }} - style={ - Depto === 'Corresponsalias' - ? { - fontSize: '18px', - backgroundColor: '#F5FFED', - border: '2px solid #25D05B', - width: '150px', - textAlign: 'right', - borderRadius: '10px' - } - : { - fontSize: '18px', - backgroundColor: '#F5FFED', - border: '2px solid #25D05B', - width: '100px', - textAlign: 'right', - borderRadius: '10px', - paddingRight: '5px', - paddingLeft: '5px' - } - } - /> - - - - Total pagado - - - - { - const { value } = values - setTotalPagado(value) - }} - style={ - Depto === 'Corresponsalias' - ? { - fontSize: '18px', - backgroundColor: '#F5FFED', - border: '2px solid #25D05B', - width: '150px', - textAlign: 'right', - borderRadius: '10px' - } - : { - fontSize: '18px', - backgroundColor: '#F5FFED', - border: '2px solid #25D05B', - width: '150px', - textAlign: 'right', - borderRadius: '10px', - paddingRight: '5px', - paddingLeft: '5px' - } - } - /> - - - - Cant fracciones + + + +  Trafico - + + - setCantidadFracciones((v) => - e.target.validity.valid - ? parseInt(e.target.value) - : v - ) - } + id="FolioTrafico" + value={FolioTrafico} + disabled={true} /> - - - Buque - - - setBuque(e.target.value)} - /> - - - - - - { - showModalBox(2) - }} - style={{ cursor: 'pointer' }} - > - - - -  {LblFacturas} - - - - {}} - className="form-select form-select-sm" - disabled={Depto !== 'Corresponsalias'} - > - {mCFacturas - ? mCFacturas.map((item, index) => { - return item.idTrafico === IDTrafico ? ( - - ) : ( - - ) - }) - : ''} - - - - - Val Fact Dls - - - - { - const { value } = values - setValorFacturasDls(value) - }} - style={ - Depto === 'Corresponsalias' - ? { - fontSize: '18px', - backgroundColor: '#F5FFED', - border: '2px solid #25D05B', - width: '150px', - textAlign: 'right', - borderRadius: '10px' - } - : { - fontSize: '18px', - backgroundColor: '#F5FFED', - border: '2px solid #25D05B', - width: '150px', - textAlign: 'right', - borderRadius: '10px', - paddingRight: '5px', - paddingLeft: '5px' - } - } - /> - - - - - Descripcion de la mercancia: + + + + + Fecha registro - + - setDescripcionMercancia(e.target.value) - } + disabled={true} + value={FechaRegistro} /> - - Observaciones: + + Usuario - + setObservaciones(e.target.value)} + disabled={true} /> - - - - Fecha de desaduanamiento - - - - - setFechaDesaduanamiento(date) - } - disabled={Depto === 'Contabilidad'} - showTimeSelect - timeClassName={handleColor} - dateFormat="MM/dd/yyyy HH:mm:ss" - placeholderText="MM/DD/AAAA HH:mm:ss" - isClearable - customInput={ - - } - />{' '} - - - - Semaf. fiscal - + + + + + + + Cliente - + { + setIDCliente(parseInt(e.target.value)) + }} + value={IDCliente} className="form-select form-select-sm" - value={SemafoFiscal} - disabled={ - Depto !== 'Corresponsalias' ? true : false - } - onChange={(e) => - setSemaforoFiscal(parseInt(e.target.value)) - } > - - + + {Clientes + ? Clientes.map((c) => { + return ( + + ) + }) + : null} - + + + + + { - showModalBox(9) + return (Depto === 'Corresponsalias' || Depto === 'Sistemas') + ? showModalBox(10) + : '' }} style={{ cursor: 'pointer' }} > - + -  {LblAnticipos} +  Precuenta - + { + setIDTabulador(parseInt(e.target.value)) + }} + value={IDTabulador} className="form-select form-select-sm" - value={Anticipo} - disabled={Depto !== 'Corresponsalias'} - onChange={(e) => - setAnticipo(parseInt(e.target.value)) - } > - {mCAnticipos - ? mCAnticipos.map((item, index) => { - return item.idTrafico === IDTrafico ? ( - + {Tabuladores + ? Tabuladores.map((t) => { + return ( + - ) : ( - ) }) - : ''} + : null} - - - No. Cuenta + + + + + + + T. Operacion - + + setTipoOperacion(parseInt(e.target.value)) } - onChange={(e) => { - setNoCuenta(e.target.value) - }} - /> + value={TipoOperacion} + disabled={(Depto !== 'Corresponsalias' && Depto !== 'Sistemas')} + className="form-select form-select-sm" + > + + + - - Fecha Cuenta + + setOpEntrada(parseInt(e.target.value))} + value={OpEntrada} + disabled={(Depto !== 'Corresponsalias' && Depto !== 'Sistemas')} + className="form-select form-select-sm" + > + + + + + + - + setFechaCuenta(e.target.value)} - /> + as="select" + id="CmbOpSalida" + onChange={(e) => setOpSalida(parseInt(e.target.value))} + value={OpSalida} + disabled={(Depto !== 'Corresponsalias' && Depto !== 'Sistemas')} + className="form-select form-select-sm" + > + + + + + + - + + + + + { - showModalBox(4) + return Depto === 'Corresponsalias' + ? showModalBox(1) + : '' }} style={{ cursor: 'pointer' }} > - + - {LblFacturasTerceros} +  Nombre Corresponsal - + { + setIDCorresponsal(parseInt(e.target.value)) + }} className="form-select form-select-sm" - value={Anticipo} - disabled={Depto !== 'Corresponsalias'} - onChange={(e) => - setPagosaTerceros(parseInt(e.target.value)) - } + value={IDCorresponsal} + disabled={(Depto !== 'Corresponsalias' && Depto !== 'Sistemas')} > - {mCFTerceros - ? mCFTerceros.map((item, index) => { - return item.idTrafico === IDTrafico ? ( - + {mCorresponsales + ? mCorresponsales.map((item, index) => { + return ( + - ) : ( - ) }) : ''} - - - ZIP Archivo Pedimento + + + + + {ChangePermission ? ( + + ) : ( + '' + )} + + + + + + +
+ + + + + + + + + + + + + - - + + + + Bultos + + + { + const { value } = values + setBultos(value) + }} + style={ + Depto === 'Corresponsalias' + ? { + fontSize: '15px', + backgroundColor: '#FFFFFF', + border: '1px solid #000000', + width: '70px', + borderRadius: '3px' + } + : { + fontSize: '15px', + backgroundColor: '#FFFFFF', + paddingLeft: '20px', + paddingRight: '5px', + border: '1px solid #000000', + width: '70px', + borderRadius: '3px' + } + } + /> + + + Kilos + + + { + const { value } = values + setKilos(value) + }} + style={ + Depto === 'Corresponsalias' + ? { + fontSize: '15px', + backgroundColor: '#FFFFFF', + border: '1px solid #000000', + width: '100%', + borderRadius: '3px' + } + : { + fontSize: '15px', + backgroundColor: '#FFFFFF', + paddingLeft: '20px', + paddingRight: '5px', + border: '1px solid #000000', + width: '100%', + borderRadius: '3px' + } + } + /> + + + + + + + Estatus + + + { + setEstatus(parseInt(e.target.value)) + }} + > + + {DataCatEstatus + ? DataCatEstatus.map((c) => { + return ( + + ) + }) + : null} + + + + + + + + + + Trafico + + + { + setTrafico(e.target.value) + }} + /> + + + Aduana + + + + + + Patente + + + + + + + + + + { + openSOIA() + }} + style={{ cursor: 'pointer' }} + > + Pedimento + + + + { + const { value } = values + setPedimento(value.length === 0 ? 0 : value) + }} + style={ + Depto === 'Corresponsalias' + ? { + fontSize: '18px', + backgroundColor: '#FEFDF5', + border: '2px solid #837F5D', + width: '100%', + textAlign: 'right', + borderRadius: '10px' + } + : { + fontSize: '16px', + backgroundColor: '#FEFDF5', + border: '2px solid #837F5D', + width: '100%', + textAlign: 'right', + borderRadius: '10px' + } + } + /> + + + Clave + + + setClavePedimento(e.target.value)} + /> + + + Fec. Pago + + + setFechaPago(e.target.value)} + /> + + + + + + + + 0 && PatenteH.length>0 && PedimentoH.length>0 && FechaPagoH.length>0) ? 'visible' : 'hidden' }}> + + + + Aduana + + + + + + Patente + + + + + + + + + + + Pedimento + + + + + + + Clave + + + + + + Fec. Pago + + + + + + + + + + + + + Tipo cambio + + + + { + const { value } = values + setTipoCambio(value) + }} + style={ + Depto === 'Corresponsalias' + ? { + fontSize: '18px', + backgroundColor: '#F5FFED', + border: '2px solid #25D05B', + width: '100%', + textAlign: 'right', + borderRadius: '10px' + } + : { + fontSize: '18px', + backgroundColor: '#F5FFED', + border: '2px solid #25D05B', + width: '100%', + textAlign: 'right', + borderRadius: '10px', + paddingRight: '5px', + paddingLeft: '5px' + } + } + /> + + + + Val Aduana MN + + + + { + const { value } = values + setValorAduanaMN(value) + }} + style={ + Depto === 'Corresponsalias' + ? { + fontSize: '18px', + backgroundColor: '#F5FFED', + border: '2px solid #25D05B', + width: '100%', + textAlign: 'right', + borderRadius: '10px' + } + : { + fontSize: '18px', + backgroundColor: '#F5FFED', + border: '2px solid #25D05B', + width: '100%', + textAlign: 'right', + borderRadius: '10px', + paddingRight: '5px', + paddingLeft: '5px' + } + } + /> + + + + + + + + Total pagado + + + + { + const { value } = values + setTotalPagado(value) + }} + style={ + Depto === 'Corresponsalias' + ? { + fontSize: '18px', + backgroundColor: '#F5FFED', + border: '2px solid #25D05B', + width: '100%', + textAlign: 'right', + borderRadius: '10px' + } + : { + fontSize: '18px', + backgroundColor: '#F5FFED', + border: '2px solid #25D05B', + width: '100%', + textAlign: 'right', + borderRadius: '10px', + paddingRight: '5px', + paddingLeft: '5px' + } + } + /> + + + + Cant fracciones + + + + + + setCantidadFracciones((v) => + e.target.validity.valid + ? parseInt(e.target.value) + : v + ) + } + /> + + + + + + + + + + Buque + + + setBuque(e.target.value)} + /> + + + + + - - ZIP Archivo Corresponsal Facturas - + + + { + showModalBox(2) + }} + style={{ cursor: 'pointer' }} + > + + + +  {LblFacturas} + + + + {}} + className="form-select form-select-sm" + disabled={Depto !== 'Corresponsalias'} + > + {mCFacturas + ? mCFacturas.map((item, index) => { + return item.idTrafico === IDTrafico ? ( + + ) : ( + + ) + }) + : ''} + + + + + Val Fact Dls + + + + { + const { value } = values + setValorFacturasDls(value) + }} + readOnly={true} + style={ + Depto === 'Corresponsalias' + ? { + fontSize: '18px', + backgroundColor: '#F5FFED', + border: '2px solid #25D05B', + width: '100%', + textAlign: 'right', + borderRadius: '10px' + } + : { + fontSize: '18px', + backgroundColor: '#F5FFED', + border: '2px solid #25D05B', + width: '100%', + textAlign: 'right', + borderRadius: '10px', + paddingRight: '5px', + paddingLeft: '5px' + } + } + /> + + - - + + + + + + + + + Descripcion de la mercancia: + + + + setDescripcionMercancia(e.target.value) + } + /> + + + + + + + Observaciones: + + + setObservaciones(e.target.value)} + /> + + + + + + + + + + Fecha de desaduanamiento + + + + + setFechaDesaduanamiento(date) + } + disabled={Depto === 'Contabilidad'} + showTimeSelect + timeClassName={handleColor} + dateFormat="MM/dd/yyyy HH:mm:ss" + placeholderText="MM/DD/AAAA HH:mm:ss" + isClearable + customInput={ + + } + />{' '} + + + + + + + + Semaf. fiscal + + + + + setSemaforoFiscal(parseInt(e.target.value)) + } + > + + + + + + { + showModalBox(9) + }} + style={{ cursor: 'pointer' }} + > + + + +  {LblAnticipos} + + + + + setAnticipo(parseInt(e.target.value)) + } + > + {mCAnticipos + ? mCAnticipos.map((item, index) => { + return item.idTrafico === IDTrafico ? ( + + ) : ( + + ) + }) + : ''} + + + + + + + + + + + + No. Cuenta + + + { + setNoCuenta(e.target.value) + }} + /> + + + + + + + Fecha Cuenta + + + setFechaCuenta(e.target.value)} + /> + + + { + showModalBox(4) + }} + style={{ cursor: 'pointer' }} + > + + + + {LblFacturasTerceros} + + + + + setPagosaTerceros(parseInt(e.target.value)) + } + > + {mCFTerceros + ? mCFTerceros.map((item, index) => { + return item.idTrafico === IDTrafico ? ( + + ) : ( + + ) + }) + : ''} + + + + + + + + + + ZIP Archivo Pedimento + + + + + + + + + + + ZIP Archivo Corresponsal Facturas + + + + + + + @@ -2294,7 +2403,7 @@ export default function TraficoCorresponsales (props:IProps) { )} - + Trafico Corresponsales: Rechazo(s) @@ -2302,7 +2411,7 @@ export default function TraficoCorresponsales (props:IProps) { Contabilidad: Rechazo(s) - +