parent
4c90e28c7b
commit
5752dfb4b5
@ -1,540 +0,0 @@ |
|||||||
import { useEffect, useState } from 'react' |
|
||||||
import { Alert, Button, Card, Col, FormCheck, Modal, Row, Table } from 'react-bootstrap' |
|
||||||
import { IconContext } from 'react-icons' |
|
||||||
import { BsChevronDown, BsChevronRight } from 'react-icons/bs' |
|
||||||
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 RtpAmazonPendingTraficInvoiceDetail from './RptAmazonPendingTraficInvoiceDetail' |
|
||||||
|
|
||||||
export interface IRptAmazonPendingTraficInvoiceProps {} |
|
||||||
|
|
||||||
export function RptAmazonPendingTraficInvoice( |
|
||||||
props: IRptAmazonPendingTraficInvoiceProps |
|
||||||
) { const dispatch = useDispatch() |
|
||||||
const mInvoices = useSelector( |
|
||||||
(state: RootState) => state.AmazonInvoices.Invoice |
|
||||||
) |
|
||||||
const [header, setHeader] = useState('') |
|
||||||
const [IDFactura, setIDFactura] = useState(0) |
|
||||||
const [show, setShowMsg] = useState(false) |
|
||||||
const [ShowModal, setShowModal] = useState(false) |
|
||||||
const [msg, setMsg] = useState('') |
|
||||||
const msgColor = 'primary' |
|
||||||
|
|
||||||
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 loadReport = () => { |
|
||||||
DSAmazon.AmazonPendingTraficInvoice$GET() |
|
||||||
.then((response) => { |
|
||||||
dispatch(initializeInvoice([])) |
|
||||||
dispatch(populateInvoices(response.data)) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
alert('Ocurrio un error' + e.message.toString()) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const downloadExcel = (id: number) => { |
|
||||||
DSAmazon.TerminaFactura(id) |
|
||||||
.then((response) => {}) |
|
||||||
.catch((e: Error) => {}) |
|
||||||
DSAmazon.GetNoPartesAmazon2SIR(id) |
|
||||||
.then((response: any) => { |
|
||||||
if (response.status === 200) { |
|
||||||
const url = window.URL.createObjectURL(new Blob([response.data])) |
|
||||||
const link = document.createElement('a') |
|
||||||
link.href = url |
|
||||||
link.setAttribute('download', 'Plantilla de partes.xlsx') |
|
||||||
document.body.appendChild(link) |
|
||||||
link.click() |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error') |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const downloadExceptionsFile = (id: number) => { |
|
||||||
DSAmazon.TerminaFactura(id) |
|
||||||
.then((response) => {}) |
|
||||||
.catch((e: Error) => {}) |
|
||||||
DSAmazon.Get$ExceptionsFile$Amazon(id) |
|
||||||
.then((response: any) => { |
|
||||||
if (response.status === 200) { |
|
||||||
const url = window.URL.createObjectURL(new Blob([response.data])) |
|
||||||
const link = document.createElement('a') |
|
||||||
link.href = url |
|
||||||
link.setAttribute( |
|
||||||
'download', |
|
||||||
'Formato de consultas (Exceptions Handling 2021).xlsx' |
|
||||||
) |
|
||||||
document.body.appendChild(link) |
|
||||||
link.click() |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error') |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
loadReport() |
|
||||||
}, []) |
|
||||||
|
|
||||||
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)) |
|
||||||
} |
|
||||||
|
|
||||||
const openLink = (item: string) => { |
|
||||||
window.open('https://www.amazon.com/dp/' + item) |
|
||||||
} |
|
||||||
|
|
||||||
const existsExeptions = (IDMaster: number) => { |
|
||||||
const Exceptions = mInvoices |
|
||||||
.filter((element) => |
|
||||||
element.detail.some((sub) => sub.idHeader === IDMaster) |
|
||||||
) |
|
||||||
.map((element) => { |
|
||||||
let newElt = Object.assign({}, element) // copies element
|
|
||||||
return newElt.detail.filter( |
|
||||||
(child) => child.idHeader === IDMaster && !child.autorizado |
|
||||||
) |
|
||||||
}) |
|
||||||
console.log(JSON.stringify(Exceptions[0])) |
|
||||||
return Exceptions[0].length ? Exceptions[0].length : 0 |
|
||||||
} |
|
||||||
|
|
||||||
const facturaTerminada = (row: I2096Headers) => { |
|
||||||
DSAmazon.Se$Puede$Terminar$Factura(row.id) |
|
||||||
.then((response) => { |
|
||||||
if (response.data.respuesta.includes('lista')) { |
|
||||||
setIDFactura(row.id) |
|
||||||
setShowModal(true) |
|
||||||
return |
|
||||||
} else { |
|
||||||
setIDFactura(0) |
|
||||||
setHeader('Informativo') |
|
||||||
setMsg(response.data.respuesta) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setIDFactura(0) |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error') |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<Card> |
|
||||||
<Card.Body> |
|
||||||
<Row> |
|
||||||
<Col xs={3}> |
|
||||||
<Card.Title>Amazon: facturas pendientes</Card.Title> |
|
||||||
</Col> |
|
||||||
<Col xs={4}></Col> |
|
||||||
</Row> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
<Row> |
|
||||||
<Col xs={2}></Col> |
|
||||||
<Col xs={8}></Col> |
|
||||||
<Col xs={2} className="totalLabel"></Col> |
|
||||||
</Row> |
|
||||||
<Card> |
|
||||||
<Card.Body> |
|
||||||
<div className="MDcontainer"> |
|
||||||
<Table className="MDTable" hover> |
|
||||||
<thead style={{ position: 'sticky', top: '0' }}> |
|
||||||
<tr> |
|
||||||
<th></th> |
|
||||||
<th style={{ width: '50px' }}>id</th> |
|
||||||
<th style={{ width: '50px' }}></th> |
|
||||||
{/* <th style={{ width: '50px' }}></th> |
|
||||||
<th style={{ width: '50px' }}></th> */} |
|
||||||
<th style={{ width: '80px' }}>Commercial Invoice Date</th> |
|
||||||
<th style={{ width: '150px' }}>Invoice Number</th> |
|
||||||
<th style={{ width: '50px' }}>Name</th> |
|
||||||
<th style={{ width: '100px' }}>Incoterms</th> |
|
||||||
<th>Qty Unit of measure</th> |
|
||||||
<th>Tot Qty</th> |
|
||||||
<th>Weight unit of measure</th> |
|
||||||
<th>Tot weight</th> |
|
||||||
<th>Tot Charge or allowance</th> |
|
||||||
<th>Tot currency ISO code</th> |
|
||||||
<th>Tot Monetary amount</th> |
|
||||||
</tr> |
|
||||||
</thead> |
|
||||||
<tbody> |
|
||||||
{mInvoices |
|
||||||
? mInvoices.map((MasterData) => { |
|
||||||
return ( |
|
||||||
<> |
|
||||||
<tr |
|
||||||
style={{ cursor: 'pointer' }} |
|
||||||
className={ |
|
||||||
MasterData.max === true |
|
||||||
? 'masterSelected' |
|
||||||
: 'normalSelected' |
|
||||||
} |
|
||||||
> |
|
||||||
<td |
|
||||||
style={{ textAlign: 'left' }} |
|
||||||
className={ |
|
||||||
MasterData.max === true |
|
||||||
? 'masterSelected' |
|
||||||
: 'normalSelected' |
|
||||||
} |
|
||||||
key={MasterData.id} |
|
||||||
onClick={() => { |
|
||||||
changeToggle(MasterData) |
|
||||||
}} |
|
||||||
> |
|
||||||
{MasterData.max === true ? ( |
|
||||||
<IconContext.Provider |
|
||||||
value={{ color: 'blue', size: '15px' }} |
|
||||||
> |
|
||||||
<BsChevronDown /> |
|
||||||
</IconContext.Provider> |
|
||||||
) : ( |
|
||||||
<IconContext.Provider |
|
||||||
value={{ color: 'blue', size: '15px' }} |
|
||||||
> |
|
||||||
<BsChevronRight /> |
|
||||||
</IconContext.Provider> |
|
||||||
)} |
|
||||||
</td> |
|
||||||
<td>{MasterData.id}</td> |
|
||||||
<td> |
|
||||||
<FormCheck |
|
||||||
className="form-check form-switch form-control-sm" |
|
||||||
id="switchEnabled" |
|
||||||
type="switch" |
|
||||||
checked={false} |
|
||||||
onChange={() => { |
|
||||||
facturaTerminada(MasterData) |
|
||||||
} |
|
||||||
} |
|
||||||
label="" |
|
||||||
/> |
|
||||||
</td> |
|
||||||
<td style={{ width: '80px', textAlign: 'center' }}> |
|
||||||
{MasterData.commercialInvoiceDate} |
|
||||||
</td> |
|
||||||
<td style={{ width: '150px' }}> |
|
||||||
{MasterData.invoiceNumber} |
|
||||||
</td> |
|
||||||
<td style={{ width: '50px', textAlign: 'center' }}> |
|
||||||
{MasterData.name} |
|
||||||
</td> |
|
||||||
<td style={{ width: '100px', textAlign: 'center' }}> |
|
||||||
{MasterData.incoterms} |
|
||||||
</td> |
|
||||||
<td style={{ textAlign: 'center' }}> |
|
||||||
{MasterData.totalInvoiceQuantityUnitOfMeasure} |
|
||||||
</td> |
|
||||||
<td style={{ textAlign: 'center' }}> |
|
||||||
{MasterData.totalInvoiceQuantity} |
|
||||||
</td> |
|
||||||
<td style={{ textAlign: 'center' }}> |
|
||||||
{MasterData.totalInvoiceWeightUnitOfMeasure} |
|
||||||
</td> |
|
||||||
<td style={{ textAlign: 'center' }}> |
|
||||||
{MasterData.totalInvoiceWeight} |
|
||||||
</td> |
|
||||||
<td style={{ textAlign: 'center' }}> |
|
||||||
{MasterData.totalInvoiceValueChargeOrAllowance} |
|
||||||
</td> |
|
||||||
<td style={{ textAlign: 'center' }}> |
|
||||||
{MasterData.totalInvoiceValueCurrencyISOCode} |
|
||||||
</td> |
|
||||||
<td style={{ textAlign: 'center' }}> |
|
||||||
{MasterData.totalInvoiceValueMonetaryAmount} |
|
||||||
</td> |
|
||||||
</tr> |
|
||||||
{MasterData.max ? ( |
|
||||||
<tr |
|
||||||
className={ |
|
||||||
MasterData.max === true |
|
||||||
? 'masterSelected2' |
|
||||||
: 'normalSelected2' |
|
||||||
} |
|
||||||
> |
|
||||||
<th colSpan={10}> |
|
||||||
<table |
|
||||||
className="childTable" |
|
||||||
style={{ width: '1450px' }} |
|
||||||
> |
|
||||||
<thead> |
|
||||||
<tr> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '50px', |
|
||||||
backgroundColor: '#FFFFFF', |
|
||||||
color: '#346288' |
|
||||||
}} |
|
||||||
></th> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '100px', |
|
||||||
backgroundColor: '#D3E0EA', |
|
||||||
color: '#346288' |
|
||||||
}} |
|
||||||
> |
|
||||||
Item Id |
|
||||||
</th> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '400px', |
|
||||||
backgroundColor: '#D3E0EA', |
|
||||||
color: '#346288' |
|
||||||
}} |
|
||||||
> |
|
||||||
Item Description |
|
||||||
</th> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '120px', |
|
||||||
backgroundColor: '#D3E0EA', |
|
||||||
color: '#346288', |
|
||||||
textAlign: 'center' |
|
||||||
}} |
|
||||||
> |
|
||||||
Fraccion GEMCO |
|
||||||
</th> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '70px', |
|
||||||
backgroundColor: '#D3E0EA', |
|
||||||
color: '#346288', |
|
||||||
textAlign: 'center' |
|
||||||
}} |
|
||||||
> |
|
||||||
Descripcion GEMCO |
|
||||||
</th> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '70px', |
|
||||||
backgroundColor: '#D3E0EA', |
|
||||||
color: '#346288', |
|
||||||
textAlign: 'center' |
|
||||||
}} |
|
||||||
> |
|
||||||
Country of Origin |
|
||||||
</th> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '70px', |
|
||||||
backgroundColor: '#D3E0EA', |
|
||||||
color: '#346288' |
|
||||||
}} |
|
||||||
> |
|
||||||
ProductGroup |
|
||||||
</th> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '70px', |
|
||||||
backgroundColor: '#D3E0EA', |
|
||||||
color: '#346288' |
|
||||||
}} |
|
||||||
> |
|
||||||
Brand |
|
||||||
</th> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '70px', |
|
||||||
backgroundColor: '#D3E0EA', |
|
||||||
color: '#346288' |
|
||||||
}} |
|
||||||
> |
|
||||||
Model |
|
||||||
</th> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '70px', |
|
||||||
backgroundColor: '#D3E0EA', |
|
||||||
color: '#346288' |
|
||||||
}} |
|
||||||
> |
|
||||||
Unit Measure |
|
||||||
</th> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '70px', |
|
||||||
backgroundColor: '#D3E0EA', |
|
||||||
color: '#346288' |
|
||||||
}} |
|
||||||
> |
|
||||||
Qty Shipped |
|
||||||
</th> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '70px', |
|
||||||
backgroundColor: '#D3E0EA', |
|
||||||
color: '#346288' |
|
||||||
}} |
|
||||||
> |
|
||||||
Unit Net Weight |
|
||||||
</th> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '70px', |
|
||||||
backgroundColor: '#D3E0EA', |
|
||||||
color: '#346288' |
|
||||||
}} |
|
||||||
> |
|
||||||
Unit Cost |
|
||||||
</th> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '70px', |
|
||||||
backgroundColor: '#D3E0EA', |
|
||||||
color: '#346288' |
|
||||||
}} |
|
||||||
> |
|
||||||
Total value |
|
||||||
</th> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '70px', |
|
||||||
backgroundColor: '#D3E0EA', |
|
||||||
color: '#346288' |
|
||||||
}} |
|
||||||
> |
|
||||||
Sight line |
|
||||||
</th> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '70px', |
|
||||||
backgroundColor: '#D3E0EA', |
|
||||||
color: '#346288' |
|
||||||
}} |
|
||||||
> |
|
||||||
Comentarios |
|
||||||
</th> |
|
||||||
</tr> |
|
||||||
</thead> |
|
||||||
<tbody> |
|
||||||
{mInvoices.map((MD) => { |
|
||||||
return ( |
|
||||||
<> |
|
||||||
{MD.detail |
|
||||||
.filter( |
|
||||||
(detail) => |
|
||||||
MasterData.id === |
|
||||||
detail.idHeader |
|
||||||
) |
|
||||||
.map((detail) => { |
|
||||||
return ( |
|
||||||
<RtpAmazonPendingTraficInvoiceDetail |
|
||||||
IDMaster={MasterData.id} |
|
||||||
detail={detail} |
|
||||||
Habilitado={ |
|
||||||
MasterData.estatus <= 1 |
|
||||||
} |
|
||||||
/> |
|
||||||
) |
|
||||||
})} |
|
||||||
</> |
|
||||||
) |
|
||||||
})} |
|
||||||
</tbody> |
|
||||||
</table> |
|
||||||
</th> |
|
||||||
</tr> |
|
||||||
) : null} |
|
||||||
</> |
|
||||||
) |
|
||||||
}) |
|
||||||
: null} |
|
||||||
</tbody> |
|
||||||
</Table> |
|
||||||
</div> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
<Modal |
|
||||||
show={ShowModal} |
|
||||||
onHide={() => { |
|
||||||
setShowModal(false) |
|
||||||
}} |
|
||||||
size={'sm'} |
|
||||||
dialogClassName={'modal-50w'} |
|
||||||
> |
|
||||||
<Modal.Body> |
|
||||||
<div style={{ height: '180px' }}> |
|
||||||
<Row style={{ paddingTop: '15px' }}> |
|
||||||
<Col xs={1}></Col> |
|
||||||
<Col xs={10}> |
|
||||||
<Alert key={'danger'} variant={'danger'}> |
|
||||||
La factura esta lista para terminarse, desea terminarla? |
|
||||||
</Alert> |
|
||||||
</Col> |
|
||||||
<Col xs={1}></Col> |
|
||||||
</Row> |
|
||||||
<Row style={{ paddingTop: '15px' }}> |
|
||||||
<Col xs={6} style={{ textAlign: 'center' }}> |
|
||||||
<Button |
|
||||||
variant="secondary" |
|
||||||
onClick={() => { |
|
||||||
setShowModal(false) |
|
||||||
}} |
|
||||||
> |
|
||||||
No |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
<Col xs={6} style={{ textAlign: 'center' }}> |
|
||||||
<Button |
|
||||||
variant="danger" |
|
||||||
onClick={() => { |
|
||||||
downloadExcel(IDFactura) |
|
||||||
}} |
|
||||||
> |
|
||||||
Si |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</div> |
|
||||||
</Modal.Body> |
|
||||||
</Modal> |
|
||||||
<MsgInformativo |
|
||||||
show={show} |
|
||||||
msg={msg} |
|
||||||
header={header} |
|
||||||
msgColor={msgColor} |
|
||||||
closeToast={() => { |
|
||||||
setShowMsg(false) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -0,0 +1,578 @@ |
|||||||
|
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, BsSearch } from 'react-icons/bs' |
||||||
|
import { |
||||||
|
FaAmazon, |
||||||
|
FaCheckCircle, |
||||||
|
FaFileExcel, |
||||||
|
FaQuestionCircle |
||||||
|
} from 'react-icons/fa' |
||||||
|
import { ImCross } from 'react-icons/im' |
||||||
|
import { ComboDescripcion } from '../../Components/ComboSelect/ComboDescripcion' |
||||||
|
import { ComboFraccion } from '../../Components/ComboSelect/ComboFraccion' |
||||||
|
import { TextBoxFraccion } from '../../Components/TextBox/TextBoxFraccion' |
||||||
|
import I2096Detail from '../../Interfaces/I2096Detail' |
||||||
|
import I2096Headers from '../../Interfaces/I2096Header' |
||||||
|
import DSAmazon from '../../Services/Amazon.Services' |
||||||
|
import * as XLSX from 'xlsx' |
||||||
|
import DTO2096PrevioExcel from '../../DTO/DTO2096PrevioExcel' |
||||||
|
import { MsgInformativo } from '../../../../Utils/Toast/msgInformativo' |
||||||
|
import { RootState } from '../../../../../store/store' |
||||||
|
import { |
||||||
|
initializeInvoice, |
||||||
|
populateInvoices, |
||||||
|
updateInvoice |
||||||
|
} from '../../../../../store/features/Clientes/2096/AmazonInvoices' |
||||||
|
import RptAmazonInvoiceTrafficDetail from './RptAmazonInvoiceTrafficDetail' |
||||||
|
|
||||||
|
// Redux
|
||||||
|
import { useDispatch, useSelector } from 'react-redux' |
||||||
|
|
||||||
|
export interface IRptAmazonLinkInvoice2TrafficProps {} |
||||||
|
|
||||||
|
export function RptAmazonLinkInvoice2Traffic( |
||||||
|
props: IRptAmazonLinkInvoice2TrafficProps |
||||||
|
) { |
||||||
|
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 [msg, setMsg] = useState('') |
||||||
|
const [Invoices, setInvoices] = useState<number[]>([]) |
||||||
|
const msgColor = 'primary' |
||||||
|
|
||||||
|
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 loadReport = () => { |
||||||
|
DSAmazon.AmazonLinkInvoice2TrafficGet() |
||||||
|
.then((response) => { |
||||||
|
dispatch(initializeInvoice([])) |
||||||
|
dispatch(populateInvoices(response.data)) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
alert('Ocurrio un error' + e.message.toString()) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const downloadExcel = (id: number) => { |
||||||
|
DSAmazon.SePuedeTerminardeClasificarFactura(id) |
||||||
|
.then((response) => {}) |
||||||
|
.catch((e: Error) => {}) |
||||||
|
DSAmazon.NoPartesAmazon2SIRGET(id) |
||||||
|
.then((response: any) => { |
||||||
|
if (response.status === 200) { |
||||||
|
const url = window.URL.createObjectURL(new Blob([response.data])) |
||||||
|
const link = document.createElement('a') |
||||||
|
link.href = url |
||||||
|
link.setAttribute('download', 'Plantilla de partes.xlsx') |
||||||
|
document.body.appendChild(link) |
||||||
|
link.click() |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
loadReport() |
||||||
|
}, []) |
||||||
|
|
||||||
|
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)) |
||||||
|
} |
||||||
|
|
||||||
|
const toggleInvoice = (id: number) => { |
||||||
|
if (!Invoices.includes(id)) { |
||||||
|
Invoices.push(id) |
||||||
|
} else { |
||||||
|
setInvoices( |
||||||
|
Invoices.filter(function (el) { |
||||||
|
return el != id |
||||||
|
}) |
||||||
|
) |
||||||
|
} |
||||||
|
console.log('Invoices=' + Invoices) |
||||||
|
} |
||||||
|
|
||||||
|
const processInvoices = () => { |
||||||
|
if (Invoices.length === 0) { |
||||||
|
setHeader('Error') |
||||||
|
setMsg( |
||||||
|
'Para poder continuar es necesario que seleccione por lo menos 1 factura' |
||||||
|
) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
//alert(Invoices)
|
||||||
|
setShowModal(true) |
||||||
|
} |
||||||
|
|
||||||
|
const openLink = (item: string) => { |
||||||
|
window.open('https://www.amazon.com/dp/' + item) |
||||||
|
} |
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Card> |
||||||
|
<Card.Body> |
||||||
|
<Row> |
||||||
|
<Col xs={5}> |
||||||
|
<Card.Title> |
||||||
|
<IconContext.Provider value={{ color: '#F6C34F', size: '8%' }}> |
||||||
|
<FaAmazon /> |
||||||
|
</IconContext.Provider>{' '} |
||||||
|
TRAFICO : facturas terminadas |
||||||
|
</Card.Title> |
||||||
|
</Col> |
||||||
|
<Col xs={6}></Col> |
||||||
|
<Col> |
||||||
|
<Button |
||||||
|
onClick={() => { |
||||||
|
processInvoices() |
||||||
|
}} |
||||||
|
> |
||||||
|
Procesa |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
|
||||||
|
<Card> |
||||||
|
<Card.Body> |
||||||
|
<div className="MDcontainer"> |
||||||
|
<Table className="MDTable" hover> |
||||||
|
<thead style={{ position: 'sticky', top: '0' }}> |
||||||
|
<tr> |
||||||
|
<th></th> |
||||||
|
<th style={{ width: '50px' }}>id</th> |
||||||
|
<th style={{ width: '50px' }}>[...]</th> |
||||||
|
<th style={{ width: '80px' }}>Commercial Invoice Date</th> |
||||||
|
<th style={{ width: '250px' }}>Invoice Number</th> |
||||||
|
<th style={{ width: '100px' }}>Incoterms</th> |
||||||
|
<th style={{ textAlign: 'center' }}>HAWB</th> |
||||||
|
<th>Qty Unit of measure</th> |
||||||
|
<th>Tot Qty</th> |
||||||
|
<th>Weight unit of measure</th> |
||||||
|
<th>Tot weight</th> |
||||||
|
<th>Tot Charge or allowance</th> |
||||||
|
<th>Tot currency ISO code</th> |
||||||
|
<th>Tot Monetary amount</th> |
||||||
|
<th>Total de partidas</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
{mInvoices |
||||||
|
? mInvoices.map((MasterData) => { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<tr |
||||||
|
style={{ cursor: 'pointer' }} |
||||||
|
className={ |
||||||
|
MasterData.max === true |
||||||
|
? 'masterSelected' |
||||||
|
: 'normalSelected' |
||||||
|
} |
||||||
|
> |
||||||
|
<td |
||||||
|
style={{ textAlign: 'left' }} |
||||||
|
className={ |
||||||
|
MasterData.max === true |
||||||
|
? 'masterSelected' |
||||||
|
: 'normalSelected' |
||||||
|
} |
||||||
|
key={MasterData.id} |
||||||
|
onClick={() => { |
||||||
|
changeToggle(MasterData) |
||||||
|
}} |
||||||
|
> |
||||||
|
{MasterData.max === true ? ( |
||||||
|
<IconContext.Provider |
||||||
|
value={{ color: 'blue', size: '15px' }} |
||||||
|
> |
||||||
|
<BsChevronDown /> |
||||||
|
</IconContext.Provider> |
||||||
|
) : ( |
||||||
|
<IconContext.Provider |
||||||
|
value={{ color: 'blue', size: '15px' }} |
||||||
|
> |
||||||
|
<BsChevronRight /> |
||||||
|
</IconContext.Provider> |
||||||
|
)} |
||||||
|
</td> |
||||||
|
<td>{MasterData.id}</td> |
||||||
|
<td style={{ textAlign: 'center' }}> |
||||||
|
<Form.Check |
||||||
|
aria-label="ChkRow" |
||||||
|
onClick={() => toggleInvoice(MasterData.id)} |
||||||
|
/> |
||||||
|
</td> |
||||||
|
<td style={{ width: '80px', textAlign: 'center' }}> |
||||||
|
{MasterData.commercialInvoiceDate} |
||||||
|
</td> |
||||||
|
<td style={{ width: '300px' }}> |
||||||
|
{MasterData.invoiceNumber} |
||||||
|
</td> |
||||||
|
<td style={{ width: '100px', textAlign: 'center' }}> |
||||||
|
{MasterData.incoterms} |
||||||
|
</td> |
||||||
|
<td style={{ textAlign: 'center' }}> |
||||||
|
{MasterData.hawb} |
||||||
|
</td> |
||||||
|
<td style={{ textAlign: 'center' }}> |
||||||
|
{MasterData.totalInvoiceQuantityUnitOfMeasure} |
||||||
|
</td> |
||||||
|
<td style={{ textAlign: 'center' }}> |
||||||
|
{MasterData.totalInvoiceQuantity} |
||||||
|
</td> |
||||||
|
<td style={{ textAlign: 'center' }}> |
||||||
|
{MasterData.totalInvoiceWeightUnitOfMeasure} |
||||||
|
</td> |
||||||
|
<td style={{ textAlign: 'center' }}> |
||||||
|
{MasterData.totalInvoiceWeight} |
||||||
|
</td> |
||||||
|
<td style={{ textAlign: 'center' }}> |
||||||
|
{MasterData.totalInvoiceValueChargeOrAllowance} |
||||||
|
</td> |
||||||
|
<td style={{ textAlign: 'center' }}> |
||||||
|
{MasterData.totalInvoiceValueCurrencyISOCode} |
||||||
|
</td> |
||||||
|
<td style={{ textAlign: 'center' }}> |
||||||
|
{MasterData.totalInvoiceValueMonetaryAmount} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
fontWeight: 'bold', |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
> |
||||||
|
{mInvoices |
||||||
|
.filter((value) => value.id === MasterData.id) |
||||||
|
.map((row) => { |
||||||
|
return row.detail.length |
||||||
|
})} |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
{MasterData.max ? ( |
||||||
|
<tr |
||||||
|
className={ |
||||||
|
MasterData.max === true |
||||||
|
? 'masterSelected2' |
||||||
|
: 'normalSelected2' |
||||||
|
} |
||||||
|
> |
||||||
|
<th colSpan={10}> |
||||||
|
<table |
||||||
|
className="childTable" |
||||||
|
style={{ width: '1450px' }} |
||||||
|
> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '50px', |
||||||
|
backgroundColor: '#FFFFFF', |
||||||
|
color: '#346288' |
||||||
|
}} |
||||||
|
></th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '100px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288' |
||||||
|
}} |
||||||
|
> |
||||||
|
Item Id |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '400px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288' |
||||||
|
}} |
||||||
|
> |
||||||
|
Item Description |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '120px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288' |
||||||
|
}} |
||||||
|
> |
||||||
|
Pedimento Description |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '120px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288', |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
> |
||||||
|
Destination HTS Code |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '120px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288' |
||||||
|
}} |
||||||
|
> |
||||||
|
Valida |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '120px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288' |
||||||
|
}} |
||||||
|
> |
||||||
|
Confirme fraccion |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '120px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288', |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
> |
||||||
|
Fraccion GEMCO |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '120px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288', |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
> |
||||||
|
Confirme descripcion |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '70px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288', |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
> |
||||||
|
Descripcion GEMCO |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '70px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288', |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
> |
||||||
|
Country of Origin |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '70px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288' |
||||||
|
}} |
||||||
|
> |
||||||
|
ProductGroup |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '70px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288' |
||||||
|
}} |
||||||
|
> |
||||||
|
Brand |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '70px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288' |
||||||
|
}} |
||||||
|
> |
||||||
|
Model |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '70px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288' |
||||||
|
}} |
||||||
|
> |
||||||
|
Unit Measure |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '70px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288' |
||||||
|
}} |
||||||
|
> |
||||||
|
Qty Shipped |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '70px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288' |
||||||
|
}} |
||||||
|
> |
||||||
|
Unit of measure |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '70px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288' |
||||||
|
}} |
||||||
|
> |
||||||
|
Unit Net Weight |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '70px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288' |
||||||
|
}} |
||||||
|
> |
||||||
|
Unit Cost |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '70px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288' |
||||||
|
}} |
||||||
|
> |
||||||
|
Total value |
||||||
|
</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
{mInvoices.map((MD) => { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
{MD.detail |
||||||
|
.filter( |
||||||
|
(detail) => |
||||||
|
MasterData.id === |
||||||
|
detail.idHeader |
||||||
|
) |
||||||
|
.map((detail) => { |
||||||
|
return ( |
||||||
|
<RptAmazonInvoiceTrafficDetail |
||||||
|
IDMaster={MasterData.id} |
||||||
|
detail={detail} |
||||||
|
Habilitado={ |
||||||
|
MasterData.estatus <= 1 |
||||||
|
} |
||||||
|
/> |
||||||
|
) |
||||||
|
})} |
||||||
|
</> |
||||||
|
) |
||||||
|
})} |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
</th> |
||||||
|
</tr> |
||||||
|
) : null} |
||||||
|
</> |
||||||
|
) |
||||||
|
}) |
||||||
|
: null} |
||||||
|
</tbody> |
||||||
|
</Table> |
||||||
|
</div> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
<Modal |
||||||
|
show={ShowModal} |
||||||
|
onHide={() => { |
||||||
|
setShowModal(false) |
||||||
|
}} |
||||||
|
size={'sm'} |
||||||
|
dialogClassName={'modal-50w'} |
||||||
|
> |
||||||
|
<Modal.Body> |
||||||
|
<div style={{ height: '180px' }}> |
||||||
|
<Alert key={'danger'} variant={'danger'}> |
||||||
|
<Row style={{ paddingTop: '15px' }}> |
||||||
|
<Col xs={9}> |
||||||
|
Para asociar estar facturas proporcione la referencia de SIR |
||||||
|
</Col> |
||||||
|
<Col xs={3}> |
||||||
|
<Form.Control |
||||||
|
type="text" |
||||||
|
id="Referencia" |
||||||
|
size="sm" |
||||||
|
value={Referencia} |
||||||
|
onChange={(e) => setReferencia(e.target.value)} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Alert> |
||||||
|
<Row style={{ paddingTop: '15px' }}> |
||||||
|
<Col xs={6} style={{ textAlign: 'center' }}> |
||||||
|
<Button |
||||||
|
variant="secondary" |
||||||
|
onClick={() => { |
||||||
|
setShowModal(false) |
||||||
|
}} |
||||||
|
> |
||||||
|
Cancelar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col xs={6} style={{ textAlign: 'center' }}> |
||||||
|
<Button variant="danger" onClick={() => {}}> |
||||||
|
Asociar referencia |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</div> |
||||||
|
</Modal.Body> |
||||||
|
</Modal> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,408 @@ |
|||||||
|
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 { FaCheckCircle, FaQuestionCircle } from 'react-icons/fa' |
||||||
|
import { ImCross } from 'react-icons/im' |
||||||
|
import { MsgInformativo } from '../../../../Utils/Toast/msgInformativo' |
||||||
|
import { ComboDescripcion } from '../../Components/ComboSelect/ComboDescripcion' |
||||||
|
import { ComboFraccion } from '../../Components/ComboSelect/ComboFraccion' |
||||||
|
import DTO2096ItemAutoriza from '../../DTO/DTO2096ItemAutoriza' |
||||||
|
import I2096Detail from '../../Interfaces/I2096Detail' |
||||||
|
import I2096Headers from '../../Interfaces/I2096Header' |
||||||
|
import DSAmazon from '../../Services/Amazon.Services' |
||||||
|
// Redux
|
||||||
|
import { RootState } from '../../../../../store/store' |
||||||
|
import { useDispatch, useSelector } from 'react-redux' |
||||||
|
import { updateInvoice } from '../../../../../store/features/Clientes/2096/AmazonInvoices' |
||||||
|
import * as CurrencyFormat from 'react-currency-format' |
||||||
|
import { AiOutlineFileSearch } from 'react-icons/ai' |
||||||
|
import { BsFillChatRightTextFill } from 'react-icons/bs' |
||||||
|
import DTO2096SightLine from '../../DTO/DTO2096SightLine' |
||||||
|
|
||||||
|
export interface IRptAmazonPendingTraficInvoiceDetailProps { |
||||||
|
IDMaster: number |
||||||
|
detail: I2096Detail |
||||||
|
Habilitado: boolean |
||||||
|
} |
||||||
|
|
||||||
|
export default function RptAmazonPendingTraficInvoiceDetail( |
||||||
|
props: IRptAmazonPendingTraficInvoiceDetailProps |
||||||
|
) { |
||||||
|
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 [Comentarios, setComentarios] = useState( |
||||||
|
props.detail.comentariosSightLine ? props.detail.comentariosSightLine : '' |
||||||
|
) |
||||||
|
const msgColor = 'primary' |
||||||
|
const openLink = (item: string) => { |
||||||
|
window.open('https://www.amazon.com/dp/' + item) |
||||||
|
} |
||||||
|
const target = React.useRef(null) |
||||||
|
|
||||||
|
const UpdateInfo = (Invoice: I2096Headers, Detail: I2096Detail[]) => { |
||||||
|
const updatedInvoice: I2096Headers = { |
||||||
|
id: props.IDMaster, |
||||||
|
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, |
||||||
|
estatus: Invoice.estatus, |
||||||
|
max: true, |
||||||
|
detail: Detail |
||||||
|
} |
||||||
|
dispatch(updateInvoice(updatedInvoice)) |
||||||
|
} |
||||||
|
|
||||||
|
const editArray = (id: number, valor: boolean) => { |
||||||
|
const Invoice = mInvoices |
||||||
|
.filter((el) => el.id === props.IDMaster) |
||||||
|
.map((el) => { |
||||||
|
return el |
||||||
|
}) |
||||||
|
const newDetail = Invoice[0].detail.map((el) => { |
||||||
|
if (el.id === id) { |
||||||
|
return { |
||||||
|
...el, |
||||||
|
autorizado: valor |
||||||
|
} |
||||||
|
} |
||||||
|
return el |
||||||
|
}) |
||||||
|
UpdateInfo(Invoice[0], newDetail) |
||||||
|
} |
||||||
|
|
||||||
|
const ToggleSightLine = (id: number) => { |
||||||
|
const data: DTO2096SightLine = { |
||||||
|
id: id, |
||||||
|
sightLine: EstatusSwith, |
||||||
|
comentariosSightLine: Comentarios |
||||||
|
} |
||||||
|
DSAmazon.SightLineSET(data) |
||||||
|
.then((response) => { |
||||||
|
console.log(response.data) |
||||||
|
//editArray(id, !props.detail.autorizado)
|
||||||
|
setShowModal(false) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error, no se guardo la informacion en BD') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (UserChanged) setShowModal(true) |
||||||
|
//ToggleSightLine(props.detail.id)
|
||||||
|
}, [EstatusSwith, UserChanged]) |
||||||
|
|
||||||
|
const popover = ( |
||||||
|
<Popover id="popover-basic"> |
||||||
|
<Popover.Header as="h3">Popover right</Popover.Header> |
||||||
|
<Popover.Body> |
||||||
|
And here's some <strong>amazing</strong> content. It's very engaging. |
||||||
|
right? |
||||||
|
</Popover.Body> |
||||||
|
</Popover> |
||||||
|
) |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<tr> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '50px', |
||||||
|
backgroundColor: '#FFFFFF' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
|
||||||
|
</th> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center', |
||||||
|
cursor: 'pointer' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
onClick={() => openLink(props.detail.itemId)} |
||||||
|
> |
||||||
|
{props.detail.itemId} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'right' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.itemDescription} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
<CurrencyFormat |
||||||
|
value={props.detail.fraccionGEMCO ? props.detail.fraccionGEMCO : ''} |
||||||
|
disabled={true} |
||||||
|
format={'######## ##'} |
||||||
|
displayType={'input'} |
||||||
|
style={{ |
||||||
|
fontSize: '18px', |
||||||
|
backgroundColor: |
||||||
|
props.detail.validaFraccionOriginal === 0 |
||||||
|
? '#FFFAF2 ' |
||||||
|
: '#E5F7B6', |
||||||
|
border: |
||||||
|
props.detail.validaFraccionOriginal === 0 |
||||||
|
? '2px solid #F9A721' |
||||||
|
: '2px solid green', |
||||||
|
color: |
||||||
|
props.detail.validaFraccionOriginal === 0 |
||||||
|
? '#5923F6' |
||||||
|
: '#000000', |
||||||
|
width: '115px', |
||||||
|
textAlign: 'right', |
||||||
|
borderRadius: '10px' |
||||||
|
}} |
||||||
|
/> |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.descripcionGEMCO} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.countryOfOrigin} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'right' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.productGroup} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'right' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.brand} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'right' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.model} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.itemQuantityUnitOfMeasure} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.quantity} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.weightValue} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.netWeightUnitOfMeasure} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.actualUnitCostMonetaryAmount} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.totalUnitValueMonetaryAmount} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center', |
||||||
|
paddingLeft: '30px' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
<FormCheck |
||||||
|
className="form-check form-switch form-control-lg" |
||||||
|
id="switchEnabled" |
||||||
|
type="switch" |
||||||
|
checked={EstatusSwith} |
||||||
|
onChange={() => { |
||||||
|
setEstatusSwitch(!EstatusSwith) |
||||||
|
setUserChanged(true) |
||||||
|
setShowModal(!EstatusSwith) |
||||||
|
}} |
||||||
|
label="" |
||||||
|
/> |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
visibility: props.detail.sightLine ? 'hidden' : 'visible' |
||||||
|
}} |
||||||
|
> |
||||||
|
{' '} |
||||||
|
<OverlayTrigger |
||||||
|
placement="bottom" |
||||||
|
overlay={<Tooltip id="button-tooltip-2">{Comentarios}</Tooltip>} |
||||||
|
> |
||||||
|
{({ ref, ...triggerHandler }) => ( |
||||||
|
<Button variant="light" {...triggerHandler}> |
||||||
|
<IconContext.Provider |
||||||
|
value={{ |
||||||
|
color: 'blue', |
||||||
|
size: '25px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<BsFillChatRightTextFill /> |
||||||
|
</IconContext.Provider> |
||||||
|
<span className="ms-1"></span> |
||||||
|
</Button> |
||||||
|
)} |
||||||
|
</OverlayTrigger> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
|
||||||
|
<Modal |
||||||
|
show={ShowModal} |
||||||
|
onHide={() => { |
||||||
|
setShowModal(false) |
||||||
|
}} |
||||||
|
size={'sm'} |
||||||
|
dialogClassName={'modal-50w'} |
||||||
|
backdrop="static" |
||||||
|
disableEscapeKeyDown={true} |
||||||
|
> |
||||||
|
<Modal.Body> |
||||||
|
<div style={{ height: '150px' }}> |
||||||
|
<Row style={{ paddingTop: '15px' }}> |
||||||
|
<Col xs={3}>Comentarios</Col> |
||||||
|
<Col xs={8}> |
||||||
|
{' '} |
||||||
|
<Form.Control |
||||||
|
as="textarea" |
||||||
|
id="Comentarios" |
||||||
|
size="sm" |
||||||
|
value={Comentarios.length ? Comentarios : ''} |
||||||
|
onChange={(e) => setComentarios(e.target.value)} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
<Col> </Col> |
||||||
|
</Row> |
||||||
|
<Row style={{ paddingTop: '15px' }}> |
||||||
|
<Col xs={6} style={{ textAlign: 'center' }}> |
||||||
|
<Button |
||||||
|
variant="secondary" |
||||||
|
onClick={() => { |
||||||
|
setEstatusSwitch(true) |
||||||
|
setShowModal(false) |
||||||
|
}} |
||||||
|
> |
||||||
|
No |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col xs={6} style={{ textAlign: 'center' }}> |
||||||
|
<Button |
||||||
|
variant="danger" |
||||||
|
onClick={() => { |
||||||
|
ToggleSightLine(props.detail.id) |
||||||
|
}} |
||||||
|
> |
||||||
|
Si |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</div> |
||||||
|
</Modal.Body> |
||||||
|
</Modal> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,533 @@ |
|||||||
|
import { useEffect, useState } from 'react' |
||||||
|
import { |
||||||
|
Alert, |
||||||
|
Button, |
||||||
|
Card, |
||||||
|
Col, |
||||||
|
FormCheck, |
||||||
|
Modal, |
||||||
|
Row, |
||||||
|
Table |
||||||
|
} from 'react-bootstrap' |
||||||
|
import { IconContext } from 'react-icons' |
||||||
|
import { BsChevronDown, BsChevronRight } from 'react-icons/bs' |
||||||
|
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 RtpAmazonPendingTraficInvoiceDetail from './RptAmazonPendingTraficInvoiceDetail' |
||||||
|
import { FaAmazon } from 'react-icons/fa' |
||||||
|
|
||||||
|
export interface IRptAmazonPendingTraficInvoiceProps {} |
||||||
|
|
||||||
|
export function RptAmazonPendingTraficInvoice( |
||||||
|
props: IRptAmazonPendingTraficInvoiceProps |
||||||
|
) { |
||||||
|
const dispatch = useDispatch() |
||||||
|
const mInvoices = useSelector( |
||||||
|
(state: RootState) => state.AmazonInvoices.Invoice |
||||||
|
) |
||||||
|
const [header, setHeader] = useState('') |
||||||
|
const [IDFactura, setIDFactura] = useState(0) |
||||||
|
const [show, setShowMsg] = useState(false) |
||||||
|
const [ShowModal, setShowModal] = useState(false) |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
const msgColor = 'primary' |
||||||
|
|
||||||
|
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 loadReport = () => { |
||||||
|
DSAmazon.AmazonPendingTraficInvoiceGET() |
||||||
|
.then((response) => { |
||||||
|
dispatch(initializeInvoice([])) |
||||||
|
dispatch(populateInvoices(response.data)) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
alert('Ocurrio un error' + e.message.toString()) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
loadReport() |
||||||
|
}, []) |
||||||
|
|
||||||
|
const InvoiceToggle = (row: I2096Headers) => { |
||||||
|
let Invoice: I2096Headers[] = mInvoices.filter((item) => item.id === row.id) |
||||||
|
const Obj = { ...Invoice[0] } |
||||||
|
Obj.max = !Obj.max |
||||||
|
dispatch(updateInvoice(Obj)) |
||||||
|
} |
||||||
|
|
||||||
|
const openLink = (item: string) => { |
||||||
|
window.open('https://www.amazon.com/dp/' + item) |
||||||
|
} |
||||||
|
|
||||||
|
const finishInvoice = (id: number) => { |
||||||
|
DSAmazon.SePuedeTerminarXTraficoFactura(id) |
||||||
|
.then((response) => { |
||||||
|
if (response.data.respuesta.includes('lista')) { |
||||||
|
DSAmazon.TerminaXTraficoFactura(id) |
||||||
|
.then((response) => { |
||||||
|
DSAmazon.PDFAmazonInvoiceGET(id) |
||||||
|
.then((response: any) => { |
||||||
|
if (response.status === 200) { |
||||||
|
const url = window.URL.createObjectURL( |
||||||
|
new Blob([response.data]) |
||||||
|
) |
||||||
|
const link = document.createElement('a') |
||||||
|
link.href = url |
||||||
|
link.setAttribute('download', 'AmazonInvoice.pdf') |
||||||
|
document.body.appendChild(link) |
||||||
|
link.click() |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
}) |
||||||
|
.catch((e: Error) => {}) |
||||||
|
setShowModal(false) |
||||||
|
} else { |
||||||
|
setIDFactura(0) |
||||||
|
setHeader('Informativo') |
||||||
|
setMsg(response.data.respuesta) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setIDFactura(0) |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Card> |
||||||
|
<Card.Body> |
||||||
|
<Row> |
||||||
|
<Col xs={4}> |
||||||
|
<Card.Title> |
||||||
|
<IconContext.Provider value={{ color: '#F6C34F', size: '8%' }}> |
||||||
|
<FaAmazon /> |
||||||
|
</IconContext.Provider>{' '} |
||||||
|
TRAFICO : facturas pendientes |
||||||
|
</Card.Title> |
||||||
|
</Col> |
||||||
|
<Col xs={4}></Col> |
||||||
|
</Row> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
<Row> |
||||||
|
<Col xs={2}></Col> |
||||||
|
<Col xs={8}></Col> |
||||||
|
<Col xs={2} className="totalLabel"></Col> |
||||||
|
</Row> |
||||||
|
<Card> |
||||||
|
<Card.Body> |
||||||
|
<div className="MDcontainer"> |
||||||
|
<Table className="MDTable" hover> |
||||||
|
<thead style={{ position: 'sticky', top: '0' }}> |
||||||
|
<tr> |
||||||
|
<th></th> |
||||||
|
<th style={{ width: '50px' }}>id</th> |
||||||
|
<th style={{ width: '50px' }}></th> |
||||||
|
<th style={{ width: '80px' }}>Commercial Invoice Date</th> |
||||||
|
<th style={{ width: '150px' }}>Invoice Number</th> |
||||||
|
<th style={{ width: '50px' }}>Name</th> |
||||||
|
<th style={{ width: '100px' }}>Incoterms</th> |
||||||
|
<th>Qty Unit of measure</th> |
||||||
|
<th>Tot Qty</th> |
||||||
|
<th>Weight unit of measure</th> |
||||||
|
<th>Tot weight</th> |
||||||
|
<th>Tot Charge or allowance</th> |
||||||
|
<th>Tot currency ISO code</th> |
||||||
|
<th>Tot Monetary amount</th> |
||||||
|
<th style={{ width: '500px' }}>Total de partidas</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
{mInvoices |
||||||
|
? mInvoices.map((MasterData) => { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<tr |
||||||
|
style={{ cursor: 'pointer' }} |
||||||
|
className={ |
||||||
|
MasterData.max === true |
||||||
|
? 'masterSelected' |
||||||
|
: 'normalSelected' |
||||||
|
} |
||||||
|
> |
||||||
|
<td |
||||||
|
style={{ textAlign: 'left' }} |
||||||
|
className={ |
||||||
|
MasterData.max === true |
||||||
|
? 'masterSelected' |
||||||
|
: 'normalSelected' |
||||||
|
} |
||||||
|
key={MasterData.id} |
||||||
|
onClick={() => { |
||||||
|
InvoiceToggle(MasterData) |
||||||
|
}} |
||||||
|
> |
||||||
|
{MasterData.max === true ? ( |
||||||
|
<IconContext.Provider |
||||||
|
value={{ color: 'blue', size: '15px' }} |
||||||
|
> |
||||||
|
<BsChevronDown /> |
||||||
|
</IconContext.Provider> |
||||||
|
) : ( |
||||||
|
<IconContext.Provider |
||||||
|
value={{ color: 'blue', size: '15px' }} |
||||||
|
> |
||||||
|
<BsChevronRight /> |
||||||
|
</IconContext.Provider> |
||||||
|
)} |
||||||
|
</td> |
||||||
|
<td>{MasterData.id}</td> |
||||||
|
<td> |
||||||
|
<FormCheck |
||||||
|
className="form-check form-switch form-control-sm" |
||||||
|
id="switchEnabled" |
||||||
|
type="switch" |
||||||
|
checked={false} |
||||||
|
onChange={() => { |
||||||
|
/* facturaTerminada(MasterData) */ |
||||||
|
setIDFactura(MasterData.id) |
||||||
|
setShowModal(true) |
||||||
|
}} |
||||||
|
label="" |
||||||
|
/> |
||||||
|
</td> |
||||||
|
<td style={{ width: '80px', textAlign: 'center' }}> |
||||||
|
{MasterData.commercialInvoiceDate} |
||||||
|
</td> |
||||||
|
<td style={{ width: '150px' }}> |
||||||
|
{MasterData.invoiceNumber} |
||||||
|
</td> |
||||||
|
<td style={{ width: '50px', textAlign: 'center' }}> |
||||||
|
{MasterData.name} |
||||||
|
</td> |
||||||
|
<td style={{ width: '100px', textAlign: 'center' }}> |
||||||
|
{MasterData.incoterms} |
||||||
|
</td> |
||||||
|
<td style={{ textAlign: 'center' }}> |
||||||
|
{MasterData.totalInvoiceQuantityUnitOfMeasure} |
||||||
|
</td> |
||||||
|
<td style={{ textAlign: 'center' }}> |
||||||
|
{MasterData.totalInvoiceQuantity} |
||||||
|
</td> |
||||||
|
<td style={{ textAlign: 'center' }}> |
||||||
|
{MasterData.totalInvoiceWeightUnitOfMeasure} |
||||||
|
</td> |
||||||
|
<td style={{ textAlign: 'center' }}> |
||||||
|
{MasterData.totalInvoiceWeight} |
||||||
|
</td> |
||||||
|
<td style={{ textAlign: 'center' }}> |
||||||
|
{MasterData.totalInvoiceValueChargeOrAllowance} |
||||||
|
</td> |
||||||
|
<td style={{ textAlign: 'center' }}> |
||||||
|
{MasterData.totalInvoiceValueCurrencyISOCode} |
||||||
|
</td> |
||||||
|
<td style={{ textAlign: 'center' }}> |
||||||
|
{MasterData.totalInvoiceValueMonetaryAmount} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
fontWeight: 'bold', |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
> |
||||||
|
{mInvoices |
||||||
|
.filter((value) => value.id === MasterData.id) |
||||||
|
.map((row) => { |
||||||
|
return row.detail.length |
||||||
|
})} |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
{MasterData.max ? ( |
||||||
|
<tr |
||||||
|
className={ |
||||||
|
MasterData.max === true |
||||||
|
? 'masterSelected2' |
||||||
|
: 'normalSelected2' |
||||||
|
} |
||||||
|
> |
||||||
|
<th colSpan={10}> |
||||||
|
<table |
||||||
|
className="childTable" |
||||||
|
style={{ width: '1450px' }} |
||||||
|
> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '50px', |
||||||
|
backgroundColor: '#FFFFFF', |
||||||
|
color: '#346288' |
||||||
|
}} |
||||||
|
></th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '100px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288' |
||||||
|
}} |
||||||
|
> |
||||||
|
Item Id |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '400px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288' |
||||||
|
}} |
||||||
|
> |
||||||
|
Item Description |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '120px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288', |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
> |
||||||
|
Fraccion GEMCO |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '70px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288', |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
> |
||||||
|
Descripcion GEMCO |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '70px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288', |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
> |
||||||
|
Country of Origin |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '70px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288' |
||||||
|
}} |
||||||
|
> |
||||||
|
ProductGroup |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '70px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288' |
||||||
|
}} |
||||||
|
> |
||||||
|
Brand |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '70px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288' |
||||||
|
}} |
||||||
|
> |
||||||
|
Model |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '70px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288' |
||||||
|
}} |
||||||
|
> |
||||||
|
Unit Measure |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '70px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288' |
||||||
|
}} |
||||||
|
> |
||||||
|
Qty Shipped |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '70px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288' |
||||||
|
}} |
||||||
|
> |
||||||
|
Unit of measure |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '70px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288' |
||||||
|
}} |
||||||
|
> |
||||||
|
Unit Net Weight |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '70px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288' |
||||||
|
}} |
||||||
|
> |
||||||
|
Unit Cost |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '70px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288' |
||||||
|
}} |
||||||
|
> |
||||||
|
Total value |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '70px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288' |
||||||
|
}} |
||||||
|
> |
||||||
|
Sight line |
||||||
|
</th> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '70px', |
||||||
|
backgroundColor: '#D3E0EA', |
||||||
|
color: '#346288' |
||||||
|
}} |
||||||
|
> |
||||||
|
Comentarios |
||||||
|
</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
{mInvoices.map((MD) => { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
{MD.detail |
||||||
|
.filter( |
||||||
|
(detail) => |
||||||
|
MasterData.id === |
||||||
|
detail.idHeader |
||||||
|
) |
||||||
|
.map((detail) => { |
||||||
|
return ( |
||||||
|
<RtpAmazonPendingTraficInvoiceDetail |
||||||
|
IDMaster={MasterData.id} |
||||||
|
detail={detail} |
||||||
|
Habilitado={ |
||||||
|
MasterData.estatus <= 1 |
||||||
|
} |
||||||
|
/> |
||||||
|
) |
||||||
|
})} |
||||||
|
</> |
||||||
|
) |
||||||
|
})} |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
</th> |
||||||
|
</tr> |
||||||
|
) : null} |
||||||
|
</> |
||||||
|
) |
||||||
|
}) |
||||||
|
: null} |
||||||
|
</tbody> |
||||||
|
</Table> |
||||||
|
</div> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
<Modal |
||||||
|
show={ShowModal} |
||||||
|
onHide={() => { |
||||||
|
setShowModal(false) |
||||||
|
}} |
||||||
|
size={'sm'} |
||||||
|
dialogClassName={'modal-50w'} |
||||||
|
> |
||||||
|
<Modal.Body> |
||||||
|
<div style={{ height: '180px' }}> |
||||||
|
<Row style={{ paddingTop: '15px' }}> |
||||||
|
<Col xs={1}></Col> |
||||||
|
<Col xs={10}> |
||||||
|
<Alert key={'danger'} variant={'danger'}> |
||||||
|
La factura esta lista para terminarse, desea terminarla? |
||||||
|
</Alert> |
||||||
|
</Col> |
||||||
|
<Col xs={1}></Col> |
||||||
|
</Row> |
||||||
|
<Row style={{ paddingTop: '15px' }}> |
||||||
|
<Col xs={6} style={{ textAlign: 'center' }}> |
||||||
|
<Button |
||||||
|
variant="secondary" |
||||||
|
onClick={() => { |
||||||
|
setShowModal(false) |
||||||
|
}} |
||||||
|
> |
||||||
|
No |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col xs={6} style={{ textAlign: 'center' }}> |
||||||
|
<Button |
||||||
|
variant="danger" |
||||||
|
onClick={() => { |
||||||
|
finishInvoice(IDFactura) |
||||||
|
}} |
||||||
|
> |
||||||
|
Si |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</div> |
||||||
|
</Modal.Body> |
||||||
|
</Modal> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
Loading…
Reference in new issue