16Junio-2023

package-lock.json

@@ -33,6 +33,7 @@
         "react-bootstrap-table-next": "^4.0.3",
         "react-data-grid": "^7.0.0-beta.32",
         "react-dom": "^18.2.0",
+        "react-icons": "^4.9.0",
         "react-router-dom": "^6.12.1",
         "react-scripts": "5.0.1",
         "react-table": "^7.8.0",
@@ -16627,6 +16628,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-icons": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.9.0.tgz",
+      "integrity": "sha512-ijUnFr//ycebOqujtqtV9PFS7JjhWg0QU6ykURVHuL4cbofvRCf3f6GMn9+fBktEFQOIVZnuAYLZdiyadRQRFg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -32023,6 +32032,12 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-icons": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.9.0.tgz",
+      "integrity": "sha512-ijUnFr//ycebOqujtqtV9PFS7JjhWg0QU6ykURVHuL4cbofvRCf3f6GMn9+fBktEFQOIVZnuAYLZdiyadRQRFg==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

package.json

@@ -28,6 +28,7 @@
     "react-bootstrap-table-next": "^4.0.3",
     "react-data-grid": "^7.0.0-beta.32",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.9.0",
     "react-router-dom": "^6.12.1",
     "react-scripts": "5.0.1",
     "react-table": "^7.8.0",

src/Componentes/AmazonInvoice.tsx

@@ -1,20 +1,18 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import { Invoice, InvoiceDetail } from '../Interfaces/Invoice';
-import { BsFillPencilFill } from 'react-icons/bs';
+import { BsFillPencilFill, BsCaretDownFill, BsChevronLeft, BsChevronRight } from 'react-icons/bs';
 import '../HojasDeEstilo/AmazonInovice.css';
 
