7-Junio-2023

package.json

@@ -11,19 +11,24 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.31",
-    "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
+    "ag-grid-community": "^29.3.5",
+    "ag-grid-react": "^29.3.5",
     "axios": "^1.4.0",
     "bootstrap": "^5.3.0",
     "buffer": "^6.0.3",
+    "devextreme": "^22.2.4",
+    "devextreme-react": "^22.2.6",
     "jsonwebtoken": "^9.0.0",
     "jwt-decode": "^3.1.2",
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.4",
     "react-bootstrap-table-next": "^4.0.3",
+    "react-data-grid": "^7.0.0-beta.32",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.11.2",
     "react-scripts": "5.0.1",
+    "react-table": "^7.8.0",
     "typescript": "^5.0.4",
     "web-vitals": "^2.1.4"
   },
@@ -50,5 +55,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.8",
+    "devextreme-themebuilder": "^22.2.4"
   }
 }

src/App.tsx

@@ -1,3 +1,4 @@
+import 'devextreme/dist/css/dx.light.css';
 import React, { useEffect, useState } from 'react';
 import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
 import axios from 'axios';

src/Componentes/AmazonInvoice.tsx

@@ -1,49 +1,35 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import axios from 'axios';
-import '../Interfaces/InvoiceDetail';
+import { Invoice } from '../Interfaces/Invoice';
-import '../Interfaces/Invoice';
+import '../HojasDeEstilo/AmazonInovice.css'
-import '../HojasDeEstilo/AmazonInovice.css';
 
 const AmazonInvoice: React.FC = () => {
-  const [id, setId] = useState('');
+  const [invoices, setInvoices] = useState<Invoice[]>([]);
-  const [invoice, setInvoice] = useState<Invoice | null>(null);
+  const [currentPage, setCurrentPage] = useState(1);
-  const [showDetails, setShowDetails] = useState(false);
+  const [itemsPerPage] = useState(20);
 
-  const handleIdChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  useEffect(() => {
-    setId(e.target.value);
-  };
-
-  const handleConsultClick = () => {
     axios
-      .get<Invoice[]>(`https://localhost:5051/api/AmazonInvoice/AmazonInvoiceGET?id=${id}`)
+      .get<Invoice[]>(`https://localhost:5051/api/AmazonInvoice/AmazonInvoiceIdMaster`)
       .then((response) => {
         const invoiceData: Invoice[] = response.data;
-        if (invoiceData.length > 0) {
+        setInvoices(invoiceData);
-          setInvoice(invoiceData[0]);
-          setShowDetails(true); // Mostrar automáticamente los detalles
-        } else {
-          setInvoice(null);
-          setShowDetails(false);
-        }
       })
       .catch((error) => {
         console.log(error);
       });
-  };
+  }, []);
+
+  const indexOfLastItem = currentPage * itemsPerPage;
+  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+  const currentInvoices = invoices.slice(indexOfFirstItem, indexOfLastItem);
+
+  const paginate = (pageNumber: number) => setCurrentPage(pageNumber);
 
   return (
     <div className="container">
       <h1>Amazon Invoice</h1>
-      <div className="form-group">
+      <table className="table table-striped">
-        <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 className="master-grid">
-          <div className="master-grid-item">
-            <h2>Master:</h2>
-            <table className="table table-striped table-dark">
         <thead>
           <tr>
             <th>Id</th>
@@ -56,47 +42,28 @@ const AmazonInvoice: React.FC = () => {
           </tr>
         </thead>
         <tbody>
-                <tr>
+          {currentInvoices.map((invoice: Invoice) => (
-                  <td onClick={() => setShowDetails(!showDetails)}>
+            <tr key={invoice.id}>
-                    ID: {invoice.id}
+              <td>{invoice.id}</td>
-                    {showDetails && (
+              <td>{invoice.referencia}</td>
-                      <table className="table table-striped">
+              <td>{invoice.commercialInvoiceDate}</td>
-                        <thead>
+              <td>{invoice.fCreacion}</td>
-                          <tr>
+              <td>{invoice.clasificador}</td>
-                            <th>Id Header</th>
+              <td>{invoice.estatus}</td>
-                            <th>ID de factura</th>
+              <td>{invoice.trailerId || 'N/A'}</td>
-                            <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>
-                    )}
+      <ul className="pagination">
-                  </td>
+        {Array.from({ length: Math.ceil(invoices.length / itemsPerPage) }).map((_, index) => (
-                  <td>Referencia: {invoice.referencia}</td>
+          <li key={index} className={`page-item ${currentPage === index + 1 ? 'active' : ''}`}>
-                  <td>Fecha de la factura: {invoice.commercialInvoiceDate}</td>
+            <button className="page-link" onClick={() => paginate(index + 1)}>
-                  <td>Fecha de creación: {invoice.fCreacion}</td>
+              {index + 1}
-                  <td>Clasificador: {invoice.clasificador}</td>
+            </button>
-                  <td>Estatus: {invoice.estatus}</td>
+          </li>
-                  <td>Trailer ID: {invoice.trailerId || 'N/A'}</td>
+        ))}
-                  <td></td> {/* Espacio en blanco para alinear correctamente las columnas */}
+      </ul>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      )}
     </div>
   );
 };

src/Componentes/AmazonInvoice1.1.tsx

@@ -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;

src/HojasDeEstilo/AmazonInovice.css

@@ -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{
+.pagination li button {
-  background-color: grey;
+  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
+}

src/Interfaces/Invoice.ts

@@ -1,4 +1,6 @@
-interface Invoice {
+// import { InvoiceDetail , Invoice} from "./InvoiceDetail";
+
+export interface Invoice {
   id: number;
   referencia: string;
   commercialInvoiceDate: string;
@@ -7,5 +9,13 @@ interface Invoice {
   estatus: number;
   trailerId: string | null;
   detail: InvoiceDetail[];
-  }
+}
+
+export interface InvoiceDetail {
+  idHeader: number;
+  invoiceNumber: string;
+  amazonShipmentReferenceId: string;
+  itemId: string;
+  fCreacion: string;
   
+}

src/Interfaces/InvoiceDetail.ts

@@ -1,7 +1,10 @@
-interface InvoiceDetail {
+
+
+export interface InvoiceDetail {
   idHeader: number;
   invoiceNumber: string;
   amazonShipmentReferenceId: string;
   itemId: string;
   fCreacion: string;
-  }
+  
+}

src/Interfaces/InvoiceDetail1.1.ts

@@ -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;
-}

src/Interfaces/InvoiceMaster.ts

@@ -1,9 +1,9 @@
         
-      interface I2096Detail {
+      // interface I2096Detail {
-        // Define properties for I2096Detail if it has any specific properties
+      //   // Define properties for I2096Detail if it has any specific properties
-      }
+      // }
       
-      interface Invoice1 {
+      interface InvoiceMaster {
         Id: number;
         Referencia: string;
         CommercialInvoiceDate: string;
@@ -26,10 +26,7 @@
         FootNote: string;
         Archivo: string;
         FCreacion: string;
-        Clasificador: number;
+        
-        NoVuelta: number;
+        // Detail: I2096Detail[];
-        Estatus: number;
-        max: boolean;
-        Detail: I2096Detail[];
       }