8Jun 2023 Ya hace la peticion pero no funciona de la manera correcta

src/Componentes/AmazonInvoice.tsx

@@ -1,12 +1,14 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
-import { Invoice } from '../Interfaces/Invoice';
-import '../HojasDeEstilo/AmazonInovice.css'
+import { Invoice, InvoiceDetail } from '../Interfaces/Invoice';
+import '../HojasDeEstilo/AmazonInovice.css';
 
 const AmazonInvoice: React.FC = () => {
   const [invoices, setInvoices] = useState<Invoice[]>([]);
   const [currentPage, setCurrentPage] = useState(1);
   const [itemsPerPage] = useState(20);
+  const [selectedInvoiceId, setSelectedInvoiceId] = useState<number | null>(null);
+  const [invoiceDetails, setInvoiceDetails] = useState<InvoiceDetail[]>([]);
 
   useEffect(() => {
     axios
@@ -24,7 +26,34 @@ const AmazonInvoice: React.FC = () => {
   const indexOfFirstItem = indexOfLastItem - itemsPerPage;
   const currentInvoices = invoices.slice(indexOfFirstItem, indexOfLastItem);
 
-  const paginate = (pageNumber: number) => setCurrentPage(pageNumber);
+  const paginate = (pageNumber: number) => {
+    setCurrentPage(pageNumber);
+    setSelectedInvoiceId(null); // Restablece el detalle de la factura seleccionada al cambiar de página
+  };
+
+  const handleInvoiceClick = (id: number) => {
+    if (id === selectedInvoiceId) {
+      setSelectedInvoiceId(null);
+    } else {
+      setSelectedInvoiceId(id);
+      axios
+        .get<InvoiceDetail[]>(`https://localhost:5051/api/AmazonInvoice/AmazonInvoicedetailid`, {
+          params: {
+            id: id
+          }
+        })
+        .then((response) => {
+          const invoiceDetailData: InvoiceDetail[] = response.data;
+          console.log(invoiceDetailData); // Verificar los datos recibidos en la consola
+          setInvoiceDetails(invoiceDetailData);
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    }
+  };
+  
+  
 
   return (
     <div className="container">
@@ -43,7 +72,8 @@ const AmazonInvoice: React.FC = () => {
         </thead>
         <tbody>
           {currentInvoices.map((invoice: Invoice) => (
-            <tr key={invoice.id}>
+            <React.Fragment key={invoice.id}>
+              <tr onClick={() => handleInvoiceClick(invoice.id)}>
                 <td>{invoice.id}</td>
                 <td>{invoice.referencia}</td>
                 <td>{invoice.commercialInvoiceDate}</td>
@@ -52,6 +82,35 @@ const AmazonInvoice: React.FC = () => {
                 <td>{invoice.estatus}</td>
                 <td>{invoice.trailerId || 'N/A'}</td>
               </tr>
+              {selectedInvoiceId === invoice.id && (
+                <tr>
+                  <td colSpan={7}>
+                    <table className="subtable">
+                      <thead>
+                        <tr>
+                          <th>IdHeader</th>
+                          <th>Invoice Number</th>
+                          <th>Amazon Shipment Reference ID</th>
+                          <th>Item ID</th>
+                          <th>FCreacion</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {invoiceDetails.map((detail: InvoiceDetail) => (
+                          <tr key={detail.idHeader}>
+                            <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>
+              )}
+            </React.Fragment>
           ))}
         </tbody>
       </table>