Se agrega en la interfazy el componente RptOperacionesPagadasMissionFood el atributo Edocument.

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "workbench.colorTheme": "Infinity Dark Theme Eye Friendly Colors"
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gemco",
-  "version": "0.1.0",
+  "version": "3.2.0",
   "homepage": ".",
   "private": true,
   "dependencies": {
@@ -20,7 +20,9 @@
     "axios": "^0.26.0",
     "bootstrap": "^5.1.3",
     "btoa": "^1.2.1",
+    "chart.js": "^4.3.0",
     "env-cmd": "^10.1.0",
+    "faker": "^6.6.6",
     "file-saver": "^2.0.5",
     "formik": "^2.2.9",
     "jwt-decode": "^3.1.2",
@@ -30,6 +32,7 @@
     "react-apexcharts": "^1.4.0",
     "react-bootstrap": "^2.2.0",
     "react-captchaa": "^1.0.13",
+    "react-chartjs-2": "^5.2.0",
     "react-currency-format": "^1.1.0",
     "react-data-export": "^0.6.0",
     "react-data-table-component": "^7.5.2",
@@ -41,6 +44,7 @@
     "react-dropdown-select": "^4.9.0",
     "react-dropzone": "^14.2.1",
     "react-flexy-table": "^1.8.10",
+    "react-google-charts": "^4.0.0",
     "react-google-qrcode": "^1.0.3",
     "react-grid-data": "^1.1.5",
     "react-icons": "^4.3.1",
@@ -50,7 +54,9 @@
     "react-router-dom": "6",
     "react-scripts": "5.0.0",
     "react-to-print": "^2.14.7",
+    "react-vis": "^1.12.1",
     "react-webcam-qr-scanner.ts": "^1.0.4",
+    "recharts": "^2.7.2",
     "redux": "^4.1.2",
     "redux-starter-kit": "^2.0.0",
     "string-hex": "^1.0.0",
@@ -63,7 +69,7 @@
     "start-dev": "env-cmd -f .env.development react-scripts start",
     "start-qa": "env-cmd -f .env.qa react-scripts start",
     "start-prod": "env-cmd -f .env.production react-scripts start",
-    "build-qa": "env-cmd -f .env.qa react-scripts build",
+    "build-qa": "env-cmd -f .env.qa react-scripts build version --patch",
     "build-prod": "env-cmd -f .env.production react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

src/Components/Catalogos/CatFraccionesVulnerables/CatFraccionesVulnerables.tsx

@@ -0,0 +1,575 @@
+import React, { FC, useEffect, useState } from 'react'
+import { Alert, Button, Card, Col, Form, Modal, Row } from 'react-bootstrap'
+import { IconContext } from 'react-icons'
+import ICatFraccionesVulnerables from '../../../Interfaces/Catalogos/ICatFraccionesVulnerables'
+import FraccionesVulnerables from '../../../Services/Catalogos/FraccionesVulnerables'
+import { useDispatch, useSelector } from 'react-redux'
+import { BsFileEarmarkExcel, BsFillPencilFill, BsSearch } from 'react-icons/bs'
+import DataTable from 'react-data-table-component'
+import * as XLSX from 'xlsx'
+import { FaEraser } from 'react-icons/fa'
+import { FormControl } from 'react-bootstrap'
+import { AiFillCloseCircle } from 'react-icons/ai'
+import { AiOutlineSave } from 'react-icons/ai'
+import { MsgInformativo } from '../../Utils/Toast/msgInformativo'
+
+// import { kMaxLength } from 'buffer'
+// import { isNull, set } from 'cypress/types/lodash'
+// import { number } from 'yup'
+// import { parse } from 'path'
+
+// Define types for the component props and table row data
+interface IProps {}
+
+export default function CatFraccionesVulnerables(props: IProps) {
+  const [UserType, setUserType] = useState(() => {
+    const stickyValue = window.localStorage.getItem('UserType')
+    return stickyValue !== null ? JSON.parse(stickyValue) : ''
+  })
+  const dispatch = useDispatch()
+  const [Data, setData] = useState<ICatFraccionesVulnerables[]>([])
+
+  const [tipoReporte, setTipoReporte] = useState(0)
+  // const [filtro, setFiltro] = useState('')
+  const [DataOriginal, setDataOriginal] = useState<ICatFraccionesVulnerables[]>(
+    []
+  )
+  // const mFraccionesVulnerables = useSelector((state: RootState) => state.CatFraccionesVulnerables.CatFraccionesVulnerables);
+  const [header, setHeader] = useState<string>('') // Specify the type of 'header'
+  // const [msgColor, setMsgColor] = useState<string>('primary'); // Specify the type of 'msgColor'
+  const [show, setShowMsg] = useState(false) // Specify the type of 'show'
+  const [msg, setMsg] = useState<string>('') // Specify the type of 'msg'
+  const [id, setId] = useState<number>(0) // Specify the type of 'id'
+  const [Fraccion, setFraccion] = useState<number>(0) // Specify the type of 'Fraccion'
+  const [Nico, setNico] = useState<string>('0') // Specify the type of 'Nico'
+  const [Activo, setActivo] = useState<number>(0) // Specify the type of 'Activo'
+  const [showModal, setShowModal] = useState<boolean>(false)
+  const [editMode, setEditMode] = useState(false) // Nuevo estado para controlar el modo de edición
+  const [selectedRow, setSelectedRow] =
+    useState<ICatFraccionesVulnerables | null>(null) // Nuevo estado para almacenar la fila seleccionada
+  // const [fraccionesVulnerables, setFraccionesVulnerables] = useState([]);
+  const [modalFileManager, setModalFileManager] = useState(false)
+  const msgColor = 'primary'
+
+  const columnsFraccionesVulnerables = [
+    {
+      name: 'Id',
+      width: '14%',
+      selector: (row: ICatFraccionesVulnerables) => row.id,
+      sortable: true
+    },
+    {
+      name: 'Fraccion',
+      width: '20%',
+
+      selector: (row: ICatFraccionesVulnerables) => row.fraccion,
+      sortable: true
+    },
+    {
+      name: 'Nico',
+      width: '15%',
+
+      selector: (row: ICatFraccionesVulnerables) => row.nico,
+      sortable: true
+    },
+    {
+      name: 'Activo',
+      width: '15%',
+      selector: (row: ICatFraccionesVulnerables) =>
+        row.activo === 1 ? 'Sí' : 'No',
+      sortable: true
+    },
+    {
+      name: 'Edita',
+      width: '15%',
+
+      cell: (row: ICatFraccionesVulnerables) => (
+        <Button
+          size="sm"
+          variant="light"
+          style={{
+            textAlign: 'right',
+            visibility: UserType === '4' ? 'hidden' : 'visible'
+          }}
+          onClick={() => loadRow(row)} // Cambia esta línea para pasar el objeto 'row' a la función 'loadRow'
+        >
+          <IconContext.Provider value={{ color: 'blue', size: '20px' }}>
+            <BsFillPencilFill />
+          </IconContext.Provider>{' '}
+        </Button>
+      )
+    },
+    {
+      name: 'Elimina',
+      width: '15%',
+      cell: (row: ICatFraccionesVulnerables) => (
+        <Button
+          size="sm"
+          variant="light"
+          style={{
+            textAlign: 'right',
+            visibility: UserType === '4' ? 'hidden' : 'visible'
+          }}
+          onClick={() => deleteRow(row.id)} // Llama a la función deleteRow pasando el ID de la fila
+        >
+          <IconContext.Provider value={{ color: 'red', size: '20px' }}>
+            <AiFillCloseCircle />
+          </IconContext.Provider>{' '}
+        </Button>
+      )
+    }
+  ]
+
+  const loadRow = (data: ICatFraccionesVulnerables): void => {
+    setSelectedRow(data) // Al hacer clic en el botón de edición, establecemos la fila seleccionada en el estado
+    setEditMode(true) // Cambiamos a modo de edición
+    setId(data.id) // Establecemos el id de la fila seleccionada
+    setFraccion(data.fraccion) // Cargamos los valores de fracción y nico para edición
+    setNico(data.nico)
+  }
+
+  // const truncatedValue = inputValue.substring(0, 8)
+  // setFraccion(truncatedValue)
+
+  const generaReporte = () => {
+    setTipoReporte(0)
+    FraccionesVulnerables.getAll()
+      .then((response) => {
+        setData(response.data)
+        setDataOriginal(response.data)
+        // uploadAllRows(response.data)
+
+        setHeader('Informativo')
+        setMsg('Se encontro la siguiente informacion...')
+        setShowMsg(true)
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+  }
+
+  const uploadAllRows = (data: ICatFraccionesVulnerables[]) => {
+    // Iteramos sobre los datos y realizamos la petición para cada fila
+    data.forEach((row) => {
+      uploadFile(row)
+    })
+  }
+
+  useEffect(() => {
+    // console.log(id) // Esto imprimirá el valor actualizado de id después de que cambie
+  }, [id])
+
+  const handleCreateNewRecord = () => {
+    // console.log('se han borrod los texbox ')
+
+    setSelectedRow(null)
+    setFraccion(0)
+    setNico('0')
+    setActivo(0) // Establecer a 0 (No)
+    setEditMode(true)
+    setId(0)
+    setShowModal(false)
+  }
+
+  function deleteRow(id: number): void {
+    FraccionesVulnerables.Delete(id)
+      .then((response) => {
+        setData((prevData) =>
+          prevData.map((item) =>
+            item.id === id ? { ...item, activo: 0 } : item
+          )
+        )
+
+        console.log(response.data)
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrió un error: ' + e)
+
+        return
+      })
+  }
+
+  const uploadFile = (data: ICatFraccionesVulnerables): Promise<any> => {
+    return new Promise((resolve, reject) => {
+      FraccionesVulnerables.Append(data)
+        .then((response) => {
+          // console.log(response.data) // Mensaje de éxito
+          resolve(response.data)
+        })
+        .catch((e: Error) => {
+          console.error('Error durante la inserción:', e) // Mensaje de error
+          reject(e)
+        })
+    })
+  }
+  //Aqui agregamos la validacion de los digitos de las fracciones -------------------------------------------------------
+  const handleFraccionKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    const fraccionAsString = Fraccion.toString()
+    if (e.key.length === 1 && fraccionAsString.length >= 8) {
+      e.preventDefault() // Evitar agregar más caracteres si ya hay 8
+    }
+  }
+
+  const handleFraccionBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    const fraccionAsString = Fraccion.toString()
+    if (fraccionAsString.length !== 8) {
+      console.log('La fracción debe tener 8 dígitos.')
+
+      e.currentTarget.focus() // Mantener el foco en el campo
+    }
+  }
+
+  // aqui agregamos las validaciones de los digitos del nico---------------------------------------------------------
+
+  const handleNicoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value
+    if (value.length <= 2) {
+      setNico(value)
+    }
+  }
+
+  const handleNicoKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key.length === 1 && Nico.length >= 2) {
+      e.preventDefault() // Evitar agregar más caracteres si ya hay 2
+    }
+  }
+
+  const handleNicoBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    if (Nico.length !== 2) {
+      console.log('El Nico debe tener 2 dígitos.')
+      e.currentTarget.focus() // Mantener el foco en el campo
+    }
+  }
+
+  // Guardar --------------------------------------------------------------
+
+  const handleSaveChanges = async () => {
+    if (id === 0) {
+      const fraccionAsString = Fraccion.toString()
+
+      if (fraccionAsString.length !== 8 || Nico.length !== 2) {
+        setHeader('Error')
+
+        if (fraccionAsString.length !== 8 && Nico.length !== 2) {
+          setMsg(
+            'La fraccion debe tener 8 dígitos y el nico debe tener 2 dígitos.'
+          )
+        } else if (fraccionAsString.length !== 8) {
+          setMsg('La fracción debe tener 8 dígitos.')
+        } else {
+          setMsg('El nico debe tener 2 dígitos.')
+        }
+
+        setShowMsg(true)
+        return // Esto podría ser necesario para evitar una ejecución adicional
+      }
+
+      const newRecord = {
+        id: id,
+        fraccion: Fraccion,
+        nico: Nico,
+        activo: Activo
+      }
+
+      try {
+        const response = await uploadFile(newRecord)
+        const newId = response.id
+
+        // Actualizar el estado local con el nuevo registro que incluye el nuevo ID
+        const updatedRecord = { ...newRecord, id: newId }
+        setData((prevData) => [...prevData, updatedRecord])
+
+        // console.log('este el newId' + newId)
+        // console.log('este el id normal ' + id)
+
+        // Restablecer valores de los campos
+        handleCreateNewRecord()
+      } catch (error) {
+        console.error('Error durante la inserción:', error)
+      }
+    } else {
+      // Aquí actualizamos el registro existente
+
+      const fraccionAsString = Fraccion.toString()
+
+      if (fraccionAsString.length !== 8) {
+        setHeader('Error')
+        setMsg('La fraccion debe tener 8 digitos.')
+        setShowMsg(true)
+        return
+      }
+
+      if (Nico.length !== 2) {
+        setHeader('Error')
+        setMsg('El Nico debe tener 2 digitos.')
+        setShowMsg(true)
+        return
+      }
+
+      const updatedData = Data.map((row) =>
+        row.id === selectedRow?.id
+          ? { ...row, fraccion: Fraccion, nico: Nico, activo: Activo }
+          : row
+      )
+
+      setData(updatedData)
+      const updatedRow = updatedData.find((row) => row.id === selectedRow?.id)
+      if (updatedRow) {
+        uploadFile(updatedRow) // Llamada a uploadFile para actualizar el registro
+      }
+      setEditMode(false)
+      setShowModal(false)
+    }
+  }
+
+  const downloadExcel = () => {
+    exportExcel(Data, 'Fracciones Vulnerables')
+  }
+
+  function exportExcel(
+    jsonData: ICatFraccionesVulnerables[],
+    fileName: string
+  ): void {
+    let Heading = [['Id', 'Fraccion', 'Nico', 'Activo']]
+    const wb = XLSX.utils.book_new()
+    const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet([])
+    XLSX.utils.sheet_add_aoa(ws, Heading)
+
+    // Transformar los valores de 'activo' en 'Si' o 'No' antes de agregarlos a la hoja de cálculo
+    const transformedData = jsonData.map((row) => ({
+      ...row,
+      activo: row.activo === 1 ? 'Si' : 'No'
+    }))
+
+    XLSX.utils.sheet_add_json(ws, transformedData, {
+      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'
+      if (!ws[address]) continue
+      ws[address].v = ws[address].v.toUpperCase()
+    }
+  }
+
+  const handleFraccionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseFloat(e.target.value)
+    setFraccion(isNaN(value) ? 0 : value)
+  }
+
+  // Función para manejar el cambio en el campo de entrada de la fracción
+
+  return (
+    <div className="mt-2">
+      <Card>
+        <Card.Body>
+          <div className="container">
+            <div
+              className="row mb-4   "
+              style={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                minHeight: '1vh'
+              }}
+            >
+              <Card
+                style={{
+                  paddingTop: '10px',
+                  paddingBottom: '5px',
+                  width: '900px',
+                  height: '50px'
+                }}
+              >
+                <Row>
+                  <Col xs={12}></Col>
+                  <Col xs={12}>
+                    <Row className="align-items-center">
+                      <Col xs={1}>
+                        <Form.Label className="mb-0">Fracción</Form.Label>
+                      </Col>
+                      <Col xs={1}>
+                        <FormControl
+                          type="text"
+                          value={Fraccion}
+                          onChange={handleFraccionChange}
+                          onKeyDown={handleFraccionKeyDown}
+                          onBlur={handleFraccionBlur}
+                          inputMode="numeric"
+                          className="orm-select mx-2"
+                          maxLength={8}
+                          minLength={8}
+                          style={{
+                            backgroundColor: 'white',
+                            color: 'black',
+                            padding: '4px',
+                            width: '80px',
+                            height: '30px'
+                          }}
+                        />
+                      </Col>
+                      <Col
+                        xs={1}
+                        style={{ textAlign: 'right', width: '100px' }}
+                      >
+                        <Form.Label className="mb-0  ">Nico</Form.Label>
+                      </Col>
+                      <Col xs={1}>
+                        <FormControl
+                          type="text"
+                          value={Nico}
+                          // onChange={(e) => setNico(e.target.value)}
+                          onChange={handleNicoChange}
+                          onKeyDown={handleNicoKeyDown}
+                          onBlur={handleNicoBlur}
+                          // inputMode="numeric"
+                          className="orm-select mx-2"
+                          maxLength={2}
+                          minLength={2}
+                          style={{
+                            backgroundColor: 'white',
+                            color: 'black',
+                            padding: '4px',
+                            width: '30px',
+                            height: '30px'
+                          }}
+                        />
+                      </Col>
+                      <Col xs={2} style={{ textAlign: 'right', width: '50px' }}>
+                        <Form.Label className="mb-0">Activo</Form.Label>
+                      </Col>
+                      <Col xs={2}>
+                        <Form.Select
+                          value={Activo}
+                          onChange={(e) => setActivo(Number(e.target.value))}
+                          className="form-select mx-2"
+                          style={{
+                            backgroundColor: 'white',
+                            color: 'black',
+                            padding: '4px',
+                            width: '60px',
+                            height: '30px'
+                          }}
+                        >
+                          <option value={1}>Si</option>
+                          <option value={0}>No</option>
+                        </Form.Select>
+                      </Col>
+                      <Col xs={0} style={{ width: '100px' }}>
+                        <Button
+                          size="sm"
+                          variant="light"
+                          onClick={handleCreateNewRecord}
+                          style={{
+                            backgroundColor: 'orange',
+                            color: 'white',
+                            padding: '4px',
+                            width: '50px',
+                            height: '32px'
+                          }}
+                        >
+                          <FaEraser />
+                        </Button>
+                      </Col>
+
+                      <Col xs={0} style={{ width: '110px' }}>
+                        <Button
+                          style={{
+                            backgroundColor: 'blue',
+                            color: 'white',
+                            padding: '2px',
+                            width: '55px',
+                            height: '30px'
+                          }}
+                          variant="primary"
+                          size="sm"
+                          onClick={() => {
+                            generaReporte()
+                          }}
+                        >
+                          <BsSearch />
+                        </Button>
+                      </Col>
+                      <Col xs={0} style={{ width: '110px' }}>
+                        <Button
+                          style={{
+                            backgroundColor: 'blue',
+                            color: 'white',
+                            padding: '0px',
+                            width: '55px',
+                            height: '30px'
+                          }}
+                          variant="primary"
+                          onClick={handleSaveChanges}
+                        >
+                          <AiOutlineSave />
+                        </Button>
+                      </Col>
+                      <Col xs={0} style={{ width: '110px' }}>
+                        <Button
+                          size="sm"
+                          variant="success"
+                          onClick={() => {
+                            downloadExcel()
+                          }}
+                          style={{
+                            backgroundColor: 'green',
+                            color: 'white',
+                            padding: '1px',
+                            width: '55px',
+                            height: '30px'
+                          }}
+                        >
+                          <BsFileEarmarkExcel />
+                        </Button>
+                      </Col>
+                    </Row>
+                  </Col>
+                  <Col xs={1}></Col>
+                </Row>
+              </Card>
+            </div>
+            <Row>
+              <Col xs={3}></Col>
+              <Col xs={6}>
+                <Card>
+                  <DataTable
+                    noHeader
+                    defaultSortFieldId={'id'}
+                    defaultSortAsc={true}
+                    striped={true}
+                    dense={true}
+                    paginationPerPage={10}
+                    pagination
+                    highlightOnHover
+                    columns={columnsFraccionesVulnerables}
+                    data={Data}
+                    pointerOnHover
+                  />
+                </Card>
+              </Col>
+              <Col xs={1}></Col>
+            </Row>
+          </div>
+        </Card.Body>
+      </Card>
+      <MsgInformativo
+        show={show}
+        msg={msg}
+        header={header}
+        msgColor={msgColor}
+        closeToast={() => {
+          setShowMsg(false)
+        }}
+      />
+    </div>
+  )
+}

src/Components/Clientes/Amazon/Catalogos/CatConceptosConsulta.tsx

@@ -0,0 +1,501 @@
+import React, { FC, useEffect, useState } from 'react'
+
+import ITabulador from '../../../../Interfaces/Catalogos/ITabulador'
+import ITabuladorConceptos from '../../../../Interfaces/Catalogos/ITabuladorConceptos'
+import DTOConceptos from '../../../../DTO/Utils/DTOConceptos'
+
+import CTabDataService from '../../../../Services/Corresponsalias/Corresponsales.Tabuladores.Services'
+//import CTabDetDataService from '../../../../Services/Corresponsalias/Corresponsales.Tabuladores.Detalle.Sevices'
+import AmazonSrvDataService from '../Services/Amazon.Services'
+
+import ClientesDataService from '../../../../Services/Catalogos/Clientes.Services'
+
+import { MsgInformativo } from '../../../Utils/Toast/msgInformativo'
+import { ControlledInput } from '../../../Utils/ControlledInput/ControlledInput'
+import DataTable from 'react-data-table-component'
+import {
+  Alert,
+  Button,
+  Card,
+  Col,
+  Container,
+  FloatingLabel,
+  Form,
+  Modal,
+  Row
+} from 'react-bootstrap'
+import { IconContext } from 'react-icons'
+import 'react-data-table-component-extensions/dist/index.css'
+import {
+  BsCheckCircleFill,
+  BsPlusSquareFill,
+  BsXCircleFill
+} from 'react-icons/bs'
+import IClientes from '../../../../Interfaces/Catalogos/IClientes'
+import { FcTimeline } from 'react-icons/fc'
+import { FaEraser, FaTimesCircle } from 'react-icons/fa'
+import ICat2096CatConceptosConsulta from '../Interfaces/I2096CatConceptosConsulta'
+import { populateCatConcetosConsultas, updateCatConcetosConsulta } from '../../../../store/features/Clientes/2096/AmazonCatConceptosConsulta'
+import { useDispatch } from 'react-redux'
+
+export interface ICatConceptosConsultaProps {}
+
+export default function CatConceptosConsulta(
+  props: ICatConceptosConsultaProps
+) {
+  const [UserId, setUserId] = useState(() => {
+    const stickyValue = window.localStorage.getItem('UserId')
+    return stickyValue !== null ? JSON.parse(stickyValue) : 0
+  })
+  const dispatch = useDispatch()
+  const [Tabulador, setTabulador] = useState(0)
+  const [Id, setId] = useState(0)
+  const [Concepto, setConcepto] = useState(0)
+  const [Cliente, setCliente] = useState(0)
+  const [Activo, setActivo] = useState(0)
+  const [Clientes, setClientes] = useState<Array<IClientes>>()
+  const [Siglas, setSiglas] = useState('')
+  const [ShortDescription, setShortDescription] = useState('')
+  const [SpanishDescription, setSpanishDescription] = useState('')
+  const [SpanishDescriptionWide, setSpanishDescriptionWide] = useState('')
+  const [DetalleConceptos, setDetalleConceptos] = useState<
+    ITabuladorConceptos[]
+  >([])
+  const [CatConceptos, setCatConceptos] = useState<
+    ICat2096CatConceptosConsulta[]
+  >([])
+  const [Tabuladores, setTabuladores] = useState<ITabulador[]>([])
+  const [AllTabuladores, setAllTabuladores] = useState<ITabulador[]>([])
+  const [Costo, setCosto] = useState('')
+  const [header, setHeader] = useState('')
+  const [msgColor, setMsgColor] = React.useState('primary')
+  const [show, setShowMsg] = useState(false)
+  const [msg, setMsg] = useState('')
+  const [DialogTabs, setDialogTabs] = useState(false)
+
+  const colConcepts = [
+    {
+      name: 'Activo',
+      width: '80px',
+      cell: (row: ICat2096CatConceptosConsulta) => (
+        <div
+          onClick={() => {
+            loadData(row)
+          }}
+        >
+          <IconContext.Provider
+            value={{ color: row.activo ? 'green' : 'red', size: '20px' }}
+          >
+            {row.activo ? <BsCheckCircleFill /> : <BsXCircleFill />}
+          </IconContext.Provider>
+        </div>
+      )
+    },
+    {
+      name: 'Siglas',
+      width: '80px',
+      selector: (row: ICat2096CatConceptosConsulta) => row.siglas,
+      sortable: true
+    },
+    {
+      name: 'Descripcion corta',
+      width: '300px',
+      selector: (row: ICat2096CatConceptosConsulta) => row.shortDescription,
+      wrap: true,
+      sortable: true
+    },
+    {
+      name: 'Descripcion español',
+      width: '450px',
+      selector: (row: ICat2096CatConceptosConsulta) => row.spanishDescription,
+      wrap: true,
+      sortable: true
+    },
+    {
+      name: 'Descripcion amplia',
+      width: '450px',
+      selector: (row: ICat2096CatConceptosConsulta) =>
+        row.spanishDescriptionWide,
+      wrap: true,
+      sortable: true
+    }
+  ]
+
+  const loadData = (data: ICat2096CatConceptosConsulta) => {
+    setId(data.id)
+    setSiglas(data.siglas)
+    setShortDescription(data.shortDescription)
+    setSpanishDescription(data.spanishDescription)
+    setSpanishDescriptionWide(data.spanishDescriptionWide)
+    setActivo(data.activo ? 1 : 0)
+  }
+
+  const deleteTabulador = () => {
+    CTabDataService.Delete(Tabulador)
+      .then((response) => {
+        if (response.status === 200) {
+          setHeader('Informativo')
+          setMsg(response.data.respuesta)
+          setShowMsg(true)
+          setDialogTabs(false)
+          setTabuladores(Tabuladores.filter((data) => data.id != Tabulador))
+          setAllTabuladores(Tabuladores)
+          return
+        }
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+  }
+
+  const loadCatalog = () => {
+    AmazonSrvDataService.CatConceptosConsultaGET()
+      .then((response) => {
+        dispatch(populateCatConcetosConsultas(response.data))
+        setCatConceptos(response.data)
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+  }
+
+  useEffect(() => {
+    loadCatalog()
+  }, [])
+
+  useEffect(() => {
+    if (Cliente > 0) {
+      setSiglas('')
+      setTabuladores([])
+      setDetalleConceptos([])
+      CTabDataService.GetByCustomer(Cliente)
+        .then((response) => {
+          setTabuladores(response.data)
+        })
+        .catch((e: Error) => {
+          setHeader('Error')
+          setMsg('Ocurrio un error: ' + e)
+          setShowMsg(true)
+          return
+        })
+    }
+  }, [Cliente])
+
+  const filtraTabulador = (e: any) => {
+    if (e.target.value !== '') {
+      setTabuladores(
+        AllTabuladores.filter(function (el) {
+          return el.nombre
+            .toLocaleLowerCase()
+            .includes(e.target.value.toLocaleLowerCase())
+        })
+      )
+    } else {
+      setTabuladores(AllTabuladores)
+    }
+  }
+
+  const save = () => {
+    const data: ICat2096CatConceptosConsulta = {
+      id: Id,
+      siglas: Siglas,
+      shortDescription: ShortDescription,
+      spanishDescription: SpanishDescription,
+      spanishDescriptionWide: SpanishDescriptionWide,
+      activo: Activo==1
+    }
+    AmazonSrvDataService.CatConceptosConsultaAppend(data)
+      .then((response) => {
+        if (response.status === 200) {
+          loadCatalog()
+          setHeader('Informativo')
+          setMsg('La informacion se guardo correctamente')
+          setShowMsg(true)
+          return
+        }
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+  }
+
+  return (
+    <div>
+      <Card>
+        <Card.Body>
+          <Card style={{ height: '100%' }}>
+            <Card.Header as="h4">Catalogo de consultas para Amazon</Card.Header>
+            <Card.Body>
+              <Container fluid>
+                <Alert variant="primary">
+                  <Row>
+                    <Col xs={1}>
+                      <FloatingLabel
+                        controlId="floatingInput"
+                        label="Siglas"
+                        className="mb-3"
+                      >
+                        <Form.Control
+                          type="text"
+                          placeholder=""
+                          value={Siglas}
+                          maxLength={4}
+                          onChange={(e) => {
+                            setSiglas(e.target.value)
+                          }}
+                        />
+                      </FloatingLabel>
+                    </Col>
+                    <Col xs={8}>
+                      <FloatingLabel
+                        controlId="floatingInput"
+                        label="Descripcion corta"
+                        className="mb-3"
+                      >
+                        <Form.Control
+                          type="text"
+                          placeholder="Descripcion corta"
+                          value={ShortDescription}
+                          onChange={(e) => {
+                            setShortDescription(e.target.value)
+                          }}
+                        />
+                      </FloatingLabel>
+                    </Col>
+                    <Col
+                      xs={1}
+                      style={{
+                        textAlign: 'left',
+                        paddingTop: '5px',
+                        cursor: 'pointer',
+                        paddingLeft: '0px'
+                      }}
+                      onClick={() => {
+                        setTabulador(0)
+                        setSiglas('')
+                      }}
+                    >
+                      <IconContext.Provider
+                        value={{ color: 'orange', size: '25px' }}
+                      >
+                        <FaEraser />
+                      </IconContext.Provider>
+                    </Col>
+                    <Col></Col>
+                    <Col style={{ paddingTop: '20px' }}>
+                      <Button
+                        variant="primary"
+                        size="sm"
+                        style={{ paddingLeft: '10px', paddingRight: '10px' }}
+                        onClick={() => save()}
+                      >
+                        Guardar
+                      </Button>
+                    </Col>
+                  </Row>
+                  <Row>
+                    <Col xs={5}>
+                      <FloatingLabel
+                        controlId="floatingInput"
+                        label="Descripcion en español"
+                        className="mb-3"
+                      >
+                        <Form.Control
+                          as="textarea"
+                          placeholder=""
+                          style={{ height: '100px' }}
+                          value={SpanishDescription}
+                          onChange={(e) => {
+                            setSpanishDescription(e.target.value)
+                          }}
+                        />
+                      </FloatingLabel>
+                    </Col>
+                    <Col xs={5}>
+                      <FloatingLabel
+                        controlId="floatingInput"
+                        label="Descripcion amplia"
+                        className="mb-3"
+                      >
+                        <Form.Control
+                          as="textarea"
+                          placeholder="Descripcion amplia"
+                          style={{ height: '100px' }}
+                          value={SpanishDescriptionWide}
+                          onChange={(e) => {
+                            setSpanishDescriptionWide(e.target.value)
+                          }}
+                        />
+                      </FloatingLabel>
+                    </Col>
+                    <Col style={{ paddingTop: '20px' }}>
+                      <FloatingLabel controlId="floatingSelect" label="Activo">
+                        <Form.Select
+                          aria-label="Activo"
+                          value={Activo}
+                          onChange={(e) => {
+                            setActivo(parseInt(e.target.value))
+                          }}
+                        >
+                          <option value="1">Si</option>
+                          <option value="0">No</option>
+                        </Form.Select>
+                      </FloatingLabel>
+                    </Col>
+                    <Col></Col>
+                  </Row>
+                </Alert>
+                <Row>
+                  {/*                   <Col xs={6}>
+                    <Card style={{}}>
+                      <Card.Body>
+                        <Card.Subtitle className="mb-2 text-muted">
+                          <Row>
+                            <Col xs={2} style={{ paddingTop: '8px' }}>
+                              Tabulador
+                            </Col>
+                            <Col xs={10}>
+                              <Form.Control
+                                type="text"
+                                size="sm"
+                                placeholder="Busqueda de tabulador..."
+                                onChange={(e) => {
+                                  filtraTabulador(e)
+                                }}
+                              />
+                            </Col>
+                          </Row>
+                        </Card.Subtitle>
+                       
+                      </Card.Body>
+                    </Card>
+                  </Col> */}
+                  <Col xs={12}>
+                    <Card style={{}}>
+                      <Card.Body>
+                        <Card.Subtitle className="mb-2 text-muted">
+                          <Row>
+                            <Col xs={12} style={{ paddingTop: '8px' }}>
+                              <DataTable
+                                noHeader
+                                defaultSortFieldId={'id'}
+                                defaultSortAsc={true}
+                                pagination
+                                highlightOnHover
+                                columns={colConcepts}
+                                data={CatConceptos}
+                              />
+                            </Col>
+                            <Col xs={9}>
+                              {/*  <Form.Control
+                                as="select"
+                                onChange={(e) =>
+                                  setConcepto(parseInt(e.target.value))
+                                }
+                                className="form-select form-select-sm"
+                                style={{ fontSize: '17px' }}
+                              >
+                                <option value="0">- Seleccione -</option>
+                                {CatConceptos
+                                  ? CatConceptos.map((c) => {
+                                      return (
+                                        <option value={c.id} key={c.id}>
+                                          {c.concepto}
+                                        </option>
+                                      )
+                                    })
+                                  : null}
+                              </Form.Control> */}
+                            </Col>
+                            <Col style={{ paddingTop: '5px' }}>
+                              {/* <Form.Label
+                                onClick={() => {
+                                  addConcept()
+                                }}
+                                style={{ cursor: 'pointer' }}
+                              >
+                                <IconContext.Provider
+                                  value={{ color: 'green', size: '30px' }}
+                                >
+                                  <BsPlusSquareFill />
+                                </IconContext.Provider>
+                              </Form.Label> */}
+                            </Col>
+                          </Row>
+                        </Card.Subtitle>
+                        {/*   <DataTable
+                          noHeader
+                          defaultSortFieldId={'id'}
+                          defaultSortAsc={true}
+                          pagination
+                          highlightOnHover
+                          columns={columnsConcepts}
+                          data={DetalleConceptos}
+                        /> */}
+                      </Card.Body>
+                    </Card>
+                  </Col>
+                </Row>
+              </Container>
+            </Card.Body>
+          </Card>
+        </Card.Body>
+      </Card>
+      <Modal
+        show={DialogTabs}
+        onHide={() => {
+          setDialogTabs(false)
+        }}
+        size="sm"
+      >
+        <Modal.Body>
+          ¿Esta seguro de eliminar:
+          <br /> {Siglas}?
+        </Modal.Body>
+        <Modal.Footer>
+          <Row>
+            <Col xs={6} style={{ textAlign: 'left', paddingRight: '100px' }}>
+              <Button
+                variant="danger"
+                onClick={deleteTabulador}
+                size="sm"
+                style={{ paddingRight: '20px', paddingLeft: '20px' }}
+              >
+                Si
+              </Button>
+            </Col>
+            <Col xs={6} style={{ textAlign: 'right' }}>
+              <Button
+                variant="secondary"
+                onClick={() => {
+                  setDialogTabs(false)
+                }}
+                size="sm"
+              >
+                Cerrar
+              </Button>
+            </Col>
+          </Row>
+        </Modal.Footer>
+      </Modal>
+      <MsgInformativo
+        show={show}
+        msg={msg}
+        header={header}
+        msgColor={msgColor}
+        closeToast={() => {
+          setShowMsg(false)
+        }}
+      />
+    </div>
+  )
+}

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

@@ -177,6 +177,11 @@ export function ComboDescripcion(props: IComboDescripcionProps) {
         ) : (
           ''
         )}
+        {props.Detail.validaFraccionOriginal === 5 ? (
+          <option value="5">BOT</option>
+        ) : (
+          ''
+        )}
       </Form.Control>
       <Modal
         show={showModal}

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

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from 'react'
-import { Button, Col, Form, Modal, Row } from 'react-bootstrap'
+import { Badge, Button, Col, Form, Modal, Row } from 'react-bootstrap'
 import * as CurrencyFormat from 'react-currency-format'
 import { MsgInformativo } from '../../../../Utils/Toast/msgInformativo'
 import { RootState } from '../../../../../store/store'
@@ -31,6 +31,9 @@ export function ComboFraccion(props: IComboFraccionProps) {
   const mInvoices = useSelector(
     (state: RootState) => state.AmazonInvoices.Invoice
   )
+  const mCatTipoConsultas = useSelector(
+    (state: RootState) => state.AmazonCatConceptosConsulta.CatConcetosConsulta
+  )
   const [Validacion, setValidacion] = useState(props.ConfirmaFraccion)
   const [UserChanged, setUserChanged] = useState(false)
   const [showModal, setShowModal] = useState(false)
@@ -49,8 +52,10 @@ export function ComboFraccion(props: IComboFraccionProps) {
   const [Comentarios, setComentarios] = useState(
     props.Detail.comentarios
       ? props.Detail.comentarios
-      : 'Clasificacion Incorrecta'
+      : ''
   )
+  const [TipoConsulta, setTipoConsulta] = useState(0)
+  const [TipoConsultaTxt, setTipoConsultaTxt] = useState('')
   const msgColor = 'primary'
 
   const refreshStore = (Invoice: I2096Headers, Detail: I2096Detail[]) => {
@@ -108,13 +113,10 @@ export function ComboFraccion(props: IComboFraccionProps) {
           cumplimientoNormativo: newData.cumplimientoNormativo,
           comentarios: newData.comentarios,
           confirmaFraccion: newData.confirmaFraccion
-          /*,
-          checked: true*/
         }
       }
       return el
     })
-    //console.log('newDetail '+JSON.stringify(newDetail))
     refreshStore(Invoice[0], newDetail)
   }
 
@@ -134,6 +136,13 @@ export function ComboFraccion(props: IComboFraccionProps) {
     }
   }, [Validacion, UserChanged])
 
+  useEffect(() => {
+    let selected = mCatTipoConsultas.filter((a)=>{if(a.id==TipoConsulta){return a}})
+    if (selected.length) {
+      setTipoConsultaTxt(selected[0].shortDescription+' '+selected[0].spanishDescription)
+    }
+  }, [TipoConsulta])
+
   const saveFraccion = (Fracc: string) => {
     Fracc = Fracc.replaceAll('.', '').replaceAll(' ', '')
     if (Validacion === 2) {
@@ -165,6 +174,7 @@ export function ComboFraccion(props: IComboFraccionProps) {
           const data: DTO2096FraccionDescripcion = {
             id: props.IDDetail,
             fraccion: Fracc,
+            tipoConsulta: TipoConsulta,
             cumplimientoNormativo: CumplimientoNormativo,
             comentarios: Comentarios,
             descripcionGEMCO: DescripcionGEMCO
@@ -209,6 +219,7 @@ export function ComboFraccion(props: IComboFraccionProps) {
             <option value="0"> </option>
             <option value="1"> = </option>
             <option value="2"> != </option>
+            {/*   <option value="5">BOT</option> */}
           </>
         ) : (
           ''
@@ -222,7 +233,6 @@ export function ComboFraccion(props: IComboFraccionProps) {
         ) : (
           ''
         )}
-        {/*  <option value="2"> != </option> */}
         {props.Detail.validaFraccionOriginal === 3 ? (
           <option value="3"> Ok </option>
         ) : (
@@ -248,7 +258,11 @@ export function ComboFraccion(props: IComboFraccionProps) {
       >
         <Modal.Body>
           <Row>
-            <Col xs={3}>Fraccion GEMCO</Col>
+            <Col xs={3}>
+              <Badge bg="primary">
+                <h6>Fraccion GEMCO</h6>
+              </Badge>
+            </Col>
             <Col xs={3}>
               <CurrencyFormat
                 onValueChange={(values: any) => {
@@ -272,8 +286,45 @@ export function ComboFraccion(props: IComboFraccionProps) {
             <Col xs={6}></Col>
           </Row>
           <Row style={{ paddingTop: '15px' }}>
-            <Col xs={3}>Cumplimiento normativo</Col>
+            <Col xs={1}>
-            <Col xs={8}>
+            <Badge bg="primary">
+                <h6>Tipo</h6>
+              </Badge>
+            </Col>
+            <Col xs={2}>
+              <Form.Control
+                as="select"
+                className="form-select form-select-sm"
+                onChange={(e) => setTipoConsulta(parseInt(e.target.value))}
+                value={TipoConsulta}
+              >  <option value='0'> ??? </option>
+                {mCatTipoConsultas.map((tipo) => {
+                  return <option value={tipo.id}>{tipo.siglas}</option>
+                })}
+              </Form.Control>
+            </Col>
+            <Col xs={9}>
+            <Form.Control
+                as="textarea"
+                id="TipoConsultaTxt"
+                size="sm"
+                disabled={true}
+                value={TipoConsultaTxt}
+                style={{height:'100px', fontSize:'13px'}}
+              />
+            </Col>
+          </Row>
+          <Row style={{ paddingTop: '15px' }}>
+            <Col xs={3}>
+              <Badge bg="primary">
+                <h6>
+                  Cumplimiento&nbsp;&nbsp;&nbsp;&nbsp;
+                  <br />
+                  normativo
+                </h6>
+              </Badge>
+            </Col>
+            <Col xs={9}>
               <Form.Control
                 as="textarea"
                 id="CumplimientoNormativo"
@@ -285,15 +336,19 @@ export function ComboFraccion(props: IComboFraccionProps) {
             <Col>&nbsp;</Col>
           </Row>
           <Row style={{ paddingTop: '15px' }}>
-            <Col xs={3}>Comentarios</Col>
+            <Col xs={3}>
-            <Col xs={8}>
+              <Badge bg="primary">
+                <h6>Comentarios&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h6>
+              </Badge>
+            </Col>
+            <Col xs={9}>
               {' '}
               <Form.Control
                 as="textarea"
                 id="Comentarios"
                 size="sm"
                 value={
-                  Comentarios.length ? Comentarios : 'Clasificacion incorrecta.'
+                  Comentarios.length ? Comentarios : ''
                 }
                 onChange={(e) => setComentarios(e.target.value)}
               />
@@ -301,8 +356,12 @@ export function ComboFraccion(props: IComboFraccionProps) {
             <Col>&nbsp;</Col>
           </Row>
           <Row style={{ paddingTop: '15px' }}>
-            <Col xs={3}>Descripcion GEMCO</Col>
+            <Col xs={3}>
-            <Col xs={8}>
+              <Badge bg="primary">
+                <h6>Descripcion GEMCO</h6>
+              </Badge>
+            </Col>
+            <Col xs={9}>
               <Form.Control
                 as="textarea"
                 id="PedimentoDescripcion"
@@ -315,6 +374,7 @@ export function ComboFraccion(props: IComboFraccionProps) {
             <Col XS={9}></Col>
             <Col xs={3}>
               <Button
+              style={{visibility: (Comentarios.length && TipoConsulta>0) ? 'visible' : 'hidden'}}
                 onClick={() => {
                   saveFraccion(Fraccion)
                 }}

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

@@ -0,0 +1,7 @@
+export default interface DTODataTraficoConsulta {
+    id: number,
+    swConsulta: boolean,
+    grupoRegulatorio: number,
+    regulacionConsulta: string,  
+    comentariosConsulta: string
+}

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

@@ -1,6 +1,7 @@
 export default interface DTO2096FraccionDescripcion {
   id: number
   fraccion: string
+  tipoConsulta: number,
   cumplimientoNormativo: string
   comentarios: string
   descripcionGEMCO: string

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

@@ -1,3 +1,5 @@
+import { number } from "yup"
+
 export default interface DTO2096InvoiceStatus {
     id: number
     referencia: string
@@ -26,4 +28,9 @@ export default interface DTO2096InvoiceStatus {
     idArchivoACK: number,
     archivoACK: string,
     fhArchivoACK: string 
+    clasificador: string 
+    fechaRecepcion: string 
+    cantidadASIN: number
+    
+
 }

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

@@ -0,0 +1,13 @@
+export default interface DTO2096RptFacturasPagadas {
+    
+    factura: string,
+    pedimento: string,
+    fechaPago: string,
+    clave: string,
+    tipoOp: string,
+    valorDolares: string,
+    valorAduana: string,
+    razonSocial: string,
+    aduana: string, 
+    piezas: string
+}

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

@@ -0,0 +1,24 @@
+export default interface DTO2096TraficoConsultaAmazonDetail {
+  id: number
+  idHeader: number,
+  amazonShipmentReferenceId: string
+  partida: number
+  itemId: string
+  itemDescription: string
+  fraccionGEMCO: string
+  descripcionGEMCO: string
+  countryOfOrigin: string
+  productGroup: string
+  brand: string
+  model: string
+  itemQuantityUnitOfMeasure: string
+  quantity: number
+  weightValue: string
+  netWeightUnitOfMeasure: string
+  actualUnitCostMonetaryAmount: string
+  totalUnitValueMonetaryAmount: string
+  swConsulta: boolean
+  grupoRegulatorio: number,
+  regulacionConsulta: string
+  comentariosConsulta: string
+}

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

@@ -0,0 +1,20 @@
+import DTO2096TraficoConsultaAmazonDetail from "./DTO2096TraficoConsultaAmazonDetail";
+
+export default interface DTO2096TraficoConsultaAmazonHeader {
+    id: number,
+    referencia: string,
+    commercialInvoiceDate: string,
+    invoiceNumber: string,
+    incoterms: string,
+    hawb: string,
+    totalInvoiceQuantityUnitOfMeasure: string,
+    totalInvoiceQuantity: number,
+    totalInvoiceWeightUnitOfMeasure: string,
+    totalInvoiceWeight: string,
+    totalInvoiceValueChargeOrAllowance: string,
+    totalInvoiceValueCurrencyISOCode: string,
+    totalInvoiceValueMonetaryAmount: string,
+    name: string,
+    max: boolean,
+    detail: DTO2096TraficoConsultaAmazonDetail[]
+}

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

@@ -0,0 +1,10 @@
+export default interface DTOAmazonSegragacion {
+    vrid: string,
+    asin: string,
+    quantity: number,
+    descripcion: string,
+    motivo: string,
+    fSegregacion: string,
+    valorMercancia: string,
+    
+}

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

@@ -0,0 +1,8 @@
+export default interface ICat2096CatConceptosConsulta {
+    id: number,
+    siglas: string,
+    shortDescription: string,
+    spanishDescription: string,
+    spanishDescriptionWide: string,
+    activo: boolean
+}

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

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

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

@@ -37,6 +37,7 @@ export default interface I2096Detail {
   fCreacion: string
   estatus: number
   autorizado: boolean
+  tipoConsulta: number
   cumplimientoNormativo: string
   comentarios: string
   sightLine: boolean

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

@@ -4,6 +4,7 @@ import DataTable from 'react-data-table-component'
 import I2096NoParte from '../Interfaces/I2096NoParte'
 import AmazonDS from '../Services/Amazon.Services'
 import {
+  deleteNoPartes,
   populateNoPartes,
   updateNoPartes
 } from '../../../../store/features/Clientes/2096/AmazonNoPartes'
@@ -12,7 +13,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { useEffect, useState } from 'react'
 import { MsgInformativo } from '../../../Utils/Toast/msgInformativo'
 import { IconContext } from 'react-icons'
-import { BsFillPencilFill } from 'react-icons/bs'
+import { BsFillPencilFill, BsFillXCircleFill } from 'react-icons/bs'
 
 import I2096PaisClave from '../Interfaces/I2096PaisClave'
 import DTO2096PerfilesParecidos from '../DTO/DTO2096PerfilesParecidos'
@@ -35,10 +36,14 @@ export default function AmazonNoPartes(props: IAmazonNoPartesProps) {
   const [NoParteLOG, setNoParteLOG] = useState<I2096NoParteLog[]>([])
   const [PaisClaves, setPaisClaves] = useState<I2096PaisClave[]>([])
   const [Data, setData] = useState<DTO2096PerfilesParecidos[]>([])
-  const [DataNoParteVerificacion, setDataNoParteVeriifcacion] = useState<DTO2096NoParteVerificacion[]>([])
+  const [DataNoParteVerificacion, setDataNoParteVeriifcacion] = useState<
+    DTO2096NoParteVerificacion[]
+  >([])
   const [ShowModal, setShowModal] = useState(false)
   const [ShowModalLog, setShowModalLog] = useState(false)
-  const [ShowModalNoParteVerificacion, setShowModalNoParteVerificacion] = useState(false)
+  const [ShowModalNoParteVerificacion, setShowModalNoParteVerificacion] =
+    useState(false)
+  const [ShowModalDelete, setShowModalDelete] = useState(false)
   const [header, setHeader] = useState('')
   const [msgColor, setMsgColor] = useState('primary')
   const [show, setShowMsg] = useState(false)
@@ -81,12 +86,35 @@ export default function AmazonNoPartes(props: IAmazonNoPartesProps) {
           <Col>
             <div
               style={{
-                cursor: 'pointer',
+                cursor: 'pointer'
+              }}
+              onClick={() => {
+                setIDParte(row.id)
+                setShowModalDelete(true)
+              }}
+            >
+              <IconContext.Provider value={{ color: 'red', size: '25px' }}>
+                <BsFillXCircleFill />
+              </IconContext.Provider>
+            </div>
+          </Col>
+        </Row>
+      ),
+      sortable: true
+    },
+    {
+      name: '',
+      width: '60px',
+      cell: (row: I2096NoParte) => (
+        <Row>
+          <Col>
+            <div
+              style={{
+                cursor: 'pointer'
               }}
               onClick={() => {
                 loadDataNoParteVerificacion(row)
                 setShowModalNoParteVerificacion(true)
-
               }}
             >
               <IconContext.Provider value={{ color: '#60DD0E', size: '30px' }}>
@@ -166,13 +194,15 @@ export default function AmazonNoPartes(props: IAmazonNoPartesProps) {
     {
       name: 'UMF',
       width: '80px',
-      selector: (row: I2096NoParte) => row.unidadMedidaFactura ? row.unidadMedidaFactura : '',
+      selector: (row: I2096NoParte) =>
+        row.unidadMedidaFactura ? row.unidadMedidaFactura : '',
       sortable: true
     },
     {
       name: 'UMC',
       width: '80px',
-      selector: (row: I2096NoParte) => row.unidadMedidaCOVE ? row.unidadMedidaCOVE : '',
+      selector: (row: I2096NoParte) =>
+        row.unidadMedidaCOVE ? row.unidadMedidaCOVE : '',
       sortable: true
     },
     {
@@ -215,7 +245,8 @@ export default function AmazonNoPartes(props: IAmazonNoPartesProps) {
     {
       name: 'Fracc Original',
       width: '130px',
-      cell: (row: I2096NoParteLog) => row.fraccionOriginal ? row.fraccionOriginal : '',
+      cell: (row: I2096NoParteLog) =>
+        row.fraccionOriginal ? row.fraccionOriginal : '',
       sortable: true
     },
     {
@@ -228,7 +259,8 @@ export default function AmazonNoPartes(props: IAmazonNoPartesProps) {
     {
       name: 'NICO Original',
       width: '130px',
-      cell: (row: I2096NoParteLog) => row.subdivisionOriginal ? row.subdivisionOriginal : '',
+      cell: (row: I2096NoParteLog) =>
+        row.subdivisionOriginal ? row.subdivisionOriginal : '',
       sortable: true,
       center: true
     },
@@ -237,7 +269,7 @@ export default function AmazonNoPartes(props: IAmazonNoPartesProps) {
       width: '250px',
       cell: (row: I2096NoParteLog) => row.descripcionAgenteAduanal,
       wrap: true,
-      sortable: true,
+      sortable: true
     },
     {
       name: 'Desc Original',
@@ -256,7 +288,7 @@ export default function AmazonNoPartes(props: IAmazonNoPartesProps) {
     {
       name: 'Usuario',
       width: '300px',
-      cell: (row: I2096NoParteLog) => row.sUsuario ? row.sUsuario : '',
+      cell: (row: I2096NoParteLog) => (row.sUsuario ? row.sUsuario : ''),
       wrap: true,
       sortable: true
     }
@@ -294,7 +326,7 @@ export default function AmazonNoPartes(props: IAmazonNoPartesProps) {
       width: '100px',
       cell: (row: DTO2096NoParteVerificacion) => row.aduana,
       wrap: true,
-      sortable: true,
+      sortable: true
     },
     {
       name: 'Pedimento',
@@ -305,7 +337,6 @@ export default function AmazonNoPartes(props: IAmazonNoPartesProps) {
     }
   ]
 
-
   const openLink = (item: string) => {
     window.open('https://www.amazon.com/dp/' + item)
   }
@@ -315,7 +346,7 @@ export default function AmazonNoPartes(props: IAmazonNoPartesProps) {
     if (Id === 0) return NoAsignado
     else if (Data.length) {
       const Usuario = Data.filter((item) => item.idUsuario === Id)
-      return Usuario ? Usuario[0].nombre : NoAsignado
+      return Usuario.length ? Usuario[0].nombre : NoAsignado
     }
     return NoAsignado
   }
@@ -396,6 +427,7 @@ export default function AmazonNoPartes(props: IAmazonNoPartesProps) {
     }
     AmazonDS.NoPartesGet(Search)
       .then((response) => {
+        console.log(response.data)
         dispatch(populateNoPartes(response.data))
       })
       .catch((e: Error) => {
@@ -417,11 +449,36 @@ export default function AmazonNoPartes(props: IAmazonNoPartesProps) {
     AmazonDS.NoPartesUpdate(data)
       .then((response) => {
         dispatch(updateNoPartes(response.data))
+        setHeader('Informativo')
+        setMsg('La informacion se guardo correctamente')
+        setShowMsg(true)
       })
-      .catch((e: Error) => {
+      .catch(function (error) {
+        console.log(error.toJSON())
+        if (error.message == 'Request failed with status code 400') {
           setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
+          setMsg('Fraccion no valida!')
           setShowMsg(true)
+        }
+        return
+      })
+  }
+
+  const deleteNoParte = () => {
+    AmazonDS.DeleteNoParte(IDParte)
+      .then((response) => {
+        dispatch(deleteNoPartes(IDParte))
+        setHeader('Informativo')
+        setMsg('La informacion se guardo correctamente')
+        setShowMsg(true)
+      })
+      .catch(function (error) {
+        console.log(error.toJSON())
+        if (error.message == 'Request failed with status code 400') {
+          setHeader('Error')
+          setMsg('Fraccion no valida!')
+          setShowMsg(true)
+        }
         return
       })
   }
@@ -672,6 +729,41 @@ export default function AmazonNoPartes(props: IAmazonNoPartesProps) {
           {/*   </div> */}
         </Modal.Body>
       </Modal>
+
+      <Modal
+        show={ShowModalDelete}
+        onHide={() => {
+          setShowModalDelete(false)
+        }}
+        size={'sm'}
+        dialogClassName={'modal-50w'}
+      >
+        <Modal.Header>
+          <Modal.Title>
+            <Row>
+              <Col xs={12}>
+                <Alert variant="warning">
+                  <h3>¿Esta seguro de eliminar el no parte: {Parte}</h3>
+                </Alert>
+              </Col>
+            </Row>
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Row style={{ paddingTop: '15px' }}>
+            <Col></Col>
+            <Col xs={5}>
+              <Button variant={'danger'} onClick={()=>{deleteNoParte()}}>Elimina</Button>
+            </Col>
+            <Col xs={5}>
+              <Button variant={'secondary'} onClick={()=>{setShowModalDelete(false)}}>Salir</Button>
+            </Col>
+            <Col></Col>
+          </Row>
+          {/*   </div> */}
+        </Modal.Body>
+      </Modal>
+
       <MsgInformativo
         show={show}
         msg={msg}

src/Components/Clientes/Amazon/Reportes/Clasification/Finished/RptAmazonFinishedClasificationInvoices.tsx

@@ -161,6 +161,13 @@ export default function RptAmazonFinishedClasificationInvoices(
       })
   }
 
+  function getReceiver(Cadena: string, char1: string[1], char2: string[1]) {
+    return Cadena.slice(
+      Cadena.indexOf(char1) + 1,
+      Cadena.lastIndexOf(char2),
+    );
+  }
+
   return (
     <div>
       <Card>
@@ -195,6 +202,7 @@ export default function RptAmazonFinishedClasificationInvoices(
                   <th style={{ width: '50px' }}></th>
                   <th style={{ width: '80px' }}>Commercial Invoice Date</th>
                   <th style={{ width: '300px' }}>Invoice Number</th>
+                  <th style={{ width: '80px' }}>Receiver</th>
                   <th style={{ width: '100px' }}>Incoterms</th>
                   <th style={{ textAlign: 'center' }}>HAWB</th>
                   <th>Qty Unit of measure</th>
@@ -300,6 +308,13 @@ export default function RptAmazonFinishedClasificationInvoices(
                             <td style={{ width: '300px' }}>
                               {MasterData.invoiceNumber}
                             </td>
+                            <td style={{ width: '80px', textAlign:'center' }}>
+                            {mInvoices
+                                .filter((value) => value.id === MasterData.id)
+                                .map((row) => {
+                                  return getReceiver(row.detail[0].amazonShipmentReferenceId,'_','_')
+                                })}
+                            </td>
                             <td style={{ width: '100px', textAlign: 'center' }}>
                               {MasterData.incoterms}
                             </td>

src/Components/Clientes/Amazon/Reportes/Clasification/Pending/RptAmazonPendingClasificationInvoices.tsx

@@ -4,6 +4,7 @@ import {
   Button,
   Card,
   Col,
+  Form,
   FormCheck,
   Modal,
   Row,
@@ -35,6 +36,8 @@ import { MFileManager } from '../../../../../Utils/MFileManager/MFileManager'
 import { AiFillWarning } from 'react-icons/ai'
 import { PrioritySelector } from '../PrioritySelector/PrioritySelector'
 import IFileManager from '../../../../../../Interfaces/Utils/IFileManager'
+import { VscHubot } from 'react-icons/vsc'
+import { populateCatConcetosConsultas } from '../../../../../../store/features/Clientes/2096/AmazonCatConceptosConsulta'
 
 export interface IRtpAmazonPendingInvoicesProps {}
 
@@ -64,6 +67,7 @@ export default function RtpAmazonPendingInvoices(
   const [WaitingMessage, setWaitingMessage] = useState('Generado...')
   const [ShowModal, setShowModal] = useState(false)
   const [ShowModalW, setShowModalW] = useState(false)
+  const [BOTEnabled, setBOTEnabled] = useState(false)
   const [msg, setMsg] = useState('')
   const msgColor = 'primary'
 
@@ -78,8 +82,19 @@ export default function RtpAmazonPendingInvoices(
       })
   }
 
+  const loadCatalogoTipoConsultas = async () => {
+    DSAmazon.CatConceptosConsultaGET()
+      .then((response) => {
+        dispatch(populateCatConcetosConsultas(response.data))
+      })
+      .catch((e: Error) => {
+        alert('Ocurrio un error' + e.message.toString())
+      })
+  }
+
   useEffect(() => {
     loadReport()
+    loadCatalogoTipoConsultas()
   }, [])
 
   const check4Updates = (IDInvoice: number) => {
@@ -121,16 +136,10 @@ export default function RtpAmazonPendingInvoices(
   const descargaArchivoExcepciones = () => {
     setShowModalW(false)
     setWaitingMessage('Archivo de excepciones')
-    setWaitingDialog(true)
+  /*   setWaitingDialog(true)*/
-    DSAmazon.ExceptionsFileAmazonGET(IDFactura)
+  /*  DSAmazon.ExceptionsFileAmazonGET(IDFactura)
       .then((response: any) => {
-        if (response.status === 200) {
+        if (response.status === 200) {*/
-          /*           const url = window.URL.createObjectURL(new Blob([response.data]))
-          const link = document.createElement('a')
-          link.href = url
-          link.setAttribute('download', 'Excepciones ' + Factura + '.xlsx')
-          document.body.appendChild(link)
-          link.click() */
           DSAmazon.EnviaEsperaRespuestaAmazon(IDFactura)
             .then((response) => {
               loadReport()
@@ -145,14 +154,14 @@ export default function RtpAmazonPendingInvoices(
               setShowMsg(true)
               return
             })
-        }
+      //  }
-      })
+     /* })
       .catch((e: Error) => {
         setHeader('Error')
         setMsg('Ocurrio un error')
         setShowMsg(true)
         return
-      })
+      }) */
   }
 
   const descargaPantillaPartes = () => {
@@ -304,6 +313,36 @@ export default function RtpAmazonPendingInvoices(
       })
   }
 
+  const RunBOT = (row: I2096Headers) => {
+    if (!BOTEnabled || row.max) {
+      toggleExpandRow(row)
+      return false
+    }
+    if (BOTEnabled) {
+        setWaitingMessage('BOT trabajando...')
+        setWaitingDialog(true)
+        DSAmazon.ClasificacionBOT(row.id)
+          .then((response) => {
+            if (response.data) {
+              setIDFactura(0)
+              setFactura('')
+              setShowModalInvoiceFile(false)
+              setWaitingDialog(false)
+              //loadReport()
+              toggleExpandRow(row)
+              return
+            }
+          })
+          .catch((e: Error) => {
+            setHeader('Error')
+            setMsg('Ocurrio un error')
+            setShowModalDeleteInvoice(false)
+            setWaitingDialog(false)
+            return
+          })
+    }
+  }
+
   return (
     <div>
       <Card>
@@ -317,7 +356,30 @@ export default function RtpAmazonPendingInvoices(
                 CLASIFICACION : facturas pendientes
               </Card.Title>
             </Col>
-            <Col xs={5}></Col>
+            <Col xs={3}></Col>
+            <Col xs={2}>
+              {/* <Row>
+                <Col xs={4} style={{ textAlign: 'right' }}>
+                  <IconContext.Provider
+                    value={{ color: 'green', size: '65px' }}
+                  >
+                    <VscHubot />
+                  </IconContext.Provider>
+                </Col>
+                <Col xs={8} style={{ textAlign: 'left', paddingTop: '25px' }}>
+                  <Form.Check
+                    type="switch"
+                    id="custom-switch"
+                    label="¿Aplica BOT?"
+                    checked={BOTEnabled}
+                    onChange={() => {
+                      setBOTEnabled(!BOTEnabled)
+                    }}
+                  />
+                </Col>
+              </Row> */}
+              <Form></Form>
+            </Col>
             <Col xs={2}>
               <Alert
                 variant="primary"
@@ -389,7 +451,7 @@ export default function RtpAmazonPendingInvoices(
                   <th style={{ width: '50px' }}></th>
                   <th style={{ width: '80px' }}>Commercial Invoice Date</th>
                   <th style={{ width: '300px' }}>Invoice Number</th>
-                  <th style={{ width: '50px' }}>Name</th>
+                  <th style={{ width: '50px' }}>Receiver</th>
                   <th style={{ width: '100px' }}>Incoterms</th>
                   <th style={{ width: '100px' }}>Qty Unit of measure</th>
                   <th style={{ width: '100px' }}>Tot Qty</th>
@@ -441,7 +503,8 @@ export default function RtpAmazonPendingInvoices(
                                 }
                                 key={MasterData.id}
                                 onClick={() => {
-                                  toggleExpandRow(MasterData)
+                                  //toggleExpandRow(MasterData)
+                                  RunBOT(MasterData)
                                 }}
                               >
                                 {MasterData.max === true ? (
@@ -460,9 +523,14 @@ export default function RtpAmazonPendingInvoices(
                               </td>
                               <td>{MasterData.id}</td>
                               <td style={{ textAlign: 'left' }}>
-                                <PrioritySelector IDInvoice={MasterData.id} Priority={MasterData.urgente} canChange={['Clasificador lider', 'Administrador'].includes(
+                                <PrioritySelector
-                        Perfil
+                                  IDInvoice={MasterData.id}
-                      )}/>
+                                  Priority={MasterData.urgente}
+                                  canChange={[
+                                    'Clasificador lider',
+                                    'Administrador'
+                                  ].includes(Perfil)}
+                                />
                               </td>
                               <td>
                                 <FormCheck
@@ -800,7 +868,9 @@ export default function RtpAmazonPendingInvoices(
                                                 return (
                                                   <RtpAmazonPendingClasificationInvoicesDetail
                                                     IDMaster={MasterData.id}
-                                                    Prioridad={MasterData.urgente}
+                                                    Prioridad={
+                                                      MasterData.urgente
+                                                    }
                                                     detail={detail}
                                                     Deshabilitado={
                                                       detail.destinationHTSCode
@@ -937,6 +1007,13 @@ export default function RtpAmazonPendingInvoices(
         </Modal.Header>
         <Modal.Body>
           <img src={loadingImg} style={{ height: '150px' }} alt="proccessing" />
+          {WaitingMessage.includes('BOT') ? (
+            <IconContext.Provider value={{ color: 'green', size: '65px' }}>
+              <VscHubot />
+            </IconContext.Provider>
+          ) : (
+            ''
+          )}
           {WaitingMessage}
         </Modal.Body>
         <Modal.Footer></Modal.Footer>
@@ -1017,8 +1094,9 @@ export default function RtpAmazonPendingInvoices(
                   Proceso={IDProcess}
                   showPreview={0}
                   canEdit={true}
-                  Leyenda="Seleccione las facturas de Amazon" onAppendMFM={function (Files: IFileManager[]): void {
+                  Leyenda="Seleccione las facturas de Amazon"
-                  } }                />
+                  onAppendMFM={function (Files: IFileManager[]): void {}}
+                />
               </Col>
               <Col></Col>
             </Row>

src/Components/Clientes/Amazon/Reportes/Clasification/Pending/RptAmazonPendingClasificationInvoicesDetail.tsx

@@ -186,7 +186,7 @@ export default function RtpAmazonPendingInvoivesDetail(
           style={{
             textAlign: 'center',
             cursor: 'pointer',
-            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+            backgroundColor: props.detail.checked ? props.detail.confirmaFraccion==5 ? '#F7E2D2' : '#E6EEF5' : '#ffffff'
           }}
           className="DetailData"
           onClick={() => openLink(props.detail.itemId)}
@@ -196,7 +196,7 @@ export default function RtpAmazonPendingInvoivesDetail(
         <td
           style={{
             textAlign: 'right',
-            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+            backgroundColor: props.detail.checked ? props.detail.confirmaFraccion==5 ? '#F7E2D2' : '#E6EEF5' : '#ffffff'
           }}
           className="DetailData"
         >
@@ -205,7 +205,7 @@ export default function RtpAmazonPendingInvoivesDetail(
         <td
           style={{
             textAlign: 'right',
-            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+            backgroundColor: props.detail.checked ? props.detail.confirmaFraccion==5 ? '#F7E2D2' : '#E6EEF5' : '#ffffff'
           }}
         >
           {props.detail.pedimentoDescription}
@@ -214,7 +214,7 @@ export default function RtpAmazonPendingInvoivesDetail(
           style={{
             textAlign: 'center',
             fontSize: '18px',
-            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+            backgroundColor: props.detail.checked ? props.detail.confirmaFraccion==5 ? '#F7E2D2' : '#E6EEF5' : '#ffffff'
           }}
         >
           &nbsp;&nbsp;{props.detail.destinationHTSCode}
@@ -222,7 +222,7 @@ export default function RtpAmazonPendingInvoivesDetail(
         <td
           style={{
             textAlign: 'center',
-            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+            backgroundColor: props.detail.checked ? props.detail.confirmaFraccion==5 ? '#F7E2D2' : '#E6EEF5' : '#ffffff'
           }}
           className="DetailData"
         >
@@ -230,7 +230,7 @@ export default function RtpAmazonPendingInvoivesDetail(
         <td
           style={{
             textAlign: 'center',
-            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+            backgroundColor: props.detail.checked ? props.detail.confirmaFraccion==5 ? '#F7E2D2' : '#E6EEF5' : '#ffffff'
           }}
           className="DetailData"
         >
@@ -247,7 +247,7 @@ export default function RtpAmazonPendingInvoivesDetail(
         <td
           style={{
             textAlign: 'center',
-            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+            backgroundColor: props.detail.checked ? props.detail.confirmaFraccion==5 ? '#F7E2D2' : '#E6EEF5' : '#ffffff'
           }}
           className="DetailData"
         >
@@ -270,7 +270,7 @@ export default function RtpAmazonPendingInvoivesDetail(
         <td
           style={{
             textAlign: 'center',
-            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+            backgroundColor: props.detail.checked ? props.detail.confirmaFraccion==5 ? '#F7E2D2' : '#E6EEF5' : '#ffffff'
           }}
           className="DetailData"
         >
@@ -287,7 +287,7 @@ export default function RtpAmazonPendingInvoivesDetail(
         <td
           style={{
             textAlign: 'center',
-            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+            backgroundColor: props.detail.checked ? props.detail.confirmaFraccion==5 ? '#F7E2D2' : '#E6EEF5' : '#ffffff'
           }}
           className="DetailData"
         >
@@ -296,7 +296,7 @@ export default function RtpAmazonPendingInvoivesDetail(
         <td
           style={{
             textAlign: 'center',
-            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+            backgroundColor: props.detail.checked ? props.detail.confirmaFraccion==5 ? '#F7E2D2' : '#E6EEF5' : '#ffffff'
           }}
           className="DetailData"
         >
@@ -305,7 +305,7 @@ export default function RtpAmazonPendingInvoivesDetail(
         <td
           style={{
             textAlign: 'right',
-            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+            backgroundColor: props.detail.checked ? props.detail.confirmaFraccion==5 ? '#F7E2D2' : '#E6EEF5' : '#ffffff'
           }}
           className="DetailData"
         >
@@ -314,7 +314,7 @@ export default function RtpAmazonPendingInvoivesDetail(
         <td
           style={{
             textAlign: 'right',
-            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+            backgroundColor: props.detail.checked ? props.detail.confirmaFraccion==5 ? '#F7E2D2' : '#E6EEF5' : '#ffffff'
           }}
           className="DetailData"
         >
@@ -323,7 +323,7 @@ export default function RtpAmazonPendingInvoivesDetail(
         <td
           style={{
             textAlign: 'right',
-            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+            backgroundColor: props.detail.checked ? props.detail.confirmaFraccion==5 ? '#F7E2D2' : '#E6EEF5' : '#ffffff'
           }}
           className="DetailData"
         >
@@ -332,7 +332,7 @@ export default function RtpAmazonPendingInvoivesDetail(
         <td
           style={{
             textAlign: 'center',
-            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+            backgroundColor: props.detail.checked ? props.detail.confirmaFraccion==5 ? '#F7E2D2' : '#E6EEF5' : '#ffffff'
           }}
           className="DetailData"
         >
@@ -341,7 +341,7 @@ export default function RtpAmazonPendingInvoivesDetail(
         <td
           style={{
             textAlign: 'center',
-            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+            backgroundColor: props.detail.checked ? props.detail.confirmaFraccion==5 ? '#F7E2D2' : '#E6EEF5' : '#ffffff'
           }}
           className="DetailData"
         >
@@ -350,7 +350,7 @@ export default function RtpAmazonPendingInvoivesDetail(
         <td
           style={{
             textAlign: 'center',
-            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+            backgroundColor: props.detail.checked ? props.detail.confirmaFraccion==5 ? '#F7E2D2' : '#E6EEF5' : '#ffffff'
           }}
           className="DetailData"
         >
@@ -359,7 +359,7 @@ export default function RtpAmazonPendingInvoivesDetail(
         <td
           style={{
             textAlign: 'center',
-            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+            backgroundColor: props.detail.checked ? props.detail.confirmaFraccion==5 ? '#F7E2D2' : '#E6EEF5' : '#ffffff'
           }}
           className="DetailData"
         >
@@ -369,7 +369,7 @@ export default function RtpAmazonPendingInvoivesDetail(
         <td
           style={{
             textAlign: 'center',
-            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+            backgroundColor: props.detail.checked ? props.detail.confirmaFraccion==5 ? '#F7E2D2' : '#E6EEF5' : '#ffffff'
           }}
           className="DetailData"
         >
@@ -378,7 +378,7 @@ export default function RtpAmazonPendingInvoivesDetail(
         <td
           style={{
             textAlign: 'center',
-            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+            backgroundColor: props.detail.checked ? props.detail.confirmaFraccion==5 ? '#F7E2D2' : '#E6EEF5' : '#ffffff'
           }}
           className="DetailData"
         >
@@ -386,7 +386,7 @@ export default function RtpAmazonPendingInvoivesDetail(
         </td>
         <td
           style={{
-            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+            backgroundColor: props.detail.checked ? props.detail.confirmaFraccion==5 ? '#F7E2D2' : '#E6EEF5' : '#ffffff'
           }}
         >
           <OverlayTrigger
@@ -423,7 +423,7 @@ export default function RtpAmazonPendingInvoivesDetail(
         </td>
         <td
           style={{
-            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+            backgroundColor: props.detail.checked ? props.detail.confirmaFraccion==5 ? '#F7E2D2' : '#E6EEF5' : '#ffffff'
           }}
         >
           <OverlayTrigger
@@ -455,7 +455,7 @@ export default function RtpAmazonPendingInvoivesDetail(
         <td
           style={{
             textAlign: 'center',
-            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+            backgroundColor: props.detail.checked ? props.detail.confirmaFraccion==5 ? '#F7E2D2' : '#E6EEF5' : '#ffffff'
           }}
         >
           <Form>

src/Components/Clientes/Amazon/Reportes/Clasification/WaitingAnswerFromAmazon/RptPendingAnswerFromAmazon.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import { useEffect, useState } from 'react'
 import {
   Alert,
+  Badge,
   Button,
   Card,
   Col,
@@ -33,11 +34,15 @@ import { MFileManager } from '../../../../../Utils/MFileManager/MFileManager'
 import { setEmitFlags } from 'typescript'
 import DTO2096RELParteFactura from '../../../DTO/DTO2096RELParteFactura'
 import IFileManager from '../../../../../../Interfaces/Utils/IFileManager'
+import { populateCatConcetosConsultas } from '../../../../../../store/features/Clientes/2096/AmazonCatConceptosConsulta'
 export interface IRptPendingAnswerFromAmazonProps {}
 
 export default function RptPendingAnswerFromAmazon(
   props: IRptPendingAnswerFromAmazonProps
 ) {
+  const mExceptionCode = useSelector(
+    (state: RootState) => state.AmazonCatConceptosConsulta.CatConcetosConsulta
+  )
   const [Usuario, setUsuario] = useState(() => {
     const stickyValue = window.localStorage.getItem('UserId')
     return stickyValue !== null ? JSON.parse(stickyValue) : ''
@@ -57,6 +62,9 @@ export default function RptPendingAnswerFromAmazon(
   const [Data, setData] = useState<DTO2096PerfilesParecidos[]>([])
   const [ResumeData, setResumeData] = useState<DTO2096RELParteFactura[]>([])
   const [AmazonAnswerFile, setAmazonAnswerFile] = useState<IFileManager[]>([])
+  const [DistinctExceptionCode, setDistinctExceptionCode] = useState<number[]>(
+    []
+  )
   const [header, setHeader] = useState('')
   const [IDFactura, setIDFactura] = useState(0)
   const [Factura, setFactura] = useState('')
@@ -91,6 +99,39 @@ export default function RptPendingAnswerFromAmazon(
       })
   }
 
+  const loadDistinctExceptionCode = (id: number) => {
+    DSAmazon.InvoiceDistinctExceptionCodeGet(id)
+      .then((response) => {
+        setDistinctExceptionCode(response.data)
+      })
+      .catch((e: Error) => {
+        alert('Ocurrio un error' + e.message.toString())
+      })
+  }
+
+  const getExceptionCode = (id: number) => {
+    // console.log(mExceptionCode)
+    let code = mExceptionCode.filter((a) => {
+      if (a.id == id) {
+        return a
+      }
+    })
+    return code.length ? code[0].siglas : ''
+  }
+
+  const loadExceptionCodeCatalog = () => {
+    DSAmazon.CatConceptosConsultaGET()
+      .then((response) => {
+        dispatch(populateCatConcetosConsultas(response.data))
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+  }
+
   const generateResume = (id: number) => {
     DSAmazon.RELParteFacturasGET(id)
       .then((response) => {
@@ -104,17 +145,29 @@ export default function RptPendingAnswerFromAmazon(
       })
   }
 
-  const downloadExceptionsFile = (id: number, Factura: string) => {
+  const downloadExceptionsFile = (
-    setWaitingDialog(true)
+    id: number,
-    generateResume(id)
+    Factura: string,
-    setFactura(Factura)
+    ExceptionCode: number
-    DSAmazon.ExceptionsFileAmazonGET(id)
+  ) => {
+    //setWaitingDialog(true)
+    /* loadDistinctExceptionCode(id)
+    generateResume(id) */
+    //setFactura(Factura)
+    DSAmazon.ExceptionsFileAmazonGET(id, ExceptionCode)
       .then((response: any) => {
         if (response.status === 200) {
           const url = window.URL.createObjectURL(new Blob([response.data]))
           const link = document.createElement('a')
           link.href = url
-          link.setAttribute('download', 'Excepciones ' + Factura + '.xlsx')
+          link.setAttribute(
+            'download',
+            'Excepciones ' +
+              Factura +
+              '_' +
+              getExceptionCode(ExceptionCode) +
+              '.xlsx'
+          )
           document.body.appendChild(link)
           link.click()
         }
@@ -128,9 +181,16 @@ export default function RptPendingAnswerFromAmazon(
       })
   }
 
+  const loadInvoiceData = (id: number) => {
+    setWaitingDialog(true)
+    loadDistinctExceptionCode(id)
+    generateResume(id)
+  }
+
   useEffect(() => {
     loadReport()
     loadProfiles()
+    loadExceptionCodeCatalog()
   }, [])
 
   const check4Updates = (IDInvoice: number) => {
@@ -188,9 +248,10 @@ export default function RptPendingAnswerFromAmazon(
       .map((element) => {
         let newElt = Object.assign({}, element) // copies element
         return newElt.detail.filter(
-          (child) => child.idHeader === IDMaster && !child.autorizado
+          (child) => child.idHeader === IDMaster && child.autorizado
         )
       })
+
     return Exceptions.length ? Exceptions[0].length : 0
   }
 
@@ -241,11 +302,14 @@ export default function RptPendingAnswerFromAmazon(
   }
 
   const ApplyAnswerFiles2Invoice = () => {
-    const Filenames = AmazonAnswerFile.map(element => element.nombreArchivo);
+    setWaitingMessage('Generando...')
+    const Filenames = AmazonAnswerFile.map((element) => element.nombreArchivo)
+    setWaitingDialog(true)
     DSAmazon.ApplyAnswerFile2Invoice(Filenames)
       .then((response) => {
         loadReport()
         setAmazonAnswerFile([])
+        setWaitingDialog(false)
         setShowModal(false)
       })
       .catch((e: Error) => {
@@ -302,7 +366,7 @@ export default function RptPendingAnswerFromAmazon(
                   <th style={{ width: '50px' }}></th>
                   <th style={{ width: '80px' }}>Commercial Invoice Date</th>
                   <th style={{ width: '300px' }}>Invoice Number</th>
-                  <th style={{ width: '50px' }}>Name</th>
+                  <th style={{ width: '50px' }}>Receiver</th>
                   <th style={{ width: '100px' }}>Incoterms</th>
                   <th style={{ width: '100px' }}>Qty Unit of measure</th>
                   <th style={{ width: '100px' }}>Tot Qty</th>
@@ -375,12 +439,16 @@ export default function RptPendingAnswerFromAmazon(
                               <td>
                                 {existsExeptions(MasterData.id) > 0 ? (
                                   <div
-                                    onClick={() =>
+                                    onClick={() => {
-                                      downloadExceptionsFile(
+                                      /*  downloadExceptionsFile(
                                         MasterData.id,
                                         MasterData.invoiceNumber
-                                      )
+                                      ) */
-                                    }
+                                      setIDFactura(MasterData.id)
+                                      setFactura(MasterData.invoiceNumber)
+                                      loadInvoiceData(MasterData.id)
+                                      //setWaitingDialog(true)
+                                    }}
                                     title="Archivo de excepciones"
                                   >
                                     <IconContext.Provider
@@ -807,10 +875,12 @@ export default function RptPendingAnswerFromAmazon(
                   Proceso={IDProcess}
                   showPreview={3}
                   canEdit={true}
-                  Leyenda="Sube archivos de respuesta de Amazon" onAppendMFM={function (Files: IFileManager[]): void {
+                  Leyenda="Sube archivos de respuesta de Amazon"
+                  onAppendMFM={function (Files: IFileManager[]): void {
                     setAmazonAnswerFile(Files)
                     setConfirmApplyAnswerFile(true)
-                  }}/>
+                  }}
+                />
               </Col>
               <Col></Col>
             </Row>
@@ -845,7 +915,8 @@ export default function RptPendingAnswerFromAmazon(
             <Row style={{ paddingTop: '15px' }}>
               <Col xs={6} style={{ textAlign: 'center' }}>
                 <Button
-                  variant="secondary" size="lg"
+                  variant="secondary"
+                  size="lg"
                   onClick={() => {
                     setShowModalAnswerFile(false)
                     setConfirmApplyAnswerFile(false)
@@ -856,7 +927,8 @@ export default function RptPendingAnswerFromAmazon(
               </Col>
               <Col xs={6} style={{ textAlign: 'center' }}>
                 <Button
-                  variant="danger" size="lg"
+                  variant="danger"
+                  size="lg"
                   onClick={() => {
                     setShowModalAnswerFile(false)
                     ApplyAnswerFiles2Invoice()
@@ -886,7 +958,7 @@ export default function RptPendingAnswerFromAmazon(
           <Modal.Title></Modal.Title>
         </Modal.Header>
         <Modal.Body>
-          <img
+          {/*  <img
             src={loadingImg}
             style={{
               height: WaitingMessage === 'Generando...' ? '150px' : '0px',
@@ -894,8 +966,31 @@ export default function RptPendingAnswerFromAmazon(
             }}
             alt="proccessing"
           />
-          {WaitingMessage}
+          {WaitingMessage} */}
-          <div style={{ overflow: 'auto' }}>
+          <div>
+            <Row>
+              {DistinctExceptionCode
+                ? DistinctExceptionCode.map((code) => {
+                    return (
+                      <Col style={{ textAlign: 'center' }}>
+                        <Badge
+                          bg="primary"
+                          style={{ cursor: 'pointer' }}
+                          onClick={() => {
+                            downloadExceptionsFile(IDFactura, Factura, code)
+                          }}
+                        >
+                          <h6>{getExceptionCode(code)}</h6>
+                        </Badge>
+                      </Col>
+                    )
+                  })
+                : ''}
+            </Row>
+          </div>
+          <div
+            style={{ overflow: 'auto', height: '500px', paddingTop: '15px' }}
+          >
             <table>
               <tr>
                 <td style={{ backgroundColor: '#6095BF', color: '#FFFFFF' }}>
@@ -922,6 +1017,7 @@ export default function RptPendingAnswerFromAmazon(
         </Modal.Body>
         <Modal.Footer></Modal.Footer>
       </Modal>
+
       <MsgInformativo
         show={show}
         msg={msg}

src/Components/Clientes/Amazon/Reportes/Clasification/WaitingAnswerFromAmazon/RptPendingAnswerFromAmazonDetail.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { useEffect, useState } from 'react'
 import {
   Alert,
@@ -8,13 +7,10 @@ import {
   FormCheck,
   Modal,
   OverlayTrigger,
-  Popover,
   Row,
   Tooltip
 } from 'react-bootstrap'
 import { IconContext } from 'react-icons'
-import { FaCheckCircle, FaQuestionCircle } from 'react-icons/fa'
-import { ImCross } from 'react-icons/im'
 import { MsgInformativo } from '../../../../../Utils/Toast/msgInformativo'
 import { ComboDescripcion } from '../../../Components/ComboSelect/ComboDescripcion'
 import { ComboFraccion } from '../../../Components/ComboSelect/ComboFraccion'
@@ -46,13 +42,14 @@ export default function RptPendingAnswerFromAmazonDetail(
   const [ShowModal, setShowModal] = useState(false)
   const [EstatusSwith, setEstatusSwitch] = useState(props.detail.autorizado)
   const [Fraccion, setFraccion] = useState(props.detail.fraccionGEMCO)
+  const [TipoConsulta, setTipoConsulta] = useState(props.detail.tipoConsulta)
   const [UserChanged, setUserChanged] = useState(false)
   const [DescripcionGEMCO, setDescripcionGEMCO] = useState(
     props.detail.descripcionGEMCO
   )
   const [header, setHeader] = useState('')
   const [show, setShowMsg] = useState(false)
-  const [Show, setShow] = useState(false)
+  //const [Show, setShow] = useState(false)
   const [msg, setMsg] = useState('')
   const [CumplimientoNormativo, setCumplimientoNormativo] = useState(
     props.detail.cumplimientoNormativo ? props.detail.cumplimientoNormativo : ''
@@ -147,6 +144,7 @@ export default function RptPendingAnswerFromAmazonDetail(
             const data: DTO2096FraccionDescripcion = {
               id: id,
               fraccion: Fraccion,
+              tipoConsulta: TipoConsulta,
               cumplimientoNormativo: CumplimientoNormativo,
               comentarios: Comentarios,
               descripcionGEMCO: DescripcionGEMCO
@@ -166,17 +164,11 @@ export default function RptPendingAnswerFromAmazonDetail(
         })
         .catch((e: Error) => {
           setHeader('Error')
-        setMsg(
+          setMsg('Ocurrio un error' + e.message.toString())
-          'Ocurrio un error' + e.message.toString()
-        )
           setShowMsg(true)
           return
         })
-
     }
-
-
- 
   }
 
   useEffect(() => {
@@ -184,7 +176,7 @@ export default function RptPendingAnswerFromAmazonDetail(
       autoriceItem(props.detail.id)
   }, [EstatusSwith, UserChanged])
 
-  const ColorSET = (value: number, mode: number) => {
+  /* const ColorSET = (value: number, mode: number) => {
     switch (mode) {
       case 1: {
         // Background color
@@ -208,7 +200,7 @@ export default function RptPendingAnswerFromAmazonDetail(
         break
       }
     }
-  }
+  } */
 
   return (
     <>
@@ -263,8 +255,7 @@ export default function RptPendingAnswerFromAmazonDetail(
               textAlign: 'center'
             }}
             className="DetailData"
-          >
+          ></td>
-          </td>
           <td
             style={{
               textAlign: 'center'
@@ -299,14 +290,6 @@ export default function RptPendingAnswerFromAmazonDetail(
                   props.detail.validaFraccionOriginal === 0
                     ? '#FFFAF2 '
                     : '#E5F7B6',
-                /*  border:
-                props.detail.validaFraccionOriginal === 0
-                  ? '2px solid #F9A721'
-                  : '2px solid green',
-              color:
-                props.detail.validaFraccionOriginal === 0
-                  ? '#5923F6'
-                  : '#000000', */
                 border: '2px solid #000000',
                 color: '@000000',
                 width: '135px',
@@ -410,19 +393,11 @@ export default function RptPendingAnswerFromAmazonDetail(
           >
             {props.detail.actualUnitCostMonetaryAmount}
           </td>
-          <td
+          <td className="DetailData">
-            /*  style={{visibility: EstatusSwith ? 'hidden' : 'visible'}} */
-            className="DetailData"
-          >
             <FormCheck
               className="form-check form-switch form-control-lg"
               id="switchEnabled"
               type="switch"
-              /* disabled={
-              props.detail.fraccionGEMCO ===
-              props.detail.destinationHTSCode.replaceAll('.', '')
-            } */
-              /* disabled={EstatusSwith} */
               disabled={false}
               checked={EstatusSwith && props.detail.autorizado}
               onChange={() => {
@@ -433,12 +408,7 @@ export default function RptPendingAnswerFromAmazonDetail(
               label=""
             />
           </td>
-          <td
+          <td>
-          /*   style={{
-              visibility:
-                CumplimientoNormativo.length === 0 ? 'hidden' : 'visible'
-            }} */
-          >
             <OverlayTrigger
               placement="bottom"
               overlay={
@@ -460,12 +430,7 @@ export default function RptPendingAnswerFromAmazonDetail(
               )}
             </OverlayTrigger>
           </td>
-          <td
+          <td>
-           /*  style={{
-              visibility:
-                CumplimientoNormativo.length === 0 ? 'hidden' : 'visible'
-            }} */
-          >
             <OverlayTrigger
               placement="bottom"
               overlay={<Tooltip id="button-tooltip-2">{Comentarios}</Tooltip>}

src/Components/Clientes/Amazon/Reportes/ConsultaTrafico/RptConsultaTrafico.tsx

@@ -0,0 +1,556 @@
+import { useEffect, useState } from 'react'
+import {
+  Alert,
+  Button,
+  Card,
+  Col,
+  Form,
+  Modal,
+  Row,
+  Table
+} from 'react-bootstrap'
+import { IconContext } from 'react-icons'
+import { BsChevronDown, BsChevronRight, BsFilePdfFill } from 'react-icons/bs'
+import { FaAmazon } from 'react-icons/fa'
+import DSAmazon from '../../Services/Amazon.Services'
+import { MsgInformativo } from '../../../../Utils/Toast/msgInformativo'
+import { RootState } from '../../../../../store/store'
+
+// Redux
+import { useDispatch, useSelector } from 'react-redux'
+import { AiFillFileExcel } from 'react-icons/ai'
+import RptConsultaTraficoDetalle from './RptConsultaTraficoDetalle'
+import loadingImg from '../../../../../images/ajaxloader.gif'
+import * as XLSX from 'xlsx'
+import DTO2096TraficoConsultaAmazonHeader from '../../DTO/DTO2096TraficoConsultaAmazonHeader'
+import {
+  initializeTraficoConsulta,
+  populateTraficoConsulta,
+  updateTraficoConsulta
+} from '../../../../../store/features/Clientes/2096/AmazonTraficoConsulta'
+import {SiMicrosoftexcel} from 'react-icons/si'
+import I2096CatGrupoRegulatorio from '../../Interfaces/I2096CatGrupoRegulatorio'
+
+export interface IRptConsultaTraficoProps {}
+
+export default function RptConsultaTrafico(props: IRptConsultaTraficoProps) {
+  const dispatch = useDispatch()
+  const mInvoices = useSelector(
+    (state: RootState) => state.AmazonTraficoConsulta.Consulta
+  )
+  const [header, setHeader] = useState('')
+  const [Referencia, setReferencia] = useState('')
+  const [show, setShowMsg] = useState(false)
+  const [ShowModal, setShowModal] = useState(false)
+  const [ShowModalUnlink, setShowModalUnlink] = useState(false)
+  const [WaitingDialog, setWaitingDialog] = useState(false)
+  const [WaitingMessage, setWaitingMessage] = useState('')
+  const [msg, setMsg] = useState('')
+  const [Invoices, setInvoices] = useState<number[]>([])
+  const [Data, setData] = useState<DTO2096TraficoConsultaAmazonHeader[]>([])
+  const [CatGrupoRegulario, setCatGrupoRegulatorio] = useState<I2096CatGrupoRegulatorio[]>([])
+  const msgColor = 'primary'
+
+  const loadReport = () => {
+    DSAmazon.TransporteConsultaAmazon()
+      .then((response) => {
+        dispatch(initializeTraficoConsulta([]))
+        dispatch(populateTraficoConsulta(response.data))
+      })
+      .catch((e: Error) => {
+        alert('Ocurrio un error' + e.message.toString())
+      })
+  }
+
+  const loadCatalogos = () => {
+    DSAmazon.CatGrupoRegulatorioGET()
+      .then((response) => {
+        setCatGrupoRegulatorio(response.data)
+        console.log(response.data)
+      })
+      .catch((e: Error) => {
+        alert('Ocurrio un error' + e.message.toString())
+      })
+  }
+
+  const downloadExcel = (id: number, Invoice: string) => {
+    DSAmazon.TraficoConsultasAmazonGenerateExcel(id)
+      .then((response: any) => {
+        if (response.status === 200) {
+          const url = window.URL.createObjectURL(new Blob([response.data]))
+          const link = document.createElement('a')
+          link.href = url
+          link.setAttribute('download', 'Broker File '+Invoice+'.xls')
+          document.body.appendChild(link)
+          link.click()
+        }
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error')
+        setShowMsg(true)
+        return
+      })
+  }
+
+  useEffect(() => {
+    loadCatalogos()
+    loadReport()
+  }, [])
+
+  const changeToggle = (row: DTO2096TraficoConsultaAmazonHeader) => {
+    let Invoice: DTO2096TraficoConsultaAmazonHeader[] = mInvoices.filter(
+      (item) => item.id === row.id
+    )
+    const Obj = { ...Invoice[0] }
+    Obj.max = !Obj.max
+    dispatch(updateTraficoConsulta(Obj))
+  }
+
+  const check4Updates = (IDInvoice: number) => {
+    DSAmazon.TraficoConsultasAmazonById(IDInvoice)
+      .then((response) => {
+        DSAmazon.TraficoConsultasAmazonById(IDInvoice)
+          .then((response) => {
+            dispatch(updateTraficoConsulta(response.data))
+            console.log(response.data)
+            /* let Invoice: DTO2096TraficoConsultaAmazonHeader[] = response.data.filter(
+              (item) => item.id === IDInvoice
+            )
+            const Obj = { ...Invoice[0] }
+            Obj.max = !Obj.max
+            dispatch(updateTraficoConsulta(Obj)) */
+          })
+          .catch((e: Error) => {
+            setHeader('Error')
+            setMsg('Ocurrio un error')
+            return
+          })
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error')
+        return
+      })
+  }
+
+  const updateDataGrid = (IDInvoice: number) => {
+    /* let Invoice: DTO2096TraficoConsultaAmazonHeader[] = mInvoices.filter(
+      (item) => item.id === IDInvoice
+    )
+    const Obj = { ...Invoice[0] }
+    Obj.max = !Obj.max
+    dispatch(updateTraficoConsulta(Obj))
+    if (Obj.max) */ check4Updates(IDInvoice)
+  }
+
+  function getReceiver(Cadena: string, char1: string[1], char2: string[1]) {
+    return Cadena.slice(Cadena.indexOf(char1) + 1, Cadena.lastIndexOf(char2))
+  }
+
+  return (
+    <div>
+      <Card>
+        <Card.Body>
+          <Row>
+            <Col xs={6}>
+              <Card.Title>
+                <IconContext.Provider value={{ color: '#F6C34F', size: '8%' }}>
+                  <FaAmazon />
+                </IconContext.Provider>{' '}
+                TRAFICO : Consulta Amazon
+              </Card.Title>
+            </Col>
+            <Col></Col>
+            <Col></Col>
+            <Col></Col>
+            <Col></Col>
+            <Col></Col>
+          </Row>
+        </Card.Body>
+      </Card>
+
+      <Card>
+        <Card.Body>
+          <div className="MDcontainer">
+            <Table className="MDTable" hover>
+              <thead style={{ position: 'sticky', top: '0' }}>
+                <tr>
+                  <th></th>
+                  <th style={{ width: '50px' }}>id</th>
+                  <th style={{ width: '50px' }}></th>
+                  <th style={{ width: '100px' }}>Referencia</th>
+                  <th style={{ width: '80px' }}>Commercial Invoice Date</th>
+                  <th style={{ width: '250px' }}>Invoice Number</th>
+                  <th style={{ width: '100px' }}>Receiver</th>
+                  <th style={{ width: '100px' }}>Incoterms</th>
+                  <th style={{ textAlign: 'center' }}>HAWB</th>
+                  <th>Qty Unit of measure</th>
+                  <th>Tot Qty</th>
+                  <th>Weight unit of measure</th>
+                  <th>Tot weight</th>
+                  <th>Tot Charge or allowance</th>
+                  <th>Tot currency ISO code</th>
+                  <th>Tot Monetary amount</th>
+                  <th>Total de partidas</th>
+                </tr>
+              </thead>
+              <tbody>
+                {mInvoices
+                  ? mInvoices.map((MasterData) => {
+                      return (
+                        <>
+                          <tr
+                            style={{ cursor: 'pointer', height: '25px' }}
+                            className={
+                              MasterData.max === true
+                                ? 'masterSelected'
+                                : 'normalSelected'
+                            }
+                          >
+                            <td
+                              style={{ textAlign: 'left' }}
+                              className={
+                                MasterData.max === true
+                                  ? 'masterSelected'
+                                  : 'normalSelected'
+                              }
+                              key={MasterData.id}
+                              onClick={() => {
+                                changeToggle(MasterData)
+                              }}
+                            >
+                              {MasterData.max === true ? (
+                                <IconContext.Provider
+                                  value={{ color: 'blue', size: '15px' }}
+                                >
+                                  <BsChevronDown />
+                                </IconContext.Provider>
+                              ) : (
+                                <IconContext.Provider
+                                  value={{ color: 'blue', size: '15px' }}
+                                >
+                                  <BsChevronRight />
+                                </IconContext.Provider>
+                              )}
+                            </td>
+                            <td>{MasterData.id}</td>
+                            <td  onClick={()=>{downloadExcel(MasterData.id, MasterData.invoiceNumber)}}>
+                              <IconContext.Provider
+                                value={{ color: 'green', size: '20px' }}
+                              >
+                                <SiMicrosoftexcel />
+                              </IconContext.Provider>
+                            </td>
+                            <td style={{ width: '100px', textAlign: 'center' }}>
+                              {MasterData.referencia}
+                            </td>
+                            <td style={{ width: '80px', textAlign: 'center' }}>
+                              {MasterData.commercialInvoiceDate}
+                            </td>
+                            <td style={{ width: '300px' }}>
+                              {MasterData.invoiceNumber}
+                            </td>
+                            <td
+                              style={{
+                                width: '100px',
+                                textAlign: 'center',
+                                fontWeight: 'bold',
+                                fontSize: '13px'
+                              }}
+                            >
+                              {mInvoices
+                                .filter((value) => value.id === MasterData.id)
+                                .map((row) => {
+                                  return getReceiver(
+                                    row.detail[0].amazonShipmentReferenceId,
+                                    '_',
+                                    '_'
+                                  )
+                                })}
+                            </td>
+                            <td style={{ width: '100px', textAlign: 'center' }}>
+                              {MasterData.incoterms}
+                            </td>
+                            <td style={{ textAlign: 'center' }}>
+                              {MasterData.hawb}
+                            </td>
+                            <td style={{ textAlign: 'center' }}>
+                              {MasterData.totalInvoiceQuantityUnitOfMeasure}
+                            </td>
+                            <td style={{ textAlign: 'center' }}>
+                              {MasterData.totalInvoiceQuantity}
+                            </td>
+                            <td style={{ textAlign: 'center' }}>
+                              {MasterData.totalInvoiceWeightUnitOfMeasure}
+                            </td>
+                            <td style={{ textAlign: 'center' }}>
+                              {MasterData.totalInvoiceWeight}
+                            </td>
+                            <td style={{ textAlign: 'center' }}>
+                              {MasterData.totalInvoiceValueChargeOrAllowance}
+                            </td>
+                            <td style={{ textAlign: 'center' }}>
+                              {MasterData.totalInvoiceValueCurrencyISOCode}
+                            </td>
+                            <td style={{ textAlign: 'center' }}>
+                              {MasterData.totalInvoiceValueMonetaryAmount}
+                            </td>
+                            <td
+                              style={{
+                                fontWeight: 'bold',
+                                textAlign: 'center'
+                              }}
+                            >
+                              {mInvoices
+                                .filter((value) => value.id === MasterData.id)
+                                .map((row) => {
+                                  return row.detail.length
+                                })}
+                            </td>
+                          </tr>
+                          {MasterData.max ? (
+                            <tr
+                              className={
+                                MasterData.max === true
+                                  ? 'masterSelected2'
+                                  : 'normalSelected2'
+                              }
+                            >
+                              <th colSpan={18}>
+                                <table
+                                  className="childTable"
+                                  style={{ width: '1650px' }}
+                                >
+                                  <thead>
+                                    <tr>
+                                      <th
+                                        style={{
+                                          width: '50px',
+                                          backgroundColor: '#FFFFFF',
+                                          color: '#346288',
+                                          textAlign: 'right'
+                                        }}
+                                      ></th>
+                                      <th
+                                        style={{
+                                          width: '100px',
+                                          backgroundColor: '#D3E0EA',
+                                          color: '#346288'
+                                        }}
+                                      >
+                                        Item Id
+                                      </th>
+                                      <th
+                                        style={{
+                                          width: '400px',
+                                          backgroundColor: '#D3E0EA',
+                                          color: '#346288'
+                                        }}
+                                      >
+                                        Item Description
+                                      </th>
+                                      <th
+                                        style={{
+                                          width: '120px',
+                                          backgroundColor: '#D3E0EA',
+                                          color: '#346288',
+                                          textAlign: 'center'
+                                        }}
+                                      >
+                                        Fraccion GEMCO
+                                      </th>
+                                      <th
+                                        style={{
+                                          width: '70px',
+                                          backgroundColor: '#D3E0EA',
+                                          color: '#346288',
+                                          textAlign: 'center'
+                                        }}
+                                      >
+                                        Descripcion GEMCO
+                                      </th>
+                                      <th
+                                        style={{
+                                          width: '70px',
+                                          backgroundColor: '#D3E0EA',
+                                          color: '#346288',
+                                          textAlign: 'center'
+                                        }}
+                                      >
+                                        Country of Origin
+                                      </th>
+                                      <th
+                                        style={{
+                                          width: '70px',
+                                          backgroundColor: '#D3E0EA',
+                                          color: '#346288'
+                                        }}
+                                      >
+                                        ProductGroup
+                                      </th>
+                                      <th
+                                        style={{
+                                          width: '70px',
+                                          backgroundColor: '#D3E0EA',
+                                          color: '#346288'
+                                        }}
+                                      >
+                                        Brand
+                                      </th>
+                                      <th
+                                        style={{
+                                          width: '70px',
+                                          backgroundColor: '#D3E0EA',
+                                          color: '#346288'
+                                        }}
+                                      >
+                                        Model
+                                      </th>
+                                      <th
+                                        style={{
+                                          width: '70px',
+                                          backgroundColor: '#D3E0EA',
+                                          color: '#346288'
+                                        }}
+                                      >
+                                        Unit Measure
+                                      </th>
+                                      <th
+                                        style={{
+                                          width: '70px',
+                                          backgroundColor: '#D3E0EA',
+                                          color: '#346288'
+                                        }}
+                                      >
+                                        Qty Shipped
+                                      </th>
+                                      <th
+                                        style={{
+                                          width: '70px',
+                                          backgroundColor: '#D3E0EA',
+                                          color: '#346288'
+                                        }}
+                                      >
+                                        Unit of measure
+                                      </th>
+                                      <th
+                                        style={{
+                                          width: '70px',
+                                          backgroundColor: '#D3E0EA',
+                                          color: '#346288'
+                                        }}
+                                      >
+                                        Unit Net Weight
+                                      </th>
+                                      <th
+                                        style={{
+                                          width: '70px',
+                                          backgroundColor: '#D3E0EA',
+                                          color: '#346288'
+                                        }}
+                                      >
+                                        Unit Cost
+                                      </th>
+                                      <th
+                                        style={{
+                                          width: '70px',
+                                          backgroundColor: '#D3E0EA',
+                                          color: '#346288'
+                                        }}
+                                      >
+                                        Total value
+                                      </th>
+                                      <th
+                                        style={{
+                                          width: '70px',
+                                          backgroundColor: '#D3E0EA',
+                                          color: '#346288'
+                                        }}
+                                      >
+                                        Consulta
+                                      </th>
+                                    </tr>
+                                  </thead>
+                                  <tbody>
+                                    {mInvoices.map((MD) => {
+                                      return (
+                                        <>
+                                          {MD.detail
+                                            .filter(
+                                              (detail) =>
+                                                MasterData.id ===
+                                                detail.idHeader
+                                            ) //.sort((a,b) => a.itemId.localeCompare(b.itemId))
+                                            .sort((a, b) =>
+                                              a.partida > b.partida ? 1 : -1
+                                            )
+                                            .map((detail) => {
+                                              return (
+                                                <RptConsultaTraficoDetalle
+                                                  IDMaster={MasterData.id}
+                                                  detail={detail}
+                                                  Habilitado={
+                                                    /*  MasterData.estatus <= 1 */
+                                                    1 == 1
+                                                  }
+                                                  Catalogo = {CatGrupoRegulario ? CatGrupoRegulario : []}
+                                                  onDataChange={function (
+                                                    IDMaster: number
+                                                  ): void {
+                                                    updateDataGrid(IDMaster)
+                                                  }}
+                                                />
+                                              )
+                                            })}
+                                        </>
+                                      )
+                                    })}
+                                  </tbody>
+                                </table>
+                              </th>
+                            </tr>
+                          ) : null}
+                        </>
+                      )
+                    })
+                  : null}
+              </tbody>
+            </Table>
+          </div>
+        </Card.Body>
+      </Card>
+
+      <Modal
+        show={WaitingDialog}
+        onHide={() => {
+          setWaitingDialog(false)
+        }}
+        backdrop="static"
+        keyboard={false}
+        size="sm"
+        dialogClassName={'modal-50w'}
+        centered
+      >
+        <Modal.Header closeButton>
+          <Modal.Title></Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <img src={loadingImg} style={{ height: '150px' }} alt="proccessing" />
+          Generando {WaitingMessage}...
+        </Modal.Body>
+        <Modal.Footer></Modal.Footer>
+      </Modal>
+
+      <MsgInformativo
+        show={show}
+        msg={msg}
+        header={header}
+        msgColor={msgColor}
+        closeToast={() => {
+          setShowMsg(false)
+        }}
+      />
+    </div>
+  )
+}

src/Components/Clientes/Amazon/Reportes/ConsultaTrafico/RptConsultaTraficoDetalle.tsx

@@ -0,0 +1,400 @@
+import * as React from 'react'
+import { useEffect, useState } from 'react'
+import {
+  Alert,
+  Button,
+  Col,
+  Form,
+  FormCheck,
+  Modal,
+  OverlayTrigger,
+  Popover,
+  Row,
+  Tooltip
+} from 'react-bootstrap'
+import { MsgInformativo } from '../../../../Utils/Toast/msgInformativo'
+import DSAmazon from '../../Services/Amazon.Services'
+// Redux
+import { RootState } from '../../../../../store/store'
+import { useDispatch, useSelector } from 'react-redux'
+import * as CurrencyFormat from 'react-currency-format'
+import DTO2096TraficoConsultaAmazonDetail from '../../DTO/DTO2096TraficoConsultaAmazonDetail'
+import DTODataTraficoConsulta from '../../DTO/DTO2096DataTraficoConsulta'
+import I2096CatGrupoRegulatorio from '../../Interfaces/I2096CatGrupoRegulatorio'
+
+export interface IRptConsultaTraficoDetalleProps {
+  IDMaster: number
+  detail: DTO2096TraficoConsultaAmazonDetail
+  Habilitado: boolean
+  Catalogo: I2096CatGrupoRegulatorio[]
+  onDataChange: (IDMaster: number) => void
+}
+
+export default function RptConsultaTraficoDetalle(
+  props: IRptConsultaTraficoDetalleProps
+) {
+  const dispatch = useDispatch()
+  const mInvoices = useSelector(
+    (state: RootState) => state.AmazonInvoices.Invoice
+  )
+  const [ShowModal, setShowModal] = useState(false)
+  const [EstatusSwith, setEstatusSwitch] = useState(props.detail.swConsulta)
+  const [UserChanged, setUserChanged] = useState(false)
+  const [header, setHeader] = useState('')
+  const [show, setShowMsg] = useState(false)
+  const [msg, setMsg] = useState('')
+  const [RegulacionConsulta, setRegulacionConsulta] = useState(
+    props.detail.regulacionConsulta ? props.detail.regulacionConsulta : ''
+  )
+  const [ComentariosConsulta, setComentariosConsulta] = useState(
+    props.detail.comentariosConsulta ? props.detail.comentariosConsulta : ''
+  )
+  const [ShowModalEdit, setShowModalEdit] = useState(false)
+  const [IDGrupoRegulatorio, setIDGrupoRegulatorio] = useState(
+    props.detail.grupoRegulatorio
+  )
+  const msgColor = 'primary'
+
+  const saveData = () => {
+    const data: DTODataTraficoConsulta = {
+      id: props.detail.id,
+      swConsulta: EstatusSwith,
+      grupoRegulatorio: IDGrupoRegulatorio,
+      regulacionConsulta: RegulacionConsulta,
+      comentariosConsulta: ComentariosConsulta
+    }
+    DSAmazon.DataTraficoConsultaSET(data)
+      .then((response) => {
+        setShowModal(false)
+        props.onDataChange(props.IDMaster)
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error, no se guardo la informacion en BD')
+        setShowMsg(true)
+        return
+      })
+  }
+
+  useEffect(() => {
+    if (UserChanged) {
+      setShowModal(true)
+    }
+  }, [EstatusSwith, UserChanged])
+
+  return (
+    <>
+      <tr>
+        <th
+          style={{
+            width: '50px',
+            backgroundColor: '#FFFFFF',
+            textAlign: 'right',
+            fontWeight: 'bold'
+          }}
+          className="DetailData"
+        >
+          {props.detail.partida}
+        </th>
+        <td
+          style={{
+            textAlign: 'center',
+            cursor: 'pointer'
+          }}
+          className="DetailData"
+        >
+          {props.detail.itemId}
+        </td>
+        <td
+          style={{
+            textAlign: 'left'
+          }}
+          className="DetailData"
+        >
+          {props.detail.itemDescription}
+        </td>
+        <td
+          style={{
+            textAlign: 'center'
+          }}
+          className="DetailData"
+        >
+          <CurrencyFormat
+            value={props.detail.fraccionGEMCO ? props.detail.fraccionGEMCO : ''}
+            disabled={true}
+            format={'####.##.####'}
+            displayType={'input'}
+            style={{
+              fontSize: '17px',
+              backgroundColor: '#E5F7B6',
+              border: '2px solid green',
+              color: '#000000',
+              width: '135px',
+              textAlign: 'right',
+              borderRadius: '10px'
+            }}
+          />
+        </td>
+        <td
+          style={{
+            textAlign: 'center'
+          }}
+          className="DetailData"
+        >
+          {props.detail.descripcionGEMCO}
+        </td>
+        <td
+          style={{
+            textAlign: 'center'
+          }}
+          className="DetailData"
+        >
+          {props.detail.countryOfOrigin}
+        </td>
+        <td
+          style={{
+            textAlign: 'left',
+            paddingLeft: '15px'
+          }}
+          className="DetailData"
+        >
+          {props.detail.productGroup}
+        </td>
+        <td
+          style={{
+            textAlign: 'left',
+            paddingLeft: '15px'
+          }}
+          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.weightValue}
+        </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>
+        <td
+          style={{
+            textAlign: 'center',
+            paddingLeft: '30px'
+          }}
+          className="DetailData"
+        >
+          <FormCheck
+            className="form-check form-switch form-control-lg"
+            id="switchEnabled"
+            type="switch"
+            checked={EstatusSwith}
+            onChange={() => {
+              setEstatusSwitch(!EstatusSwith)
+              setUserChanged(true)
+              setShowModal(!EstatusSwith)
+            }}
+          />
+        </td>
+        {/*         <td
+          style={{
+            visibility:
+              CumplimientoNormativo.length === 0 ? 'hidden' : 'visible'
+          }}
+        >
+          <OverlayTrigger
+            placement="bottom"
+            overlay={
+              <Tooltip id="button-tooltip-2">{CumplimientoNormativo}</Tooltip>
+            }
+          >
+            {({ ref, ...triggerHandler }) => (
+              <Button variant="light" {...triggerHandler}>
+                <IconContext.Provider
+                  value={{
+                    color: 'blue',
+                    size: '25px'
+                  }}
+                >
+                  <AiOutlineFileSearch />
+                </IconContext.Provider>
+                <span className="ms-1"></span>
+              </Button>
+            )}
+          </OverlayTrigger>
+        </td>
+        <td
+          style={{
+            visibility:
+              CumplimientoNormativo.length === 0 ? 'hidden' : 'visible'
+          }}
+        >
+          <OverlayTrigger
+            placement="bottom"
+            overlay={<Tooltip id="button-tooltip-2">{Comentarios}</Tooltip>}
+          >
+            {({ ref, ...triggerHandler }) => (
+              <Button variant="light" {...triggerHandler}>
+                <IconContext.Provider
+                  value={{
+                    color: 'green',
+                    size: '25px'
+                  }}
+                >
+                  <BsFillChatRightTextFill />
+                </IconContext.Provider>
+                <span className="ms-1"></span>
+              </Button>
+            )}
+          </OverlayTrigger>
+        </td>
+        <td>
+        </td> */}
+      </tr>
+      <Modal
+        show={ShowModal}
+        onHide={() => {
+          setShowModal(false)
+        }}
+        size={'sm'}
+        dialogClassName={'modal-50w'}
+      >
+        <Modal.Header>
+          <Modal.Title className="primary">Consulta Amazon {IDGrupoRegulatorio}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <div style={{ height: '230px' }}>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={3}>Grupo Regulatorio</Col>
+              <Col xs={8}>
+                <Form.Control
+                  as="select"
+                  defaultValue={IDGrupoRegulatorio}
+                  onChange={(e) => {
+                    setIDGrupoRegulatorio(parseInt(e.target.value))
+                  }}
+                  className="form-select form-select-sm"
+                >
+                  <option value="0">-SELECCIONE-</option>
+                  {props.Catalogo
+                    ? props.Catalogo.map((c) => {
+                        return <option value={c.id}>{c.descripcion}</option>
+                      })
+                    : null}
+                </Form.Control>
+              </Col>
+              <Col>&nbsp;</Col>
+            </Row>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={3}>Regulacion</Col>
+              <Col xs={8}>
+                <Form.Control
+                  as="textarea"
+                  id="Regulacion"
+                  size="sm"
+                  value={RegulacionConsulta.length ? RegulacionConsulta : ''}
+                  onChange={(e) => setRegulacionConsulta(e.target.value)}
+                />
+              </Col>
+              <Col>&nbsp;</Col>
+            </Row>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={3}>Comentarios</Col>
+              <Col xs={8}>
+                <Form.Control
+                  as="textarea"
+                  id="Comentarios"
+                  size="sm"
+                  value={ComentariosConsulta.length ? ComentariosConsulta : ''}
+                  onChange={(e) => setComentariosConsulta(e.target.value)}
+                />
+              </Col>
+              <Col>&nbsp;</Col>
+            </Row>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={6} style={{ textAlign: 'center' }}>
+                <Button
+                  variant="secondary"
+                  onClick={() => {
+                    setEstatusSwitch(true)
+                    setShowModal(false)
+                  }}
+                >
+                  &nbsp;&nbsp;Cancelar&nbsp;&nbsp;
+                </Button>
+              </Col>
+              <Col xs={6} style={{ textAlign: 'center' }}>
+                <Button
+                  variant="danger"
+                  onClick={() => {
+                    saveData()
+                  }}
+                >
+                  &nbsp;&nbsp;Guardar&nbsp;&nbsp;
+                </Button>
+              </Col>
+            </Row>
+          </div>
+        </Modal.Body>
+      </Modal>
+      <MsgInformativo
+        show={show}
+        msg={msg}
+        header={header}
+        msgColor={msgColor}
+        closeToast={() => {
+          setShowMsg(false)
+        }}
+      />
+    </>
+  )
+}

src/Components/Clientes/Amazon/Reportes/Estatus/RtpAmazonInvoiceStatus.tsx

@@ -10,6 +10,7 @@ import {
   Card,
   Col,
   Form,
+  FormControl,
   Modal,
   Row,
   Table
@@ -24,11 +25,13 @@ import { MFileManager } from '../../../../Utils/MFileManager/MFileManager'
 import DTO2096RptPayedOperations from '../../DTO/DTO2096RptPayedOperations'
 import DTO2096InvoiceStatus from '../../DTO/DTO2096InvoiceStatus'
 import IFileManager from '../../../../../Interfaces/Utils/IFileManager'
+import * as XLSX from 'xlsx'
+import { BsSearch, BsFileEarmarkExcel } from 'react-icons/bs'
+export interface IRptAmazonInvoiceStatusProps {}
 
-export interface IRptAmazonInvoiceStatusProps {
+export default function RptAmazonInvoiceStatus(
-}
+  props: IRptAmazonInvoiceStatusProps
-
+) {
-export default function RptAmazonInvoiceStatus (props: IRptAmazonInvoiceStatusProps) {
   const dispatch = useDispatch()
   const mInvoices = useSelector(
     (state: RootState) => state.AmazonInvoices.Invoice
@@ -59,21 +62,32 @@ export default function RptAmazonInvoiceStatus (props: IRptAmazonInvoiceStatusPr
   }
 
   const loadReport = () => {
-      if (Factura.length==0) {
+    let InicioValue
-        setHeader('Error')
+    let FinValue
-        setMsg('Para continuar, proporcione la factura a buscar')
+
-        setShowMsg(true)
+    // Verifica si se proporcionaron valores para Inicio y Fin.
-        return
+    if (Factura) {
+      InicioValue = ''
+      FinValue = ''
+      setFactura('')
+    } else {
+      InicioValue = Inicio
+      FinValue = Fin
     }
-      DSAmazon.AmazonInvoiceStatusGET(Factura)
+
+    DSAmazon.AmazonInvoiceStatusGET(Factura, InicioValue, FinValue)
       .then((response) => {
         setData(response.data)
       })
       .catch((e: Error) => {
-          alert('Ocurrio un error' + e.message.toString())
+        alert('Ocurrió un error: ' + e.message.toString())
       })
   }
 
+  const handleFacturaChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setFactura(event.target.value)
+  }
+
   const downloadPDF = (id: number, InvoiceNumber: string) => {
     setWaitingDialog(true)
     setWaitingMessage(' archivo PDF ')
@@ -108,7 +122,7 @@ export default function RptAmazonInvoiceStatus (props: IRptAmazonInvoiceStatusPr
           link.setAttribute('download', Referencia + '_FACTURAS_MODIFICA.xls')
           document.body.appendChild(link)
           link.click()
-            loadReport()
+          // loadReport()
         }
       })
       .catch((e: Error) => {
@@ -130,7 +144,7 @@ export default function RptAmazonInvoiceStatus (props: IRptAmazonInvoiceStatusPr
           link.setAttribute('download', Referencia + '_PARTIDAS_MODIFICA.xls')
           document.body.appendChild(link)
           link.click()
-            loadReport()
+          // loadReport()
         }
       })
       .catch((e: Error) => {
@@ -142,7 +156,7 @@ export default function RptAmazonInvoiceStatus (props: IRptAmazonInvoiceStatusPr
   }
 
   const downloadNoPartes = (id: number, Factura: string) => {
-      DSAmazon.NoPartesAmazon2SIRGET(id)
+    DSAmazon.NoPartesAmazonFinal(id)
       .then((response: any) => {
         if (response.status === 200) {
           const url = window.URL.createObjectURL(new Blob([response.data]))
@@ -186,6 +200,156 @@ export default function RptAmazonInvoiceStatus (props: IRptAmazonInvoiceStatusPr
       })
   }
 
+  const downloadExcel = () => {
+    exportExcel(Data, 'Reporte de EstatusFacturas')
+  }
+
+  function exportExcel(
+    jsonData: DTO2096InvoiceStatus[],
+    fileName: string
+  ): void {
+    let Heading = [
+      [
+        'Id',
+        'Referencia',
+        'ComercialInvoiceDate',
+        'InvoiceNumber',
+        'Incoterms',
+        'HAWB',
+        'QtyUnitoOfMeasure',
+        'totQty',
+        'weightUnitOfMeasure',
+        'TotWeight',
+        'TotChargeorAllowance',
+        'TotCurrencyIsoCode',
+        'TotMonetaryAmout',
+        'FechaPago',
+        'Patente',
+        'Aduana',
+        'Pedimentos',
+        'Estatus',
+        'ACK',
+        'Clasificador',
+        'FechaRecepcion',
+        'CantidadASIN'
+      ]
+    ]
+    const dataOnly = jsonData.map(
+      ({
+        id,
+        referencia,
+        commercialInvoiceDate,
+        invoiceNumber,
+        incoterms,
+        hawb,
+        totalInvoiceQuantityUnitOfMeasure,
+        totalInvoiceQuantity,
+        totalInvoiceWeightUnitOfMeasure,
+        totalInvoiceWeight,
+        totalInvoiceValueChargeOrAllowance,
+        totalInvoiceValueCurrencyISOCode,
+        totalInvoiceValueMonetaryAmount,
+        fPago,
+        patente,
+        aduana,
+        pedimento,
+        estatus,
+        archivoACK,
+        clasificador,
+        fechaRecepcion,
+        cantidadASIN
+      }) => {
+        return {
+          id,
+          referencia,
+          commercialInvoiceDate,
+          invoiceNumber,
+          incoterms,
+          hawb,
+          totalInvoiceQuantityUnitOfMeasure,
+          totalInvoiceQuantity,
+          totalInvoiceWeightUnitOfMeasure,
+          totalInvoiceWeight,
+          totalInvoiceValueChargeOrAllowance,
+          totalInvoiceValueCurrencyISOCode,
+          totalInvoiceValueMonetaryAmount,
+          fPago,
+          patente,
+          aduana,
+          pedimento,
+          estatus,
+          archivoACK,
+          clasificador,
+          fechaRecepcion,
+          cantidadASIN
+        }
+      }
+    )
+    const Report = dataOnly.map(
+      ({
+        id,
+        referencia,
+        commercialInvoiceDate,
+        invoiceNumber,
+        incoterms,
+        hawb,
+        totalInvoiceQuantityUnitOfMeasure,
+        totalInvoiceQuantity,
+        totalInvoiceWeightUnitOfMeasure,
+        totalInvoiceWeight,
+        totalInvoiceValueChargeOrAllowance,
+        totalInvoiceValueCurrencyISOCode,
+        totalInvoiceValueMonetaryAmount,
+        fPago,
+        patente,
+        aduana,
+        pedimento,
+        estatus,
+        archivoACK,
+        clasificador,
+        fechaRecepcion,
+        cantidadASIN
+      }) => {
+        return {
+          id,
+          referencia,
+          commercialInvoiceDate,
+          invoiceNumber,
+          incoterms,
+          hawb,
+          totalInvoiceQuantityUnitOfMeasure,
+          totalInvoiceQuantity,
+          totalInvoiceWeightUnitOfMeasure,
+          totalInvoiceWeight,
+          totalInvoiceValueChargeOrAllowance,
+          totalInvoiceValueCurrencyISOCode,
+          totalInvoiceValueMonetaryAmount,
+          fPago,
+          patente,
+          aduana,
+          pedimento,
+          estatus,
+          archivoACK,
+          clasificador,
+          fechaRecepcion,
+          cantidadASIN
+        }
+      }
+    )
+    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, Report, { 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 + 1; C <= range.e.c + 1; ++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()
+    }
+  }
+
   const getOnlyDate = (dt: string) => {
     return dt ? dt.substring(0, 16) : ''
   }
@@ -195,28 +359,79 @@ export default function RptAmazonInvoiceStatus (props: IRptAmazonInvoiceStatusPr
       <Card>
         <Card.Body>
           <Row>
-              <Col xs={5}>
+            <Col xs={2}>
               <Card.Title>
                 <IconContext.Provider value={{ color: '#F6C34F', size: '8%' }}>
                   <FaAmazon />
                 </IconContext.Provider>
-                  Operaciones Pagadas
+                Estatus Facturas Recibidas
               </Card.Title>
             </Col>
-              <Col></Col>
+            <Col style={{ textAlign: 'right' }}>Inicio</Col>
+            <Col xs={0}>
+              <Form.Control
+                defaultValue={Inicio}
+                type="date"
+                name="Inicio"
+                placeholder="Inicio"
+                title="Inicio"
+                alt="Inicio"
+                data-date-form="YYYY-mm-dd"
+                onChange={(e) => setInicio(e.target.value)}
+                size="sm"
+              />
+            </Col>
+            <Col style={{ textAlign: 'right' }}>Fin</Col>
+            <Col xs={0}>
+              <Form.Control
+                defaultValue={Fin}
+                type="date"
+                name="Fin"
+                placeholder="Fin"
+                title="Fin"
+                alt="Fin"
+                data-date-form="YYYY-mm-dd"
+                onChange={(e) => setFin(e.target.value)}
+                size="sm"
+              />
+            </Col>
             <Col style={{ textAlign: 'right' }}>Factura</Col>
             <Col xs={3}>
               <Form.Control
-                  defaultValue={Factura}
+                style={{ height: '20px' }}
+                // defaultValue={Factura}
+                value={Factura}
                 name="Factura"
                 placeholder="Factura"
                 title="Factura"
                 alt="Factura"
-                  onChange={(e) => setFactura(e.target.value)}
+                // onChange={(e) => setFactura(e.target.value)}
+                onChange={handleFacturaChange}
                 size="sm"
               />
             </Col>
-              <Col style={{textAlign:'right'}} onClick={()=>{loadReport()}}><Button variant="primary">Buscar</Button></Col>
+            <Col
+              style={{ textAlign: 'center' }}
+              onClick={() => {
+                loadReport()
+              }}
+            >
+              <Button variant="primary">
+                {' '}
+                <BsSearch />
+                Buscar
+              </Button>
+            </Col>
+            <Col>
+              <Button
+                variant="success"
+                onClick={() => {
+                  downloadExcel()
+                }}
+              >
+                <BsFileEarmarkExcel /> Excel
+              </Button>
+            </Col>
           </Row>
         </Card.Body>
       </Card>
@@ -250,7 +465,10 @@ export default function RptAmazonInvoiceStatus (props: IRptAmazonInvoiceStatusPr
                   <th>Aduana</th>
                   <th>Pedimento</th>
                   <th>Estatus</th>
-                    <th style={{ width: '150px' }}>ACK</th>
+                  <th style={{ width: '100px' }}>ACK</th>
+                  <th style={{ width: '100px' }}>Clasificador</th>
+                  <th style={{ width: '80px' }}>Fecha Recepcion</th>
+                  <th style={{ width: '80px' }}>Cantidad ASIN</th>
                 </tr>
               </thead>
               <tbody>
@@ -278,6 +496,13 @@ export default function RptAmazonInvoiceStatus (props: IRptAmazonInvoiceStatusPr
                                     MasterData.invoiceNumber
                                   )
                                 }}
+                                style={{
+                                  visibility: MasterData.estatus.includes(
+                                    'Clasificacion'
+                                  )
+                                    ? 'hidden'
+                                    : 'visible'
+                                }}
                               >
                                 <IconContext.Provider
                                   value={{ color: 'red', size: '20px' }}
@@ -366,6 +591,13 @@ export default function RptAmazonInvoiceStatus (props: IRptAmazonInvoiceStatusPr
                                     MasterData.invoiceNumber
                                   )
                                 }}
+                                style={{
+                                  visibility: MasterData.estatus.includes(
+                                    'Clasificacion'
+                                  )
+                                    ? 'hidden'
+                                    : 'visible'
+                                }}
                               >
                                 <IconContext.Provider
                                   value={{ color: 'blue', size: '20px' }}
@@ -428,11 +660,23 @@ export default function RptAmazonInvoiceStatus (props: IRptAmazonInvoiceStatusPr
                             <td
                               style={{ textAlign: 'center', width: '100px' }}
                               onClick={() => {
-                                downloadACKFile(MasterData.idArchivoACK, MasterData.archivoACK)
+                                downloadACKFile(
+                                  MasterData.idArchivoACK,
+                                  MasterData.archivoACK
+                                )
                               }}
                             >
                               {getOnlyDate(MasterData.fhArchivoACK)}
                             </td>
+                            <td style={{ width: '200px', textAlign: 'center' }}>
+                              {MasterData.clasificador}
+                            </td>
+                            <td style={{ width: '80px', textAlign: 'center' }}>
+                              {MasterData.fechaRecepcion}
+                            </td>
+                            <td style={{ width: '80px', textAlign: 'center' }}>
+                              {MasterData.cantidadASIN}
+                            </td>
                           </tr>
                         </>
                       )
@@ -443,6 +687,7 @@ export default function RptAmazonInvoiceStatus (props: IRptAmazonInvoiceStatusPr
           </div>
         </Card.Body>
       </Card>
+
       <Modal
         show={WaitingDialog}
         onHide={() => {
@@ -482,8 +727,9 @@ export default function RptAmazonInvoiceStatus (props: IRptAmazonInvoiceStatusPr
                   Proceso={IDProcess}
                   showPreview={3}
                   canEdit={false}
-                    Leyenda="Lista de archivos de respuesta de Amazon" onAppendMFM={function (Files: IFileManager[]): void {
+                  Leyenda="Lista de archivos de respuesta de Amazon"
-                    } }                  />
+                  onAppendMFM={function (Files: IFileManager[]): void {}}
+                />
               </Col>
               <Col></Col>
             </Row>
@@ -501,5 +747,5 @@ export default function RptAmazonInvoiceStatus (props: IRptAmazonInvoiceStatusPr
         }}
       />
     </div>
-  );
+  )
 }

src/Components/Clientes/Amazon/Reportes/FacturasPagadas/RptAmazonFacturasPagadas.tsx

@@ -0,0 +1,401 @@
+import * as React from 'react'
+import { useEffect, useState } from 'react'
+import { RootState } from '../../../../../store/store'
+import I2096Headers from '../../Interfaces/I2096Header'
+import DSAmazon from '../../Services/Amazon.Services'
+// Redux
+import { useDispatch, useSelector } from 'react-redux'
+import {
+  initializeInvoice,
+  populateInvoices,
+  updateInvoice
+} from '../../../../../store/features/Clientes/2096/AmazonInvoices'
+import {
+  Alert,
+  Button,
+  Card,
+  Col,
+  Form,
+  Modal,
+  Row,
+  Table
+} from 'react-bootstrap'
+import { MsgInformativo } from '../../../../Utils/Toast/msgInformativo'
+import { AiFillFileExcel } from 'react-icons/ai'
+import { IconContext } from 'react-icons'
+import { BsSearch, BsFileEarmarkExcel } from 'react-icons/bs'
+import { BsChevronDown, BsChevronRight, BsFilePdfFill } from 'react-icons/bs'
+import { FaAmazon } from 'react-icons/fa'
+import loadingImg from '../../../../../images/ajaxloader.gif'
+import { MFileManager } from '../../../../Utils/MFileManager/MFileManager'
+import DTO2096RptPayedOperations from '../../DTO/DTO2096RptPayedOperations'
+import { GoGear } from 'react-icons/go'
+import IFileManager from '../../../../../Interfaces/Utils/IFileManager'
+import DTO2096RptFacturasPagadas from '../../DTO/DTO2096RptFacturasPagadas'
+import DataTable from 'react-data-table-component'
+import * as XLSX from 'xlsx'
+
+export interface IRptAmazonFacturasPagadasProps {}
+
+export default function RptAmazonFacturasPagadas(
+  props: IRptAmazonFacturasPagadasProps
+) {
+  const dispatch = useDispatch()
+  const mInvoices = useSelector(
+    (state: RootState) => state.AmazonInvoices.Invoice
+  )
+  const [header, setHeader] = useState('')
+  const [Referencia, setReferencia] = useState('')
+  const [Inicio, setInicio] = useState(currentDate())
+  const [Fin, setFin] = useState(currentDate())
+  const [Data, setData] = useState<DTO2096RptFacturasPagadas[]>([])
+  const [show, setShowMsg] = useState(false)
+  const [ShowModal, setShowModal] = useState(false)
+  const [WaitingDialog, setWaitingDialog] = useState(false)
+  const [WaitingMessage, setWaitingMessage] = useState('')
+  const [msg, setMsg] = useState('')
+  const [ShowModalAnswerFile, setShowModalAnswerFile] = useState(false)
+  const [IDProcess, setIDProcess] = useState(25)
+  const [IDFactura, setIDFactura] = useState(0)
+  const [Invoices, setInvoices] = useState<number[]>([])
+  const msgColor = 'primary'
+  const columnsConcepts = [
+    {
+      name: <div style={{ textAlign: 'center' }}>Factura</div>,
+
+      width: '300px',
+      selector: (row: DTO2096RptFacturasPagadas) => row.factura,
+      sortable: true
+    },
+    {
+      name: <div style={{ textAlign: 'center' }}>Pedimento</div>,
+
+      width: '120px',
+      selector: (row: DTO2096RptFacturasPagadas) => row.pedimento,
+      sortable: true
+    },
+    {
+      name: <div style={{ textAlign: 'center' }}>Fecha Pago</div>,
+
+      width: '120px',
+      selector: (row: DTO2096RptFacturasPagadas) =>
+        row.fechaPago.substring(0, 10),
+      sortable: true
+    },
+    {
+      name: <div style={{ textAlign: 'center' }}>Clave</div>,
+
+      width: '80px',
+      selector: (row: DTO2096RptFacturasPagadas) => row.clave,
+      sortable: true
+    },
+    {
+      name: <div style={{ textAlign: 'center' }}>Tipo Operacion</div>,
+
+      width: '120px',
+      selector: (row: DTO2096RptFacturasPagadas) => row.tipoOp,
+      sortable: true
+    },
+    {
+      name: <div style={{ textAlign: 'center' }}>Valor Dolares</div>,
+
+      width: '130px',
+      selector: (row: DTO2096RptFacturasPagadas) => row.valorDolares,
+      sortable: true
+    },
+    {
+      name: <div style={{ textAlign: 'center' }}>Valor Aduana </div>,
+
+      width: '130px',
+      selector: (row: DTO2096RptFacturasPagadas) => row.valorAduana,
+      sortable: true
+    },
+    {
+      name: <div style={{ textAlign: 'center' }}>Razon Social</div>,
+
+      width: '350px',
+      selector: (row: DTO2096RptFacturasPagadas) => row.razonSocial,
+      sortable: true
+    },
+    {
+      name: <div style={{ textAlign: 'center' }}>Aduana</div>,
+
+      width: '100px',
+      selector: (row: DTO2096RptFacturasPagadas) => row.aduana,
+      sortable: false
+    },
+    {
+      name: <div style={{ textAlign: 'center' }}>Piezas</div>,
+
+      width: '100px',
+      selector: (row: DTO2096RptFacturasPagadas) => row.piezas,
+      sortable: false
+    }
+  ]
+
+  function currentDate(): string {
+    var today = new Date()
+    var dd = String(today.getDate()).padStart(2, '0')
+    var mm = String(today.getMonth() + 1).padStart(2, '0') //January is 0!
+    var yyyy = today.getFullYear()
+    return yyyy + '-' + mm + '-' + dd
+  }
+
+  const loadReport = () => {
+    DSAmazon.AmazonFacturasPagadasGET(Inicio, Fin)
+      .then((response) => {
+        setData(response.data)
+      })
+      .catch((e: Error) => {
+        alert('Ocurrio un error' + e.message.toString())
+      })
+  }
+
+  const downloadExcel = () => {
+    exportExcel(Data, 'Reporte de facturas pagadas de Amazon')
+  }
+
+  function exportExcel(
+    jsonData: DTO2096RptFacturasPagadas[],
+    fileName: string
+  ): void {
+    let Heading = [
+      [
+        'Factura',
+        'Pedimento',
+        'Fecha Pago',
+        'Clave',
+        'Tipo Op',
+        'Valor Dolares',
+        'Valor Aduana',
+        'Razon Social',
+        'Aduana',
+        'Piezas'
+      ]
+    ]
+    const dataOnly = jsonData.map(
+      ({
+        factura,
+        pedimento,
+        fechaPago,
+        clave,
+        tipoOp,
+        valorDolares,
+        valorAduana,
+        razonSocial,
+        aduana,
+        piezas
+      }) => {
+        return {
+          factura,
+          pedimento,
+          fechaPago,
+          clave,
+          tipoOp,
+          valorDolares,
+          valorAduana,
+          razonSocial,
+          aduana,
+          piezas
+        }
+      }
+    )
+    const Report = dataOnly.map(
+      ({
+        factura,
+        pedimento,
+        fechaPago,
+        clave,
+        tipoOp,
+        valorDolares,
+        valorAduana,
+        razonSocial,
+        aduana,
+        piezas
+      }) => {
+        return {
+          factura,
+          pedimento,
+          fechaPago,
+          clave,
+          tipoOp,
+          valorDolares,
+          valorAduana,
+          razonSocial,
+          aduana,
+          piezas
+        }
+      }
+    )
+    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, Report, { 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 + 1; C <= range.e.c + 1; ++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()
+  }, [])
+
+  return (
+    <div>
+      <Card>
+        <Card.Body>
+          <Row>
+            <Col xs={5}>
+              <Card.Title>
+                <IconContext.Provider value={{ color: '#F6C34F', size: '8%' }}>
+                  <FaAmazon />
+                </IconContext.Provider>
+                Facturas Pagadas
+              </Card.Title>
+            </Col>
+            <Col>
+              <Col style={{ textAlign: 'center' }}>
+                <Button
+                  variant="success"
+                  onClick={() => {
+                    downloadExcel()
+                  }}
+                >
+                  <BsFileEarmarkExcel />
+                  Excel
+                </Button>
+              </Col>
+            </Col>
+
+            <Col style={{ textAlign: 'right' }}>Desde</Col>
+            <Col xs={1}>
+              <Form.Control
+                defaultValue={Inicio}
+                type="date"
+                name="Inicio"
+                placeholder="Inicio"
+                title="Inicio"
+                alt="Inicio"
+                data-date-format="YYYY-mm-dd"
+                onChange={(e) => setInicio(e.target.value)}
+                size="sm"
+              />
+            </Col>
+            <Col style={{ textAlign: 'right' }}>Hasta</Col>
+            <Col xs={1}>
+              <Form.Control
+                defaultValue={Fin}
+                type="date"
+                name="Fin"
+                placeholder="Fin"
+                title="Fin"
+                alt="Fin"
+                onChange={(e) => setFin(e.target.value)}
+                size="sm"
+              />
+            </Col>
+            <Col
+              style={{ textAlign: 'right' }}
+              onClick={() => {
+                loadReport()
+              }}
+            >
+              {/* <div className="col-md-3 d-flex aling-items-center"> */}
+
+              <Button variant="primary">
+                Buscar <BsSearch />
+              </Button>
+              {/* </div> */}
+            </Col>
+          </Row>
+        </Card.Body>
+      </Card>
+
+      <Card>
+        <Card.Body>
+          <div
+            className="ag-theme-alpine"
+            style={{ height: 500, width: '100%' }}
+          >
+            <DataTable
+              noHeader
+              defaultSortFieldId={'id'}
+              defaultSortAsc={true}
+              striped={true}
+              dense={true}
+              paginationPerPage={10}
+              pagination
+              highlightOnHover
+              columns={columnsConcepts}
+              data={Data}
+              pointerOnHover
+            />
+          </div>
+        </Card.Body>
+      </Card>
+      <Modal
+        show={WaitingDialog}
+        onHide={() => {
+          setWaitingDialog(false)
+        }}
+        backdrop="static"
+        keyboard={false}
+        size="sm"
+        dialogClassName={'modal-50w'}
+        centered
+      >
+        <Modal.Header closeButton>
+          <Modal.Title></Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <img src={loadingImg} style={{ height: '150px' }} alt="proccessing" />
+          Generando {WaitingMessage}...
+        </Modal.Body>
+        <Modal.Footer></Modal.Footer>
+      </Modal>
+
+      <Modal
+        show={ShowModalAnswerFile}
+        onHide={() => {
+          setShowModalAnswerFile(false)
+        }}
+        size={'sm'}
+        dialogClassName={'modal-50w'}
+      >
+        <Modal.Body>
+          <div style={{ height: '330px' }}>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col></Col>
+              <Col xs={10} style={{ textAlign: 'center' }}>
+                <MFileManager
+                  IDTrafico={IDFactura}
+                  Proceso={IDProcess}
+                  showPreview={3}
+                  canEdit={false}
+                  Leyenda="Lista de archivos de respuesta de Amazon"
+                  onAppendMFM={function (Files: IFileManager[]): void {}}
+                />
+              </Col>
+              <Col></Col>
+            </Row>
+          </div>
+        </Modal.Body>
+      </Modal>
+
+      <MsgInformativo
+        show={show}
+        msg={msg}
+        header={header}
+        msgColor={msgColor}
+        closeToast={() => {
+          setShowMsg(false)
+        }}
+      />
+    </div>
+  )
+}

src/Components/Clientes/Amazon/Reportes/Segregacion/RptSegregacion.tsx

@@ -0,0 +1,239 @@
+import * as React from 'react'
+import { useEffect, useState } from 'react'
+import { RootState } from '../../../../../store/store'
+import I2096Headers from '../../Interfaces/I2096Header'
+import DSAmazon from '../../Services/Amazon.Services'
+// Redux
+import { useDispatch, useSelector } from 'react-redux'
+import {
+  initializeInvoice,
+  populateInvoices,
+  updateInvoice
+} from '../../../../../store/features/Clientes/2096/AmazonInvoices'
+import {
+  Alert,
+  Button,
+  Card,
+  Col,
+  Form,
+  Modal,
+  Row,
+  Table
+} from 'react-bootstrap'
+import { MsgInformativo } from '../../../../Utils/Toast/msgInformativo'
+import { AiFillFileExcel } from 'react-icons/ai'
+import { IconContext } from 'react-icons'
+import { BsChevronDown, BsChevronRight, BsFilePdfFill } from 'react-icons/bs'
+import { FaAmazon } from 'react-icons/fa'
+import { BsSearch, BsFileEarmarkExcel } from 'react-icons/bs'
+import loadingImg from '../../../../../images/ajaxloader.gif'
+import { MFileManager } from '../../../../Utils/MFileManager/MFileManager'
+import DTO2096RptPayedOperations from '../../DTO/DTO2096RptPayedOperations'
+import { GoGear } from 'react-icons/go'
+import IFileManager from '../../../../../Interfaces/Utils/IFileManager'
+import DTO2096RptFacturasPagadas from '../../DTO/DTO2096RptFacturasPagadas'
+import DataTable from 'react-data-table-component'
+import * as XLSX from 'xlsx'
+import DTOAmazonSegragacion from '../../DTO/DTOAmazonSegragacion'
+
+export interface IRptSegregacionProps {}
+
+export default function RptSegregacion(props: IRptSegregacionProps) {
+  const dispatch = useDispatch()
+  const mInvoices = useSelector(
+    (state: RootState) => state.AmazonInvoices.Invoice
+  )
+  const [header, setHeader] = useState('')
+  const [Referencia, setReferencia] = useState('')
+  const [Inicio, setInicio] = useState(currentDate())
+  const [Fin, setFin] = useState(currentDate())
+  const [Data, setData] = useState<DTOAmazonSegragacion[]>([])
+  const [show, setShowMsg] = useState(false)
+  const [ShowModal, setShowModal] = useState(false)
+  const [WaitingDialog, setWaitingDialog] = useState(false)
+  const [WaitingMessage, setWaitingMessage] = useState('')
+  const [msg, setMsg] = useState('')
+  const [ShowModalAnswerFile, setShowModalAnswerFile] = useState(false)
+  const [IDProcess, setIDProcess] = useState(25)
+  const [IDFactura, setIDFactura] = useState(0)
+  const [Invoices, setInvoices] = useState<number[]>([])
+  const msgColor = 'primary'
+
+  const columnsConcepts = [
+    {
+      name: 'VRID',
+      width: '150px',
+      selector: (row: DTOAmazonSegragacion) => row.vrid,
+      sortable: true
+    },
+    {
+      name: 'ASIN',
+      width: '150px',
+      selector: (row: DTOAmazonSegragacion) => row.asin,
+      sortable: true
+    },
+    {
+      name: 'Quantyty',
+      width: '100px',
+      selector: (row: DTOAmazonSegragacion) => row.quantity,
+      sortable: true
+    },
+    {
+      name: 'Descripcion',
+      width: '250px',
+      selector: (row: DTOAmazonSegragacion) => row.descripcion,
+      sortable: true
+    },
+    {
+      name: 'Motivo',
+      width: '2100px',
+
+      selector: (row: DTOAmazonSegragacion) => row.motivo,
+      sortable: true
+    },
+    {
+      name: 'FSegregacion',
+      width: '160px',
+      selector: (row: DTOAmazonSegragacion) => row.fSegregacion,
+      sortable: true
+    },
+    {
+      name: 'ValorMercancia',
+      width: '160px',
+      selector: (row: DTOAmazonSegragacion) => row.valorMercancia,
+      sortable: true
+    }
+  ]
+
+  function currentDate(): string {
+    var today = new Date()
+    var dd = String(today.getDate()).padStart(2, '0')
+    var mm = String(today.getMonth() + 1).padStart(2, '0') //January is 0!
+    var yyyy = today.getFullYear()
+    return yyyy + '-' + mm + '-' + dd
+  }
+
+  const downloadReport = () => {
+    DSAmazon.GETReporteSegregados(Inicio, Fin)
+      .then((response: any) => {
+        if (response.status === 200) {
+          const url = window.URL.createObjectURL(new Blob([response.data]))
+          const link = document.createElement('a')
+          link.href = url
+          link.setAttribute('download', 'Segregrados.xls')
+          document.body.appendChild(link)
+          link.click()
+        }
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error')
+        setShowMsg(true)
+        return
+      })
+  }
+
+  const loadReport = () => {
+    DSAmazon.GETReportesSegregadoss(Inicio, Fin)
+      .then((response) => {
+        setData(response.data)
+      })
+      .catch((e: Error) => {
+        alert('Ocurrio un error' + e.message.toString())
+      })
+  }
+
+  return (
+    <div>
+      <Card>
+        <Card.Body>
+          <Row>
+            <Col xs={5}>
+              <Card.Title>
+                <IconContext.Provider value={{ color: '#F6C34F', size: '8%' }}>
+                  <FaAmazon />
+                </IconContext.Provider>
+                Segregacion
+              </Card.Title>
+            </Col>
+            <Col></Col>
+            <Col style={{ textAlign: 'right' }}>Desde</Col>
+            <Col xs={1}>
+              <Form.Control
+                defaultValue={Inicio}
+                type="date"
+                name="Inicio"
+                placeholder="Inicio"
+                title="Inicio"
+                alt="Inicio"
+                data-date-format="YYYY-mm-dd"
+                onChange={(e) => setInicio(e.target.value)}
+                size="sm"
+              />
+            </Col>
+            <Col style={{ textAlign: 'right' }}>Hasta</Col>
+            <Col xs={1}>
+              <Form.Control
+                defaultValue={Fin}
+                type="date"
+                name="Fin"
+                placeholder="Fin"
+                title="Fin"
+                alt="Fin"
+                onChange={(e) => setFin(e.target.value)}
+                size="sm"
+              />
+            </Col>
+            <Col
+              style={{ textAlign: 'right' }}
+              onClick={() => {
+                downloadReport()
+              }}
+            >
+              <Button variant="primary">
+                <BsFileEarmarkExcel />
+                Descargar
+              </Button>
+            </Col>
+
+            <Col
+              style={{ textAlign: 'center' }}
+              onClick={() => {
+                loadReport()
+              }}
+            >
+              <Button variant="primary">
+                {' '}
+                <BsSearch />
+                Buscar
+              </Button>
+            </Col>
+
+            <Card>
+              <Card.Body>
+                <div
+                  className="ag-theme-alpine"
+                  style={{ height: 500, width: '100%' }}
+                >
+                  <DataTable
+                    noHeader
+                    defaultSortFieldId={''}
+                    defaultSortAsc={true}
+                    striped={true}
+                    dense={true}
+                    paginationPerPage={10}
+                    pagination
+                    highlightOnHover
+                    columns={columnsConcepts}
+                    data={Data}
+                    pointerOnHover
+                  />
+                </div>
+              </Card.Body>
+            </Card>
+          </Row>
+        </Card.Body>
+      </Card>
+    </div>
+  )
+}

src/Components/Clientes/Amazon/Reportes/Traffic/Linking/RptAmazonLinkInvoice2TrafficDetail.tsx

@@ -52,9 +52,9 @@ export default function RtpAmazonInvoice2TrafficDetail(
     props.detail.cumplimientoNormativo ? props.detail.cumplimientoNormativo : ''
   )
   const [Comentarios, setComentarios] = useState(
-    props.detail.comentarios
+    props.detail.comentariosSightLine
-      ? props.detail.comentarios
+      ? props.detail.comentariosSightLine
-      : 'Clasificacion Incorrecta'
+      : ''
   )
   const [ShowModalEdit, setShowModalEdit] = useState(false)
   const [UnitMeasure, setUnitMeasure] = useState('')

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

@@ -20,6 +20,13 @@ import DTO2096RptPayedOperations from '../DTO/DTO2096RptPayedOperations'
 import DTO2096NoParteVerificacion from '../DTO/DTO2096NoParteVerificacion'
 import DTO2096InvoiceStatus from '../DTO/DTO2096InvoiceStatus'
 import IFileManager from '../../../../Interfaces/Utils/IFileManager'
+import DTO2096RptFacturasPagadas from '../DTO/DTO2096RptFacturasPagadas'
+import DTO2096TraficoConsultaAmazonDetail from '../DTO/DTO2096TraficoConsultaAmazonDetail'
+import DTO2096TraficoConsultaAmazonHeader from '../DTO/DTO2096TraficoConsultaAmazonHeader'
+import DTO2096DataTraficoConsulta from '../DTO/DTO2096DataTraficoConsulta'
+import I2096CatGrupoRegulatorio from '../Interfaces/I2096CatGrupoRegulatorio'
+import DTOAmazonSegragacion from '../DTO/DTOAmazonSegragacion'
+import ICat2096CatConceptosConsulta from '../Interfaces/I2096CatConceptosConsulta'
 
 class AmazonDataService {
   AmazonPendingClasificationInvoiceGET() {
@@ -77,8 +84,11 @@ class AmazonDataService {
   AmazonPayedOperationsGET(Inicio: string, Fin: string) {
     return http.get<DTO2096RptPayedOperations[]>(`/AmazonInvoice/AmazonPayedOperationsGET?Inicio=${Inicio}&Fin=${Fin}`)
   }
-  AmazonInvoiceStatusGET(Invoice: string) {
+  AmazonFacturasPagadasGET(Inicio: string, Fin: string) {
-    return http.get<DTO2096InvoiceStatus[]>(`/AmazonInvoice/AmazonInvoiceStatusGET?Invoice=${Invoice}`)
+    return http.get<DTO2096RptFacturasPagadas[]>(`/AmazonInvoice/AmazonFacturasPagadasGET?Inicio=${Inicio}&Fin=${Fin}`)
+  }
+  AmazonInvoiceStatusGET(Invoice: string , Inicio: string, Fin: string) {
+    return http.get<DTO2096InvoiceStatus[]>(`/AmazonInvoice/AmazonInvoiceStatusGET?Invoice=${Invoice}&Inicio=${Inicio}&Fin=${Fin}`)
   }
   AmazonInvoicePrioritySET(Id: number, Prioridad: boolean) {
     return http.get<I2096Headers[]>(`/AmazonInvoice/AmazonInvoicePrioritySET?id=${Id}&prioridad=${Prioridad}`)
@@ -108,6 +118,9 @@ class AmazonDataService {
   SightLineSET(data: DTO2096SightLine) {
     return http.put<DTO2096SightLine>(`/AmazonInvoice/AmazonSightLineSET`, data)
   }
+  DataTraficoConsultaSET(data: DTO2096DataTraficoConsulta) {
+    return http.put<DTO2096DataTraficoConsulta>(`/AmazonInvoice/DataTraficoConsultaSET`, data)
+  }
   
   PaisClavesGET() {
     return http.get<I2096PaisClave[]>(`/AmazonInvoice/PaisClavesGet`)
@@ -121,8 +134,17 @@ class AmazonDataService {
        console.log(error)
      })
   }
-  ExceptionsFileAmazonGET(id: number) {
+  NoPartesAmazonFinal(id: number) {
-    return http.get<ArrayBuffer>(`/AmazonInvoice/ExceptionsFileAmazonGET?id=${id}`, {responseType: 'arraybuffer'})
+    return http.get<ArrayBuffer>(`/AmazonInvoice/GetNoPartesAmazonFinal?id=${id}`, {responseType: 'arraybuffer'})
+    .then(function (response) {
+       return response
+     })
+     .catch(function (error) {
+       console.log(error)
+     })
+  }
+  ExceptionsFileAmazonGET(id: number, code: number) {
+    return http.get<ArrayBuffer>(`/AmazonInvoice/ExceptionsFileAmazonGET?id=${id}&code=${code}`, {responseType: 'arraybuffer'})
     .then(function (response) {
        return response
      })
@@ -167,6 +189,41 @@ class AmazonDataService {
        return error
      })
   }
+  GETReporteSegregados(Inicio: string, Fin: string) {
+    return http.get<ArrayBuffer>(`/AmazonInvoice/GETAmazonReporteSegregados?Inicio=${Inicio}&Fin=${Fin}`, {responseType: 'arraybuffer'})
+    .then(function (response) {
+       return response
+     })
+     .catch(function (error) {
+       console.log(error)
+       return error
+     })
+  }
+
+
+  GETReportesSegregadoss(Inicio: string, Fin: string){
+    return http.get<DTOAmazonSegragacion[]>(`/AmazonInvoice/GETAmazonReportesSegregadoss?Inicio=${Inicio}&Fin=${Fin}`)
+
+  }
+
+
+
+
+
+
+
+
+
+  TraficoConsultasAmazonGenerateExcel(id: number) {
+    return http.get<ArrayBuffer>(`/AmazonInvoice/TraficoConsultaAmazonGenerateExcel?id=${id}`, {responseType: 'arraybuffer'})
+    .then(function (response) {
+       return response
+     })
+     .catch(function (error) {
+       console.log(error)
+       return error
+     })
+  }
   CreateACKFile(referencia: string) {
     return http.get<Boolean>(`/AmazonInvoice/createACKFile?Referencia=`+referencia)
   }
@@ -215,5 +272,29 @@ class AmazonDataService {
   ApplyAnswerFile2Invoice(Files: string[]) {
     return http.post<Boolean>(`/AmazonInvoice/ApplyAnswerFile2Invoice`, Files)
   }
+  TransporteConsultaAmazon() {
+    return http.get<DTO2096TraficoConsultaAmazonHeader[]>(`/AmazonInvoice/TraficoConsultasAmazon`)
+  }
+  CatGrupoRegulatorioGET() {
+    return http.get<I2096CatGrupoRegulatorio[]>(`/AmazonInvoice/CatGrupoRegulatorioGET`)
+  }
+  TraficoConsultasAmazonById(id: number) {
+    return http.get<DTO2096TraficoConsultaAmazonHeader>(`/AmazonInvoice/TraficoConsultasAmazonById?id=${id}`)
+  }
+  ClasificacionBOT(id: number) {
+    return http.get<DTO2096TraficoConsultaAmazonHeader>(`/AmazonInvoice/Bot/Clasificacion?id=${id}`)
+  }
+  DeleteNoParte(id: number) {
+    return http.delete<Boolean>(`/AmazonInvoice/DeleteNoParte?id=${id}`)
+  }
+  CatConceptosConsultaGET() {
+    return http.get<ICat2096CatConceptosConsulta[]>(`/AmazonInvoice/Catalogos/CatConceptosConsultaGET`)
+  }
+  CatConceptosConsultaAppend(data: ICat2096CatConceptosConsulta) {
+    return http.post<ICat2096CatConceptosConsulta>(`/AmazonInvoice/Catalogos/CatConceptosConsultaAppend`, data)
+  }
+  InvoiceDistinctExceptionCodeGet(id: number) {
+    return http.get<number[]>(`/AmazonInvoice/Invoice/DistinctExceptionCodeGet?id=${id}`)
+  }
 }
 export default new AmazonDataService()

src/Components/Dashboard/Dashboard.tsx

@@ -6,6 +6,7 @@ import { Heineken1 } from './Heineken1'
 import { DashboardFacturacion } from './DashboardFacturacion'
 import { DashboardClasificacion } from './DashboardClasificacion'
 import DashboardTrafico from './DashboardTrafico'
+import DashboardDireccion from './DashboardDireccion'
 
 interface IProps {}
 
@@ -24,26 +25,29 @@ export default function Dashboard(props: IProps) {
       <br />
       <Container>
         <Row xs={1} md={3} className='g-4'>
-          {[['Direcccion', 'Sistemas', 'Corresponsalias'].includes(Depto) ? <DashboardCorresponsales /> : ''].map(
+          {/* {[['Direcccion', 'Sistemas', 'Corresponsalias'].includes(Depto) ? <DashboardCorresponsales /> : ''].map(
             (item) => {
               return <React.Fragment>{item}</React.Fragment>
             }
-          )}
+          )} */}
-          {[['Direcccion', 'Sistemas', 'Contabilidad'].includes(Depto) ? <DashboardContabilidad /> : ''].map((item) => {
+          {/* {[['Direcccion', 'Sistemas', 'Contabilidad'].includes(Depto) ? <DashboardContabilidad /> : ''].map((item) => {
             return <React.Fragment>{item}</React.Fragment>
-          })}
+          })} */}
-          {[['Heineken1'].includes(User) ? <Heineken1 /> : ''].map((item) => {
+          {/* {[['Heineken1'].includes(User) ? <Heineken1 /> : ''].map((item) => {
             return <React.Fragment>{item}</React.Fragment>
           })}
           {[['Direcccion', 'Sistemas', 'Facturacion'].includes(Depto) ? <DashboardFacturacion /> : ''].map((item) => {
             return <React.Fragment>{item}</React.Fragment>
-          })}
+          })} */}
           {[['Direcccion', 'Sistemas', 'Operaciones', 'Clasificacion'].includes(Depto) ? <DashboardClasificacion /> : ''].map((item) => {
             return <React.Fragment>{item}</React.Fragment>
           })}
           {[['Direcccion', 'Sistemas', 'Operaciones', 'Trafico'].includes(Depto) ? <DashboardTrafico /> : ''].map((item) => {
             return <React.Fragment>{item}</React.Fragment>
           })}
+          {[['Direccion', 'Sistemas'].includes(Depto) ? <DashboardDireccion /> : ''].map((item) => {
+            return <React.Fragment>{item}</React.Fragment>
+          })}
         </Row>
       </Container>
     </div>

src/Components/Dashboard/DashboardCorresponsales.tsx

@@ -13,7 +13,6 @@ export default function DashboardCorresponsales(props: IProps) {
   const [TotalCorresponsales, setTotalCorresponsales] = useState(0);
   const [labels, setlabels] = useState<string[]>([]);
   const [series, setseries] = useState<number[]>([]);
-  //const [TipoCambio, setTipoCambio] = useState(0)
   const [CircleOptions, setCirleOpcions] = useState<ApexOptions>({
     labels: [
       '(2) Rechazos para el corresponsal',
@@ -77,24 +76,8 @@ export default function DashboardCorresponsales(props: IProps) {
       .catch((e: Error) => {
         return;
       });
-    //getTipoCambio(currentDate())
   }, []);
 
-  function ConvertStringToHex(str: string) {
-    var arr = [];
-    for (var i = 0; i < str.length; i++) {
-      arr[i] = ('00' + str.charCodeAt(i).toString(16)).slice(-4);
-    }
-    return '\\u' + arr.join('\\u');
-  }
-
-  function currentDate(): string {
-    var today = new Date();
-    var dd = String(today.getDate()).padStart(2, '0');
-    var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
-    var yyyy = today.getFullYear();
-    return yyyy + '-' + mm + '-' + dd;
-  }
 
   return (
     <>

src/Components/Dashboard/DashboardDireccion.tsx

@@ -0,0 +1,577 @@
+import React, { FC, useEffect, useState } from 'react'
+import { Card, Col, Container, Row } from 'react-bootstrap'
+import { Link } from 'react-router-dom'
+import DashboardDS from '../../Services/Dashboard/Dashboard.Direccion.Services'
+import ReactApexChart from 'react-apexcharts'
+import { ApexOptions } from 'apexcharts'
+import DTOPedimentosCruzadosListaCliente from '../../DTO/Dashboard/DTOPedimentosCruzadosListaCliente'
+import DTOPedimentosCruzadosData from '../../DTO/Dashboard/DTOPedimentosCruzadosData'
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  ComposedChart,
+  Bar
+} from 'recharts'
+import { Chart } from 'react-google-charts'
+
+import {
+  Chart as ChartJS,
+  LinearScale,
+  CategoryScale,
+  BarElement,
+  PointElement,
+  LineElement,
+  Legend as Legend6,
+  Tooltip as Tooltip6,
+  LineController,
+  BarController
+} from 'chart.js'
+import { Chart as Chart6 } from 'react-chartjs-2'
+
+interface IProps {}
+
+interface IRechartsData {
+  name: string
+  uv: number
+  pv: number
+  amt: number
+}
+
+ChartJS.register(
+  LinearScale,
+  CategoryScale,
+  BarElement,
+  PointElement,
+  LineElement,
+  Legend6,
+  Tooltip6,
+  LineController,
+  BarController
+)
+
+const DashboardDireccion: FC<IProps> = (props) => {
+  const [Clientes, setClientes] = useState<DTOPedimentosCruzadosListaCliente[]>(
+    []
+  )
+  const [Data, setData] = useState<DTOPedimentosCruzadosData[]>([])
+  const [Cliente, setCliente] = useState('')
+  const [IDCliente, setIDCliente] = useState(0)
+  const [Pedimentos, setPedimentos] = useState<number[]>([])
+  const [Cruces, setCruces] = useState<number[]>([])
+  const [series, setSeries] = useState([
+    {
+      type: 'line', //render a line chart for this data
+      name: 'Pedimentos',
+      data: [19, 22, 20, 26]
+    },
+    {
+      type: 'column', //use column chart here.
+      name: 'Cruces',
+      data: [103, 105, 98, 83]
+    }
+  ])
+  const [options, setOptions] = useState<ApexOptions>({
+    xaxis: {
+      categories: ['2022', '20022', '2023', '2023']
+    },
+    chart: {
+      height: 100,
+      type: 'line',
+      zoom: {
+        enabled: false
+      }
+    }
+  })
+  const [series2, setSeries2] = useState([
+    {
+      name: 'series1',
+      data: [31, 40, 28, 51, 42, 109, 100]
+    },
+    {
+      name: 'series2',
+      data: [11, 32, 45, 32, 34, 52, 41]
+    }
+  ])
+  const [options2, setOptions2] = useState<ApexOptions>({
+    chart: {
+      height: 350,
+      type: 'area'
+    },
+    dataLabels: {
+      enabled: false
+    },
+    stroke: {
+      curve: 'smooth'
+    },
+    xaxis: {
+      categories: ['Ene', 'Feb', 'Mar', 'Abr', 'Marzo', 'Abr', 'May']
+    }
+  })
+  const [series3, setSeries3] = useState([
+    {
+      name: 'series1',
+      data: [31, 40, 28, 51, 42, 109, 100]
+    },
+    {
+      name: 'series2',
+      data: [11, 32, 45, 32, 34, 52, 41]
+    }
+  ])
+  const [options3, setOptions3] = useState<ApexOptions>({
+    chart: {
+      type: 'bar',
+      height: 350
+    },
+    plotOptions: {
+      bar: {
+        horizontal: false,
+        columnWidth: '55%'
+      }
+    },
+    dataLabels: {
+      enabled: false
+    },
+    stroke: {
+      show: true,
+      width: 2,
+      colors: ['transparent']
+    },
+    xaxis: {
+      categories: [
+        'Feb',
+        'Mar',
+        'Apr',
+        'May',
+        'Jun',
+        'Jul',
+        'Aug',
+        'Sep',
+        'Oct'
+      ]
+    },
+    yaxis: {
+      title: {
+        text: '$ (thousands)'
+      }
+    },
+    fill: {
+      opacity: 1
+    },
+    tooltip: {
+      y: {
+        formatter: function (val) {
+          return '$ ' + val + ' thousands'
+        }
+      }
+    }
+  })
+  const [data4, setData4] = useState<IRechartsData[]>([
+    {
+      name: 'Page A',
+      uv: 4000,
+      pv: 2400,
+      amt: 2400
+    },
+    {
+      name: 'Page B',
+      uv: 3000,
+      pv: 1398,
+      amt: 2210
+    },
+    {
+      name: 'Page C',
+      uv: 2000,
+      pv: 9800,
+      amt: 2290
+    }
+  ])
+  const [data5, setData5] = useState([
+    ['Mes', 'Pedimentos', 'Cruces'],
+    ['2004/05', 165, 938],
+    ['2005/06', 135, 1120],
+    ['2006/07', 157, 1167],
+    ['2007/08', 139, 1110],
+    ['2008/09', 136, 691]
+  ])
+  const options5 = {
+    title: '',
+    vAxis: { title: '' },
+    hAxis: { title: 'Meses' },
+    seriesType: 'bars',
+    series: { 1: { type: 'line' } },
+    colors: ['#1850D0', '70D63E']
+  }
+  const [data6, setData6] = useState({
+    labels: ['January', 'February', 'March'],
+    datasets: [
+      {
+        type: 'line' as const,
+        label: 'Pedimentos',
+        borderColor: '#1850D0',
+        borderWidth: 2,
+        fill: false,
+        data: [1, 2, 3]
+      },
+      {
+        type: 'bar' as const,
+        label: 'Cruces',
+        backgroundColor: '#70D63E',
+        data: [8, 9, 10],
+        borderColor: 'white',
+        borderWidth: 2
+      }
+    ]
+  })
+
+  const options6 = {
+    indexAxis: 'x' as const,
+    elements: {
+      bar: {
+        borderWidth: 2
+      }
+    },
+    responsive: true
+  }
+
+  useEffect(() => {
+    DashboardDS.GETPedimentosCruzadosListaCliente()
+      .then((response) => {
+        setClientes(response.data)
+      })
+      .catch((e: Error) => {
+        return
+      })
+  }, [])
+
+  useEffect(() => {
+    if (Clientes.length > 0) setCustomer()
+  }, [Clientes])
+
+  useEffect(() => {
+    DashboardDS.GETPedimentosCruzadosData(IDCliente)
+      .then((response) => {
+        setData(response.data)
+        let Pedimentos: number[] = []
+        let Cruces: number[] = []
+        let Categorias: string[] = []
+        let RechartsData: IRechartsData[] = []
+        let RGoogleChartData: Array<Array<string | number>> = []
+        RGoogleChartData.push(['Mes', 'Pedimentos', 'Cruces'])
+        response.data.forEach(function (item) {
+          Pedimentos.push(item.pedimentos)
+          Cruces.push(item.despachos)
+          Categorias.push(item.sMes)
+          RechartsData.push({
+            name: item.sMes,
+            pv: item.pedimentos,
+            uv: item.despachos,
+            amt: 1
+          })
+          RGoogleChartData.push([item.sMes, item.pedimentos, item.despachos])
+        })
+        setData6({
+          labels: Categorias,
+          datasets: [
+            {
+              type: 'line' as const,
+              label: 'Pedimentos',
+              borderColor: '#1850D0',
+              borderWidth: 2,
+              fill: false,
+              data: Pedimentos
+            },
+            {
+              type: 'bar' as const,
+              label: 'Cruces',
+              backgroundColor: '#70D63E',
+              data: Cruces,
+              borderColor: 'white',
+              borderWidth: 2
+            }
+          ]
+        })
+        setData5(RGoogleChartData)
+        setData4(RechartsData)
+        setSeries([
+          {
+            type: 'line', //render a line chart for this data
+            name: 'Pedimentos',
+            data: Pedimentos
+          },
+          {
+            type: 'column', //use column chart here.
+            name: 'Cruces',
+            data: Cruces
+          }
+        ])
+        setOptions({
+          xaxis: {
+            categories: Categorias
+          },
+          chart: {
+            height: 100,
+            type: 'line',
+            zoom: {
+              enabled: false
+            }
+          }
+        })
+
+        setSeries2([
+          {
+            name: 'Pedimentos',
+            data: Pedimentos
+          },
+          {
+            name: 'Cruces',
+            data: Cruces
+          }
+        ])
+        setOptions2({
+          xaxis: {
+            categories: Categorias
+          },
+          chart: {
+            height: 100,
+            type: 'line',
+            zoom: {
+              enabled: false
+            }
+          }
+        })
+      })
+      .catch((e: Error) => {
+        return
+      })
+  }, [IDCliente])
+
+  const setCustomer = () => {
+    console.log('entro al proceso de set customer')
+    let idx = Math.floor(Math.random() * Clientes.length)
+    for (var c = 0; c < Clientes.length; c++) {
+      if (idx == c) {
+        setIDCliente(Clientes[idx].id)
+        setCliente(Clientes[idx].razonSocial)
+        break
+      }
+    }
+  }
+
+  return (
+    <>
+      <Col>
+        <Card style={{ width: '18rem' }} className="dashboardComponentFont">
+          <Card.Header style={{ backgroundColor: '#1D6DC2', color: '#ffffff' }}>
+            Dirección
+          </Card.Header>
+          <Card.Body style={{ paddingBottom: '0px' }}>
+            <Card.Title>
+              {Cliente}
+              <br />
+              <br />
+            </Card.Title>
+            <div style={{ fontSize: '6em' }} className="text-center">
+              <Chart6
+                type="bar"
+                data={data6}
+                options={options6}
+                width="30%"
+                height="25%"
+              />
+            </div>
+          </Card.Body>
+          <Card.Footer style={{ paddingRight: '5px' }}>
+            <Link
+              to="../RptPedimentosCruces01"
+              style={{
+                textDecoration: 'none',
+                float: 'right',
+                paddingRight: '10px'
+              }}
+            >
+              Ver mas...
+            </Link>
+          </Card.Footer>
+        </Card>
+      </Col>
+      <Col>
+        <Card style={{ width: '18rem' }} className="dashboardComponentFont">
+          <Card.Header style={{ backgroundColor: '#1D6DC2', color: '#ffffff' }}>
+            Dirección
+          </Card.Header>
+          <Card.Body style={{ paddingBottom: '50px' }}>
+            <Card.Title>
+              {Cliente}
+              <br />
+              <br />
+            </Card.Title>
+            <div style={{ fontSize: '6em' }} className="text-center">
+              <ReactApexChart options={options} series={series} />
+            </div>
+          </Card.Body>
+          <Card.Footer style={{ paddingRight: '5px' }}>
+            <Link
+              to="../RptPedimentosCruces02"
+              style={{
+                textDecoration: 'none',
+                float: 'right',
+                paddingRight: '10px'
+              }}
+            >
+              Ver mas...
+            </Link>
+          </Card.Footer>
+        </Card>
+      </Col>
+      <Col>
+        <Card style={{ width: '18rem' }} className="dashboardComponentFont">
+          <Card.Header style={{ backgroundColor: '#1D6DC2', color: '#ffffff' }}>
+            Dirección
+          </Card.Header>
+          <Card.Body style={{ paddingBottom: '50px' }}>
+            <Card.Title>
+              {Cliente}
+              <br />
+              <br />
+            </Card.Title>
+            <div style={{ fontSize: '6em' }} className="text-center">
+              <ReactApexChart options={options2} series={series2} type="area" />
+            </div>
+          </Card.Body>
+          <Card.Footer style={{ paddingRight: '5px' }}>
+            <Link
+              to="../RptPedimentosCruces03"
+              style={{
+                textDecoration: 'none',
+                float: 'right',
+                paddingRight: '10px'
+              }}
+            >
+              Ver mas...
+            </Link>
+          </Card.Footer>
+        </Card>
+      </Col>
+      <Col>
+        <Card style={{ width: '18rem' }} className="dashboardComponentFont">
+          <Card.Header style={{ backgroundColor: '#1D6DC2', color: '#ffffff' }}>
+            Dirección
+          </Card.Header>
+          <Card.Body style={{ paddingBottom: '50px' }}>
+            <Card.Title>
+              {Cliente}
+              <br />
+              <br />
+            </Card.Title>
+            <div style={{ fontSize: '6em' }} className="text-center">
+              <ReactApexChart options={options2} series={series2} type="bar" />
+            </div>
+          </Card.Body>
+          <Card.Footer style={{ paddingRight: '5px' }}>
+            <Link
+              to="../RptPedimentosCruces04"
+              style={{
+                textDecoration: 'none',
+                float: 'right',
+                paddingRight: '10px'
+              }}
+            >
+              Ver mas...
+            </Link>
+          </Card.Footer>
+        </Card>
+      </Col>
+      <Col>
+        <Card style={{ width: '18rem' }} className="dashboardComponentFont">
+          <Card.Header style={{ backgroundColor: '#1D6DC2', color: '#ffffff' }}>
+            Dirección
+          </Card.Header>
+          <Card.Body style={{ paddingBottom: '50px' }}>
+            <Card.Title>
+              {Cliente}
+              <br />
+              <br />
+            </Card.Title>
+            <ComposedChart
+              width={250}
+              height={170}
+              data={data4}
+              margin={{
+                top: 20,
+                right: 20,
+                bottom: 20,
+                left: 20
+              }}
+            >
+              <CartesianGrid stroke="#f5f5f5" />
+              <XAxis dataKey="name" />
+              <YAxis />
+              <Tooltip />
+              <Legend />
+              <Bar dataKey="pv" barSize={20} fill="#1850D0" name="Pedimentos" />
+              <Line
+                type="monotone"
+                dataKey="uv"
+                stroke="#70D63E"
+                name="Cruces"
+              />
+            </ComposedChart>
+          </Card.Body>
+          <Card.Footer style={{ paddingRight: '5px' }}>
+            <Link
+              to="../RptPedimentosCruces05"
+              style={{
+                textDecoration: 'none',
+                float: 'right',
+                paddingRight: '10px'
+              }}
+            >
+              Ver mas...
+            </Link>
+          </Card.Footer>
+        </Card>
+      </Col>
+      <Col>
+        <Card style={{ width: '18rem' }} className="dashboardComponentFont">
+          <Card.Header style={{ backgroundColor: '#1D6DC2', color: '#ffffff' }}>
+            Dirección
+          </Card.Header>
+          <Card.Body style={{ paddingBottom: '50px' }}>
+            <Card.Title>
+              {Cliente}
+              <br />
+              <br />
+            </Card.Title>
+            <Chart
+              chartType="ComboChart"
+              width="100%"
+              height="170px"
+              data={data5}
+              options={options5}
+            />
+          </Card.Body>
+          <Card.Footer style={{ paddingRight: '5px' }}>
+            <Link
+              to="../RptPedimentosCruces06"
+              style={{
+                textDecoration: 'none',
+                float: 'right',
+                paddingRight: '10px'
+              }}
+            >
+              Ver mas...
+            </Link>
+          </Card.Footer>
+        </Card>
+      </Col>
+    </>
+  )
+}
+
+export default DashboardDireccion

src/Components/Dashboard/DashboardTrafico.tsx

@@ -7,8 +7,7 @@ import { Link } from 'react-router-dom'
 import '../../css/generic01.css'
 import DashboardDataService from '../../Services/Dashboard/Dashboard.Clasificacion.Services'
 
-export interface IDashboardTraficoProps {
+export interface IDashboardTraficoProps {}
-}
 
 export default function DashboardTrafico(props: IDashboardTraficoProps) {
   const [Terminadas, setTerminadas] = useState(0)
@@ -39,8 +38,13 @@ export default function DashboardTrafico (props: IDashboardTraficoProps) {
   return (
     <>
       <Col>
-          <Card style={{ width: '18rem' }} className='blueCardBorder dashboardComponentFont'>
+        <Card
-            <Card.Header style={{backgroundColor: '#1D6DC2', color: '#ffffff'}}>Trafico</Card.Header>
+          style={{ width: '18rem' }}
+          className="blueCardBorder dashboardComponentFont"
+        >
+          <Card.Header style={{ backgroundColor: '#1D6DC2', color: '#ffffff' }}>
+            Trafico
+          </Card.Header>
           <Card.Body>
             <Card.Title>
               Facturas{' '}
@@ -101,13 +105,22 @@ export default function DashboardTrafico (props: IDashboardTraficoProps) {
                 {Pendientes}
               </Col>
             </Row>
+            <Row>
+              <Col xs={12}>
+                <Link
+                  to="../RptConsultaTrafico"
+                  style={{ textDecoration: 'none', float: 'right' }}
+                >
+                  Consultas Amazon
+                </Link>
+              </Col>
+            </Row>
           </Card.Body>
-            <Card.Footer
+          {/*  <Card.Footer
               style={{ paddingRight: '5px', paddingBottom: '5px' }}
-            ></Card.Footer>
+            ></Card.Footer> */}
         </Card>
       </Col>
     </>
   )
 }
-  

src/Components/GEMCO/Facturacion/Anexo/RptConsolidadosSinFirmaBanco.tsx

@@ -0,0 +1,125 @@
+import { useEffect, useState } from 'react'
+import { Button, Card, Col, Row } from 'react-bootstrap'
+import DataTable from 'react-data-table-component'
+import IConsolidadosSinFirmaBanco from '../../../../Interfaces/Facturacion/Anexo/IConsolidadosSinFirmaBanco'
+import DSOperaciones from '../../../../Services/Operaciones/Operaciones.Services'
+import * as XLSX from 'xlsx'
+import { BsFileEarmarkExcel } from 'react-icons/bs'
+
+export interface IRtpConsolidadosSinFirmaBancoProps {}
+
+export default function RtpConsolidadosSinFirmaBanco(
+  props: IRtpConsolidadosSinFirmaBancoProps
+) {
+  const [Data, setData] = useState<IConsolidadosSinFirmaBanco[]>([])
+  const [Total, setTotal] = useState(0)
+  const columnsConcepts = [
+    {
+      name: 'Referencia',
+      width: '150px',
+      cell: (row: IConsolidadosSinFirmaBanco) => row.referencia,
+      sortable: true
+    },
+    {
+      name: 'Fecha Pago',
+      width: '250px',
+      cell: (row: IConsolidadosSinFirmaBanco) => row.fechaPago,
+      sortable: true
+    },
+    {
+      name: 'Fecha Validacion',
+      width: '250px',
+      cell: (row: IConsolidadosSinFirmaBanco) => row.firmaValidacion,
+      sortable: true
+    },
+    {
+      name: 'Firma Banco',
+      with: '250px',
+      cell: (row: IConsolidadosSinFirmaBanco) => row.firmaBanco,
+      sortable: true
+    }
+  ]
+
+  const downloadExcel = () => {
+    exportExcel(Data, 'Consolidados sin firma de banco')
+  }
+
+  function exportExcel(jsonData: any[], fileName: string): void {
+    let Heading = [
+      ['Referencia', 'FechaPago', 'Fecha Validacion', 'Firma Banco']
+    ]
+    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()
+    }
+  }
+
+  const generaReporte = () => {
+    DSOperaciones.OperacionesSinFirmaBancoGet()
+      .then((response) => {
+        setData(response.data)
+        setTotal(response.data.length)
+      })
+      .catch((e: Error) => {
+        console.log(e)
+      })
+  }
+
+  useEffect(() => {
+    generaReporte()
+  }, [])
+
+  return (
+    <div>
+      <Card>
+        <Card.Body>
+          <Card.Title>
+            <Row>
+              <Col xs={3}>Consolidados sin firma banco : {Total} registros</Col>
+              <Col xs={8}></Col>
+              <Col xs={1} className="colAlignRight">
+                <Button
+                  size="sm"
+                  variant="success"
+                  onClick={() => {
+                    downloadExcel()
+                  }}
+                >
+                  <BsFileEarmarkExcel />
+                  &nbsp;Excel
+                </Button>
+              </Col>
+            </Row>
+          </Card.Title>
+          <Row>
+            <Col xs={12}>
+              <DataTable
+                dense
+                noHeader
+                defaultSortFieldId={'cliente'}
+                defaultSortAsc={true}
+                fixedHeaderScrollHeight="550px"
+                striped={true}
+                fixedHeader
+                /*                 paginationPerPage={10}
+                pagination */
+                highlightOnHover
+                columns={columnsConcepts}
+                data={Data}
+                pointerOnHover
+              />
+            </Col>
+          </Row>
+        </Card.Body>
+      </Card>
+    </div>
+  )
+}

src/Components/Login/login.tsx

@@ -14,6 +14,7 @@ import { MsgInformativo } from '../Utils/Toast/msgInformativo'
 import logo from '../../images/GEMCO_mini.png'
 import Dashboard from '../Dashboard/Dashboard'
 import { Nav } from 'react-bootstrap'
+import Info from '../../../package.json'
 
 export const Login: React.FC<{}> = () => {
   const dispatch = useDispatch()
@@ -132,6 +133,7 @@ export const Login: React.FC<{}> = () => {
                           login
                         </button>
                       </div>
+                      <div style={{textAlign:'right'}}>v{Info.version}</div>
                     </Form>
                   </Formik>
                 </div>

src/Components/Register/UserList/UserList.tsx

@@ -117,6 +117,21 @@ export const UserList: React.FC<IProps> = (props) => {
       ),
       sortable: true
     },
+    {
+      name: 'Departamento',
+      width: '250px',
+      cell: (row: IRegister) => (
+        <div
+          style={{ width: '100%' }}
+          onClick={() => {
+            props.GetUserInfo(row)
+          }}
+        >
+          {row.departamento}
+        </div>
+      ),
+      sortable: true
+    },
     {
       name: 'Estatus',
       width: '90px',
@@ -152,6 +167,10 @@ export const UserList: React.FC<IProps> = (props) => {
     return NoAsignado
   }
 
+  // getDepartamento = (Id: Number) => {
+
+  // }
+
   useEffect(() => {
     usuariosServices
       .getAllUsuarios()
@@ -166,6 +185,7 @@ export const UserList: React.FC<IProps> = (props) => {
       .then((response) => {
         setDataPerfiles(response.data)
       })
+
       .catch((e: Error) => {
         console.log(e)
       })

src/Components/Register/register.tsx

@@ -18,6 +18,8 @@ import {
 import { useEffect, useState } from 'react'
 import IPerfilesMenu from '../../Interfaces/IPerfilesMenu'
 import { IPerfil } from '../../Interfaces/Catalogos/IPerfiles'
+// import { IDepartamento } from '../../Interfaces/Catalogos/IDepartamento'
+
 import PerfilesMenuServices from '../../Services/Catalogos/PerfilesMenu.Services'
 import ClientesServices from '../../Services/Catalogos/Clientes.Services'
 import usuariosServices from '../../Services/Catalogos/Usuarios.Services'
@@ -34,6 +36,7 @@ import DTOUsuariosShort from '../../DTO/DTOUsuariosShort'
 import DTOClonarUsuario from '../../DTO/DTOClonarUsuario'
 import { AdmonPerfiles } from './admonPerfiles/AdmonPerfiles'
 import { Form as FormCtrl } from 'react-bootstrap'
+import { Console } from 'console'
 
 interface IProps {}
 
@@ -92,6 +95,7 @@ export default function Register(props:IProps) {
   const [TokenAccesoM, setTokenAccesoM] = useState('')
   const [DeviceToken, setDeviceToken] = useState('')
   const [IdPerfil, setIdPerfil] = useState(0)
+  const [Departamento, setDepartamento] = useState('')
   const [user2Clone, setUser2Clone] = React.useState(0)
   const [perfiles, setPerfiles] = useState<IPerfil[]>([
     {
@@ -140,7 +144,8 @@ export default function Register(props:IProps) {
     codigoAccesoM: CodigoAccesoM,
     tokenAccesoM: TokenAccesoM,
     deviceToken: DeviceToken,
-    idPerfil: IdPerfil
+    idPerfil: IdPerfil,
+    departamento: Departamento
   }
 
   const initialValuesPerfiles: IPerfil = {
@@ -148,6 +153,11 @@ export default function Register(props:IProps) {
     perfil: ''
   }
 
+  // const initialValuesDepartamento: IDepartamento = {
+  //   id: Dept,
+  //   descripcion: ''
+  // }
+
   function getUsuario() {
     const item = localStorage.getItem('tokenInfo')
     let Usr = ''
@@ -367,7 +377,7 @@ export default function Register(props:IProps) {
   }
 
   const CloseModalPerfiles = (show: boolean): void => {
-    //setmodalAdmonPerfiles(false);
+    setmodalAdmonPerfiles(false)
   }
 
   function loadAllUserInfo(id: number) {}
@@ -381,6 +391,11 @@ export default function Register(props:IProps) {
     setCorreo(data.correo)
     setIdPerfil(data.idPerfil)
     loadAllUserInfo(data.id)
+    setTipoUsuario(data.tipoUsuario)
+
+    setDepartamento(data.departamento)
+
+    setDept(data.dept)
   }
 
   const clonaInformacion = (): void => {
@@ -389,8 +404,7 @@ export default function Register(props:IProps) {
       setToastPerfil(true)
       setmsgDialog('')
       return
-    } else 
+    } else setShowConfirmation(true)
-    setShowConfirmation(true)
   }
 
   const ChangeUser2Clone = (e: any): void => {
@@ -542,6 +556,7 @@ export default function Register(props:IProps) {
                                     name="nombre"
                                     className="form-control"
                                     placeholder="nombre"
+                                    // onChange={(e) => setNombre(e.target.value)}
                                   />
                                   {errors.nombre && touched.nombre ? (
                                     <div>
@@ -683,24 +698,40 @@ export default function Register(props:IProps) {
                                   </Field>
                                 </div>
                               </div>
+
                               <div className="col">
                                 <div className="form-group">
                                   <label
                                     className="text-info"
-                                    htmlFor="fechaModifico"
+                                    htmlFor="Departamento"
                                   >
-                                    Fecha modifico
+                                    Departamento
                                   </label>
-                                  <Field
+                                  <FormCtrl.Control
-                                    id="fechaModifico"
+                                    as="select"
-                                    name="fechaModifico"
+                                    value={Dept}
-                                    readOnly="readOnly"
+                                    onChange={
-                                    className="form-control"
+                                      (e) => setDept(parseInt(e.target.value))
-                                    placeholder="Fecha modifico"
+                                      // setDepartamento(e.target.value)
-                                    defaultValue={currentDate()}
+                                    }
-                                  />
+                                    className="form-select form-select-sm"
+                                    // style={{ width: '270px', height: '37px' }}
+                                  >
+                                    <option value="0">No Asignado</option>
+                                    <option value="1">Corresponsalias</option>
+                                    <option value="2">Contabilidad</option>
+                                    <option value="3">Sistemas</option>
+                                    <option value="4">Direccion</option>
+                                    <option value="5">Administracion</option>
+                                    <option value="6">Facturacion</option>
+                                    <option value="7">Clasificacion</option>
+                                    <option value="8">Trafico</option>
+                                    <option value="9">Operaciones</option>
+                                  </FormCtrl.Control>
                                 </div>
                               </div>
+
+                              {/* aquo termina el div  */}
                             </div>
                           </Accordion.Body>
                         </Accordion.Item>
@@ -770,6 +801,8 @@ export default function Register(props:IProps) {
                                     name="dept"
                                     className="form-control"
                                     placeholder="departamento"
+                                    // IsReadOnly="True"
+                                    disabled="diabled"
                                   />
                                 </div>
                               </div>

src/Components/Reportes/Direccion/RptPedimentosCruces01.tsx

@@ -0,0 +1,151 @@
+import { useEffect, useState } from 'react'
+import DTOPedimentosCruzadosListaCliente from '../../../DTO/Dashboard/DTOPedimentosCruzadosListaCliente'
+import DTOPedimentosCruzadosData from '../../../DTO/Dashboard/DTOPedimentosCruzadosData'
+import DashboardDS from '../../../Services/Dashboard/Dashboard.Direccion.Services'
+import { Card, Form } from 'react-bootstrap'
+import { Chart } from 'react-chartjs-2'
+
+export interface IRptPedimentosCruces01Props {}
+
+export default function RptPedimentosCruces01(
+  props: IRptPedimentosCruces01Props
+) {
+  const [Clientes, setClientes] = useState<DTOPedimentosCruzadosListaCliente[]>(
+    []
+  )
+  const [Data, setData] = useState<DTOPedimentosCruzadosData[]>([])
+  const [Cliente, setCliente] = useState('')
+  const [IDCliente, setIDCliente] = useState(0)
+  const [Pedimentos, setPedimentos] = useState<number[]>([])
+  const [Cruces, setCruces] = useState<number[]>([])
+  const [data6, setData6] = useState({
+    labels: ['January', 'February', 'March'],
+    datasets: [
+      {
+        type: 'line' as const,
+        label: 'Pedimentos',
+        borderColor: '#1850D0',
+        borderWidth: 2,
+        fill: false,
+        data: [1, 2, 3]
+      },
+      {
+        type: 'bar' as const,
+        label: 'Cruces',
+        backgroundColor: '#70D63E',
+        data: [8, 9, 10],
+        borderColor: 'white',
+        borderWidth: 2
+      }
+    ]
+  })
+
+  const options6 = {
+    indexAxis: 'x' as const,
+    elements: {
+      bar: {
+        borderWidth: 2
+      }
+    },
+    responsive: true
+  }
+
+  useEffect(() => {
+    DashboardDS.GETPedimentosCruzadosListaCliente()
+      .then((response) => {
+        setClientes(response.data)
+      })
+      .catch((e: Error) => {
+        return
+      })
+  }, [])
+
+  /*   useEffect(() => {
+    if (Clientes.length > 0) setCustomer(0)
+  }, [Clientes]) */
+
+  useEffect(() => {
+    DashboardDS.GETPedimentosCruzadosData(IDCliente)
+      .then((response) => {
+        setData(response.data)
+        let Pedimentos: number[] = []
+        let Cruces: number[] = []
+        let Categorias: string[] = []
+        let RGoogleChartData: Array<Array<string | number>> = []
+        RGoogleChartData.push(['Mes', 'Pedimentos', 'Cruces'])
+        response.data.forEach(function (item) {
+          Pedimentos.push(item.pedimentos)
+          Cruces.push(item.despachos)
+          Categorias.push(item.sMes)
+          RGoogleChartData.push([item.sMes, item.pedimentos, item.despachos])
+        })
+        setData6({
+          labels: Categorias,
+          datasets: [
+            {
+              type: 'line' as const,
+              label: 'Pedimentos',
+              borderColor: '#1850D0',
+              borderWidth: 2,
+              fill: false,
+              data: Pedimentos
+            },
+            {
+              type: 'bar' as const,
+              label: 'Cruces',
+              backgroundColor: '#70D63E',
+              data: Cruces,
+              borderColor: 'white',
+              borderWidth: 2
+            }
+          ]
+        })
+        var arrClientes = Clientes.filter((item) => {
+          return item.id == IDCliente
+        })
+        setCliente(arrClientes[0].razonSocial)
+      })
+      .catch((e: Error) => {
+        return
+      })
+  }, [IDCliente])
+
+  return (
+    <div>
+      <Card>
+        <Card.Body>
+          <Form.Control
+            as="select"
+            onChange={(e) => {
+              setIDCliente(parseInt(e.target.value))
+            }}
+            className="form-select form-select-sm"
+          >
+            <option value="0">Seleccion el cliente</option>
+            {Clientes
+              ? Clientes.map((c) => {
+                  return <option value={c.id}>{c.razonSocial}</option>
+                })
+              : null}
+          </Form.Control>
+        </Card.Body>
+      </Card>
+      <Card>
+        <Card.Body>
+          <Card.Title>
+            {Cliente}
+            <br />
+            <br />
+          </Card.Title>
+          <Chart
+            type="bar"
+            data={data6}
+            options={options6}
+            width="100%"
+            height="40%"
+          />
+        </Card.Body>
+      </Card>
+    </div>
+  )
+}

src/Components/Reportes/Direccion/RptPedimentosCruces02.tsx

@@ -0,0 +1,159 @@
+import { useEffect, useState } from 'react'
+import { Card, Form } from 'react-bootstrap'
+import DTOPedimentosCruzadosListaCliente from '../../../DTO/Dashboard/DTOPedimentosCruzadosListaCliente'
+import DTOPedimentosCruzadosData from '../../../DTO/Dashboard/DTOPedimentosCruzadosData'
+import DashboardDS from '../../../Services/Dashboard/Dashboard.Direccion.Services'
+import ReactApexChart from 'react-apexcharts'
+import { ApexOptions } from 'apexcharts'
+
+export interface IRtpPedimentosCruces02Props {}
+
+export default function RtpPedimentosCruces02(
+  props: IRtpPedimentosCruces02Props
+) {
+  const [Clientes, setClientes] = useState<DTOPedimentosCruzadosListaCliente[]>(
+    []
+  )
+  const [Data, setData] = useState<DTOPedimentosCruzadosData[]>([])
+  const [Cliente, setCliente] = useState('')
+  const [IDCliente, setIDCliente] = useState(0)
+  const [Pedimentos, setPedimentos] = useState<number[]>([])
+  const [Cruces, setCruces] = useState<number[]>([])
+  const [series, setSeries] = useState([
+    {
+      type: 'line', //render a line chart for this data
+      name: 'Pedimentos',
+      data: [19, 22, 20, 26]
+    },
+    {
+      type: 'column', //use column chart here.
+      name: 'Cruces',
+      data: [103, 105, 98, 83]
+    }
+  ])
+  const [options, setOptions] = useState<ApexOptions>({
+    xaxis: {
+      categories: ['2022', '20022', '2023', '2023']
+    },
+    chart: {
+      height: 100,
+      type: 'line',
+      zoom: {
+        enabled: false
+      }
+    }
+  })
+
+  useEffect(() => {
+    DashboardDS.GETPedimentosCruzadosListaCliente()
+      .then((response) => {
+        setClientes(response.data)
+      })
+      .catch((e: Error) => {
+        return
+      })
+  }, [])
+
+  useEffect(() => {
+    DashboardDS.GETPedimentosCruzadosData(IDCliente)
+      .then((response) => {
+        setData(response.data)
+        let Pedimentos: number[] = []
+        let Cruces: number[] = []
+        let Categorias: string[] = []
+        response.data.forEach(function (item) {
+          Pedimentos.push(item.pedimentos)
+          Cruces.push(item.despachos)
+          Categorias.push(item.sMes)
+        })
+        setSeries([
+          {
+            type: 'line', //render a line chart for this data
+            name: 'Pedimentos',
+            data: Pedimentos
+          },
+          {
+            type: 'column', //use column chart here.
+            name: 'Cruces',
+            data: Cruces
+          }
+        ])
+        setOptions({
+          xaxis: {
+            categories: Categorias
+          },
+          chart: {
+            height: 100,
+            type: 'line',
+            zoom: {
+              enabled: false
+            }
+          },
+          dataLabels: {
+            enabled: true,
+            dropShadow: {
+              enabled: true,
+              left: 2,
+              top: 2,
+              opacity: 0.5
+            }
+          },
+          grid: {
+            position: 'front',
+            borderColor: '#AAA',
+            strokeDashArray: 3
+          },
+          legend: {
+            show: true,
+            position: 'top'
+          }
+        })
+        var arrClientes = Clientes.filter((item) => {
+          return item.id == IDCliente
+        })
+        setCliente(arrClientes[0].razonSocial)
+      })
+      .catch((e: Error) => {
+        return
+      })
+  }, [IDCliente])
+
+  return (
+    <div>
+      <Card>
+        <Card.Body>
+          <Form.Control
+            as="select"
+            onChange={(e) => {
+              setIDCliente(parseInt(e.target.value))
+            }}
+            className="form-select form-select-sm"
+          >
+            <option value="0">Seleccion el cliente</option>
+            {Clientes
+              ? Clientes.map((c) => {
+                  return <option value={c.id}>{c.razonSocial}</option>
+                })
+              : null}
+          </Form.Control>
+        </Card.Body>
+      </Card>
+      <br />
+      <Card>
+        <Card.Body>
+          <Card.Title>
+            {Cliente}
+            <br />
+            <br />
+          </Card.Title>
+          <ReactApexChart
+            options={options}
+            series={series}
+            width="100%"
+            height="600px"
+          />
+        </Card.Body>
+      </Card>
+    </div>
+  )
+}

src/Components/Reportes/Direccion/RptPedimentosCruces03.tsx

@@ -0,0 +1,140 @@
+import { useEffect, useState } from 'react'
+import { Card, Form } from 'react-bootstrap'
+import DTOPedimentosCruzadosListaCliente from '../../../DTO/Dashboard/DTOPedimentosCruzadosListaCliente'
+import DTOPedimentosCruzadosData from '../../../DTO/Dashboard/DTOPedimentosCruzadosData'
+import DashboardDS from '../../../Services/Dashboard/Dashboard.Direccion.Services'
+import ReactApexChart from 'react-apexcharts'
+import { ApexOptions } from 'apexcharts'
+
+export interface IRptPedimentosCruces03Props {}
+
+export default function RptPedimentosCruces03(
+  props: IRptPedimentosCruces03Props
+) {
+  const [Clientes, setClientes] = useState<DTOPedimentosCruzadosListaCliente[]>(
+    []
+  )
+  const [Data, setData] = useState<DTOPedimentosCruzadosData[]>([])
+  const [Cliente, setCliente] = useState('')
+  const [IDCliente, setIDCliente] = useState(0)
+  const [Pedimentos, setPedimentos] = useState<number[]>([])
+  const [Cruces, setCruces] = useState<number[]>([])
+  const [series2, setSeries2] = useState([
+    {
+      name: 'series1',
+      data: [31, 40, 28, 51, 42, 109, 100]
+    },
+    {
+      name: 'series2',
+      data: [11, 32, 45, 32, 34, 52, 41]
+    }
+  ])
+  const [options2, setOptions2] = useState<ApexOptions>({
+    chart: {
+      height: 350,
+      type: 'area'
+    },
+    dataLabels: {
+      enabled: false
+    },
+    stroke: {
+      curve: 'smooth'
+    },
+    xaxis: {
+      categories: ['Ene', 'Feb', 'Mar', 'Abr', 'Marzo', 'Abr', 'May']
+    }
+  })
+
+  useEffect(() => {
+    DashboardDS.GETPedimentosCruzadosListaCliente()
+      .then((response) => {
+        setClientes(response.data)
+      })
+      .catch((e: Error) => {
+        return
+      })
+  }, [])
+
+  useEffect(() => {
+    DashboardDS.GETPedimentosCruzadosData(IDCliente)
+      .then((response) => {
+        setData(response.data)
+        let Pedimentos: number[] = []
+        let Cruces: number[] = []
+        let Categorias: string[] = []
+        response.data.forEach(function (item) {
+          Pedimentos.push(item.pedimentos)
+          Cruces.push(item.despachos)
+          Categorias.push(item.sMes)
+        })
+        setSeries2([
+            {
+              name: 'Pedimentos',
+              data: Pedimentos
+            },
+            {
+              name: 'Cruces',
+              data: Cruces
+            }
+          ])
+          setOptions2({
+            xaxis: {
+              categories: Categorias
+            },
+            chart: {
+              height: 100,
+              type: 'line',
+              zoom: {
+                enabled: false
+              }
+            }
+          })
+        var arrClientes = Clientes.filter((item) => {
+          return item.id == IDCliente
+        })
+        setCliente(arrClientes[0].razonSocial)
+      })
+      .catch((e: Error) => {
+        return
+      })
+  }, [IDCliente])
+
+  return (
+    <div>
+      <Card>
+        <Card.Body>
+          <Form.Control
+            as="select"
+            onChange={(e) => {
+              setIDCliente(parseInt(e.target.value))
+            }}
+            className="form-select form-select-sm"
+          >
+            <option value="0">Seleccion el cliente</option>
+            {Clientes
+              ? Clientes.map((c) => {
+                  return <option value={c.id}>{c.razonSocial}</option>
+                })
+              : null}
+          </Form.Control>
+        </Card.Body>
+      </Card>
+      <br />
+      <Card>
+        <Card.Body>
+          <Card.Title>
+            {Cliente}
+            <br />
+            <br />
+          </Card.Title>
+          <ReactApexChart
+            options={options2}
+            series={series2}
+            width="100%"
+            height="600px"
+          />
+        </Card.Body>
+      </Card>
+    </div>
+  )
+}

src/Components/Reportes/Direccion/RptPedimentosCruces04.tsx

@@ -0,0 +1,141 @@
+import { useEffect, useState } from 'react'
+import { Card, Form } from 'react-bootstrap'
+import DTOPedimentosCruzadosListaCliente from '../../../DTO/Dashboard/DTOPedimentosCruzadosListaCliente'
+import DTOPedimentosCruzadosData from '../../../DTO/Dashboard/DTOPedimentosCruzadosData'
+import DashboardDS from '../../../Services/Dashboard/Dashboard.Direccion.Services'
+import ReactApexChart from 'react-apexcharts'
+import { ApexOptions } from 'apexcharts'
+
+export interface IRptPedimentosCruces04Props {
+}
+
+export default function RptPedimentosCruces04 (props: IRptPedimentosCruces04Props) {
+    const [Clientes, setClientes] = useState<DTOPedimentosCruzadosListaCliente[]>(
+        []
+      )
+      const [Data, setData] = useState<DTOPedimentosCruzadosData[]>([])
+      const [Cliente, setCliente] = useState('')
+      const [IDCliente, setIDCliente] = useState(0)
+      const [Pedimentos, setPedimentos] = useState<number[]>([])
+      const [Cruces, setCruces] = useState<number[]>([])
+      const [series2, setSeries2] = useState([
+        {
+          name: 'series1',
+          data: [31, 40, 28, 51, 42, 109, 100]
+        },
+        {
+          name: 'series2',
+          data: [11, 32, 45, 32, 34, 52, 41]
+        }
+      ])
+      const [options2, setOptions2] = useState<ApexOptions>({
+        chart: {
+          height: 350,
+          type: 'area'
+        },
+        dataLabels: {
+          enabled: false
+        },
+        stroke: {
+          curve: 'smooth'
+        },
+        xaxis: {
+          categories: ['Ene', 'Feb', 'Mar', 'Abr', 'Marzo', 'Abr', 'May']
+        }
+      })
+    
+      useEffect(() => {
+        DashboardDS.GETPedimentosCruzadosListaCliente()
+          .then((response) => {
+            setClientes(response.data)
+          })
+          .catch((e: Error) => {
+            return
+          })
+      }, [])
+    
+      useEffect(() => {
+        DashboardDS.GETPedimentosCruzadosData(IDCliente)
+          .then((response) => {
+            setData(response.data)
+            let Pedimentos: number[] = []
+            let Cruces: number[] = []
+            let Categorias: string[] = []
+            response.data.forEach(function (item) {
+              Pedimentos.push(item.pedimentos)
+              Cruces.push(item.despachos)
+              Categorias.push(item.sMes)
+            })
+            setSeries2([
+                {
+                  name: 'Pedimentos',
+                  data: Pedimentos
+                },
+                {
+                  name: 'Cruces',
+                  data: Cruces
+                }
+              ])
+              setOptions2({
+                xaxis: {
+                  categories: Categorias
+                },
+                chart: {
+                  height: 100,
+                  type: 'line',
+                  zoom: {
+                    enabled: false
+                  }
+                }
+              })
+            var arrClientes = Clientes.filter((item) => {
+              return item.id == IDCliente
+            })
+            setCliente(arrClientes[0].razonSocial)
+          })
+          .catch((e: Error) => {
+            return
+          })
+      }, [IDCliente])
+    
+      return (
+        <div>
+          <Card>
+            <Card.Body>
+              <Form.Control
+                as="select"
+                onChange={(e) => {
+                  setIDCliente(parseInt(e.target.value))
+                }}
+                className="form-select form-select-sm"
+              >
+                <option value="0">Seleccion el cliente</option>
+                {Clientes
+                  ? Clientes.map((c) => {
+                      return <option value={c.id}>{c.razonSocial}</option>
+                    })
+                  : null}
+              </Form.Control>
+            </Card.Body>
+          </Card>
+          <br />
+          <Card>
+            <Card.Body>
+              <Card.Title>
+                {Cliente}
+                <br />
+                <br />
+              </Card.Title>
+              <ReactApexChart
+                options={options2}
+                series={series2}
+                width="100%"
+                height="600px" 
+                type="bar"
+              />
+            </Card.Body>
+          </Card>
+        </div>
+      )
+    }
+    

src/Components/Reportes/Direccion/RptPedimentosCruces05.tsx

@@ -0,0 +1,150 @@
+import { useEffect, useState } from 'react'
+import { Card, Form } from 'react-bootstrap'
+import DTOPedimentosCruzadosListaCliente from '../../../DTO/Dashboard/DTOPedimentosCruzadosListaCliente'
+import DTOPedimentosCruzadosData from '../../../DTO/Dashboard/DTOPedimentosCruzadosData'
+import DashboardDS from '../../../Services/Dashboard/Dashboard.Direccion.Services'
+import ReactApexChart from 'react-apexcharts'
+import { ApexOptions } from 'apexcharts'
+import { Bar, CartesianGrid, ComposedChart, Legend, Line, Tooltip, XAxis, YAxis } from 'recharts'
+
+export interface IRptPedimentosCruces05Props {
+}
+
+interface IRechartsData {
+    name: string
+    uv: number
+    pv: number
+    amt: number
+  }
+
+export default function RptPedimentosCruces05 (props: IRptPedimentosCruces05Props) {
+    const [Clientes, setClientes] = useState<DTOPedimentosCruzadosListaCliente[]>(
+        []
+      )
+      const [Data, setData] = useState<DTOPedimentosCruzadosData[]>([])
+      const [Cliente, setCliente] = useState('')
+      const [IDCliente, setIDCliente] = useState(0)
+      const [Pedimentos, setPedimentos] = useState<number[]>([])
+      const [Cruces, setCruces] = useState<number[]>([])
+      const [data4, setData4] = useState<IRechartsData[]>([
+        {
+          name: 'Page A',
+          uv: 4000,
+          pv: 2400,
+          amt: 2400
+        },
+        {
+          name: 'Page B',
+          uv: 3000,
+          pv: 1398,
+          amt: 2210
+        },
+        {
+          name: 'Page C',
+          uv: 2000,
+          pv: 9800,
+          amt: 2290
+        }
+      ])
+    
+      useEffect(() => {
+        DashboardDS.GETPedimentosCruzadosListaCliente()
+          .then((response) => {
+            setClientes(response.data)
+          })
+          .catch((e: Error) => {
+            return
+          })
+      }, [])
+    
+      useEffect(() => {
+        DashboardDS.GETPedimentosCruzadosData(IDCliente)
+          .then((response) => {
+            setData(response.data)
+            let Pedimentos: number[] = []
+            let Cruces: number[] = []
+            let Categorias: string[] = []
+            let RechartsData: IRechartsData[] = []
+            let RGoogleChartData: Array<Array<string | number>> = []
+            RGoogleChartData.push(['Mes', 'Pedimentos', 'Cruces'])
+            response.data.forEach(function (item) {
+              Pedimentos.push(item.pedimentos)
+              Cruces.push(item.despachos)
+              Categorias.push(item.sMes)
+              RechartsData.push({
+                name: item.sMes,
+                pv: item.pedimentos,
+                uv: item.despachos,
+                amt: 1
+              })
+              RGoogleChartData.push([item.sMes, item.pedimentos, item.despachos])
+            })
+            setData4(RechartsData)
+            var arrClientes = Clientes.filter((item) => {
+              return item.id == IDCliente
+            })
+            setCliente(arrClientes[0].razonSocial)
+          })
+          .catch((e: Error) => {
+            return
+          })
+      }, [IDCliente])
+    
+      return (
+        <div>
+          <Card>
+            <Card.Body>
+              <Form.Control
+                as="select"
+                onChange={(e) => {
+                  setIDCliente(parseInt(e.target.value))
+                }}
+                className="form-select form-select-sm"
+              >
+                <option value="0">Seleccion el cliente</option>
+                {Clientes
+                  ? Clientes.map((c) => {
+                      return <option value={c.id}>{c.razonSocial}</option>
+                    })
+                  : null}
+              </Form.Control>
+            </Card.Body>
+          </Card>
+          <br />
+          <Card>
+            <Card.Body>
+              <Card.Title>
+                {Cliente}
+                <br />
+                <br />
+              </Card.Title>
+              <ComposedChart
+              width={1500}
+              height={600}
+              data={data4}
+              margin={{
+                top: 20,
+                right: 20,
+                bottom: 20,
+                left: 20
+              }}
+            >
+              <CartesianGrid stroke="#f5f5f5" />
+              <XAxis dataKey="name" />
+              <YAxis />
+              <Tooltip />
+              <Legend />
+              <Bar dataKey="pv" barSize={20} fill="#1850D0" name="Pedimentos" />
+              <Line
+                type="monotone"
+                dataKey="uv"
+                stroke="#70D63E"
+                name="Cruces"
+              />
+            </ComposedChart>
+            </Card.Body>
+          </Card>
+        </div>
+      )
+    }
+    

src/Components/Reportes/Direccion/RptPedimentosCruces06.tsx

@@ -0,0 +1,127 @@
+import * as React from 'react'
+import { useEffect, useState } from 'react'
+import Chart from 'react-google-charts'
+import DTOPedimentosCruzadosListaCliente from '../../../DTO/Dashboard/DTOPedimentosCruzadosListaCliente'
+import DTOPedimentosCruzadosData from '../../../DTO/Dashboard/DTOPedimentosCruzadosData'
+import DashboardDS from '../../../Services/Dashboard/Dashboard.Direccion.Services'
+import { Card, Form } from 'react-bootstrap'
+
+export interface IRptPedimentosCruces06Props {}
+
+interface IRechartsData {
+  name: string
+  uv: number
+  pv: number
+  amt: number
+}
+
+export default function RptPedimentosCruces06(
+  props: IRptPedimentosCruces06Props
+) {
+  const [Clientes, setClientes] = useState<DTOPedimentosCruzadosListaCliente[]>(
+    []
+  )
+  const [Data, setData] = useState<DTOPedimentosCruzadosData[]>([])
+  const [Cliente, setCliente] = useState('')
+  const [IDCliente, setIDCliente] = useState(0)
+  const [Pedimentos, setPedimentos] = useState<number[]>([])
+  const [Cruces, setCruces] = useState<number[]>([])
+  const [data5, setData5] = useState([
+    ['Mes', 'Pedimentos', 'Cruces'],
+    ['2004/05', 165, 938],
+    ['2005/06', 135, 1120],
+    ['2006/07', 157, 1167],
+    ['2007/08', 139, 1110],
+    ['2008/09', 136, 691]
+  ])
+  const options5 = {
+    title: '',
+    vAxis: { title: '' },
+    hAxis: { title: 'Meses' },
+    seriesType: 'bars',
+    series: { 1: { type: 'line' } },
+    colors: ['#1850D0', '70D63E']
+  }
+
+  useEffect(() => {
+    DashboardDS.GETPedimentosCruzadosListaCliente()
+      .then((response) => {
+        setClientes(response.data)
+      })
+      .catch((e: Error) => {
+        return
+      })
+  }, [])
+
+  useEffect(() => {
+    DashboardDS.GETPedimentosCruzadosData(IDCliente)
+      .then((response) => {
+        setData(response.data)
+        let Pedimentos: number[] = []
+        let Cruces: number[] = []
+        let Categorias: string[] = []
+        let RechartsData: IRechartsData[] = []
+        let RGoogleChartData: Array<Array<string | number>> = []
+        RGoogleChartData.push(['Mes', 'Pedimentos', 'Cruces'])
+        response.data.forEach(function (item) {
+          Pedimentos.push(item.pedimentos)
+          Cruces.push(item.despachos)
+          Categorias.push(item.sMes)
+          RechartsData.push({
+            name: item.sMes,
+            pv: item.pedimentos,
+            uv: item.despachos,
+            amt: 1
+          })
+          RGoogleChartData.push([item.sMes, item.pedimentos, item.despachos])
+        })
+        setData5(RGoogleChartData)
+        var arrClientes = Clientes.filter((item) => {
+          return item.id == IDCliente
+        })
+        setCliente(arrClientes[0].razonSocial)
+      })
+      .catch((e: Error) => {
+        return
+      })
+  }, [IDCliente])
+  return (
+    <div>
+      <Card>
+        <Card.Body>
+          <Form.Control
+            as="select"
+            onChange={(e) => {
+              setIDCliente(parseInt(e.target.value))
+            }}
+            className="form-select form-select-sm"
+          >
+            <option value="0">Seleccion el cliente</option>
+            {Clientes
+              ? Clientes.map((c) => {
+                  return <option value={c.id}>{c.razonSocial}</option>
+                })
+              : null}
+          </Form.Control>
+        </Card.Body>
+      </Card>
+      <br />
+      <Card>
+        <Card.Body>
+          <Card.Title>
+            {Cliente}
+            <br />
+            <br />
+          </Card.Title>
+          <Chart
+            chartType="ComboChart"
+            width="100%"
+            height="600px"
+            data={data5}
+            options={options5}
+          />
+        </Card.Body>
+      </Card>
+    </div>
+  )
+}

src/Components/Reportes/RptArcosa.tsx

@@ -0,0 +1,401 @@
+import React, { FC, useEffect, useState } from 'react'
+// Bootstrap components
+import { Button, Card, Form } from 'react-bootstrap'
+import { BsSearch, BsFileEarmarkExcel } from 'react-icons/bs'
+// Interfaces
+import IClientes from '../../Interfaces/Catalogos/IClientes'
+import IArchivoElectronico from '../../Interfaces/IArchivoElectronico'
+// DTOs
+import DTOReporte from '../../DTO/DTOReporte'
+// Services
+import reportsDataService from '../../Services/Reportes/reportes.services'
+import ClientesDataService from '../../Services/Catalogos/Clientes.Services'
+
+import { useDispatch } from 'react-redux'
+import { setArchivoElectronico } from '../../store/features/Reportes/ArchivoElectronico'
+// GUI components
+import { MsgInformativo } from '../Utils/Toast/msgInformativo'
+import { AgGridReact } from 'ag-grid-react'
+import { RowClickedEvent } from 'ag-grid-community'
+import { TargetURL } from '../../Constants/TargetURL'
+//Other
+import moment from 'moment'
+import * as XLSX from 'xlsx'
+import IRptArcosa from '../../Interfaces/Reportes/IRptArcosa'
+interface IProps {}
+
+const RptArcosa: FC<IProps> = (props) => {
+  const [UserId, setUserId] = useState(() => {
+    const stickyValue = window.localStorage.getItem('UserId')
+    return stickyValue !== null ? JSON.parse(stickyValue) : 0
+  })
+  const [Data, setData] = useState<Array<IRptArcosa>>([])
+  const [filteredData, setFilteredData] = useState<Array<IRptArcosa>>([])
+  const [Inicio, setInicio] = useState(currentDate())
+  const [Fin, setFin] = useState(currentDate())
+  const [TipoOperacion, setTipoOperacion] = useState(1)
+  const [Cliente, setCliente] = useState(0)
+  const [Clientes, setClientes] = useState<Array<IClientes>>()
+  const [msgColor, setMsgColor] = React.useState('primary')
+  const [show, setShowMsg] = useState(false)
+  const [header, setHeader] = useState('')
+  const [msg, setMsg] = useState('')
+  const [filtro, setFiltro] = useState('')
+  const gridRef = React.useRef<any>(null)
+  const [columnaVerPDF, setcolumnaVerPDF] = useState(false)
+  const dispatch = useDispatch()
+  const [columnDefs] = useState([
+    {
+      field: 'patente',
+      headerName: 'Patente',
+      sortable: true,
+      filter: true,
+      width: 150
+    },
+    {
+      field: 'pedimento',
+      headerName: 'Pedimento',
+      sortable: true,
+      filter: true,
+      width: 150
+    },
+    {
+      field: 'pagoPedimento',
+      headerName: 'PagoPedimento',
+      sortable: true,
+      filter: true,
+      width: 200
+    },
+    {
+      field: 'regimen',
+      headerName: 'Regimen',
+      sortable: true,
+      filter: true,
+      width: 150
+    },
+    {
+      field: 'valorDls',
+      headerName: 'ValorDls',
+      sortable: true,
+      filter: true,
+      width: 150
+    },
+
+    {
+      field: 'valorAduana',
+      headerName: 'ValorAduana',
+      sortable: true,
+      filter: true,
+      width: 150
+    },
+    {
+      field: 'aduana',
+      headerName: 'Aduana',
+      sortable: true,
+      filter: true,
+      width: 150
+    },
+    {
+      field: 'planta',
+      headerName: 'Planta',
+      sortable: true,
+      filter: true,
+      width: 150
+    },
+    {
+      field: 'dta',
+      headerName: 'DTA',
+      sortable: true,
+      filter: true,
+      width: 150
+    },
+    {
+      field: 'prev',
+      headerName: 'PREV',
+      sortable: true,
+      filter: true,
+      width: 150
+    },
+
+    {
+      field: 'iva',
+      headerName: 'IVA',
+      sortable: true,
+      filter: true,
+      width: 150
+    },
+    {
+      field: 'ivaprev',
+      headerName: 'IVAPREV',
+      sortable: true,
+      filter: true,
+      width: 150
+    },
+    {
+      field: 'igi',
+      headerName: 'IGI',
+      sortable: true,
+      filter: true,
+      width: 150
+    },
+    {
+      field: 'cc',
+      headerName: 'CC',
+      sortable: true,
+      filter: true,
+      width: 150
+    },
+    {
+      field: 'total',
+      headerName: 'Total',
+      sortable: true,
+      filter: true,
+      width: 150
+    }
+  ])
+
+  function currentDate(): string {
+    var today = new Date()
+    var dd = String(today.getDate()).padStart(2, '0')
+    var mm = String(today.getMonth() + 1).padStart(2, '0') //January is 0!
+    var yyyy = today.getFullYear()
+    return yyyy + '-' + mm + '-' + dd
+  }
+
+  const closeToast = (show: boolean): void => {
+    setShowMsg(false)
+  }
+
+  const generaReporte = () => {
+    if (Cliente === 0) {
+      setHeader('Error')
+      setMsg('Seleccion el cliente')
+      setShowMsg(true)
+      return
+    }
+    const data: DTOReporte = {
+      Inicio: moment(Inicio).format('YYYY-MM-DD'),
+      Fin: moment(Fin).format('YYYY-MM-DD'),
+      TipoOperacion: TipoOperacion,
+      NoCliente: Cliente,
+      IdUsuario: UserId
+    }
+    reportsDataService
+      .getRptArcosa(data)
+      .then((response) => {
+        setData(response.data)
+        setFilteredData(response.data)
+        setHeader('Informativo')
+        setMsg('Se encontro la siguiente informacion...')
+        setShowMsg(true)
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+  }
+
+  useEffect(() => {
+    ClientesDataService.getAllClientes(parseInt(UserId))
+      .then((response) => {
+        setClientes(response.data)
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+  }, [])
+
+  const downloadExcel = () => {
+    exportExcel(Data, 'Reporte Mensual Arcosa')
+  }
+
+  function exportExcel(jsonData: any[], fileName: string): void {
+    let Heading = [
+      [
+        'Patente',
+        'Pedimento',
+        'PagoPedimento',
+        'Regimen',
+        'ValorDls',
+        'ValorAduana',
+        'Aduana',
+        'Planta',
+        'DTA',
+        'PREV',
+        'IVA',
+        'IVAPREV',
+        'IGI',
+        'CC',
+        'Total'
+      ]
+    ]
+
+    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()
+    }
+  }
+
+  const filtraReporte = (e: any) => {
+    setFiltro(e.target.value)
+    gridRef.current.api.setQuickFilter(e.target.value)
+  }
+
+  async function getAE(e: any) {
+    if (e.column.colId === 'ver pedimento') {
+      setcolumnaVerPDF(true)
+    } else {
+      setcolumnaVerPDF(false)
+    }
+  }
+
+  const formatNumber = (number: string, digits: number) => {
+    number = parseFloat(number).toFixed(digits)
+    let value = Number(number).toLocaleString('en')
+    if (!value.indexOf('NaN')) return '0.00'
+    return value
+  }
+
+  return (
+    <div>
+      <Card>
+        <Card.Body>
+          <div className="row">
+            <div className="col-md-2">
+              <Form.Control
+                defaultValue={Inicio}
+                type="date"
+                name="Inicio"
+                placeholder="Inicio"
+                title="Inicio"
+                alt="Inicio"
+                data-date-format="YYYY-mm-dd"
+                onChange={(e) => setInicio(e.target.value)}
+                size="sm"
+              />
+            </div>
+            <div className="col-md-2">
+              <Form.Control
+                defaultValue={Fin}
+                type="date"
+                name="Fin"
+                placeholder="Fin"
+                title="Fin"
+                alt="Fin"
+                onChange={(e) => setFin(e.target.value)}
+                size="sm"
+              />
+            </div>
+            <div className="col-md-1 right-label">
+              <Form.Label size="sm">Tipo oper</Form.Label>
+            </div>
+            <div className="col-md-1">
+              <Form.Control
+                as="select"
+                onChange={(e) => setTipoOperacion(parseInt(e.target.value))}
+                className="form-select form-select-sm"
+              >
+                <option value="1">Importacion</option>
+                <option value="2">Exportacion</option>
+              </Form.Control>
+            </div>
+            <div className="col-md-1 right-label">
+              <Form.Label size="sm">Cliente</Form.Label>
+            </div>
+            <div className="col-md-4">
+              <Form.Control
+                as="select"
+                onChange={(e) => {
+                  setCliente(parseInt(e.target.value))
+                }}
+                className="form-select form-select-sm"
+              >
+                <option value="0">-SELECCIONE-</option>
+                {Clientes
+                  ? Clientes.map((c) => {
+                      return c.agrupado === 1 ? (
+                        <option value={c.sClave}>{c.sRazonSocial}</option>
+                      ) : (
+                        ''
+                      )
+                    })
+                  : null}
+              </Form.Control>
+            </div>
+            <div className="col-md-1 right-label">
+              <Button
+                variant="primary"
+                size="sm"
+                onClick={() => {
+                  generaReporte()
+                }}
+              >
+                <BsSearch />
+                &nbsp;Buscar
+              </Button>
+            </div>
+          </div>
+          <div className="row" style={{ paddingTop: 5 }}>
+            <div className="col">&nbsp;</div>
+            <div className="col-4">
+              <Form.Control
+                type="text"
+                size="sm"
+                placeholder="Search..."
+                onChange={(e) => {
+                  filtraReporte(e)
+                }}
+              />
+            </div>
+            <div className="col">
+              <Button
+                size="sm"
+                variant="success"
+                onClick={() => {
+                  downloadExcel()
+                }}
+              >
+                <BsFileEarmarkExcel />
+                &nbsp;Excel
+              </Button>
+            </div>
+          </div>
+        </Card.Body>
+      </Card>
+      <br />
+      <div className="ag-theme-alpine" style={{ height: 500, width: '100%' }}>
+        <AgGridReact
+          rowData={filteredData}
+          columnDefs={columnDefs}
+          pagination={true}
+          paginationAutoPageSize={true}
+          ref={gridRef}
+          rowSelection={'multiple'}
+          rowMultiSelectWithClick={true}
+          onCellClicked={(e) => getAE(e)}
+        ></AgGridReact>
+      </div>
+      <MsgInformativo
+        show={show}
+        msg={msg}
+        header={header}
+        msgColor={msgColor}
+        closeToast={closeToast}
+      />
+    </div>
+  )
+}
+export default RptArcosa

src/Components/Reportes/RptContsFacturasFraccion.tsx

@@ -0,0 +1,308 @@
+import React, { useEffect, useState } from 'react'
+//boostrap componentes
+import { Button, Card, Form } from 'react-bootstrap'
+import { BsSearch, BsFileEarmarkExcel } from 'react-icons/bs'
+
+//interfaces
+
+import { IRptFacturasFraccion } from '../../Interfaces/Reportes/IRptContsFacturasFraccion'
+
+import reportsDataService from '../../Services/Reportes/reportes.services'
+import { useDispatch } from 'react-redux'
+
+// Gui Components
+import { MsgInformativo } from '../Utils/Toast/msgInformativo'
+import { TargetURL } from '../../Constants/TargetURL'
+// import DataTable from 'react-data-table-component'
+import DataTable, { TableColumn } from 'react-data-table-component'
+
+//Other
+import moment from 'moment'
+import * as XLSX from 'xlsx'
+import { string } from 'yup'
+const URL = new TargetURL()
+
+export default function RptPFacturasFraccion() {
+  const [curURL, setCurURL] = useState(URL.get())
+  const [UserId, setUserId] = useState(() => {
+    const stickyValue = window.localStorage.getItem('UserId')
+    return stickyValue !== null ? JSON.parse(stickyValue) : 0
+  })
+  const [Data, setData] = useState<Array<IRptFacturasFraccion>>([])
+  const [filteredData, setFilteredData] = useState<Array<IRptFacturasFraccion>>(
+    []
+  )
+
+  const [msgColor, setMsgColor] = React.useState('primary')
+  const [show, setShowMsg] = useState(false)
+  const [header, setHeader] = useState('')
+  const [msg, setMsg] = useState('')
+  const [filtro, setFiltro] = useState('')
+  // const gridRef = React.useRef<any>(null)
+  const [referencia, setReferencia] = useState('')
+
+  const columnDefs = [
+    {
+      name: <div style={{ textAlign: 'center' }}>Factura</div>,
+      width: '220px',
+      selector: (row: IRptFacturasFraccion) => row.factura,
+      sortable: true,
+      filter: true,
+      center: true
+    },
+    {
+      name: <div style={{ textAlign: 'center' }}>Almacen</div>,
+      width: '100px',
+      selector: (row: IRptFacturasFraccion) => row.almacen,
+      sortable: true,
+      filter: true,
+      center: true
+    },
+    {
+      name: <div style={{ textAlign: 'center' }}>Orden</div>,
+      width: '100px',
+      selector: (row: IRptFacturasFraccion) => row.orden,
+      sortable: true,
+      filter: true,
+      center: true,
+      texAlign: 'center'
+    },
+    {
+      name: <div style={{ textAlign: 'center' }}>Parte</div>,
+      width: '150px',
+      selector: (row: IRptFacturasFraccion) => row.parte,
+      sortable: true,
+      filter: true,
+      center: true
+    },
+    {
+      name: <div style={{ textAlign: 'center' }}>Pais</div>,
+      width: '120px',
+      selector: (row: IRptFacturasFraccion) => row.pais,
+      sortable: true,
+      filter: true,
+      center: true
+    },
+    {
+      name: <div style={{ textAlign: 'center' }}>Fraccion Factura XML</div>,
+      width: '200px',
+      selector: (row: IRptFacturasFraccion) => row.fraccionFacturaXML,
+      sortable: true,
+      filter: true,
+      center: true
+    },
+    {
+      name: <div style={{ textAlign: 'center' }}>Fraccion GEMCO</div>,
+      width: '150px',
+      selector: (row: IRptFacturasFraccion) => row.fraccionGEMCO,
+      sortable: true,
+      filter: true,
+      center: true
+    },
+    {
+      name: <div style={{ textAlign: 'center' }}>Nico GEMCO</div>,
+      width: '120px',
+      selector: (row: IRptFacturasFraccion) => row.nicoGEMCO,
+      sortable: true,
+      filter: true,
+      center: true
+    }
+  ]
+
+  function currentDate(): string {
+    var today = new Date()
+    var dd = String(today.getDate()).padStart(2, '0')
+    var mm = String(today.getMonth() + 1).padStart(2, '0') //January is 0!
+    var yyyy = today.getFullYear()
+    return yyyy + '-' + mm + '-' + dd
+  }
+
+  const closeToast = (show: boolean): void => {
+    setShowMsg(false)
+  }
+
+  const generaReporte = () => {
+    if (!referencia) {
+      setHeader('Error')
+      setMsg('La referencia no puede estar vacía')
+      setShowMsg(true)
+      return
+    }
+    reportsDataService
+      .getRptContsFacturasFraccion(referencia) // Usa la variable 'referencia' en lugar de 'Referencia'
+      .then((response) => {
+        setData(response.data)
+        setFilteredData(response.data)
+
+        setHeader('Informativo')
+        setMsg('Se encontró la siguiente información...')
+        setShowMsg(true)
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrió un error: ' + e.message)
+        setShowMsg(true)
+        return
+      })
+  }
+
+  const downloadExcel = () => {
+    console.log(Data)
+    exportExcel(Data, 'Facturas Fraccion')
+  }
+
+  function exportExcel(
+    jsonData: IRptFacturasFraccion[],
+    fileName: string
+  ): void {
+    let Heading = [
+      [
+        'Factura',
+        'Almacen',
+        'Orden',
+        'Parte',
+        'Pais',
+        'Fraccion Factura XML',
+        'Fraccion GEMCO',
+        'Nico GEMCO'
+      ]
+    ]
+    /* jsonData.forEach(function (v) {
+        delete v.tipodeCambiodePedimento
+      }) */
+    /*     jsonData.map(function (item) {
+        delete item.tipodeCambiodePedimento
+        return item
+      }) */
+    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()
+    }
+  }
+
+  const filtraReporte = (e: any) => {
+    const searchText = e.target.value.toLowerCase()
+
+    setFiltro(searchText)
+
+    const filtered = Data.filter((item) => {
+      return (
+        (item.factura && item.factura.toLowerCase().includes(searchText)) ||
+        (item.almacen && item.almacen.toLowerCase().includes(searchText)) ||
+        (item.orden && item.orden.toString().includes(searchText)) ||
+        (item.parte && item.parte.toLowerCase().includes(searchText)) ||
+        (item.pais && item.pais.toLowerCase().includes(searchText)) ||
+        (item.fraccionFacturaXML &&
+          item.fraccionFacturaXML.toLowerCase().includes(searchText)) ||
+        (item.fraccionGEMCO &&
+          item.fraccionGEMCO.toLowerCase().includes(searchText)) ||
+        (item.nicoGEMCO && String(item.nicoGEMCO).includes(searchText))
+      )
+    })
+
+    // console.log('Filtered Data:', filtered)
+
+    setFilteredData(filtered)
+  }
+
+  return (
+    <div>
+      <Card>
+        <Card.Body>
+          <div className="row">
+            <div className="col-md-1" style={{ textAlign: 'right' }}>
+              <Form.Label size="sm">Referencia</Form.Label>
+            </div>
+            <div className="col-md-1" style={{ width: '130px' }}>
+              <Form.Control
+                type="text"
+                size="sm"
+                value={referencia}
+                onChange={(e) => setReferencia(e.target.value)}
+              />
+            </div>
+
+            <div className="col-md-1" style={{ width: '5px' }}></div>
+            <div className="col-md-4" style={{ width: '150px ' }}>
+              <Button
+                variant="primary"
+                size="sm"
+                onClick={() => {
+                  generaReporte()
+                }}
+              >
+                Buscar <BsSearch />
+              </Button>
+            </div>
+
+            <div className="col-md-1" style={{ width: '50px' }}></div>
+
+            <div className="col-md-4">
+              <Form.Control
+                type="text"
+                size="sm"
+                placeholder="Search..."
+                onChange={(e) => {
+                  filtraReporte(e)
+                }}
+              />
+            </div>
+            <div className="col-md-1" style={{ width: '260px' }}></div>
+            <div className="col-md-1">
+              <Button
+                size="sm"
+                variant="success"
+                onClick={() => {
+                  downloadExcel()
+                }}
+              >
+                Excel <BsFileEarmarkExcel />
+              </Button>
+            </div>
+          </div>
+        </Card.Body>
+      </Card>
+
+      <Card>
+        <Card.Body>
+          <div
+            className="ag-theme-alpine"
+            style={{ height: 400, width: '100%', textAlign: 'center' }}
+          >
+            <DataTable
+              columns={columnDefs}
+              data={filteredData}
+              defaultSortAsc={true}
+              striped={true}
+              dense={true}
+              paginationPerPage={10}
+              pagination
+              highlightOnHover
+              pointerOnHover
+              style={{ height: 300, width: '100%', textAlign: 'center' }}
+              noHeader // Para evitar que se muestre el encabezado del DataTable
+              onRowClicked={(row) => {
+                // Aquí puedes manejar el clic en una fila si es necesario
+              }}
+            />
+          </div>
+        </Card.Body>
+      </Card>
+      <MsgInformativo
+        show={show}
+        msg={msg}
+        header={header}
+        msgColor={msgColor}
+        closeToast={closeToast}
+      />
+    </div>
+  )
+}

src/Components/Reportes/RptFacturasPedimentosPagados.tsx

@@ -0,0 +1,322 @@
+import React, { FC, useEffect, useState } from 'react'
+// Bootstrap components
+import { Button, Card, Form } from 'react-bootstrap'
+import { BsSearch, BsFileEarmarkExcel } from 'react-icons/bs'
+// Interfaces
+import IClientes from '../../Interfaces/Catalogos/IClientes'
+import IArchivoElectronico from '../../Interfaces/IArchivoElectronico'
+// DTOs
+import DTOReporte from '../../DTO/DTOReporte'
+// Services
+import reportsDataService from '../../Services/Reportes/reportes.services'
+import ClientesDataService from '../../Services/Catalogos/Clientes.Services'
+
+import { useDispatch } from 'react-redux'
+import { setArchivoElectronico } from '../../store/features/Reportes/ArchivoElectronico'
+// GUI components
+import { MsgInformativo } from '../Utils/Toast/msgInformativo'
+import { AgGridReact } from 'ag-grid-react'
+import { RowClickedEvent } from 'ag-grid-community'
+import { TargetURL } from '../../Constants/TargetURL'
+//Other
+import moment from 'moment'
+import * as XLSX from 'xlsx'
+import IRptFacturasPedimentosPagados from '../../Interfaces/Reportes/IRptFacturasPedimentosPagados'
+interface IProps {}
+
+const RptFacturasPedimentosPagados: FC<IProps> = (props) => {
+  const [UserId, setUserId] = useState(() => {
+    const stickyValue = window.localStorage.getItem('UserId')
+    return stickyValue !== null ? JSON.parse(stickyValue) : 0
+  })
+  const [Data, setData] = useState<Array<IRptFacturasPedimentosPagados>>([])
+  const [filteredData, setFilteredData] = useState<
+    Array<IRptFacturasPedimentosPagados>
+  >([])
+  const [Inicio, setInicio] = useState(currentDate())
+  const [Fin, setFin] = useState(currentDate())
+  const [TipoOperacion, setTipoOperacion] = useState(1)
+  const [Cliente, setCliente] = useState(0)
+  const [Clientes, setClientes] = useState<Array<IClientes>>()
+  const [msgColor, setMsgColor] = React.useState('primary')
+  const [show, setShowMsg] = useState(false)
+  const [header, setHeader] = useState('')
+  const [msg, setMsg] = useState('')
+  const [filtro, setFiltro] = useState('')
+  const gridRef = React.useRef<any>(null)
+  const [columnaVerPDF, setcolumnaVerPDF] = useState(false)
+  const dispatch = useDispatch()
+  const [columnDefs] = useState([
+    {
+      field: 'referencia',
+      headerName: 'Referencia',
+      sortable: true,
+      filter: true,
+      width: 300
+    },
+    {
+      field: 'pedido',
+      headerName: 'Pedido',
+      sortable: true,
+      filter: true,
+      width: 300
+    },
+    {
+      field: 'factura',
+      headerName: 'Factura',
+      sortable: true,
+      filter: true,
+      width: 400
+    },
+    {
+      field: 'uuid',
+      headerName: 'UUID',
+      sortable: true,
+      filter: true,
+      width: 350
+    },
+    {
+      field: 'fecha',
+      headerName: 'Fecha',
+      sortable: true,
+      filter: true,
+      width: 300
+    },
+
+    {
+      field: 'razonSocial',
+      headerName: 'RazonSocial',
+      sortable: true,
+      filter: true,
+      width: 300
+    }
+  ])
+
+  function currentDate(): string {
+    var today = new Date()
+    var dd = String(today.getDate()).padStart(2, '0')
+    var mm = String(today.getMonth() + 1).padStart(2, '0') //January is 0!
+    var yyyy = today.getFullYear()
+    return yyyy + '-' + mm + '-' + dd
+  }
+
+  const closeToast = (show: boolean): void => {
+    setShowMsg(false)
+  }
+
+  const generaReporte = () => {
+    if (Cliente === 0) {
+      setHeader('Error')
+      setMsg('Seleccion el cliente')
+      setShowMsg(true)
+      return
+    }
+    const data: DTOReporte = {
+      Inicio: moment(Inicio).format('YYYY-MM-DD'),
+      Fin: moment(Fin).format('YYYY-MM-DD'),
+      TipoOperacion: TipoOperacion,
+      NoCliente: Cliente,
+      IdUsuario: UserId
+    }
+    reportsDataService
+      .getRptFacturasPedimentosPagados(data)
+      .then((response) => {
+        setData(response.data)
+        setFilteredData(response.data)
+        setHeader('Informativo')
+        setMsg('Se encontro la siguiente informacion...')
+        setShowMsg(true)
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+  }
+
+  useEffect(() => {
+    ClientesDataService.getAllClientes(parseInt(UserId))
+      .then((response) => {
+        setClientes(response.data)
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+  }, [])
+
+  const downloadExcel = () => {
+    exportExcel(Data, 'FacturasEnPedimentos')
+  }
+
+  function exportExcel(jsonData: any[], fileName: string): void {
+    let Heading = [
+      ['Referencia', 'Pedido', 'Factura', 'UUID', 'Fecha', 'RazonSocial']
+    ]
+    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()
+    }
+  }
+
+  const filtraReporte = (e: any) => {
+    setFiltro(e.target.value)
+    gridRef.current.api.setQuickFilter(e.target.value)
+  }
+
+  async function getAE(e: any) {
+    if (e.column.colId === 'ver pedimento') {
+      setcolumnaVerPDF(true)
+    } else {
+      setcolumnaVerPDF(false)
+    }
+  }
+
+  const formatNumber = (number: string, digits: number) => {
+    number = parseFloat(number).toFixed(digits)
+    let value = Number(number).toLocaleString('en')
+    if (!value.indexOf('NaN')) return '0.00'
+    return value
+  }
+
+  return (
+    <div>
+      <Card>
+        <Card.Body>
+          <div className="row">
+            <div className="col-md-2">
+              <Form.Control
+                defaultValue={Inicio}
+                type="date"
+                name="Inicio"
+                placeholder="Inicio"
+                title="Inicio"
+                alt="Inicio"
+                data-date-format="YYYY-mm-dd"
+                onChange={(e) => setInicio(e.target.value)}
+                size="sm"
+              />
+            </div>
+            <div className="col-md-2">
+              <Form.Control
+                defaultValue={Fin}
+                type="date"
+                name="Fin"
+                placeholder="Fin"
+                title="Fin"
+                alt="Fin"
+                onChange={(e) => setFin(e.target.value)}
+                size="sm"
+              />
+            </div>
+            <div className="col-md-1 right-label">
+              <Form.Label size="sm">Tipo oper</Form.Label>
+            </div>
+            <div className="col-md-1">
+              <Form.Control
+                as="select"
+                onChange={(e) => setTipoOperacion(parseInt(e.target.value))}
+                className="form-select form-select-sm"
+              >
+                <option value="1">Importacion</option>
+                <option value="2">Exportacion</option>
+              </Form.Control>
+            </div>
+            <div className="col-md-1 right-label">
+              <Form.Label size="sm">Cliente</Form.Label>
+            </div>
+            <div className="col-md-4">
+              <Form.Control
+                as="select"
+                onChange={(e) => {
+                  setCliente(parseInt(e.target.value))
+                }}
+                className="form-select form-select-sm"
+              >
+                <option value="0">-SELECCIONE-</option>
+                {Clientes
+                  ? Clientes.map((c) => {
+                      return c.agrupado === 1 ? (
+                        <option value={c.sClave}>{c.sRazonSocial}</option>
+                      ) : (
+                        ''
+                      )
+                    })
+                  : null}
+              </Form.Control>
+            </div>
+            <div className="col-md-1 right-label">
+              <Button
+                variant="primary"
+                size="sm"
+                onClick={() => {
+                  generaReporte()
+                }}
+              >
+                <BsSearch />
+                &nbsp;Buscar
+              </Button>
+            </div>
+          </div>
+          <div className="row" style={{ paddingTop: 5 }}>
+            <div className="col">&nbsp;</div>
+            <div className="col-4">
+              <Form.Control
+                type="text"
+                size="sm"
+                placeholder="Search..."
+                onChange={(e) => {
+                  filtraReporte(e)
+                }}
+              />
+            </div>
+            <div className="col">
+              <Button
+                size="sm"
+                variant="success"
+                onClick={() => {
+                  downloadExcel()
+                }}
+              >
+                <BsFileEarmarkExcel />
+                &nbsp;Excel
+              </Button>
+            </div>
+          </div>
+        </Card.Body>
+      </Card>
+      <br />
+      <div className="ag-theme-alpine" style={{ height: 500, width: '100%' }}>
+        <AgGridReact
+          rowData={filteredData}
+          columnDefs={columnDefs}
+          pagination={true}
+          paginationAutoPageSize={true}
+          ref={gridRef}
+          rowSelection={'multiple'}
+          rowMultiSelectWithClick={true}
+          onCellClicked={(e) => getAE(e)}
+        ></AgGridReact>
+      </div>
+      <MsgInformativo
+        show={show}
+        msg={msg}
+        header={header}
+        msgColor={msgColor}
+        closeToast={closeToast}
+      />
+    </div>
+  )
+}
+export default RptFacturasPedimentosPagados

src/Components/Reportes/RptMonitoreoFacturasPagadasAmazon.tsx

@@ -0,0 +1,250 @@
+import React, { useEffect, useState } from 'react'
+//boostrap componentes 
+import { Button, Card, Form } from 'react-bootstrap'
+import { BsSearch, BsFileEarmarkExcel } from 'react-icons/bs'
+//interfaces 
+
+
+import { IRptMonitoreoFacturaPagadasAmazon} from "../../Interfaces/Reportes/IRptMonitoreoFacturasPagadasAmazon";
+//dtos 
+
+//Services 
+import reportsDataService from '../../Services/Reportes/reportes.services'
+import ClientesDataService from '../../Services/Catalogos/Clientes.Services'
+
+import { useDispatch } from 'react-redux'
+
+// Gui Components
+import { MsgInformativo } from '../Utils/Toast/msgInformativo'
+import { AgGridReact } from 'ag-grid-react'
+import { TargetURL } from '../../Constants/TargetURL'
+//Other
+import moment from 'moment'
+import * as XLSX from 'xlsx'
+import DTORPTMonitorFacturasPagAmazon from '../../DTO/Utils/DTORPTMonitorFacturasPagAmazon';
+
+const URL = new TargetURL()
+
+export default function RptMonitoreoFacturasPagadasAmazon(){
+    
+    const [UserId, setUserId] = useState(() => {
+      const stickyValue = window.localStorage.getItem('UserId')
+      return stickyValue !== null ? JSON.parse(stickyValue) : 0
+    })
+    const [Data, setData] = useState<Array<IRptMonitoreoFacturaPagadasAmazon>>([])
+    const [filteredData, setFilteredData] = useState<Array<IRptMonitoreoFacturaPagadasAmazon>>([])
+    const [Inicio, setInicio] = useState(currentDate())
+    const [Fin, setFin] = useState(currentDate())
+    
+    // const [Clientes, setClientes] = useState<Array<IClientes>>()
+    const [msgColor, setMsgColor] = React.useState('primary')
+    const [show, setShowMsg] = useState(false)
+    const [header, setHeader] = useState('')
+    const [msg, setMsg] = useState('')
+    const [filtro, setFiltro] = useState('')
+    const gridRef = React.useRef<any>(null)
+    const [columnaVerPDF, setcolumnaVerPDF] = useState(false)
+    const dispatch = useDispatch()
+    const [columnDefs] = useState([
+      {field: 'referencia' , sortable: true , filter: true }, 
+      { field: 'factura', sortable: true, filter: true },
+      { field: 'clasificador', sortable: true, filter: true },
+      { field: 'fechaFactura', sortable: true, filter: true },
+      { field: 'fCreacion', sortable: true, filter: true },
+      { field: 'fechaPago', sortable:true,  filter: true  }, 
+      { field: 'cantidadDiasFactura', sortable:true,  filter: true  }, 
+      { field: 'cantidadDiasPago', sortable:true,  filter: true  }, 
+      { field : 'cantidadASIN' , sortable: true, filter: true   }, 
+      {field: 'cantFracIguales' , sortable: true, filter: true }, 
+      { field: 'cantFracDiferentes' ,  sortable: true, filter: true}, 
+      { field: 'cantidadSideline', sortable: true, filter: true }
+    ])
+  
+    function currentDate(): string {
+      var today = new Date()
+      var dd = String(today.getDate()).padStart(2, '0')
+      var mm = String(today.getMonth() + 1).padStart(2, '0') //January is 0!
+      var yyyy = today.getFullYear()
+      return yyyy + '-' + mm + '-' + dd
+    }
+  
+    const closeToast = (show: boolean): void => {
+      setShowMsg(false)
+    }
+  
+    const generaReporte = () => {
+      
+      const data: DTORPTMonitorFacturasPagAmazon = {
+        Inicio: moment(Inicio).format('YYYY-MM-DD'),
+        Fin: moment(Fin).format('YYYY-MM-DD')
+       
+       
+      }
+      reportsDataService
+        .getRptMonitoreoFacturasPagadasAmazon(data)
+        .then((response) => {
+          setData(response.data)
+          setFilteredData(response.data)
+          setHeader('Informativo')
+          setMsg('Se encontro la siguiente informacion...')
+          setShowMsg(true)
+        })
+        .catch((e: Error) => {
+          setHeader('Error')
+          setMsg('Ocurrio un error: ' + e)
+          setShowMsg(true)
+          return
+        })
+    }
+  
+    useEffect(() => {
+      ClientesDataService.getAllClientes(parseInt(UserId))
+        .then((response) => {
+          
+        })
+        .catch((e: Error) => {
+          setHeader('Error')
+          setMsg('Ocurrio un error: ' + e)
+          setShowMsg(true)
+          return
+        })
+    }, [])
+  
+    const downloadExcel = () => {
+      console.log(Data)
+      exportExcel(Data, 'MonitorFacturasPagadasAmazon')
+    }
+  
+    function exportExcel(jsonData: IRptMonitoreoFacturaPagadasAmazon[], fileName: string): void {
+      let Heading = [
+        [
+          'Referencia', 
+          'Factura',
+          'FechaFactura',
+          'Clasificador',
+          'FCreacion',
+          'FechaPago',
+          'CantidadDiasFactura',
+          'CantidadDiasPago',
+          'CantidadASIN', 
+          'CantidadFraccionesIguales', 
+          'CantidadFraccionesDiferentes', 
+          'CantidadSideline'
+
+          
+        ],
+      ]
+     
+      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()
+      }
+    }
+    const filtraReporte = (e: any) => {
+      setFiltro(e.target.value)
+      gridRef.current.api.setQuickFilter(e.target.value)
+    }
+  
+    const formatNumber = (number: string) => {
+      number = parseFloat(number).toFixed(2)
+      let value = Number(number).toLocaleString('en')
+      if (!value.indexOf('NaN')) return '0.00'
+      return value
+    }
+    return (
+      <div>
+        <Card>
+          <Card.Body>
+            <div className='row'>
+              <div className='col-md-2'>
+                <div className='d-flex align-items-center'>
+                  <Form.Label></Form.Label>
+                  <Form.Control
+                    defaultValue={Inicio}
+                    type='date'
+                    name='Inicio'
+                    placeholder='Inicio'
+                    title='Inicio'
+                    alt='Inicio'
+                    data-date-format='YYYY-mm-dd'
+                    onChange={(e) => setInicio(e.target.value)}
+                    size='sm'
+                  />
+                </div>
+              </div>
+              <div className='col-md-2'>
+                <div className='d-flex align-items-center'>
+                  <Form.Label></Form.Label>
+                  <Form.Control
+                    defaultValue={Fin}
+                    type='date'
+                    name='Fin'
+                    placeholder='Fin'
+                    title='Fin'
+                    alt='Fin'
+                    onChange={(e) => setFin(e.target.value)}
+                    size='sm'
+                  />
+                </div>
+              </div>
+              <div className='col-md-1 d-flex align-items-center'>
+                <Button
+                  variant='primary'
+                  size='sm'
+                  onClick={() => {
+                    generaReporte();
+                  }}
+                >
+                  <BsSearch /> Buscar
+                </Button>
+              </div>
+              <div className='col-md-3 d-flex align-items-center'>
+                <Form.Control
+                  type='text'
+                  size='sm'
+                  placeholder='Search...'
+                  onChange={(e) => {
+                    filtraReporte(e);
+                  }}
+                />
+              </div>
+              <div className='col-md-1 d-flex align-items-center'>
+                <Button
+                  size='sm'
+                  variant='success'
+                  onClick={() => {
+                    downloadExcel();
+                  }}
+                >
+                  <BsFileEarmarkExcel /> Excel
+                </Button>
+              </div>
+            </div>
+          </Card.Body>
+        </Card>
+        <br />
+        <div className='ag-theme-alpine' style={{ height: 500, width: '100%' }}>
+          <AgGridReact
+            rowData={filteredData}
+            columnDefs={columnDefs}
+            pagination={true}
+            paginationAutoPageSize={true}
+            ref={gridRef}
+            rowSelection={'multiple'}
+            rowMultiSelectWithClick={true}
+          ></AgGridReact>
+        </div>
+        <MsgInformativo show={show} msg={msg} header={header} msgColor={msgColor} closeToast={closeToast} />
+      </div>
+    );
+    
+   
+  }

src/Components/Reportes/RptOperacionesPagadasMisionFood.tsx

@@ -0,0 +1,409 @@
+import React, { FC, useEffect, useState } from 'react'
+// Bootstrap components
+import { Button, Card, Form } from 'react-bootstrap'
+import { BsSearch, BsFileEarmarkExcel } from 'react-icons/bs'
+// Interfaces
+import IClientes from '../../Interfaces/Catalogos/IClientes'
+import IArchivoElectronico from '../../Interfaces/IArchivoElectronico'
+// DTOs
+import DTOReporte from '../../DTO/DTOReporte'
+// Services
+import reportsDataService from '../../Services/Reportes/reportes.services'
+import ClientesDataService from '../../Services/Catalogos/Clientes.Services'
+// Redux
+import { useDispatch } from 'react-redux'
+import { setArchivoElectronico } from '../../store/features/Reportes/ArchivoElectronico'
+// GUI components
+import { MsgInformativo } from '../Utils/Toast/msgInformativo'
+import { AgGridReact } from 'ag-grid-react'
+import { RowClickedEvent } from 'ag-grid-community'
+import { TargetURL } from '../../Constants/TargetURL'
+//Other
+import moment from 'moment'
+import * as XLSX from 'xlsx'
+import IRptOperacionesPagadasMisionFood from '../../Interfaces/Reportes/IRptOperacionesPagadasMisionFood'
+
+interface IProps {}
+
+const RptOperacionesPagadasMisionFood: FC<IProps> = (props) => {
+  const [UserId, setUserId] = useState(() => {
+    const stickyValue = window.localStorage.getItem('UserId')
+    return stickyValue !== null ? JSON.parse(stickyValue) : 0
+  })
+  const [Data, setData] = useState<Array<IRptOperacionesPagadasMisionFood>>([])
+  const [filteredData, setFilteredData] = useState<
+    Array<IRptOperacionesPagadasMisionFood>
+  >([])
+  const [Inicio, setInicio] = useState(currentDate())
+  const [Fin, setFin] = useState(currentDate())
+  const [TipoOperacion, setTipoOperacion] = useState(1)
+  const [Cliente, setCliente] = useState(0)
+  const [Clientes, setClientes] = useState<Array<IClientes>>()
+  const [msgColor, setMsgColor] = React.useState('primary')
+  const [show, setShowMsg] = useState(false)
+  const [header, setHeader] = useState('')
+  const [msg, setMsg] = useState('')
+  const [filtro, setFiltro] = useState('')
+  const gridRef = React.useRef<any>(null)
+  const [columnaVerPDF, setcolumnaVerPDF] = useState(false)
+  const dispatch = useDispatch()
+  const [columnDefs] = useState([
+    {
+      field: 'tipoOperacion',
+      headerName: 'TipoOperacion',
+      sortable: true,
+      filter: true
+    },
+    {
+      field: 'sPedimento',
+      headerName: 'Pedimento',
+      sortable: true,
+      filter: true
+    },
+    {
+      field: 'uuid',
+      headerName: 'UUID',
+      sortable: true,
+      filter: true,
+      width: 400
+    },
+    {
+      field: 'folioFactura',
+      headerName: 'FolioFactura',
+      sortable: true,
+      filter: true,
+      width: 500
+    },
+    {
+      field: 'dFechaFirmaBanco',
+      headerName: 'FechaFirmaBanco',
+      sortable: true,
+      filter: true
+    },
+    {
+      field: 'sRazonSocial',
+      headerName: 'RazonSocial',
+      sortable: true,
+      filter: true
+    },
+    { field: 'sRFC', headerName: 'RFC', sortable: true, filter: true },
+    {
+      field: 'sReferencia',
+      headerName: 'Referencia',
+      sortable: true,
+      filter: true
+    },
+
+    {
+      field: 'sEDocument',
+      headerName: 'EDocument',
+      sortable: true,
+      filter: true
+    },
+    {
+      field: 'sHRazonSocial',
+      headerName: 'SHRazonSocial',
+      sortable: true,
+      filter: true,
+      width: 300
+    },
+    {
+      field: 'sHidentificadorProv',
+      headerName: 'HidentificadorProv',
+      sortable: true,
+      filter: true,
+      width: 300
+    },
+    {
+      field: 'aa',
+      headerName: 'AA',
+      sortable: true,
+      filter: true
+    },
+    {
+      field: 'rfcaa',
+      headerName: 'RFCAA',
+      sortable: true,
+      filter: true
+    },
+    {
+      field: 'incoterm',
+      headerName: 'Incoterm',
+      sortable: true,
+      filter: true
+    },
+    {
+      field: 'caja',
+      headerName: 'Caja',
+      sortable: true,
+      filter: true
+    },
+    {
+      field: 'acuceDoda',
+      headerName: 'AcuceDoda',
+      sortable: true,
+      filter: true
+    },
+    {
+      field: 'transportista',
+      headerName: 'Transportista',
+      sortable: true,
+      filter: true,
+      width: 300
+    },
+    {
+      field: 'edocument',
+      headerName: 'Edocument',
+      sortable: true,
+      filter: true,
+      width: 1000
+    }
+  ])
+
+  function currentDate(): string {
+    var today = new Date()
+    var dd = String(today.getDate()).padStart(2, '0')
+    var mm = String(today.getMonth() + 1).padStart(2, '0') //January is 0!
+    var yyyy = today.getFullYear()
+    return yyyy + '-' + mm + '-' + dd
+  }
+
+  const closeToast = (show: boolean): void => {
+    setShowMsg(false)
+  }
+
+  const generaReporte = () => {
+    if (Cliente === 0) {
+      setHeader('Error')
+      setMsg('Seleccion el cliente')
+      setShowMsg(true)
+      return
+    }
+    const data: DTOReporte = {
+      Inicio: moment(Inicio).format('YYYY-MM-DD'),
+      Fin: moment(Fin).format('YYYY-MM-DD'),
+      TipoOperacion: TipoOperacion,
+      NoCliente: Cliente,
+      IdUsuario: UserId
+    }
+    reportsDataService
+      .getRptOPeracionesPagadasMisionFood(data)
+      .then((response) => {
+        setData(response.data)
+        setFilteredData(response.data)
+        setHeader('Informativo')
+        setMsg('Se encontro la siguiente informacion...')
+        setShowMsg(true)
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+  }
+
+  useEffect(() => {
+    ClientesDataService.getAllClientes(parseInt(UserId))
+      .then((response) => {
+        setClientes(response.data)
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+  }, [])
+
+  const downloadExcel = () => {
+    exportExcel(Data, 'OperacionesPagadasMissionFood')
+  }
+
+  function exportExcel(jsonData: any[], fileName: string): void {
+    let Heading = [
+      [
+        'TipoOperacion',
+        'Pedimento',
+        'UUID',
+        'FolioFactura',
+        'FechaFirmaBanco',
+        'RazonSocial',
+        'RFC',
+        'Referencia',
+        'EDocument',
+        'HRazonSocial',
+        'HidentificadorProv',
+        'AA',
+        'RFCAA',
+        'Incoterm',
+        'Caja',
+        'AcuceDoda',
+        'Transportista',
+        'Edocument'
+      ]
+    ]
+    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()
+    }
+  }
+
+  const filtraReporte = (e: any) => {
+    setFiltro(e.target.value)
+    gridRef.current.api.setQuickFilter(e.target.value)
+  }
+
+  async function getAE(e: any) {
+    if (e.column.colId === 'ver pedimento') {
+      setcolumnaVerPDF(true)
+    } else {
+      setcolumnaVerPDF(false)
+    }
+  }
+
+  const formatNumber = (number: string, digits: number) => {
+    number = parseFloat(number).toFixed(digits)
+    let value = Number(number).toLocaleString('en')
+    if (!value.indexOf('NaN')) return '0.00'
+    return value
+  }
+
+  return (
+    <div>
+      <Card>
+        <Card.Body>
+          <div className="row">
+            <div className="col-md-2">
+              <Form.Control
+                defaultValue={Inicio}
+                type="date"
+                name="Inicio"
+                placeholder="Inicio"
+                title="Inicio"
+                alt="Inicio"
+                data-date-format="YYYY-mm-dd"
+                onChange={(e) => setInicio(e.target.value)}
+                size="sm"
+              />
+            </div>
+            <div className="col-md-2">
+              <Form.Control
+                defaultValue={Fin}
+                type="date"
+                name="Fin"
+                placeholder="Fin"
+                title="Fin"
+                alt="Fin"
+                onChange={(e) => setFin(e.target.value)}
+                size="sm"
+              />
+            </div>
+            <div className="col-md-1 right-label">
+              <Form.Label size="sm">Tipo oper</Form.Label>
+            </div>
+            <div className="col-md-1">
+              <Form.Control
+                as="select"
+                onChange={(e) => setTipoOperacion(parseInt(e.target.value))}
+                className="form-select form-select-sm"
+              >
+                <option value="1">Importacion</option>
+                <option value="2">Exportacion</option>
+              </Form.Control>
+            </div>
+            <div className="col-md-1 right-label">
+              <Form.Label size="sm">Cliente</Form.Label>
+            </div>
+            <div className="col-md-4">
+              <Form.Control
+                as="select"
+                onChange={(e) => {
+                  setCliente(parseInt(e.target.value))
+                }}
+                className="form-select form-select-sm"
+              >
+                <option value="0">-SELECCIONE-</option>
+                {Clientes
+                  ? Clientes.map((c) => {
+                      return c.agrupado === 1 ? (
+                        <option value={c.sClave}>{c.sRazonSocial}</option>
+                      ) : (
+                        ''
+                      )
+                    })
+                  : null}
+              </Form.Control>
+            </div>
+            <div className="col-md-1 right-label">
+              <Button
+                variant="primary"
+                size="sm"
+                onClick={() => {
+                  generaReporte()
+                }}
+              >
+                <BsSearch />
+                &nbsp;Buscar
+              </Button>
+            </div>
+          </div>
+          <div className="row" style={{ paddingTop: 5 }}>
+            <div className="col">&nbsp;</div>
+            <div className="col-4">
+              <Form.Control
+                type="text"
+                size="sm"
+                placeholder="Search..."
+                onChange={(e) => {
+                  filtraReporte(e)
+                }}
+              />
+            </div>
+            <div className="col">
+              <Button
+                size="sm"
+                variant="success"
+                onClick={() => {
+                  downloadExcel()
+                }}
+              >
+                <BsFileEarmarkExcel />
+                &nbsp;Excel
+              </Button>
+            </div>
+          </div>
+        </Card.Body>
+      </Card>
+      <br />
+      <div className="ag-theme-alpine" style={{ height: 500, width: '100%' }}>
+        <AgGridReact
+          rowData={filteredData}
+          columnDefs={columnDefs}
+          pagination={true}
+          paginationAutoPageSize={true}
+          ref={gridRef}
+          rowSelection={'multiple'}
+          rowMultiSelectWithClick={true}
+          onCellClicked={(e) => getAE(e)}
+        ></AgGridReact>
+      </div>
+      <MsgInformativo
+        show={show}
+        msg={msg}
+        header={header}
+        msgColor={msgColor}
+        closeToast={closeToast}
+      />
+    </div>
+  )
+}
+export default RptOperacionesPagadasMisionFood

src/Components/Reportes/RptPedimentosPagadosFacturasCruzadas.tsx

@@ -0,0 +1,417 @@
+import React, { useEffect, useState } from 'react'
+//boostrap componentes
+import { Button, Card, Form } from 'react-bootstrap'
+import { BsCloudDownload, BsSearch, BsFileEarmarkExcel } from 'react-icons/bs'
+//interfaces
+import IClientes from '../../Interfaces/Catalogos/IClientes'
+import IArchivoElectronico from '../../Interfaces/IArchivoElectronico'
+import { IRptPedimentosPagadosFacturasCruzadas } from '../../Interfaces/Reportes/IRptPedimentosPagadosFacturasCruzadas'
+//dtos
+import DTOgetThesePedimentos from '../../DTO/DTOgetThesePedimentos'
+import DTOReporte from '../../DTO/DTOReporte'
+//Services
+import reportsDataService from '../../Services/Reportes/reportes.services'
+import ClientesDataService from '../../Services/Catalogos/Clientes.Services'
+import AEOServices from '../../Services/Catalogos/ArchivoElectronico.Services'
+import { useDispatch } from 'react-redux'
+import { setArchivoElectronico } from '../../store/features/Reportes/ArchivoElectronico'
+// Gui Components
+import { MsgInformativo } from '../Utils/Toast/msgInformativo'
+import { AgGridReact } from 'ag-grid-react'
+import { verPDF } from './customCells/verPDF'
+import { RowClickedEvent } from 'ag-grid-community'
+import { TargetURL } from '../../Constants/TargetURL'
+//Other
+import moment from 'moment'
+import * as XLSX from 'xlsx'
+const URL = new TargetURL()
+
+export default function RptPedimentosPagadosFacturasCruzadas() {
+  const [curURL, setCurURL] = useState(URL.get())
+  const [UserId, setUserId] = useState(() => {
+    const stickyValue = window.localStorage.getItem('UserId')
+    return stickyValue !== null ? JSON.parse(stickyValue) : 0
+  })
+  const [Data, setData] = useState<
+    Array<IRptPedimentosPagadosFacturasCruzadas>
+  >([])
+  const [filteredData, setFilteredData] = useState<
+    Array<IRptPedimentosPagadosFacturasCruzadas>
+  >([])
+  const [Inicio, setInicio] = useState(currentDate())
+  const [Fin, setFin] = useState(currentDate())
+  const [TipoOperacion, setTipoOperacion] = useState(1)
+  const [Cliente, setCliente] = useState(0)
+  const [Clientes, setClientes] = useState<Array<IClientes>>()
+  const [msgColor, setMsgColor] = React.useState('primary')
+  const [show, setShowMsg] = useState(false)
+  const [header, setHeader] = useState('')
+  const [msg, setMsg] = useState('')
+  const [filtro, setFiltro] = useState('')
+  const gridRef = React.useRef<any>(null)
+  const [columnaVerPDF, setcolumnaVerPDF] = useState(false)
+  const dispatch = useDispatch()
+  const [columnDefs] = useState([
+    { field: 'referencia', sortable: true, filter: true },
+
+    { field: 'pedimento', sortable: true, filter: true },
+    { field: 'clave', sortable: true, filter: true },
+    { field: 'fechaFirmaBanco', sortable: true, filter: true },
+    { field: 'tipoCambio', sortable: true, filter: true },
+    { field: 'pesoBruto', sortable: true, filter: true },
+    { field: 'paisVendedor', sortable: true, filter: true },
+    { field: 'paisOrigen', sortable: true, filter: true },
+    { field: 'numFacturas', sortable: true, filter: true },
+    { field: 'factura', sortable: true, filter: true },
+    { field: 'valorFactura', sortable: true, filter: true },
+    { field: 'fraccion', sortable: true, filter: true },
+    { field: 'descripcion', sortable: true, filter: true },
+    { field: 'nClave', sortable: true, filter: true },
+    { field: 'cantFacturas', sortable: true, filter: true },
+    {
+      field: 'valorAduana',
+      sortable: true,
+      filter: true,
+      cellRenderer: (params: any) => {
+        return params.value
+      }
+    },
+    { field: 'incrementables', sortable: true, filter: true },
+    { field: 'adValorem', sortable: true, filter: true },
+    { field: 'dta', sortable: true, filter: true },
+    { field: 'iva', sortable: true, filter: true },
+    { field: 'efectivo', sortable: true, filter: true },
+    { field: 'total', sortable: true, filter: true },
+    { field: 'destino', sortable: true, filter: true },
+    { field: 'cruce', sortable: true, filter: true },
+    { field: 'remite', sortable: true, filter: true },
+    { field: 'caja', sortable: true, filter: true },
+    { field: 'valorComercial', sortable: true, filter: true },
+    { field: 'incoterm', sortable: true, filter: true }
+  ])
+
+  function currentDate(): string {
+    var today = new Date()
+    var dd = String(today.getDate()).padStart(2, '0')
+    var mm = String(today.getMonth() + 1).padStart(2, '0') //January is 0!
+    var yyyy = today.getFullYear()
+    return yyyy + '-' + mm + '-' + dd
+  }
+
+  const closeToast = (show: boolean): void => {
+    setShowMsg(false)
+  }
+
+  const generaReporte = () => {
+    if (Cliente === 0) {
+      setHeader('Error')
+      setMsg('Seleccion el cliente')
+      setShowMsg(true)
+      return
+    }
+    const data: DTOReporte = {
+      Inicio: moment(Inicio).format('YYYY-MM-DD'),
+      Fin: moment(Fin).format('YYYY-MM-DD'),
+      TipoOperacion: TipoOperacion,
+      NoCliente: Cliente,
+      IdUsuario: UserId
+    }
+    reportsDataService
+      .getRptPedimentosPagadosFacturasCruzadas(data)
+      .then((response) => {
+        setData(response.data)
+        setFilteredData(response.data)
+        setHeader('Informativo')
+        setMsg('Se encontro la siguiente informacion...')
+        setShowMsg(true)
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+  }
+
+  useEffect(() => {
+    ClientesDataService.getAllClientes(parseInt(UserId))
+      .then((response) => {
+        setClientes(response.data)
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+  }, [])
+
+  const downloadExcel = () => {
+    console.log(Data)
+    exportExcel(Data, 'Pedimentos Pagados')
+  }
+
+  function exportExcel(
+    jsonData: IRptPedimentosPagadosFacturasCruzadas[],
+    fileName: string
+  ): void {
+    let Heading = [
+      [
+        'Referencia',
+        'Pedimento',
+        'Clave',
+        'FechaFirmaBanco',
+        'TipoCambio',
+        'PesoBruto',
+        'PaisVendedor',
+        'PaisOrigen',
+        'NumFacturas',
+        'Factura',
+        'ValorFactura',
+        'Fraccion',
+        'Descripcion',
+        'nClaves',
+        'cantFacturas',
+        'ValorAduana',
+        'Incrementables',
+        'Advalorem',
+        'Dta',
+        'Iva',
+        'Efectivo',
+        'Total',
+        'Destino',
+        'Cruce',
+        'Remite',
+        'Caja',
+        'ValorComercial',
+        'Inconterm'
+      ]
+    ]
+    /* jsonData.forEach(function (v) {
+        delete v.tipodeCambiodePedimento
+      }) */
+    /*     jsonData.map(function (item) {
+        delete item.tipodeCambiodePedimento
+        return item
+      }) */
+    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()
+    }
+  }
+
+  const filtraReporte = (e: any) => {
+    setFiltro(e.target.value)
+    gridRef.current.api.setQuickFilter(e.target.value)
+  }
+
+  function getParams(e: RowClickedEvent) {
+    const data: IArchivoElectronico = {
+      Referencia: e.data.referencia,
+      PedimentoLargo: '',
+      NoCliente: Cliente,
+      IdUsuario: 0,
+      Archivo: ''
+    }
+    dispatch(setArchivoElectronico(data))
+    if (columnaVerPDF) {
+      let P: string = e.data.pedimento
+      P = P.substring(6)
+      P = P.replace(' ', e.data.aduanaSeccionEntrada)
+      window.open(
+        `${curURL}/ArchivoElectronico/getFile?Referencia=${e.data.referencia}&PedimentoLargo=${P}&Nocliente=${Cliente}&IdUsuario=${UserId}`
+      )
+    }
+  }
+
+  const downloadPDFs = () => {
+    if (Cliente === 0) {
+      setMsg('Seleccione el cliente')
+      setHeader('Para poder continuar, favor de: ')
+      setShowMsg(true)
+    }
+    let selectedNodes = gridRef.current.api.getSelectedNodes()
+    let selectedData = selectedNodes.map((node: any) => node.data)
+    interface IPedimentos {
+      pedimento: string
+    }
+    const Pedimentos = selectedData.map((item: IPedimentos) => item.pedimento)
+    const data: DTOgetThesePedimentos = {
+      Inicio: Inicio,
+      Fin: Fin,
+      NoCliente: Cliente,
+      IdUsuario: UserId,
+      TipoOperacion: TipoOperacion,
+      Pedimentos: Pedimentos
+    }
+    AEOServices.getThesePDFs(data)
+      .then((response: any) => {
+        const url = window.URL.createObjectURL(new Blob([response.data]))
+        const link = document.createElement('a')
+        link.href = url
+        link.setAttribute('download', 'Pedimentos.zip')
+        document.body.appendChild(link)
+        link.click()
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+  }
+
+  async function getAE(e: any) {
+    if (e.column.colId === 'ver pedimento') {
+      setcolumnaVerPDF(true)
+    } else {
+      setcolumnaVerPDF(false)
+    }
+  }
+
+  const formatNumber = (number: string) => {
+    number = parseFloat(number).toFixed(2)
+    let value = Number(number).toLocaleString('en')
+    if (!value.indexOf('NaN')) return '0.00'
+    return value
+  }
+
+  return (
+    <div>
+      <Card>
+        <Card.Body>
+          <div className="row">
+            <div className="col-md-2">
+              <Form.Control
+                defaultValue={Inicio}
+                type="date"
+                name="Inicio"
+                placeholder="Inicio"
+                title="Inicio"
+                alt="Inicio"
+                data-date-format="YYYY-mm-dd"
+                onChange={(e) => setInicio(e.target.value)}
+                size="sm"
+              />
+            </div>
+            <div className="col-md-2">
+              <Form.Control
+                defaultValue={Fin}
+                type="date"
+                name="Fin"
+                placeholder="Fin"
+                title="Fin"
+                alt="Fin"
+                onChange={(e) => setFin(e.target.value)}
+                size="sm"
+              />
+            </div>
+            <div className="col-md-1 right-label">
+              <Form.Label size="sm">Tipo oper</Form.Label>
+            </div>
+            <div className="col-md-1">
+              <Form.Control
+                as="select"
+                onChange={(e) => setTipoOperacion(parseInt(e.target.value))}
+                className="form-select form-select-sm"
+              >
+                <option value="1">Importacion</option>
+                <option value="2">Exportacion</option>
+              </Form.Control>
+            </div>
+            <div className="col-md-1 right-label">
+              <Form.Label size="sm">Cliente</Form.Label>
+            </div>
+            <div className="col-md-4">
+              <Form.Control
+                as="select"
+                onChange={(e) => {
+                  setCliente(parseInt(e.target.value))
+                }}
+                className="form-select form-select-sm"
+              >
+                <option value="0">-SELECCIONE-</option>
+                {Clientes
+                  ? Clientes.map((c) => {
+                      return c.agrupado === 1 ? (
+                        <option value={c.sClave}>{c.sRazonSocial}</option>
+                      ) : (
+                        ''
+                      )
+                    })
+                  : null}
+              </Form.Control>
+            </div>
+            <div className="col-md-1 right-label">
+              <Button
+                variant="primary"
+                size="sm"
+                onClick={() => {
+                  generaReporte()
+                }}
+              >
+                <BsSearch />
+                Buscar
+              </Button>
+            </div>
+          </div>
+          <div className="row" style={{ paddingTop: 5 }}>
+            <div className="col">&nbsp;</div>
+            <div className="col-4">
+              <Form.Control
+                type="text"
+                size="sm"
+                placeholder="Search..."
+                onChange={(e) => {
+                  filtraReporte(e)
+                }}
+              />
+            </div>
+            <div className="col">
+              <Button
+                size="sm"
+                variant="success"
+                onClick={() => {
+                  downloadExcel()
+                }}
+              >
+                <BsFileEarmarkExcel />
+                &nbsp;Excel
+              </Button>
+            </div>
+          </div>
+        </Card.Body>
+      </Card>
+      <br />
+      <div className="ag-theme-alpine" style={{ height: 500, width: '100%' }}>
+        {/* <button onClick={onButtonClick}>Get selected rows</button> */}
+        <AgGridReact
+          rowData={filteredData}
+          columnDefs={columnDefs}
+          pagination={true}
+          paginationAutoPageSize={true}
+          ref={gridRef}
+          rowSelection={'multiple'}
+          rowMultiSelectWithClick={true}
+          onCellClicked={(e) => getAE(e)}
+          onRowClicked={(e) => getParams(e)}
+        ></AgGridReact>
+      </div>
+      <MsgInformativo
+        show={show}
+        msg={msg}
+        header={header}
+        msgColor={msgColor}
+        closeToast={closeToast}
+      />
+    </div>
+  )
+}

src/Components/Utils/Toast/msgInformativo.tsx

@@ -15,7 +15,7 @@ interface IProps {
 export const MsgInformativo: FC<IProps> = (props) => {
   return (
     <div>
-      <ToastContainer position={'middle-center'}>
+      <ToastContainer position={'middle-center'} style={{zIndex:'99999 !important'}} >
         <Toast 
           show={props.show}
           delay={props.time}

src/DTO/Dashboard/DTOPedimentosCruzadosData.ts

@@ -0,0 +1,9 @@
+export default interface DTOPedimentosCruzadosData {
+  orden: number,
+  mes: number,
+  sMes: string,
+  anio: number,
+  operacion:  number,
+  despachos: number,
+  pedimentos: number 
+}

src/DTO/Dashboard/DTOPedimentosCruzadosListaCliente.ts

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

src/DTO/Utils/DTORPTMonitorFacturasPagAmazon.ts

@@ -0,0 +1,6 @@
+export default interface DTORPTMonitorFacturasPagAmazon {
+    Inicio: string;
+    Fin: string;
+    
+ }
+ 

src/Interfaces/Catalogos/ICatFraccionesVulnerables.ts

@@ -0,0 +1,6 @@
+export default interface ICatFraccionesVulnerables{
+    id : number , 
+    fraccion : number, 
+    nico : string, 
+    activo : number
+}

src/Interfaces/Dashboard/IDashboardPedimentosCruces.ts

@@ -0,0 +1,9 @@
+export default interface IDashboardPedimentosCruces {
+   orden: number,
+   mes: number,
+   smes: string,
+   anio: number,
+   operacion: number,
+   despachos: number,
+   pedimentos: number 
+}

src/Interfaces/Facturacion/Anexo/IConsolidadosSinFirmaBanco.ts

@@ -0,0 +1,7 @@
+export default interface IConsolidadosSinFirmaBanco{
+    referencia: string, 
+    fechaPago: string, 
+    firmaValidacion: string, 
+    firmaBanco: string
+
+}

src/Interfaces/IRegister.tsx

@@ -1,32 +1,33 @@
 export interface IRegister {
-  id: number;
+  id: number
-  usuario: string;
+  usuario: string
-  nombre: string;
+  nombre: string
-  contrasena: string;
+  contrasena: string
-  correo: string;
+  correo: string
-  tipoUsuario: number;
+  tipoUsuario: number
-  activo: number;
+  activo: number
-  fechaAlta: string;
+  fechaAlta: string
-  usuarioAlta: number;
+  usuarioAlta: number
-  fechaModifico: string;
+  fechaModifico: string
-  usuarioModifico: number;
+  usuarioModifico: number
-  fechaElimino: string;
+  fechaElimino: string
-  usuarioElimino: number;
+  usuarioElimino: number
-  motivoElimino: string;
+  motivoElimino: string
-  idModulo: number;
+  idModulo: number
-  dept: number;
+  dept: number
-  tmercancia: number;
+  tmercancia: number
-  fechaUltimaVisita: string;
+  fechaUltimaVisita: string
-  visitas: number;
+  visitas: number
-  internos: number;
+  internos: number
-  permisoEspecial: number;
+  permisoEspecial: number
-  estadoConfiguracion: number;
+  estadoConfiguracion: number
-  fechaValidacionConf: string;
+  fechaValidacionConf: string
-  realizoEncuesta: string;
+  realizoEncuesta: string
-  encuestaActiva: number;
+  encuestaActiva: number
-  fechaLimiteEncuesta: string;
+  fechaLimiteEncuesta: string
-  codigoAccesoM: string;
+  codigoAccesoM: string
-  tokenAccesoM: string;
+  tokenAccesoM: string
-  deviceToken: string;
+  deviceToken: string
-  idPerfil: number;
+  idPerfil: number
+  departamento: string
 }

src/Interfaces/Reportes/IRptArcosa.ts

@@ -0,0 +1,18 @@
+export default interface IRptArcosa{
+    Patente: string, 
+    Pedimento: string, 
+    PagoPedimento: string, 
+    Regimen: string, 
+    ValorDls: Number, 
+    ValorAduana: Number, 
+    Aduana: Number, 
+    Planta: string, 
+    DTA: string,
+    PREV : string 
+    IVA: string, 
+    IGI : string, 
+    CC: string, 
+    Total : number
+
+}
+

src/Interfaces/Reportes/IRptContsFacturasFraccion.ts

@@ -0,0 +1,16 @@
+export interface IRptFacturasFraccion{
+factura : string, 
+almacen : string, 
+orden : number ; 
+parte : string,  
+pais : string , 
+fraccionFacturaXML : string,  
+fraccionGEMCO : string, 
+nicoGEMCO : string; 
+
+
+ 
+
+
+
+} 

src/Interfaces/Reportes/IRptFacturasPedimentosPagados.ts

@@ -0,0 +1,10 @@
+export default interface IRptFacturasPedimentosPagados{
+
+Referencia: string 
+Pedido: string
+Factura: string
+UUID: string
+Fecha : string 
+RazonSocial : string
+
+}

src/Interfaces/Reportes/IRptMonitoreoFacturasPagadasAmazon.ts

@@ -0,0 +1,16 @@
+export  interface IRptMonitoreoFacturaPagadasAmazon{
+Referencia : string | null;
+Factura : string| null;
+FechaFactura : string  | null;
+Clasificador : string | null;
+FCreacion : string | null;
+FechaPago : string | null;
+CantidadDiasFacturas : number | null;
+CantidadDiasPago : number | null;
+CantidadASIN : number | null;
+CantFracIguales : number | null;
+CantFracDiferentes : number  | null;
+CantidadSightline : number | null;
+
+
+}

src/Interfaces/Reportes/IRptOperacionesPagadasMisionFood.ts

@@ -0,0 +1,24 @@
+export default interface IRptOperacionesPagadasMissionFood {
+
+TipoOperacion : string, 
+sPedimento: string, 
+UUID :string, 
+FolioFactura : string,
+dFechaFirmaBanco : string, 
+sRazonSocial : string, 
+sRFC : string, 
+sRefrencia : string, 
+sEDocument : string, 
+sHRazonSocial : string, 
+sHidentificadorProv : string, 
+AA : string, 
+RFCAA : string, 
+Incoterm : string, 
+Caja : string, 
+AcuceDoda : string, 
+Transportista : string, 
+Edocument : string
+}
+
+
+

src/Interfaces/Reportes/IRptPedimentosPagadosFacturasCruzadas.ts

@@ -0,0 +1,31 @@
+export interface IRptPedimentosPagadosFacturasCruzadas{
+    Referencia: string | null;
+    Pedimento: string | null;
+    Clave: string | null;
+    FechaFirmaBanco: string | null;
+    TipoCambio: number;
+    PesoBruto: number;
+    PaisVendedor: string | null;
+    PaisOrigen: string | null;
+    NumFacturas: number;
+    Factura?: string | null;
+    ValorFactura: number;
+    Fraccion: number;
+    Descripcion: string | null;
+    nClave: number;
+    CantFacturas: number;
+    ValorAduana: number;
+    Incrementables: number;
+    AdValorem: number;
+    DTA: number;
+    IVA: number;
+    Efectivo: number;
+    Total: number;
+    Destino: number;
+    Cruce: string | null;
+    Remite: string | null;
+    Caja: string | null;
+    ValorComercial: number;
+    Incoterm: string | null;
+
+}

src/Services/Catalogos/FraccionesVulnerables.ts

@@ -0,0 +1,27 @@
+import http from "../common/http-common";
+import ICatFraccionesVulnerables from '../../Interfaces/Catalogos/ICatFraccionesVulnerables'
+
+
+
+class FraccionesVulnerablesDataService {
+  
+
+  constructor()
+  {
+    type returnData = [ICatFraccionesVulnerables[]]
+  }
+
+  getAll() {
+    return http.get<ICatFraccionesVulnerables[]>(`/Catalogos/CatFraccionesVulnerables/getAll`);
+  }
+
+  Append(data: ICatFraccionesVulnerables) {
+    return http.post<ICatFraccionesVulnerables>(`/Catalogos/CatFraccionesVulnerables/Append`, data);
+  }
+  Delete(id: number) {
+    return http.delete<ICatFraccionesVulnerables>(`/Catalogos/CatFraccionesVulnerables/Delete/${id}`);
+  }
+
+  
+}
+export default new FraccionesVulnerablesDataService();

src/Services/Dashboard/Dashboard.Direccion.Services.ts

@@ -0,0 +1,13 @@
+import http from "../common/http-common";
+import DTOPedimentosCruzadosListaCliente from "../../DTO/Dashboard/DTOPedimentosCruzadosListaCliente";
+import DTOPedimentosCruzadosData from "../../DTO/Dashboard/DTOPedimentosCruzadosData";
+
+class Dashboard$Direccion$DataService {
+  GETPedimentosCruzadosData(id: number) {
+    return http.get<DTOPedimentosCruzadosData[]>(`/Direccion/GetPedimentosCrucesData?id=${id}`);
+  }
+  GETPedimentosCruzadosListaCliente() {
+    return http.get<DTOPedimentosCruzadosListaCliente[]>(`/Direccion/GetPedimentosCrucesListaCliente`);
+  }
+}
+export default new Dashboard$Direccion$DataService();

src/Services/Operaciones/Operaciones.Services.ts

@@ -1,6 +1,8 @@
 import http from '../common/http-common'
 import IConsolidadosSinCerrar from '../../Interfaces/Facturacion/Anexo/IConsolidadosSinCerrar'
 import DTOAnexoFacturacionMission from '../../DTO/Facturacion/Anexo/DTOAnexoFacturacionMission'
+import IConsolidadosSinFirmaBanco from '../../Interfaces/Facturacion/Anexo/IConsolidadosSinFirmaBanco'
+
 
 class OperacionesDataService {
   Get() {
@@ -8,5 +10,20 @@ class OperacionesDataService {
       `/AnexoFacturacion/GetRptConsolidadosSinCerrar`
     )
   }
+  
+  OperacionesSinFirmaBancoGet(){
+      return http.post<IConsolidadosSinFirmaBanco[]>(
+        `/AnexoFacturacion/GetRptConsolidadosSinFirmaBanco`
+      )
   }
+
+
+
+
+}
+
+
+
+
+
 export default new OperacionesDataService()

src/Services/Reportes/reportes.services.ts

@@ -1,53 +1,88 @@
-import http from "../common/http-common";
+import http from '../common/http-common'
-import { IRptPedimentosPagados } from "../../Interfaces/Reportes/IRptPedimentosPagados";
+import { IRptPedimentosPagados } from '../../Interfaces/Reportes/IRptPedimentosPagados'
-import { IRptPedimentosPagadosImpuestos } from "../../Interfaces/Reportes/IRptPedimentosPagadosImpuestos";
+import { IRptPedimentosPagadosImpuestos } from '../../Interfaces/Reportes/IRptPedimentosPagadosImpuestos'
-import { IRptDetalleAnexo24 } from "../../Interfaces/Reportes/RptDetalleAnexo24";
+import { IRptDetalleAnexo24 } from '../../Interfaces/Reportes/RptDetalleAnexo24'
-import { IRptOperacionesRemesa } from "../../Interfaces/Reportes/RptOperacionesRemesa";
+import { IRptOperacionesRemesa } from '../../Interfaces/Reportes/RptOperacionesRemesa'
-import IRptBattery from "../../Interfaces/Reportes/IRptBattery";
+import IRptBattery from '../../Interfaces/Reportes/IRptBattery'
-import DTOReporte from "../../DTO/DTOReporte";
+import DTOReporte from '../../DTO/DTOReporte'
-import DTOAEPeriodo from "../../DTO/DTOAEPeriodo";
+import DTOAEPeriodo from '../../DTO/DTOAEPeriodo'
-import IRpArchivoElectronicoOficial from "../../Interfaces/Reportes/IRptArchivoElectronicoOficial";
+import IRpArchivoElectronicoOficial from '../../Interfaces/Reportes/IRptArchivoElectronicoOficial'
-import IRptPedimentosConsolidados from "../../Interfaces/Reportes/IRptPedimentosConsolidados";
+import IRptPedimentosConsolidados from '../../Interfaces/Reportes/IRptPedimentosConsolidados'
-import DTOCorresponsalTrafico from "../../DTO/Corresponsales/DTOCorresponsalTrafico";
+import DTOCorresponsalTrafico from '../../DTO/Corresponsales/DTOCorresponsalTrafico'
-import DTORptCorresponsalesTraficos from "../../DTO/Corresponsales/DTORptCorresponsalesTraficos";
+import DTORptCorresponsalesTraficos from '../../DTO/Corresponsales/DTORptCorresponsalesTraficos'
-import ICorresponsalTrafico from "../../Interfaces/Corresponsales/ICorresponsalTrafico";
+import ICorresponsalTrafico from '../../Interfaces/Corresponsales/ICorresponsalTrafico'
-import IRptOperaciones from "../../Interfaces/Reportes/IRptOperaciones";
+import IRptOperaciones from '../../Interfaces/Reportes/IRptOperaciones'
-import IRptOperacionesConsolidadas from "../../Interfaces/Reportes/IRptOperacionesConsolidadas";
+import IRptOperacionesConsolidadas from '../../Interfaces/Reportes/IRptOperacionesConsolidadas'
-import IRptOperacionesDiarias from "../../Interfaces/Reportes/IRptOperacionesDiarias";
+import IRptOperacionesDiarias from '../../Interfaces/Reportes/IRptOperacionesDiarias'
-
+import { IRptPedimentosPagadosFacturasCruzadas } from '../../Interfaces/Reportes/IRptPedimentosPagadosFacturasCruzadas'
+import {  IRptMonitoreoFacturaPagadasAmazon  } from '../../Interfaces/Reportes/IRptMonitoreoFacturasPagadasAmazon'
+import DTORPTMonitorFacturasPagAmazon from '../../DTO/Utils/DTORPTMonitorFacturasPagAmazon'
+import { IRptFacturasFraccion } from '../../Interfaces/Reportes/IRptContsFacturasFraccion'
+import { data } from 'cypress/types/jquery'
+import IRptMision from '../../Interfaces/Reportes/IRptOperacionesPagadasMisionFood'
+import IRptOperacionesPagadasMissionFood from '../../Interfaces/Reportes/IRptOperacionesPagadasMisionFood'
+import IRptFacturasPedimentosPagados from '../../Interfaces/Reportes/IRptFacturasPedimentosPagados'
+import IRptArcosa from '../../Interfaces/Reportes/IRptArcosa'
 class reportsDataService {
   getRptPedimentosPagados(data: DTOReporte) {
-        return http.post<Array<IRptPedimentosPagados>>("/reportes/RptPedimentosPagados", data);
+    return http.post<Array<IRptPedimentosPagados>>(
+      '/reportes/RptPedimentosPagados',
+      data
+    )
   }
   getRptPedimentosPagadosImpuestos(data: DTOReporte) {
-      return http.post<Array<IRptPedimentosPagadosImpuestos>>("/reportes/RptPedimentosPagadosImpuestos", data);
+    return http.post<Array<IRptPedimentosPagadosImpuestos>>(
+      '/reportes/RptPedimentosPagadosImpuestos',
+      data
+    )
   }
   getRptDetalleAnexo24(data: DTOReporte) {
-        return http.post<Array<IRptDetalleAnexo24>>("/reportes/RptDetalleAnexo24", data);
+    return http.post<Array<IRptDetalleAnexo24>>(
+      '/reportes/RptDetalleAnexo24',
+      data
+    )
   }
   getRptOperacionesRemesa() {
-      return http.get<Array<IRptOperacionesRemesa>>("/reportes/RptOperacionesRemesa");
+    return http.get<Array<IRptOperacionesRemesa>>(
+      '/reportes/RptOperacionesRemesa'
+    )
   }
   getRptPedimentosConsolidados(data: DTOReporte) {
-      return http.post<Array<IRptPedimentosConsolidados>>(`/reportes/RptPedimentosConsolidados`, data);
+    return http.post<Array<IRptPedimentosConsolidados>>(
+      `/reportes/RptPedimentosConsolidados`,
+      data
+    )
   }
   getRptBattery(data: DTOReporte) {
-      return http.get<Array<IRptBattery>>(`/Battery/getWarehouseReport?Inicio=${data.Inicio}&Fin=${data.Fin}&TipoOperacion=${data.TipoOperacion}`);
+    return http.get<Array<IRptBattery>>(
+      `/Battery/getWarehouseReport?Inicio=${data.Inicio}&Fin=${data.Fin}&TipoOperacion=${data.TipoOperacion}`
+    )
   }
   getRptArchivoElectronicoOficial(data: DTOAEPeriodo) {
-      return http.get<Array<IRpArchivoElectronicoOficial>>(`/ArchivoElectronico/RptArchivoElectronicoOficial?Anio=${data.Anio}&Mes=${data.Mes}&TipoOperacion=${data.TipoOperacion}&NoCliente=${data.NoCliente}`);
+    return http.get<Array<IRpArchivoElectronicoOficial>>(
+      `/ArchivoElectronico/RptArchivoElectronicoOficial?Anio=${data.Anio}&Mes=${data.Mes}&TipoOperacion=${data.TipoOperacion}&NoCliente=${data.NoCliente}`
+    )
   }
   getRptCorresponsalesTraficos(data: DTORptCorresponsalesTraficos) {
-      return http.get<ICorresponsalTrafico[]>(`/reportes/RptCorresponsalesTraficos?Inicio=${data.Inicio}&Fin=${data.Fin}&TipoOperacion=${data.TipoOperacion}&NoCliente=${data.NoCliente}&IdCorresponsal=${data.IdCorresponsal}&Proceso=${data.Proceso}&Modo=${data.Modo}`);
+    return http.get<ICorresponsalTrafico[]>(
+      `/reportes/RptCorresponsalesTraficos?Inicio=${data.Inicio}&Fin=${data.Fin}&TipoOperacion=${data.TipoOperacion}&NoCliente=${data.NoCliente}&IdCorresponsal=${data.IdCorresponsal}&Proceso=${data.Proceso}&Modo=${data.Modo}`
+    )
   }
   getRptOperaciones(data: DTOReporte) {
-      return http.get<IRptOperaciones[]>(`/reportes/RptOperaciones?Inicio=${data.Inicio}&Fin=${data.Fin}&TipoOperacion=${data.TipoOperacion}&NoCliente=${data.NoCliente}`);
+    return http.get<IRptOperaciones[]>(
+      `/reportes/RptOperaciones?Inicio=${data.Inicio}&Fin=${data.Fin}&TipoOperacion=${data.TipoOperacion}&NoCliente=${data.NoCliente}`
+    )
   }
   getRptOperacionesConsolidadadas(data: DTOReporte) {
-      return http.get<IRptOperacionesConsolidadas[]>(`/reportes/RptOperacionesConsolidadas?Inicio=${data.Inicio}&Fin=${data.Fin}&TipoOperacion=${data.TipoOperacion}&NoCliente=${data.NoCliente}`);
+    return http.get<IRptOperacionesConsolidadas[]>(
+      `/reportes/RptOperacionesConsolidadas?Inicio=${data.Inicio}&Fin=${data.Fin}&TipoOperacion=${data.TipoOperacion}&NoCliente=${data.NoCliente}`
+    )
   }
   GenerateRptControlDocumentosClientes() {
-      return http.get<Boolean>(`/reportes/RptGenerateControlDocumentosClientes`, {responseType: 'arraybuffer'})
+    return http
+      .get<Boolean>(`/reportes/RptGenerateControlDocumentosClientes`, {
+        responseType: 'arraybuffer'
+      })
       .then(function (response) {
         return response
       })
@@ -56,7 +91,10 @@ class reportsDataService {
       })
   }
   GetRptControlDocumentosClientes() {
-      return http.get<ArrayBuffer>(`/reportes/RptGetCtrlDocumentosClientes`, {responseType: 'arraybuffer'})
+    return http
+      .get<ArrayBuffer>(`/reportes/RptGetCtrlDocumentosClientes`, {
+        responseType: 'arraybuffer'
+      })
       .then(function (response) {
         return response
       })
@@ -65,7 +103,50 @@ class reportsDataService {
       })
   }
   getRptOperacionesDiarias(data: DTOReporte) {
-      return http.get<IRptOperacionesDiarias[]>(`/reportes/RptOperacionesDiarias?Inicio=${data.Inicio}&Fin=${data.Fin}&TipoOperacion=${data.TipoOperacion}&NoCliente=${data.NoCliente}`);
+    return http.get<IRptOperacionesDiarias[]>(
+      `/reportes/RptOperacionesDiarias?Inicio=${data.Inicio}&Fin=${data.Fin}&TipoOperacion=${data.TipoOperacion}&NoCliente=${data.NoCliente}`
+    )
+  }
+  getRptPedimentosPagadosFacturasCruzadas(data: DTOReporte) {
+    return http.post<Array<IRptPedimentosPagadosFacturasCruzadas>>(
+      '/reportes/RptPedimentosPagadosFacturasCruzadas',
+      data
+    )
+  }
+
+  getRptMonitoreoFacturasPagadasAmazon(data: DTORPTMonitorFacturasPagAmazon) {
+    return http.post<Array<IRptMonitoreoFacturaPagadasAmazon>>(
+      '/reportes/RptMonitoreoFacturasPagadasAmazon',
+      data
+    )
+  }
+
+  getRptContsFacturasFraccion(Referencia: string)  
+  {
+    return http.get<Array<IRptFacturasFraccion>>(
+      `/reportes/RptContsFacturasConFraccion?Referencia=${Referencia}`
+    );
+    
   }
+
+  getRptOPeracionesPagadasMisionFood(data: DTOReporte) {
+    return http.post<Array<IRptOperacionesPagadasMissionFood>>(
+      '/reportes/RptOperacionesPagadasMissionFood', data
+    ); 
+  }
+
+ getRptFacturasPedimentosPagados(data: DTOReporte){
+  return http.post<Array<IRptFacturasPedimentosPagados>>(
+    '/reportes/RptFacturasPedimetosPagados', data 
+  )
+ }
+  
+ getRptArcosa(data: DTOReporte){
+  return http.post<Array<IRptArcosa>>(
+    '/reportes/RptArcosa', data 
+  ); 
+ }
+  
+
 }
-  export default new reportsDataService();
+export default new reportsDataService()

src/index.tsx

@@ -13,8 +13,10 @@ import { Login } from './Components/Login/login'
 import AmazonNoPartes from './Components/Clientes/Amazon/Reportes/AmazonNoPartes'
 import AvisoCruce from './Components/AgenciaAduanal/AvisoCruce/AvisoCruce'
 import CatTabuladores from './Components/Catalogos/CatTabulador/CatTabulador'
+
 import DashboardCorresponsales from './Components/Dashboard/DashboardCorresponsales'
 import Dashboard from './Components/Dashboard/Dashboard'
+import DashboardDireccion from './Components/Dashboard/DashboardDireccion'
 import Logout from './Components/Logout/logout'
 import ResetCredentials from './Components/Login/ResetCredentials'
 import Register from './Components/Register/register'
@@ -27,6 +29,7 @@ import RptArchivoElectronicoOficial from './Components/Reportes/RptArchivoElectr
 import RptBattery from './Components/Reportes/RptBattery'
 import RptControlDocumentosClientes from './Components/Reportes/RptControlDocumentosClientes'
 import RptConsolidadosSinCerrar from './Components/GEMCO/Facturacion/Anexo/RptConsolidadosSinCerrar'
+import RtpConsolidadosSinFirmaBanco from './Components/GEMCO/Facturacion/Anexo/RptConsolidadosSinFirmaBanco'
 import RptDetalleAnexo24 from './Components/Reportes/RptDetalleAnexo24'
 import RptFacturasTxtHeineken from './Components/Reportes/RptFacturasTxtHeineken'
 import Notificaciones from './Components/Utils/Notificaciones/Notificaciones'
@@ -50,6 +53,23 @@ import RptCasaCuervoCOVEs from './Components/Clientes/CasaCuervo/Reportes/RptCas
 import RptAmazonInvoiceStatus from './Components/Clientes/Amazon/Reportes/Estatus/RtpAmazonInvoiceStatus'
 import ForgotPassword from './Components/Login/ForgotPassword'
 import PIN from './Components/Login/PIN'
+import RptAmazonFacturasPagadas from './Components/Clientes/Amazon/Reportes/FacturasPagadas/RptAmazonFacturasPagadas'
+import RptPedimentosPagadosFacturasCruzadas from './Components/Reportes/RptPedimentosPagadosFacturasCruzadas'
+import RptPedimentosCruces01 from './Components/Reportes/Direccion/RptPedimentosCruces01'
+import RptPedimentosCruces02 from './Components/Reportes/Direccion/RptPedimentosCruces02'
+import RptPedimentosCruces03 from './Components/Reportes/Direccion/RptPedimentosCruces03'
+import RptPedimentosCruces04 from './Components/Reportes/Direccion/RptPedimentosCruces04'
+import RptPedimentosCruces05 from './Components/Reportes/Direccion/RptPedimentosCruces05'
+import RptPedimentosCruces06 from './Components/Reportes/Direccion/RptPedimentosCruces06'
+import RptSegregacion from './Components/Clientes/Amazon/Reportes/Segregacion/RptSegregacion'
+import RptConsultaTrafico from './Components/Clientes/Amazon/Reportes/ConsultaTrafico/RptConsultaTrafico'
+import RptMonitoreoFacturasPagadasAmazon from './Components/Reportes/RptMonitoreoFacturasPagadasAmazon'
+import CatFraccionesVulnerables from './Components/Catalogos/CatFraccionesVulnerables/CatFraccionesVulnerables'
+import RptFacturasFraccion from './Components/Reportes/RptContsFacturasFraccion'
+import CatConceptosConsulta from './Components/Clientes/Amazon/Catalogos/CatConceptosConsulta'
+import RptOperacionesPagadasMisionFood from './Components/Reportes/RptOperacionesPagadasMisionFood'
+import RptFacturasPedimentosPagados from './Components/Reportes/RptFacturasPedimentosPagados'
+import RptArcosa from './Components/Reportes/RptArcosa'
 
 require(`./css/${process.env.REACT_APP_ENVIRONMENT}-home.css`)
 
@@ -106,6 +126,10 @@ ReactDOM.render(
               path="/DashboardCorresponsales"
               element={<DashboardCorresponsales />}
             />
+            <Route
+              path="/DashboardDireccion"
+              element={<DashboardDireccion />}
+            />
             <Route path="/Dashboard" element={<Dashboard />} />
             <Route path="/RptOperaciones" element={<RptOperaciones />} />
             <Route
@@ -121,6 +145,11 @@ ReactDOM.render(
               path="/RptConsolidadosSinCerrar"
               element={<RptConsolidadosSinCerrar />}
             />
+            <Route
+              path="/RptConsolidadosSinFirmaBanco"
+              element={<RtpConsolidadosSinFirmaBanco />}
+            />
+
             <Route
               path="/RptOperacionesDiarias"
               element={<RptOperacionesDiarias />}
@@ -132,6 +161,16 @@ ReactDOM.render(
             <Route path="/CatTabuladores" element={<CatTabuladores />} />
             <Route path="/RptPedidos" element={<RptPedidos />} />
             <Route path="/Rpt1868Facturas" element={<Rpt1868Facturas />} />
+            <Route
+              path="/CatFraccionesVulnerables"
+              element={<CatFraccionesVulnerables />}
+            />
+
+            <Route
+              path="/CatConceptosConsulta"
+              element={<CatConceptosConsulta />}
+            />
+
             <Route
               path="/Rpt1868Transportista"
               element={<Rpt1868Transportista />}
@@ -163,10 +202,19 @@ ReactDOM.render(
               path="/RptAmazonLinkInvoice2Traffic"
               element={<RptAmazonLinkInvoice2Traffic />}
             />
+            <Route
+              path="/RptConsultaTrafico"
+              element={<RptConsultaTrafico />}
+            />
             <Route
               path="/RptAmazonPayedOperations"
               element={<RptAmazonPayedOperations />}
             />
+            <Route
+              path="/RptAmazonFacturasPagadas"
+              element={<RptAmazonFacturasPagadas />}
+            />
+            <Route path="/RptSegregacion" element={<RptSegregacion />} />
             <Route
               path="/RptCasaCuervoCOVEs"
               element={<RptCasaCuervoCOVEs />}
@@ -175,6 +223,55 @@ ReactDOM.render(
               path="/RptAmazonInvoiceStatus"
               element={<RptAmazonInvoiceStatus />}
             />
+            <Route
+              path="/RptPedimentosPagadosFacturasCruzadas"
+              element={<RptPedimentosPagadosFacturasCruzadas />}
+            />
+
+            <Route
+              path="/RptOperacionesPagadasMisionFood"
+              element={<RptOperacionesPagadasMisionFood />}
+            />
+
+            <Route
+              path="/RptMonitoreoFacturasPagadasAmazon"
+              element={<RptMonitoreoFacturasPagadasAmazon />}
+            />
+            <Route
+              path="/RptPedimentosCruces01"
+              element={<RptPedimentosCruces01 />}
+            />
+            <Route
+              path="/RptPedimentosCruces02"
+              element={<RptPedimentosCruces02 />}
+            />
+            <Route
+              path="/RptPedimentosCruces03"
+              element={<RptPedimentosCruces03 />}
+            />
+            <Route
+              path="/RptPedimentosCruces04"
+              element={<RptPedimentosCruces04 />}
+            />
+            <Route
+              path="/RptPedimentosCruces05"
+              element={<RptPedimentosCruces05 />}
+            />
+            <Route
+              path="/RptPedimentosCruces06"
+              element={<RptPedimentosCruces06 />}
+            />
+            <Route
+              path="/RptConsFacturasFraccion"
+              element={<RptFacturasFraccion />}
+            />
+
+            <Route
+              path="/RptFacturasPedimentosPagados"
+              element={<RptFacturasPedimentosPagados />}
+            />
+            <Route path="/RptArcosa" element={<RptArcosa />} />
+
             <Route path="*" element={<PageNotFound />} />
           </Route>
         </Routes>

src/store/features/CatFraccionesVulnerables/CatFraccionesVulnerablesSlice.ts

@@ -0,0 +1,42 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import ICatFraccionesVulnerables from '../../../Interfaces/Catalogos/ICatFraccionesVulnerables';
+const CatFraccionesVulnerables: ICatFraccionesVulnerables[] = [{id:0, fraccion:0 , nico:''  , activo:0  }]
+const initialState = { CatFraccionesVulnerables }
+
+export const CatFraccionesVulnerablesSlice = createSlice({
+  name: 'CatCorresponsales',
+  initialState: initialState,
+  reducers: {
+    populateCatFraccionesVulnerables : (state, action: PayloadAction<ICatFraccionesVulnerables[]>) => {
+      state.CatFraccionesVulnerables = []
+      state.CatFraccionesVulnerables.push(... action.payload)
+    },
+    addCatFraccionesVulnerables : (state, action: PayloadAction<ICatFraccionesVulnerables>) => {
+      var Existe = state.CatFraccionesVulnerables.find(function(item) {
+        return item.id === action.payload.id;
+      });
+     if (!Existe) state.CatFraccionesVulnerables.push(action.payload)
+    },
+    updateCatFraccionesVulnerables : (state, action: PayloadAction<ICatFraccionesVulnerables>) => {
+      const i = state.CatFraccionesVulnerables.findIndex(_element => _element.id === action.payload.id);
+      if (i > -1) state.CatFraccionesVulnerables[i] = action.payload;
+      else state.CatFraccionesVulnerables.push(action.payload);
+
+    },
+    deleteCatFraccionesVulnerables : (state, action: PayloadAction<number>) => {
+      const newArr = state.CatFraccionesVulnerables.filter(data => data.id != action.payload);
+      state.CatFraccionesVulnerables=newArr
+    },
+    InitCatFraccionesVulnerables : (state, action: PayloadAction<number>) => {
+      state.CatFraccionesVulnerables.splice(0,state.CatFraccionesVulnerables.length-1)
+     // state.CatCorresponsales = [{id:0, factura:'-Seleccione-', idTrafico:0, valorFacturaDls:0, proveedor:0}]
+    },
+  },
+})
+
+export const { addCatFraccionesVulnerables, 
+  populateCatFraccionesVulnerables, 
+  updateCatFraccionesVulnerables, 
+  deleteCatFraccionesVulnerables,
+  InitCatFraccionesVulnerables } = CatFraccionesVulnerablesSlice.actions;
+export default CatFraccionesVulnerablesSlice.reducer;

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

@@ -0,0 +1,50 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import ICat2096CatConceptosConsulta from '../../../../Components/Clientes/Amazon/Interfaces/I2096CatConceptosConsulta'
+const CatConcetosConsulta: ICat2096CatConceptosConsulta[] = []
+const initialState = { CatConcetosConsulta }
+
+export const CatConceptosConsultaSlice = createSlice({
+  name: 'CatConceptosConsulta',
+  initialState: initialState,
+  reducers: {
+    initializeCatConcetosConsulta: (state, action: PayloadAction<ICat2096CatConceptosConsulta[]>) => {
+      state.CatConcetosConsulta = action.payload
+    },
+    populateCatConcetosConsultas: (state, action: PayloadAction<ICat2096CatConceptosConsulta[]>) => {
+      action.payload.forEach((newItem) => {
+        var Existe = state.CatConcetosConsulta.find(function (onMemoryItem) {
+          return onMemoryItem.id === newItem.id
+        })
+        if (!Existe) state.CatConcetosConsulta.push(newItem)
+      })
+    },
+    addCatConcetosConsulta: (state, action: PayloadAction<ICat2096CatConceptosConsulta>) => {
+      var Existe = state.CatConcetosConsulta.find(function (item) {
+        return item.id === action.payload.id
+      })
+      if (!Existe) state.CatConcetosConsulta.push(action.payload)
+    },
+    updateCatConcetosConsulta: (state, action: PayloadAction<ICat2096CatConceptosConsulta>) => {
+      const i = state.CatConcetosConsulta.findIndex(
+        (_element) => _element.id === action.payload.id
+      )
+      if (i > -1) state.CatConcetosConsulta[i] = action.payload
+      else state.CatConcetosConsulta.push(action.payload)
+    },
+    updateCatConcetosConsultaDetail: (state, action: PayloadAction<ICat2096CatConceptosConsulta>) => {
+      const i = state.CatConcetosConsulta.findIndex(
+        (_element) => _element.id === action.payload.id
+      )
+      if (i > -1) state.CatConcetosConsulta[i] = action.payload
+      else state.CatConcetosConsulta.push(action.payload)
+    },
+    deleteCatConcetosConsulta: (state, action: PayloadAction<number>) => {
+      const newArr = state.CatConcetosConsulta.filter((data) => data.id != action.payload)
+      state.CatConcetosConsulta = newArr
+    }
+  }
+})
+
+export const { initializeCatConcetosConsulta, addCatConcetosConsulta, populateCatConcetosConsultas, updateCatConcetosConsulta, deleteCatConcetosConsulta } =
+  CatConceptosConsultaSlice.actions
+export default CatConceptosConsultaSlice.reducer

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

@@ -0,0 +1,50 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import DTO2096TraficoConsultaAmazonHeader from '../../../../Components/Clientes/Amazon/DTO/DTO2096TraficoConsultaAmazonHeader'
+const Consulta: DTO2096TraficoConsultaAmazonHeader[] = []
+const initialState = { Consulta }
+
+export const AmazonTraficoConsultaSlice = createSlice({
+  name: 'AmazonTraficoConsulta',
+  initialState: initialState,
+  reducers: {
+    initializeTraficoConsulta: (state, action: PayloadAction<DTO2096TraficoConsultaAmazonHeader[]>) => {
+      state.Consulta = action.payload
+    },
+    populateTraficoConsulta: (state, action: PayloadAction<DTO2096TraficoConsultaAmazonHeader[]>) => {
+      action.payload.forEach((newItem) => {
+        var Existe = state.Consulta.find(function (onMemoryItem) {
+          return onMemoryItem.id === newItem.id
+        })
+        if (!Existe) state.Consulta.push(newItem)
+      })
+    },
+    addTraficoConsulta: (state, action: PayloadAction<DTO2096TraficoConsultaAmazonHeader>) => {
+      var Existe = state.Consulta.find(function (item) {
+        return item.id === action.payload.id
+      })
+      if (!Existe) state.Consulta.push(action.payload)
+    },
+    updateTraficoConsulta: (state, action: PayloadAction<DTO2096TraficoConsultaAmazonHeader>) => {
+      const i = state.Consulta.findIndex(
+        (_element) => _element.id === action.payload.id
+      )
+      if (i > -1) state.Consulta[i] = action.payload
+      else state.Consulta.push(action.payload)
+    },
+    updateTraficoConsultaDetail: (state, action: PayloadAction<DTO2096TraficoConsultaAmazonHeader>) => {
+      const i = state.Consulta.findIndex(
+        (_element) => _element.id === action.payload.id
+      )
+      if (i > -1) state.Consulta[i] = action.payload
+      else state.Consulta.push(action.payload)
+    },
+    deleteTraficoConsulta: (state, action: PayloadAction<number>) => {
+      const newArr = state.Consulta.filter((data) => data.id != action.payload)
+      state.Consulta = newArr
+    }
+  }
+})
+
+export const { initializeTraficoConsulta, addTraficoConsulta, populateTraficoConsulta, updateTraficoConsulta, deleteTraficoConsulta } =
+  AmazonTraficoConsultaSlice.actions
+export default AmazonTraficoConsultaSlice.reducer

src/store/store.ts

@@ -3,6 +3,7 @@ import userStatusReducer from './features/userStatusSlice/userStatusSlice'
 import ArchivoElectronicoSlice  from './features/Reportes/ArchivoElectronico'
 import CatProveedoresSlice from './features/CatProveedores/CatProveedoresSlice'
 import CatCorresponsalesSlice from './features/CatCorresponsales/CatCorresponsalesSlice'
+import CatFraccionesVulnerablesSlice from './features/CatFraccionesVulnerables/CatFraccionesVulnerablesSlice'
 import CorresponsalesFacturasSlice from './features/Corresponsales/CorresponsalesFacturasSlice'
 import CorresponsalesFacturasTercerosSlice from './features/Corresponsales/CorresponsalesFacturasTercerosSlice'
 import CorresponsalesContenedoresSlice from './features/Corresponsales/CorresponsalesContenedoresSlice'
@@ -16,6 +17,9 @@ import Data1868FacturaDetalleSlice from './features/Clientes/1868/Data1868Factur
 import CorresponsalesCuentasComplementariasEstatusSlice from './features/Corresponsales/CorresponsalesCuentasComplementariasEstatusSlice'
 import AmazonInvoicesSlice from './features/Clientes/2096/AmazonInvoices'
 import AmazonNoPartesSlice from './features/Clientes/2096/AmazonNoPartes'
+import AmazonTraficoConsultaSlice  from './features/Clientes/2096/AmazonTraficoConsulta'
+import AmazonCatConceptosConsulta from './features/Clientes/2096/AmazonCatConceptosConsulta'
+
 
 
 export const store = configureStore({
@@ -24,6 +28,7 @@ export const store = configureStore({
     ArchivoElectronico: ArchivoElectronicoSlice,
     CatProveedores: CatProveedoresSlice,
     CatCorresponsales: CatCorresponsalesSlice,
+    CatFraccionesVulnerables : CatFraccionesVulnerablesSlice, 
     CFData: CorresponsalesFacturasSlice,
     CF3rosData: CorresponsalesFacturasTercerosSlice,
     CCData : CorresponsalesContenedoresSlice,
@@ -36,7 +41,9 @@ export const store = configureStore({
     Data1868FacturaDetalle: Data1868FacturaDetalleSlice,
     CCueCompEstatus : CorresponsalesCuentasComplementariasEstatusSlice,
     AmazonInvoices : AmazonInvoicesSlice,
-    AmazonNoPartes: AmazonNoPartesSlice 
+    AmazonNoPartes: AmazonNoPartesSlice,
+    AmazonTraficoConsulta: AmazonTraficoConsultaSlice,
+    AmazonCatConceptosConsulta: AmazonCatConceptosConsulta 
   }
 })
 

yarn.lock

@@ -1120,6 +1120,13 @@
     core-js-pure "^3.20.2"
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.1.2":
+  version "7.22.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.6.tgz#57d64b9ae3cff1d67eb067ae117dac087f5bd438"
+  integrity sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.16", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.17.2"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz"
@@ -1723,6 +1730,11 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
+"@kurkle/color@^0.3.0":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f"
+  integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
@@ -2101,6 +2113,57 @@
   dependencies:
     "@types/node" "*"
 
+"@types/d3-array@^3.0.3":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-3.0.5.tgz#857c1afffd3f51319bbc5b301956aca68acaa7b8"
+  integrity sha512-Qk7fpJ6qFp+26VeQ47WY0mkwXaiq8+76RJcncDEfMc2ocRzXLO67bLFRNI4OX1aGBoPzsM5Y2T+/m1pldOgD+A==
+
+"@types/d3-color@*":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-3.1.0.tgz#6594da178ded6c7c3842f3cc0ac84b156f12f2d4"
+  integrity sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA==
+
+"@types/d3-ease@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-ease/-/d3-ease-3.0.0.tgz#c29926f8b596f9dadaeca062a32a45365681eae0"
+  integrity sha512-aMo4eaAOijJjA6uU+GIeW018dvy9+oH5Y2VPPzjjfxevvGQ/oRDs+tfYC9b50Q4BygRR8yE2QCLsrT0WtAVseA==
+
+"@types/d3-interpolate@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz#e7d17fa4a5830ad56fe22ce3b4fac8541a9572dc"
+  integrity sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==
+  dependencies:
+    "@types/d3-color" "*"
+
+"@types/d3-path@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-3.0.0.tgz#939e3a784ae4f80b1fde8098b91af1776ff1312b"
+  integrity sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg==
+
+"@types/d3-scale@^4.0.2":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-4.0.3.tgz#7a5780e934e52b6f63ad9c24b105e33dd58102b5"
+  integrity sha512-PATBiMCpvHJSMtZAMEhc2WyL+hnzarKzI6wAHYjhsonjWJYGq5BXTzQjv4l8m2jO183/4wZ90rKvSeT7o72xNQ==
+  dependencies:
+    "@types/d3-time" "*"
+
+"@types/d3-shape@^3.1.0":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-3.1.1.tgz#15cc497751dac31192d7aef4e67a8d2c62354b95"
+  integrity sha512-6Uh86YFF7LGg4PQkuO2oG6EMBRLuW9cbavUW46zkIO5kuS2PfTqo2o9SkgtQzguBHbLgNnU90UNsITpsX1My+A==
+  dependencies:
+    "@types/d3-path" "*"
+
+"@types/d3-time@*", "@types/d3-time@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-3.0.0.tgz#e1ac0f3e9e195135361fa1a1d62f795d87e6e819"
+  integrity sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==
+
+"@types/d3-timer@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-timer/-/d3-timer-3.0.0.tgz#e2505f1c21ec08bda8915238e397fb71d2fc54ce"
+  integrity sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g==
+
 "@types/eslint-scope@^3.7.3":
   version "3.7.3"
   resolved "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.3.tgz"
@@ -3992,6 +4055,13 @@ charcodes@^0.2.0:
   resolved "https://registry.npmjs.org/charcodes/-/charcodes-0.2.0.tgz"
   integrity sha512-Y4kiDb+AM4Ecy58YkuZrrSRJBDQdQ2L+NyS1vHHFtNtUjgutcZfx3yp1dAONI/oPaPmyGfCLx5CxL+zauIMyKQ==
 
+chart.js@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.3.0.tgz#ac363030ab3fec572850d2d872956f32a46326a1"
+  integrity sha512-ynG0E79xGfMaV2xAHdbhwiPLczxnNNnasrmPEXriXsPJGjmhOBYzFVEsB65w2qMDz+CaBJJuJD0inE/ab/h36g==
+  dependencies:
+    "@kurkle/color" "^0.3.0"
+
 check-more-types@^2.24.0:
   version "2.24.0"
   resolved "https://registry.yarnpkg.com/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600"
@@ -4032,6 +4102,11 @@ cjs-module-lexer@^1.0.0:
   resolved "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz"
   integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
 
+classnames@^2.2.5:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+
 classnames@^2.2.6, classnames@^2.3.1:
   version "2.3.1"
   resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz"
@@ -4479,6 +4554,11 @@ css-tree@^1.1.2, css-tree@^1.1.3:
     mdn-data "2.0.14"
     source-map "^0.6.1"
 
+css-unit-converter@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21"
+  integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==
+
 css-what@^3.2.1:
   version "3.4.2"
   resolved "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz"
@@ -4646,6 +4726,138 @@ cypress@^11.0.1:
     untildify "^4.0.0"
     yauzl "^2.10.0"
 
+"d3-array@1 - 2":
+  version "2.12.1"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-2.12.1.tgz#e20b41aafcdffdf5d50928004ececf815a465e81"
+  integrity sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==
+  dependencies:
+    internmap "^1.0.0"
+
+"d3-array@2 - 3", "d3-array@2.10.0 - 3", "d3-array@2.5.0 - 3", d3-array@^3.1.6, d3-array@^3.2.0, d3-array@^3.2.1:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.4.tgz#15fec33b237f97ac5d7c986dc77da273a8ed0bb5"
+  integrity sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==
+  dependencies:
+    internmap "1 - 2"
+
+d3-collection@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.7.tgz#349bd2aa9977db071091c13144d5e4f16b5b310e"
+  integrity sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A==
+
+"d3-color@1 - 3", d3-color@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2"
+  integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==
+
+d3-contour@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/d3-contour/-/d3-contour-4.0.2.tgz#bb92063bc8c5663acb2422f99c73cbb6c6ae3bcc"
+  integrity sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==
+  dependencies:
+    d3-array "^3.2.0"
+
+d3-ease@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-3.0.1.tgz#9658ac38a2140d59d346160f1f6c30fda0bd12f4"
+  integrity sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==
+
+"d3-format@1 - 3", d3-format@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-3.1.0.tgz#9260e23a28ea5cb109e93b21a06e24e2ebd55641"
+  integrity sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==
+
+d3-geo@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-3.1.0.tgz#74fd54e1f4cebd5185ac2039217a98d39b0a4c0e"
+  integrity sha512-JEo5HxXDdDYXCaWdwLRt79y7giK8SbhZJbFWXqbRTolCHFI5jRqteLzCsq51NKbUoX0PjBVSohxrx+NoOUujYA==
+  dependencies:
+    d3-array "2.5.0 - 3"
+
+d3-hexbin@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/d3-hexbin/-/d3-hexbin-0.2.2.tgz#9c5837dacfd471ab05337a9e91ef10bfc4f98831"
+  integrity sha512-KS3fUT2ReD4RlGCjvCEm1RgMtp2NFZumdMu4DBzQK8AZv3fXRM6Xm8I4fSU07UXvH4xxg03NwWKWdvxfS/yc4w==
+
+d3-hierarchy@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz#b01cd42c1eed3d46db77a5966cf726f8c09160c6"
+  integrity sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==
+
+"d3-interpolate@1.2.0 - 3", d3-interpolate@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz#3c47aa5b32c5b3dfb56ef3fd4342078a632b400d"
+  integrity sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==
+  dependencies:
+    d3-color "1 - 3"
+
+d3-path@1:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.9.tgz#48c050bb1fe8c262493a8caf5524e3e9591701cf"
+  integrity sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==
+
+d3-path@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-3.1.0.tgz#22df939032fb5a71ae8b1800d61ddb7851c42526"
+  integrity sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==
+
+d3-sankey@^0.12.3:
+  version "0.12.3"
+  resolved "https://registry.yarnpkg.com/d3-sankey/-/d3-sankey-0.12.3.tgz#b3c268627bd72e5d80336e8de6acbfec9d15d01d"
+  integrity sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==
+  dependencies:
+    d3-array "1 - 2"
+    d3-shape "^1.2.0"
+
+d3-scale@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-4.0.2.tgz#82b38e8e8ff7080764f8dcec77bd4be393689396"
+  integrity sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==
+  dependencies:
+    d3-array "2.10.0 - 3"
+    d3-format "1 - 3"
+    d3-interpolate "1.2.0 - 3"
+    d3-time "2.1.1 - 3"
+    d3-time-format "2 - 4"
+
+d3-shape@^1.2.0:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.7.tgz#df63801be07bc986bc54f63789b4fe502992b5d7"
+  integrity sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==
+  dependencies:
+    d3-path "1"
+
+d3-shape@^3.1.0, d3-shape@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-3.2.0.tgz#a1a839cbd9ba45f28674c69d7f855bcf91dfc6a5"
+  integrity sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==
+  dependencies:
+    d3-path "^3.1.0"
+
+"d3-time-format@2 - 4":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-4.1.0.tgz#7ab5257a5041d11ecb4fe70a5c7d16a195bb408a"
+  integrity sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==
+  dependencies:
+    d3-time "1 - 3"
+
+"d3-time@1 - 3", "d3-time@2.1.1 - 3", d3-time@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-3.1.0.tgz#9310db56e992e3c0175e1ef385e545e48a9bb5c7"
+  integrity sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==
+  dependencies:
+    d3-array "2 - 3"
+
+d3-timer@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-3.0.1.tgz#6284d2a2708285b1abb7e201eda4380af35e63b0"
+  integrity sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==
+
+d3-voronoi@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/d3-voronoi/-/d3-voronoi-1.1.4.tgz#dd3c78d7653d2bb359284ae478645d95944c8297"
+  integrity sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg==
+
 damerau-levenshtein@^1.0.7:
   version "1.0.8"
   resolved "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz"
@@ -4698,6 +4910,11 @@ debug@^3.1.0, debug@^3.1.1, debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
+decimal.js-light@^2.4.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/decimal.js-light/-/decimal.js-light-2.5.1.tgz#134fd32508f19e208f4fb2f8dac0d2626a867934"
+  integrity sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==
+
 decimal.js@^10.2.1:
   version "10.3.1"
   resolved "https://registry.npmjs.org/decimal.js/-/decimal.js-10.3.1.tgz"
@@ -4893,6 +5110,13 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
+dom-helpers@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
+  integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+
 dom-helpers@^5.0.1, dom-helpers@^5.2.0, dom-helpers@^5.2.1:
   version "5.2.1"
   resolved "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz"
@@ -4918,6 +5142,11 @@ dom-serializer@^1.0.1:
     domhandler "^4.2.0"
     entities "^2.0.0"
 
+dom-walk@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
+  integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==
+
 domelementtype@1:
   version "1.3.1"
   resolved "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz"
@@ -5426,7 +5655,7 @@ eventemitter2@6.4.7:
   resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.7.tgz#a7f6c4d7abf28a14c1ef3442f21cb306a054271d"
   integrity sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==
 
-eventemitter3@^4.0.0:
+eventemitter3@^4.0.0, eventemitter3@^4.0.1:
   version "4.0.7"
   resolved "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz"
   integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
@@ -5555,11 +5784,21 @@ extsprintf@^1.2.0:
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.1.tgz#8d172c064867f235c0c84a596806d279bf4bcc07"
   integrity sha512-Wrk35e8ydCKDj/ArClo1VrPVmN8zph5V4AtHwIuHhvMXsKf73UT3BOD+azBIW+3wOJ4FhEH7zyaJCFvChjYvMA==
 
+faker@^6.6.6:
+  version "6.6.6"
+  resolved "https://registry.yarnpkg.com/faker/-/faker-6.6.6.tgz#e9529da0109dca4c7c5dbfeaadbd9234af943033"
+  integrity sha512-9tCqYEDHI5RYFQigXFwF1hnCwcWCOJl/hmll0lr5D2Ljjb0o4wphb69wikeJDz5qCEzXCoPvG6ss5SDP6IfOdg==
+
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-equals@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/fast-equals/-/fast-equals-5.0.1.tgz#a4eefe3c5d1c0d021aeed0bc10ba5e0c12ee405d"
+  integrity sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ==
+
 fast-glob@^3.2.11, fast-glob@^3.2.9:
   version "3.2.11"
   resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz"
@@ -5988,6 +6227,14 @@ global-prefix@^3.0.0:
     kind-of "^6.0.2"
     which "^1.3.1"
 
+global@^4.3.1:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
+  integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==
+  dependencies:
+    min-document "^2.19.0"
+    process "^0.11.10"
+
 globals@^11.1.0:
   version "11.12.0"
   resolved "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz"
@@ -6371,6 +6618,16 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
+"internmap@1 - 2":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009"
+  integrity sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==
+
+internmap@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/internmap/-/internmap-1.0.1.tgz#0017cc8a3b99605f0302f2b198d272e015e5df95"
+  integrity sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==
+
 invariant@^2.1.0, invariant@^2.2.2, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz"
@@ -7437,7 +7694,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.6.1, lodash@^4.7.0:
+lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.6.1, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -7603,6 +7860,13 @@ mimic-fn@^2.1.0:
   resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
+min-document@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
+  integrity sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==
+  dependencies:
+    dom-walk "^0.1.0"
+
 min-indent@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz"
@@ -8086,6 +8350,11 @@ pend@~1.2.0:
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
   integrity sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==
 
+performance-now@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
+  integrity sha512-YHk5ez1hmMR5LOkb9iJkLKqoBlL7WD5M8ljC75ZfzXriuBIVNuecaXuU7e+hOwyqf24Wxhh7Vxgt7Hnw9288Tg==
+
 performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz"
@@ -8724,6 +8993,11 @@ process-nextick-args@~2.0.0:
   resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz"
   integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
 
+process@^0.11.10:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+  integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
+
 promise@^8.1.0:
   version "8.1.0"
   resolved "https://registry.npmjs.org/promise/-/promise-8.1.0.tgz"
@@ -8747,7 +9021,7 @@ prop-types-extra@^1.1.0:
     react-is "^16.3.2"
     warning "^4.0.0"
 
-prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -8829,7 +9103,7 @@ quick-lru@^5.1.1:
   resolved "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz"
   integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
 
-raf@^3.4.1:
+raf@^3.1.0, raf@^3.4.1:
   version "3.4.1"
   resolved "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz"
   integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
@@ -8906,6 +9180,11 @@ react-captchaa@^1.0.13:
   dependencies:
     react-icons-wrapper "^1.0.8"
 
+react-chartjs-2@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz#43c1e3549071c00a1a083ecbd26c1ad34d385f5d"
+  integrity sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==
+
 react-currency-format@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/react-currency-format/-/react-currency-format-1.1.0.tgz#efef7f18045fc09a987de270b144f5eec8801dab"
@@ -9038,6 +9317,11 @@ react-flexy-table@^1.8.10:
   resolved "https://registry.yarnpkg.com/react-flexy-table/-/react-flexy-table-1.8.10.tgz#8aadc3d15abfa21b3afa2ecd644364d80b404d16"
   integrity sha512-NSPgb1m+kK1O3gMXzLwxR0ZD7jeFjz5nz2ejZDaR9DOMqbkR0PZ+gRjsADsR+gIAfk5v+8xTcY9fsQSMu/EFjw==
 
+react-google-charts@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/react-google-charts/-/react-google-charts-4.0.0.tgz#f648e4fe8ac8a1f47542c2cac040df6afb21e2d6"
+  integrity sha512-9OG0EkBb9JerKEPQYdhmAXnhGLzOdOHOPS9j7l+P1a3z1kcmq9mGDa7PUoX/VQUY4IjZl2/81nsO4o+1cuYsuw==
+
 react-google-qrcode@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/react-google-qrcode/-/react-google-qrcode-1.0.3.tgz#bb9bb7a1ee1df00a4a296044136738c2a9a0422b"
@@ -9089,7 +9373,7 @@ react-image-loader-hoc@^1.0.6:
     react "^16.6.3"
     styled-components "^4.1.3"
 
-react-is@^16.13.1, react-is@^16.3.2, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.2:
+react-is@^16.10.2, react-is@^16.13.1, react-is@^16.3.2, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.2:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -9104,6 +9388,15 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-motion@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.2.tgz#0dd3a69e411316567927917c6626551ba0607316"
+  integrity sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==
+  dependencies:
+    performance-now "^0.2.0"
+    prop-types "^15.5.8"
+    raf "^3.1.0"
+
 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"
@@ -9160,6 +9453,13 @@ react-refresh@^0.11.0:
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
+react-resize-detector@^8.0.4:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-8.1.0.tgz#1c7817db8bc886e2dbd3fbe3b26ea8e56be0524a"
+  integrity sha512-S7szxlaIuiy5UqLhLL1KY3aoyGHbZzsTpYal9eYMwCyKqoqoVLCmIgAgNyIM1FhnP2KyBygASJxdhejrzjMb+w==
+  dependencies:
+    lodash "^4.17.21"
+
 react-router-dom@6:
   version "6.2.2"
   resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.2.tgz"
@@ -9230,6 +9530,14 @@ react-scripts@5.0.0:
   optionalDependencies:
     fsevents "^2.3.2"
 
+react-smooth@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/react-smooth/-/react-smooth-2.0.3.tgz#2845fa8f22914f2e4445856d5688fb8a7d72f3ae"
+  integrity sha512-yl4y3XiMorss7ayF5QnBiSprig0+qFHui8uh7Hgg46QX5O+aRMRKlfGGNGLHno35JkQSvSYY8eCWkBfHfrSHfg==
+  dependencies:
+    fast-equals "^5.0.0"
+    react-transition-group "2.9.0"
+
 react-to-print@^2.14.7:
   version "2.14.7"
   resolved "https://registry.yarnpkg.com/react-to-print/-/react-to-print-2.14.7.tgz#d288de0e573e6e63e203a48d4bad7a1759d18688"
@@ -9237,6 +9545,16 @@ react-to-print@^2.14.7:
   dependencies:
     prop-types "^15.8.1"
 
+react-transition-group@2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
+  integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==
+  dependencies:
+    dom-helpers "^3.4.0"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+    react-lifecycles-compat "^3.0.4"
+
 react-transition-group@^4.4.2:
   version "4.4.2"
   resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz"
@@ -9247,6 +9565,29 @@ react-transition-group@^4.4.2:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
+react-vis@^1.12.1:
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/react-vis/-/react-vis-1.12.1.tgz#2020c6025ceb10eace53d2366a6b8e9d90a47c54"
+  integrity sha512-vH7ihTPlBD6wBuzwPoipheyJnx46kKKMXnVqdk4mv5vq+bJVC6JRYdRZSofa2030+kko99rSq/idnYnNWGr6zA==
+  dependencies:
+    d3-array "^3.2.1"
+    d3-collection "^1.0.7"
+    d3-color "^3.1.0"
+    d3-contour "^4.0.0"
+    d3-format "^3.1.0"
+    d3-geo "^3.1.0"
+    d3-hexbin "^0.2.2"
+    d3-hierarchy "^3.1.2"
+    d3-interpolate "^3.0.1"
+    d3-sankey "^0.12.3"
+    d3-scale "^4.0.2"
+    d3-shape "^3.2.0"
+    d3-voronoi "^1.1.4"
+    deep-equal "^1.0.1"
+    global "^4.3.1"
+    prop-types "^15.5.8"
+    react-motion "^0.5.2"
+
 react-webcam-qr-scanner.ts@^1.0.4:
   version "1.0.4"
   resolved "https://registry.npmjs.org/react-webcam-qr-scanner.ts/-/react-webcam-qr-scanner.ts-1.0.4.tgz"
@@ -9300,6 +9641,28 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
+recharts-scale@^0.4.4:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/recharts-scale/-/recharts-scale-0.4.5.tgz#0969271f14e732e642fcc5bd4ab270d6e87dd1d9"
+  integrity sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==
+  dependencies:
+    decimal.js-light "^2.4.1"
+
+recharts@^2.7.2:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.7.2.tgz#6d813681910ad33a4bbf3bdd06c6f64f20b39319"
+  integrity sha512-HMKRBkGoOXHW+7JcRa6+MukPSifNtJlqbc+JreGVNA407VLE/vOP+8n3YYjprDVVIF9E2ZgwWnL3D7K/LUFzBg==
+  dependencies:
+    classnames "^2.2.5"
+    eventemitter3 "^4.0.1"
+    lodash "^4.17.19"
+    react-is "^16.10.2"
+    react-resize-detector "^8.0.4"
+    react-smooth "^2.0.2"
+    recharts-scale "^0.4.4"
+    reduce-css-calc "^2.1.8"
+    victory-vendor "^36.6.8"
+
 recursive-readdir@^2.2.2:
   version "2.2.2"
   resolved "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz"
@@ -9315,6 +9678,14 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+reduce-css-calc@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz#7ef8761a28d614980dc0c982f772c93f7a99de03"
+  integrity sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==
+  dependencies:
+    css-unit-converter "^1.1.1"
+    postcss-value-parser "^3.3.0"
+
 redux-devtools-extension@^2.13.8:
   version "2.13.9"
   resolved "https://registry.npmjs.org/redux-devtools-extension/-/redux-devtools-extension-2.13.9.tgz"
@@ -9376,6 +9747,11 @@ regenerator-runtime@^0.11.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
+regenerator-runtime@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
 regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.9:
   version "0.13.9"
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"
@@ -10826,6 +11202,26 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+victory-vendor@^36.6.8:
+  version "36.6.11"
+  resolved "https://registry.yarnpkg.com/victory-vendor/-/victory-vendor-36.6.11.tgz#acae770717c2dae541a54929c304ecab5ab6ac2a"
+  integrity sha512-nT8kCiJp8dQh8g991J/R5w5eE2KnO8EAIP0xocWlh9l2okngMWglOPoMZzJvek8Q1KUc4XE/mJxTZnvOB1sTYg==
+  dependencies:
+    "@types/d3-array" "^3.0.3"
+    "@types/d3-ease" "^3.0.0"
+    "@types/d3-interpolate" "^3.0.1"
+    "@types/d3-scale" "^4.0.2"
+    "@types/d3-shape" "^3.1.0"
+    "@types/d3-time" "^3.0.0"
+    "@types/d3-timer" "^3.0.0"
+    d3-array "^3.1.6"
+    d3-ease "^3.0.1"
+    d3-interpolate "^3.0.1"
+    d3-scale "^4.0.2"
+    d3-shape "^3.1.0"
+    d3-time "^3.0.0"
+    d3-timer "^3.0.1"
+
 voc@:
   version "1.2.0"
   resolved "https://registry.npmjs.org/voc/-/voc-1.2.0.tgz"