Luis Angel Rendon Arrazola
1 year ago
parent
5cb3585865
commit
344be46504
File diff suppressed because it is too large
Load Diff
@ -1,104 +1,104 @@ |
||||
import React, { useState } from 'react'; |
||||
import axios from 'axios'; |
||||
import '../Interfaces/InvoiceDetail'; |
||||
import '../Interfaces/Invoice'; |
||||
import '../HojasDeEstilo/AmazonInovice.css'; |
||||
// 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 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 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); |
||||
}); |
||||
}; |
||||
// 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> |
||||
// 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> |
||||
); |
||||
}; |
||||
// </div>
|
||||
// )}
|
||||
// </div>
|
||||
// );
|
||||
// };
|
||||
|
||||
export default AmazonInvoice; |
||||
// export default AmazonInvoice;
|
||||
@ -1,21 +1,60 @@ |
||||
.table-container { |
||||
.container { |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
.table { |
||||
width: 100%; |
||||
border-collapse: collapse; |
||||
} |
||||
|
||||
.table th { |
||||
background-color: #95c030; |
||||
color: white; |
||||
text-align: center; |
||||
padding: 8px; |
||||
} |
||||
|
||||
.table td { |
||||
text-align: center; |
||||
padding: 8px; |
||||
} |
||||
|
||||
.pagination-container { |
||||
margin-top: 20px; |
||||
display: flex; |
||||
justify-content: center; |
||||
} |
||||
|
||||
.pagination { |
||||
display: inline-flex; |
||||
list-style: none; |
||||
padding: 0; |
||||
margin: 0; |
||||
} |
||||
|
||||
.pagination li { |
||||
margin-right: 5px; |
||||
} |
||||
|
||||
h1{ |
||||
background-color: grey; |
||||
.pagination li button { |
||||
display: inline-block; |
||||
padding: 5px 10px; |
||||
border: 1px solid #ddd; |
||||
background-color: #f5f5f5; |
||||
color: #333; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.pagination li button:hover { |
||||
background-color: #e9e9e9; |
||||
} |
||||
|
||||
.pagination li.active button { |
||||
background-color: #95c030; |
||||
color: white; |
||||
} |
||||
|
||||
h1 { |
||||
|
||||
color: white |
||||
} |
||||
@ -1,7 +1,10 @@ |
||||
interface InvoiceDetail { |
||||
|
||||
|
||||
export interface InvoiceDetail { |
||||
idHeader: number; |
||||
invoiceNumber: string; |
||||
amazonShipmentReferenceId: string; |
||||
itemId: string; |
||||
fCreacion: string; |
||||
} |
||||
|
||||
} |
||||
|
||||
@ -1,46 +0,0 @@ |
||||
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