diff --git a/src/Componentes/AmazonInvoice.tsx b/src/Componentes/AmazonInvoice.tsx
index b61bea0..62e7e51 100644
--- a/src/Componentes/AmazonInvoice.tsx
+++ b/src/Componentes/AmazonInvoice.tsx
@@ -1,22 +1,13 @@
 import React, { useState } from 'react';
 import axios from 'axios';
-import '../Interfaces/InvoiceDetail'
-import '../Interfaces/Invoice'
-import  '../HojasDeEstilo/AmazonInovice.css'
-
-
-
-// import 'bootstrap/dist/css/bootstrap.min.css';
-
-
-  // <script src='node_modules/bootstrap/dit/js/bootstrap.min.js'></script> 
-
-
-
+import '../Interfaces/InvoiceDetail';
+import '../Interfaces/Invoice';
+import '../HojasDeEstilo/AmazonInovice.css';
 
 const AmazonInvoice: React.FC = () => {
   const [id, setId] = useState('');
   const [invoice, setInvoice] = useState<Invoice | null>(null);
+  const [showDetails, setShowDetails] = useState(false);
 
   const handleIdChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setId(e.target.value);
@@ -24,87 +15,87 @@ const AmazonInvoice: React.FC = () => {
 
   const handleConsultClick = () => {
     axios
-      .get<Invoice[]>(`https://localhost:5051/api/AmazonInvoice/AmazonInvoiceGET?id=${id}`)
-      .then(response => {
+        .get<Invoice[]>(`https://localhost:5051/api/AmazonInvoice/AmazonInvoiceGET?id=${id}`)
+      //.get<Invoice[]>(`https://localhost:5051/api/AmazonInvoice/AmazonInvoiceGETselect?id=${id}`)
+      .then((response) => {
         const invoiceData: Invoice[] = response.data;
         if (invoiceData.length > 0) {
           setInvoice(invoiceData[0]);
+          setShowDetails(true); // Mostrar automáticamente los detalles
         } else {
           setInvoice(null);
+          setShowDetails(false);
         }
       })
-      .catch(error => {
+      .catch((error) => {
         console.log(error);
       });
   };
 
   return (
-    
-
     <div>
-      <h1>Amazon Invoice </h1>
+      <h1>Amazon Invoice</h1>
       <label>
         ID:
         <input type="text" value={id} onChange={handleIdChange} />
       </label>
       <button onClick={handleConsultClick}>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>ID: {invoice.id}</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>
-            </tr>
-          </tbody>
-        </table>
-
-
-          
-
-            {/* <h3>Detail</h3> */}
-            <table className="table table-striped">
+        <div>
+          <h2>Master:</h2>
+          <table className="table table-striped table-dark">
             <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>
+                <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>
-              {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>
-              ))}
+              <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>
+                          </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>
   );
@@ -112,9 +103,4 @@ const AmazonInvoice: React.FC = () => {
 
 export default AmazonInvoice;
 
-
-
-
-
-
-
+                
diff --git a/src/Componentes/AmazonInvoice1.1.tsx b/src/Componentes/AmazonInvoice1.1.tsx
new file mode 100644
index 0000000..ed8638c
--- /dev/null
+++ b/src/Componentes/AmazonInvoice1.1.tsx
@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import '../Interfaces/InvoiceDetail';
+import '../Interfaces/Invoice';
+import '../HojasDeEstilo/AmazonInovice.css';
+
+const AmazonInvoice: React.FC = () => {
+  const [id, setId] = useState('');
+  const [invoice, setInvoice] = useState<Invoice | null>(null);
+  const [showDetails, setShowDetails] = useState(false);
+
+  const handleIdChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setId(e.target.value);
+  };
+
+  const handleConsultClick = () => {
+    axios
+      .get<Invoice[]>(`https://localhost:5051/api/AmazonInvoice/AmazonInvoiceGET?id=${id}`)
+      // .get<Invoice[]>(`https://localhost:5051/api/AmazonInvoice/AmazonInvoiceGETselect?id=${id}`)
+      .then((response) => {
+        const invoiceData: Invoice[] = response.data;
+        if (invoiceData.length > 0) {
+          setInvoice(invoiceData[0]);
+          setShowDetails(true); // Mostrar automáticamente los detalles
+        } else {
+          setInvoice(null);
+          setShowDetails(false);
+        }
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  };
+
+  return (
+    <div>
+      <h1>Amazon Invoice</h1>
+      <label>
+        ID:
+        <input type="text" value={id} onChange={handleIdChange} />
+      </label>
+      <button onClick={handleConsultClick}>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>
+                <th>Detalle</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td onClick={() => setShowDetails(!showDetails)}>ID: {invoice.id}</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>
+                  {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>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  )}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+       
+          </div>
+      )}
+    </div>
+  );
+};
+
+export default AmazonInvoice;
\ No newline at end of file
diff --git a/src/Interfaces/Invoice1.1.ts b/src/Interfaces/Invoice1.1.ts
new file mode 100644
index 0000000..4b0a885
--- /dev/null
+++ b/src/Interfaces/Invoice1.1.ts
@@ -0,0 +1,35 @@
+        
+      interface I2096Detail {
+        // Define properties for I2096Detail if it has any specific properties
+      }
+      
+      interface Invoice1 {
+        Id: number;
+        Referencia: string;
+        CommercialInvoiceDate: string;
+        InvoiceNumber: string;
+        Name: string;
+        TrailerNumber: string;
+        TrailerId: string;
+        PorOfLoading: string;
+        PortOfEntry: string;
+        PaymentsTerms: string;
+        Incoterms: string;
+        HAWB: string;
+        TotalInvoiceQuantityUnitOfMeasure: string;
+        TotalInvoiceQuantity: number;
+        TotalInvoiceWeightUnitOfMeasure: string;
+        TotalInvoiceWeight: number;
+        TotalInvoiceValueChargeOrAllowance: string;
+        TotalInvoiceValueCurrencyISOCode: string;
+        TotalInvoiceValueMonetaryAmount: number;
+        FootNote: string;
+        Archivo: string;
+        FCreacion: string;
+        Clasificador: number;
+        NoVuelta: number;
+        Estatus: number;
+        max: boolean;
+        Detail: I2096Detail[];
+      }
+      
\ No newline at end of file
diff --git a/src/Interfaces/InvoiceDetail1.1.ts b/src/Interfaces/InvoiceDetail1.1.ts
new file mode 100644
index 0000000..c6317be
--- /dev/null
+++ b/src/Interfaces/InvoiceDetail1.1.ts
@@ -0,0 +1,46 @@
+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;
+}