Exporta Invoice a Excel

package.json

@@ -43,6 +43,7 @@
     "react-google-qrcode": "^1.0.3",
     "react-grid-data": "^1.1.5",
     "react-icons": "^4.3.1",
+    "react-number-format": "^5.1.2",
     "react-print-components": "^1.0.4",
     "react-redux": "^7.2.6",
     "react-router-dom": "6",

src/Components/Clientes/Amazon/Components/ComboSelect/ComboFraccion.tsx

@@ -1,16 +1,34 @@
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
 import { Button, Col, Form, Modal, Row } from 'react-bootstrap'
 import * as CurrencyFormat from 'react-currency-format' 
+/* import { PatternFormat } from 'react-number-format'; */
 import { MsgInformativo } from '../../../../Utils/Toast/msgInformativo'
+import { RootState } from '../../../../../store/store'
+import {
+  populateInvoices,
+  addInvoice,
+  updateInvoice,
+  deleteInvoice
+} from '../../../../../store/features/Clientes/2096/AmazonInvoices'
+// Redux
+import { useDispatch, useSelector } from 'react-redux'
 import DTO2096Fraccion from '../../DTO/DTO2096Fraccion'
 import DSAmazon from '../../Services/Amazon.Services'
+import I2096Headers from '../../Interfaces/I2096Header'
+import { max } from 'cypress/types/lodash'
 
 export interface IComboFraccionProps {
+  IDInvoice: number
   IDDetail: number
   FraccionOriginal: string
+  parentFunction: Function
 }
 
