Luis Angel Rendon Arrazola
1 year ago
parent
27daffe987
commit
833160ae41
@ -0,0 +1,104 @@ |
|||||||
|
import React, { useState } from 'react'; |
||||||
|
import axios from 'axios'; |
||||||
|
import '../Interfaces/InvoiceDetail'; |
||||||
|
import '../Interfaces/Invoice'; |
||||||
|
import '../HojasDeEstilo/AmazonInovice.css'; |
||||||
|
|
||||||
|
const AmazonInvoice: React.FC = () => { |
||||||
|
const [id, setId] = useState(''); |
||||||
|
const [invoice, setInvoice] = useState<Invoice | null>(null); |
||||||
|
const [showDetails, setShowDetails] = useState(false); |
||||||
|
|
||||||
|
const handleIdChange = (e: React.ChangeEvent<HTMLInputElement>) => { |
||||||
|
setId(e.target.value); |
||||||
|
}; |
||||||
|
|
||||||
|
const handleConsultClick = () => { |
||||||
|
axios |
||||||
|
.get<Invoice[]>(`https://localhost:5051/api/AmazonInvoice/AmazonInvoiceGET?id=${id}`) |
||||||
|
// .get<Invoice[]>(`https://localhost:5051/api/AmazonInvoice/AmazonInvoiceGETselect?id=${id}`)
|
||||||
|
.then((response) => { |
||||||
|
const invoiceData: Invoice[] = response.data; |
||||||
|
if (invoiceData.length > 0) { |
||||||
|
setInvoice(invoiceData[0]); |
||||||
|
setShowDetails(true); // Mostrar automáticamente los detalles
|
||||||
|
} else { |
||||||
|
setInvoice(null); |
||||||
|
setShowDetails(false); |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((error) => { |
||||||
|
console.log(error); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<h1>Amazon Invoice</h1> |
||||||
|
<label> |
||||||
|
ID: |
||||||
|
<input type="text" value={id} onChange={handleIdChange} /> |
||||||
|
</label> |
||||||
|
<button onClick={handleConsultClick}>Consultar</button> |
||||||
|
{invoice && ( |
||||||
|
<div> |
||||||
|
<h2>Master:</h2> |
||||||
|
<table className="table table-striped table-dark"> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th>Id</th> |
||||||
|
<th>Referencia</th> |
||||||
|
<th>FechaFactura</th> |
||||||
|
<th>FechaCreacion</th> |
||||||
|
<th>Clasificador</th> |
||||||
|
<th>Estatus</th> |
||||||
|
<th>Trailer Id</th> |
||||||
|
<th>Detalle</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
<tr> |
||||||
|
<td onClick={() => setShowDetails(!showDetails)}>ID: {invoice.id}</td> |
||||||
|
<td>Referencia: {invoice.referencia}</td> |
||||||
|
<td>Fecha de la factura: {invoice.commercialInvoiceDate}</td> |
||||||
|
<td>Fecha de creación: {invoice.fCreacion}</td> |
||||||
|
<td>Clasificador: {invoice.clasificador}</td> |
||||||
|
<td>Estatus: {invoice.estatus}</td> |
||||||
|
<td>Trailer ID: {invoice.trailerId || 'N/A'}</td> |
||||||
|
<td> |
||||||
|
{showDetails && ( |
||||||
|
<table className="table table-striped"> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th>Id Header</th> |
||||||
|
<th>ID de factura</th> |
||||||
|
<th>Amazon Shipment Reference ID</th> |
||||||
|
<th>Item ID</th> |
||||||
|
<th>Fecha de creación</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
{invoice.detail.map((detail, index) => ( |
||||||
|
<tr key={index}> |
||||||
|
<td>{detail.idHeader}</td> |
||||||
|
<td>{detail.invoiceNumber}</td> |
||||||
|
<td>{detail.amazonShipmentReferenceId}</td> |
||||||
|
<td>{detail.itemId}</td> |
||||||
|
<td>{detail.fCreacion}</td> |
||||||
|
</tr> |
||||||
|
))} |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
)} |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
|
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default AmazonInvoice; |
||||||
@ -0,0 +1,35 @@ |
|||||||
|
|
||||||
|
interface I2096Detail { |
||||||
|
// Define properties for I2096Detail if it has any specific properties
|
||||||
|
} |
||||||
|
|
||||||
|
interface Invoice1 { |
||||||
|
Id: number; |
||||||
|
Referencia: string; |
||||||
|
CommercialInvoiceDate: string; |
||||||
|
InvoiceNumber: string; |
||||||
|
Name: string; |
||||||
|
TrailerNumber: string; |
||||||
|
TrailerId: string; |
||||||
|
PorOfLoading: string; |
||||||
|
PortOfEntry: string; |
||||||
|
PaymentsTerms: string; |
||||||
|
Incoterms: string; |
||||||
|
HAWB: string; |
||||||
|
TotalInvoiceQuantityUnitOfMeasure: string; |
||||||
|
TotalInvoiceQuantity: number; |
||||||
|
TotalInvoiceWeightUnitOfMeasure: string; |
||||||
|
TotalInvoiceWeight: number; |
||||||
|
TotalInvoiceValueChargeOrAllowance: string; |
||||||
|
TotalInvoiceValueCurrencyISOCode: string; |
||||||
|
TotalInvoiceValueMonetaryAmount: number; |
||||||
|
FootNote: string; |
||||||
|
Archivo: string; |
||||||
|
FCreacion: string; |
||||||
|
Clasificador: number; |
||||||
|
NoVuelta: number; |
||||||
|
Estatus: number; |
||||||
|
max: boolean; |
||||||
|
Detail: I2096Detail[]; |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,46 @@ |
|||||||
|
interface InvoiceDetail1 { |
||||||
|
Id: number; |
||||||
|
IdHeader: number; |
||||||
|
InvoiceNumber: string; |
||||||
|
AmazonShipmentReferenceId: string; |
||||||
|
Partida: number; |
||||||
|
TrailerId: string; |
||||||
|
ItemId: string; |
||||||
|
ItemIdType: string; |
||||||
|
ItemDescription: string; |
||||||
|
PedimentoDescription: string; |
||||||
|
DestinationHTSCode: string; |
||||||
|
ValidaFraccionOriginal: number; |
||||||
|
ConfirmaFraccion: number; |
||||||
|
FraccionGEMCO: string; |
||||||
|
ConfirmaDescripcion: number; |
||||||
|
DescripcionGEMCO: string; |
||||||
|
SourceHTSCode: string; |
||||||
|
ECCN: string; |
||||||
|
LicEx: string; |
||||||
|
CountryOfOrigin: string; |
||||||
|
ProductGroup: string; |
||||||
|
UPC: string; |
||||||
|
Brand: string; |
||||||
|
Model: string; |
||||||
|
ItemQuantityUnitOfMeasure: string; |
||||||
|
Quantity: number; |
||||||
|
NetWeightUnitOfMeasure: string; |
||||||
|
WeightValue: number; |
||||||
|
ActualUnitCostChargeOrAllowance: string; |
||||||
|
ActualUnitCostCurrencyISOCode: string; |
||||||
|
ActualUnitCostMonetaryAmount: number; |
||||||
|
TotalUnitValueChargeOrAllowance: string; |
||||||
|
TotalUnitValueCurrencyISOCode: string; |
||||||
|
TotalUnitValueMonetaryAmount: number; |
||||||
|
Archivo: string; |
||||||
|
FCreacion: string; |
||||||
|
Estatus: number; |
||||||
|
Autorizado: boolean; |
||||||
|
CumplimientoNormativo: string; |
||||||
|
Comentarios: string; |
||||||
|
SightLine: boolean; |
||||||
|
ComentariosSightLine: string; |
||||||
|
Checked: boolean; |
||||||
|
Activo: number; |
||||||
|
} |
||||||
Loading…
Reference in new issue