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