-export function ComboFraccion (props: IComboFraccionProps) {
+export function ComboFraccion(props: IComboFraccionProps) {
+  const dispatch = useDispatch()
+  const mInvoices = useSelector(
+    (state: RootState) => state.AmazonInvoices.Invoice
+  )
   const [Validacion, setValidacion] = useState(0)
   const [showModal, setShowModal] = useState(false)
   const [Fraccion, setFraccion] = useState('')
@@ -19,6 +37,9 @@ export function ComboFraccion (props: IComboFraccionProps) {
   const [msg, setMsg] = useState('')
   const msgColor = 'primary'
 
+
+  const forceUpdate: () => void = useState({})[1].bind(null, {})  // see NOTE below
+
   const changeValidacion = (e: number) => {
     setValidacion(e)
     if (e === 2) {
@@ -31,10 +52,47 @@ export function ComboFraccion (props: IComboFraccionProps) {
       }
       DSAmazon.SetFraccion(data)
         .then((response) => {
+
+         /*
+          let Invoice: I2096Headers[] = mInvoices.filter((item) => item.id === props.IDInvoice)
+          const Obj = { ...Invoice[0] }
+
+          const newObject = Invoice.map(Invoice => ({ ...Invoice,
+            detail: Invoice.detail.filter(detail=>detail.id===props.IDDetail).map(detail => ({ ...detail,
+              fraccionGEMCO: detail.destinationHTSCode.replaceAll('.','')
+            }))
+          }))
+            
+
+          const Obj2 = { ...newObject[0] }
+          Obj2.max = !Obj2.max
+
+          console.log('.................................new object '+JSON.stringify(Obj2))
+          dispatch(updateInvoice(Obj2))
+*/
+
+/* const newObj = mInvoices.forEach(function(o) {
+  o.detail = o.detail.filter(s => (s.idHeader === props.IDInvoice) && (s.id!=props.IDDetail));
+}); */
+
+const newObj = mInvoices.map(function(o) {
+  const newDetail = {...o.detail}
+  if (newDetail[0].id===props.IDDetail) {
+    newDetail[0].fraccionGEMCO=Fraccion
+  }
+  return newDetail
+});
+
+console.log(newObj)
+
+//dispatch(updateInvoice(newObj))
+         
+
           setShowModal(false)
           setHeader('Confirmacion')
           setMsg('La descripcion se ha guardado correctamente')
           setShowMsg(true)
+          forceUpdate()
           return
         })
         .catch((e: Error) => {
@@ -43,6 +101,8 @@ export function ComboFraccion (props: IComboFraccionProps) {
     }
   }
 
+
+
   const saveFraccion = () => {
     DSAmazon.GetValidaFraccion(Fraccion)
       .then((response) => {
@@ -97,13 +157,14 @@ export function ComboFraccion (props: IComboFraccionProps) {
         <Modal.Body>
           <Row>
             <Col xs={2}></Col>
-              <Col xs={4}>Proporcione la facccion GEMCO</Col>
+            <Col xs={4}>Proporcione la facccion GEMCO {props.IDInvoice}</Col>
             <Col xs={3}>
                <CurrencyFormat
                 onValueChange={(values: any) => {
                   const { value } = values
                   setFraccion(value)
                 }}
+
                 format={'######## ##'}
                 value={Fraccion}
                 displayType={'input'}
@@ -117,6 +178,7 @@ export function ComboFraccion (props: IComboFraccionProps) {
                   borderRadius: '10px'
                 }}
               />
+{/* <PatternFormat value={Fraccion} format="####### ###" allowEmptyFormatting mask="_" />; */}
             </Col>
             <Col xs={3}>
               <Button
@@ -141,4 +203,4 @@ export function ComboFraccion (props: IComboFraccionProps) {
       />
     </div>
   )
-  }
+}

src/Components/Clientes/Amazon/Components/TextBox/TextBoxFraccion.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import * as CurrencyFormat from 'react-currency-format'
+import { PatternFormat } from 'react-number-format';
 
 export interface ITextBoxFraccionProps {
   Fraccion: string | null

src/Components/Clientes/Amazon/Reportes/RptAmazonPendingInvoices.tsx

@@ -1,14 +1,8 @@
-import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { Button, Card, Col, Form, Row, Table } from 'react-bootstrap'
 import { IconContext } from 'react-icons'
 import { BsChevronDown, BsChevronRight, BsSearch } from 'react-icons/bs'
-import {
+import { FaCheckCircle, FaFileExcel, FaQuestionCircle } from 'react-icons/fa'
-  FaCheckCircle,
-  FaFileExcel,
-  FaQuestionCircle,
-  FaWindowClose
-} from 'react-icons/fa'
 import { ImCross } from 'react-icons/im'
 import { ComboDescripcion } from '../Components/ComboSelect/ComboDescripcion'
 import { ComboFraccion } from '../Components/ComboSelect/ComboFraccion'
@@ -17,21 +11,34 @@ import I2096Detail from '../Interfaces/I2096Detail'
 import I2096Headers from '../Interfaces/I2096Header'
 import DSAmazon from '../Services/Amazon.Services'
 import * as XLSX from 'xlsx'
-import { iteratorSymbol } from 'immer/dist/internal'
-import { RegisterPermisoClientes } from '../../../registerPermisoClientes/registerPermisoClientes'
-import { receiveMessageOnPort } from 'worker_threads'
 import DTO2096PrevioExcel from '../DTO/DTO2096PrevioExcel'
-import { allowedNodeEnvironmentFlags } from 'process'
+import { MsgInformativo } from '../../../Utils/Toast/msgInformativo'
+import { RootState } from '../../../../store/store'
+import {
+  populateInvoices,
+  addInvoice,
+  updateInvoice,
+  deleteInvoice
+} from '../../../../store/features/Clientes/2096/AmazonInvoices'
+// Redux
+import { useDispatch, useSelector } from 'react-redux'
+import  RtpAmazonPendingInvoicesDetail  from './RptAmazonPendingInvoicesDetail'
 export interface IRtpAmazonPendingInvoicesProps {}
 
 export default function RtpAmazonPendingInvoices(
   props: IRtpAmazonPendingInvoicesProps
 ) {
-  const [Data, setData] = useState<I2096Headers[]>([])
+  const dispatch = useDispatch()
-  const [DataOriginal, setDataOriginal] = useState<I2096Headers[]>([])
+  const mInvoices = useSelector(
+    (state: RootState) => state.AmazonInvoices.Invoice
+  )
   const [Inicio, setInicio] = useState(currentDate(0))
   const [Fin, setFin] = useState(currentDate(0))
   const [filtro, setFiltro] = useState('')
+  const [header, setHeader] = useState('')
+  const [show, setShowMsg] = useState(false)
+  const [msg, setMsg] = useState('')
+  const msgColor = 'primary'
 
   function currentDate(days: number): string {
     var today = new Date()
@@ -46,8 +53,7 @@ export default function RtpAmazonPendingInvoices(
     DSAmazon.GetPendingInvoice()
       .then((response) => {
         console.log(response.data)
-        setData(response.data)
+        dispatch(populateInvoices(response.data))
-        setDataOriginal(response.data)
       })
       .catch((e: Error) => {
         alert('Ocurrio un error' + e.message.toString())
@@ -55,10 +61,15 @@ export default function RtpAmazonPendingInvoices(
   }
 
   const downloadExcel = (id: number) => {
-    let Invoice: I2096Headers[] = Data.filter((row) => row.id === id)
+/*     DSAmazon.TerminaFactura(id)
+      .then((response) => {})
+      .catch((e: Error) => {
+        alert('Ocurrio un error' + e.message.toString())
+      }) */
+    let Invoice: I2096Headers[] = mInvoices.filter((row) => row.id === id)
     let Details: I2096Detail[] = Invoice[0].detail
-    let Consecutivo=1;
+    let Consecutivo = 1
-    let excelReadyArray : DTO2096PrevioExcel[] = Details.map(function(element){
+    let excelReadyArray: DTO2096PrevioExcel[] = Details.map(function (element) {
       return {
         Consecutivo: (Consecutivo++).toString(),
         ClaveCliente: '2096',
@@ -66,51 +77,55 @@ export default function RtpAmazonPendingInvoices(
         ClaveProveedor: '10',
         TipoOperacion: '1',
         Fraccion: element.fraccionGEMCO,
-        SubDivisión: element.fraccionGEMCO.substring(-2),
+        SubDivisión: element.fraccionGEMCO.slice(-2),
-        DescripcionTIGIE: '',
+        DescripcionTIGIE: ' ',
-        DescripcionFactura: element.pedimentoDescription,
+        DescripcionFactura: element.itemDescription,
-        DescripcionAgenteAduanal:element.descripcionGEMCO, 
+        DescripcionAgenteAduanal: element.descripcionGEMCO,
-        UMFactura: '',
+        UMFactura: ' ',
-        UMComercial: '',
+        UMComercial: ' ',
-        UMTarifa:'',
+        UMTarifa: ' ',
-        PrecioUnitario: '',
+        PrecioUnitario: ' ',
-        PaisOrigenDestino: '',
+        PaisOrigenDestino: ' ',
-        PaisCompradorVendedor: '',
+        PaisCompradorVendedor: ' ',
-        CodigoBarras: '',
+        CodigoBarras: ' ',
-        CodigoControlInterno: '',
+        CodigoControlInterno: ' ',
-        FamiliaProducto: '',
+        FamiliaProducto: ' ',
         Vinculacion: '1',
-        CodigoPreferencial: '',
+        CodigoPreferencial: ' ',
         MetodoValoración: '1',
         AplicaTLC: '0',
         MontoDesgravacion: '0,000',
         TipoArancel: '1',
         TasaArancelEspecifico: '0,00000',
         TasaMaximaAdvalorem: '0,00000',
-        UM: '',
+        UM: ' ',
-        ES: '',
+        ES: ' ',
-        Peso: '',
+        Peso: ' ',
-        Observaciones: '',
+        Observaciones: ' ',
-        ValorMinimo: '',
+        ValorMinimo: ' ',
-        UMCove: '',
+        UMCove: ' ',
-        ClaveModificacion: '',
+        ClaveModificacion: ' ',
-        DescripcionCertificado: '',
+        DescripcionCertificado: ' ',
-        TipoUsoMercancia: '',
+        TipoUsoMercancia: ' ',
-        Exotico: '',
+        Exotico: ' ',
-        Registro: '',
+        Registro: ' ',
-        TipoRegistro: '',
+        TipoRegistro: ' ',
-        FechaEmision: '',
+        FechaEmision: ' ',
-        FechaVencimiento: '',
+        FechaVencimiento: ' ',
-        Producto: '',
+        Producto: ' ',
-        UMCFDI: '',
+        UMCFDI: ' ',
-        UMEmbalaje: '',
+        UMEmbalaje: ' ',
-        IdParte99Update: ''
+        IdParte99Update: ' '
       }
-    });
+    })
-    exportExcel(excelReadyArray, 'PlantillaCarga')
+    exportExcel(id, excelReadyArray, 'Plantilla de partes')
   }
 
-  function exportExcel(jsonData: DTO2096PrevioExcel[], fileName: string): void {
+  function exportExcel(
+    id: number,
+    jsonData: DTO2096PrevioExcel[],
+    fileName: string
+  ): void {
     let Heading = [
       [
         'Consecutivo',
@@ -160,20 +175,86 @@ export default function RtpAmazonPendingInvoices(
         'IdParte99Update'
       ]
     ]
+    let clientesHeading = [
+      [
+        'ConsecutivoPartes',
+        'ClaveCliente',
        
-
+      ]
+    ]
+    let identificadoresHeading = [
+      [
+        'Consecutivo',
+        'TipoIdentificador',
+        'ClaveIdentificador',
+        'Art',
+        'Complemento1',
+        'Complemento2',
+        'Complemento3',
+        'ClaveCliente',
+        'Parte',
+        'ClaveProveedor',
+        'TipoOperacion',
+        'FirmaDescargo',
+        'NumeroPermiso',
+        'IdParte99Update'       
+      ]
+    ]
+    let impuestosPartesHeading = [
+      [
+        'Impuesto', 
+        'ValorTasa',	
+        'FormaPago',	
+        'ClaveCliente',	
+        'Parte',	
+        'ClaveProveedor',	
+        'TipoOperacion'       
+      ]
+    ]
+    let submodelosHeading = [
+      [
+        'ConsecutivoPartePadre',
+        'ConsecutivoParteHijo'       
+      ]
+    ]
     const wb = XLSX.utils.book_new()
     const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet([])
+    const ws2: XLSX.WorkSheet = XLSX.utils.json_to_sheet([])
+    const ws3: XLSX.WorkSheet = XLSX.utils.json_to_sheet([])
+    const ws4: XLSX.WorkSheet = XLSX.utils.json_to_sheet([])
+    const ws5: XLSX.WorkSheet = XLSX.utils.json_to_sheet([])
+    const ws6: XLSX.WorkSheet = XLSX.utils.json_to_sheet([])
     XLSX.utils.sheet_add_aoa(ws, Heading)
     XLSX.utils.sheet_add_json(ws, jsonData, { origin: 'A2', skipHeader: true })
-    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
+    XLSX.utils.book_append_sheet(wb, ws, 'Partes')
+
+
+    XLSX.utils.sheet_add_aoa(ws2, clientesHeading)
+    XLSX.utils.sheet_add_json(ws2, [{}], { origin: 'A2', skipHeader: true })  
+    XLSX.utils.book_append_sheet(wb, ws2, 'Clientes')
+
+    XLSX.utils.sheet_add_aoa(ws3, identificadoresHeading)
+    XLSX.utils.sheet_add_json(ws3, [{}], { origin: 'A2', skipHeader: true })     
+    XLSX.utils.book_append_sheet(wb, ws3, 'Identificadores')
+
+    XLSX.utils.sheet_add_aoa(ws4, impuestosPartesHeading)
+    XLSX.utils.sheet_add_json(ws4, [{}], { origin: 'A2', skipHeader: true })      
+    XLSX.utils.book_append_sheet(wb, ws4, 'ImpuestosPartes')
+
+    XLSX.utils.sheet_add_aoa(ws5, submodelosHeading)
+    XLSX.utils.sheet_add_json(ws5, [{}], { origin: 'A2', skipHeader: true })  
+    XLSX.utils.book_append_sheet(wb, ws5, 'Submodelos')
+
+    XLSX.utils.sheet_add_aoa(ws6, [ [] ])
+    XLSX.utils.sheet_add_json(ws6, [{}], { origin: 'A2', skipHeader: true })  
+    XLSX.utils.book_append_sheet(wb, ws6, 'Diccionario')
     XLSX.writeFile(wb, fileName + '.xlsx')
     var range = XLSX.utils.decode_range(ws['!ref?'])
-    for (var C = range.s.c; C <= range.e.c; ++C) {
+    /* for (var C = range.s.c; C <= range.e.c; ++C) {
       var address = XLSX.utils.encode_col(C) + '1' // <-- first row, column number C
       if (!ws[address]) continue
       ws[address].v = ws[address].v.toUpperCase()
-    }
+    } */
   }
 
   useEffect(() => {
@@ -181,23 +262,14 @@ export default function RtpAmazonPendingInvoices(
   }, [])
 
   const changeToggle = (row: I2096Headers) => {
-    let x = Data.filter((a) => {
+    let Invoice: I2096Headers[] = mInvoices.filter((item) => item.id === row.id)
-      if (a.id === row.id) {
+    const Obj = { ...Invoice[0] }
-        return a
+    Obj.max = !Obj.max
-      }
+    dispatch(updateInvoice(Obj))
-    })
-    if (x) {
-      const obj = { ...x[0] }
-      obj.max = !obj.max
-      const DataCopy = Data
-      const i = DataCopy.findIndex((_element) => _element.id === row.id)
-      if (i > -1) DataCopy[i] = obj
-      setData([...DataCopy])
-    }
   }
 
   const filtraReporte = (e: any) => {
-    setFiltro(e.target.value)
+    /*   setFiltro(e.target.value)
     if (e.target.value.length > 0) {
       setData(
         Data.filter(function (row) {
@@ -208,7 +280,7 @@ export default function RtpAmazonPendingInvoices(
       )
     } else {
       setData(DataOriginal)
-    }
+    } */
   }
 
   const openLink = (item: string) => {
@@ -306,8 +378,8 @@ export default function RtpAmazonPendingInvoices(
                 </tr>
               </thead>
               <tbody>
-                {Data
+                {mInvoices
-                  ? Data.map((MasterData) => {
+                  ? mInvoices.map((MasterData) => {
                       return (
                         <>
                           <tr
@@ -601,7 +673,7 @@ export default function RtpAmazonPendingInvoices(
                                     </tr>
                                   </thead>
                                   <tbody>
-                                    {Data.map((MD) => {
+                                    {mInvoices.map((MD) => {
                                       return (
                                         <>
                                           {MD.detail
@@ -611,222 +683,7 @@ export default function RtpAmazonPendingInvoices(
                                                 detail.idHeader
                                             )
                                             .map((detail) => {
-                                              return (
+                                              return <RtpAmazonPendingInvoicesDetail IDMaster={MasterData.id} detail={detail}/>                                             
-                                                <tr>
-                                                  <th
-                                                    style={{
-                                                      width: '50px',
-                                                      backgroundColor: '#FFFFFF'
-                                                    }}
-                                                    className="DetailData"
-                                                  >
-                                                    &nbsp;
-                                                  </th>
-                                                  <td
-                                                    style={{
-                                                      textAlign: 'center',
-                                                      cursor: 'pointer'
-                                                    }}
-                                                    className="DetailData"
-                                                    onClick={() =>
-                                                      openLink(detail.itemId)
-                                                    }
-                                                  >
-                                                    {detail.itemId}
-                                                  </td>
-                                                  <td
-                                                    style={{
-                                                      textAlign: 'right'
-                                                    }}
-                                                    className="DetailData"
-                                                  >
-                                                    {detail.itemDescription}
-                                                  </td>
-                                                  <td
-                                                    style={{
-                                                      textAlign: 'right'
-                                                    }}
-                                                    className="DetailData"
-                                                  >
-                                                    {
-                                                      detail.pedimentoDescription
-                                                    }
-                                                  </td>
-                                                  <td
-                                                    style={{
-                                                      textAlign: 'center'
-                                                    }}
-                                                    className="DetailData"
-                                                  >
-                                                    {detail.destinationHTSCode}
-                                                  </td>
-                                                  <td
-                                                    style={{
-                                                      textAlign: 'center'
-                                                    }}
-                                                    className="DetailData"
-                                                  >
-                                                    {detail.validaFraccionOriginal ===
-                                                    0 ? (
-                                                      <IconContext.Provider
-                                                        value={{
-                                                          color: 'orange',
-                                                          size: '20px'
-                                                        }}
-                                                      >
-                                                        <FaQuestionCircle />
-                                                      </IconContext.Provider>
-                                                    ) : detail.validaFraccionOriginal ===
-                                                      1 ? (
-                                                      <IconContext.Provider
-                                                        value={{
-                                                          color: 'green',
-                                                          size: '20px'
-                                                        }}
-                                                      >
-                                                        <FaCheckCircle />
-                                                      </IconContext.Provider>
-                                                    ) : (
-                                                      <IconContext.Provider
-                                                        value={{
-                                                          color: 'red',
-                                                          size: '20px'
-                                                        }}
-                                                      >
-                                                        <ImCross />
-                                                      </IconContext.Provider>
-                                                    )}
-                                                  </td>
-                                                  <td
-                                                    style={{
-                                                      textAlign: 'center'
-                                                    }}
-                                                    className="DetailData"
-                                                  >
-                                                    <ComboFraccion
-                                                      IDDetail={detail.id}
-                                                      FraccionOriginal={
-                                                        detail.destinationHTSCode
-                                                      }
-                                                    />
-                                                  </td>
-                                                  <td
-                                                    style={{
-                                                      textAlign: 'center'
-                                                    }}
-                                                    className="DetailData"
-                                                  >
-                                                    <TextBoxFraccion
-                                                      Fraccion={
-                                                        detail.fraccionGEMCO
-                                                          ? detail.fraccionGEMCO
-                                                          : ''
-                                                      }
-                                                    />
-                                                  </td>
-                                                  <td
-                                                    style={{
-                                                      textAlign: 'center'
-                                                    }}
-                                                    className="DetailData"
-                                                  >
-                                                    <ComboDescripcion
-                                                      IDDetail={detail.id}
-                                                      DescripcionOriginal={
-                                                        detail.pedimentoDescription
-                                                      }
-                                                    />
-                                                  </td>
-                                                  <td
-                                                    style={{
-                                                      textAlign: 'center'
-                                                    }}
-                                                    className="DetailData"
-                                                  >
-                                                    {detail.descripcionGEMCO}
-                                                  </td>
-                                                  <td
-                                                    style={{
-                                                      textAlign: 'center'
-                                                    }}
-                                                    className="DetailData"
-                                                  >
-                                                    {detail.countryOfOrigin}
-                                                  </td>
-                                                  <td
-                                                    style={{
-                                                      textAlign: 'right'
-                                                    }}
-                                                    className="DetailData"
-                                                  >
-                                                    {detail.productGroup}
-                                                  </td>
-                                                  <td
-                                                    style={{
-                                                      textAlign: 'right'
-                                                    }}
-                                                    className="DetailData"
-                                                  >
-                                                    {detail.brand}
-                                                  </td>
-                                                  <td
-                                                    style={{
-                                                      textAlign: 'right'
-                                                    }}
-                                                    className="DetailData"
-                                                  >
-                                                    {detail.model}
-                                                  </td>
-                                                  <td
-                                                    style={{
-                                                      textAlign: 'center'
-                                                    }}
-                                                    className="DetailData"
-                                                  >
-                                                    {
-                                                      detail.itemQuantityUnitOfMeasure
-                                                    }
-                                                  </td>
-                                                  <td
-                                                    style={{
-                                                      textAlign: 'center'
-                                                    }}
-                                                    className="DetailData"
-                                                  >
-                                                    {detail.quantity}
-                                                  </td>
-                                                  <td
-                                                    style={{
-                                                      textAlign: 'center'
-                                                    }}
-                                                    className="DetailData"
-                                                  >
-                                                    {
-                                                      detail.netWeightUnitOfMeasure
-                                                    }
-                                                  </td>
-                                                  <td
-                                                    style={{
-                                                      textAlign: 'center'
-                                                    }}
-                                                    className="DetailData"
-                                                  >
-                                                    {
-                                                      detail.actualUnitCostMonetaryAmount
-                                                    }
-                                                  </td>
-                                                  <td
-                                                    style={{
-                                                      textAlign: 'center'
-                                                    }}
-                                                    className="DetailData"
-                                                  >
-                                                    {
-                                                      detail.totalUnitValueMonetaryAmount
-                                                    }
-                                                  </td>
-                                                </tr>
-                                              )
                                             })}
                                         </>
                                       )
@@ -845,6 +702,15 @@ export default function RtpAmazonPendingInvoices(
           </div>
         </Card.Body>
       </Card>
+      <MsgInformativo
+        show={show}
+        msg={msg}
+        header={header}
+        msgColor={msgColor}
+        closeToast={() => {
+          setShowMsg(false)
+        }}
+      />
     </div>
   )
 }

src/Components/Clientes/Amazon/Reportes/RptAmazonPendingInvoicesDetail.tsx

@@ -0,0 +1,227 @@
+import * as React from 'react'
+import { IconContext } from 'react-icons'
+import { FaCheckCircle, FaQuestionCircle } from 'react-icons/fa'
+import { ImCross } from 'react-icons/im'
+import { ComboDescripcion } from '../Components/ComboSelect/ComboDescripcion'
+import { ComboFraccion } from '../Components/ComboSelect/ComboFraccion'
+import { TextBoxFraccion } from '../Components/TextBox/TextBoxFraccion'
+import I2096Detail from '../Interfaces/I2096Detail'
+
+export interface IRtpAmazonPendingInvoivesDetailProps {
+  IDMaster: number
+  detail: I2096Detail
+}
+
+export default function RtpAmazonPendingInvoivesDetail(
+  props: IRtpAmazonPendingInvoivesDetailProps
+) {
+  const openLink = (item: string) => {
+    window.open('https://www.amazon.com/dp/' + item)
+  }
+
+  
+  const parentFunction = (fraccion: string) => {
+    alert('update')
+  }
+
+  return (
+    <>
+      <tr>
+        <th
+          style={{
+            width: '50px',
+            backgroundColor: '#FFFFFF'
+          }}
+          className="DetailData"
+        >
+          &nbsp;
+        </th>
+        <td
+          style={{
+            textAlign: 'center',
+            cursor: 'pointer'
+          }}
+          className="DetailData"
+          onClick={() => openLink(props.detail.itemId)}
+        >
+          {props.detail.itemId}
+        </td>
+        <td
+          style={{
+            textAlign: 'right'
+          }}
+          className="DetailData"
+        >
+          {props.detail.itemDescription}
+        </td>
+        <td
+          style={{
+            textAlign: 'right'
+          }}
+          className="DetailData"
+        >
+          {props.detail.pedimentoDescription}
+        </td>
+        <td
+          style={{
+            textAlign: 'center'
+          }}
+          className="DetailData"
+        >
+          {props.detail.destinationHTSCode}
+        </td>
+        <td
+          style={{
+            textAlign: 'center'
+          }}
+          className="DetailData"
+        >
+          {props.detail.validaFraccionOriginal === 0 ? (
+            <IconContext.Provider
+              value={{
+                color: 'orange',
+                size: '20px'
+              }}
+            >
+              <FaQuestionCircle />
+            </IconContext.Provider>
+          ) : props.detail.validaFraccionOriginal === 1 ? (
+            <IconContext.Provider
+              value={{
+                color: 'green',
+                size: '20px'
+              }}
+            >
+              <FaCheckCircle />
+            </IconContext.Provider>
+          ) : (
+            <IconContext.Provider
+              value={{
+                color: 'red',
+                size: '20px'
+              }}
+            >
+              <ImCross />
+            </IconContext.Provider>
+          )}
+        </td>
+        <td
+          style={{
+            textAlign: 'center'
+          }}
+          className="DetailData"
+        >
+          <ComboFraccion
+            IDInvoice={props.IDMaster}
+            IDDetail={props.detail.id}
+            FraccionOriginal={props.detail.destinationHTSCode}
+            parentFunction={parentFunction}
+          />
+        </td>
+        <td
+          style={{
+            textAlign: 'center'
+          }}
+          className="DetailData"
+        >
+          <TextBoxFraccion
+            Fraccion={
+              props.detail.fraccionGEMCO ? props.detail.fraccionGEMCO : ''
+            }
+          />
+        </td>
+        <td
+          style={{
+            textAlign: 'center'
+          }}
+          className="DetailData"
+        >
+          <ComboDescripcion
+            IDDetail={props.detail.id}
+            DescripcionOriginal={props.detail.pedimentoDescription}
+          />
+        </td>
+        <td
+          style={{
+            textAlign: 'center'
+          }}
+          className="DetailData"
+        >
+          {props.detail.descripcionGEMCO}
+        </td>
+        <td
+          style={{
+            textAlign: 'center'
+          }}
+          className="DetailData"
+        >
+          {props.detail.countryOfOrigin}
+        </td>
+        <td
+          style={{
+            textAlign: 'right'
+          }}
+          className="DetailData"
+        >
+          {props.detail.productGroup}
+        </td>
+        <td
+          style={{
+            textAlign: 'right'
+          }}
+          className="DetailData"
+        >
+          {props.detail.brand}
+        </td>
+        <td
+          style={{
+            textAlign: 'right'
+          }}
+          className="DetailData"
+        >
+          {props.detail.model}
+        </td>
+        <td
+          style={{
+            textAlign: 'center'
+          }}
+          className="DetailData"
+        >
+          {props.detail.itemQuantityUnitOfMeasure}
+        </td>
+        <td
+          style={{
+            textAlign: 'center'
+          }}
+          className="DetailData"
+        >
+          {props.detail.quantity}
+        </td>
+        <td
+          style={{
+            textAlign: 'center'
+          }}
+          className="DetailData"
+        >
+          {props.detail.netWeightUnitOfMeasure}
+        </td>
+        <td
+          style={{
+            textAlign: 'center'
+          }}
+          className="DetailData"
+        >
+          {props.detail.actualUnitCostMonetaryAmount}
+        </td>
+        <td
+          style={{
+            textAlign: 'center'
+          }}
+          className="DetailData"
+        >
+          {props.detail.totalUnitValueMonetaryAmount}
+        </td>
+      </tr>
+    </>
+  )
+}

src/Components/Clientes/Amazon/Services/Amazon.Services.ts

@@ -18,5 +18,8 @@ class AmazonDataService {
   SetDescripcion(data: DTO2096Descripcion) {
     return http.post<I2096Detail>(`/AmazonInvoice/C2096DescripcionSet`, data)
   }
+  TerminaFactura(id: number) {
+    return http.get<Boolean>(`/AmazonInvoice/TerminaFactura?id=${id}`)
+  }
 }
 export default new AmazonDataService()

src/store/features/Clientes/2096/AmazonInvoices.ts

@@ -0,0 +1,42 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import I2096Headers from '../../../../Components/Clientes/Amazon/Interfaces/I2096Header';
+const Invoice: I2096Headers[] = []
+const initialState = { Invoice }
+
+export const AmazonInvoicesSlice = createSlice({
+  name: 'AmazonInvoices',
+  initialState: initialState,
+  reducers: {
+    populateInvoices : (state, action: PayloadAction<I2096Headers[]>) => {
+    action.payload.forEach(newItem => {
+      var Existe = state.Invoice.find(function(onMemoryItem) {
+          return onMemoryItem.id === newItem.id;
+        });
+       if (!Existe) state.Invoice.push(newItem)
+    })
+    },
+    addInvoice : (state, action: PayloadAction<I2096Headers>) => {
+      var Existe = state.Invoice.find(function(item) {
+        return item.id === action.payload.id;
+      });
+     if (!Existe) state.Invoice.push(action.payload)
+    },
+    updateInvoice : (state, action: PayloadAction<I2096Headers>) => {
+      const i = state.Invoice.findIndex(_element => _element.id === action.payload.id);
+      if (i > -1) state.Invoice[i] = action.payload;
+      else state.Invoice.push(action.payload);
+    },
+    updateInvoiceDetail : (state, action: PayloadAction<I2096Headers>) => {
+      const i = state.Invoice.findIndex(_element => _element.id === action.payload.id);
+      if (i > -1) state.Invoice[i] = action.payload;
+      else state.Invoice.push(action.payload);
+    },
+    deleteInvoice : (state, action: PayloadAction<number>) => {
+      const newArr = state.Invoice.filter(data => data.id != action.payload);
+      state.Invoice=newArr
+    },
+  },
+})
+
+export const { addInvoice, populateInvoices, updateInvoice, deleteInvoice } = AmazonInvoicesSlice.actions;
+export default AmazonInvoicesSlice.reducer;

src/store/store.ts

@@ -14,6 +14,7 @@ import Cat1868ResponsablesSlice from './features/Clientes/1868/Cat1868Responsabl
 import Cat1868ClaveSATSlice from './features/Clientes/1868/Cat1868ClaveSATSlice'
 import Data1868FacturaDetalleSlice from './features/Clientes/1868/Data1868FacturaDetalleSlice'
 import CorresponsalesCuentasComplementariasEstatusSlice from './features/Corresponsales/CorresponsalesCuentasComplementariasEstatusSlice'
+import AmazonInvoicesSlice from './features/Clientes/2096/AmazonInvoices'
 
 
 export const store = configureStore({
@@ -32,7 +33,8 @@ export const store = configureStore({
     Cat1868Responsables: Cat1868ResponsablesSlice,
     Cat1868ClaveSAT: Cat1868ClaveSATSlice,
     Data1868FacturaDetalle: Data1868FacturaDetalleSlice,
-    CCueCompEstatus : CorresponsalesCuentasComplementariasEstatusSlice 
+    CCueCompEstatus : CorresponsalesCuentasComplementariasEstatusSlice,
+    AmazonInvoices : AmazonInvoicesSlice 
   }
 })
 

yarn.lock

@@ -9082,6 +9082,13 @@ react-my-hooks@^0.2.0:
   resolved "https://registry.yarnpkg.com/react-my-hooks/-/react-my-hooks-0.2.0.tgz#585c26fa36f0630c2294b7fc1b628bc518b90667"
   integrity sha512-O5IC8JI1vTZHg492ZvNuAS+v6n3EdD7YzVk38wcHo9POTTEIRJ6ZlXyZLHdV3Mah7S5rhsNC/hDJIxJwmWFxeA==
 
+react-number-format@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/react-number-format/-/react-number-format-5.1.2.tgz#54feff94d837e67078e234c2950d9a0fb96df3d6"
+  integrity sha512-NXm/MvZVjmPqrFbjAut/prCyBZ+pA+O+C12rDkWZrwS3JXz1J42RC1kpclkdnkx2KDjRCNFLb21FlwGcNBZddw==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-onclickoutside@^6.12.0:
   version "6.12.2"
   resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.12.2.tgz#8e6cf80c7d17a79f2c908399918158a7b02dda01"