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,8 +20,9 @@
     "axios": "^0.26.0",
     "bootstrap": "^5.1.3",
     "btoa": "^1.2.1",
-    "custom-item-select": "^1.2.3",
+    "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 +31,8 @@
     "react": "^17.0.2",
     "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/App.tsx

@@ -96,7 +96,7 @@ function App() {
               {!userLogued ? (
                 <>
                   <Nav.Link href="/#/login">Login</Nav.Link>
-                  <Nav.Link href="/#/reset">Reset</Nav.Link>
+                  {/* <Nav.Link href="/#/reset">Reset</Nav.Link> */}
                 </>
               ) : (
                 <>

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={8}>
+            <Col xs={1}>
+            <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={8}>
+            <Col xs={3}>
+              <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={8}>
+            <Col xs={3}>
+              <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

@@ -114,9 +114,10 @@ export default function RptAmazonFinishedClasificationInvoices(
   const getUser = (Id: number) => {
     const NoAsignado = 'NO ASIGNADO'
     if (Id === 0) return NoAsignado
-    else if (Data.length) {
+    else if (Data) {
       const Usuario = Data.filter((item) => item.idUsuario === Id)
-      return Usuario[0].nombre ? Usuario[0].nombre : NoAsignado
+      console.log(Usuario)
+      return Usuario.length>0 ? Usuario[0].nombre : NoAsignado
     }
     return NoAsignado
   }
@@ -160,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>
@@ -194,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>
@@ -299,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)
-    DSAmazon.ExceptionsFileAmazonGET(IDFactura)
+  /*   setWaitingDialog(true)*/
+  /*  DSAmazon.ExceptionsFileAmazonGET(IDFactura)
       .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')
-          document.body.appendChild(link)
-          link.click() */
+        if (response.status === 200) {*/
           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"
@@ -379,7 +441,7 @@ export default function RtpAmazonPendingInvoices(
                 <tr>
                   <th style={{ width: '50px' }}></th>
                   <th style={{ width: '50px' }}>id</th>
-                  <th style={{ width: '50px', paddingRight:'20px' }}>
+                  <th style={{ width: '50px', paddingRight: '20px' }}>
                     <IconContext.Provider
                       value={{ color: 'yellow', size: '20px' }}
                     >
@@ -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 ? (
@@ -459,10 +522,15 @@ 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(
-                        Perfil
-                      )}/>
+                              <td style={{ textAlign: 'left' }}>
+                                <PrioritySelector
+                                  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) => {
-    setWaitingDialog(true)
-    generateResume(id)
-    setFactura(Factura)
-    DSAmazon.ExceptionsFileAmazonGET(id)
+  const downloadExceptionsFile = (
+    id: number,
+    Factura: string,
+    ExceptionCode: number
+  ) => {
+    //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={() =>
-                                      downloadExceptionsFile(
+                                    onClick={() => {
+                                      /*  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>
@@ -839,13 +909,14 @@ export default function RptPendingAnswerFromAmazon(
                 </Alert>
               </Col>
             </Row>
-            <Row style={{paddingTop:'30px'}}>
+            <Row style={{ paddingTop: '30px' }}>
               <Col xs={12}>&nbsp;</Col>
             </Row>
             <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}
-          <div style={{ overflow: 'auto' }}>
+          {WaitingMessage} */}
+          <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(
-          'Ocurrio un error' + e.message.toString()
-        )
+          setMsg('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
-            /*  style={{visibility: EstatusSwith ? 'hidden' : 'visible'}} */
-            className="DetailData"
-          >
+          <td 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
-          /*   style={{
-              visibility:
-                CumplimientoNormativo.length === 0 ? 'hidden' : 'visible'
-            }} */
-          >
+          <td>
             <OverlayTrigger
               placement="bottom"
               overlay={
@@ -460,12 +430,7 @@ export default function RptPendingAnswerFromAmazonDetail(
               )}
             </OverlayTrigger>
           </td>
-          <td
-           /*  style={{
-              visibility:
-                CumplimientoNormativo.length === 0 ? 'hidden' : 'visible'
-            }} */
-          >
+          <td>
             <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) {
-        setHeader('Error')
-        setMsg('Para continuar, proporcione la factura a buscar')
-        setShowMsg(true)
-        return
+    let InicioValue
+    let FinValue
+
+    // Verifica si se proporcionaron valores para Inicio y Fin.
+    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]))
@@ -172,7 +186,7 @@ export default function RptAmazonInvoiceStatus (props: IRptAmazonInvoiceStatusPr
           const url = window.URL.createObjectURL(new Blob([response.data]))
           const link = document.createElement('a')
           link.href = url
-          link.setAttribute('download',filename)
+          link.setAttribute('download', filename)
           document.body.appendChild(link)
           link.click()
           //loadReport()
@@ -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'}}>Factura</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' }}
@@ -411,28 +643,40 @@ export default function RptAmazonInvoiceStatus (props: IRptAmazonInvoiceStatusPr
                               {MasterData.totalInvoiceValueMonetaryAmount}
                             </td>
                             <td style={{ textAlign: 'center' }}>
-                                {MasterData.fPago.substring(0,10)}
+                              {MasterData.fPago.substring(0, 10)}
                             </td>
-                              <td style={{ textAlign: 'center', width:'100px' }}>
+                            <td style={{ textAlign: 'center', width: '100px' }}>
                               {MasterData.patente}
                             </td>
-                              <td style={{ textAlign: 'center', width:'60px' }}>
+                            <td style={{ textAlign: 'center', width: '60px' }}>
                               {MasterData.aduana}
                             </td>
-                              <td style={{ textAlign: 'center', width:'100px' }}>
+                            <td style={{ textAlign: 'center', width: '100px' }}>
                               {MasterData.pedimento}
                             </td>
-                              <td style={{ textAlign: 'center', width:'200px' }}>
+                            <td style={{ textAlign: 'center', width: '200px' }}>
                               {MasterData.estatus}
                             </td>
                             <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.comentarios
-      : 'Clasificacion Incorrecta'
+    props.detail.comentariosSightLine
+      ? props.detail.comentariosSightLine
+      : ''
   )
   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) {
-    return http.get<DTO2096InvoiceStatus[]>(`/AmazonInvoice/AmazonInvoiceStatusGET?Invoice=${Invoice}`)
+  AmazonFacturasPagadasGET(Inicio: string, Fin: string) {
+    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) {
-    return http.get<ArrayBuffer>(`/AmazonInvoice/ExceptionsFileAmazonGET?id=${id}`, {responseType: 'arraybuffer'})
+  NoPartesAmazonFinal(id: number) {
+    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/Clientes/ZincInternacional/Rpt1868Facturas.tsx

@@ -1,25 +1,19 @@
-import { FC, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Alert, Button, Card, Col, Form, Modal, Row, Table } from 'react-bootstrap'
 import { IconContext } from 'react-icons'
 import { BsCloudArrowUpFill, BsFileEarmarkExcel, BsFilePdfFill, BsFillPencilFill, BsSearch } from 'react-icons/bs'
 import { MsgInformativo } from '../../Utils/Toast/msgInformativo'
 import { FaPeopleArrows, FaRegFile, FaWarehouse } from 'react-icons/fa'
-
 import I1868CatClaveSAT from './Interfaces/I1868CatClaveSAT'
 import I1868CatDestinos from './Interfaces/I1868CatDestinos'
 import I1868FacturaDetalle from './Interfaces/I1868FacturaDetalle'
-
 import DTO1868Factura from './DTO/DTO1868Factura'
 import DTO1868ReporteFactura from './DTO/DTO1868ReporteFactura'
 import DTO1868Clientes from './DTO/DTO1868Clientes'
-import DTO1868FacturaDetalle from './DTO/DTO1868FacturaDetalle'
-
 import FService from './Services/Facturas.Services'
 import FileManager from '../../Utils/FileManager/FileManager'
-
 import { Cat1868Destinos } from './Catalogos/Cat1868Destinos'
 import { Cat1868Responsables } from './Catalogos/Cat1868Responsables'
-
 import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from '../../../store/store'
 import { populateCatResponsables } from '../../../store/features/Clientes/1868/Cat1868ResponsablesSlice'
@@ -27,9 +21,8 @@ import { populateCatClaveSAT } from '../../../store/features/Clientes/1868/Cat18
 import { populateCatDestinos } from '../../../store/features/Clientes/1868/Cat1868DestinosSlice'
 import { populateFacturaDetalle, toggleRow } from '../../../store/features/Clientes/1868/Data1868FacturaDetalleSlice'
 import * as XLSX from 'xlsx'
-import '../../../css/zincinternacional.css'
+import '../../../css/Company.css'
 import { Rpt1868FacturasDetalle } from './Rpt1868FacturasDetalle'
-import FileManagerDS from '../../../Services/Utils/FileManager.Services'
 import { MdCloudUpload } from 'react-icons/md'
 
 interface IProps {}
@@ -38,7 +31,6 @@ export default function Rpt1868Facturas (props:IProps) {
   const dispatch = useDispatch()
   const mCatDestinos = useSelector((state: RootState) => state.Cat1868Destinos.Cat1868Destinos)
   const mCatResponsables = useSelector((state: RootState) => state.Cat1868Responsables.Cat1868Responsables)
-  //const mDataFacturaDetalle = useSelector((state: RootState) => state.Data1868FacturaDetalle.Data1868FacturaDetalle)
   const [UserId, setUserId] = useState(() => {
     const stickyValue = window.localStorage.getItem('UserId')
     return stickyValue !== null ? JSON.parse(stickyValue) : 0
@@ -69,7 +61,6 @@ export default function Rpt1868Facturas (props:IProps) {
   const [IDDestino, setIDDestino] = useState(0)
   const [IDResponsable, setIDResponsable] = useState(0)
   const [Responsable, setResponsable] = useState('')
-  //const [Referencia, setReferencia] = useState('')
   const [show, setShowMsg] = useState(false)
   const [ShowModal, setShowModal] = useState(false)
   const [header, setHeader] = useState('')

src/Components/Corresponsales/Anticipos/Anticipos.tsx

@@ -1,614 +0,0 @@
-import React, { FC, useEffect, useState } from 'react'
-import { Alert, Button, Col, Container, Form, Modal, Row } from 'react-bootstrap'
-import { IconContext } from 'react-icons'
-import {
-  BsCash,
-  BsCheckCircle,
-  BsCheckCircleFill,
-  BsEraserFill,
-  BsFileEarmarkPdf,
-  BsFillXCircleFill,
-  BsPencilFill,
-  BsQuestionOctagonFill,
-} from 'react-icons/bs'
-import { MsgInformativo } from '../../Utils/Toast/msgInformativo'
-import 'react-flexy-table/dist/index.css'
-import DTOItems from '../../../DTO/Corresponsales/DTOItems'
-import CAnticiposDataService from '../../../Services/Corresponsalias/Corresponsales.Anticipos.Services'
-
-import {
-  populateCorresponsalesAnticipos,
-  addCorresponsalesAnticipos,
-  deleteCorresponsalesAnticipos,
-  updateCorresponsalesAnticipos,
-} from '../../../store/features/Corresponsales/CorresponsalesAnticiposSlice'
-import ICorresponsalAnticipos from '../../../Interfaces/Corresponsales/ICorresponsalAnticipos'
-import { useDispatch, useSelector } from 'react-redux'
-import { RootState } from '../../../store/store'
-import { AgGridReact } from 'ag-grid-react'
-import { RowClickedEvent } from 'ag-grid-community'
-import { BiCoinStack } from 'react-icons/bi'
-import * as CurrencyFormat from 'react-currency-format'
-import FileManager from '../../Utils/FileManager/FileManager'
-import DTOAnticiposAutoriza from '../../../DTO/Corresponsales/DTOAnticiposAutoriza'
-
-interface ItemList {
-  id: number
-  item: string
-}
-
-interface IProps {
-  IDTrafico: number
-  closeCRUDItems: (arg: boolean) => void
-  canDelete: boolean
-}
-
-export const Anticipos: FC<IProps> = (props) => {
-  const [UserId, setUserId] = useState(() => {
-    const stickyValue = window.localStorage.getItem('UserId')
-    return stickyValue !== null ? JSON.parse(stickyValue) : 0
-  })
-  const [Depto, setDept] = useState(() => {
-    const Depto = window.localStorage.getItem('Departamento')
-    return Depto !== null ? JSON.parse(Depto) : ''
-  })
-  const mCAnticipos = useSelector((state: RootState) => state.CAnticipos.CorresponsalesAnticipos)
-  const [allItems, setAllItems] = useState<DTOItems[]>([])
-  const [filteredData, setFilteredData] = useState<ICorresponsalAnticipos[]>([])
-  const [IdAnticipo, setIdAnticipo] = useState(0)
-  const [Anticipo, setAnticipo] = useState(0)
-  const [Moneda, setMoneda] = useState(2)
-  const [Financiado, setFinanciado] = useState(0)
-  const [Concepto, setConcepto] = useState('')
-  const [header, setHeader] = useState('')
-  const [msgColor, setMsgColor] = React.useState('primary')
-  const [show, setShowMsg] = useState(false)
-  const [msg, setMsg] = useState('')
-  const [msgDialog, setMsgDialog] = useState(false)
-  const [MsgDialogFileManager, setMsgDialogFileManager] = useState(false)
-  const [msgDialogFileManagerConta, setMsgDialogFileManagerConta] = useState(false)
-  const gridRef = React.useRef<any>(null)
-  const [deleteFile, setDeleteFile] = useState(false)
-  const [columnDefs] = useState([
-    Depto === 'Corresponsalias'
-      ? {
-          field: 'id',
-          headerName: 'Acciones',
-          width: 110,
-          sortable: true,
-          filter: true,
-          cellRenderer: (params: any) => {
-            return (
-              <div>
-                <IconContext.Provider value={{ color: 'blue', size: '18px' }}>
-                  <BsPencilFill
-                    onClick={() => {
-                      loadRow(params.data.id)
-                    }}
-                    style={{ cursor: 'pointer' }}
-                  />
-                </IconContext.Provider>
-                &nbsp;&nbsp;&nbsp;
-                <IconContext.Provider value={{ color: 'red', size: '20px' }}>
-                  <BsFileEarmarkPdf
-                    onClick={() => {
-                      viewDoc(params.value)
-                      //getFileContent(params.value)
-                    }}
-                    style={{ cursor: 'pointer' }}
-                  />
-                </IconContext.Provider>
-              </div>
-            )
-          },
-        }
-      : {
-          field: 'id',
-          headerName: 'id',
-          width: 60,
-          sortable: false,
-          filter: false,
-          visible: false,
-        },
-    {
-      field: 'anticipo',
-      headerName: 'Anticipo',
-      width: 120,
-      sortable: true,
-      filter: true,
-      cellRenderer: (params: any) => {
-        return (
-          <CurrencyFormat
-            value={params.value}
-            displayType={'text'}
-            thousandSeparator={true}
-            prefix={'$'}
-            decimalScale={2}
-            fixedDecimalScale={true}
-          />
-        )
-      },
-    },
-    {
-      field: 'moneda',
-      headerName: 'Moneda',
-      width: 105,
-      sortable: true,
-      filter: true,
-      cellRenderer: (params: any) => {
-        if (params.value === 1) {
-          return (
-            <IconContext.Provider value={{ color: '#E5E041', size: '18px' }}>
-              <BiCoinStack /> Pesos
-            </IconContext.Provider>
-          )
-        } else if (params.value === 2) {
-          return (
-            <IconContext.Provider value={{ color: 'green', size: '18px' }}>
-              <BsCash /> Dollar
-            </IconContext.Provider>
-          )
-        } else return '?'
-      },
-    },
-    {
-      field: 'financiado',
-      headerName: '¿Financiado?',
-      width: 135,
-      sortable: true,
-      filter: true,
-      cellRenderer: (params: any) => {
-        if (params.value === 1)
-          return (
-            <div style={{ paddingLeft: '30px' }}>
-              <IconContext.Provider value={{ color: 'green', size: '20px' }}>
-                <BsCheckCircleFill />
-              </IconContext.Provider>
-            </div>
-          )
-        else
-          return (
-            <div style={{ paddingLeft: '30px' }}>
-              <IconContext.Provider value={{ color: 'red', size: '20px' }}>
-                <BsFillXCircleFill />
-              </IconContext.Provider>
-            </div>
-          )
-      },
-    },
-    {
-      field: 'id',
-      headerName: 'Autorizado',
-      width: 130,
-      sortable: true,
-      filter: true,
-      cellRenderer: (params: any) => {
-        if (params.data.autoriza === 0)
-          return (
-            <div style={{ paddingLeft: '30px' }}>
-              <IconContext.Provider value={{ color: 'red', size: '18px' }}>
-                <BsQuestionOctagonFill
-                  onClick={() => {
-                    return Depto === 'Contabilidad' ? viewDocConta(params.value) : '#'
-                  }}
-                  style={{ cursor: 'pointer' }}
-                />
-              </IconContext.Provider>
-            </div>
-          )
-        else
-          return (
-            <div style={{ paddingLeft: '30px' }}>
-              <IconContext.Provider value={{ color: 'green', size: '18px' }}>
-                <BsCheckCircleFill
-                  onClick={() => {
-                    viewDocConta(params.value)
-                  }}
-                  style={{ cursor: 'pointer' }}
-                />
-              </IconContext.Provider>
-            </div>
-          )
-      },
-    },
-    { field: 'concepto', headerName: 'Concepto', width: 350, sortable: true, filter: true },
-    { field: 'sSolicita', headerName: 'Solicita', width: 150, sortable: true, filter: true },
-    {
-      field: 'fhSolicita',
-      headerName: 'Fecha solicitud',
-      width: 200,
-      sortable: true,
-      filter: true,
-      cellRenderer: (params: any) => {
-        if (params.value !== null) {
-          return params.value.substring(0, 16)
-        }
-      },
-    },
-    { field: 'sAutoriza', headerName: 'Authoriza', width: 150, sortable: true, filter: true },
-    { field: 'fhAutoriza', headerName: 'Fecha autorizacion', width: 200, sortable: true, filter: true },
-  ])
-  const dispatch = useDispatch()
-
-  const cleanForm = () => {
-    setIdAnticipo(0)
-    setAnticipo(0)
-    setMoneda(2)
-    setConcepto('')
-  }
-
-  const saveForm = () => {
-    if (Concepto.length < 5) {
-      setHeader('Error')
-      setMsg('Para poder guardar la informacion, proporcione el concepto')
-      setShowMsg(true)
-      return
-    }
-    if (Anticipo === 0) {
-      setHeader('Error')
-      setMsg('Para poder guardar la informacion, proporcione el monto del anticipo')
-      setShowMsg(true)
-      return
-    }
-    const data: ICorresponsalAnticipos = {
-      id: IdAnticipo,
-      idTrafico: props.IDTrafico,
-      anticipo: Anticipo,
-      moneda: Moneda,
-      concepto: Concepto,
-      solicita: UserId,
-      fhSolicita: '',
-      financiado: Financiado,
-    }
-    CAnticiposDataService.Append(data)
-      .then((response) => {
-        if (response.status === 200) {
-          setHeader('Informativo')
-          setMsg('La informcion se guardo correctamente')
-          setShowMsg(true)
-          if (IdAnticipo === 0) dispatch(addCorresponsalesAnticipos(response.data))
-          else dispatch(updateCorresponsalesAnticipos(response.data))
-        }
-      })
-      .catch((e: Error) => {
-        setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
-        setShowMsg(true)
-        return
-      })
-  }
-
-  const loadRow = (idRow: number) => {
-    var tmpArray = mCAnticipos.filter(function (item) {
-      return item.id === idRow
-    })
-    setIdAnticipo(tmpArray[0].id)
-    setAnticipo(tmpArray[0].anticipo)
-    setConcepto(tmpArray[0].concepto)
-    setMoneda(tmpArray[0].moneda)
-  }
-
-  const viewDoc = (idRow: number) => {
-    loadRow(idRow)
-    setMsgDialogFileManager(true)
-  }
-
-  const viewDocConta = (idRow: number) => {
-    loadRow(idRow)
-    setMsgDialogFileManagerConta(true)
-  }
-
-  const authorizeItem = (id: number) => {
-    loadRow(id)
-    setMsgDialog(true)
-  }
-
-  const authorizeAmount = () => {
-    const data: DTOAnticiposAutoriza = {
-      id: IdAnticipo,
-      idUsuario: UserId,
-    }
-    CAnticiposDataService.Autoriza(data)
-      .then((response) => {
-        if (response.status == 200) {
-          dispatch(updateCorresponsalesAnticipos(response.data))
-          setMsgDialog(false)
-        }
-      })
-      .catch((e: Error) => {
-        setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
-        setShowMsg(true)
-        return
-      })
-  }
-
-  const deleteItem = () => {
-    CAnticiposDataService.Delete(IdAnticipo)
-      .then((response) => {
-        if (response.status == 200) {
-          dispatch(deleteCorresponsalesAnticipos(IdAnticipo))
-          setMsgDialog(false)
-        }
-      })
-      .catch((e: Error) => {
-        setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
-        setShowMsg(true)
-        return
-      })
-  }
-
-  useEffect(() => {
-    CAnticiposDataService.getAll(props.IDTrafico)
-      .then((response) => {
-        dispatch(populateCorresponsalesAnticipos(response.data))
-        setFilteredData(mCAnticipos)
-      })
-      .catch((e: Error) => {
-        setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
-        setShowMsg(true)
-        return
-      })
-  }, [props.IDTrafico])
-
-  useEffect(() => {
-    const result = mCAnticipos.filter((row) => row.id > 0 && row.idTrafico === props.IDTrafico)
-  }, [mCAnticipos])
-
-  return (
-    <div>
-      <Container className='labelSize13px'>
-        <Row className={props.canDelete ? 'visible' : 'invisible heightZero'}>
-          <Col xs='12'>
-            <input
-              type='text'
-              className='form-control genericSelect'
-              name='Concepto'
-              id='Concepto'
-              style={{ height: '30px' }}
-              value={Concepto}
-              placeholder='Proporcione el concepto'
-              onChange={(e) => {
-                setConcepto(e.target.value)
-              }}
-            />
-          </Col>
-        </Row>
-        <Row
-          style={{ paddingBottom: '5', paddingTop: '15' }}
-          className={props.canDelete ? 'visible' : 'invisible heightZero'}
-        >
-          <Col md='auto' xs={1}>
-            <Button
-              variant='warning'
-              size='sm'
-              onClick={() => {
-                cleanForm()
-              }}
-            >
-              <BsEraserFill />
-              &nbsp;Limpiar
-            </Button>
-          </Col>
-          <Col xs={3}>
-            <Form.Control type='hidden' id='IdAnticipo' size='sm' value={IdAnticipo} placeholder='id' disabled={true} />
-          </Col>
-          <Col xs={2}>
-            <CurrencyFormat
-              value={Anticipo}
-              displayType={'input'}
-              thousandSeparator={true}
-              prefix={'$'}
-              onValueChange={(values: any) => {
-                const { formattedValue, value } = values
-                setAnticipo(value)
-              }}
-              style={{
-                fontSize: '18px',
-                backgroundColor: '#F5FFED',
-                border: '2px solid #25D05B',
-                width: '150px',
-                textAlign: 'right',
-                borderRadius: '10px',
-              }}
-            />
-          </Col>
-          <Col xs={1}>
-            <Form.Control
-              as='select'
-              className='form-select form-select-sm'
-              value={Moneda}
-              onChange={(e) => {
-                setMoneda(parseInt(e.target.value))
-              }}
-            >
-              <option value='1'>Pesos</option>
-              <option value='2'>Dolares</option>
-            </Form.Control>
-          </Col>
-          <Col xs={2}>
-            <Form.Control
-              as='select'
-              className='form-select form-select-sm'
-              value={Financiado}
-              onChange={(e) => {
-                setFinanciado(parseInt(e.target.value))
-              }}
-            >
-              <option value='0'>No financiado</option>
-              <option value='1'>Financiado</option>
-            </Form.Control>
-          </Col>
-          <Col xs={2}></Col>
-          <Col xs={1}>
-            <Button
-              variant='primary'
-              size='sm'
-              onClick={() => {
-                saveForm()
-              }}
-            >
-              <BsCheckCircle />
-              &nbsp;Guardar
-            </Button>
-          </Col>
-        </Row>
-        <Row style={{ paddingBottom: 5 }}>
-          <Col xs={12}>
-            <div className='ag-theme-alpine' style={{ height: 500, width: '100%' }}>
-              <AgGridReact
-                rowData={mCAnticipos.filter((p) => p.id !== 0)}
-                columnDefs={columnDefs}
-                pagination={true}
-                paginationAutoPageSize={true}
-                ref={gridRef}
-                rowSelection={'single'}
-                rowMultiSelectWithClick={true}
-                /*  onRowClicked={(e) => getParams(e)} */
-              ></AgGridReact>
-            </div>
-          </Col>
-        </Row>
-      </Container>
-      <MsgInformativo
-        show={show}
-        msg={msg}
-        header={header}
-        msgColor={msgColor}
-        closeToast={() => {
-          setShowMsg(false)
-        }}
-      ></MsgInformativo>
-      <Modal show={msgDialog} onHide={() => setMsgDialog(false)} size='lg'>
-        <Modal.Body>
-          <Alert variant='primary'>
-            ¿Esta seguro de eliminar ?: '
-            <br /> <p>{Concepto}</p>
-            Por el monto de:
-            <span style={{ backgroundColor: 'red', color: 'yellow', fontWeight: 'bold', fontSize: '20px' }}>
-              <CurrencyFormat
-                value={Anticipo}
-                displayType={'text'}
-                thousandSeparator={true}
-                prefix={'$'}
-                decimalScale={2}
-                fixedDecimalScale={true}
-              />{' '}
-              {Moneda === 1 ? 'Pesos' : 'Dolares'}
-            </span>
-          </Alert>
-        </Modal.Body>
-        <Modal.Footer>
-          <Row>
-            <Col xs={1}>
-              <Button variant='secondary' onClick={() => setMsgDialog(false)} size='sm'>
-                Cerrar
-              </Button>
-            </Col>
-            <Col xs={5} style={{ paddingLeft: '550px', paddingRight: '0px' }}>
-              &nbsp;
-            </Col>
-            <Col xs={1}>
-              <Button variant='primary' onClick={deleteItem} size='sm'>
-                Si
-              </Button>
-            </Col>
-          </Row>
-        </Modal.Footer>
-      </Modal>
-      <Modal show={msgDialog} onHide={() => setMsgDialog(false)} size='lg'>
-        <Modal.Body>
-          <Alert variant='primary'>
-            ¿Esta seguro de autorizar?
-            <br /> <p>{Concepto}</p>
-            Por el monto de:
-            <span style={{ backgroundColor: 'red', color: 'yellow', fontWeight: 'bold', fontSize: '20px' }}>
-              <CurrencyFormat
-                value={Anticipo}
-                displayType={'text'}
-                thousandSeparator={true}
-                prefix={'$'}
-                decimalScale={2}
-                fixedDecimalScale={true}
-              />{' '}
-              {Moneda === 1 ? 'Pesos' : 'Dolares'}
-            </span>
-          </Alert>
-        </Modal.Body>
-        <Modal.Footer>
-          <Row>
-            <Col xs={1}>
-              <Button variant='secondary' onClick={() => setMsgDialog(false)} size='sm'>
-                Cerrar
-              </Button>
-            </Col>
-            <Col xs={5} style={{ paddingLeft: '550px', paddingRight: '0px' }}>
-              &nbsp;
-            </Col>
-            <Col xs={1}>
-              <Button variant='danger' onClick={authorizeAmount} size='sm'>
-                Autorizar
-              </Button>
-            </Col>
-          </Row>
-        </Modal.Footer>
-      </Modal>
-      <Modal show={MsgDialogFileManager} onHide={() => setMsgDialogFileManager(false)} size='lg'>
-        <Modal.Body>
-          <FileManager
-            width={750}
-            height={200}
-            IDProcess={1}
-            IdFile={IdAnticipo}
-            IDUser={UserId}
-            FileName={''}
-            canDelete={Depto === 'Contabilidad'}
-            FileType={['pdf']}
-            Leyenda={'Seleccione el archivo, arrastrelo hasta aqui y sueltelo para subirlo al servidor..'}
-            onAppendFM={function (idFile: number): void {}}
-          />
-        </Modal.Body>
-        <Modal.Footer>
-          <Row>
-            <Col xs={11}>&nbsp;</Col>
-            <Col xs={1}>
-              <Button variant='secondary' onClick={() => setMsgDialogFileManager(false)} size='sm'>
-                Cerrar
-              </Button>
-            </Col>
-          </Row>
-        </Modal.Footer>
-      </Modal>
-      <Modal show={msgDialogFileManagerConta} onHide={() => setMsgDialogFileManagerConta(false)} size='lg'>
-        <Modal.Body>
-          <FileManager
-            width={750}
-            height={200}
-            IDProcess={4}
-            IdFile={IdAnticipo}
-            IDUser={UserId}
-            FileName={''}
-            canDelete={false}
-            FileType={['pdf']}
-            Leyenda={'Seleccione el archivo, arrastrelo hasta aqui y sueltelo para subirlo al servidor...'}
-            onAppendFM={function (idFile: number): void {
-              authorizeAmount()
-            }}
-          />
-        </Modal.Body>
-        <Modal.Footer>
-          <Row>
-            <Col xs={11}>&nbsp;</Col>
-            <Col xs={1}>
-              <Button variant='secondary' onClick={() => setMsgDialogFileManagerConta(false)} size='sm'>
-                Cerrar
-              </Button>
-            </Col>
-          </Row>
-        </Modal.Footer>
-      </Modal>
-    </div>
-  )
-}

src/Components/Corresponsales/CatProveedores/CatProveedores.tsx

@@ -1,269 +0,0 @@
-import { RowClickedEvent } from 'ag-grid-community'
-import { AgGridReact } from 'ag-grid-react'
-import React, { FC, useEffect, useState } from 'react'
-import { Alert, Button, Card, Col, Form, Modal, Row } from 'react-bootstrap'
-import DataTable from 'react-data-table-component'
-import { IconContext } from 'react-icons'
-import { FaEraser, FaTimesCircle } from 'react-icons/fa'
-import { useDispatch, useSelector } from 'react-redux'
-import ICatProveedores from '../../../Interfaces/Catalogos/ICatProveedores'
-import ProveedoresDataService from '../../../Services/Catalogos/Proveedores.Services'
-import {
-  addCatProveedores,
-  deleteCatProveedores,
-  populateCatProveedores,
-} from '../../../store/features/CatProveedores/CatProveedoresSlice'
-import { RootState } from '../../../store/store'
-import { MsgInformativo } from '../../Utils/Toast/msgInformativo'
-import { ControlledInput } from './ControlledInput/ControlledInput'
-
-interface IProps {
-  canDelete: boolean
-  clasificacion: number
-}
-
-export const CatProveedores: FC<IProps> = (props) => {
-  const dispatch = useDispatch()
-  const mProveedores = useSelector((state: RootState) => state.CatProveedores.CatalogoProveedores)
-  const [DTData, setDTData] = useState<ICatProveedores[]>([])
-  const [Proveedor, setProveedor] = useState('')
-  const [IDProveedor, setIDProveedor] = useState(0)
-  const [header, setHeader] = useState('')
-  const [msgColor, setMsgColor] = React.useState('primary')
-  const [show, setShowMsg] = useState(false)
-  const [msg, setMsg] = useState('')
-  const [MsgTime, setMsgTime] = useState(3000)
-  const [DialogTabs, setDialogTabs] = useState(false)
-
-  const columnsProveedores = [
-    {
-      name: 'id',
-      width: '10%',
-      selector: (row: ICatProveedores) => row.id,
-      sortable: true,
-    },
-    {
-      name: 'Proveedor',
-      width: '75%',
-      cell: (row: ICatProveedores) => {
-        return (
-          <ControlledInput
-            id={row.id}
-            value={row.nombre}
-            disabled={false}
-            mode={2}
-            clasificacion={props.clasificacion}
-          />
-        )
-      },
-    },
-    {
-      name: 'Elimina',
-      cell: (row: ICatProveedores) => (
-        <div
-          style={{ textAlign: 'center', cursor: 'pointer' }}
-          onClick={() => {
-            setIDProveedor(row.id)
-            setProveedor(row.nombre)
-            setDialogTabs(true)
-          }}
-        >
-          <IconContext.Provider value={{ color: 'red', size: '25px' }}>
-            <FaTimesCircle />
-          </IconContext.Provider>
-        </div>
-      ),
-    },
-  ]
-
-  useEffect(() => {
-    ProveedoresDataService.getAll(props.clasificacion)
-      .then((response) => {
-        //setDTData(response.data)
-        dispatch(populateCatProveedores(response.data))
-      })
-      .catch((e: Error) => {
-        setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
-        setShowMsg(true)
-        return
-      })
-  }, [])
-
-  const cleanForm = () => {
-    setIDProveedor(0)
-    setProveedor('')
-  }
-
-  const saveForm = () => {
-    const data: ICatProveedores = {
-      id: IDProveedor,
-      nombre: Proveedor,
-      clasificacion: props.clasificacion,
-    }
-    ProveedoresDataService.Append(data)
-      .then((response) => {
-        if (response.status == 200) {
-          setHeader('Informativo')
-          setMsg('El proveedor se agrego exitosamente')
-          setShowMsg(true)
-          setDialogTabs(false)
-          if (data.id === 0) dispatch(addCatProveedores(response.data))
-        }
-      })
-      .catch((e: Error) => {
-        setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
-        setShowMsg(true)
-        return
-      })
-  }
-
-  const deleteItem = () => {
-    ProveedoresDataService.Delete(IDProveedor)
-      .then((response) => {
-        if (response.status === 200) {
-          setHeader('Informativo')
-          setMsg('El provedor se ha eliminado')
-          setShowMsg(true)
-          setDialogTabs(false)
-          dispatch(deleteCatProveedores(IDProveedor))
-          return
-        }
-      })
-      .catch((e: Error) => {
-        setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
-        setShowMsg(true)
-        return
-      })
-  }
-
-  return (
-    <div>
-      <Card style={{}}>
-        <Card.Body>
-          <Card.Subtitle className='mb-2 text-muted'>
-            <Row
-              style={{ paddingBottom: '5', paddingTop: '15' }}
-              className={props.canDelete ? 'visible' : 'invisible heightZero'}
-            >
-              <Col
-                xs={1}
-                style={{ textAlign: 'right', paddingTop: '5px', cursor: 'pointer' }}
-                onClick={() => {
-                  cleanForm()
-                }}
-              >
-                <IconContext.Provider value={{ color: 'orange', size: '25px' }}>
-                  <FaEraser />
-                </IconContext.Provider>
-              </Col>
-              <Col>
-                <Form.Control type='hidden' id='IdItem' size='sm' value={IDProveedor} disabled={true} />
-              </Col>
-              <Col xs={1}></Col>
-              <Col xs={6}>
-                {/* <Form.Control
-                  type='text'
-                  id='FacturaTerceros'
-                  size='sm'
-                  value={Proveedor}
-                  placeholder='Proveedor'
-                  pattern='[a-zA-Z-0-9 ]*'
-                  onChange={(e) => setProveedor((v) => (e.target.validity.valid ? e.target.value : v))}
-                /> */}
-                <input
-                  type='text'
-                  className='form-control genericSelect'
-                  name='Proveedor'
-                  id='Proveedor'
-                  style={{ height: '30px' }}
-                  value={Proveedor}
-                  placeholder='Proporcione el nombre del proveedor'
-                  onChange={(e) => {
-                    setProveedor(e.target.value)
-                  }}
-                />
-              </Col>
-              <Col xs={1}></Col>
-              <Col xs={1}>
-                <Button
-                  variant='primary'
-                  size='sm'
-                  onClick={() => {
-                    saveForm()
-                  }}
-                >
-                  Agregar
-                </Button>
-              </Col>
-              <Col>&nbsp;</Col>
-            </Row>
-          </Card.Subtitle>
-          <DataTable
-            noHeader
-            defaultSortFieldId={'id'}
-            defaultSortAsc={true}
-            pagination
-            highlightOnHover
-            columns={columnsProveedores}
-            data={mProveedores.filter(function (el) {
-              return el.id > 0
-            })}
-          />
-        </Card.Body>
-      </Card>
-      <MsgInformativo
-        show={show}
-        msg={msg}
-        header={header}
-        msgColor={msgColor}
-        time={MsgTime}
-        closeToast={() => {
-          setShowMsg(false)
-        }}
-      />
-      <Modal
-        show={DialogTabs}
-        onHide={() => {
-          setDialogTabs(false)
-        }}
-        size='sm'
-      >
-        <Modal.Body>
-          <Alert variant='primary'>
-            <b>¿Esta seguro de eliminar?</b>
-            <br />
-            <h5> {Proveedor} </h5>
-          </Alert>
-        </Modal.Body>
-        <Modal.Footer>
-          <Row>
-            <Col xs={6} style={{ textAlign: 'left', paddingRight: '100px' }}>
-              <Button
-                variant='danger'
-                onClick={deleteItem}
-                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>
-    </div>
-  )
-}

src/Components/Corresponsales/CatProveedores/ControlledInput/ControlledInput.tsx

@@ -1,77 +0,0 @@
-import React, { FC, useState } from 'react'
-import { MsgInformativo } from '../../../Utils/Toast/msgInformativo'
-import ProvDataService from '../../../../Services/Catalogos/Proveedores.Services'
-import { useDispatch } from 'react-redux'
-import ICatProveedores from '../../../../Interfaces/Catalogos/ICatProveedores'
-import { updateCatProveedores } from '../../../../store/features/CatProveedores/CatProveedoresSlice'
-
-interface IProps {
-  id: number
-  value: any
-  disabled?: boolean
-  mode: number // 1: Number, 2: String
-  clasificacion: number
-}
-
-export const ControlledInput: FC<IProps> = (props) => {
-  const dispatch = useDispatch()
-  const [id, setid] = useState(props.id)
-  const [value, setValue] = useState(props.value)
-  const [header, setHeader] = useState('')
-  const [msgColor, setMsgColor] = React.useState('primary')
-  const [show, setShowMsg] = useState(false)
-  const [msg, setMsg] = useState('')
-
-  const onChange = (event: any) => {
-    setValue(event.target.value)
-  }
-  const handleKeyDown = (event: any) => {
-    if (event.key === 'Enter') {
-      if (isNaN(event.target.value) && props.mode === 1) {
-        alert('Valor no valido!')
-        return
-      }
-      const data: ICatProveedores = {
-        id: id,
-        nombre: value,
-        clasificacion: props.clasificacion,
-      }
-      ProvDataService.Append(data)
-        .then((response) => {
-          if (response.status == 200) {
-            dispatch(updateCatProveedores(response.data))
-            setHeader('Informativo')
-            setMsg('La informacion se guardo exitosamente')
-            setShowMsg(true)
-            return
-          }
-        })
-        .catch((e: Error) => {
-          setHeader('Error')
-          setMsg('Ocurrio un error: ' + e)
-          setShowMsg(true)
-          return
-        })
-    }
-  }
-  return (
-    <>
-      <input
-        value={value}
-        onChange={onChange}
-        disabled={false}
-        onKeyDown={(e) => handleKeyDown(e)}
-        style={{ width: '75%' }}
-      />
-      <MsgInformativo
-        show={show}
-        msg={msg}
-        header={header}
-        msgColor={msgColor}
-        closeToast={() => {
-          setShowMsg(false)
-        }}
-      />
-    </>
-  )
-}

src/Components/Corresponsales/Contenedores/Contenedores.tsx

@@ -1,252 +0,0 @@
-import React, { FC, useEffect, useState } from 'react'
-import { Button, Card, Col, Form, Row } from 'react-bootstrap'
-import DataTable from 'react-data-table-component'
-import { IconContext } from 'react-icons'
-import { FaEraser, FaTimesCircle } from 'react-icons/fa'
-import { useDispatch, useSelector } from 'react-redux'
-import ICorresponsalContenedores from '../../../Interfaces/Corresponsales/ICorresponsalContenedores'
-import CConDataService from '../../../Services/Corresponsalias/Corresponsales.Contenedores.Services'
-import { RootState } from '../../../store/store'
-import { MsgInformativo } from '../../Utils/Toast/msgInformativo'
-import CContDataService from '../../../Services/Corresponsalias/Corresponsales.Contenedores.Services'
-import {
-  addCorresponsalesContenedores,
-  deleteCorresponsalesContenedores,
-} from '../../../store/features/Corresponsales/CorresponsalesContenedoresSlice'
-import { ControlledInput } from './ControlledInput/ControlledInput'
-
-interface IProps {
-  IDTrafico: number
-  canDelete: boolean
-}
-
-export const Contenedores: FC<IProps> = (props) => {
-  const dispatch = useDispatch()
-  const mCContenedores = useSelector((state: RootState) => state.CCData.CorresponsalesContenedores)
-  const [DTData, setDTData] = useState<ICorresponsalContenedores[]>([])
-  const [Contenedor, setContenedor] = useState('')
-  const [IDContenedor, setIDContenedor] = useState(0)
-  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 columnsConcepts = [
-    {
-      name: 'id',
-      width: '10%',
-      selector: (row: ICorresponsalContenedores) => row.id,
-      sortable: true,
-    },
-    {
-      name: 'Contenedor',
-      width: '75%',
-      cell: (row: ICorresponsalContenedores) => {
-        return (
-          <ControlledInput id={row.id} value={row.contenedor} disabled={false} mode={2} IDTrafico={props.IDTrafico} />
-        )
-      },
-    },
-    {
-      name: 'Elimina',
-      cell: (row: ICorresponsalContenedores) => (
-        <div
-          style={{ textAlign: 'center', cursor: 'pointer' }}
-          onClick={() => {
-            setIDContenedor(row.id)
-            setContenedor(row.contenedor)
-            setDialogTabs(true)
-          }}
-        >
-          <IconContext.Provider value={{ color: 'red', size: '25px' }}>
-            <FaTimesCircle />
-          </IconContext.Provider>
-        </div>
-      ),
-    },
-  ]
-
-  useEffect(() => {
-    CConDataService.getAll(props.IDTrafico)
-      .then((response) => {
-        setDTData(response.data)
-      })
-      .catch((e: Error) => {
-        setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
-        setShowMsg(true)
-        return
-      })
-  }, [])
-
-  const saveForm = () => {
-    const data: ICorresponsalContenedores = {
-      id: IDContenedor,
-      contenedor: Contenedor,
-      idTrafico: props.IDTrafico,
-      fSemaforo: '',
-      semaforo: 0,
-    }
-    CContDataService.Append(data)
-      .then((response) => {
-        if (response.status == 200) {
-          if (data.id === 0) dispatch(addCorresponsalesContenedores(response.data))
-        }
-      })
-      .catch((e: Error) => {
-        setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
-        setShowMsg(true)
-        return
-      })
-  }
-
-  const deleteItem = () => {
-    CConDataService.Delete(IDContenedor)
-      .then((response) => {
-        if (response.status === 200) {
-          setHeader('Informativo')
-          setMsg(response.data.respuesta)
-          setShowMsg(true)
-          setDialogTabs(false)
-          dispatch(deleteCorresponsalesContenedores(IDContenedor))
-          return
-        }
-      })
-      .catch((e: Error) => {
-        setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
-        setShowMsg(true)
-        return
-      })
-  }
-
-  const cleanForm = () => {
-    setContenedor('')
-    setIDContenedor(0)
-  }
-
-  return (
-    <div>
-      <Card style={{}}>
-        <Card.Body>
-          <Card.Subtitle className='mb-2 text-muted'>
-            <Row
-              style={{ paddingBottom: '5', paddingTop: '15' }}
-              className={props.canDelete ? 'visible' : 'invisible heightZero'}
-            >
-              <Col
-                xs={1}
-                style={{ textAlign: 'right', paddingTop: '5px', cursor: 'pointer' }}
-                onClick={() => {
-                  cleanForm()
-                }}
-              >
-                <IconContext.Provider value={{ color: 'orange', size: '25px' }}>
-                  <FaEraser />
-                </IconContext.Provider>
-              </Col>
-              <Col>
-                <Form.Control
-                  type='hidden'
-                  id='IdItem'
-                  size='sm'
-                  value={IDContenedor}
-                  placeholder='Contenedor'
-                  disabled={true}
-                />
-              </Col>
-              <Col xs={1}></Col>
-              <Col xs={6}>
-                <Form.Control
-                  type='text'
-                  id='Contenedor'
-                  size='sm'
-                  value={Contenedor}
-                  placeholder='Contenedor'
-                  pattern='[a-zA-Z-0-9 ]*'
-                  onChange={(e) => setContenedor((v) => (e.target.validity.valid ? e.target.value : v))}
-                />
-              </Col>
-              <Col xs={1}></Col>
-              <Col xs={1}>
-                <Button
-                  variant='primary'
-                  size='sm'
-                  onClick={() => {
-                    saveForm()
-                  }}
-                >
-                  Agregar
-                </Button>
-              </Col>
-              <Col>&nbsp;</Col>
-            </Row>
-          </Card.Subtitle>
-          <DataTable
-            noHeader
-            defaultSortFieldId={'id'}
-            defaultSortAsc={true}
-            pagination
-            highlightOnHover
-            columns={columnsConcepts}
-            data={mCContenedores.filter(function (el) {
-              return el.id > 0
-            })}
-          />
-        </Card.Body>
-      </Card>
-      <MsgInformativo
-        show={show}
-        msg={msg}
-        header={header}
-        msgColor={msgColor}
-        time={2000}
-        closeToast={() => {
-          setShowMsg(false)
-        }}
-      />
-      {/*   <Modal
-        show={DialogTabs}
-        onHide={() => {
-          setDialogTabs(false)
-        }}
-        size='sm'
-      >
-        <Modal.Body>
-          <Alert variant='primary'>
-            <b>¿Esta seguro de eliminar?</b>
-            <br />
-            <h5> {Contenedor} </h5>
-          </Alert>
-        </Modal.Body>
-        <Modal.Footer>
-          <Row>
-            <Col xs={6} style={{ textAlign: 'left', paddingRight: '100px' }}>
-              <Button
-                variant='danger'
-                onClick={deleteItem}
-                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> */}
-    </div>
-  )
-}

src/Components/Corresponsales/Contenedores/ControlledInput/ControlledInput.tsx

@@ -1,79 +0,0 @@
-import React, { FC, useState } from 'react'
-import ICorresponsalContenedores from '../../../../Interfaces/Corresponsales/ICorresponsalContenedores'
-import { MsgInformativo } from '../../../Utils/Toast/msgInformativo'
-import CContDataService from '../../../../Services/Corresponsalias/Corresponsales.Contenedores.Services'
-import { updateCorresponsalesContenedores } from '../../../../store/features/Corresponsales/CorresponsalesContenedoresSlice'
-import { useDispatch } from 'react-redux'
-
-interface IProps {
-  id: number
-  value: any
-  disabled?: boolean
-  mode: number // 1: Number, 2: String
-  IDTrafico: number
-}
-
-export const ControlledInput: FC<IProps> = (props) => {
-  const dispatch = useDispatch()
-  const [id, setid] = useState(props.id)
-  const [value, setValue] = useState(props.value)
-  const [header, setHeader] = useState('')
-  const [msgColor, setMsgColor] = React.useState('primary')
-  const [show, setShowMsg] = useState(false)
-  const [msg, setMsg] = useState('')
-
-  const onChange = (event: any) => {
-    setValue(event.target.value)
-  }
-  const handleKeyDown = (event: any) => {
-    if (event.key === 'Enter') {
-      if (isNaN(event.target.value) && props.mode === 1) {
-        alert('Valor no valido!')
-        return
-      }
-      const data: ICorresponsalContenedores = {
-        id: id,
-        contenedor: value,
-        idTrafico: props.IDTrafico,
-        fSemaforo: '',
-        semaforo: 0,
-      }
-      CContDataService.Append(data)
-        .then((response) => {
-          if (response.status == 200) {
-            dispatch(updateCorresponsalesContenedores(response.data))
-            setHeader('Informativo')
-            setMsg('La informacion se guardo exitosamente')
-            setShowMsg(true)
-            return
-          }
-        })
-        .catch((e: Error) => {
-          setHeader('Error')
-          setMsg('Ocurrio un error: ' + e)
-          setShowMsg(true)
-          return
-        })
-    }
-  }
-  return (
-    <>
-      <input
-        value={value}
-        onChange={onChange}
-        disabled={props.disabled}
-        onKeyDown={(e) => handleKeyDown(e)}
-        style={{ width: '75%' }}
-      />
-      <MsgInformativo
-        show={show}
-        msg={msg}
-        header={header}
-        msgColor={msgColor}
-        closeToast={() => {
-          setShowMsg(false)
-        }}
-      />
-    </>
-  )
-}

src/Components/Corresponsales/Contenedores/SelectContainer.tsx

@@ -1,326 +0,0 @@
-import { FC, useEffect, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { RootState } from '../../../store/store'
-import CContDataService from '../../../Services/Corresponsalias/Corresponsales.Contenedores.Services'
-import ICorresponsalContenedores from '../../../Interfaces/Corresponsales/ICorresponsalContenedores'
-import { IconContext } from 'react-icons'
-import { BsFillCalendarCheckFill, BsFillCalendarDayFill, BsFillRecordFill, BsFillXCircleFill } from 'react-icons/bs'
-import {
-  deleteCorresponsalesContenedores,
-  updateCorresponsalesContenedores,
-} from '../../../store/features/Corresponsales/CorresponsalesContenedoresSlice'
-import { Alert, Button, Col, Form, Modal, Row } from 'react-bootstrap'
-import DatePicker from 'react-datepicker'
-import 'react-datepicker/dist/react-datepicker.css'
-import { isTypeNode } from 'typescript'
-
-interface IProps {
-  IDTrafico: number
-  Editable: boolean
-}
-
-export const SelectContainer: FC<IProps> = (props) => {
-  const dispatch = useDispatch()
-  const [toggleSelect, setToggleSelect] = useState(false)
-  const mCContenedores = useSelector((state: RootState) => state.CCData.CorresponsalesContenedores)
-  const [Contenedor, setContenedor] = useState('')
-  const [IDContenedor, setIDContenedor] = useState(0)
-  const [Placeholder, setPlaceholder] = useState('')
-  const [DialogTabs, setDialogTabs] = useState(false)
-  const [DialogAddDate, setDialogAddDate] = useState(false)
-  const [FSemaforo, setFSemaforo] = useState<Date | null>()
-  const [Semaforo, setSemaforo] = useState(0)
-
-  useEffect(() => {
-    setPlaceholder('(' + mCContenedores.filter((item) => item.id > 0).length + ') Contenedores')
-  }, [mCContenedores])
-
-  const loadInfo = (data: ICorresponsalContenedores) => {
-    setIDContenedor(data.id)
-    setContenedor(data.contenedor)
-  }
-
-  const handleKeyDown = (event: any) => {
-    if (event.key === 'Enter') {
-      const data: ICorresponsalContenedores = {
-        id: IDContenedor,
-        contenedor: Contenedor,
-        idTrafico: props.IDTrafico,
-        fSemaforo: FSemaforo ? adjustTimeZone(FSemaforo.toISOString()) : '',
-        semaforo: Semaforo,
-      }
-      CContDataService.Append(data)
-        .then((response) => {
-          if (response.status === 200) {
-            dispatch(updateCorresponsalesContenedores(response.data))
-            setContenedor('')
-            setToggleSelect(true)
-          }
-        })
-        .catch((e: Error) => {
-          return
-        })
-    }
-  }
-
-  const adjustTimeZone = (str: string): string => {
-    if (str) {
-      const original: any = new Date(str)
-      const real = new Date(original - original.getTimezoneOffset() * 60 * 1000)
-      return real.toISOString()
-    } else return ''
-  }
-
-  const updateItem = () => {
-    const data: ICorresponsalContenedores = {
-      id: IDContenedor,
-      contenedor: Contenedor,
-      idTrafico: props.IDTrafico,
-      fSemaforo: FSemaforo ? adjustTimeZone(FSemaforo.toISOString()) : '',
-      semaforo: Semaforo,
-    }
-    // console.log(JSON.stringify(data))
-    CContDataService.Append(data)
-      .then((response) => {
-        if (response.status === 200) {
-          setIDContenedor(0)
-          setContenedor('')
-          setDialogTabs(false)
-          dispatch(updateCorresponsalesContenedores(response.data))
-          return
-        }
-      })
-      .catch((e: Error) => {
-        return
-      })
-  }
-
-  const StrtoDate = (str: string): Date | null => {
-    if (str) {
-      const original: any = new Date(str)
-      return original
-    } else return null
-  }
-
-  return (
-    <div>
-      <div className='form-group'>
-        <div className='col-sm-12 parent'>
-          <div className='input-group'>
-            <input type='hidden' className='form-control' name='IDContenedor' id='IDContenedor' value={IDContenedor} />
-            <span className='input-group-addon sorroundImage'>
-              <img
-                src='http://reportes.gemcousa.com/images/Clean.png'
-                width='28'
-                height='28'
-                style={{ cursor: 'pointer' }}
-                alt=''
-                onClick={() => {
-                  setIDContenedor(0)
-                  setContenedor('')
-                }}
-              />
-            </span>
-            <input
-              type='text'
-              className='form-control genericSelect'
-              name='Contenedor'
-              id='Contenedor'
-              style={{ height: '30px' }}
-              value={Contenedor}
-              placeholder={Placeholder}
-              disabled={!props.Editable}
-              onChange={(e) => {
-                setContenedor(e.target.value)
-              }}
-              onKeyDown={(e) => handleKeyDown(e)}
-            />
-            <span className='input-group-addon sorroundImage'>
-              <img
-                src='http://reportes.gemcousa.com/images/caret.png'
-                width='28'
-                height='28'
-                style={{ cursor: 'pointer' }}
-                alt=''
-                onClick={() => {
-                  setToggleSelect(!toggleSelect)
-                }}
-              />
-            </span>
-            <div className='child' style={toggleSelect ? { visibility: 'visible' } : { visibility: 'hidden' }}>
-              <ul className='cleanLi'>
-                {mCContenedores
-                  ? mCContenedores
-                      .map((item, index) => {
-                        return item.id > 0 ? (
-                          <li key={item.id} onClick={() => loadInfo(item)}>
-                            <span
-                              onClick={() => {
-                                setDialogTabs(true)
-                              }}
-                            >
-                              <IconContext.Provider value={{ color: 'red', size: '15px' }}>
-                                <BsFillXCircleFill />
-                              </IconContext.Provider>
-                            </span>
-                            <span style={{ paddingLeft: '10px' }}>{item.contenedor}</span>
-                            <span
-                              onClick={() => {
-                                setFSemaforo(StrtoDate(item.fSemaforo))
-                                setSemaforo(item.semaforo)
-                                setDialogAddDate(true)
-                              }}
-                            >
-                              &nbsp;| {item.fSemaforo} |{' '}
-                              {item.fSemaforo ? (
-                                item.semaforo === 1 ? (
-                                  <IconContext.Provider value={{ color: 'red', size: '20px' }}>
-                                    <BsFillRecordFill />
-                                  </IconContext.Provider>
-                                ) : (
-                                  <IconContext.Provider value={{ color: '#4BFF59', size: '20px' }}>
-                                    <BsFillRecordFill />
-                                  </IconContext.Provider>
-                                )
-                              ) : (
-                                ''
-                              )}
-                              <span
-                                style={{
-                                  paddingLeft: '20px',
-                                  visibility: props.Editable && toggleSelect ? 'visible' : 'hidden',
-                                }}
-                              >
-                                <IconContext.Provider value={{ color: 'green', size: '15px' }}>
-                                  <BsFillCalendarCheckFill />
-                                </IconContext.Provider>
-                              </span>
-                            </span>
-                          </li>
-                        ) : (
-                          ''
-                        )
-                      })
-                      .reverse()
-                  : ''}
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div>
-      <Modal
-        show={DialogTabs}
-        onHide={() => {
-          setDialogTabs(false)
-        }}
-        size='sm'
-      >
-        <Modal.Body>
-          <Alert variant='primary'>
-            <b>¿Esta seguro de eliminar?</b>
-            <br />
-            <h5> {Contenedor} </h5>
-          </Alert>
-        </Modal.Body>
-        <Modal.Footer>
-          <Row>
-            <Col xs={6} style={{ textAlign: 'left', paddingRight: '100px' }}>
-              <Button
-                variant='danger'
-                onClick={updateItem}
-                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>
-
-      <Modal
-        show={DialogAddDate}
-        onHide={() => {
-          setDialogTabs(false)
-        }}
-        /*         size='sm' */
-      >
-        <Modal.Body>
-          <Alert variant='primary'>
-            <Row>
-              <Col xs={12}>
-                <b>¿Esta seguro de agregar fecha al contenedor: {Contenedor}?</b>
-              </Col>
-            </Row>
-            <Row style={{ paddingTop: '10px' }}>
-              <Col xs={4}></Col>
-              <Col xs={2}>Fecha</Col>
-              <Col xs={6}>
-                <DatePicker
-                  selected={FSemaforo}
-                  onChange={(date: any) => setFSemaforo(date)}
-                  showTimeSelect
-                  dateFormat='MM/dd/yyyy HH:mm:ss'
-                  placeholderText='No definido'
-                  isClearable
-                />
-              </Col>
-            </Row>
-            <Row style={{ paddingTop: '10px' }}>
-              <Col xs={5}></Col>
-              <Col xs={2}>Semaforo</Col>
-              <Col xs={5}>
-                <Form.Control
-                  as='select'
-                  onChange={(e) => {
-                    setSemaforo(parseInt(e.target.value))
-                  }}
-                  value={Semaforo}
-                  className='form-select form-select-sm'
-                >
-                  <option value='0'>-SELECCIONE-</option>
-                  <option value='1'>Rojo</option>
-                  <option value='2'>Verde</option>
-                </Form.Control>
-              </Col>
-            </Row>
-          </Alert>
-          <Row>
-            <Col xs={6} style={{ textAlign: 'left', paddingRight: '100px' }}>
-              <Button
-                variant='primary'
-                onClick={updateItem}
-                size='sm'
-                style={{ paddingRight: '20px', paddingLeft: '20px' }}
-              >
-                Guardar
-              </Button>
-            </Col>
-            <Col xs={6} style={{ textAlign: 'right' }}>
-              <Button
-                variant='secondary'
-                onClick={() => {
-                  setDialogAddDate(false)
-                }}
-                size='sm'
-              >
-                Cerrar
-              </Button>
-            </Col>
-          </Row>
-        </Modal.Body>
-      </Modal>
-    </div>
-  )
-}

src/Components/Corresponsales/CuentasComplementarias/CuentasComplementarias.tsx

@@ -1,569 +0,0 @@
-import React, { FC, useEffect, useState } from 'react'
-import { Alert, Card, Col, FloatingLabel, Form, Modal, Row } from 'react-bootstrap'
-import { IconContext } from 'react-icons'
-import { BsCloudArrowUpFill, BsFillPlusCircleFill } from 'react-icons/bs'
-import FileManager from '../../Utils/FileManager/FileManager'
-import CuentasComplementariasDS from '../../../Services/Corresponsalias/Corresponsales.CuentasComplementarias.Services'
-import MFileManagerDataService from '../../../Services/Utils/MFileManager.Service'
-import ICorresponsalCuentasComplementarias from '../../../Interfaces/Corresponsales/ICorresponsalCuentasComplementarias'
-import { MsgInformativo } from '../../Utils/Toast/msgInformativo'
-import DataTable from 'react-data-table-component'
-import DTOCorresponsalCuentaComplementaria from '../../../DTO/Corresponsales/DTOCuentaComplementaria'
-import { SelectEstatus } from './SelectEstatus/SelectEstatus'
-import { FcAbout } from 'react-icons/fc'
-import DTOLogCorresponsalComplementariaEstatus from '../../../DTO/Corresponsales/DTOLogCorresponsalComplementariaEstatus'
-import FileManagerDS from '../../../Services/Utils/FileManager.Services'
-import { AiOutlineClose } from 'react-icons/ai'
-import { MdCloudUpload, MdOutlineInventory, MdOutlineSave } from 'react-icons/md'
-import { useDispatch, useSelector } from 'react-redux'
-import { RootState } from '../../../store/store'
-import { FiSave } from 'react-icons/fi'
-import ICorresponsalCuentaComplementariaStatus from '../../../Interfaces/Corresponsales/ICorresponsalCuentaComplementariaEstatus'
-import { updateCorresponsalesCuentasComplementariasEstatus } from '../../../store/features/Corresponsales/CorresponsalesCuentasComplementariasEstatusSlice'
-
-interface IProps {
-  IDTrafico: number
-  UserId: number
-}
-
-export const CuentasComplementarias: FC<IProps> = (props) => {
-  const dispatch = useDispatch()
-  const [Depto, setDepto] = useState(() => {
-    const stickyValue = window.localStorage.getItem('Departamento')
-    return stickyValue !== null ? JSON.parse(stickyValue) : ''
-  })
-  const mCCCEstatus = useSelector(
-    (state: RootState) => state.CCueCompEstatus.CorresponsalesCuentasComplementariasEstatus
-  )
-  const [showModal, setShowModal] = useState(false)
-  const [showModalLog, setShowModalLog] = useState(false)
-  const [showModalCatalogo, setShowModalCatalogo] = useState(false)
-  const [DTData, setDTData] = useState<ICorresponsalCuentasComplementarias[]>([])
-  const [CuentaComplementaria, setCuentaComplementaria] = useState<ICorresponsalCuentasComplementarias[]>([])
-  const [HistorialEstatus, setHistoriaEstatus] = useState<DTOLogCorresponsalComplementariaEstatus[]>([])
-  const [IDCuentaComplementaria, setIdCuentaComplementarias] = useState(0)
-  const [IDPDF, setIDPDF] = useState(0)
-  const [IDXML, setIDXML] = useState(0)
-  const [IDEstatus, setIDEstatus] = useState(0)
-  const [Estatus, setEstatus] = useState('')
-  const [header, setHeader] = useState('')
-  const [msgColor, setMsgColor] = React.useState('primary')
-  const [show, setShowMsg] = useState(false)
-  const [msg, setMsg] = useState('')
-  const [MsgTime, setMsgTime] = useState(3000)
-
-  const colCuentasComplementarias = [
-    {
-      name: 'id',
-      width: '60px',
-      selector: (row: ICorresponsalCuentasComplementarias) => row.id,
-      sortable: true,
-    },
-    {
-      name: '',
-      width: '20px',
-      cell: (row: ICorresponsalCuentasComplementarias) => {
-        return row.archivoXML ? (
-          <div
-            style={{
-              cursor: 'pointer',
-              visibility: Depto === 'Corresponsalias' && row.estatus !== 7 ? 'visible' : 'hidden',
-            }}
-            onClick={() => {
-              clearFile(row.id, 1, row.idXML)
-            }}
-          >
-            <IconContext.Provider value={{ color: 'red', size: '15px' }}>
-              <AiOutlineClose />
-            </IconContext.Provider>
-          </div>
-        ) : (
-          <div
-            style={{ cursor: 'pointer' }}
-            onClick={() => {
-              setPreloader(row.id)
-            }}
-          >
-            <IconContext.Provider value={{ color: 'blue', size: '25px' }}>
-              <MdCloudUpload />
-            </IconContext.Provider>
-          </div>
-        )
-      },
-    },
-    {
-      name: 'XML',
-      width: '300px',
-      cell: (row: ICorresponsalCuentasComplementarias) => {
-        return (
-          <div
-            style={{ cursor: 'pointer' }}
-            onClick={() => {
-              getFileContent(row.idXML, 22, row.archivoXML)
-            }}
-          >
-            {row.archivoXML}
-          </div>
-        )
-      },
-    },
-    {
-      name: '',
-      width: '20px',
-      cell: (row: ICorresponsalCuentasComplementarias) => {
-        return row.archivoPDF ? (
-          <div
-            style={{
-              cursor: 'pointer',
-              visibility: Depto === 'Corresponsalias' && row.estatus !== 7 ? 'visible' : 'hidden',
-            }}
-            onClick={() => {
-              clearFile(row.id, 2, row.idPDF)
-            }}
-          >
-            <IconContext.Provider value={{ color: 'red', size: '15px' }}>
-              <AiOutlineClose />
-            </IconContext.Provider>
-          </div>
-        ) : (
-          <div
-            style={{ cursor: 'pointer' }}
-            onClick={() => {
-              setPreloader(row.id)
-            }}
-          >
-            <IconContext.Provider value={{ color: 'blue', size: '25px' }}>
-              <MdCloudUpload />
-            </IconContext.Provider>
-          </div>
-        )
-      },
-    },
-    {
-      name: 'PDF',
-      width: '300px',
-      cell: (row: ICorresponsalCuentasComplementarias) => {
-        return (
-          <div
-            style={{ cursor: 'pointer' }}
-            onClick={() => {
-              getFileContent(row.idPDF, 21, row.archivoPDF)
-            }}
-          >
-            {row.archivoPDF}
-          </div>
-        )
-      },
-    },
-    {
-      name: 'Estatus',
-      width: '400px',
-      cell: (row: ICorresponsalCuentasComplementarias) => {
-        return <SelectEstatus IDEstatus={row.estatus} IDCuenta={row.id} Enabled={row.estatus === 7} />
-      },
-    },
-    {
-      name: 'Historico',
-      width: '110px',
-      cell: (row: ICorresponsalCuentasComplementarias) => (
-        <div
-          style={{ textAlign: 'center', cursor: 'pointer' }}
-          onClick={() => {
-            showHistoricoEstatus(row.id)
-          }}
-        >
-          <IconContext.Provider value={{ color: 'red', size: '25px' }}>
-            <FcAbout />
-          </IconContext.Provider>
-        </div>
-      ),
-    },
-  ]
-
-  const setPreloader = (id: number) => {
-    setIdCuentaComplementarias(id)
-    setIDPDF(0)
-    setIDXML(0)
-    setShowModal(true)
-  }
-
-  const clearFile = (IDCuenta: number, witchFile: number, idFile: number) => {
-    CuentasComplementariasDS.ClearFile(IDCuenta, witchFile)
-      .then((response) => {
-        FileManagerDS.DeleteFile(idFile)
-          .then((response) => {
-            loadCuentaComplementaria()
-          })
-          .catch((e: Error) => {
-            setHeader('Error')
-            setMsg('Ocurrio un error: ' + e)
-            setShowMsg(true)
-            return
-          })
-      })
-      .catch((e: Error) => {
-        setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
-        setShowMsg(true)
-        return
-      })
-  }
-
-  const createCuentaComplementaria = () => {
-    const data: DTOCorresponsalCuentaComplementaria = {
-      id: 0,
-      idTrafico: props.IDTrafico,
-      idFile: 0,
-    }
-    CuentasComplementariasDS.Append(data)
-      .then((response) => {
-        // setCuentaComplementaria(response.data)
-        setIdCuentaComplementarias(response.data.id)
-        setIDPDF(response.data.idPDF)
-        setIDXML(response.data.idXML)
-        setShowModal(true)
-      })
-      .catch((e: Error) => {
-        setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
-        setShowMsg(true)
-        return
-      })
-  }
-
-  const loadCuentaComplementaria = () => {
-    CuentasComplementariasDS.Get(props.IDTrafico)
-      .then((response) => {
-        setDTData(response.data)
-        setIDPDF(0)
-        setIDXML(0)
-      })
-      .catch((e: Error) => {
-        setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
-        setShowMsg(true)
-        return
-      })
-  }
-
-  useEffect(() => {
-    setIDPDF(0)
-    setIDXML(0)
-  }, [IDCuentaComplementaria])
-
-  useEffect(() => {
-    loadCuentaComplementaria()
-  }, [])
-
-  const showHistoricoEstatus = (id: number) => {
-    CuentasComplementariasDS.GetLogEstatus(id)
-      .then((response) => {
-        setHistoriaEstatus(response.data)
-        setShowModalLog(true)
-      })
-      .catch((e: Error) => {
-        setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
-        setShowMsg(true)
-        return
-      })
-  }
-
-  const updateFile = (idFile: number) => {
-    if (IDCuentaComplementaria === 0) {
-      setHeader('Error')
-      setMsg('Para proceder, es necesario que cree una cuenta complementaria o seleccione una existente')
-      setShowMsg(true)
-      return
-    }
-    const data: DTOCorresponsalCuentaComplementaria = {
-      id: IDCuentaComplementaria,
-      idFile: idFile,
-      idTrafico: props.IDTrafico,
-    }
-    CuentasComplementariasDS.Append(data)
-      .then((response) => {
-        loadCuentaComplementaria()
-      })
-      .catch((e: Error) => {
-        setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
-        setShowMsg(true)
-        return
-      })
-  }
-
-  const getFileContent = (id: number, proceso: number, archivo: string) => {
-    if (id > 0) {
-      MFileManagerDataService.getFileContentById(id, proceso)
-        .then((response: any) => {
-          if (response.status === 200) {
-            if (archivo.toLowerCase().endsWith('.pdf')) {
-              console.log(response.data)
-              const blob = new Blob([response.data], { type: 'application/pdf' })
-              const url = window.URL.createObjectURL(blob)
-              window.open(url)
-            } else if (archivo.toLowerCase().endsWith('.xml')) {
-              console.log(response.data)
-              const blob = new Blob([response.data], { type: 'application/xml' })
-              const url = window.URL.createObjectURL(blob)
-              window.open(url)
-            }
-          } else {
-            setHeader('Error')
-            setMsg('No existe ningun archivo asignado')
-            setShowMsg(true)
-            return
-          }
-        })
-        .catch((e: Error) => {
-          setHeader('Error')
-          setMsg('A este concepto no se le ha anexado archivo')
-          setShowMsg(true)
-          return
-        })
-    }
-  }
-
-  const saveEstatus = () => {
-    const data: ICorresponsalCuentaComplementariaStatus = {
-      id: IDEstatus,
-      estatus: Estatus,
-    }
-    CuentasComplementariasDS.AppendEstatus(data)
-      .then((response) => {
-        dispatch(updateCorresponsalesCuentasComplementariasEstatus(response.data))
-        setIDEstatus(0)
-        setEstatus('')
-      })
-      .catch((e: Error) => {
-        setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
-        setShowMsg(true)
-        return
-      })
-  }
-
-  return (
-    <div>
-      <Row>
-        <Col style={{ textAlign: 'right', visibility: Depto === 'Contabilidad' ? 'visible' : 'hidden' }}>
-          <div
-            style={{ cursor: 'pointer' }}
-            onClick={() => {
-              setShowModalCatalogo(true)
-            }}
-            title='De un click aqui para agregar abrir el catalogo de conceptos de rechazo'
-          >
-            <IconContext.Provider value={{ color: 'green', size: '35px' }}>
-              <MdOutlineInventory />
-            </IconContext.Provider>
-          </div>
-        </Col>
-        <Col xs={10}></Col>
-        <Col style={{ visibility: Depto !== 'Contabilidad' ? 'visible' : 'hidden' }}>
-          <div
-            style={{ cursor: 'pointer' }}
-            onClick={() => {
-              createCuentaComplementaria()
-            }}
-            title='De un click aqui para agregar una nueva cuenta complementaria'
-          >
-            <IconContext.Provider value={{ color: 'green', size: '35px' }}>
-              <BsFillPlusCircleFill />
-            </IconContext.Provider>
-          </div>
-        </Col>
-      </Row>
-      <Row style={{ paddingTop: '10px' }}>
-        <Card>
-          <Col xs={12}>
-            <DataTable
-              noHeader
-              defaultSortFieldId={'id'}
-              defaultSortAsc={true}
-              pagination
-              highlightOnHover
-              columns={colCuentasComplementarias}
-              data={DTData}
-            />
-          </Col>
-        </Card>
-      </Row>
-      <Modal
-        show={showModal}
-        onHide={() => {
-          setShowModal(false)
-        }}
-        size={'sm'}
-        dialogClassName={'modal-50w'}
-      >
-        <Modal.Body>
-          <Row>
-            <Col xs={6}>
-              <FileManager
-                IDUser={props.UserId}
-                width={350}
-                height={200}
-                IDProcess={22}
-                IdFile={IDCuentaComplementaria}
-                FileName={''}
-                canDelete={true}
-                FileType={['xml']}
-                Leyenda={'Seleccione el archivo XML, arrastrelo hasta aqui y sueltelo para subirlo al servidor...'}
-                onAppendFM={function (idFile: number): void {
-                  setIDXML(idFile)
-                  updateFile(idFile)
-                }}
-              />
-            </Col>
-            <Col xs={6}>
-              <FileManager
-                IDUser={props.UserId}
-                width={350}
-                height={200}
-                IDProcess={21}
-                IdFile={IDCuentaComplementaria}
-                FileName={''}
-                canDelete={true}
-                FileType={['pdf']}
-                Leyenda={'Seleccione el archivo PDF, arrastrelo hasta aqui y sueltelo para subirlo al servidor...'}
-                onAppendFM={function (idFile: number): void {
-                  setIDPDF(idFile)
-                  updateFile(idFile)
-                }}
-              />
-            </Col>
-          </Row>
-        </Modal.Body>
-      </Modal>
-
-      <Modal
-        show={showModalLog}
-        onHide={() => {
-          setShowModalLog(false)
-        }}
-        size={'sm'}
-        dialogClassName={'modal-50w'}
-      >
-        <Modal.Body>
-          {HistorialEstatus.length > 0 ? (
-            <Card>
-              <table>
-                <tr>
-                  <td>Registrado</td>
-                  <td>Estatus</td>
-                </tr>
-                {HistorialEstatus
-                  ? HistorialEstatus.map((item, index) => {
-                      return (
-                        <tr key={item.estatus}>
-                          <td>{item.fCreacion}</td>
-                          <td>{item.sEstatus}</td>
-                        </tr>
-                      )
-                    })
-                  : ''}
-              </table>
-            </Card>
-          ) : (
-            <Alert variant='primary'>
-              <Alert.Heading style={{ textAlign: 'center' }}>No hay informacion al respecto</Alert.Heading>
-            </Alert>
-          )}
-        </Modal.Body>
-      </Modal>
-
-      <Modal
-        show={showModalCatalogo}
-        onHide={() => {
-          setShowModalCatalogo(false)
-        }}
-        size={'sm'}
-        dialogClassName={'modal-50w'}
-      >
-        <Modal.Body>
-          {mCCCEstatus.length > 0 ? (
-            <>
-              <Card>
-                <Row>
-                  <Col xs={1}>
-                    <FloatingLabel controlId='IdEstatus' label='id' className='mb-3'>
-                      <Form.Control type='text' placeholder='id' value={IDEstatus} disabled={true} />
-                    </FloatingLabel>
-                  </Col>
-                  <Col xs={10}>
-                    <FloatingLabel controlId='IdEstatus' label='Estatus' className='mb-3'>
-                      <Form.Control
-                        type='text'
-                        placeholder='Estatus'
-                        value={Estatus}
-                        onChange={(e) => {
-                          setEstatus(e.target.value)
-                        }}
-                      />
-                    </FloatingLabel>
-                  </Col>
-                  <Col xs={1} style={{ paddingTop: '10px', paddingRight: '50px', cursor: 'pointer' }}>
-                    <div
-                      onClick={() => {
-                        saveEstatus()
-                      }}
-                    >
-                      <IconContext.Provider value={{ color: 'blue', size: '35px' }}>
-                        <FiSave />
-                      </IconContext.Provider>
-                    </div>
-                  </Col>
-                </Row>
-              </Card>
-              <Card>
-                <Row style={{ fontWeight: 'bold' }}>
-                  <Col xs={1}>id</Col>
-                  <Col xs={10}>Estatus</Col>
-                  <Col xs={1}></Col>
-                </Row>
-                {mCCCEstatus
-                  ? mCCCEstatus
-                      .filter((item) => {
-                        return item.id > 1
-                      })
-                      .map((item, index) => {
-                        return (
-                          <Row
-                            key={item.estatus}
-                            onClick={() => {
-                              setIDEstatus(item.id)
-                              setEstatus(item.estatus)
-                            }}
-                          >
-                            <Col xs={1}>{item.id}</Col>
-                            <Col xs={10}>{item.estatus}</Col>
-                            <Col xs={1}></Col>
-                          </Row>
-                        )
-                      })
-                  : ''}
-              </Card>
-            </>
-          ) : (
-            <Alert variant='primary'>
-              <Alert.Heading style={{ textAlign: 'center' }}>No hay informacion al respecto</Alert.Heading>
-            </Alert>
-          )}
-        </Modal.Body>
-      </Modal>
-
-      <MsgInformativo
-        show={show}
-        msg={msg}
-        header={header}
-        msgColor={msgColor}
-        time={MsgTime}
-        closeToast={() => {
-          setShowMsg(false)
-        }}
-      />
-    </div>
-  )
-}

src/Components/Corresponsales/CuentasComplementarias/SelectEstatus/SelectEstatus.tsx

@@ -1,85 +0,0 @@
-import React, { FC, useState } from 'react'
-import { Form } from 'react-bootstrap'
-import { useSelector } from 'react-redux'
-import { RootState } from '../../../../store/store'
-import CuentasComplementariasDS from '../../../../Services/Corresponsalias/Corresponsales.CuentasComplementarias.Services'
-import DTOCuentaComplementariaEstatus from '../../../../DTO/Corresponsales/DTOCuentaComplementariaEstatus'
-import { MsgInformativo } from '../../../Utils/Toast/msgInformativo'
-
-interface IProps {
-  IDEstatus: number
-  IDCuenta: number
-  Enabled: boolean
-}
-
-export const SelectEstatus: FC<IProps> = (props) => {
-  const [Depto, setDepto] = useState(() => {
-    const stickyValue = window.localStorage.getItem('Departamento')
-    return stickyValue !== null ? JSON.parse(stickyValue) : ''
-  })
-  const [header, setHeader] = useState('')
-  const [msgColor, setMsgColor] = React.useState('primary')
-  const [show, setShowMsg] = useState(false)
-  const [msg, setMsg] = useState('')
-  const [MsgTime, setMsgTime] = useState(3000)
-  const mCCCEstatus = useSelector(
-    (state: RootState) => state.CCueCompEstatus.CorresponsalesCuentasComplementariasEstatus
-  )
-  const [IDEstatus, setIDEstatus] = useState(props.IDEstatus)
-
-  const changeStatus = (nuevoEstatus: number) => {
-    setIDEstatus(nuevoEstatus)
-    const data: DTOCuentaComplementariaEstatus = {
-      id: props.IDCuenta,
-      estatus: nuevoEstatus,
-    }
-    CuentasComplementariasDS.ChangeStatus(data)
-      .then((response) => {
-        setHeader('Confirmacion')
-        setMsg('Se ha cambiado el estatus de la cuenta')
-        setShowMsg(true)
-        return
-      })
-      .catch((e: Error) => {
-        setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
-        setShowMsg(true)
-        return
-      })
-  }
-
-  return (
-    <div>
-      <Form.Control
-        as='select'
-        onChange={(e) => {
-          changeStatus(parseInt(e.target.value))
-        }}
-        className='form-select form-select-sm'
-        style={{ width: '350px' }}
-        disabled={Depto !== 'Contabilidad' || props.Enabled}
-        value={IDEstatus}
-      >
-        {mCCCEstatus
-          ? mCCCEstatus.map((item, index) => {
-              return (
-                <option key={item.id} value={item.id}>
-                  {item.estatus}
-                </option>
-              )
-            })
-          : ''}
-      </Form.Control>
-      <MsgInformativo
-        show={show}
-        msg={msg}
-        header={header}
-        msgColor={msgColor}
-        time={MsgTime}
-        closeToast={() => {
-          setShowMsg(false)
-        }}
-      />
-    </div>
-  )
-}

src/Components/Corresponsales/Guias/SelectGuias.tsx

@@ -1,190 +0,0 @@
-import { FC, useEffect, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { RootState } from '../../../store/store'
-import CGuiasDataService from '../../../Services/Corresponsalias/Corresponsales.Guias.Services'
-import ICorresponsalesGuias from '../../../Interfaces/Corresponsales/ICorresponsalesGuias'
-import { IconContext } from 'react-icons'
-import { BsFillXCircleFill } from 'react-icons/bs'
-import { Alert, Button, Col, Modal, Row } from 'react-bootstrap'
-import {
-  deleteCorresponsalesGuias,
-  updateCorresponsalesGuias,
-} from '../../../store/features/Corresponsales/CorresponsalesGuiasSlice'
-
-interface IProps {
-  IDTrafico: number
-  Editable: boolean
-}
-
-export const SelectGuias: FC<IProps> = (props) => {
-  const dispatch = useDispatch()
-  const [toggleSelect, setToggleSelect] = useState(false)
-  const mCGuias = useSelector((state: RootState) => state.CGuias.CorresponsalesGuias)
-  const [Guia, setGuia] = useState('')
-  const [IDGuia, setIDGuia] = useState(0)
-  const [Placeholder, setPlaceholder] = useState('')
-  const [DialogTabs, setDialogTabs] = useState(false)
-
-  useEffect(() => {
-    setPlaceholder('(' + mCGuias.filter((item) => item.id > 0).length + ') Guias')
-  }, [mCGuias])
-
-  const loadInfo = (data: ICorresponsalesGuias) => {
-    setIDGuia(data.id)
-    setGuia(data.guia)
-  }
-
-  const handleKeyDown = (event: any) => {
-    if (event.key === 'Enter') {
-      const data: ICorresponsalesGuias = {
-        id: IDGuia,
-        guia: Guia,
-        idTrafico: props.IDTrafico,
-      }
-      CGuiasDataService.Append(data)
-        .then((response) => {
-          if (response.status === 200) {
-            dispatch(updateCorresponsalesGuias(response.data))
-            setGuia('')
-            setToggleSelect(true)
-          }
-        })
-        .catch((e: Error) => {
-          return
-        })
-    }
-  }
-
-  const deleteItem = () => {
-    CGuiasDataService.Delete(IDGuia)
-      .then((response) => {
-        if (response.status === 200) {
-          setIDGuia(0)
-          setGuia('')
-          setDialogTabs(false)
-          dispatch(deleteCorresponsalesGuias(IDGuia))
-          return
-        }
-      })
-      .catch((e: Error) => {
-        return
-      })
-  }
-  return (
-    <div>
-      {' '}
-      <div className='form-group'>
-        <div className='col-sm-12 parent'>
-          <div className='input-group'>
-            <input type='hidden' className='form-control' name='IDGuia' id='IDGuia' value={IDGuia} />
-            <span className='input-group-addon  sorroundImage'>
-              <img
-                src='http://reportes.gemcousa.com/images/Clean.png'
-                width='28'
-                height='28'
-                style={{ cursor: 'pointer' }}
-                alt=''
-                onClick={() => {
-                  setIDGuia(0)
-                  setGuia('')
-                }}
-              />
-            </span>
-            <input
-              type='text'
-              className='form-control genericSelect'
-              name='Guia'
-              id='Guia'
-              style={{ height: '30px' }}
-              value={Guia}
-              placeholder={Placeholder}
-              disabled={!props.Editable}
-              onChange={(e) => {
-                setGuia(e.target.value)
-              }}
-              onKeyDown={(e) => handleKeyDown(e)}
-            />
-            <span className='input-group-addon sorroundImage'>
-              <img
-                src='http://reportes.gemcousa.com/images/caret.png'
-                width='28'
-                height='28'
-                style={{ cursor: 'pointer' }}
-                alt=''
-                onClick={() => {
-                  setToggleSelect(!toggleSelect)
-                }}
-              />
-            </span>
-            <div className='child' style={toggleSelect ? { visibility: 'visible' } : { visibility: 'hidden' }}>
-              <ul className='cleanLi'>
-                {mCGuias
-                  ? mCGuias
-                      .map((item, index) => {
-                        return item.id > 0 ? (
-                          <li key={item.id} onClick={() => loadInfo(item)}>
-                            <span
-                              onClick={() => {
-                                setDialogTabs(true)
-                              }}
-                            >
-                              <IconContext.Provider value={{ color: 'red', size: '15px' }}>
-                                <BsFillXCircleFill />
-                              </IconContext.Provider>
-                            </span>
-                            <span style={{ paddingLeft: '10px' }}>{item.guia}</span>
-                          </li>
-                        ) : (
-                          ''
-                        )
-                      })
-                      .reverse()
-                  : ''}
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div>
-      <Modal
-        show={DialogTabs}
-        onHide={() => {
-          setDialogTabs(false)
-        }}
-        size='sm'
-      >
-        <Modal.Body>
-          <Alert variant='primary'>
-            <b>¿Esta seguro de eliminar?</b>
-            <br />
-            <h5> {Guia} </h5>
-          </Alert>
-        </Modal.Body>
-        <Modal.Footer>
-          <Row>
-            <Col xs={6} style={{ textAlign: 'left', paddingRight: '100px' }}>
-              <Button
-                variant='danger'
-                onClick={deleteItem}
-                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>
-    </div>
-  )
-}

src/Components/Corresponsales/PagosTerceros/ControlledInput/ControlledInput.tsx

@@ -1,110 +0,0 @@
-import React, { FC, useEffect, useState } from 'react'
-import { MsgInformativo } from '../../../Utils/Toast/msgInformativo'
-import CFac3DataService from '../../../../Services/Corresponsalias/Corresponsales.FacturasTerceros.services'
-import { useDispatch, useSelector } from 'react-redux'
-import ICorresponsalTerceros from '../../../../Interfaces/Corresponsales/ICorresponsalFacturasTerceros'
-import { updateCorresponsalesFacturasTerceros } from '../../../../store/features/Corresponsales/CorresponsalesFacturasTercerosSlice'
-import { Form } from 'react-bootstrap'
-import { RootState } from '../../../../store/store'
-
-interface IProps {
-  row: ICorresponsalTerceros
-  disabled?: boolean
-  mode: number // 1: Number, 2: String
-}
-
-export const ControlledInput: FC<IProps> = (props) => {
-  const dispatch = useDispatch()
-  const mProveedores = useSelector((state: RootState) => state.CatProveedores.CatalogoProveedores)
-  const [id, setid] = useState(props.row.id)
-  const [value, setValue] = useState(props.row.factura)
-  const [IDProveedor, setIDProveedor] = useState(props.row.idProveedor)
-  const [ClasificacionProveedor, setClasificacionProveedor] = useState(1)
-  const [header, setHeader] = useState('')
-  const [msgColor, setMsgColor] = React.useState('primary')
-  const [show, setShowMsg] = useState(false)
-  const [msg, setMsg] = useState('')
-
-  const onChange = (event: any) => {
-    setValue(event.target.value)
-  }
-
-  const handleKeyDown = (event: any) => {
-    if (event.key === 'Enter') {
-      if (isNaN(event.target.value) && props.mode === 1) {
-        alert('Valor no valido!')
-        return
-      }
-      const data: ICorresponsalTerceros = {
-        id: id,
-        factura: value,
-        idTrafico: props.row.idTrafico,
-        idProveedor: IDProveedor,
-      }
-      CFac3DataService.Append(data)
-        .then((response) => {
-          if (response.status === 200) {
-            dispatch(updateCorresponsalesFacturasTerceros(response.data.registro))
-            setHeader('Informativo')
-            setMsg('La informacion se guardo exitosamente')
-            setShowMsg(true)
-            return
-          }
-        })
-        .catch((e: Error) => {
-          setHeader('Error')
-          setMsg('Ocurrio un error: ' + e)
-          setShowMsg(true)
-          return
-        })
-    }
-  }
-
-  useEffect(() => {
-    console.log('El proveedor es:............................' + JSON.stringify(props.row))
-  }, [])
-
-  return (
-    <>
-      <input
-        value={value}
-        onChange={onChange}
-        disabled={props.disabled}
-        onKeyDown={(e) => handleKeyDown(e)}
-        style={{ width: '120px' }}
-      />
-      &nbsp;&nbsp;
-      <Form.Control
-        as='select'
-        onChange={(f) => {
-          setIDProveedor(parseInt(f.target.value))
-        }}
-        value={IDProveedor}
-        className='form-select form-select-sm'
-      >
-        {mProveedores
-          ? mProveedores
-              .filter(function (row) {
-                return row.clasificacion === ClasificacionProveedor
-              })
-              .map((p) => {
-                return (
-                  <option value={p.id} key={p.id}>
-                    {p.nombre}
-                  </option>
-                )
-              })
-          : null}
-      </Form.Control>
-      <MsgInformativo
-        show={show}
-        msg={msg}
-        header={header}
-        msgColor={msgColor}
-        closeToast={() => {
-          setShowMsg(false)
-        }}
-      />
-    </>
-  )
-}

src/Components/Corresponsales/PagosTerceros/PagosTerceros.tsx

@@ -1,365 +0,0 @@
-import React, { FC, useEffect, useState } from 'react';
-import { Alert, Button, Card, Col, Form, Modal, Row } from 'react-bootstrap';
-import DataTable from 'react-data-table-component';
-import { IconContext } from 'react-icons';
-import { FaEraser, FaTimesCircle } from 'react-icons/fa';
-import { useDispatch, useSelector } from 'react-redux';
-import ICorresponsalTerceros from '../../../Interfaces/Corresponsales/ICorresponsalFacturasTerceros';
-import { RootState } from '../../../store/store';
-import { MsgInformativo } from '../../Utils/Toast/msgInformativo';
-import CFac3DataService from '../../../Services/Corresponsalias/Corresponsales.FacturasTerceros.services';
-import { ControlledInput } from './ControlledInput/ControlledInput';
-import {
-  addCorresponsalesFacturasTerceros,
-  deleteCorresponsalesFacturasTerceros,
-} from '../../../store/features/Corresponsales/CorresponsalesFacturasTercerosSlice';
-import { CatProveedores } from '../CatProveedores/CatProveedores';
-import { FcManager } from 'react-icons/fc';
-import { resourceUsage } from 'process';
-
-interface IProps {
-  IDTrafico: number;
-  IDCorresponsal: number;
-  canDelete: boolean;
-}
-
-export const PagosTerceros: FC<IProps> = (props) => {
-  const dispatch = useDispatch();
-  const mCFacturas3 = useSelector(
-    (state: RootState) => state.CF3rosData.CorresponsalesFacturasTerceros
-  );
-  const mProveedores = useSelector(
-    (state: RootState) => state.CatProveedores.CatalogoProveedores
-  );
-  const [IDProveedor, setIDProveedor] = useState(-1);
-  const [DTData, setDTData] = useState<ICorresponsalTerceros[]>([]);
-  const [ShowModal, setShowModal] = useState(false);
-  const [Factura, setFactura] = useState('');
-  const [IDFactura, setIDFactura] = useState(0);
-  const [header, setHeader] = useState('');
-  const [msgColor, setMsgColor] = React.useState('primary');
-  const [show, setShowMsg] = useState(false);
-  const [msg, setMsg] = useState('');
-  const [MsgTime, setMsgTime] = useState(4000);
-  const [DialogTabs, setDialogTabs] = useState(false);
-  const [msgDialog, setMsgDialog] = useState(false);
-  const [ClasificacionProveedor, setClasificacionProveedor] = useState(1);
-
-  const columnsFacturas3 = [
-    {
-      name: 'id',
-      width: '10%',
-      selector: (row: ICorresponsalTerceros) => row.id,
-      sortable: true,
-    },
-    {
-      name: 'Factura',
-      width: '75%',
-      cell: (row: ICorresponsalTerceros) => {
-        return <ControlledInput row={row} disabled={false} mode={2} />;
-      },
-    },
-    {
-      name: 'Elimina',
-      cell: (row: ICorresponsalTerceros) => (
-        <div
-          style={{
-            textAlign: 'center',
-            cursor: 'pointer',
-            visibility: props.canDelete ? 'visible' : 'hidden',
-          }}
-          onClick={() => {
-            setIDFactura(row.id);
-            setFactura(row.factura);
-            setDialogTabs(true);
-          }}
-        >
-          <IconContext.Provider value={{ color: 'red', size: '25px' }}>
-            <FaTimesCircle />
-          </IconContext.Provider>
-        </div>
-      ),
-    },
-  ];
-
-  useEffect(() => {
-    CFac3DataService.getAll(props.IDTrafico)
-      .then((response) => {
-        setDTData(response.data);
-      })
-      .catch((e: Error) => {
-        setHeader('Error');
-        setMsg('Ocurrio un error: ' + e);
-        setShowMsg(true);
-        return;
-      });
-    mProveedores.length > 0
-      ? setIDProveedor(mProveedores[0].id)
-      : setIDProveedor(0);
-  }, []);
-
-  const saveForm = () => {
-    if (IDProveedor === 0) {
-      setHeader('Error');
-      setMsg('Para poder continuar, por favor, seleccione el proveedor');
-      setShowMsg(true);
-      return false;
-    }
-    if (Factura.length === 0) {
-      setHeader('Error');
-      setMsg('Para poder continuar, por favor, proporcione la factura');
-      setShowMsg(true);
-      return false;
-    }
-    const data: ICorresponsalTerceros = {
-      id: IDFactura,
-      factura: Factura,
-      idTrafico: props.IDTrafico,
-      idProveedor: IDProveedor,
-    };
-    CFac3DataService.Append(data)
-      .then((response) => {
-        if (response.status === 200) {
-          setHeader('Informativo');
-          setMsg(response.data.respuesta);
-          setShowMsg(true);
-          setDialogTabs(false);
-          if (data.id === 0)
-            dispatch(addCorresponsalesFacturasTerceros(response.data.registro));
-        }
-      })
-      .catch((error: any) => {
-        if (error.response) {
-          setHeader('Error: No se permite duplicidad');
-          setMsgColor('warning');
-          setMsgTime(10000);
-          setMsg(
-            error.response.data.respuesta +
-              ' en la factura: ' +
-              error.response.data.registro.factura +
-              ' en el trafico: CG' +
-              error.response.data.registro.idTrafico
-          );
-          setShowMsg(true);
-          return;
-        }
-      });
-  };
-
-  const deleteItem = () => {
-    CFac3DataService.Delete(IDFactura)
-      .then((response) => {
-        if (response.status === 200) {
-          setHeader('Informativo');
-          setMsg(response.data.respuesta);
-          setShowMsg(true);
-          setDialogTabs(false);
-          dispatch(deleteCorresponsalesFacturasTerceros(IDFactura));
-          return;
-        }
-      })
-      .catch((e: Error) => {
-        setHeader('Error');
-        setMsg('Ocurrio un error: ' + e);
-        setShowMsg(true);
-        return;
-      });
-  };
-
-  const cleanForm = () => {
-    setFactura('');
-    setIDFactura(0);
-  };
-
-  return (
-    <div>
-      <Card style={{}}>
-        <Card.Body>
-          <Card.Subtitle className='mb-2 text-muted'>
-            <Row
-              style={{ paddingBottom: '5', paddingTop: '15' }}
-              className={props.canDelete ? 'visible' : 'invisible heightZero'}
-            >
-              <Col
-                xs={1}
-                style={{
-                  textAlign: 'right',
-                  paddingTop: '5px',
-                  cursor: 'pointer',
-                }}
-                onClick={() => {
-                  cleanForm();
-                }}
-              >
-                <IconContext.Provider value={{ color: 'orange', size: '25px' }}>
-                  <FaEraser />
-                </IconContext.Provider>
-              </Col>
-              <Col>
-                <Form.Control
-                  type='hidden'
-                  id='IdItem'
-                  size='sm'
-                  value={IDFactura}
-                  placeholder='Contenedor'
-                  disabled={true}
-                />
-              </Col>
-              <Col xs={2}>
-                {/* <Form.Control
-                  type='text'
-                  id='FacturaTerceros'
-                  size='sm'
-                  value={Factura}
-                  placeholder='Factura 3ros'
-                  pattern='[a-zA-Z-0-9 ]*'
-                  onChange={(e) => setFactura((v) => (e.target.validity.valid ? e.target.value : v))}
-                /> */}
-                <input
-                  type='text'
-                  className='form-control genericSelect'
-                  name='Factura'
-                  id='Factura'
-                  style={{ height: '30px' }}
-                  value={Factura}
-                  placeholder='Factura'
-                  onChange={(e) => {
-                    setFactura(e.target.value);
-                  }}
-                />
-              </Col>
-              <Col xs={5}>
-                <Form.Control
-                  as='select'
-                  id='CmbIDProveedor'
-                  onChange={(e) => {
-                    setIDProveedor(parseInt(e.target.value));
-                  }}
-                  className='form-select form-select-sm'
-                  value={IDProveedor}
-                >
-                  {mProveedores
-                    ? mProveedores
-                        .filter(function (row) {
-                          return (
-                            row.clasificacion === ClasificacionProveedor ||
-                            row.id === 0
-                          );
-                        })
-                        .map((item, index) => {
-                          return (
-                            <option value={item.id} key={item.id}>
-                              {item.nombre}
-                            </option>
-                          );
-                        })
-                    : ''}
-                </Form.Control>
-              </Col>
-              <Col xs={1} style={{ cursor: 'pointer' }}>
-                <Button
-                  variant='primary'
-                  size='sm'
-                  onClick={() => {
-                    setShowModal(true);
-                  }}
-                >
-                  <IconContext.Provider value={{ color: 'blue', size: '25px' }}>
-                    <FcManager />
-                  </IconContext.Provider>
-                </Button>
-              </Col>
-              <Col xs={1}></Col>
-              <Col xs={1}>
-                <Button
-                  id='BtnSave'
-                  variant='primary'
-                  size='sm'
-                  onClick={() => {
-                    saveForm();
-                  }}
-                >
-                  Agregar
-                </Button>
-              </Col>
-              <Col>&nbsp;</Col>
-            </Row>
-          </Card.Subtitle>
-          <DataTable
-            noHeader
-            defaultSortFieldId={'id'}
-            defaultSortAsc={true}
-            pagination
-            highlightOnHover
-            columns={columnsFacturas3}
-            data={mCFacturas3.filter(function (el) {
-              return el.id > 0 && el.idTrafico === props.IDTrafico;
-            })}
-          />
-        </Card.Body>
-      </Card>
-      <MsgInformativo
-        show={show}
-        msg={msg}
-        header={header}
-        msgColor={msgColor}
-        time={MsgTime}
-        closeToast={() => {
-          setShowMsg(false);
-        }}
-      />
-      <Modal
-        show={DialogTabs}
-        onHide={() => {
-          setDialogTabs(false);
-        }}
-        size='sm'
-      >
-        <Modal.Body>
-          <Alert variant='primary'>
-            <b>¿Esta seguro de eliminar?</b>
-            <br />
-            <h5> {Factura} </h5>
-          </Alert>
-        </Modal.Body>
-        <Modal.Footer>
-          <Row>
-            <Col xs={6} style={{ textAlign: 'left', paddingRight: '100px' }}>
-              <Button
-                variant='danger'
-                onClick={deleteItem}
-                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>
-      <Modal
-        show={ShowModal}
-        onHide={() => {
-          setShowModal(false);
-        }}
-        size='sm'
-        dialogClassName='modal-50w'
-      >
-        <Modal.Body>
-          <CatProveedores canDelete={true} clasificacion={1} />
-        </Modal.Body>
-      </Modal>
-    </div>
-  );
-};

src/Components/Corresponsales/Partidas/Dialog/DialogBox.tsx

@@ -1,308 +0,0 @@
-import React, { FC, useEffect, useState } from "react";
-import { Button, Card, Col, Container, Form, Row } from "react-bootstrap";
-import * as CurrencyFormat from "react-currency-format";
-import ICorresponsalPartidas from "../../../../Interfaces/Corresponsales/ICorresponsalPedimentoPartidas";
-import { MsgInformativo } from "../../../Utils/Toast/msgInformativo";
-import CPartidasService from "../../../../Services/Corresponsalias/Corresponsales.Trafico.Pedimento.Partidas.Services";
-import { useDispatch, useSelector } from "react-redux";
-import { updateCorresponsalesPartidas } from "../../../../store/features/Corresponsales/CorresponsalesPartidasSlice";
-import { RootState } from "../../../../store/store";
-
-interface IProps {
-  IDTrafico: number;
-  IDPartida: number;
-}
-
-export const DialogBox: FC<IProps> = (props) => {
-  const dispatch = useDispatch();
-  const mCFacturas = useSelector(
-    (state: RootState) => state.CFData.CorresponsalesFacturas
-  );
-  const mCatProveedores = useSelector(
-    (state: RootState) => state.CatProveedores.CatalogoProveedores
-  );
-  const mCPartidas = useSelector(
-    (state: RootState) => state.CPartidas.CorresponsalesPartidas
-  );
-  const [Factura, setFactura] = useState("");
-  const [IDFactura, setIDFactura] = useState(0);
-  const [IDPartida, setIDPartida] = useState(0);
-  const [Proveedor, setProveedor] = useState("");
-  const [IDProveedor, setIDProveedor] = useState(0);
-  const [DescripcionMaterial, setDescripcionMaterial] = useState("");
-  const [FraccionArancelaria, setFraccionArancelaria] = useState("");
-  const [ValorAduana, setValorAduana] = useState(0);
-  const [DTA, setDTA] = useState(0);
-  const [IGI, setIGI] = useState(0);
-  const [IEPS, setIEPS] = useState(0);
-  const [header, setHeader] = useState("");
-  // const [msgColor, setMsgColor] = React.useState('primary')
-  const [show, setShowMsg] = useState(false);
-  const [msg, setMsg] = useState("");
-  const msgColor = "primary";
-
-  const saveForm = () => {
-    const data: ICorresponsalPartidas = {
-      id: IDPartida,
-      idTrafico: props.IDTrafico,
-      partida: 0,
-      idFactura: IDFactura,
-      factura: Factura,
-      proveedor: Proveedor,
-      descripcionMaterial: DescripcionMaterial,
-      fraccionArancelaria: FraccionArancelaria,
-      valorAduana: ValorAduana,
-      dta: DTA,
-      igi: IGI,
-      ieps: IEPS,
-      activo: 1,
-    };
-    if (Factura.length < 4) {
-      setHeader("Error");
-      setMsg("Proporcione la factura");
-      setShowMsg(true);
-      return;
-    }
-    if (Proveedor.length < 4) {
-      setHeader("Error");
-      setMsg("Proporcione el proveedor");
-      setShowMsg(true);
-      return;
-    }
-    if (DescripcionMaterial.length < 4) {
-      setHeader("Error");
-      setMsg("Proporcione la descripcion del material");
-      setShowMsg(true);
-      return;
-    }
-    if (FraccionArancelaria.length < 4) {
-      setHeader("Error");
-      setMsg("Proporcione la fraccion arancelaria");
-      setShowMsg(true);
-      return;
-    }
-    if (ValorAduana === 0) {
-      setHeader("Error");
-      setMsg("Proporcione el valor aduana");
-      setShowMsg(true);
-      return;
-    }
-    console.log(JSON.stringify(data));
-    CPartidasService.Append(data)
-      .then((response) => {
-        dispatch(updateCorresponsalesPartidas(response.data));
-        setHeader("Informativo");
-        setMsg("El registro se guardado exitosamente!");
-        setShowMsg(true);
-      })
-      .catch((e: Error) => {
-        setHeader("Error");
-        setMsg("Ocurrio un error: " + e);
-        setShowMsg(true);
-        return;
-      });
-  };
-
-  useEffect(() => {
-    const dataFactura = mCFacturas.filter((item) => item.id === IDFactura);
-    setFactura(dataFactura[0].factura);
-    setIDProveedor(dataFactura[0].proveedor);
-    const dataProveedor = mCatProveedores.filter(
-      (item) => item.id === dataFactura[0].proveedor
-    );
-    setProveedor(dataProveedor[0].nombre);
-  }, [IDFactura, mCFacturas, mCatProveedores]);
-
-  useEffect(() => {
-    const data = mCPartidas.filter((item) => item.id === props.IDPartida);
-    if (data[0]) {
-      setIDPartida(data[0].id);
-      setIDFactura(data[0].idFactura);
-      setFactura(data[0].factura);
-      setDescripcionMaterial(data[0].descripcionMaterial);
-      setProveedor(data[0].proveedor);
-      setDTA(data[0].dta);
-      setIGI(data[0].igi);
-      setIEPS(data[0].ieps);
-      setFraccionArancelaria(data[0].fraccionArancelaria);
-      setValorAduana(data[0].valorAduana);
-    }
-  }, [props.IDPartida, mCPartidas]);
-
-  return (
-    <div>
-      <Card
-        style={{
-          backgroundColor: "#F1F9FE",
-          paddingLeft: "10px",
-          paddingRight: "10px",
-          paddingTop: "5px",
-          paddingBottom: "5px",
-        }}
-      >
-        <Container fluid="md">
-          <Row style={{ paddingTop: "15px" }}>
-            <Col xs={2}>Factura</Col>
-            <Col xs={3}>
-              {/*   <Form.Control
-                type='text'
-                id='Factura'
-                size='sm'
-                value={Factura}
-                onChange={(e) => {
-                  setFactura(e.target.value)
-                }}
-              /> */}
-              <Form.Control
-                id="CmbFacturas"
-                as="select"
-                onChange={(e) => {
-                  setIDFactura(parseInt(e.target.value));
-                }}
-                value={IDFactura}
-                className="form-select form-select-sm"
-              >
-                {mCFacturas
-                  ? mCFacturas.map((item, index) => {
-                      return item.idTrafico === props.IDTrafico ? (
-                        <option value={item.id}>{item.factura}</option>
-                      ) : (
-                        <option value="0">-Seleccione-</option>
-                      );
-                    })
-                  : ""}
-              </Form.Control>
-            </Col>
-            <Col xs={5}></Col>
-            <Col>
-              <Button
-                id="BtnSavePartida"
-                variant="primary"
-                onClick={() => {
-                  saveForm();
-                }}
-              >
-                Guardar
-              </Button>
-            </Col>
-          </Row>
-          <Row style={{ paddingTop: "15px" }}>
-            <Col xs={2}>Proveedor</Col>
-            <Col xs={10}>
-              <Form.Control
-                type="text"
-                id="Proveedor"
-                size="sm"
-                value={Proveedor}
-                onChange={(e) => {
-                  setProveedor(e.target.value);
-                }}
-                disabled={true}
-              />
-            </Col>
-          </Row>
-          <Row style={{ paddingTop: "15px" }}>
-            <Col xs={2}>Descripcion del material</Col>
-            <Col>
-              <Form.Control
-                rows={4}
-                as="textarea"
-                id="DescripcionMaterial"
-                value={DescripcionMaterial}
-                size="sm"
-                onChange={(e) => {
-                  setDescripcionMaterial(e.target.value);
-                }}
-              />
-            </Col>
-          </Row>
-          <Row style={{ paddingTop: "15px" }}>
-            <Col xs={3}>Fraccion arancelaria</Col>
-            <Col xs={3}>
-              <Form.Control
-                type="text"
-                id="FraccionArancelaria"
-                size="sm"
-                value={FraccionArancelaria}
-                onChange={(e) => {
-                  setFraccionArancelaria(e.target.value);
-                }}
-              />
-            </Col>
-            <Col xs={2}>Valor aduana</Col>
-            <Col xs={3}>
-              <CurrencyFormat
-                id="ValorAduana"
-                value={ValorAduana}
-                thousandSeparator={true}
-                placeholder="ValorAduana"
-                onValueChange={(values: any) => {
-                  const { value } = values;
-                  setValorAduana(value);
-                }}
-              />
-            </Col>
-          </Row>
-          <Row style={{ paddingTop: "15px" }}>
-            <Col xs={1} style={{ textAlign: "right" }}>
-              DTA
-            </Col>
-            <Col xs={2}>
-              <CurrencyFormat
-                id="CDTA"
-                placeholder="DTA"
-                value={DTA}
-                thousandSeparator={true}
-                onValueChange={(values: any) => {
-                  const { value } = values;
-                  setDTA(value.length === 0 ? 0 : value);
-                }}
-              />
-            </Col>
-            <Col xs={1}>&nbsp;</Col>
-            <Col xs={1} style={{ textAlign: "right" }}>
-              IGI
-            </Col>
-            <Col xs={2}>
-              <CurrencyFormat
-                id="CIGI"
-                value={IGI}
-                thousandSeparator={true}
-                placeholder="IGI"
-                onValueChange={(values: any) => {
-                  const { value } = values;
-                  setIGI(value);
-                }}
-              />
-            </Col>
-            <Col xs={1}>&nbsp;</Col>
-            <Col xs={1} style={{ textAlign: "right" }}>
-              IEPS
-            </Col>
-            <Col xs={2}>
-              <CurrencyFormat
-                id="CIEPS"
-                value={IEPS}
-                thousandSeparator={true}
-                placeholder="IEPS"
-                onValueChange={(values: any) => {
-                  const { value } = values;
-                  setIEPS(value);
-                }}
-              />
-            </Col>
-          </Row>
-        </Container>
-      </Card>
-      <MsgInformativo
-        show={show}
-        msg={msg}
-        header={header}
-        msgColor={msgColor}
-        closeToast={() => {
-          setShowMsg(false);
-        }}
-      />
-    </div>
-  );
-};

src/Components/Corresponsales/Partidas/Partidas.tsx

@@ -1,269 +0,0 @@
-import React, { FC, useState } from 'react'
-import { Alert, Button, Card, Col, Modal, Row } from 'react-bootstrap'
-import ICorresponsalPartidas from '../../../Interfaces/Corresponsales/ICorresponsalPedimentoPartidas'
-import { MsgInformativo } from '../../Utils/Toast/msgInformativo'
-import CPartidasService from '../../../Services/Corresponsalias/Corresponsales.Trafico.Pedimento.Partidas.Services'
-import { useDispatch, useSelector } from 'react-redux'
-import DataTable from 'react-data-table-component'
-import { IconContext } from 'react-icons'
-import { BsFillPencilFill, BsFillTrashFill } from 'react-icons/bs'
-import { RootState } from '../../../store/store'
-import { DialogBox } from './Dialog/DialogBox'
-import { deleteCorresponsalesPartidas } from '../../../store/features/Corresponsales/CorresponsalesPartidasSlice'
-
-interface IProps {
-  IDTrafico: number
-  canEdit: boolean
-}
-
-export const Partidas: FC<IProps> = (props) => {
-  const dispatch = useDispatch()
-  const [Depto, setDepto] = useState(() => {
-    const stickyValue = window.localStorage.getItem('Departamento')
-    return stickyValue !== null ? JSON.parse(stickyValue) : ''
-  })
-  const [ShowModal, setShowModal] = useState(false)
-  const [MsgDialogDelete, setMsgDialogDelete] = useState(false)
-  const [IDPartida, setIDPartida] = useState(0)
-  const [Factura, setFactura] = useState('')
-  const [Descripcion, setDescripcion] = useState('')
-  const [header, setHeader] = useState('')
-  const [show, setShowMsg] = useState(false)
-  const [msg, setMsg] = useState('')
-  // const [Info, setInfo] = useState<ICorresponsalPartidas>()
-  const mCPartidas = useSelector(
-    (state: RootState) => state.CPartidas.CorresponsalesPartidas
-  )
-  const msgColor = 'primary'
-  const dataColPartidas = [
-    {
-      name: 'Partida',
-      width: '90px',
-      selector: (row: ICorresponsalPartidas) => row.partida,
-      sortable: true
-    },
-    {
-      name: 'Factura',
-      width: '100px',
-      selector: (row: ICorresponsalPartidas) => row.factura,
-      sortable: true
-    },
-    {
-      name: 'Proveedor',
-      center: true,
-      width: '450px',
-      selector: (row: ICorresponsalPartidas) => row.proveedor
-    },
-    {
-      name: 'Descripcion de material',
-      center: true,
-      width: '450px',
-      selector: (row: ICorresponsalPartidas) => row.descripcionMaterial
-    },
-    {
-      name: 'Frac arancelaria',
-      center: true,
-      width: '120px',
-      selector: (row: ICorresponsalPartidas) => row.fraccionArancelaria
-    },
-    {
-      name: 'Val aduana',
-      center: true,
-      width: '100px',
-      selector: (row: ICorresponsalPartidas) => row.valorAduana
-    },
-    {
-      name: 'DTA',
-      center: true,
-      width: '70px',
-      selector: (row: ICorresponsalPartidas) => row.dta
-    },
-    {
-      name: 'IGI',
-      center: true,
-      width: '70px',
-      selector: (row: ICorresponsalPartidas) => row.igi
-    },
-    {
-      name: 'IEPS',
-      center: true,
-      width: '70px',
-      selector: (row: ICorresponsalPartidas) => row.ieps
-    },
-    {
-      name: '',
-      width: '130px',
-      cell: (row: ICorresponsalPartidas) => (
-        <Row>
-          <Col>
-            <div
-              style={{
-                textAlign: 'center',
-                cursor: 'pointer',
-                visibility: props.canEdit ? 'visible' : 'hidden'
-              }}
-              onClick={() => {
-                loadData(row)
-              }}
-            >
-              <IconContext.Provider value={{ color: 'blue', size: '20px' }}>
-                <BsFillPencilFill />
-              </IconContext.Provider>
-            </div>
-          </Col>
-          <Col>&nbsp;&nbsp;</Col>
-          <Col>
-            <div
-              style={{
-                textAlign: 'center',
-                cursor: 'pointer',
-                visibility: props.canEdit ? 'visible' : 'hidden'
-              }}
-              onClick={() => {
-                confirmDelete(row)
-              }}
-            >
-              <IconContext.Provider value={{ color: 'red', size: '20px' }}>
-                <BsFillTrashFill />
-              </IconContext.Provider>
-            </div>
-          </Col>
-        </Row>
-      )
-    }
-  ]
-
-  const loadData = (row: ICorresponsalPartidas) => {
-    setIDPartida(row.id)
-    setShowModal(true)
-  }
-
-  const confirmDelete = (row: ICorresponsalPartidas) => {
-    setIDPartida(row.id)
-    setFactura(row.factura)
-    setDescripcion(row.descripcionMaterial)
-    setMsgDialogDelete(true)
-  }
-
-  const deleteItem = () => {
-    CPartidasService.Delete(IDPartida)
-      .then((response) => {
-        if (response.status === 200) {
-          dispatch(deleteCorresponsalesPartidas(IDPartida))
-          setMsgDialogDelete(false)
-        }
-      })
-      .catch((e: Error) => {
-        setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
-        setShowMsg(true)
-        return
-      })
-  }
-
-  return (
-    <div>
-      <Card
-        style={{
-          backgroundColor: '#F1F9FE',
-          paddingLeft: '10px',
-          paddingRight: '10px',
-          paddingTop: '5px',
-          paddingBottom: '5px'
-        }}
-      >
-        <Card.Title>
-          <Row>
-            <Col xs={11}> Partidas</Col>
-            <Col>
-              <Button
-                style={{
-                  visibility: Depto === 'Corresponsalias' ? 'visible' : 'hidden'
-                }}
-                variant="primary"
-                onClick={() => {
-                  setIDPartida(0)
-                  setShowModal(true)
-                }}
-              >
-                Agregar
-              </Button>
-            </Col>
-          </Row>
-        </Card.Title>
-        <DataTable
-          defaultSortFieldId={'id'}
-          defaultSortAsc={true}
-          pagination
-          highlightOnHover
-          columns={dataColPartidas}
-          data={mCPartidas.filter((a) => {
-            if (a.idTrafico === props.IDTrafico) {
-              return a
-            }
-          })}
-        />
-      </Card>
-      <Modal
-        show={ShowModal}
-        onHide={() => {
-          setShowModal(false)
-        }}
-        size={'sm'}
-        dialogClassName={'modal-50w'}
-      >
-        <Modal.Body>
-          <div style={{ height: '400px', overflow: 'scroll' }}>
-            <DialogBox IDTrafico={props.IDTrafico} IDPartida={IDPartida} />
-          </div>
-        </Modal.Body>
-      </Modal>
-      <Modal
-        show={MsgDialogDelete}
-        onHide={() => setMsgDialogDelete(false)}
-        size="lg"
-      >
-        <Modal.Body>
-          <Alert variant="primary">
-            <h5>
-              Favor de confirmar
-              <br />
-              <br />
-              ¿Esta seguro de eliminar la factura: {Factura} : {Descripcion}?
-            </h5>
-          </Alert>
-        </Modal.Body>
-        <Modal.Footer>
-          <Row>
-            <Col xs={1}>
-              <Button
-                variant="secondary"
-                onClick={() => setMsgDialogDelete(false)}
-                size="sm"
-              >
-                Cerrar
-              </Button>
-            </Col>
-            <Col xs={5} style={{ paddingLeft: '550px', paddingRight: '0px' }}>
-              &nbsp;
-            </Col>
-            <Col xs={1}>
-              <Button variant="danger" onClick={() => deleteItem()} size="sm">
-                Eliminar
-              </Button>
-            </Col>
-          </Row>
-        </Modal.Footer>
-      </Modal>
-      <MsgInformativo
-        show={show}
-        msg={msg}
-        header={header}
-        msgColor={msgColor}
-        closeToast={() => {
-          setShowMsg(false)
-        }}
-      />
-    </div>
-  )
-}

src/Components/Corresponsales/ProveedorFactura/ControlledInput/ControlledInput.tsx

@@ -1,148 +0,0 @@
-import React, { FC, useEffect, useState } from 'react';
-import { MsgInformativo } from '../../../Utils/Toast/msgInformativo';
-import { useDispatch, useSelector } from 'react-redux';
-import { updateCorresponsalesFacturas } from '../../../../store/features/Corresponsales/CorresponsalesFacturasSlice';
-import ICorresponsalFacturas from '../../../../Interfaces/Corresponsales/ICorresponsalFacturas';
-import CorFacDataService from '../../../../Services/Corresponsalias/Corresponsales.Facturas.Services';
-import { RootState } from '../../../../store/store';
-import { Form } from 'react-bootstrap';
-
-interface IProps {
-  record: ICorresponsalFacturas;
-  disabled?: boolean;
-  mode: number; // 1: Number, 2: String
-}
-
-export const ControlledInput: FC<IProps> = (props) => {
-  const dispatch = useDispatch();
-  const mProveedores = useSelector(
-    (state: RootState) => state.CatProveedores.CatalogoProveedores
-  );
-  const [id, setid] = useState(props.record.id);
-  const [value, setValue] = useState(props.record.factura);
-  const [IDProveedor, setIDProveedor] = useState(props.record.proveedor);
-  const [ValorFacturaDls, setValorFacturaDls] = useState(
-    props.record.valorFacturaDls
-  );
-  const [Pedido, setPedido] = useState(props.record.pedido);
-  const [header, setHeader] = useState('');
-  const [msgColor, setMsgColor] = React.useState('primary');
-  const [show, setShowMsg] = useState(false);
-  const [msg, setMsg] = useState('');
-  const [ClasificacionProveedor, setClasificacionProveedor] = useState(2);
-
-  const onChangeFac = (event: any) => {
-    setValue(event.target.value);
-  };
-
-  const onChangeDls = (event: any) => {
-    setValorFacturaDls(event.target.value);
-  };
-
-  const onChangePed = (event: any) => {
-    setPedido(event.target.value);
-  };
-
-  useEffect(() => {
-    console.log(mProveedores);
-  }, [mProveedores]);
-
-  const handleKeyDown = (event: any, mode: number) => {
-    if (event.key === 'Enter') {
-      if (isNaN(event.target.value) && mode === 1) {
-        alert('Valor no valido!');
-        return;
-      }
-      const data: ICorresponsalFacturas = {
-        id: id,
-        factura: value,
-        idTrafico: props.record.idTrafico,
-        valorFacturaDls: ValorFacturaDls,
-        proveedor: IDProveedor,
-        corresponsal: props.record.corresponsal,
-        pedido: Pedido,
-        code: 0,
-        folioGEMCO: '',
-      };
-      CorFacDataService.Append(data)
-        .then((response) => {
-          if (response.status == 200) {
-            dispatch(updateCorresponsalesFacturas(response.data));
-            setHeader('Informativo');
-            setMsg('La informacion se guardo exitosamente');
-            setShowMsg(true);
-            return;
-          }
-        })
-        .catch((e: Error) => {
-          setHeader('Error');
-          setMsg('Ocurrio un error: ' + e);
-          setShowMsg(true);
-          return;
-        });
-    }
-  };
-
-  function changeValue(val: number) {
-    setIDProveedor(val);
-  }
-  return (
-    <>
-      <input
-        value={value}
-        onChange={onChangeFac}
-        disabled={false}
-        onKeyDown={(e) => handleKeyDown(e, 2)}
-        style={{ width: '25%', textAlign: 'right' }}
-      />
-      &nbsp; &nbsp; &nbsp;
-      <input
-        value={ValorFacturaDls}
-        onChange={onChangeDls}
-        disabled={false}
-        onKeyDown={(e) => handleKeyDown(e, 1)}
-        style={{ width: '20%', textAlign: 'right' }}
-      />
-      &nbsp; &nbsp; &nbsp;
-      <input
-        value={Pedido}
-        onChange={onChangePed}
-        disabled={false}
-        onKeyDown={(e) => handleKeyDown(e, 2)}
-        style={{ width: '20%', textAlign: 'right' }}
-      />
-      &nbsp; &nbsp; &nbsp;
-      <Form.Control
-        as='select'
-        onChange={(f) => {
-          changeValue(parseInt(f.target.value));
-        }}
-        value={IDProveedor}
-        className='form-select form-select-sm'
-      >
-        {mProveedores
-          ? mProveedores
-              .filter(function (row) {
-                return row.clasificacion === ClasificacionProveedor;
-              })
-              .map((p) => {
-                return (
-                  <option value={p.id} key={p.id}>
-                    {p.nombre}
-                  </option>
-                );
-              })
-          : null}
-      </Form.Control>
-      <MsgInformativo
-        show={show}
-        msg={msg}
-        header={header}
-        msgColor={msgColor}
-        closeToast={() => {
-          setShowMsg(false);
-        }}
-      />
-    </>
-  );
-};

src/Components/Corresponsales/ProveedorFactura/ProveedorFactura.tsx

@@ -1,426 +0,0 @@
-import React, { FC, useEffect, useState } from 'react';
-import { Alert, Button, Card, Col, Form, Modal, Row } from 'react-bootstrap';
-import { IconContext } from 'react-icons';
-import 'react-flexy-table/dist/index.css';
-import FacDataService from '../../../Services/Corresponsalias/Corresponsales.Facturas.Services';
-import { RootState } from '../../../store/store';
-import { useDispatch, useSelector } from 'react-redux';
-import { FcManager } from 'react-icons/fc';
-import ICorresponsalFacturas from '../../../Interfaces/Corresponsales/ICorresponsalFacturas';
-import {
-  addCorresponsalesFacturas,
-  deleteCorresponsalesFacturas,
-  populateCorresponsalesFacturas,
-} from '../../../store/features/Corresponsales/CorresponsalesFacturasSlice';
-import '../../../css/react-flexy-table.css';
-import { MsgInformativo } from '../../Utils/Toast/msgInformativo';
-import * as CurrencyFormat from 'react-currency-format';
-import { CatProveedores } from '../CatProveedores/CatProveedores';
-import { FaEraser, FaTimesCircle } from 'react-icons/fa';
-import DataTable from 'react-data-table-component';
-import { ControlledInput } from './ControlledInput/ControlledInput';
-
-interface IProps {
-  IDTrafico: number;
-  IDCorresponsal: number;
-  canDelete: boolean;
-}
-
-export const ProveedorFactura: FC<IProps> = (props) => {
-  const mCFacturas = useSelector(
-    (state: RootState) => state.CFData.CorresponsalesFacturas
-  );
-  const mProveedores = useSelector(
-    (state: RootState) => state.CatProveedores.CatalogoProveedores
-  );
-  const dispatch = useDispatch();
-  const [ShowModal, setShowModal] = useState(false);
-  const [IDFactura, setIDFactura] = useState(0);
-  const [Factura, setFactura] = useState('');
-  const [ValorFacturaDls, setValorFacturaDls] = useState<number>(0);
-  const [Pedido, setPedido] = useState('');
-  const [header, setHeader] = useState('');
-  const [show, setShowMsg] = useState(false);
-  const [msg, setMsg] = useState('');
-  const [DialogTabs, setDialogTabs] = useState(false);
-  const [IDProveedor, setIDProveedor] = useState(0);
-  const MsgTime = 2000;
-  const msgColor = 'primary';
-  const ClasificacionProveedor = 2;
-
-  const TblHeader: React.FC = () => (
-    <table>
-      <tr
-        style={{
-          fontSize: '15px',
-          fontWeight: 'bold',
-          backgroundColor: '#FFFFFF',
-        }}
-      >
-        <td width='140px' style={{ textAlign: 'center' }}>
-          Factura
-        </td>
-        <td width='120px' style={{ textAlign: 'center' }}>
-          Valor Dls
-        </td>
-        <td width='120px' style={{ textAlign: 'center' }}>
-          Pedido
-        </td>
-        <td width='560px' style={{ textAlign: 'center' }}>
-          Proveedor
-        </td>
-      </tr>
-    </table>
-  );
-
-  const columnsFacturas = [
-    {
-      name: 'id',
-      width: '10%',
-      selector: (row: ICorresponsalFacturas) => row.id,
-      sortable: true,
-    },
-    {
-      name: <TblHeader />,
-      width: '75%',
-      cell: (row: ICorresponsalFacturas) => {
-        return <ControlledInput record={row} disabled={false} mode={2} />;
-      },
-    },
-    {
-      name: 'Elimina',
-      cell: (row: ICorresponsalFacturas) => (
-        <div
-          style={{
-            textAlign: 'center',
-            cursor: 'pointer',
-            visibility: props.canDelete ? 'visible' : 'hidden',
-          }}
-          onClick={() => {
-            setIDFactura(row.id);
-            setFactura(row.factura);
-            setDialogTabs(true);
-          }}
-        >
-          <IconContext.Provider value={{ color: 'red', size: '25px' }}>
-            <FaTimesCircle />
-          </IconContext.Provider>
-        </div>
-      ),
-    },
-  ];
-
-  useEffect(() => {
-    FacDataService.getAll(props.IDTrafico)
-      .then((response) => {
-        dispatch(populateCorresponsalesFacturas(response.data));
-      })
-      .catch((e: Error) => {
-        setHeader('Error');
-        setMsg('Ocurrio un error: ' + e);
-        setShowMsg(true);
-        return;
-      });
-  }, [props.IDTrafico, dispatch]);
-
-  const cleanForm = () => {
-    setFactura('');
-    setIDFactura(0);
-    setIDProveedor(0);
-    setValorFacturaDls(0);
-  };
-
-  const saveForm = () => {
-    if (Factura.length <= 3) {
-      setHeader('Error');
-      setMsg('Proporcione la factura para poder continuar');
-      setShowMsg(true);
-      setDialogTabs(false);
-      return false;
-    }
-    if (ValorFacturaDls === 0) {
-      setHeader('Error');
-      setMsg('Proporcione el valor en dlls de la factura para poder continuar');
-      setShowMsg(true);
-      setDialogTabs(false);
-      return false;
-    }
-    if (IDProveedor === 0) {
-      setHeader('Error');
-      setMsg('Seleccione un proveedor para poder continuar');
-      setShowMsg(true);
-      setDialogTabs(false);
-      return false;
-    }
-    const data: ICorresponsalFacturas = {
-      id: 0,
-      factura: Factura,
-      idTrafico: props.IDTrafico,
-      valorFacturaDls: ValorFacturaDls,
-      proveedor: IDProveedor,
-      corresponsal: props.IDCorresponsal,
-      pedido: Pedido,
-      code: 0,
-      folioGEMCO: '',
-    };
-    FacDataService.Append(data)
-      .then((response) => {
-        if (response.status === 200) {
-          setHeader('Informativo');
-          const respuesta: ICorresponsalFacturas = response.data;
-          console.log(respuesta);
-          if (respuesta.code && typeof respuesta.code === 'number') {
-            const result = respuesta.code;
-            if (result === 409)
-              setMsg(
-                `La factura [${response.data.factura}] de ese proveedor ya se han registrado previamente en el año en curso, lo encuentra en el folio [${response.data.folioGEMCO}]`
-              );
-            else {
-              setMsg('La factura se agrego exitosamente ');
-              if (data.id === 0)
-                dispatch(addCorresponsalesFacturas(response.data));
-            }
-          }
-          setShowMsg(true);
-          setDialogTabs(false);
-        }
-      })
-      .catch((e: Error) => {
-        setHeader('Error');
-        setMsg('Ocurrio un error: ' + e);
-        setShowMsg(true);
-        return;
-      });
-  };
-
-  const deleteItem = () => {
-    FacDataService.Delete(IDFactura)
-      .then((response) => {
-        if (response.status === 200) {
-          setHeader('Informativo');
-          setMsg('La factura se ha eliminado');
-          setShowMsg(true);
-          setDialogTabs(false);
-          dispatch(deleteCorresponsalesFacturas(IDFactura));
-          return;
-        }
-      })
-      .catch((e: Error) => {
-        setHeader('Error');
-        setMsg('Ocurrio un error: ' + e);
-        setShowMsg(true);
-        return;
-      });
-  };
-
-  return (
-    <div>
-      <Card style={{}}>
-        <Card.Body>
-          <Card.Subtitle className='mb-2 text-muted'>
-            <Row
-              style={{ paddingBottom: '5', paddingTop: '15' }}
-              className={props.canDelete ? 'visible' : 'invisible heightZero'}
-            >
-              <Col
-                xs={1}
-                style={{
-                  textAlign: 'right',
-                  paddingTop: '5px',
-                  cursor: 'pointer',
-                }}
-                onClick={() => {
-                  cleanForm();
-                }}
-              >
-                <IconContext.Provider value={{ color: 'orange', size: '25px' }}>
-                  <FaEraser />
-                </IconContext.Provider>
-              </Col>
-              <Col xs='1'>
-                <Form.Control
-                  type='text'
-                  id='Factura'
-                  size='sm'
-                  value={Factura}
-                  placeholder='Factura'
-                  pattern='[a-zA-Z-0-9 ]*'
-                  onChange={(e) =>
-                    setFactura((v) =>
-                      e.target.validity.valid ? e.target.value : v
-                    )
-                  }
-                />
-              </Col>
-              <Col xs='1'>
-                <CurrencyFormat
-                  id='ValorFacturaDls'
-                  value={ValorFacturaDls}
-                  prefix={'$'}
-                  displayType={'input'}
-                  thousandSeparator={true}
-                  onValueChange={(values: any) => {
-                    const { value } = values;
-                    setValorFacturaDls(value);
-                  }}
-                  style={{
-                    fontSize: '18px',
-                    backgroundColor: '#F5FFED',
-                    border: '2px solid #25D05B',
-                    width: '100px',
-                    textAlign: 'right',
-                    borderRadius: '10px',
-                  }}
-                />
-              </Col>
-              <Col xs={1}>
-                <Form.Control
-                  type='text'
-                  id='Pedido'
-                  size='sm'
-                  value={Pedido}
-                  placeholder='Pedido'
-                  onChange={(e) => setPedido(e.target.value)}
-                />
-              </Col>
-              <Col xs={5}>
-                <Form.Control
-                  id='IDProveedor'
-                  as='select'
-                  onChange={(e) => {
-                    setIDProveedor(parseInt(e.target.value));
-                  }}
-                  className='form-select form-select-sm'
-                  value={IDProveedor}
-                >
-                  <option>-Seleccione-</option>
-                  {mProveedores
-                    ? mProveedores
-                        .filter(function (row) {
-                          return row.clasificacion === ClasificacionProveedor;
-                        })
-                        .map((item, index) => {
-                          return (
-                            <option value={item.id} key={item.id}>
-                              {item.nombre}
-                            </option>
-                          );
-                        })
-                    : ''}
-                </Form.Control>
-              </Col>
-              <Col xs={1} style={{ cursor: 'pointer' }}>
-                <Button
-                  variant='primary'
-                  size='sm'
-                  onClick={() => {
-                    setShowModal(true);
-                  }}
-                >
-                  <IconContext.Provider value={{ color: 'blue', size: '25px' }}>
-                    <FcManager />
-                  </IconContext.Provider>
-                </Button>
-              </Col>
-              <Col xs={1}></Col>
-              <Col xs={1}>
-                <Button
-                  id='BtnSave'
-                  variant='primary'
-                  size='sm'
-                  onClick={() => {
-                    saveForm();
-                  }}
-                >
-                  Agregar
-                </Button>
-              </Col>
-              <Col>&nbsp;</Col>
-            </Row>
-          </Card.Subtitle>
-          <DataTable
-            /* noHeader */
-            fixedHeader={true}
-            defaultSortFieldId={'id'}
-            defaultSortAsc={true}
-            fixedHeaderScrollHeight='400px'
-            persistTableHead
-            striped
-            dense
-            paginationPerPage={7}
-            paginationRowsPerPageOptions={[7, 10, 14, 20, 21]}
-            responsive
-            pagination
-            highlightOnHover
-            columns={columnsFacturas}
-            data={mCFacturas.filter(function (el) {
-              return el.id > 0;
-            })}
-          />
-        </Card.Body>
-      </Card>
-      <MsgInformativo
-        show={show}
-        msg={msg}
-        header={header}
-        msgColor={msgColor}
-        time={MsgTime}
-        closeToast={() => {
-          setShowMsg(false);
-        }}
-      />
-      <Modal
-        show={DialogTabs}
-        onHide={() => {
-          setDialogTabs(false);
-        }}
-        size='sm'
-      >
-        <Modal.Body>
-          <Alert variant='primary'>
-            <b>¿Esta seguro de eliminar?</b>
-            <br />
-            <h5> {Factura} </h5>
-          </Alert>
-        </Modal.Body>
-        <Modal.Footer>
-          <Row>
-            <Col xs={6} style={{ textAlign: 'left', paddingRight: '100px' }}>
-              <Button
-                variant='danger'
-                onClick={deleteItem}
-                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>
-      <Modal
-        show={ShowModal}
-        onHide={() => {
-          setShowModal(false);
-        }}
-        size='sm'
-        dialogClassName='modal-50w'
-      >
-        <Modal.Body>
-          <CatProveedores canDelete={true} clasificacion={2} />
-        </Modal.Body>
-      </Modal>
-    </div>
-  );
-};

src/Components/Corresponsales/Rectificaciones/Rectificaciones.tsx

@@ -1,180 +0,0 @@
-import React, { FC, useEffect, useState } from 'react'
-import { Alert, Button, Col, Modal, Row } from 'react-bootstrap'
-import DataTable from 'react-data-table-component'
-import { IconContext } from 'react-icons'
-import { FaCopy } from 'react-icons/fa'
-import ICorresponsalesRectificaciones from '../../../Interfaces/Corresponsales/ICorresponsalesRectificaciones'
-import RectiDataService from '../../../Services/Corresponsalias/Corresponsales.Trafico.Services'
-import { MsgInformativo } from '../../Utils/Toast/msgInformativo'
-
-interface IProps {
-  IDTrafico: number
-  changeIdTrafico: (newId: number) => void
-}
-
-export const Rectificaciones: FC<IProps> = (props) => {
-  const [DTData, setDTData] = useState<ICorresponsalesRectificaciones[]>([])
-  const [id, setId] = useState(0)
-  const [FolioGEMCO, setFolioGEMCO] = useState('')
-  const [header, setHeader] = useState('')
-  const [msgColor, setMsgColor] = React.useState('primary')
-  const [show, setShowMsg] = useState(false)
-  const [msg, setMsg] = useState('')
-  const [DialogClone, setDialogClone] = useState(false)
-  const [MsgTime, setMsgTime] = useState(3000)
-  const dataColumns = [
-    {
-      name: 'id',
-      left: true,
-      width: '10%',
-      selector: (row: ICorresponsalesRectificaciones) => row.id,
-      cell: (row: ICorresponsalesRectificaciones) => (
-        <div
-          onClick={() => {
-            props.changeIdTrafico(row.id)
-          }}
-        >
-          {row.id}
-        </div>
-      ),
-      sortable: true,
-    },
-    {
-      name: 'Folio',
-      width: '20%',
-      selector: (row: ICorresponsalesRectificaciones) => row.folioGemco,
-      sortable: true,
-    },
-    {
-      name: 'Creado',
-      width: '14%',
-      selector: (row: ICorresponsalesRectificaciones) => row.fechaRegistro.substring(0, 10),
-      sortable: true,
-    },
-    {
-      name: 'Prev',
-      center: true,
-      width: '20%',
-      selector: (row: ICorresponsalesRectificaciones) => row.prevRecti,
-      cell: (row: ICorresponsalesRectificaciones) => <div>{row.prevRecti}</div>,
-    },
-    {
-      name: 'Next',
-      center: true,
-      width: '20%',
-      selector: (row: ICorresponsalesRectificaciones) => row.nextRecti,
-      cell: (row: ICorresponsalesRectificaciones) =>
-        row.nextRecti === 0 ? (
-          <div
-            style={{ textAlign: 'center', cursor: 'pointer' }}
-            onClick={() => {
-              setId(row.id)
-              setFolioGEMCO(row.folioGemco)
-              setDialogClone(true)
-            }}
-          >
-            <IconContext.Provider value={{ color: 'blue', size: '25px' }}>
-              <FaCopy />
-            </IconContext.Provider>
-          </div>
-        ) : (
-          <div>{row.nextRecti}</div>
-        ),
-    },
-  ]
-
-  useEffect(() => {
-    RectiDataService.GetRectificaciones(props.IDTrafico)
-      .then((response) => {
-        setDTData(response.data)
-        console.log(JSON.stringify(response.data))
-      })
-      .catch((e: Error) => {
-        setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
-        setShowMsg(true)
-        return
-      })
-  }, [props.IDTrafico])
-
-  const clonItem = () => {
-    RectiDataService.AddRectificacion(id)
-      .then((response) => {
-        if (response.status == 200) {
-          setHeader('Informativo')
-          setMsg('La rectificacion se agrego exitosamente')
-          setShowMsg(true)
-          setDialogClone(false)
-          //if (data.id === 0) dispatch(addCorresponsalesFacturas(response.data))
-        }
-      })
-      .catch((e: Error) => {
-        setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
-        setShowMsg(true)
-        return
-      })
-  }
-
-  return (
-    <div>
-      <DataTable
-        title='Historial de rectificaciones'
-        defaultSortFieldId={'id'}
-        defaultSortAsc={true}
-        pagination
-        highlightOnHover
-        columns={dataColumns}
-        data={DTData ? DTData : []}
-      />
-      <MsgInformativo
-        show={show}
-        msg={msg}
-        header={header}
-        msgColor={msgColor}
-        time={MsgTime}
-        closeToast={() => {
-          setShowMsg(false)
-        }}
-      />
-      <Modal
-        show={DialogClone}
-        onHide={() => {
-          setDialogClone(false)
-        }}
-        size='sm'
-      >
-        <Modal.Body>
-          <Alert variant='primary'>
-            <b>¿Esta seguro de realizar una rectificacion sobre este trafico: [ {FolioGEMCO} ]?</b>
-          </Alert>
-        </Modal.Body>
-        <Modal.Footer>
-          <Row>
-            <Col xs={6} style={{ textAlign: 'left', paddingRight: '100px' }}>
-              <Button
-                variant='danger'
-                onClick={clonItem}
-                size='sm'
-                style={{ paddingRight: '20px', paddingLeft: '20px' }}
-              >
-                Si
-              </Button>
-            </Col>
-            <Col xs={6} style={{ textAlign: 'right' }}>
-              <Button
-                variant='secondary'
-                onClick={() => {
-                  setDialogClone(false)
-                }}
-                size='sm'
-              >
-                Cerrar
-              </Button>
-            </Col>
-          </Row>
-        </Modal.Footer>
-      </Modal>
-    </div>
-  )
-}

src/Components/Corresponsales/Tabulador/Tabulador.tsx

@@ -1,314 +0,0 @@
-import React, { FC, useEffect, useState } from 'react'
-import { Alert, Button, Card, Col, Container, Form, Row } from 'react-bootstrap'
-import ITabulador from '../../../Interfaces/Catalogos/ITabulador'
-import CTabDataService from '../../../Services/Corresponsalias/Corresponsales.Tabuladores.Services'
-import CTabPreDataService from '../../../Services/Corresponsalias/Corresponsales.Precuenta.Services'
-import CTabDetDataService from '../../../Services/Corresponsalias/Corresponsales.Tabuladores.Detalle.Sevices'
-import { MsgInformativo } from '../../Utils/Toast/msgInformativo'
-import DTOConceptos from '../../../DTO/Utils/DTOConceptos'
-import DataTable from 'react-data-table-component'
-import 'react-data-table-component-extensions/dist/index.css'
-import ITabuladorConceptos from '../../../Interfaces/Catalogos/ITabuladorConceptos'
-import { ControlledInput } from '../../Utils/ControlledInput/ControlledInput'
-
-interface IProps {
-  IDCliente: number
-  IDTabulador: number
-  IDTrafico: number
-  NombreCliente: string
-  closeTabulador: (arg: boolean) => void
-  cambiaPrecuenta: (IDPrecuenta: number) => void
-}
-
-interface IselectedRows {
-  allSelected: boolean
-  selectedCount: number
-  selectedRows: any
-}
-
-export const Tabulador: FC<IProps> = (props) => {
-  const [IDTabulador, setIDTabulador] = useState(props.IDTabulador)
-  const [Concepto, setConcepto] = useState(0)
-  const [DetalleConceptos, setDetalleConceptos] = useState<ITabuladorConceptos[]>([])
-  const [CatConceptos, setCatConceptos] = useState<DTOConceptos[]>([])
-  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 columnsConcepts = [
-    {
-      name: 'id',
-      width: '10%',
-      selector: (row: ITabuladorConceptos) => row.id,
-      sortable: true,
-    },
-    {
-      name: 'Concepto',
-      width: '65%',
-      selector: (row: ITabuladorConceptos) => row.concepto,
-      sortable: true,
-    },
-    {
-      name: 'Costo',
-      width: '15%',
-      cell: (row: ITabuladorConceptos) => {
-        return row.activo === 1 ? (
-          <ControlledInput id={row.id} value={row.costo} disabled={true} postCost={(id, value) => {}} />
-        ) : (
-          <ControlledInput id={row.id} value={0} disabled={true} postCost={(id, value) => {}} />
-        )
-      },
-    },
-    {
-      name: 'Activo',
-      width: '10%',
-      cell: (row: ITabuladorConceptos) => {
-        return (
-          <Form.Group controlId='formBasicCheckbox' style={{ textAlign: 'center' }}>
-            <Form.Check
-              type='checkbox'
-              label=''
-              checked={row.activo === 1 ? true : false}
-              onClick={() => {
-                switchConcept(row.id, 1)
-              }}
-            />
-          </Form.Group>
-        )
-      },
-    },
-  ]
-
-  const columnsTabs = [
-    {
-      name: 'id',
-      selector: (row: ITabulador) => row.id,
-      sortable: true,
-    },
-    {
-      name: 'Nombre',
-      width: '70%',
-      // selector: (row: ITabulador) => row.nombre,
-      cell: (row: ITabulador) => (
-        <div
-          style={{ width: '450px', cursor: 'pointer' }}
-          onClick={() => {
-            setIDTabulador(row.id)
-          }}
-        >
-          {row.nombre}
-        </div>
-      ),
-      sortable: true,
-    },
-  ]
-
-  const switchConcept = (id: number, status: number) => {
-    CTabPreDataService.ChangeStatus(id)
-      .then((response) => {
-        if (response.status === 200) {
-          let tmp = DetalleConceptos
-          let idx = tmp.findIndex((obj) => obj.id == id)
-          tmp[idx].activo = status === 1 ? 0 : 1
-          setDetalleConceptos(tmp)
-          setHeader('Confirmacion')
-          setMsg(response.data.respuesta)
-          setShowMsg(true)
-        }
-      })
-      .catch((e: Error) => {
-        setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
-        setShowMsg(true)
-        return
-      })
-  }
-
-  //  const postCost = (id: number, Cost: number) => {}
-
-  const GetAllTabs = () => {
-    CTabDataService.GetByCustomer(props.IDCliente)
-      .then((response) => {
-        setTabuladores(response.data)
-      })
-      .catch((e: Error) => {
-        setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
-        setShowMsg(true)
-        return
-      })
-  }
-
-  useEffect(() => {
-    GetAllTabs()
-  }, [])
-
-  useEffect(() => {
-    CTabPreDataService.GetAll(0, props.IDTrafico)
-      .then((response) => {
-        console.log('conceptos cargados debido a el tabulador guardado ' + JSON.stringify(response.data))
-        setDetalleConceptos(response.data)
-      })
-      .catch((e: Error) => {
-        setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
-        setShowMsg(true)
-        return
-      })
-    // console.log(Tabulador)
-  }, [IDTabulador, props])
-
-  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 saveForm = () => {
-    // alert(IDTabulador)
-    CTabPreDataService.Append(IDTabulador, props.IDTrafico)
-      .then((response) => {
-        setDetalleConceptos(response.data)
-        props.cambiaPrecuenta(IDTabulador)
-      })
-      .catch((e: Error) => {
-        setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
-        setShowMsg(true)
-        return
-      })
-  }
-
-  const addConcept = () => {
-    if (IDTabulador === 0) {
-      setHeader('Error')
-      setMsg('Por favor, primero seleccione el tabulador')
-      setShowMsg(true)
-      return
-    }
-    if (Concepto === 0) {
-      setHeader('Error')
-      setMsg('Por favor, primero seleccione el concepto')
-      setShowMsg(true)
-      return
-    }
-    //    postCost(0, 0)
-  }
-
-  return (
-    <div>
-      <Container fluid>
-        <Alert variant='primary'>
-          <Row>
-            <Col xs={2} style={{ paddingTop: '5px' }}>
-              <h5>Cliente: </h5>
-            </Col>
-            <Col xs={10} style={{ textAlign: 'center' }}>
-              <h4>{props.NombreCliente}</h4>
-            </Col>
-          </Row>
-          <Row>
-            <Col xs={3}>
-              <h6>Tabulador asignado: </h6>
-            </Col>
-            <Col xs={7}>
-              <Form.Control
-                as='select'
-                value={IDTabulador}
-                onChange={(e) => setIDTabulador(parseInt(e.target.value))}
-                className='form-select form-select-sm'
-                style={{ fontSize: '15px' }}
-              >
-                <option value='0'>- No tiene tabulador asignado -</option>
-                {Tabuladores
-                  ? Tabuladores.map((c) => {
-                      return <option value={c.id}>{c.nombre}</option>
-                    })
-                  : null}
-              </Form.Control>
-            </Col>
-            <Col xs={1}>
-              <Button
-                variant='primary'
-                size='sm'
-                style={{ paddingLeft: '10px', paddingRight: '10px' }}
-                onClick={() => saveForm()}
-              >
-                Guardar
-              </Button>
-            </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>
-                <DataTable
-                  noHeader
-                  defaultSortFieldId={'id'}
-                  defaultSortAsc={true}
-                  pagination
-                  highlightOnHover
-                  columns={columnsTabs}
-                  data={Tabuladores}
-                />
-              </Card.Body>
-            </Card>
-          </Col> */}
-          <Col xs={12}>
-            <Card style={{}}>
-              <Card.Body>
-                <Card.Subtitle className='mb-2 text-muted'></Card.Subtitle>
-                <DataTable
-                  noHeader
-                  defaultSortFieldId={'id'}
-                  defaultSortAsc={true}
-                  pagination
-                  highlightOnHover
-                  columns={columnsConcepts}
-                  data={DetalleConceptos}
-                />
-              </Card.Body>
-            </Card>
-          </Col>
-        </Row>
-      </Container>
-      <MsgInformativo
-        show={show}
-        msg={msg}
-        header={header}
-        msgColor={msgColor}
-        closeToast={() => {
-          setShowMsg(false)
-        }}
-      />
-    </div>
-  )
-}

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,10 +7,9 @@ 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) {
+export default function DashboardTrafico(props: IDashboardTraficoProps) {
   const [Terminadas, setTerminadas] = useState(0)
   const [Pendientes, setPendientes] = useState(0)
   const [Total, setTotal] = useState(0)
@@ -39,16 +38,21 @@ export default function DashboardTrafico (props: IDashboardTraficoProps) {
   return (
     <>
       <Col>
-          <Card style={{ width: '18rem' }} className='blueCardBorder dashboardComponentFont'>
-            <Card.Header style={{backgroundColor: '#1D6DC2', color: '#ffffff'}}>Trafico</Card.Header>
+        <Card
+          style={{ width: '18rem' }}
+          className="blueCardBorder dashboardComponentFont"
+        >
+          <Card.Header style={{ backgroundColor: '#1D6DC2', color: '#ffffff' }}>
+            Trafico
+          </Card.Header>
           <Card.Body>
             <Card.Title>
-                Facturas {' '}
-                <IconContext.Provider value={{ color: '#F6C34F', size:'30%' }}>
+              Facturas{' '}
+              <IconContext.Provider value={{ color: '#F6C34F', size: '30%' }}>
                 <FaAmazon />
               </IconContext.Provider>
             </Card.Title>
-              <Row >
+            <Row>
               <Col xs={6} style={{}}>
                 <Link
                   to="../RptAmazonLinkInvoice2Traffic"
@@ -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/ForgotPassword.tsx

@@ -0,0 +1,177 @@
+import * as React from 'react'
+import { Button, Card, Col, Form, Row } from 'react-bootstrap'
+import logo from '../../images/GEMCO.png'
+import { MsgInformativo } from '../Utils/Toast/msgInformativo'
+import ReactCaptchaa from 'react-captchaa'
+import AuthDS from '../../Services/Auth/Auth.Service'
+import 'react-captchaa/dist/index.css'
+import '../../css/reactCaptcha.css'
+import ILogin from '../../Interfaces/Ilogin'
+import { AxiosError } from 'axios'
+import { useNavigate } from 'react-router-dom'
+import { useState } from 'react'
+
+export interface IForgotPasswordProps {}
+
+export default function ForgotPassword(props: IForgotPasswordProps) {
+  const navigate = useNavigate()
+  const [Usuario, setUsuario] = useState('')
+  const [Contrasenia, setContrasenia] = useState('')
+  const [Captcha, setCaptcha] = useState('')
+  const [CaptchaText, setCaptchaText] = useState('')
+  const [show, setShow] = useState(false)
+  const [msg, setMsg] = useState('')
+  const [header, setHeader] = useState('')
+  const [msgColor, setMsgColor] = useState('primary')
+
+  const validateCaptcha = () => {
+    if (!Usuario.length) {
+      setShow(true)
+      setMsg('El campo usuario no puede estar vacio')
+      setHeader('Error')
+      return
+    }
+    if (Captcha !== CaptchaText) {
+      setShow(true)
+      setMsg('Captcha o usuario incorrecto')
+      setHeader('Error')
+      return
+    }
+    const data: ILogin = {
+      Usuario: Usuario,
+      Contrasena: Contrasenia,
+    }
+    AuthDS.forgotPassword(data)
+      .then((response: any) => {
+        localStorage.setItem('User', JSON.stringify(Usuario))
+        navigate('/PIN')
+      })
+      .catch((e: AxiosError) => {
+        setShow(true)
+        setMsg('Usuario no existe')
+        setHeader('Error')
+      })
+  }
+
+  return (
+    <div>
+      <Row style={{ paddingTop: '6rem' }}>
+        <Col xs={12}></Col>
+      </Row>
+      <Row>
+        <Col xs={5}>&nbsp;</Col>
+        <Col xs={2}>
+            <div
+              className='shadow-lg bg-white rounded'
+              style={{ marginLeft: 'auto', marginRight: 'auto', width:'125%' }}
+            >
+              <Card className='Color1'>
+                <Card.Header>
+                  <Row>
+                    <Col xs={4}></Col>
+                    <Col xs={4}>
+                      <img
+                        src={logo}
+                        alt='GEMCO'
+                        style={{ width: '80%', textAlign: 'center' }}
+                      ></img>
+                    </Col>
+                    <Col xs={4}></Col>
+                  </Row>
+                </Card.Header>
+                <Card.Body>
+                  <Card.Text>
+                    <Row>
+                      <Col xs={12}>&nbsp;</Col>
+                    </Row>
+                    <Form id='login-form' className='form'>
+                      <Row>
+                        <Col>
+                          <Form.Control
+                            id='Usuario'
+                            className='form-control'
+                            placeholder='Usuario'
+                            value={Usuario}
+                            onChange={(e) => {
+                              setUsuario(e.target.value)
+                            }}
+                          />
+                        </Col>
+                      </Row>
+                      <Row>
+                        <Col xs={12}>&nbsp;</Col>
+                      </Row>
+                      <Row>
+                        <Col xs={12}>
+                          <ReactCaptchaa
+                            captchaText={(captchaText: string) => {
+                              setCaptchaText(captchaText)
+                            }}
+                            captchaLength={6}
+                            captchaButtonClick={(e: any) => {}}
+                            onCanvasClick={(e: any) => {}}
+                            height={150}
+                            width={200}
+                            iconName={'FiRefreshCw'}
+                            iconColor={'#fff'}
+                            fontSize={'3em'}
+                            iconSize={'1em'}
+                            containerClassName={'react-captcha'}
+                            iconWrapperClassName={'react-captcha-icon-wrapper'}
+                            canvasClassName={'react-captcha-canvas'}
+                            iconClassName={'react-captcha-icon'}
+                            charactersInclude={
+                              '0123456789abcdefghijklmnopqrstuvwxzABCDEFGHIJKLMNOPQRSTUVWXYZ'
+                            }
+                          />
+                        </Col>
+                      </Row>
+                      <Row>
+                        <Col xs={12}>
+                          <Form.Control
+                            id='Captcha'
+                            className='form-control'
+                            placeholder='Teclee los caracteres de la imagen'
+                            value={Captcha}
+                            onChange={(e) => {
+                              setCaptcha(e.target.value)
+                            }}
+                          />
+                        </Col>
+                      </Row>
+                      <Row>
+                        <Col xs={12}>&nbsp;</Col>
+                      </Row>
+                    </Form>
+                  </Card.Text>
+                  <div className='d-grid gap-1'></div>
+                  <div className='d-grid gap-1'>
+                    <Button
+                      variant='customColor'
+                      size='lg'
+                      onClick={() => {
+                        validateCaptcha()
+                      }}
+                    >
+                      Continuar
+                    </Button>
+                  </div>
+                </Card.Body>
+              </Card>
+            </div>
+        </Col>
+        <Col xs={5}>&nbsp;</Col>
+      </Row>
+      <MsgInformativo
+        show={show}
+        msg={msg}
+        header={header}
+        msgColor={msgColor}
+        time={2000}
+        closeToast={function (arg: boolean): void {
+          setShow(false)
+        }}
+      />
+    </div>
+  )
+}

src/Components/Login/PIN.tsx

@@ -0,0 +1,128 @@
+import * as React from 'react'
+import { Button, Card, Col, Form, Row } from 'react-bootstrap'
+import logo from '../../images/GEMCO.png'
+import { MsgInformativo } from '../Utils/Toast/msgInformativo'
+import AuthDS from '../../Services/Auth/Auth.Service'
+import { useState } from 'react'
+import { DTOPINUsuario } from '../../DTO/DTOPINUsuario'
+import { useNavigate } from 'react-router-dom'
+
+export interface IPINProps {}
+
+export default function PIN(props: IPINProps) {
+  const navigate = useNavigate()
+  const [User, setUser] = useState(() => {
+    const stickyValue = window.localStorage.getItem('User')
+    return stickyValue !== null ? JSON.parse(stickyValue) : ''
+  })
+  const [Usuario, setUsuario] = useState(User)
+  const [PIN, setPIN] = useState('')
+  const [show, setShow] = useState(false)
+  const [msg, setMsg] = useState('')
+  const [header, setHeader] = useState('')
+  const [msgColor, setMsgColor] = useState('primary')
+
+  const validatePIN = () => {
+    if (!PIN.length) {
+      setShow(true)
+      setMsg('El campo PIN no puede estar vacio')
+      setHeader('Error')
+      return false
+    }
+    const data: DTOPINUsuario = {
+      pin: parseInt(PIN),
+      usuario: Usuario
+    }
+    console.log(JSON.stringify(data))
+    AuthDS.validatePIN(data)
+      .then((response: any) => {
+        localStorage.removeItem('User')
+        localStorage.setItem('PIN', PIN)
+        navigate('/Reset')
+      })
+      .catch((e: any) => {
+        setShow(true)
+        setMsg('PIN invalido!')
+        setHeader('Error')
+        return false
+      })
+  }
+
+  return (
+    <div>
+      <Row style={{ paddingTop: '6rem' }}>
+        <Col xs={12}></Col>
+      </Row>
+      <Row>
+        <Col xs={5}>&nbsp;</Col>
+        <Col xs={2}>
+          <div className="shadow-lg bg-white rounded">
+            <Card style={{ width: '135%' }} className="Color1">
+              <Card.Header>
+                <Row>
+                  <Col xs={4}></Col>
+                  <Col xs={4}>
+                    <img
+                      src={logo}
+                      alt="GEMCO"
+                      style={{ width: '80%', textAlign: 'center' }}
+                    />
+                  </Col>
+                  <Col xs={4}></Col>
+                </Row>
+              </Card.Header>
+              <Card.Body>
+                <Card.Text>
+                  <Row>
+                    <Col xs={12}>&nbsp;</Col>
+                  </Row>
+                  <Form id="login-form" className="form">
+                    <Row>
+                      <Col xs={12}>
+                        <Form.Control
+                          id="PIN"
+                          className="form-control"
+                          placeholder="PIN"
+                          value={PIN}
+                          onChange={(e) => {
+                            setPIN(e.target.value)
+                          }}
+                        />
+                      </Col>
+                    </Row>
+                    <Row>
+                      <Col xs={12}>&nbsp;</Col>
+                    </Row>
+                  </Form>
+                </Card.Text>
+                <div className="d-grid gap-1"></div>
+                <div className="d-grid gap-1">
+                  <Button
+                    variant="customColor"
+                    size="lg"
+                    onClick={() => {
+                      validatePIN()
+                    }}
+                  >
+                    Continuar
+                  </Button>
+                </div>
+              </Card.Body>
+            </Card>
+          </div>
+        </Col>
+        <Col xs={5}>&nbsp;</Col>
+      </Row>
+      <MsgInformativo
+        show={show}
+        msg={msg}
+        header={header}
+        msgColor={msgColor}
+        time={2000}
+        closeToast={function (arg: boolean): void {
+          setShow(false)
+        }}
+      />
+    </div>
+  )
+}

src/Components/Login/ResetCredentials.tsx

@@ -0,0 +1,200 @@
+import React, { FC, useState } from 'react'
+import {
+  Button,
+  Card,
+  Col,
+  Form,
+  Row,
+  Toast,
+  ToastContainer,
+} from 'react-bootstrap'
+import { MsgInformativo } from '../Utils/Toast/msgInformativo'
+import DTOUsuario from '../../DTO/DTOUsuario'
+import logo from '../../images/GEMCO.png'
+import AuthDS from '../../Services/Auth/Auth.Service'
+import { DTOResetPassword } from '../../DTO/DTOResetPassword'
+
+interface IProps {}
+
+export default function ResetCredentials(props: IProps) {
+  const [User, setUser] = useState(() => {
+    const stickyValue = window.localStorage.getItem('User')
+    return stickyValue !== null ? JSON.parse(stickyValue) : ''
+  })
+  const [PIN, setPIN] = useState(() => {
+    const stickyValue = window.localStorage.getItem('PIN')
+    return stickyValue !== null ? JSON.parse(stickyValue) : ''
+  })
+  const [header, setHeader] = useState('Error!')
+  const [msgColor, setMsgColor] = useState('primary')
+  const [showMsg, setShowMsg] = useState(false)
+  const [msg, setMsg] = useState('')
+  const [Usuario, setUsuario] = useState(User)
+  const [Contrasena, setContrasena] = useState('')
+  const [ConfirmaContrasena, setConfirmaContrasena] = useState('')
+  const [show, setShow] = useState(false)
+
+  const validaFormulario = () => {
+    if (Contrasena.length===0 || ConfirmaContrasena.length===0) {
+      setShow(true)
+      setMsg('La contraseña no puede estar vacia!')
+      setHeader('Error')
+      return
+    }
+    if (Contrasena !== ConfirmaContrasena) {
+      setShow(true)
+      setMsg('Contraseña no coincide con la confirmacion!')
+      setHeader('Error')
+      return
+    }
+    const data: DTOResetPassword = {
+      pin: PIN,
+      contrasena: Contrasena,
+    }
+    AuthDS.resetPassword(data)
+      .then((response) => {
+        if (response.status == 200) {
+          setShow(true)
+          setMsg('La contraseña se cambio exitosamente!')
+          setHeader('Confirmacion')
+          return false
+        }
+      })
+      .catch((e: Error) => {
+        setShow(true)
+        setMsg('Ocurrio un error')
+        setHeader('Error')
+        return false
+      })
+  }
+
+  const closeToast = (show: boolean): void => {
+    setShowMsg(false)
+  }
+
+  return (
+    <div>
+      <div>
+        <Row style={{ paddingTop: '6rem' }}>
+          <Col xs={12}></Col>
+        </Row>
+        <Row>
+          <Col xs={5}>&nbsp;</Col>
+          <Col xs={2}>
+            <div className='shadow-lg bg-white rounded'>
+              <Card style={{ width: '100%' }} className='Color1'>
+                <Card.Header>
+                <Row>
+                  <Col xs={4}></Col>
+                  <Col xs={4}>
+                    <img
+                      src={logo}
+                      alt="GEMCO"
+                      style={{ width: '80%', textAlign: 'center' }}
+                    />
+                  </Col>
+                  <Col xs={4}></Col>
+                </Row>
+                </Card.Header>
+                <Card.Body>
+                  <Card.Text>
+                    <Row
+                      style={{
+                        backgroundColor: '#002f87',
+                        color: '#ffffff',
+                        fontSize: '17px',
+                        textAlign: 'center'
+                      }}
+                    >
+                      <Col xs={12}>Proporcione su nueva contraseña</Col>
+                    </Row>
+                    <Row>
+                      <Col xs={12}>&nbsp;</Col>
+                    </Row>
+                    <Form id='login-form' className='form'>
+                      <Row style={{ height: '0px' }}>
+                        <Col>
+                          <Form.Control
+                            style={{ visibility: 'hidden' }}
+                            id='PIN'
+                            className='form-control'
+                            placeholder='PIN'
+                            value={PIN}
+                          />
+                        </Col>
+                      </Row>
+                      <Row>
+                        <Col xs={12}>
+                          <Form.Control
+                            id='Contrasena'
+                            className='form-control'
+                            placeholder='Contraseña'
+                            type='password'
+                            value={Contrasena}
+                            onChange={(e) => {
+                              setContrasena(e.target.value)
+                            }}
+                          />
+                        </Col>
+                      </Row>
+                      <Row>
+                        <Col xs={12}>&nbsp;</Col>
+                      </Row>
+                      <Row>
+                        <Col xs={12}>
+                          <Form.Control
+                            id='Contrasena'
+                            className='form-control'
+                            placeholder='Confirme contraseña'
+                            type='password'
+                            value={ConfirmaContrasena}
+                            onChange={(e) => {
+                              setConfirmaContrasena(e.target.value)
+                            }}
+                          />
+                        </Col>
+                      </Row>
+                      <Row>
+                        <Col xs={12}>&nbsp;</Col>
+                      </Row>
+                    </Form>
+                  </Card.Text>
+                  <div className='d-grid gap-2'>
+                    <Button
+                      variant='customColor'
+                      size='lg'
+                      onClick={() => {
+                        validaFormulario()
+                      }}
+                    >
+                      reset
+                    </Button>
+                  </div>
+                </Card.Body>
+              </Card>
+            </div>
+          </Col>
+          <Col xs={5}>&nbsp;</Col>
+        </Row>
+        <MsgInformativo
+          show={show}
+          msg={msg}
+          time={2000}
+          header={header}
+          msgColor={msgColor}
+          closeToast={function (arg: boolean): void {
+            setShow(false)
+          }}
+        />
+      </div>
+     {/*  <MsgInformativo
+        show={showMsg}
+        time={2000}
+        msg={msg}
+        header={header}
+        msgColor={msgColor}
+        closeToast={closeToast}
+      /> */}
+    </div>
+  )
+}

src/Components/Login/login.tsx

@@ -2,7 +2,6 @@ import * as React from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Formik, Form, Field } from 'formik'
 import { useSelector, useDispatch } from 'react-redux'
-//import { RootState } from '../../store/store'
 import { logued } from '../../store/features/userStatusSlice/userStatusSlice'
 import ILogin from '../../Interfaces/Ilogin'
 import authDataService from '../../Services/Auth/Auth.Service'
@@ -14,7 +13,8 @@ import { AxiosError } from 'axios'
 import { MsgInformativo } from '../Utils/Toast/msgInformativo'
 import logo from '../../images/GEMCO_mini.png'
 import Dashboard from '../Dashboard/Dashboard'
-import { Alert, Card } from 'react-bootstrap'
+import { Nav } from 'react-bootstrap'
+import Info from '../../../package.json'
 
 export const Login: React.FC<{}> = () => {
   const dispatch = useDispatch()
@@ -30,12 +30,6 @@ export const Login: React.FC<{}> = () => {
     <div>
       {!userLogued ? (
         <div>
-{/*           <div> <Alert variant="warning">
-        <Alert.Heading>Aviso importante!</Alert.Heading>
-        <p>
-          Proximanate esteremos reunicando el contenido  de este servidor de aplicaciones, al nuevo dominio  de aplicaciones: https://www.gemcousa.mx  
-        </p>
-      </Alert></div> */}
         <div id='login'>
           <div className='container'>
             <div
@@ -104,12 +98,12 @@ export const Login: React.FC<{}> = () => {
                         <img
                           src={logo}
                           alt='GEMCO'
-                          width='150px'
-                          height='150px'
+                          width='100px'
+                          height='100px'
                         ></img>
                       </div>
                       <br />
-                      <h3 className='text-center text-info'>Bienvenido</h3>
+                      {/* <h3 className='text-center text-info'>Bienvenido</h3> */}
                       <div className='form-group'>
                         <label htmlFor='username'>Usuario</label>
                         <Field
@@ -129,6 +123,7 @@ export const Login: React.FC<{}> = () => {
                           type='password'
                         />
                       </div>
+                      <span style={{textAlign:'center'}}><Nav.Link style={{color: '#002f87'}}  href='/#/forgotPassword'>¿Olvido contraseña?</Nav.Link></span>
                       <br />
                       <div className='text-center'>
                         <button
@@ -138,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,12 +117,27 @@ 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',
       cell: (row: IRegister) => (
         <div
-          style={{ width: '100%', textAlign:'center' }}
+          style={{ width: '100%', textAlign: 'center' }}
           onClick={() => {
             props.GetUserInfo(row)
           }}
@@ -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 {}
 
@@ -52,7 +55,7 @@ const SignupSchema = Yup.object().shape({
   correo: Yup.string().email('Correo invalido').required('Requirido')
 })
 
-export default function Register(props:IProps) {
+export default function Register(props: IProps) {
   const [UserId, setUserId] = useState(() => {
     const stickyValue = window.localStorage.getItem('UserId')
     return stickyValue !== null ? JSON.parse(stickyValue) : 0
@@ -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,13 +377,13 @@ export default function Register(props:IProps) {
   }
 
   const CloseModalPerfiles = (show: boolean): void => {
-    //setmodalAdmonPerfiles(false);
+    setmodalAdmonPerfiles(false)
   }
 
   function loadAllUserInfo(id: number) {}
 
   const GetUserInfo = (data: IRegister): void => {
-    console.log('data from get usuario '+JSON.stringify(data))
+    console.log('data from get usuario ' + JSON.stringify(data))
     setIdUsuario(data.id)
     setUsuario(data.usuario)
     setNombre(data.nombre)
@@ -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 
-    setShowConfirmation(true)
+    } else 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
-                                    id="fechaModifico"
-                                    name="fechaModifico"
-                                    readOnly="readOnly"
-                                    className="form-control"
-                                    placeholder="Fecha modifico"
-                                    defaultValue={currentDate()}
-                                  />
+                                  <FormCtrl.Control
+                                    as="select"
+                                    value={Dept}
+                                    onChange={
+                                      (e) => setDept(parseInt(e.target.value))
+                                      // setDepartamento(e.target.value)
+                                    }
+                                    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/RptCorresponsalesTraficos.tsx

@@ -1,525 +0,0 @@
-import { RowClickedEvent } from 'ag-grid-community'
-import { AgGridReact } from 'ag-grid-react'
-import React, { FC, useEffect, useState } from 'react'
-import { Button, Card, Form, Modal } from 'react-bootstrap'
-import ICorresponsalTrafico from '../../Interfaces/Corresponsales/ICorresponsalTrafico'
-import ClientesDataService from '../../Services/Catalogos/Clientes.Services'
-import { MsgInformativo } from '../Utils/Toast/msgInformativo'
-import IClientes from '../../Interfaces/Catalogos/IClientes'
-import { BsPlusLg, BsFileEarmarkExcel, BsSearch, BsFillXCircleFill, BsCheckCircleFill } from 'react-icons/bs'
-import * as XLSX from 'xlsx'
-import TraficoCorresponsales from '../Corresponsales/TraficoCorresponsales'
-import ICatCorresponsales from '../../Interfaces/Catalogos/ICatCorresponsales'
-import CorresponsalesDataService from '../../Services/Catalogos/Corresponsales.Services'
-import reportesServices from '../../Services/Reportes/reportes.services'
-import moment from 'moment'
-import DTORptCorresponsalesTraficos from '../../DTO/Corresponsales/DTORptCorresponsalesTraficos'
-import { InitCorresponsalesFacturas } from '../../store/features/Corresponsales/CorresponsalesFacturasSlice'
-import { InitCorresponsalesFacturasTerceros } from '../../store/features/Corresponsales/CorresponsalesFacturasTercerosSlice'
-import { InitCorresponsalesContenedores } from '../../store/features/Corresponsales/CorresponsalesContenedoresSlice'
-import { useDispatch } from 'react-redux'
-import { IconContext } from 'react-icons'
-import { ProgressBar } from './customCells/progressBar'
-import { useParams } from 'react-router-dom'
-import { FaHandSparkles } from 'react-icons/fa'
-
-interface IProps {}
-
-export default function RptCorresponsalesTraficos (props: IProps) {
-  const { proc, modo } = useParams()
-  const [UserId, setUserId] = useState(() => {
-    const stickyValue = window.localStorage.getItem('UserId')
-    return stickyValue !== null ? JSON.parse(stickyValue) : 0
-  })
-  const [Depto, setDepto] = useState(() => {
-    const stickyValue = window.localStorage.getItem('Departamento')
-    return stickyValue !== null ? JSON.parse(stickyValue) : ''
-  })
-  const queryParams = new URLSearchParams(window.location.search)
-  const status = queryParams.get('status')
-  const [StatusAnticipos, setStatusAnticipos] = useState(status ? parseInt(status) : 0)
-  const dispatch = useDispatch()
-  const [IDTrafico, setIDTrafico] = useState(0)
-  const [Data, setData] = useState<ICorresponsalTrafico[]>([])
-  const [filteredData, setFilteredData] = useState<ICorresponsalTrafico[]>([])
-  const [show, setShowMsg] = useState(false)
-  const [ShowModal, setShowModal] = useState(false)
-  const [header, setHeader] = useState('')
-  const [msg, setMsg] = useState('')
-  const [Inicio, setInicio] = useState(currentDate(-365))
-  const [Fin, setFin] = useState(currentDate(0))
-  const [TipoOperacion, setTipoOperacion] = useState(0)
-  const [Cliente, setCliente] = useState(0)
-  const [Corresponsal, setCorresponsal] = useState(0)
-  const [Clientes, setClientes] = useState<Array<IClientes>>()
-  const [filtro, setFiltro] = useState('')
-  const gridRef = React.useRef<any>(null)
-  const [DataCorresponsales, setDataCorresponsales] = useState<ICatCorresponsales[]>([])
-  const [columnDefs] = useState([
-    { field: 'id', headerName: 'id', width: 70, sortable: true, filter: true },
-    {
-      field: 'proceso',
-      headerName: 'Status',
-      width: 90,
-      center: true,
-      sortable: true,
-      filter: true,
-      cellRenderer: ProgressBar,
-    },
-    {
-      field: 'folio',
-      headerName: 'Trafico',
-      width: 140,
-      sortable: true,
-      filter: true,
-      cellRenderer: (params: any) => {
-        return params.data.folio
-      },
-    },
-    {
-      field: 'fechaRegistro',
-      sortable: true,
-      filter: true,
-      cellRenderer: (params: any) => {
-        return params.value.substring(0, 10)
-      },
-    },
-    { field: 'sUsuario', headerName: 'Usuario', sortable: true, filter: true },
-    {
-      field: 'sCliente',
-      headerName: 'Cliente',
-      sortable: true,
-      filter: true,
-    },
-    { field: 'sTipoOperacion', headerName: 'Tipo operacion', sortable: true, filter: true },
-    { field: 'sOpEntrada', headerName: 'Op Entrada', sortable: true, filter: true },
-    { field: 'sOpSalida', headerName: 'Op Salida', sortable: true, filter: true },
-    { field: 'sCorresponsal', headerName: 'Corresponsal', sortable: true, filter: true },
-    { field: 'patente', sortable: true, filter: true },
-    { field: 'aduana', sortable: true, filter: true },
-    { field: 'pedimento', sortable: true, filter: true },
-    {
-      field: 'fechaPago',
-      sortable: true,
-      filter: true,
-      cellRenderer: (params: any) => {
-        if (params.value) return params.value.substring(0, 10)
-        else return ''
-      },
-    },
-    {
-      field: 'fechaDesaduanamiento',
-      sortable: true,
-      filter: true,
-      cellRenderer: (params: any) => {
-        if (params.value) return params.value.substring(0, 10)
-        else return ''
-      },
-    },
-    {
-      field: 'zipgemco',
-      headerName: 'Zip GEMCO',
-      sortable: true,
-      filter: true,
-      cellRenderer: (params: any) => {
-        if (params.value === 'No')
-          return (
-            <div style={{ paddingLeft: '20px' }}>
-              <IconContext.Provider value={{ color: 'red', size: '25px' }}>
-                <BsFillXCircleFill />
-              </IconContext.Provider>
-            </div>
-          )
-        else
-          return (
-            <div style={{ paddingLeft: '20px' }}>
-              <IconContext.Provider value={{ color: 'green', size: '25px' }}>
-                <BsCheckCircleFill />
-              </IconContext.Provider>
-            </div>
-          )
-      },
-    },
-    {
-      field: 'zipCorresponsal',
-      headerName: 'Zip Corresponsal',
-      sortable: true,
-      filter: true,
-      cellRenderer: (params: any) => {
-        if (params.value === 'No')
-          return (
-            <div style={{ paddingLeft: '35px' }}>
-              <IconContext.Provider value={{ color: 'red', size: '25px' }}>
-                <BsFillXCircleFill />
-              </IconContext.Provider>
-            </div>
-          )
-        else
-          return (
-            <div style={{ paddingLeft: '35px' }}>
-              <IconContext.Provider value={{ color: 'green', size: '25px' }}>
-                <BsCheckCircleFill />
-              </IconContext.Provider>
-            </div>
-          )
-      },
-    },
-    { field: 'ultimaActualizacion', sortable: true, filter: true },
-  ])
-  const [msgColor, setMsgColor] = useState('primary')
-
-  function ConvertHexToString(str: string) {
-    return unescape(str.replace(/\\/g, '%'))
-  }
-
-  function currentDate(days: number): string {
-    var today = new Date()
-    today.setDate(today.getDate() + days)
-    var dd = String(today.getDate()).padStart(2, '0')
-    var mm = String(today.getMonth() + 1).padStart(2, '0')
-    var yyyy = today.getFullYear()
-    return yyyy + '-' + mm + '-' + dd
-  }
-
-/*   useEffect(() => {
-    if (proc && modo) {
-    if (status) {
-      setStatusAnticipos(parseInt(status))
-    } else setStatusAnticipos(0)
-    const data: DTORptCorresponsalesTraficos = {
-      Inicio: '',
-      Fin: '',
-      TipoOperacion: 0,
-      NoCliente: 0,
-      IdCorresponsal: Corresponsal,
-      Proceso: proc ? parseInt(proc.replace('proc=','')) : 0,
-      Modo: modo ? parseInt(modo.replace('modo=','')) : 0,
-    }
-    reportesServices
-      .getRptCorresponsalesTraficos(data)
-      .then((response) => {
-        setData(response.data)
-        setFilteredData(response.data)
-      })
-      .catch((e: Error) => {
-        setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
-        setShowMsg(true)
-        return
-      })
-    }
-  }, [proc, modo]) */
-
-  useEffect(() => {
-    ClientesDataService.getAllClientes(UserId)
-      .then((response) => {
-        setClientes(response.data)
-      })
-      .catch((e: Error) => {
-        setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
-        setShowMsg(true)
-        return
-      })
-
-    CorresponsalesDataService.getAll()
-      .then((response) => {
-        setDataCorresponsales(response.data)
-      })
-      .catch((e: Error) => {
-        setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
-        setShowMsg(true)
-        return
-      })
-      generaReporte()
-  }, [])
-
-  function getParams(e: RowClickedEvent) {
-    AbreTrafico(e.data.id)
-  }
-
-  function AbreTrafico(id: number) {
-    dispatch(InitCorresponsalesFacturas(IDTrafico))
-    dispatch(InitCorresponsalesFacturasTerceros(IDTrafico))
-    dispatch(InitCorresponsalesContenedores(IDTrafico))
-    setIDTrafico(id)
-    setShowModal(true)
-  }
-
-  const generaReporte = () => {
-    if (proc && modo) {
-    const data: DTORptCorresponsalesTraficos = {
-      Inicio: moment(Inicio).format('YYYY-MM-DD'),
-      Fin: moment(Fin).format('YYYY-MM-DD'),
-      TipoOperacion: TipoOperacion,
-      NoCliente: Cliente,
-      IdCorresponsal: Corresponsal,
-      Proceso: proc ? parseInt(proc.replace('proc=','')) : 0,
-      Modo: modo ? parseInt(modo.replace('modo=','')) : 0,
-    }
-    reportesServices
-      .getRptCorresponsalesTraficos(data)
-      .then((response) => {
-        setData(response.data)
-        setFilteredData(response.data)
-        console.log(response.data)
-      })
-      .catch((e: Error) => {
-        setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
-        setShowMsg(true)
-        return
-      })
-    }
-  }
-
-  const filtraReporte = (e: any) => {
-    setFiltro(e.target.value)
-    gridRef.current.api.setQuickFilter(e.target.value)
-  }
-
-  const downloadExcel = () => {
-    exportExcel(Data, 'Traficos de corresponsales')
-  }
-
-  function exportExcel(jsonData: any[], fileName: string): void {
-    let Heading = [
-      [
-        { title: 'Aduana Seccion Despacho', style: { font: { sz: '18', bold: true } } },
-        'Patente',
-        'Referencia',
-        'Pedimento',
-        'Fecha Pago',
-        'Fecha Entrada Presentacion',
-        'Clave Docto',
-        'Es rectificacion',
-        'Tipo Cambio',
-        'Valor Dls',
-        'Valor Aduana',
-        'Numero Factura',
-        'Fecha Factura',
-        'Proveedor Factura',
-        'Incrementables Fact',
-        'Fraccion',
-        'Subdiv NICO',
-        'Descripcion',
-        'Pais Origen',
-        'Pais Vendedor',
-        'Tasa DTA',
-        'Tasa IGI',
-        'Numero Parte',
-        'Cantidad Comercial',
-        'TL Pais',
-        'Tipo Tasa',
-        'Unidad Comercial',
-        'Valor Factura Item',
-        'Valor Comercial Ped',
-        'Valor Factura Item MN',
-      ],
-    ]
-    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()
-    }
-  }
-
-  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>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='0'>-SELECCIONE-</option>
-                <option value='1'>Importacion</option>
-                <option value='2'>Exportacion</option>
-              </Form.Control>
-            </div>
-            <div className='col-md-1 right-label'>
-              <Form.Label>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 (
-                        <option value={c.sClave} key={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'>
-              {(Depto === 'Corresponsalias' || Depto ==='Sistemas') ? (
-                <Button
-                  size='sm'
-                  variant='primary'
-                  onClick={() => {
-                    AbreTrafico(0)
-                  }}
-                >
-                  <BsPlusLg />
-                  &nbsp; Nuevo
-                </Button>
-              ) : (
-                ''
-              )}
-            </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 className='col'>Corresponsal</div>
-            <div className='col-4'>
-              <Form.Control
-                as='select'
-                onChange={(e) => {
-                  setCorresponsal(parseInt(e.target.value))
-                }}
-                className='form-select form-select-sm'
-              >
-                <option value='0'>-SELECCIONE-</option>
-                {DataCorresponsales
-                  ? DataCorresponsales.map((c) => {
-                      return (
-                        <option value={c.id} key={c.id}>
-                          {c.nombre}
-                        </option>
-                      )
-                    })
-                  : null}
-              </Form.Control>
-            </div>
-            <div className='col'></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}
-          onRowClicked={(e) => getParams(e)}
-        ></AgGridReact>
-      </div>
-      <MsgInformativo
-        show={show}
-        msg={msg}
-        header={header}
-        msgColor={msgColor}
-        closeToast={() => {
-          setShowMsg(false)
-        }}
-      />
-      <Modal
-        show={ShowModal}
-        /*   onHide={() => setShowModal(false)} */
-        size='sm'
-        dialogClassName='modal-90w modal-innerDiv'
-        disableEscapeKeyDown={true}
-      >
-        <Modal.Body style={{
-      maxHeight: 'calc(100vh)',
-      overflowY: 'auto'
-     }}>
-          <div>
-            <TraficoCorresponsales
-              IDTrafico={IDTrafico}
-              onClose={function (val: boolean): void {
-                setShowModal(false)
-              }}
-            />
-          </div>
-        </Modal.Body>
-      </Modal>
-    </div>
-  )
-}

src/Components/Reportes/RptCorresponsalesTraficosHst.tsx

@@ -1,519 +0,0 @@
-import { RowClickedEvent } from 'ag-grid-community'
-import { AgGridReact } from 'ag-grid-react'
-import React, { FC, useEffect, useState } from 'react'
-import { Button, Card, Form, Modal } from 'react-bootstrap'
-import ICorresponsalTrafico from '../../Interfaces/Corresponsales/ICorresponsalTrafico'
-import ClientesDataService from '../../Services/Catalogos/Clientes.Services'
-import { MsgInformativo } from '../Utils/Toast/msgInformativo'
-import IClientes from '../../Interfaces/Catalogos/IClientes'
-import { BsPlusLg, BsFileEarmarkExcel, BsSearch, BsFillXCircleFill, BsCheckCircleFill } from 'react-icons/bs'
-import * as XLSX from 'xlsx'
-import TraficoCorresponsales from '../Corresponsales/TraficoCorresponsales'
-import ICatCorresponsales from '../../Interfaces/Catalogos/ICatCorresponsales'
-import CorresponsalesDataService from '../../Services/Catalogos/Corresponsales.Services'
-import reportesServices from '../../Services/Reportes/reportes.services'
-import moment from 'moment'
-import DTORptCorresponsalesTraficos from '../../DTO/Corresponsales/DTORptCorresponsalesTraficos'
-import { InitCorresponsalesFacturas } from '../../store/features/Corresponsales/CorresponsalesFacturasSlice'
-import { InitCorresponsalesFacturasTerceros } from '../../store/features/Corresponsales/CorresponsalesFacturasTercerosSlice'
-import { InitCorresponsalesContenedores } from '../../store/features/Corresponsales/CorresponsalesContenedoresSlice'
-import { useDispatch } from 'react-redux'
-import { IconContext } from 'react-icons'
-import { ProgressBar } from './customCells/progressBar'
-import { ProcessStatus } from './customCells/ProcessStatus'
-
-interface IProps {}
-
-export default function RptCorresponsalesTraficosHst (props: IProps) {
-  const [UserId, setUserId] = useState(() => {
-    const stickyValue = window.localStorage.getItem('UserId')
-    return stickyValue !== null ? JSON.parse(stickyValue) : 0
-  })
-  const [Depto, setDepto] = useState(() => {
-    const stickyValue = window.localStorage.getItem('Departamento')
-    return stickyValue !== null ? JSON.parse(stickyValue) : ''
-  })
-  const queryParams = new URLSearchParams(window.location.search)
-  const proc = queryParams.get('proc')
-  const status = queryParams.get('status')
-  const Modo = queryParams.get('Modo')
-  //const [Mode, setMode] = useState(parseInt(window.location.search.replace('?proc=', '0')))
-  const [StatusAnticipos, setStatusAnticipos] = useState(status ? parseInt(status) : 0)
-  const dispatch = useDispatch()
-  const [IDTrafico, setIDTrafico] = useState(0)
-  const [Data, setData] = useState<ICorresponsalTrafico[]>([])
-  const [filteredData, setFilteredData] = useState<ICorresponsalTrafico[]>([])
-  const [show, setShowMsg] = useState(false)
-  const [ShowModal, setShowModal] = useState(false)
-  const [header, setHeader] = useState('')
-  const [msg, setMsg] = useState('')
-  const [Inicio, setInicio] = useState(currentDate(-365))
-  const [Fin, setFin] = useState(currentDate(0))
-  const [TipoOperacion, setTipoOperacion] = useState(0)
-  const [Cliente, setCliente] = useState(0)
-  const [Corresponsal, setCorresponsal] = useState(0)
-  const [Clientes, setClientes] = useState<Array<IClientes>>()
-  const [filtro, setFiltro] = useState('')
-  const gridRef = React.useRef<any>(null)
-  const [DataCorresponsales, setDataCorresponsales] = useState<ICatCorresponsales[]>([])
-  const [columnDefs] = useState([
-    { field: 'id', headerName: 'id', width: 70, sortable: true, filter: true },
-    {
-      field: 'proceso',
-      headerName: 'Status',
-      width: 90,
-      center: true,
-      sortable: true,
-      filter: true,
-      cellRenderer: ProcessStatus,
-    },
-    {
-      field: 'folio',
-      headerName: 'Folio',
-      width: 120,
-      sortable: true,
-      filter: true,
-      cellRenderer: (params: any) => {
-        return params.data.folio
-      },
-    },
-    {
-      field: 'fechaRegistro',
-      sortable: true,
-      filter: true,
-      cellRenderer: (params: any) => {
-        return params.value.substring(0, 10)
-      },
-    },
-    { field: 'sUsuario', headerName: 'Usuario', sortable: true, filter: true },
-    {
-      field: 'sCliente',
-      headerName: 'Cliente',
-      sortable: true,
-      filter: true,
-    },
-    { field: 'sTipoOperacion', headerName: 'Tipo operacion', sortable: true, filter: true },
-    { field: 'sOpEntrada', headerName: 'Op Entrada', sortable: true, filter: true },
-    { field: 'sOpSalida', headerName: 'Op Salida', sortable: true, filter: true },
-    { field: 'sCorresponsal', headerName: 'Corresponsal', sortable: true, filter: true },
-    { field: 'patente', sortable: true, filter: true },
-    { field: 'aduana', sortable: true, filter: true },
-    { field: 'pedimento', sortable: true, filter: true },
-    {
-      field: 'fechaPago',
-      sortable: true,
-      filter: true,
-      cellRenderer: (params: any) => {
-        if (params.value) return params.value.substring(0, 10)
-        else return ''
-      },
-    },
-    {
-      field: 'fechaDesaduanamiento',
-      sortable: true,
-      filter: true,
-      cellRenderer: (params: any) => {
-        if (params.value) return params.value.substring(0, 10)
-        else return ''
-      },
-    },
-    {
-      field: 'zipgemco',
-      headerName: 'Zip GEMCO',
-      sortable: true,
-      filter: true,
-      cellRenderer: (params: any) => {
-        if (params.value === 'No')
-          return (
-            <div style={{ paddingLeft: '20px' }}>
-              <IconContext.Provider value={{ color: 'red', size: '25px' }}>
-                <BsFillXCircleFill />
-              </IconContext.Provider>
-            </div>
-          )
-        else
-          return (
-            <div style={{ paddingLeft: '20px' }}>
-              <IconContext.Provider value={{ color: 'green', size: '25px' }}>
-                <BsCheckCircleFill />
-              </IconContext.Provider>
-            </div>
-          )
-      },
-    },
-    {
-      field: 'zipCorresponsal',
-      headerName: 'Zip Corresponsal',
-      sortable: true,
-      filter: true,
-      cellRenderer: (params: any) => {
-        if (params.value === 'No')
-          return (
-            <div style={{ paddingLeft: '35px' }}>
-              <IconContext.Provider value={{ color: 'red', size: '25px' }}>
-                <BsFillXCircleFill />
-              </IconContext.Provider>
-            </div>
-          )
-        else
-          return (
-            <div style={{ paddingLeft: '35px' }}>
-              <IconContext.Provider value={{ color: 'green', size: '25px' }}>
-                <BsCheckCircleFill />
-              </IconContext.Provider>
-            </div>
-          )
-      },
-    },
-    { field: 'ultimaActualizacion', sortable: true, filter: true },
-  ])
-  const [msgColor, setMsgColor] = useState('primary')
-
-  function ConvertHexToString(str: string) {
-    return unescape(str.replace(/\\/g, '%'))
-  }
-
-  function currentDate(days: number): string {
-    var today = new Date()
-    today.setDate(today.getDate() + days)
-    var dd = String(today.getDate()).padStart(2, '0')
-    var mm = String(today.getMonth() + 1).padStart(2, '0')
-    var yyyy = today.getFullYear()
-    return yyyy + '-' + mm + '-' + dd
-  }
-
-  useEffect(() => {
-    // if (proc) setMode(parseInt(proc))
-    if (status) {
-      setStatusAnticipos(parseInt(status))
-    } else setStatusAnticipos(0)
-    const data: DTORptCorresponsalesTraficos = {
-      Inicio: '',
-      Fin: '',
-      TipoOperacion: 0,
-      NoCliente: 0,
-      IdCorresponsal: Corresponsal,
-      Proceso: proc ? parseInt(proc) : 0,
-      Modo: Modo ? parseInt(Modo) : 0,
-    }
-    reportesServices
-      .getRptCorresponsalesTraficos(data)
-      .then((response) => {
-        setData(response.data)
-        setFilteredData(response.data)
-      })
-      .catch((e: Error) => {
-        setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
-        setShowMsg(true)
-        return
-      })
-  }, [proc, status])
-
-  useEffect(() => {
-    ClientesDataService.getAllClientes(UserId)
-      .then((response) => {
-        setClientes(response.data)
-      })
-      .catch((e: Error) => {
-        setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
-        setShowMsg(true)
-        return
-      })
-
-    CorresponsalesDataService.getAll()
-      .then((response) => {
-        setDataCorresponsales(response.data)
-      })
-      .catch((e: Error) => {
-        setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
-        setShowMsg(true)
-        return
-      })
-  }, [])
-
-  function getParams(e: RowClickedEvent) {
-    AbreTrafico(e.data.id)
-  }
-
-  function AbreTrafico(id: number) {
-    dispatch(InitCorresponsalesFacturas(IDTrafico))
-    dispatch(InitCorresponsalesFacturasTerceros(IDTrafico))
-    dispatch(InitCorresponsalesContenedores(IDTrafico))
-    setIDTrafico(id)
-    setShowModal(true)
-  }
-
-  const generaReporte = () => {
-    const data: DTORptCorresponsalesTraficos = {
-      Inicio: moment(Inicio).format('YYYY-MM-DD'),
-      Fin: moment(Fin).format('YYYY-MM-DD'),
-      TipoOperacion: TipoOperacion,
-      NoCliente: Cliente,
-      IdCorresponsal: Corresponsal,
-      Proceso: proc ? parseInt(proc) : 0,
-      Modo: Modo ? parseInt(Modo) : 0,
-    }
-    reportesServices
-      .getRptCorresponsalesTraficos(data)
-      .then((response) => {
-        setData(response.data)
-        setFilteredData(response.data)
-        console.log(response.data)
-      })
-      .catch((e: Error) => {
-        setHeader('Error')
-        setMsg('Ocurrio un error: ' + e)
-        setShowMsg(true)
-        return
-      })
-  }
-
-  const filtraReporte = (e: any) => {
-    setFiltro(e.target.value)
-    gridRef.current.api.setQuickFilter(e.target.value)
-  }
-
-  const downloadExcel = () => {
-    exportExcel(Data, 'Traficos de corresponsales')
-  }
-
-  function exportExcel(jsonData: any[], fileName: string): void {
-    let Heading = [
-      [
-        { title: 'Aduana Seccion Despacho', style: { font: { sz: '18', bold: true } } },
-        'Patente',
-        'Referencia',
-        'Pedimento',
-        'Fecha Pago',
-        'Fecha Entrada Presentacion',
-        'Clave Docto',
-        'Es rectificacion',
-        'Tipo Cambio',
-        'Valor Dls',
-        'Valor Aduana',
-        'Numero Factura',
-        'Fecha Factura',
-        'Proveedor Factura',
-        'Incrementables Fact',
-        'Fraccion',
-        'Subdiv NICO',
-        'Descripcion',
-        'Pais Origen',
-        'Pais Vendedor',
-        'Tasa DTA',
-        'Tasa IGI',
-        'Numero Parte',
-        'Cantidad Comercial',
-        'TL Pais',
-        'Tipo Tasa',
-        'Unidad Comercial',
-        'Valor Factura Item',
-        'Valor Comercial Ped',
-        'Valor Factura Item MN',
-      ],
-    ]
-    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()
-    }
-  }
-
-  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>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='0'>-SELECCIONE-</option>
-                <option value='1'>Importacion</option>
-                <option value='2'>Exportacion</option>
-              </Form.Control>
-            </div>
-            <div className='col-md-1 right-label'>
-              <Form.Label>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 (
-                        <option value={c.sClave} key={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'>
-              {Depto === 'Corresponsalias' ? (
-                <Button
-                  size='sm'
-                  variant='primary'
-                  onClick={() => {
-                    AbreTrafico(0)
-                  }}
-                >
-                  <BsPlusLg />
-                  &nbsp; Nuevo
-                </Button>
-              ) : (
-                ''
-              )}
-            </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 className='col'>Corresponsal</div>
-            <div className='col-4'>
-              <Form.Control
-                as='select'
-                onChange={(e) => {
-                  setCorresponsal(parseInt(e.target.value))
-                }}
-                className='form-select form-select-sm'
-              >
-                <option value='0'>-SELECCIONE-</option>
-                {DataCorresponsales
-                  ? DataCorresponsales.map((c) => {
-                      return (
-                        <option value={c.id} key={c.id}>
-                          {c.nombre}
-                        </option>
-                      )
-                    })
-                  : null}
-              </Form.Control>
-            </div>
-            <div className='col'></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={'single'}
-          rowMultiSelectWithClick={true}
-          onRowClicked={(e) => getParams(e)}
-        ></AgGridReact>
-      </div>
-      <MsgInformativo
-        show={show}
-        msg={msg}
-        header={header}
-        msgColor={msgColor}
-        closeToast={() => {
-          setShowMsg(false)
-        }}
-      />
-      <Modal
-        show={ShowModal}
-        /*   onHide={() => setShowModal(false)} */
-        size='sm'
-        dialogClassName='modal-90w modal-innerDiv'
-        disableEscapeKeyDown={true}
-      >
-        <Modal.Body>
-          <div>
-            <TraficoCorresponsales
-              IDTrafico={IDTrafico}
-              onClose={function (val: boolean): void {
-                setShowModal(false)
-              }}
-            />
-          </div>
-        </Modal.Body>
-      </Modal>
-    </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/Components/resetCredentials/resetCredentials.tsx

@@ -1,99 +0,0 @@
-import React, { FC } from 'react'
-import { Button, Form, Toast, ToastContainer } from 'react-bootstrap'
-import { MsgInformativo } from '../Utils/Toast/msgInformativo'
-import DTOUsuario from '../../DTO/DTOUsuario'
-import usuariosServices from '../../Services/Catalogos/Usuarios.Services'
-
-interface IProps {}
-
-export default function ResetCredentials(props: IProps) {
-  const [header, setHerader] = React.useState('Error!')
-  const [msgColor, setMsgColor] = React.useState('Primary')
-  const [showMsg, setShowMsg] = React.useState(false)
-  const [msg, setMsg] = React.useState('')
-  const [usuario, setUsuario] = React.useState('')
-  const [contrasena, setContrasena] = React.useState('')
-  const [confirmaContrasena, setConfirmaContrasena] = React.useState('')
-
-  const validaFormulario = () => {
-    if (contrasena != confirmaContrasena) {
-      setMsg('Contrasena no coincide con su confirmacion!')
-      setShowMsg(true)
-      return
-    }
-
-    const data: DTOUsuario = {
-      Usuario: usuario,
-      Contrasena: contrasena,
-    }
-
-    usuariosServices
-      .resetPassword(data)
-      .then((response) => {
-        if (response.status == 200) alert('La contrasena se reseteo exisosamente')
-        if (response.status == 204) alert('Usuario no existe')
-
-        console.log(response.data)
-      })
-      .catch((e: Error) => {
-        console.log(e)
-        //alert(e);
-        let message = e.message
-        setMsg(message)
-        if (message.includes('400')) setMsg('Usuario no encontrado')
-        setShowMsg(true)
-      })
-  }
-
-  const closeToast = (show: boolean): void => {
-    setShowMsg(false)
-  }
-
-  return (
-    <div>
-      {' '}
-      <div id='login'>
-        <div className='container'>
-          <div id='login-row' className='row justify-content-center align-items-center'>
-            <div id='login-column' className='col-md-4'>
-              <div id='login-box' className='col-md-12'>
-                <Form id='login-form' className='form'>
-                  <h3 className='text-center text-info'>Olvido su contraseña</h3>
-                  <Form.Group className='mb-3 control-label' controlId='formBasicEmail'>
-                    <Form.Label>Usuario</Form.Label>
-                    <Form.Control placeholder='Usuario' onChange={(e) => setUsuario(e.currentTarget.value)} />
-                  </Form.Group>
-                  <Form.Group className='mb-3 control-label' controlId='formBasicPassword'>
-                    <Form.Label>Nueva contraseña</Form.Label>
-                    <Form.Control
-                      type='password'
-                      placeholder='Contraseña'
-                      onChange={(e) => setContrasena(e.currentTarget.value)}
-                    />
-                  </Form.Group>
-                  <Form.Group className='mb-3 control-label' controlId='formBasicPassword'>
-                    <Form.Label>Confirme su nueva contraseña</Form.Label>
-                    <Form.Control
-                      type='password'
-                      placeholder='Confirme su contraseña'
-                      onChange={(e) => setConfirmaContrasena(e.currentTarget.value)}
-                    />
-                  </Form.Group>
-                  <Button
-                    variant='primary'
-                    onClick={() => {
-                      validaFormulario()
-                    }}
-                  >
-                    Submit
-                  </Button>
-                </Form>
-              </div>
-            </div>
-          </div>
-        </div>
-        <MsgInformativo show={showMsg} msg={msg} header={header} msgColor={msgColor} closeToast={closeToast} />
-      </div>
-    </div>
-  )
-}

src/DTO/DTOPINUsuario.ts

@@ -0,0 +1,4 @@
+export interface DTOPINUsuario {
+    pin: number,
+    usuario: string
+}

src/DTO/DTOResetPassword.ts

@@ -0,0 +1,4 @@
+export interface DTOResetPassword {
+    pin: number,
+    contrasena: string
+}

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;
-  usuario: string;
-  nombre: string;
-  contrasena: string;
-  correo: string;
-  tipoUsuario: number;
-  activo: number;
-  fechaAlta: string;
-  usuarioAlta: number;
-  fechaModifico: string;
-  usuarioModifico: number;
-  fechaElimino: string;
-  usuarioElimino: number;
-  motivoElimino: string;
-  idModulo: number;
-  dept: number;
-  tmercancia: number;
-  fechaUltimaVisita: string;
-  visitas: number;
-  internos: number;
-  permisoEspecial: number;
-  estadoConfiguracion: number;
-  fechaValidacionConf: string;
-  realizoEncuesta: string;
-  encuestaActiva: number;
-  fechaLimiteEncuesta: string;
-  codigoAccesoM: string;
-  tokenAccesoM: string;
-  deviceToken: string;
-  idPerfil: number;
+  id: number
+  usuario: string
+  nombre: string
+  contrasena: string
+  correo: string
+  tipoUsuario: number
+  activo: number
+  fechaAlta: string
+  usuarioAlta: number
+  fechaModifico: string
+  usuarioModifico: number
+  fechaElimino: string
+  usuarioElimino: number
+  motivoElimino: string
+  idModulo: number
+  dept: number
+  tmercancia: number
+  fechaUltimaVisita: string
+  visitas: number
+  internos: number
+  permisoEspecial: number
+  estadoConfiguracion: number
+  fechaValidacionConf: string
+  realizoEncuesta: string
+  encuestaActiva: number
+  fechaLimiteEncuesta: string
+  codigoAccesoM: string
+  tokenAccesoM: string
+  deviceToken: string
+  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/Auth/Auth.Service.ts

@@ -2,6 +2,10 @@ import http from "../common/http-common";
 import ILogin from "../../Interfaces/Ilogin"
 import ItemMenuData  from "../../Interfaces/Catalogos/IItemMenu";
 import Token from '../../Interfaces/token'
+import IRespuesta from "../../Interfaces/IRespuesta";
+import { DTOPINUsuario } from "../../DTO/DTOPINUsuario";
+import DTOUsuario from "../../DTO/DTOUsuario";
+import { DTOResetPassword } from "../../DTO/DTOResetPassword";
 
 class authDataService {
   /**
@@ -13,27 +17,17 @@ class authDataService {
     type returnData = [ItemMenuData[], Token]    
   }
 
-  /*getAll() {
-    return http.get<Array<ILogin>>("/tutorials");
-  }
-  get(id: string) {
-    return http.get<ITutorialData>(`/tutorials/${id}`);
-  }*/
   create(data: ILogin) {
     return http.post<[ItemMenuData[], Token]>("/Auth", data);
   }
-  /*
-  update(data: ITutorialData, id: any) {
-    return http.put<any>(`/tutorials/${id}`, data);
+  forgotPassword(data: ILogin) {
+    return http.post<IRespuesta>("/Auth/forgotPassword", data);
   }
-  delete(id: any) {
-    return http.delete<any>(`/tutorials/${id}`);
+  validatePIN(data: DTOPINUsuario) {
+    return http.post<IRespuesta>("/Auth/validatePIN", data);
   }
-  deleteAll() {
-    return http.delete<any>(`/tutorials`);
+  resetPassword(data: DTOResetPassword) {
+    return http.post<DTOUsuario>("/Auth/resetPassword", data);
   }
-  findByTitle(title: string) {
-    return http.get<Array<ITutorialData>>(`/tutorials?title=${title}`);
-  }*/
 }
 export default new authDataService();

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 { IRptPedimentosPagados } from "../../Interfaces/Reportes/IRptPedimentosPagados";
-import { IRptPedimentosPagadosImpuestos } from "../../Interfaces/Reportes/IRptPedimentosPagadosImpuestos";
-import { IRptDetalleAnexo24 } from "../../Interfaces/Reportes/RptDetalleAnexo24";
-import { IRptOperacionesRemesa } from "../../Interfaces/Reportes/RptOperacionesRemesa";
-import IRptBattery from "../../Interfaces/Reportes/IRptBattery";
-import DTOReporte from "../../DTO/DTOReporte";
-import DTOAEPeriodo from "../../DTO/DTOAEPeriodo";
-import IRpArchivoElectronicoOficial from "../../Interfaces/Reportes/IRptArchivoElectronicoOficial";
-import IRptPedimentosConsolidados from "../../Interfaces/Reportes/IRptPedimentosConsolidados";
-import DTOCorresponsalTrafico from "../../DTO/Corresponsales/DTOCorresponsalTrafico";
-import DTORptCorresponsalesTraficos from "../../DTO/Corresponsales/DTORptCorresponsalesTraficos";
-import ICorresponsalTrafico from "../../Interfaces/Corresponsales/ICorresponsalTrafico";
-import IRptOperaciones from "../../Interfaces/Reportes/IRptOperaciones";
-import IRptOperacionesConsolidadas from "../../Interfaces/Reportes/IRptOperacionesConsolidadas";
-import IRptOperacionesDiarias from "../../Interfaces/Reportes/IRptOperacionesDiarias";
-
+import http from '../common/http-common'
+import { IRptPedimentosPagados } from '../../Interfaces/Reportes/IRptPedimentosPagados'
+import { IRptPedimentosPagadosImpuestos } from '../../Interfaces/Reportes/IRptPedimentosPagadosImpuestos'
+import { IRptDetalleAnexo24 } from '../../Interfaces/Reportes/RptDetalleAnexo24'
+import { IRptOperacionesRemesa } from '../../Interfaces/Reportes/RptOperacionesRemesa'
+import IRptBattery from '../../Interfaces/Reportes/IRptBattery'
+import DTOReporte from '../../DTO/DTOReporte'
+import DTOAEPeriodo from '../../DTO/DTOAEPeriodo'
+import IRpArchivoElectronicoOficial from '../../Interfaces/Reportes/IRptArchivoElectronicoOficial'
+import IRptPedimentosConsolidados from '../../Interfaces/Reportes/IRptPedimentosConsolidados'
+import DTOCorresponsalTrafico from '../../DTO/Corresponsales/DTOCorresponsalTrafico'
+import DTORptCorresponsalesTraficos from '../../DTO/Corresponsales/DTORptCorresponsalesTraficos'
+import ICorresponsalTrafico from '../../Interfaces/Corresponsales/ICorresponsalTrafico'
+import IRptOperaciones from '../../Interfaces/Reportes/IRptOperaciones'
+import IRptOperacionesConsolidadas from '../../Interfaces/Reportes/IRptOperacionesConsolidadas'
+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);
+  getRptPedimentosConsolidados(data: DTOReporte) {
+    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}`);
+  getRptArchivoElectronicoOficial(data: DTOAEPeriodo) {
+    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/Services/common/http-common.ts

@@ -11,10 +11,8 @@ const instance = axios.create({
   },
 })
 
-instance.interceptors.response.use(
+/* instance.interceptors.response.use(
   function (response) {
-    /*  if (process.env.NODE_ENV === 'development')
-      console.log('log: ' + JSON.stringify(response)) */
     return response
   },
   function (error) {
@@ -24,13 +22,11 @@ instance.interceptors.response.use(
     ) {
       return Promise.reject(error)
     } else if (401 === error.response.status) {
-      /* localStorage.clear();*/
       window.location.href = '/#/login'
     } else if (
       409 === error.response.status &&
       error.response.data.respuesta.indexOf('factura')
     ) {
-      //console.log(JSON.stringify(error.response))
       if (error.response.data.registro.factura) {
         error.response.data.registro.id === -1
           ? alert(
@@ -46,8 +42,28 @@ instance.interceptors.response.use(
       return Promise.reject(error)
     }
   }
+) */
+
+instance.interceptors.response.use(
+  function (response) {
+    /*  if (process.env.NODE_ENV === 'development')
+      console.log('log: ' + JSON.stringify(response)) */
+    return response
+  },
+  function (error) {
+    const Excluded = ["login", "Reset","forgotPassword", "PIN"]
+    const currentUrl = window.location.href;
+    var urlExceptuado = new RegExp(Excluded.join('|')).test(currentUrl);
+    if (401 === error.response.status && !urlExceptuado) {
+      window.location.href = '/#/login'
+    } else {
+      return Promise.reject(error)
+    }
+    return Promise.reject(error)
+  }
 )
 
+
 /* instance.interceptors.request.use(
   function (config) {
     if (process.env.NODE_ENV === 'development')

src/css/Company.css

@@ -113,3 +113,12 @@
 .zui-table-min {
     height: 0px;
 }
+
+.Color1 {
+    border-color: #002f87;
+  }
+
+.btn-customColor {
+    background-color: #002f87;
+    color: white;
+  }

src/css/reactCaptcha.css

@@ -0,0 +1,12 @@
+/* .react-captcha {
+    background-color: #000000;
+}
+ */
+/* .react-captcha-icon-wrapper {
+}
+ */
+
+.react-captcha-canvas{
+    background-color: rgb(242, 242, 248);
+    color: #fff;
+}