-const AmazonInvoice: React.FC = () => {   
+const AmazonInvoice: React.FC = () => {
   const [invoices, setInvoices] = useState<Invoice[]>([]);
   const [currentPage, setCurrentPage] = useState(1);
-  const [itemsPerPage] = useState(27);
+  const [itemsPerPage] = useState(17);
   const [selectedInvoiceId, setSelectedInvoiceId] = useState<number | null>(null);
   const [invoiceDetails, setInvoiceDetails] = useState<InvoiceDetail[]>([]);
   const [editedReference, setEditedReference] = useState('');
   const [editedClasificador, setEditedClasificador] = useState(0);
 
-
-
   useEffect(() => {
     axios
       .get<Invoice[]>(`https://localhost:5051/api/AmazonInvoice/AmazonInvoiceIdMaster`)
@@ -44,8 +42,8 @@ const AmazonInvoice: React.FC = () => {
       axios
         .get<InvoiceDetail[]>(`https://localhost:5051/api/AmazonInvoice/AmazonInvoicedetailid`, {
           params: {
-            id: id
-          }
+            id: id,
+          },
         })
         .then((response) => {
           const invoiceDetailData: InvoiceDetail[] = response.data;
@@ -69,7 +67,7 @@ const AmazonInvoice: React.FC = () => {
       const updatedData = {
         id: id,
         referencia: newReference,
-        clasificador: parseInt(newClasificador)
+        clasificador: parseInt(newClasificador),
       };
 
       setSelectedInvoiceId(id);
@@ -81,7 +79,7 @@ const AmazonInvoice: React.FC = () => {
             return {
               ...invoice,
               referencia: updatedData.referencia,
-              clasificador: updatedData.clasificador
+              clasificador: updatedData.clasificador,
             };
           }
           return invoice;
@@ -92,8 +90,8 @@ const AmazonInvoice: React.FC = () => {
       axios
         .put(`https://localhost:5051/api/AmazonInvoice/AmazonInvoiceMasterPut/`, updatedData, {
           headers: {
-            'Content-Type': 'application/json'
-          }
+            'Content-Type': 'application/json',
+          },
         })
         .catch((error) => {
           console.log(error);
@@ -107,7 +105,10 @@ const AmazonInvoice: React.FC = () => {
       const { invoiceNumber, amazonShipmentReferenceId } = invoiceDetailToUpdate;
 
       const newInvoiceNumber = prompt('Ingrese el nuevo número de factura:', invoiceNumber);
-      const newAmazonShipmentReferenceId = prompt('Ingrese la nueva referencia de envío de Amazon:', amazonShipmentReferenceId);
+      const newAmazonShipmentReferenceId = prompt(
+        'Ingrese la nueva referencia de envío de Amazon:',
+        amazonShipmentReferenceId
+      );
 
       if (newInvoiceNumber !== null && newAmazonShipmentReferenceId !== null) {
         const updatedDetail = {
@@ -135,6 +136,11 @@ const AmazonInvoice: React.FC = () => {
     }
   };
 
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+    setSelectedInvoiceId(null);
+  };
+
   return (
     <div className="container">
       <h1>Amazon Invoice</h1>
@@ -212,18 +218,38 @@ const AmazonInvoice: React.FC = () => {
           ))}
         </tbody>
       </table>
+          <nav aria-label="Page navigation example">
       <ul className="pagination">
+        <li className={`page-item ${currentPage === 1 ? 'disabled' : ''}`}>
+          <button className="page-link" onClick={() => handlePageChange(currentPage - 1)}>
+            Previous
+          </button>
+        </li>
         {Array.from({ length: Math.ceil(invoices.length / itemsPerPage) }).map((_, index) => (
-          <li key={index} className={`page-item ${currentPage === index + 1 ? 'active' : ''}`}>
-            <button className="page-link" onClick={() => paginate(index + 1)}>
+          <li
+            key={index}
+            className={`page-item ${currentPage === index + 1 ? 'active' : ''}`}
+          >
+            <button
+              className={`page-link ${currentPage === index + 1 ? 'current-page' : ''}`}
+              onClick={() => handlePageChange(index + 1)}
+            >
               {index + 1}
             </button>
           </li>
         ))}
+        <li
+          className={`page-item ${currentPage === Math.ceil(invoices.length / itemsPerPage) ? 'disabled' : ''}`}
+        >
+          <button className="page-link" onClick={() => handlePageChange(currentPage + 1)}>
+            Next
+          </button>
+        </li>
       </ul>
+    </nav>
+
     </div>
   );
 };
 
 export default AmazonInvoice;
- 

src/HojasDeEstilo/AmazonInovice.css

@@ -1,5 +1,5 @@
 .container {
-  margin-top: 20px;
+  margin-top: 1px;
 }
 
 .table {
@@ -11,7 +11,10 @@
   background-color: #95c030;
   color: white;
   text-align: center;
-  padding: 8px;
+  padding: 1px;
+  width: 5%;
+  height:  5%;
+  
 }
 
 .table td {
@@ -38,7 +41,7 @@
 
 .pagination li button {
   display: inline-block;
-  padding: 5px 10px;
+  padding: 20px 5px;
   border: 1px solid #ddd;
   background-color: #f5f5f5;
   color: #333;
@@ -57,4 +60,17 @@
 h1 {
   
   color: white
-}
+}
+
+.caret-icon {
+  vertical-align: middle;
+  margin-left: 1px;
+}
+
+
+.current-page {
+  font-size: 10px;
+} 
+
+
+

yarn.lock

@@ -9030,6 +9030,11 @@
   "resolved" "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz"
   "version" "6.0.11"
 
+"react-icons@^4.9.0":
+  "integrity" "sha512-ijUnFr//ycebOqujtqtV9PFS7JjhWg0QU6ykURVHuL4cbofvRCf3f6GMn9+fBktEFQOIVZnuAYLZdiyadRQRFg=="
+  "resolved" "https://registry.npmjs.org/react-icons/-/react-icons-4.9.0.tgz"
+  "version" "4.9.0"
+
 "react-is@^16.13.1":
   "integrity" "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
   "resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@@ -9155,7 +9160,7 @@
     "loose-envify" "^1.4.0"
     "prop-types" "^15.6.2"
 
-"react@^16.2.0 || ^17.0.0 || ^18.0.0", "react@^16.3.0", "react@^16.3.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0", "react@^16.8.3 || ^17.0.0-0 || ^18.0.0", "react@^17.0.0 || ^18.0.0", "react@^18.0", "react@^18.0.0", "react@^18.2.0", "react@>= 16", "react@>=0.14.0", "react@>=15.0.0", "react@>=16.14.0", "react@>=16.6.0", "react@>=16.8", "react@>=16.8.0":
+"react@*", "react@^16.2.0 || ^17.0.0 || ^18.0.0", "react@^16.3.0", "react@^16.3.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0", "react@^16.8.3 || ^17.0.0-0 || ^18.0.0", "react@^17.0.0 || ^18.0.0", "react@^18.0", "react@^18.0.0", "react@^18.2.0", "react@>= 16", "react@>=0.14.0", "react@>=15.0.0", "react@>=16.14.0", "react@>=16.6.0", "react@>=16.8", "react@>=16.8.0":
   "integrity" "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ=="
   "resolved" "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
   "version" "18.2.0"