Se puede descargar el Excel del reporte de Facturas de Amazon

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

@@ -1,20 +1,20 @@
-import * as React from 'react'
 import { useState } from 'react'
 import { Button, Col, Form, Modal, Row } from 'react-bootstrap'
 import * as CurrencyFormat from 'react-currency-format'
 import { MsgInformativo } from '../../../../Utils/Toast/msgInformativo'
+import DTO2096Descripcion from '../../DTO/DTO2096Descripcion'
 import DTO2096Fraccion from '../../DTO/DTO2096Fraccion'
 import DSAmazon from '../../Services/Amazon.Services'
 
-export interface IComboSelectProps {
+export interface IComboDescripcionProps {
   IDDetail: number
-  FraccionOriginal: string
+  DescripcionOriginal: string
 }
 
-export function ComboSelect(props: IComboSelectProps) {
+export function ComboDescripcion(props: IComboDescripcionProps) {
   const [Validacion, setValidacion] = useState(0)
   const [showModal, setShowModal] = useState(false)
-  const [Fraccion, setFraccion] = useState('')
+  const [Descripcion, setDescripcion] = useState('')
   const [header, setHeader] = useState('')
   const [show, setShowMsg] = useState(false)
   const [msg, setMsg] = useState('')
@@ -26,13 +26,17 @@ export function ComboSelect(props: IComboSelectProps) {
       setShowModal(true)
     }
     if (e === 1) {
-      const data: DTO2096Fraccion = {
+      const data: DTO2096Descripcion = {
         id: props.IDDetail,
-        fraccion: props.FraccionOriginal
+        descripcion: props.DescripcionOriginal
       }
-      DSAmazon.SetFraccion(data)
+      DSAmazon.SetDescripcion(data)
         .then((response) => {
-          alert('Se guardo correctamente la fraccion GEMCO')
+          setShowModal(false)
+          setHeader('Confirmacion')
+          setMsg('La descripcion se ha guardado correctamente')
+          setShowMsg(true)
+          return
         })
         .catch((e: Error) => {
           alert('Ocurrio un error' + e.message.toString())
@@ -40,27 +44,18 @@ export function ComboSelect(props: IComboSelectProps) {
     }
   }
 
-  const saveFraccion = () => {
+  const saveDescripcion = () => {
-    DSAmazon.GetValidaFraccion(Fraccion)
+    const data: DTO2096Descripcion = {
-      .then((response) => {
-        if (response.data.respuesta === 'Si') {
-          const data: DTO2096Fraccion = {
       id: props.IDDetail,
-            fraccion: Fraccion
+      descripcion: Descripcion
     }
-          DSAmazon.SetFraccion(data)
+    DSAmazon.SetDescripcion(data)
       .then((response) => {
-              alert('Se guardo correctamente la fraccion GEMCO')
+        setShowModal(false)
-            })
+        setHeader('Confirmacion')
-            .catch((e: Error) => {
+        setMsg('La descripcion se ha guardado correctamente')
-              alert('Ocurrio un error' + e.message.toString())
+        setShowMsg(true)
-            })
-        } else {
-          alert(
-            'Esa fraccion no existe, favor de verificarla antes de poder guardar...'
-          )
         return
-        }
       })
       .catch((e: Error) => {
         alert('Ocurrio un error' + e.message.toString())
@@ -89,32 +84,22 @@ export function ComboSelect(props: IComboSelectProps) {
       >
         <Modal.Body>
           <Row>
-            <Col xs={2}></Col>
+            <Col xs={2}>Descripcion GEMCO</Col>
-            <Col xs={4}>Proporcione la facccion GEMCO</Col>
+            <Col xs={8}>
-            <Col xs={3}>
+              <Form.Control
-              <CurrencyFormat
+                type="text"
-                onValueChange={(values: any) => {
+                as="textarea"
-                  const { value } = values
+                placeholder="Proporcione la descripcion correcta..."
-                  setFraccion(value)
+                id="ComentariosRechazo"
-                }}
+                size="sm"
-                format={'######## ##'}
+                value={Descripcion}
-                value={Fraccion}
+                onChange={(e) => setDescripcion(e.target.value)}
-                displayType={'input'}
-                style={{
-                  fontSize: '18px',
-                  backgroundColor: '#F1EEF9',
-                  border: '2px solid #5923F6',
-                  color: '#5923F6',
-                  width: '120px',
-                  textAlign: 'right',
-                  borderRadius: '10px'
-                }}
               />
             </Col>
-            <Col xs={3}>
+            <Col xs={1}>
               <Button
                 onClick={() => {
-                  saveFraccion()
+                  saveDescripcion()
                 }}
               >
                 Guardar

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

@@ -0,0 +1,144 @@
+import { useState } from 'react'
+import { Button, Col, Form, Modal, Row } from 'react-bootstrap'
+import * as CurrencyFormat from 'react-currency-format'
+import { MsgInformativo } from '../../../../Utils/Toast/msgInformativo'
+import DTO2096Fraccion from '../../DTO/DTO2096Fraccion'
+import DSAmazon from '../../Services/Amazon.Services'
+
+export interface IComboFraccionProps {
+    IDDetail: number
+    FraccionOriginal: string
+}
+
+export function ComboFraccion (props: IComboFraccionProps) {
+    const [Validacion, setValidacion] = useState(0)
+    const [showModal, setShowModal] = useState(false)
+    const [Fraccion, setFraccion] = useState('')
+    const [header, setHeader] = useState('')
+    const [show, setShowMsg] = useState(false)
+    const [msg, setMsg] = useState('')
+    const msgColor = 'primary'
+  
+    const changeValidacion = (e: number) => {
+      setValidacion(e)
+      if (e === 2) {
+        setShowModal(true)
+      }
+      if (e === 1) {
+        const data: DTO2096Fraccion = {
+          id: props.IDDetail,
+          fraccion: props.FraccionOriginal
+        }
+        DSAmazon.SetFraccion(data)
+          .then((response) => {
+            setShowModal(false)
+            setHeader('Confirmacion')
+            setMsg('La descripcion se ha guardado correctamente')
+            setShowMsg(true)
+            return
+          })
+          .catch((e: Error) => {
+            alert('Ocurrio un error' + e.message.toString())
+          })
+      }
+    }
+  
+    const saveFraccion = () => {
+      DSAmazon.GetValidaFraccion(Fraccion)
+        .then((response) => {
+          if (response.data.respuesta === 'Si') {
+            const data: DTO2096Fraccion = {
+              id: props.IDDetail,
+              fraccion: Fraccion
+            }
+            DSAmazon.SetFraccion(data)
+              .then((response) => {
+                setShowModal(false)
+                setHeader('Confirmacion')
+                setMsg('La descripcion se ha guardado correctamente')
+                setShowMsg(true)
+                return
+              })
+              .catch((e: Error) => {
+                alert('Ocurrio un error' + e.message.toString())
+              })
+          } else {
+            alert(
+              'Esa fraccion no existe, favor de verificarla antes de poder guardar...'
+            )
+            return
+          }
+        })
+        .catch((e: Error) => {
+          alert('Ocurrio un error' + e.message.toString())
+        })
+    }
+  
+    return (
+      <div>
+        <Form.Control
+          as="select"
+          className="form-select form-select-sm"
+          onChange={(e) => changeValidacion(parseInt(e.target.value))}
+          value={Validacion}
+        >
+          <option value="0"> </option>
+          <option value="1"> = </option>
+          <option value="2"> != </option>
+        </Form.Control>
+        <Modal
+          show={showModal}
+          onHide={() => {
+            setShowModal(false)
+          }}
+          size={'sm'}
+          dialogClassName={'modal-50w'}
+        >
+          <Modal.Body>
+            <Row>
+              <Col xs={2}></Col>
+              <Col xs={4}>Proporcione la facccion GEMCO</Col>
+              <Col xs={3}>
+                <CurrencyFormat
+                  onValueChange={(values: any) => {
+                    const { value } = values
+                    setFraccion(value)
+                  }}
+                  format={'######## ##'}
+                  value={Fraccion}
+                  displayType={'input'}
+                  style={{
+                    fontSize: '18px',
+                    backgroundColor: '#F1EEF9',
+                    border: '2px solid #5923F6',
+                    color: '#5923F6',
+                    width: '120px',
+                    textAlign: 'right',
+                    borderRadius: '10px'
+                  }}
+                />
+              </Col>
+              <Col xs={3}>
+                <Button
+                  onClick={() => {
+                    saveFraccion()
+                  }}
+                >
+                  Guardar
+                </Button>
+              </Col>
+            </Row>
+          </Modal.Body>
+        </Modal>
+        <MsgInformativo
+          show={show}
+          msg={msg}
+          header={header}
+          msgColor={msgColor}
+          closeToast={() => {
+            setShowMsg(false)
+          }}
+        />
+      </div>
+    )
+  }

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

@@ -0,0 +1,29 @@
+import { useState } from 'react';
+import * as CurrencyFormat from 'react-currency-format'
+
+export interface ITextBoxDescripcionProps {
+    Descripcion: string | null
+}
+
+export function TextBoxDescripcion (props: ITextBoxDescripcionProps) {
+    const [Descripcion, setDescripcion] = useState(props.Descripcion)
+  return (
+    <div>
+      <CurrencyFormat
+        value={Descripcion}
+        disabled={true}
+        displayType={'input'}
+        style={{
+          fontSize: '18px',
+          backgroundColor: '#F1EEF9',
+          border: '2px solid #5923F6',
+          color: '#5923F6',
+          width: '115px',
+          textAlign: 'right',
+          borderRadius: '10px'
+        }}
+      />
+    </div>
+  );
+}
+

src/Components/Clientes/Amazon/DTO/DTO2096Descripcion.ts

@@ -0,0 +1,4 @@
+export default interface DTO2096Descripcion {
+    id: number,
+    descripcion: string
+}

src/Components/Clientes/Amazon/DTO/DTO2096PrevioExcel.ts

@@ -0,0 +1,47 @@
+export default interface DTO2096PrevioExcel {
+  Consecutivo: string
+  ClaveCliente: string
+  Parte: string
+  ClaveProveedor: string
+  TipoOperacion: string
+  Fraccion: string
+  SubDivisión: string
+  DescripcionTIGIE: string
+  DescripcionFactura: string
+  DescripcionAgenteAduanal: string
+  UMFactura: string
+  UMComercial: string
+  UMTarifa: string
+  PrecioUnitario: string
+  PaisOrigenDestino: string
+  PaisCompradorVendedor: string
+  CodigoBarras: string
+  CodigoControlInterno: string
+  FamiliaProducto: string
+  Vinculacion: string
+  CodigoPreferencial: string
+  MetodoValoración: string
+  AplicaTLC: string
+  MontoDesgravacion: string
+  TipoArancel: string
+  TasaArancelEspecifico: string
+  TasaMaximaAdvalorem: string
+  UM: string
+  ES: string
+  Peso: string
+  Observaciones: string
+  ValorMinimo: string
+  UMCove: string
+  ClaveModificacion: string
+  DescripcionCertificado: string
+  TipoUsoMercancia: string
+  Exotico: string
+  Registro: string
+  TipoRegistro: string
+  FechaEmision: string
+  FechaVencimiento: string
+  Producto: string
+  UMCFDI: string
+  UMEmbalaje: string
+  IdParte99Update: string
+}

src/Components/Clientes/Amazon/Interfaces/I2096Detail.ts

@@ -11,6 +11,7 @@ export default interface I2096Detail {
   destinationHTSCode: string
   validaFraccionOriginal: number
   fraccionGEMCO: string
+  descripcionGEMCO: string
   sourceHTSCode: string
   eccn: string
   licEx: string

src/Components/Clientes/Amazon/Interfaces/I2096Header.ts

@@ -37,6 +37,7 @@ interface Detail {
   destinationHTSCode: string
   validaFraccionOriginal: number
   fraccionGEMCO: string
+  descripcionGEMCO: string
   sourceHTSCode: string
   eccn: string
   licEx: string

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

@@ -2,15 +2,26 @@ 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 { AiTwotoneQuestionCircle } from 'react-icons/ai'
 import { BsChevronDown, BsChevronRight, BsSearch } from 'react-icons/bs'
-import { FaCheckCircle, FaQuestionCircle, FaWindowClose } from 'react-icons/fa'
+import {
-import { FcQuestions } from 'react-icons/fc'
+  FaCheckCircle,
-import { ImCross } from "react-icons/im";
+  FaFileExcel,
-import { ComboSelect } from '../Components/ComboSelect/ComboSelect'
+  FaQuestionCircle,
-import { TextBoxFraccion } from '../Components/TextBoxFraccion/TextBoxFraccion'
+  FaWindowClose
+} 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'
 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'
 export interface IRtpAmazonPendingInvoicesProps {}
 
 export default function RtpAmazonPendingInvoices(
@@ -43,6 +54,128 @@ export default function RtpAmazonPendingInvoices(
       })
   }
 
+  const downloadExcel = (id: number) => {
+    let Invoice: I2096Headers[] = Data.filter((row) => row.id === id)
+    let Details: I2096Detail[] = Invoice[0].detail
+    let Consecutivo=1;
+    let excelReadyArray : DTO2096PrevioExcel[] = Details.map(function(element){
+      return {
+        Consecutivo: (Consecutivo++).toString(),
+        ClaveCliente: '2096',
+        Parte: element.itemId,
+        ClaveProveedor: '10',
+        TipoOperacion: '1',
+        Fraccion: element.fraccionGEMCO,
+        SubDivisión: element.fraccionGEMCO.substring(-2),
+        DescripcionTIGIE: '',
+        DescripcionFactura: element.pedimentoDescription,
+        DescripcionAgenteAduanal:element.descripcionGEMCO, 
+        UMFactura: '',
+        UMComercial: '',
+        UMTarifa:'',
+        PrecioUnitario: '',
+        PaisOrigenDestino: '',
+        PaisCompradorVendedor: '',
+        CodigoBarras: '',
+        CodigoControlInterno: '',
+        FamiliaProducto: '',
+        Vinculacion: '1',
+        CodigoPreferencial: '',
+        MetodoValoración: '1',
+        AplicaTLC: '0',
+        MontoDesgravacion: '0,000',
+        TipoArancel: '1',
+        TasaArancelEspecifico: '0,00000',
+        TasaMaximaAdvalorem: '0,00000',
+        UM: '',
+        ES: '',
+        Peso: '',
+        Observaciones: '',
+        ValorMinimo: '',
+        UMCove: '',
+        ClaveModificacion: '',
+        DescripcionCertificado: '',
+        TipoUsoMercancia: '',
+        Exotico: '',
+        Registro: '',
+        TipoRegistro: '',
+        FechaEmision: '',
+        FechaVencimiento: '',
+        Producto: '',
+        UMCFDI: '',
+        UMEmbalaje: '',
+        IdParte99Update: ''
+      }
+    });
+    exportExcel(excelReadyArray, 'PlantillaCarga')
+  }
+
+  function exportExcel(jsonData: DTO2096PrevioExcel[], fileName: string): void {
+    let Heading = [
+      [
+        'Consecutivo',
+        'ClaveCliente',
+        'Parte',	
+        'ClaveProveedor',	
+        'TipoOperacion',	
+        'Fraccion',
+        'SubDivisión', 
+        'DescripcionTIGIE',
+        'DescripcionFactura',
+        'DescripcionAgenteAduanal',
+        'UMFactura',	
+        'UMComercial',	
+        'UMTarifa',
+        'PrecioUnitario',
+        'PaisOrigenDestino',
+        'PaisCompradorVendedor',
+        'CodigoBarras',
+        'CodigoControlInterno',
+        'FamiliaProducto',	
+        'Vinculacion',
+        'CodigoPreferencial',
+        'MetodoValoración',
+        'AplicaTLC',
+        'MontoDesgravacion',
+        'TipoArancel',
+        'TasaArancelEspecifico',
+        'TasaMaximaAdvalorem',
+        'UM',
+        'ES',
+        'Peso',
+        'Observaciones',
+        'ValorMinimo',
+        'UMCove',
+        'ClaveModificacion',
+        'DescripcionCertificado',
+        'TipoUsoMercancia',
+        'Exotico',
+        'Registro',
+        'TipoRegistro',
+        'FechaEmision',
+        'FechaVencimiento',
+        'Producto',
+        'UMCFDI',
+        'UMEmbalaje',
+        'IdParte99Update'
+      ]
+    ]
+   
+
+    const wb = XLSX.utils.book_new()
+    const ws: 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.writeFile(wb, fileName + '.xlsx')
+    var range = XLSX.utils.decode_range(ws['!ref?'])
+    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(() => {
     loadReport()
   }, [])
@@ -153,6 +286,7 @@ export default function RtpAmazonPendingInvoices(
                 <tr>
                   <th></th>
                   <th style={{ width: '50px' }}>id</th>
+                  <th style={{ width: '50px' }}></th>
                   <th style={{ width: '80px' }}>Commercial Invoice Date</th>
                   <th style={{ width: '300px' }}>Invoice Number</th>
                   <th>Trailer Number</th>
@@ -211,6 +345,19 @@ export default function RtpAmazonPendingInvoices(
                               )}
                             </td>
                             <td>{MasterData.id}</td>
+                            <td>
+                              {MasterData.estatus === 1 ? (
+                                <div
+                                  onClick={() => downloadExcel(MasterData.id)}
+                                >
+                                  <IconContext.Provider
+                                    value={{ color: 'green', size: '20px' }}
+                                  >
+                                    <FaFileExcel />
+                                  </IconContext.Provider>
+                                </div>
+                              ) : null}
+                            </td>
                             <td style={{ width: '80px', textAlign: 'center' }}>
                               {MasterData.commercialInvoiceDate}
                             </td>
@@ -337,7 +484,7 @@ export default function RtpAmazonPendingInvoices(
                                           textAlign: 'center'
                                         }}
                                       >
-                                        Confirme
+                                        Confirme fraccion
                                       </th>
                                       <th
                                         style={{
@@ -349,6 +496,26 @@ export default function RtpAmazonPendingInvoices(
                                       >
                                         Fraccion GEMCO
                                       </th>
+                                      <th
+                                        style={{
+                                          width: '120px',
+                                          backgroundColor: '#D3E0EA',
+                                          color: '#346288',
+                                          textAlign: 'center'
+                                        }}
+                                      >
+                                        Confirme descripcion
+                                      </th>
+                                      <th
+                                        style={{
+                                          width: '70px',
+                                          backgroundColor: '#D3E0EA',
+                                          color: '#346288',
+                                          textAlign: 'center'
+                                        }}
+                                      >
+                                        Descripcion GEMCO
+                                      </th>
                                       <th
                                         style={{
                                           width: '70px',
@@ -536,7 +703,12 @@ export default function RtpAmazonPendingInvoices(
                                                     }}
                                                     className="DetailData"
                                                   >
-                                                    <ComboSelect IDDetail={detail.id} FraccionOriginal={detail.destinationHTSCode}/>
+                                                    <ComboFraccion
+                                                      IDDetail={detail.id}
+                                                      FraccionOriginal={
+                                                        detail.destinationHTSCode
+                                                      }
+                                                    />
                                                   </td>
                                                   <td
                                                     style={{
@@ -552,6 +724,27 @@ export default function RtpAmazonPendingInvoices(
                                                       }
                                                     />
                                                   </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'

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

@@ -3,6 +3,7 @@ import I2096Headers from '../Interfaces/I2096Header'
 import IRespuesta from '../../../../Interfaces/IRespuesta'
 import DTO2096Fraccion from '../DTO/DTO2096Fraccion'
 import I2096Detail from '../Interfaces/I2096Detail'
+import DTO2096Descripcion from '../DTO/DTO2096Descripcion'
 
 class AmazonDataService {
   GetPendingInvoice() {
@@ -14,5 +15,8 @@ class AmazonDataService {
   SetFraccion(data: DTO2096Fraccion) {
     return http.post<I2096Detail>(`/AmazonInvoice/C2096FraccionSet`, data)
   }
+  SetDescripcion(data: DTO2096Descripcion) {
+    return http.post<I2096Detail>(`/AmazonInvoice/C2096DescripcionSet`, data)
+  }
 }
 export default new AmazonDataService()