parent
5cb3585865
commit
344be46504
File diff suppressed because it is too large
Load Diff
@ -1,104 +1,104 @@ |
|||||||
import React, { useState } from 'react'; |
// import React, { useState } from 'react';
|
||||||
import axios from 'axios'; |
// import axios from 'axios';
|
||||||
import '../Interfaces/InvoiceDetail'; |
// import '../Interfaces/InvoiceDetail';
|
||||||
import '../Interfaces/Invoice'; |
// import '../Interfaces/Invoice';
|
||||||
import '../HojasDeEstilo/AmazonInovice.css'; |
// import '../HojasDeEstilo/AmazonInovice.css';
|
||||||
|
|
||||||
const AmazonInvoice: React.FC = () => { |
// const AmazonInvoice: React.FC = () => {
|
||||||
const [id, setId] = useState(''); |
// const [id, setId] = useState('');
|
||||||
const [invoice, setInvoice] = useState<Invoice | null>(null); |
// const [invoice, setInvoice] = useState<Invoice | null>(null);
|
||||||
const [showDetails, setShowDetails] = useState(false); |
// const [showDetails, setShowDetails] = useState(false);
|
||||||
|
|
||||||
const handleIdChange = (e: React.ChangeEvent<HTMLInputElement>) => { |
// const handleIdChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
setId(e.target.value); |
// setId(e.target.value);
|
||||||
}; |
// };
|
||||||
|
|
||||||
const handleConsultClick = () => { |
// const handleConsultClick = () => {
|
||||||
axios |
// axios
|
||||||
.get<Invoice[]>(`https://localhost:5051/api/AmazonInvoice/AmazonInvoiceGET?id=${id}`) |
// .get<Invoice[]>(`https://localhost:5051/api/AmazonInvoice/AmazonInvoiceGET?id=${id}`)
|
||||||
// .get<Invoice[]>(`https://localhost:5051/api/AmazonInvoice/AmazonInvoiceGETselect?id=${id}`)
|
// // .get<Invoice[]>(`https://localhost:5051/api/AmazonInvoice/AmazonInvoiceGETselect?id=${id}`)
|
||||||
.then((response) => { |
// .then((response) => {
|
||||||
const invoiceData: Invoice[] = response.data; |
// const invoiceData: Invoice[] = response.data;
|
||||||
if (invoiceData.length > 0) { |
// if (invoiceData.length > 0) {
|
||||||
setInvoice(invoiceData[0]); |
// setInvoice(invoiceData[0]);
|
||||||
setShowDetails(true); // Mostrar automáticamente los detalles
|
// setShowDetails(true); // Mostrar automáticamente los detalles
|
||||||
} else { |
// } else {
|
||||||
setInvoice(null); |
// setInvoice(null);
|
||||||
setShowDetails(false); |
// setShowDetails(false);
|
||||||
} |
// }
|
||||||
}) |
// })
|
||||||
.catch((error) => { |
// .catch((error) => {
|
||||||
console.log(error); |
// console.log(error);
|
||||||
}); |
// });
|
||||||
}; |
// };
|
||||||
|
|
||||||
return ( |
// return (
|
||||||
<div> |
// <div>
|
||||||
<h1>Amazon Invoice</h1> |
// <h1>Amazon Invoice</h1>
|
||||||
<label> |
// <label>
|
||||||
ID: |
// ID:
|
||||||
<input type="text" value={id} onChange={handleIdChange} /> |
// <input type="text" value={id} onChange={handleIdChange} />
|
||||||
</label> |
// </label>
|
||||||
<button onClick={handleConsultClick}>Consultar</button> |
// <button onClick={handleConsultClick}>Consultar</button>
|
||||||
{invoice && ( |
// {invoice && (
|
||||||
<div> |
// <div>
|
||||||
<h2>Master:</h2> |
// <h2>Master:</h2>
|
||||||
<table className="table table-striped table-dark"> |
// <table className="table table-striped table-dark">
|
||||||
<thead> |
// <thead>
|
||||||
<tr> |
// <tr>
|
||||||
<th>Id</th> |
// <th>Id</th>
|
||||||
<th>Referencia</th> |
// <th>Referencia</th>
|
||||||
<th>FechaFactura</th> |
// <th>FechaFactura</th>
|
||||||
<th>FechaCreacion</th> |
// <th>FechaCreacion</th>
|
||||||
<th>Clasificador</th> |
// <th>Clasificador</th>
|
||||||
<th>Estatus</th> |
// <th>Estatus</th>
|
||||||
<th>Trailer Id</th> |
// <th>Trailer Id</th>
|
||||||
<th>Detalle</th> |
// <th>Detalle</th>
|
||||||
</tr> |
// </tr>
|
||||||
</thead> |
// </thead>
|
||||||
<tbody> |
// <tbody>
|
||||||
<tr> |
// <tr>
|
||||||
<td onClick={() => setShowDetails(!showDetails)}>ID: {invoice.id}</td> |
// <td onClick={() => setShowDetails(!showDetails)}>ID: {invoice.id}</td>
|
||||||
<td>Referencia: {invoice.referencia}</td> |
// <td>Referencia: {invoice.referencia}</td>
|
||||||
<td>Fecha de la factura: {invoice.commercialInvoiceDate}</td> |
// <td>Fecha de la factura: {invoice.commercialInvoiceDate}</td>
|
||||||
<td>Fecha de creación: {invoice.fCreacion}</td> |
// <td>Fecha de creación: {invoice.fCreacion}</td>
|
||||||
<td>Clasificador: {invoice.clasificador}</td> |
// <td>Clasificador: {invoice.clasificador}</td>
|
||||||
<td>Estatus: {invoice.estatus}</td> |
// <td>Estatus: {invoice.estatus}</td>
|
||||||
<td>Trailer ID: {invoice.trailerId || 'N/A'}</td> |
// <td>Trailer ID: {invoice.trailerId || 'N/A'}</td>
|
||||||
<td> |
// <td>
|
||||||
{showDetails && ( |
// {showDetails && (
|
||||||
<table className="table table-striped"> |
// <table className="table table-striped">
|
||||||
<thead> |
// <thead>
|
||||||
<tr> |
// <tr>
|
||||||
<th>Id Header</th> |
// <th>Id Header</th>
|
||||||
<th>ID de factura</th> |
// <th>ID de factura</th>
|
||||||
<th>Amazon Shipment Reference ID</th> |
// <th>Amazon Shipment Reference ID</th>
|
||||||
<th>Item ID</th> |
// <th>Item ID</th>
|
||||||
<th>Fecha de creación</th> |
// <th>Fecha de creación</th>
|
||||||
</tr> |
// </tr>
|
||||||
</thead> |
// </thead>
|
||||||
<tbody> |
// <tbody>
|
||||||
{invoice.detail.map((detail, index) => ( |
// {invoice.detail.map((detail, index) => (
|
||||||
<tr key={index}> |
// <tr key={index}>
|
||||||
<td>{detail.idHeader}</td> |
// <td>{detail.idHeader}</td>
|
||||||
<td>{detail.invoiceNumber}</td> |
// <td>{detail.invoiceNumber}</td>
|
||||||
<td>{detail.amazonShipmentReferenceId}</td> |
// <td>{detail.amazonShipmentReferenceId}</td>
|
||||||
<td>{detail.itemId}</td> |
// <td>{detail.itemId}</td>
|
||||||
<td>{detail.fCreacion}</td> |
// <td>{detail.fCreacion}</td>
|
||||||
</tr> |
// </tr>
|
||||||
))} |
// ))}
|
||||||
</tbody> |
// </tbody>
|
||||||
</table> |
// </table>
|
||||||
)} |
// )}
|
||||||
</td> |
// </td>
|
||||||
</tr> |
// </tr>
|
||||||
</tbody> |
// </tbody>
|
||||||
</table> |
// </table>
|
||||||
|
|
||||||
</div> |
// </div>
|
||||||
)} |
// )}
|
||||||
</div> |
// </div>
|
||||||
); |
// );
|
||||||
}; |
// };
|
||||||
|
|
||||||
export default AmazonInvoice; |
// export default AmazonInvoice;
|
@ -1,21 +1,60 @@ |
|||||||
.table-container { |
.container { |
||||||
margin-top: 20px; |
margin-top: 20px; |
||||||
} |
} |
||||||
|
|
||||||
.table { |
.table { |
||||||
width: 100%; |
width: 100%; |
||||||
|
border-collapse: collapse; |
||||||
} |
} |
||||||
|
|
||||||
.table th { |
.table th { |
||||||
background-color: #95c030; |
background-color: #95c030; |
||||||
|
color: white; |
||||||
text-align: center; |
text-align: center; |
||||||
|
padding: 8px; |
||||||
} |
} |
||||||
|
|
||||||
.table td { |
.table td { |
||||||
text-align: center; |
text-align: center; |
||||||
|
padding: 8px; |
||||||
} |
} |
||||||
|
|
||||||
h1{ |
.pagination-container { |
||||||
background-color: grey; |
margin-top: 20px; |
||||||
color: white; |
display: flex; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
.pagination { |
||||||
|
display: inline-flex; |
||||||
|
list-style: none; |
||||||
|
padding: 0; |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.pagination li { |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
.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,11 +1,21 @@ |
|||||||
interface Invoice { |
// import { InvoiceDetail , Invoice} from "./InvoiceDetail";
|
||||||
id: number; |
|
||||||
referencia: string; |
export interface Invoice { |
||||||
commercialInvoiceDate: string; |
id: number; |
||||||
fCreacion: string; |
referencia: string; |
||||||
clasificador: number; |
commercialInvoiceDate: string; |
||||||
estatus: number; |
fCreacion: string; |
||||||
trailerId: string | null; |
clasificador: number; |
||||||
detail: InvoiceDetail[]; |
estatus: number; |
||||||
} |
trailerId: string | null; |
||||||
|
detail: InvoiceDetail[]; |
||||||
|
} |
||||||
|
|
||||||
|
export interface InvoiceDetail { |
||||||
|
idHeader: number; |
||||||
|
invoiceNumber: string; |
||||||
|
amazonShipmentReferenceId: string; |
||||||
|
itemId: string; |
||||||
|
fCreacion: string; |
||||||
|
|
||||||
|
} |
||||||
|
@ -1,7 +1,10 @@ |
|||||||
interface InvoiceDetail { |
|
||||||
idHeader: number; |
|
||||||
invoiceNumber: string; |
export interface InvoiceDetail { |
||||||
amazonShipmentReferenceId: string; |
idHeader: number; |
||||||
itemId: string; |
invoiceNumber: string; |
||||||
fCreacion: 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