3 Junio-2023

src/Componentes/AmazonInvoice.tsx

@@ -15,8 +15,7 @@ const AmazonInvoice: React.FC = () => {
 
   const handleConsultClick = () => {
     axios
-        .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/AmazonInvoiceGET?id=${id}`)
       .then((response) => {
         const invoiceData: Invoice[] = response.data;
         if (invoiceData.length > 0) {
@@ -33,68 +32,69 @@ const AmazonInvoice: React.FC = () => {
   };
 
   return (
-    <div>
+    <div className="container">
       <h1>Amazon Invoice</h1>
-      <label>
-        ID:
-        <input type="text" value={id} onChange={handleIdChange} />
-      </label>
-      <button onClick={handleConsultClick}>Consultar</button>
+      <div className="form-group">
+        <label htmlFor="id">ID:</label>
+        <input id="id" type="text" value={id} onChange={handleIdChange} className="form-control" />
+      </div>
+      <button onClick={handleConsultClick} className="btn btn-primary">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>
-                
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td onClick={() => setShowDetails(!showDetails)}>
-                  ID: {invoice.id}
-                  {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>
+        <div className="master-grid">
+          <div className="master-grid-item">
+            <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>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td onClick={() => setShowDetails(!showDetails)}>
+                    ID: {invoice.id}
+                    {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>
-                        ))}
-                      </tbody>
-                    </table>
-                  )}
-                </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></td> {/* Espacio en blanco para alinear correctamente las columnas */}
-              </tr>
-            </tbody>
-          </table>
+                        </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>
+                  <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></td> {/* Espacio en blanco para alinear correctamente las columnas */}
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
       )}
     </div>
@@ -102,5 +102,3 @@ const AmazonInvoice: React.FC = () => {
 };
 
 export default AmazonInvoice;
-
-