From 53e976a382efc97bc9b4d71724fce947d584ca8a Mon Sep 17 00:00:00 2001 From: alfonso Date: Sat, 8 Jul 2023 15:52:13 -0500 Subject: [PATCH] hide link to Consultas Amazon --- .../ConsultaTrafico/RptConsultaTrafico.tsx | 611 ++++++++++++++++++ .../RptConsultaTraficoDetalle.tsx | 567 ++++++++++++++++ src/Components/Dashboard/DashboardTrafico.tsx | 217 ++++--- src/index.tsx | 5 + 4 files changed, 1298 insertions(+), 102 deletions(-) create mode 100644 src/Components/Clientes/Amazon/Reportes/ConsultaTrafico/RptConsultaTrafico.tsx create mode 100644 src/Components/Clientes/Amazon/Reportes/ConsultaTrafico/RptConsultaTraficoDetalle.tsx diff --git a/src/Components/Clientes/Amazon/Reportes/ConsultaTrafico/RptConsultaTrafico.tsx b/src/Components/Clientes/Amazon/Reportes/ConsultaTrafico/RptConsultaTrafico.tsx new file mode 100644 index 0000000..b5dbb8a --- /dev/null +++ b/src/Components/Clientes/Amazon/Reportes/ConsultaTrafico/RptConsultaTrafico.tsx @@ -0,0 +1,611 @@ +import { useEffect, useState } from 'react' +import { + Alert, + Button, + Card, + Col, + Form, + Modal, + Row, + Table +} from 'react-bootstrap' +import { IconContext } from 'react-icons' +import { BsChevronDown, BsChevronRight, BsFilePdfFill } from 'react-icons/bs' +import { FaAmazon } from 'react-icons/fa' +import I2096Headers from '../../Interfaces/I2096Header' +import DSAmazon from '../../Services/Amazon.Services' +import { MsgInformativo } from '../../../../Utils/Toast/msgInformativo' +import { RootState } from '../../../../../store/store' +import { + initializeInvoice, + populateInvoices, + updateInvoice +} from '../../../../../store/features/Clientes/2096/AmazonInvoices' + +// Redux +import { useDispatch, useSelector } from 'react-redux' +import DTO2096LinkInvoice2Reference from '../../DTO/DTO2096LinkInvoice2Reference' +import { AiFillFileExcel } from 'react-icons/ai' +import RptConsultaTraficoDetalle from './RptConsultaTraficoDetalle' +import loadingImg from '../../../../../images/ajaxloader.gif' +import * as XLSX from 'xlsx' + +export interface IRptConsultaTraficoProps {} + +export default function RptConsultaTrafico(props: IRptConsultaTraficoProps) { + const dispatch = useDispatch() + const mInvoices = useSelector( + (state: RootState) => state.AmazonInvoices.Invoice + ) + const [header, setHeader] = useState('') + const [Referencia, setReferencia] = useState('') + const [show, setShowMsg] = useState(false) + const [ShowModal, setShowModal] = useState(false) + const [ShowModalUnlink, setShowModalUnlink] = useState(false) + const [WaitingDialog, setWaitingDialog] = useState(false) + const [WaitingMessage, setWaitingMessage] = useState('') + const [msg, setMsg] = useState('') + const [Invoices, setInvoices] = useState([]) + const msgColor = 'primary' + + const loadReport = () => { + DSAmazon.AmazonLinkInvoice2TrafficGet() + .then((response) => { + dispatch(initializeInvoice([])) + dispatch(populateInvoices(response.data)) + }) + .catch((e: Error) => { + alert('Ocurrio un error' + e.message.toString()) + }) + } + + useEffect(() => { + loadReport() + }, []) + +/* const check4Updates = (IDInvoice: number) => { + DSAmazon.SETInvoiceDetailRevalidateParts(IDInvoice) + .then((response) => { + DSAmazon.AmazonInvoiceGET(IDInvoice) + .then((response) => { + dispatch(updateInvoice(response.data[0])) + let Invoice: I2096Headers[] = response.data.filter( + (item) => item.id === IDInvoice + ) + const Obj = { ...Invoice[0] } + Obj.max = !Obj.max + dispatch(updateInvoice(Obj)) + }) + .catch((e: Error) => { + setHeader('Error') + setMsg('Ocurrio un error') + return + }) + }) + .catch((e: Error) => { + setHeader('Error') + setMsg('Ocurrio un error') + return + }) + } */ + + const changeToggle = (row: I2096Headers) => { + let Invoice: I2096Headers[] = mInvoices.filter((item) => item.id === row.id) + const Obj = { ...Invoice[0] } + Obj.max = !Obj.max + dispatch(updateInvoice(Obj)) + // if (Obj.max) check4Updates(row.id) + } + + const updateDataGrid = (IDInvoice: number) => { + //toggleInvoice(IDInvoice) + let Invoice: I2096Headers[] = mInvoices.filter( + (item) => item.id === IDInvoice + ) + const Obj = { ...Invoice[0] } + Obj.max = !Obj.max + dispatch(updateInvoice(Obj)) + // if (Obj.max) check4Updates(IDInvoice) + } + + const toggleInvoice = (id: number) => { + if (!Invoices.includes(id)) { + Invoices.push(id) + } else { + setInvoices( + Invoices.filter(function (el) { + return el != id + }) + ) + } + } + + function getReceiver(Cadena: string, char1: string[1], char2: string[1]) { + return Cadena.slice(Cadena.indexOf(char1) + 1, Cadena.lastIndexOf(char2)) + } + + return ( +
+ + + + + + + + {' '} + TRAFICO : Consulta Amazon + + + + + + + + + + + + + +
+ + + + + + {/* + + + */} + + + + + + + + + + + + + + + + + + {mInvoices + ? mInvoices.map((MasterData) => { + return ( + <> + + + + {/* + + + */} + + + + + + + + + + + + + + + + {MasterData.max ? ( + + + + ) : null} + + ) + }) + : null} + +
id[...]PDFFacturasPartidasReferenciaCommercial Invoice DateInvoice NumberReceiverIncotermsHAWBQty Unit of measureTot QtyWeight unit of measureTot weightTot Charge or allowanceTot currency ISO codeTot Monetary amountTotal de partidas
{ + changeToggle(MasterData) + }} + > + {MasterData.max === true ? ( + + + + ) : ( + + + + )} + {MasterData.id} + toggleInvoice(MasterData.id)} + /> + +
{ + downloadPDF( + MasterData.id, + MasterData.invoiceNumber + ) + }} + > + + + +
+ 		+
{ + downloadExcelInvoices(MasterData.referencia) + }} + > + + + +
+ 		+
{ + downloadExcelPartidas(MasterData.referencia) + }} + > + + + +
+ 		+ {MasterData.referencia} + + {MasterData.commercialInvoiceDate} + + {MasterData.invoiceNumber} + + {mInvoices + .filter((value) => value.id === MasterData.id) + .map((row) => { + return getReceiver( + row.detail[0].amazonShipmentReferenceId, + '_', + '_' + ) + })} + + {MasterData.incoterms} + + {MasterData.hawb} + + {MasterData.totalInvoiceQuantityUnitOfMeasure} + + {MasterData.totalInvoiceQuantity} + + {MasterData.totalInvoiceWeightUnitOfMeasure} + + {MasterData.totalInvoiceWeight} + + {MasterData.totalInvoiceValueChargeOrAllowance} + + {MasterData.totalInvoiceValueCurrencyISOCode} + + {MasterData.totalInvoiceValueMonetaryAmount} + + {mInvoices + .filter((value) => value.id === MasterData.id) + .map((row) => { + return row.detail.length + })} +
+ + + + + + + + + + + + + + + + + + + +{/* + + */} + + + + {mInvoices.map((MD) => { + return ( + <> + {MD.detail + .filter( + (detail) => + MasterData.id === + detail.idHeader + ) //.sort((a,b) => a.itemId.localeCompare(b.itemId)) + .sort((a, b) => + a.partida > b.partida ? 1 : -1 + ) + .map((detail) => { + return ( + + ) + })} + + ) + })} + +
+ Item Id + + Item Description + + Fraccion GEMCO + + Descripcion GEMCO + + Country of Origin + + ProductGroup + + Brand + + Model + + Unit Measure + + Qty Shipped + + Unit of measure + + Unit Net Weight + + Unit Cost + + Total value + + Consulta +
+
+
+ + + + { + setWaitingDialog(false) + }} + backdrop="static" + keyboard={false} + size="sm" + dialogClassName={'modal-50w'} + centered + > + + + + + proccessing + Generando {WaitingMessage}... + + + + + { + setShowMsg(false) + }} + /> +
+ ) +} diff --git a/src/Components/Clientes/Amazon/Reportes/ConsultaTrafico/RptConsultaTraficoDetalle.tsx b/src/Components/Clientes/Amazon/Reportes/ConsultaTrafico/RptConsultaTraficoDetalle.tsx new file mode 100644 index 0000000..07bc25c --- /dev/null +++ b/src/Components/Clientes/Amazon/Reportes/ConsultaTrafico/RptConsultaTraficoDetalle.tsx @@ -0,0 +1,567 @@ +import * as React from 'react' +import { useEffect, useState } from 'react' +import { + Alert, + Button, + Col, + Form, + FormCheck, + Modal, + OverlayTrigger, + Popover, + Row, + Tooltip +} from 'react-bootstrap' +import { IconContext } from 'react-icons' +import { MsgInformativo } from '../../../../Utils/Toast/msgInformativo' +import I2096Detail from '../../Interfaces/I2096Detail' +import DSAmazon from '../../Services/Amazon.Services' +// Redux +import { RootState } from '../../../../../store/store' +import { useDispatch, useSelector } from 'react-redux' +import * as CurrencyFormat from 'react-currency-format' +import { AiOutlineFileSearch, AiTwotoneEdit } from 'react-icons/ai' +import { BsFillChatRightTextFill, BsFillPencilFill } from 'react-icons/bs' +import DTO2096SightLine from '../../DTO/DTO2096SightLine' +import { updateInvoice } from '../../../../../store/features/Clientes/2096/AmazonInvoices' +import DTO2096TraficoFieldsUpdate from '../../DTO/DTO2096TraficoFieldsUpdate' +import I2096Headers from '../../Interfaces/I2096Header' + +export interface IRptConsultaTraficoDetalleProps { + IDMaster: number, + detail: I2096Detail, + Habilitado: boolean, + onDataChange: (IDMaster: number) => void +} + +export default function RptConsultaTraficoDetalle (props: IRptConsultaTraficoDetalleProps) { + const dispatch = useDispatch() + const mInvoices = useSelector( + (state: RootState) => state.AmazonInvoices.Invoice + ) + const [ShowModal, setShowModal] = useState(false) + const [EstatusSwith, setEstatusSwitch] = useState(props.detail.sightLine) + const [UserChanged, setUserChanged] = useState(false) + const [header, setHeader] = useState('') + const [show, setShowMsg] = useState(false) + //const [Show, setShow] = useState(false) + const [msg, setMsg] = useState('') + const [CumplimientoNormativo, setCumplimientoNormativo] = useState( + props.detail.cumplimientoNormativo ? props.detail.cumplimientoNormativo : '' + ) + const [Comentarios, setComentarios] = useState( + props.detail.comentariosSightLine + ? props.detail.comentariosSightLine + : '' + ) + const [ShowModalEdit, setShowModalEdit] = useState(false) + const [UnitMeasure, setUnitMeasure] = useState('') + const [UnitOfMeasure, setUnitOfMeasure] = useState('') + const [UnitCost, setUnitCost] = useState('') + const [Quantity, setQuantity] = useState(0) + const [ItemId, setItemId] = useState('') + const [ItemDescription, setItemDescription] = useState('') + const [FraccionGEMCO, setFraccionGEMCO] = useState('') + const [DescripcionGEMCO, setDescripcionGEMCO] = useState('') + const msgColor = 'primary' + const openLink = (item: string) => { + window.open('https://www.amazon.com/dp/' + item) + } + const UpdateInvoiceDetail = ( + Invoice: I2096Headers, + Detail: I2096Detail[] + ) => { + const updatedInvoice: I2096Headers = { + id: props.IDMaster, + referencia: Invoice.referencia, + commercialInvoiceDate: Invoice.commercialInvoiceDate, + invoiceNumber: Invoice.invoiceNumber, + name: Invoice.name, + trailerNumber: Invoice.trailerNumber, + trailerId: Invoice.trailerId, + porOfLoading: Invoice.porOfLoading, + portOfEntry: Invoice.portOfEntry, + paymentsTerms: Invoice.paymentsTerms, + incoterms: Invoice.incoterms, + hawb: Invoice.hawb, + totalInvoiceQuantityUnitOfMeasure: + Invoice.totalInvoiceQuantityUnitOfMeasure, + totalInvoiceQuantity: Invoice.totalInvoiceQuantity, + totalInvoiceWeightUnitOfMeasure: Invoice.totalInvoiceWeightUnitOfMeasure, + totalInvoiceWeight: Invoice.totalInvoiceWeight, + totalInvoiceValueChargeOrAllowance: + Invoice.totalInvoiceValueChargeOrAllowance, + totalInvoiceValueCurrencyISOCode: + Invoice.totalInvoiceValueCurrencyISOCode, + totalInvoiceValueMonetaryAmount: Invoice.totalInvoiceValueMonetaryAmount, + footNote: Invoice.footNote, + archivo: Invoice.archivo, + fCreacion: Invoice.fCreacion, + clasificador: Invoice.clasificador, + noVuelta: Invoice.noVuelta, + estatus: Invoice.estatus, + max: true, + urgente: Invoice.urgente, + detail: Detail + } + dispatch(updateInvoice(updatedInvoice)) + } + + const editInvoice = (id: number) => { + const Invoice = mInvoices + .filter((el) => el.id === props.IDMaster) + .map((el) => { + return el + }) + const newDetails = Invoice[0].detail.map((el) => { + if (el.id === id) { + return { + ...el, + itemQuantityUnitOfMeasure: UnitMeasure, + weightValue: UnitOfMeasure, + actualUnitCostMonetaryAmount: UnitCost, + totalUnitValueMonetaryAmount: ( + el.quantity * parseFloat(UnitCost) + ).toString() + } + } + return el + }) + UpdateInvoiceDetail(Invoice[0], newDetails) + } + + const ToggleSightLine = (id: number) => { + const data: DTO2096SightLine = { + id: id, + sightLine: EstatusSwith, + comentariosSightLine: Comentarios + } + DSAmazon.SightLineSET(data) + .then((response) => { + setShowModal(false) + props.onDataChange(props.IDMaster) + }) + .catch((e: Error) => { + setHeader('Error') + setMsg('Ocurrio un error, no se guardo la informacion en BD') + setShowMsg(true) + return + }) + } + + const saveFields = () => { + const data: DTO2096TraficoFieldsUpdate = { + id: props.detail.id, + UnitMeasure: UnitMeasure, + UnitOfMeasure: parseFloat(UnitOfMeasure), + UnitCost: parseFloat(UnitCost) + } + DSAmazon.TrafficFieldsUpdate(data) + .then((response) => { + setUnitMeasure(response.data.itemQuantityUnitOfMeasure) + setUnitOfMeasure(response.data.weightValue) + setUnitCost(response.data.actualUnitCostMonetaryAmount) + editInvoice(props.detail.id) + setHeader('Informativo') + setMsg('La informacion se guardo exitosamente') + setShowMsg(true) + return + }) + .catch((e: Error) => { + setHeader('Error') + setMsg('Ocurrio un error') + setShowMsg(true) + return + }) + } + + useEffect(() => { + if (UserChanged) setShowModal(true) + }, [EstatusSwith, UserChanged]) + + return ( + <> + + + {props.detail.partida} + + openLink(props.detail.itemId)} + > + {props.detail.itemId} + + + {props.detail.itemDescription} + + + + + + {props.detail.descripcionGEMCO} + + + {props.detail.countryOfOrigin} + + + {props.detail.productGroup} + + + {props.detail.brand} + + + {props.detail.model} + + + {props.detail.itemQuantityUnitOfMeasure} + + + {props.detail.quantity} + + + {props.detail.weightValue} + + + {props.detail.netWeightUnitOfMeasure} + + + + {props.detail.actualUnitCostMonetaryAmount} + + + {props.detail.totalUnitValueMonetaryAmount} + + + { + setEstatusSwitch(!EstatusSwith) + setUserChanged(true) + setShowModal(!EstatusSwith) + }} + /> + +{/* + {CumplimientoNormativo} + } + > + {({ ref, ...triggerHandler }) => ( + + )} + + + + {Comentarios}} + > + {({ ref, ...triggerHandler }) => ( + + )} + + + + */} + + { + setShowModalEdit(false) + }} + size={'sm'} + dialogClassName={'modal-50w'} + > + +
+ + + + No Parte: {ItemId}{' '} +
+ + Fraccion GEMCO: + {' '} + {FraccionGEMCO}
+ + Descripcion GEMCO: + {' '} + {DescripcionGEMCO} + + + + + Unit Measure: + + setUnitMeasure(e.target.value)} + /> + + + + Unit of Measure: + + { + const { value } = values + setUnitOfMeasure(value) + }} + value={UnitOfMeasure} + displayType={'input'} + style={{ + fontSize: '18px', + backgroundColor: '#F1EEF9', + border: '2px solid #5923F6', + color: '#5923F6', + width: '120px', + textAlign: 'right', + borderRadius: '10px' + }} + /> + + + + Unit Cost: + + { + const { value } = values + setUnitCost(value) + }} + value={UnitCost} + displayType={'input'} + style={{ + fontSize: '18px', + backgroundColor: '#F1EEF9', + border: '2px solid #5923F6', + color: '#5923F6', + width: '120px', + textAlign: 'right', + borderRadius: '10px' + }} + /> + + + + + + +
+ + + { + setShowModal(false) + }} + size={'sm'} + dialogClassName={'modal-50w'} + > + +
+ + Comentarios + + {' '} + setComentarios(e.target.value)} + /> + +   + + + + + + + + + +
+ + + { + setShowMsg(false) + }} + /> + + ) +} diff --git a/src/Components/Dashboard/DashboardTrafico.tsx b/src/Components/Dashboard/DashboardTrafico.tsx index cb66b8a..62bfcb1 100644 --- a/src/Components/Dashboard/DashboardTrafico.tsx +++ b/src/Components/Dashboard/DashboardTrafico.tsx @@ -7,107 +7,120 @@ import { Link } from 'react-router-dom' import '../../css/generic01.css' import DashboardDataService from '../../Services/Dashboard/Dashboard.Clasificacion.Services' -export interface IDashboardTraficoProps { -} +export interface IDashboardTraficoProps {} + +export default function DashboardTrafico(props: IDashboardTraficoProps) { + const [Terminadas, setTerminadas] = useState(0) + const [Pendientes, setPendientes] = useState(0) + const [Total, setTotal] = useState(0) + + useEffect(() => { + DashboardDataService.DashboardInvoices(3) + .then((response) => { + setPendientes(response.data.total) + }) + .catch((e: Error) => { + return + }) + DashboardDataService.DashboardInvoices(4) + .then((response) => { + setTerminadas(response.data.total) + }) + .catch((e: Error) => { + return + }) + }, []) -export default function DashboardTrafico (props: IDashboardTraficoProps) { - const [Terminadas, setTerminadas] = useState(0) - const [Pendientes, setPendientes] = useState(0) - const [Total, setTotal] = useState(0) - - useEffect(() => { - DashboardDataService.DashboardInvoices(3) - .then((response) => { - setPendientes(response.data.total) - }) - .catch((e: Error) => { - return - }) - DashboardDataService.DashboardInvoices(4) - .then((response) => { - setTerminadas(response.data.total) - }) - .catch((e: Error) => { - return - }) - }, []) - - useEffect(() => { - setTotal(Pendientes + Terminadas) - }, [Pendientes, Terminadas]) - - return ( - <> - - - Trafico - - - Facturas {' '} - - - - - - - - Terminadas - - - - - Pendientes - - - - - - - - - - - - - - {Terminadas} - - - {Pendientes} - - - - { + setTotal(Pendientes + Terminadas) + }, [Pendientes, Terminadas]) + + return ( + <> + + + + Trafico + + + + Facturas{' '} + + + + + + + + Terminadas + + + + + Pendientes + + + + + + + + + + + + + + {Terminadas} + + + {Pendientes} + + + + {/* + + Consultas Amazon + + */} + + + {/* - - - - ) - } - \ No newline at end of file + > */} + + + + ) +} diff --git a/src/index.tsx b/src/index.tsx index f980790..cf97fcb 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -60,6 +60,7 @@ import RptPedimentosCruces04 from './Components/Reportes/Direccion/RptPedimentos import RptPedimentosCruces05 from './Components/Reportes/Direccion/RptPedimentosCruces05' import RptPedimentosCruces06 from './Components/Reportes/Direccion/RptPedimentosCruces06' import RptSegregacion from './Components/Clientes/Amazon/Reportes/Segregacion/RptSegregacion' +import RptConsultaTrafico from './Components/Clientes/Amazon/Reportes/ConsultaTrafico/RptConsultaTrafico' require(`./css/${process.env.REACT_APP_ENVIRONMENT}-home.css`) @@ -177,6 +178,10 @@ ReactDOM.render( path="/RptAmazonLinkInvoice2Traffic" element={} /> + } + /> }