GFronted

.env.development

@@ -0,0 +1,2 @@
+REACT_APP_ENVIRONMENT=development
+REACT_APP_API=https://localhost:5001/api

.env.production

@@ -0,0 +1,2 @@
+REACT_APP_ENVIRONMENT=production
+REACT_APP_API=https://www.gemcousa.mx/GEMCOBackend/api

.env.qa

@@ -0,0 +1,2 @@
+REACT_APP_ENVIRONMENT=qa
+REACT_APP_API=https://www.gemcousa.solutions/GEMCOBackend/api

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "dzhavat.bracket-pair-toggler",
+    "bracketpaircolordlw.bracket-pair-color-dlw",
+    "2gua.rainbow-brackets"
+  ]
+}

README.md

@@ -0,0 +1,46 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

cypress.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+    baseUrl: "http://localhost:3000",
+  },
+  waitForAnimations: false,
+  animationDistanceThreshold: 50,
+});

cypress/e2e/1-getting-started/todo.cy.js

@@ -0,0 +1,143 @@
+/// <reference types="cypress" />
+
+// Welcome to Cypress!
+//
+// This spec file contains a variety of sample tests
+// for a todo list app that are designed to demonstrate
+// the power of writing tests in Cypress.
+//
+// To learn more about how Cypress works and
+// what makes it such an awesome testing tool,
+// please read our getting started guide:
+// https://on.cypress.io/introduction-to-cypress
+
+describe('example to-do app', () => {
+  beforeEach(() => {
+    // Cypress starts out with a blank slate for each test
+    // so we must tell it to visit our website with the `cy.visit()` command.
+    // Since we want to visit the same URL at the start of all our tests,
+    // we include it in our beforeEach function so that it runs before each test
+    cy.visit('https://example.cypress.io/todo')
+  })
+
+  it('displays two todo items by default', () => {
+    // We use the `cy.get()` command to get all elements that match the selector.
+    // Then, we use `should` to assert that there are two matched items,
+    // which are the two default items.
+    cy.get('.todo-list li').should('have.length', 2)
+
+    // We can go even further and check that the default todos each contain
+    // the correct text. We use the `first` and `last` functions
+    // to get just the first and last matched elements individually,
+    // and then perform an assertion with `should`.
+    cy.get('.todo-list li').first().should('have.text', 'Pay electric bill')
+    cy.get('.todo-list li').last().should('have.text', 'Walk the dog')
+  })
+
+  it('can add new todo items', () => {
+    // We'll store our item text in a variable so we can reuse it
+    const newItem = 'Feed the cat'
+
+    // Let's get the input element and use the `type` command to
+    // input our new list item. After typing the content of our item,
+    // we need to type the enter key as well in order to submit the input.
+    // This input has a data-test attribute so we'll use that to select the
+    // element in accordance with best practices:
+    // https://on.cypress.io/selecting-elements
+    cy.get('[data-test=new-todo]').type(`${newItem}{enter}`)
+
+    // Now that we've typed our new item, let's check that it actually was added to the list.
+    // Since it's the newest item, it should exist as the last element in the list.
+    // In addition, with the two default items, we should have a total of 3 elements in the list.
+    // Since assertions yield the element that was asserted on,
+    // we can chain both of these assertions together into a single statement.
+    cy.get('.todo-list li')
+      .should('have.length', 3)
+      .last()
+      .should('have.text', newItem)
+  })
+
+  it('can check off an item as completed', () => {
+    // In addition to using the `get` command to get an element by selector,
+    // we can also use the `contains` command to get an element by its contents.
+    // However, this will yield the <label>, which is lowest-level element that contains the text.
+    // In order to check the item, we'll find the <input> element for this <label>
+    // by traversing up the dom to the parent element. From there, we can `find`
+    // the child checkbox <input> element and use the `check` command to check it.
+    cy.contains('Pay electric bill')
+      .parent()
+      .find('input[type=checkbox]')
+      .check()
+
+    // Now that we've checked the button, we can go ahead and make sure
+    // that the list element is now marked as completed.
+    // Again we'll use `contains` to find the <label> element and then use the `parents` command
+    // to traverse multiple levels up the dom until we find the corresponding <li> element.
+    // Once we get that element, we can assert that it has the completed class.
+    cy.contains('Pay electric bill')
+      .parents('li')
+      .should('have.class', 'completed')
+  })
+
+  context('with a checked task', () => {
+    beforeEach(() => {
+      // We'll take the command we used above to check off an element
+      // Since we want to perform multiple tests that start with checking
+      // one element, we put it in the beforeEach hook
+      // so that it runs at the start of every test.
+      cy.contains('Pay electric bill')
+        .parent()
+        .find('input[type=checkbox]')
+        .check()
+    })
+
+    it('can filter for uncompleted tasks', () => {
+      // We'll click on the "active" button in order to
+      // display only incomplete items
+      cy.contains('Active').click()
+
+      // After filtering, we can assert that there is only the one
+      // incomplete item in the list.
+      cy.get('.todo-list li')
+        .should('have.length', 1)
+        .first()
+        .should('have.text', 'Walk the dog')
+
+      // For good measure, let's also assert that the task we checked off
+      // does not exist on the page.
+      cy.contains('Pay electric bill').should('not.exist')
+    })
+
+    it('can filter for completed tasks', () => {
+      // We can perform similar steps as the test above to ensure
+      // that only completed tasks are shown
+      cy.contains('Completed').click()
+
+      cy.get('.todo-list li')
+        .should('have.length', 1)
+        .first()
+        .should('have.text', 'Pay electric bill')
+
+      cy.contains('Walk the dog').should('not.exist')
+    })
+
+    it('can delete all completed tasks', () => {
+      // First, let's click the "Clear completed" button
+      // `contains` is actually serving two purposes here.
+      // First, it's ensuring that the button exists within the dom.
+      // This button only appears when at least one task is checked
+      // so this command is implicitly verifying that it does exist.
+      // Second, it selects the button so we can click it.
+      cy.contains('Clear completed').click()
+
+      // Then we can make sure that there is only one element
+      // in the list and our element does not exist
+      cy.get('.todo-list li')
+        .should('have.length', 1)
+        .should('not.have.text', 'Pay electric bill')
+
+      // Finally, make sure that the clear button no longer exists.
+      cy.contains('Clear completed').should('not.exist')
+    })
+  })
+})

cypress/e2e/2-advanced-examples/actions.cy.js

@@ -0,0 +1,299 @@
+/// <reference types="cypress" />
+
+context('Actions', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/actions')
+  })
+
+  // https://on.cypress.io/interacting-with-elements
+
+  it('.type() - type into a DOM element', () => {
+    // https://on.cypress.io/type
+    cy.get('.action-email')
+      .type('fake@email.com').should('have.value', 'fake@email.com')
+
+      // .type() with special character sequences
+      .type('{leftarrow}{rightarrow}{uparrow}{downarrow}')
+      .type('{del}{selectall}{backspace}')
+
+      // .type() with key modifiers
+      .type('{alt}{option}') //these are equivalent
+      .type('{ctrl}{control}') //these are equivalent
+      .type('{meta}{command}{cmd}') //these are equivalent
+      .type('{shift}')
+
+      // Delay each keypress by 0.1 sec
+      .type('slow.typing@email.com', { delay: 100 })
+      .should('have.value', 'slow.typing@email.com')
+
+    cy.get('.action-disabled')
+      // Ignore error checking prior to type
+      // like whether the input is visible or disabled
+      .type('disabled error checking', { force: true })
+      .should('have.value', 'disabled error checking')
+  })
+
+  it('.focus() - focus on a DOM element', () => {
+    // https://on.cypress.io/focus
+    cy.get('.action-focus').focus()
+      .should('have.class', 'focus')
+      .prev().should('have.attr', 'style', 'color: orange;')
+  })
+
+  it('.blur() - blur off a DOM element', () => {
+    // https://on.cypress.io/blur
+    cy.get('.action-blur').type('About to blur').blur()
+      .should('have.class', 'error')
+      .prev().should('have.attr', 'style', 'color: red;')
+  })
+
+  it('.clear() - clears an input or textarea element', () => {
+    // https://on.cypress.io/clear
+    cy.get('.action-clear').type('Clear this text')
+      .should('have.value', 'Clear this text')
+      .clear()
+      .should('have.value', '')
+  })
+
+  it('.submit() - submit a form', () => {
+    // https://on.cypress.io/submit
+    cy.get('.action-form')
+      .find('[type="text"]').type('HALFOFF')
+
+    cy.get('.action-form').submit()
+      .next().should('contain', 'Your form has been submitted!')
+  })
+
+  it('.click() - click on a DOM element', () => {
+    // https://on.cypress.io/click
+    cy.get('.action-btn').click()
+
+    // You can click on 9 specific positions of an element:
+    //  -----------------------------------
+    // | topLeft        top       topRight |
+    // |                                   |
+    // |                                   |
+    // |                                   |
+    // | left          center        right |
+    // |                                   |
+    // |                                   |
+    // |                                   |
+    // | bottomLeft   bottom   bottomRight |
+    //  -----------------------------------
+
+    // clicking in the center of the element is the default
+    cy.get('#action-canvas').click()
+
+    cy.get('#action-canvas').click('topLeft')
+    cy.get('#action-canvas').click('top')
+    cy.get('#action-canvas').click('topRight')
+    cy.get('#action-canvas').click('left')
+    cy.get('#action-canvas').click('right')
+    cy.get('#action-canvas').click('bottomLeft')
+    cy.get('#action-canvas').click('bottom')
+    cy.get('#action-canvas').click('bottomRight')
+
+    // .click() accepts an x and y coordinate
+    // that controls where the click occurs :)
+
+    cy.get('#action-canvas')
+      .click(80, 75) // click 80px on x coord and 75px on y coord
+      .click(170, 75)
+      .click(80, 165)
+      .click(100, 185)
+      .click(125, 190)
+      .click(150, 185)
+      .click(170, 165)
+
+    // click multiple elements by passing multiple: true
+    cy.get('.action-labels>.label').click({ multiple: true })
+
+    // Ignore error checking prior to clicking
+    cy.get('.action-opacity>.btn').click({ force: true })
+  })
+
+  it('.dblclick() - double click on a DOM element', () => {
+    // https://on.cypress.io/dblclick
+
+    // Our app has a listener on 'dblclick' event in our 'scripts.js'
+    // that hides the div and shows an input on double click
+    cy.get('.action-div').dblclick().should('not.be.visible')
+    cy.get('.action-input-hidden').should('be.visible')
+  })
+
+  it('.rightclick() - right click on a DOM element', () => {
+    // https://on.cypress.io/rightclick
+
+    // Our app has a listener on 'contextmenu' event in our 'scripts.js'
+    // that hides the div and shows an input on right click
+    cy.get('.rightclick-action-div').rightclick().should('not.be.visible')
+    cy.get('.rightclick-action-input-hidden').should('be.visible')
+  })
+
+  it('.check() - check a checkbox or radio element', () => {
+    // https://on.cypress.io/check
+
+    // By default, .check() will check all
+    // matching checkbox or radio elements in succession, one after another
+    cy.get('.action-checkboxes [type="checkbox"]').not('[disabled]')
+      .check().should('be.checked')
+
+    cy.get('.action-radios [type="radio"]').not('[disabled]')
+      .check().should('be.checked')
+
+    // .check() accepts a value argument
+    cy.get('.action-radios [type="radio"]')
+      .check('radio1').should('be.checked')
+
+    // .check() accepts an array of values
+    cy.get('.action-multiple-checkboxes [type="checkbox"]')
+      .check(['checkbox1', 'checkbox2']).should('be.checked')
+
+    // Ignore error checking prior to checking
+    cy.get('.action-checkboxes [disabled]')
+      .check({ force: true }).should('be.checked')
+
+    cy.get('.action-radios [type="radio"]')
+      .check('radio3', { force: true }).should('be.checked')
+  })
+
+  it('.uncheck() - uncheck a checkbox element', () => {
+    // https://on.cypress.io/uncheck
+
+    // By default, .uncheck() will uncheck all matching
+    // checkbox elements in succession, one after another
+    cy.get('.action-check [type="checkbox"]')
+      .not('[disabled]')
+      .uncheck().should('not.be.checked')
+
+    // .uncheck() accepts a value argument
+    cy.get('.action-check [type="checkbox"]')
+      .check('checkbox1')
+      .uncheck('checkbox1').should('not.be.checked')
+
+    // .uncheck() accepts an array of values
+    cy.get('.action-check [type="checkbox"]')
+      .check(['checkbox1', 'checkbox3'])
+      .uncheck(['checkbox1', 'checkbox3']).should('not.be.checked')
+
+    // Ignore error checking prior to unchecking
+    cy.get('.action-check [disabled]')
+      .uncheck({ force: true }).should('not.be.checked')
+  })
+
+  it('.select() - select an option in a <select> element', () => {
+    // https://on.cypress.io/select
+
+    // at first, no option should be selected
+    cy.get('.action-select')
+      .should('have.value', '--Select a fruit--')
+
+    // Select option(s) with matching text content
+    cy.get('.action-select').select('apples')
+    // confirm the apples were selected
+    // note that each value starts with "fr-" in our HTML
+    cy.get('.action-select').should('have.value', 'fr-apples')
+
+    cy.get('.action-select-multiple')
+      .select(['apples', 'oranges', 'bananas'])
+      // when getting multiple values, invoke "val" method first
+      .invoke('val')
+      .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])
+
+    // Select option(s) with matching value
+    cy.get('.action-select').select('fr-bananas')
+      // can attach an assertion right away to the element
+      .should('have.value', 'fr-bananas')
+
+    cy.get('.action-select-multiple')
+      .select(['fr-apples', 'fr-oranges', 'fr-bananas'])
+      .invoke('val')
+      .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])
+
+    // assert the selected values include oranges
+    cy.get('.action-select-multiple')
+      .invoke('val').should('include', 'fr-oranges')
+  })
+
+  it('.scrollIntoView() - scroll an element into view', () => {
+    // https://on.cypress.io/scrollintoview
+
+    // normally all of these buttons are hidden,
+    // because they're not within
+    // the viewable area of their parent
+    // (we need to scroll to see them)
+    cy.get('#scroll-horizontal button')
+      .should('not.be.visible')
+
+    // scroll the button into view, as if the user had scrolled
+    cy.get('#scroll-horizontal button').scrollIntoView()
+      .should('be.visible')
+
+    cy.get('#scroll-vertical button')
+      .should('not.be.visible')
+
+    // Cypress handles the scroll direction needed
+    cy.get('#scroll-vertical button').scrollIntoView()
+      .should('be.visible')
+
+    cy.get('#scroll-both button')
+      .should('not.be.visible')
+
+    // Cypress knows to scroll to the right and down
+    cy.get('#scroll-both button').scrollIntoView()
+      .should('be.visible')
+  })
+
+  it('.trigger() - trigger an event on a DOM element', () => {
+    // https://on.cypress.io/trigger
+
+    // To interact with a range input (slider)
+    // we need to set its value & trigger the
+    // event to signal it changed
+
+    // Here, we invoke jQuery's val() method to set
+    // the value and trigger the 'change' event
+    cy.get('.trigger-input-range')
+      .invoke('val', 25)
+      .trigger('change')
+      .get('input[type=range]').siblings('p')
+      .should('have.text', '25')
+  })
+
+  it('cy.scrollTo() - scroll the window or element to a position', () => {
+    // https://on.cypress.io/scrollto
+
+    // You can scroll to 9 specific positions of an element:
+    //  -----------------------------------
+    // | topLeft        top       topRight |
+    // |                                   |
+    // |                                   |
+    // |                                   |
+    // | left          center        right |
+    // |                                   |
+    // |                                   |
+    // |                                   |
+    // | bottomLeft   bottom   bottomRight |
+    //  -----------------------------------
+
+    // if you chain .scrollTo() off of cy, we will
+    // scroll the entire window
+    cy.scrollTo('bottom')
+
+    cy.get('#scrollable-horizontal').scrollTo('right')
+
+    // or you can scroll to a specific coordinate:
+    // (x axis, y axis) in pixels
+    cy.get('#scrollable-vertical').scrollTo(250, 250)
+
+    // or you can scroll to a specific percentage
+    // of the (width, height) of the element
+    cy.get('#scrollable-both').scrollTo('75%', '25%')
+
+    // control the easing of the scroll (default is 'swing')
+    cy.get('#scrollable-vertical').scrollTo('center', { easing: 'linear' })
+
+    // control the duration of the scroll (in ms)
+    cy.get('#scrollable-both').scrollTo('center', { duration: 2000 })
+  })
+})

cypress/e2e/2-advanced-examples/aliasing.cy.js

@@ -0,0 +1,39 @@
+/// <reference types="cypress" />
+
+context('Aliasing', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/aliasing')
+  })
+
+  it('.as() - alias a DOM element for later use', () => {
+    // https://on.cypress.io/as
+
+    // Alias a DOM element for use later
+    // We don't have to traverse to the element
+    // later in our code, we reference it with @
+
+    cy.get('.as-table').find('tbody>tr')
+      .first().find('td').first()
+      .find('button').as('firstBtn')
+
+    // when we reference the alias, we place an
+    // @ in front of its name
+    cy.get('@firstBtn').click()
+
+    cy.get('@firstBtn')
+      .should('have.class', 'btn-success')
+      .and('contain', 'Changed')
+  })
+
+  it('.as() - alias a route for later use', () => {
+    // Alias the route to wait for its response
+    cy.intercept('GET', '**/comments/*').as('getComment')
+
+    // we have code that gets a comment when
+    // the button is clicked in scripts.js
+    cy.get('.network-btn').click()
+
+    // https://on.cypress.io/wait
+    cy.wait('@getComment').its('response.statusCode').should('eq', 200)
+  })
+})

cypress/e2e/2-advanced-examples/assertions.cy.js

@@ -0,0 +1,176 @@
+/// <reference types="cypress" />
+
+context('Assertions', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/assertions')
+  })
+
+  describe('Implicit Assertions', () => {
+    it('.should() - make an assertion about the current subject', () => {
+      // https://on.cypress.io/should
+      cy.get('.assertion-table')
+        .find('tbody tr:last')
+        .should('have.class', 'success')
+        .find('td')
+        .first()
+        // checking the text of the <td> element in various ways
+        .should('have.text', 'Column content')
+        .should('contain', 'Column content')
+        .should('have.html', 'Column content')
+        // chai-jquery uses "is()" to check if element matches selector
+        .should('match', 'td')
+        // to match text content against a regular expression
+        // first need to invoke jQuery method text()
+        // and then match using regular expression
+        .invoke('text')
+        .should('match', /column content/i)
+
+      // a better way to check element's text content against a regular expression
+      // is to use "cy.contains"
+      // https://on.cypress.io/contains
+      cy.get('.assertion-table')
+        .find('tbody tr:last')
+        // finds first <td> element with text content matching regular expression
+        .contains('td', /column content/i)
+        .should('be.visible')
+
+      // for more information about asserting element's text
+      // see https://on.cypress.io/using-cypress-faq#How-do-I-get-an-element’s-text-contents
+    })
+
+    it('.and() - chain multiple assertions together', () => {
+      // https://on.cypress.io/and
+      cy.get('.assertions-link')
+        .should('have.class', 'active')
+        .and('have.attr', 'href')
+        .and('include', 'cypress.io')
+    })
+  })
+
+  describe('Explicit Assertions', () => {
+    // https://on.cypress.io/assertions
+    it('expect - make an assertion about a specified subject', () => {
+      // We can use Chai's BDD style assertions
+      expect(true).to.be.true
+      const o = { foo: 'bar' }
+
+      expect(o).to.equal(o)
+      expect(o).to.deep.equal({ foo: 'bar' })
+      // matching text using regular expression
+      expect('FooBar').to.match(/bar$/i)
+    })
+
+    it('pass your own callback function to should()', () => {
+      // Pass a function to should that can have any number
+      // of explicit assertions within it.
+      // The ".should(cb)" function will be retried
+      // automatically until it passes all your explicit assertions or times out.
+      cy.get('.assertions-p')
+        .find('p')
+        .should(($p) => {
+          // https://on.cypress.io/$
+          // return an array of texts from all of the p's
+          const texts = $p.map((i, el) => Cypress.$(el).text())
+
+          // jquery map returns jquery object
+          // and .get() convert this to simple array
+          const paragraphs = texts.get()
+
+          // array should have length of 3
+          expect(paragraphs, 'has 3 paragraphs').to.have.length(3)
+
+          // use second argument to expect(...) to provide clear
+          // message with each assertion
+          expect(paragraphs, 'has expected text in each paragraph').to.deep.eq([
+            'Some text from first p',
+            'More text from second p',
+            'And even more text from third p',
+          ])
+        })
+    })
+
+    it('finds element by class name regex', () => {
+      cy.get('.docs-header')
+        .find('div')
+        // .should(cb) callback function will be retried
+        .should(($div) => {
+          expect($div).to.have.length(1)
+
+          const className = $div[0].className
+
+          expect(className).to.match(/heading-/)
+        })
+        // .then(cb) callback is not retried,
+        // it either passes or fails
+        .then(($div) => {
+          expect($div, 'text content').to.have.text('Introduction')
+        })
+    })
+
+    it('can throw any error', () => {
+      cy.get('.docs-header')
+        .find('div')
+        .should(($div) => {
+          if ($div.length !== 1) {
+            // you can throw your own errors
+            throw new Error('Did not find 1 element')
+          }
+
+          const className = $div[0].className
+
+          if (!className.match(/heading-/)) {
+            throw new Error(`Could not find class "heading-" in ${className}`)
+          }
+        })
+    })
+
+    it('matches unknown text between two elements', () => {
+      /**
+       * Text from the first element.
+       * @type {string}
+      */
+      let text
+
+      /**
+       * Normalizes passed text,
+       * useful before comparing text with spaces and different capitalization.
+       * @param {string} s Text to normalize
+      */
+      const normalizeText = (s) => s.replace(/\s/g, '').toLowerCase()
+
+      cy.get('.two-elements')
+        .find('.first')
+        .then(($first) => {
+          // save text from the first element
+          text = normalizeText($first.text())
+        })
+
+      cy.get('.two-elements')
+        .find('.second')
+        .should(($div) => {
+          // we can massage text before comparing
+          const secondText = normalizeText($div.text())
+
+          expect(secondText, 'second text').to.equal(text)
+        })
+    })
+
+    it('assert - assert shape of an object', () => {
+      const person = {
+        name: 'Joe',
+        age: 20,
+      }
+
+      assert.isObject(person, 'value is object')
+    })
+
+    it('retries the should callback until assertions pass', () => {
+      cy.get('#random-number')
+        .should(($div) => {
+          const n = parseFloat($div.text())
+
+          expect(n).to.be.gte(1).and.be.lte(10)
+        })
+    })
+  })
+})

cypress/e2e/2-advanced-examples/connectors.cy.js

@@ -0,0 +1,97 @@
+/// <reference types="cypress" />
+
+context('Connectors', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/connectors')
+  })
+
+  it('.each() - iterate over an array of elements', () => {
+    // https://on.cypress.io/each
+    cy.get('.connectors-each-ul>li')
+      .each(($el, index, $list) => {
+        console.log($el, index, $list)
+      })
+  })
+
+  it('.its() - get properties on the current subject', () => {
+    // https://on.cypress.io/its
+    cy.get('.connectors-its-ul>li')
+      // calls the 'length' property yielding that value
+      .its('length')
+      .should('be.gt', 2)
+  })
+
+  it('.invoke() - invoke a function on the current subject', () => {
+    // our div is hidden in our script.js
+    // $('.connectors-div').hide()
+
+    // https://on.cypress.io/invoke
+    cy.get('.connectors-div').should('be.hidden')
+      // call the jquery method 'show' on the 'div.container'
+      .invoke('show')
+      .should('be.visible')
+  })
+
+  it('.spread() - spread an array as individual args to callback function', () => {
+    // https://on.cypress.io/spread
+    const arr = ['foo', 'bar', 'baz']
+
+    cy.wrap(arr).spread((foo, bar, baz) => {
+      expect(foo).to.eq('foo')
+      expect(bar).to.eq('bar')
+      expect(baz).to.eq('baz')
+    })
+  })
+
+  describe('.then()', () => {
+    it('invokes a callback function with the current subject', () => {
+      // https://on.cypress.io/then
+      cy.get('.connectors-list > li')
+        .then(($lis) => {
+          expect($lis, '3 items').to.have.length(3)
+          expect($lis.eq(0), 'first item').to.contain('Walk the dog')
+          expect($lis.eq(1), 'second item').to.contain('Feed the cat')
+          expect($lis.eq(2), 'third item').to.contain('Write JavaScript')
+        })
+    })
+
+    it('yields the returned value to the next command', () => {
+      cy.wrap(1)
+        .then((num) => {
+          expect(num).to.equal(1)
+
+          return 2
+        })
+        .then((num) => {
+          expect(num).to.equal(2)
+        })
+    })
+
+    it('yields the original subject without return', () => {
+      cy.wrap(1)
+        .then((num) => {
+          expect(num).to.equal(1)
+          // note that nothing is returned from this callback
+        })
+        .then((num) => {
+          // this callback receives the original unchanged value 1
+          expect(num).to.equal(1)
+        })
+    })
+
+    it('yields the value yielded by the last Cypress command inside', () => {
+      cy.wrap(1)
+        .then((num) => {
+          expect(num).to.equal(1)
+          // note how we run a Cypress command
+          // the result yielded by this Cypress command
+          // will be passed to the second ".then"
+          cy.wrap(2)
+        })
+        .then((num) => {
+          // this callback receives the value yielded by "cy.wrap(2)"
+          expect(num).to.equal(2)
+        })
+    })
+  })
+})

cypress/e2e/2-advanced-examples/cookies.cy.js

@@ -0,0 +1,77 @@
+/// <reference types="cypress" />
+
+context('Cookies', () => {
+  beforeEach(() => {
+    Cypress.Cookies.debug(true)
+
+    cy.visit('https://example.cypress.io/commands/cookies')
+
+    // clear cookies again after visiting to remove
+    // any 3rd party cookies picked up such as cloudflare
+    cy.clearCookies()
+  })
+
+  it('cy.getCookie() - get a browser cookie', () => {
+    // https://on.cypress.io/getcookie
+    cy.get('#getCookie .set-a-cookie').click()
+
+    // cy.getCookie() yields a cookie object
+    cy.getCookie('token').should('have.property', 'value', '123ABC')
+  })
+
+  it('cy.getCookies() - get browser cookies', () => {
+    // https://on.cypress.io/getcookies
+    cy.getCookies().should('be.empty')
+
+    cy.get('#getCookies .set-a-cookie').click()
+
+    // cy.getCookies() yields an array of cookies
+    cy.getCookies().should('have.length', 1).should((cookies) => {
+      // each cookie has these properties
+      expect(cookies[0]).to.have.property('name', 'token')
+      expect(cookies[0]).to.have.property('value', '123ABC')
+      expect(cookies[0]).to.have.property('httpOnly', false)
+      expect(cookies[0]).to.have.property('secure', false)
+      expect(cookies[0]).to.have.property('domain')
+      expect(cookies[0]).to.have.property('path')
+    })
+  })
+
+  it('cy.setCookie() - set a browser cookie', () => {
+    // https://on.cypress.io/setcookie
+    cy.getCookies().should('be.empty')
+
+    cy.setCookie('foo', 'bar')
+
+    // cy.getCookie() yields a cookie object
+    cy.getCookie('foo').should('have.property', 'value', 'bar')
+  })
+
+  it('cy.clearCookie() - clear a browser cookie', () => {
+    // https://on.cypress.io/clearcookie
+    cy.getCookie('token').should('be.null')
+
+    cy.get('#clearCookie .set-a-cookie').click()
+
+    cy.getCookie('token').should('have.property', 'value', '123ABC')
+
+    // cy.clearCookies() yields null
+    cy.clearCookie('token').should('be.null')
+
+    cy.getCookie('token').should('be.null')
+  })
+
+  it('cy.clearCookies() - clear browser cookies', () => {
+    // https://on.cypress.io/clearcookies
+    cy.getCookies().should('be.empty')
+
+    cy.get('#clearCookies .set-a-cookie').click()
+
+    cy.getCookies().should('have.length', 1)
+
+    // cy.clearCookies() yields null
+    cy.clearCookies()
+
+    cy.getCookies().should('be.empty')
+  })
+})

cypress/e2e/2-advanced-examples/cypress_api.cy.js

@@ -0,0 +1,200 @@
+/// <reference types="cypress" />
+
+context('Cypress.Commands', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/cypress-api')
+  })
+
+  // https://on.cypress.io/custom-commands
+
+  it('.add() - create a custom command', () => {
+    Cypress.Commands.add('console', {
+      prevSubject: true,
+    }, (subject, method) => {
+      // the previous subject is automatically received
+      // and the commands arguments are shifted
+
+      // allow us to change the console method used
+      method = method || 'log'
+
+      // log the subject to the console
+      console[method]('The subject is', subject)
+
+      // whatever we return becomes the new subject
+      // we don't want to change the subject so
+      // we return whatever was passed in
+      return subject
+    })
+
+    cy.get('button').console('info').then(($button) => {
+      // subject is still $button
+    })
+  })
+})
+
+context('Cypress.Cookies', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/cypress-api')
+  })
+
+  // https://on.cypress.io/cookies
+  it('.debug() - enable or disable debugging', () => {
+    Cypress.Cookies.debug(true)
+
+    // Cypress will now log in the console when
+    // cookies are set or cleared
+    cy.setCookie('fakeCookie', '123ABC')
+    cy.clearCookie('fakeCookie')
+    cy.setCookie('fakeCookie', '123ABC')
+    cy.clearCookie('fakeCookie')
+    cy.setCookie('fakeCookie', '123ABC')
+  })
+
+  it('.preserveOnce() - preserve cookies by key', () => {
+    // normally cookies are reset after each test
+    cy.getCookie('fakeCookie').should('not.be.ok')
+
+    // preserving a cookie will not clear it when
+    // the next test starts
+    cy.setCookie('lastCookie', '789XYZ')
+    Cypress.Cookies.preserveOnce('lastCookie')
+  })
+
+  it('.defaults() - set defaults for all cookies', () => {
+    // now any cookie with the name 'session_id' will
+    // not be cleared before each new test runs
+    Cypress.Cookies.defaults({
+      preserve: 'session_id',
+    })
+  })
+})
+
+context('Cypress.arch', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/cypress-api')
+  })
+
+  it('Get CPU architecture name of underlying OS', () => {
+    // https://on.cypress.io/arch
+    expect(Cypress.arch).to.exist
+  })
+})
+
+context('Cypress.config()', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/cypress-api')
+  })
+
+  it('Get and set configuration options', () => {
+    // https://on.cypress.io/config
+    let myConfig = Cypress.config()
+
+    expect(myConfig).to.have.property('animationDistanceThreshold', 5)
+    expect(myConfig).to.have.property('baseUrl', null)
+    expect(myConfig).to.have.property('defaultCommandTimeout', 4000)
+    expect(myConfig).to.have.property('requestTimeout', 5000)
+    expect(myConfig).to.have.property('responseTimeout', 30000)
+    expect(myConfig).to.have.property('viewportHeight', 660)
+    expect(myConfig).to.have.property('viewportWidth', 1000)
+    expect(myConfig).to.have.property('pageLoadTimeout', 60000)
+    expect(myConfig).to.have.property('waitForAnimations', true)
+
+    expect(Cypress.config('pageLoadTimeout')).to.eq(60000)
+
+    // this will change the config for the rest of your tests!
+    Cypress.config('pageLoadTimeout', 20000)
+
+    expect(Cypress.config('pageLoadTimeout')).to.eq(20000)
+
+    Cypress.config('pageLoadTimeout', 60000)
+  })
+})
+
+context('Cypress.dom', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/cypress-api')
+  })
+
+  // https://on.cypress.io/dom
+  it('.isHidden() - determine if a DOM element is hidden', () => {
+    let hiddenP = Cypress.$('.dom-p p.hidden').get(0)
+    let visibleP = Cypress.$('.dom-p p.visible').get(0)
+
+    // our first paragraph has css class 'hidden'
+    expect(Cypress.dom.isHidden(hiddenP)).to.be.true
+    expect(Cypress.dom.isHidden(visibleP)).to.be.false
+  })
+})
+
+context('Cypress.env()', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/cypress-api')
+  })
+
+  // We can set environment variables for highly dynamic values
+
+  // https://on.cypress.io/environment-variables
+  it('Get environment variables', () => {
+    // https://on.cypress.io/env
+    // set multiple environment variables
+    Cypress.env({
+      host: 'veronica.dev.local',
+      api_server: 'http://localhost:8888/v1/',
+    })
+
+    // get environment variable
+    expect(Cypress.env('host')).to.eq('veronica.dev.local')
+
+    // set environment variable
+    Cypress.env('api_server', 'http://localhost:8888/v2/')
+    expect(Cypress.env('api_server')).to.eq('http://localhost:8888/v2/')
+
+    // get all environment variable
+    expect(Cypress.env()).to.have.property('host', 'veronica.dev.local')
+    expect(Cypress.env()).to.have.property('api_server', 'http://localhost:8888/v2/')
+  })
+})
+
+context('Cypress.log', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/cypress-api')
+  })
+
+  it('Control what is printed to the Command Log', () => {
+    // https://on.cypress.io/cypress-log
+  })
+})
+
+context('Cypress.platform', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/cypress-api')
+  })
+
+  it('Get underlying OS name', () => {
+    // https://on.cypress.io/platform
+    expect(Cypress.platform).to.be.exist
+  })
+})
+
+context('Cypress.version', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/cypress-api')
+  })
+
+  it('Get current version of Cypress being run', () => {
+    // https://on.cypress.io/version
+    expect(Cypress.version).to.be.exist
+  })
+})
+
+context('Cypress.spec', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/cypress-api')
+  })
+
+  it('Get current spec information', () => {
+    // https://on.cypress.io/spec
+    // wrap the object so we can inspect it easily by clicking in the command log
+    cy.wrap(Cypress.spec).should('include.keys', ['name', 'relative', 'absolute'])
+  })
+})

cypress/e2e/2-advanced-examples/files.cy.js

@@ -0,0 +1,87 @@
+/// <reference types="cypress" />
+
+/// JSON fixture file can be loaded directly using
+// the built-in JavaScript bundler
+const requiredExample = require('../../fixtures/example')
+
+context('Files', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/files')
+  })
+
+  beforeEach(() => {
+    // load example.json fixture file and store
+    // in the test context object
+    cy.fixture('example.json').as('example')
+  })
+
+  it('cy.fixture() - load a fixture', () => {
+    // https://on.cypress.io/fixture
+
+    // Instead of writing a response inline you can
+    // use a fixture file's content.
+
+    // when application makes an Ajax request matching "GET **/comments/*"
+    // Cypress will intercept it and reply with the object in `example.json` fixture
+    cy.intercept('GET', '**/comments/*', { fixture: 'example.json' }).as('getComment')
+
+    // we have code that gets a comment when
+    // the button is clicked in scripts.js
+    cy.get('.fixture-btn').click()
+
+    cy.wait('@getComment').its('response.body')
+      .should('have.property', 'name')
+      .and('include', 'Using fixtures to represent data')
+  })
+
+  it('cy.fixture() or require - load a fixture', function () {
+    // we are inside the "function () { ... }"
+    // callback and can use test context object "this"
+    // "this.example" was loaded in "beforeEach" function callback
+    expect(this.example, 'fixture in the test context')
+      .to.deep.equal(requiredExample)
+
+    // or use "cy.wrap" and "should('deep.equal', ...)" assertion
+    cy.wrap(this.example)
+      .should('deep.equal', requiredExample)
+  })
+
+  it('cy.readFile() - read file contents', () => {
+    // https://on.cypress.io/readfile
+
+    // You can read a file and yield its contents
+    // The filePath is relative to your project's root.
+    cy.readFile(Cypress.config('configFile')).then((config) => {
+      expect(config).to.be.an('string')
+    })
+  })
+
+  it('cy.writeFile() - write to a file', () => {
+    // https://on.cypress.io/writefile
+
+    // You can write to a file
+
+    // Use a response from a request to automatically
+    // generate a fixture file for use later
+    cy.request('https://jsonplaceholder.cypress.io/users')
+      .then((response) => {
+        cy.writeFile('cypress/fixtures/users.json', response.body)
+      })
+
+    cy.fixture('users').should((users) => {
+      expect(users[0].name).to.exist
+    })
+
+    // JavaScript arrays and objects are stringified
+    // and formatted into text.
+    cy.writeFile('cypress/fixtures/profile.json', {
+      id: 8739,
+      name: 'Jane',
+      email: 'jane@example.com',
+    })
+
+    cy.fixture('profile').should((profile) => {
+      expect(profile.name).to.eq('Jane')
+    })
+  })
+})

cypress/e2e/2-advanced-examples/local_storage.cy.js

@@ -0,0 +1,52 @@
+/// <reference types="cypress" />
+
+context('Local Storage', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/local-storage')
+  })
+  // Although local storage is automatically cleared
+  // in between tests to maintain a clean state
+  // sometimes we need to clear the local storage manually
+
+  it('cy.clearLocalStorage() - clear all data in local storage', () => {
+    // https://on.cypress.io/clearlocalstorage
+    cy.get('.ls-btn').click().should(() => {
+      expect(localStorage.getItem('prop1')).to.eq('red')
+      expect(localStorage.getItem('prop2')).to.eq('blue')
+      expect(localStorage.getItem('prop3')).to.eq('magenta')
+    })
+
+    // clearLocalStorage() yields the localStorage object
+    cy.clearLocalStorage().should((ls) => {
+      expect(ls.getItem('prop1')).to.be.null
+      expect(ls.getItem('prop2')).to.be.null
+      expect(ls.getItem('prop3')).to.be.null
+    })
+
+    cy.get('.ls-btn').click().should(() => {
+      expect(localStorage.getItem('prop1')).to.eq('red')
+      expect(localStorage.getItem('prop2')).to.eq('blue')
+      expect(localStorage.getItem('prop3')).to.eq('magenta')
+    })
+
+    // Clear key matching string in Local Storage
+    cy.clearLocalStorage('prop1').should((ls) => {
+      expect(ls.getItem('prop1')).to.be.null
+      expect(ls.getItem('prop2')).to.eq('blue')
+      expect(ls.getItem('prop3')).to.eq('magenta')
+    })
+
+    cy.get('.ls-btn').click().should(() => {
+      expect(localStorage.getItem('prop1')).to.eq('red')
+      expect(localStorage.getItem('prop2')).to.eq('blue')
+      expect(localStorage.getItem('prop3')).to.eq('magenta')
+    })
+
+    // Clear keys matching regex in Local Storage
+    cy.clearLocalStorage(/prop1|2/).should((ls) => {
+      expect(ls.getItem('prop1')).to.be.null
+      expect(ls.getItem('prop2')).to.be.null
+      expect(ls.getItem('prop3')).to.eq('magenta')
+    })
+  })
+})

cypress/e2e/2-advanced-examples/location.cy.js

@@ -0,0 +1,32 @@
+/// <reference types="cypress" />
+
+context('Location', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/location')
+  })
+
+  it('cy.hash() - get the current URL hash', () => {
+    // https://on.cypress.io/hash
+    cy.hash().should('be.empty')
+  })
+
+  it('cy.location() - get window.location', () => {
+    // https://on.cypress.io/location
+    cy.location().should((location) => {
+      expect(location.hash).to.be.empty
+      expect(location.href).to.eq('https://example.cypress.io/commands/location')
+      expect(location.host).to.eq('example.cypress.io')
+      expect(location.hostname).to.eq('example.cypress.io')
+      expect(location.origin).to.eq('https://example.cypress.io')
+      expect(location.pathname).to.eq('/commands/location')
+      expect(location.port).to.eq('')
+      expect(location.protocol).to.eq('https:')
+      expect(location.search).to.be.empty
+    })
+  })
+
+  it('cy.url() - get the current URL', () => {
+    // https://on.cypress.io/url
+    cy.url().should('eq', 'https://example.cypress.io/commands/location')
+  })
+})

cypress/e2e/2-advanced-examples/misc.cy.js

@@ -0,0 +1,104 @@
+/// <reference types="cypress" />
+
+context('Misc', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/misc')
+  })
+
+  it('.end() - end the command chain', () => {
+    // https://on.cypress.io/end
+
+    // cy.end is useful when you want to end a chain of commands
+    // and force Cypress to re-query from the root element
+    cy.get('.misc-table').within(() => {
+      // ends the current chain and yields null
+      cy.contains('Cheryl').click().end()
+
+      // queries the entire table again
+      cy.contains('Charles').click()
+    })
+  })
+
+  it('cy.exec() - execute a system command', () => {
+    // execute a system command.
+    // so you can take actions necessary for
+    // your test outside the scope of Cypress.
+    // https://on.cypress.io/exec
+
+    // we can use Cypress.platform string to
+    // select appropriate command
+    // https://on.cypress/io/platform
+    cy.log(`Platform ${Cypress.platform} architecture ${Cypress.arch}`)
+
+    // on CircleCI Windows build machines we have a failure to run bash shell
+    // https://github.com/cypress-io/cypress/issues/5169
+    // so skip some of the tests by passing flag "--env circle=true"
+    const isCircleOnWindows = Cypress.platform === 'win32' && Cypress.env('circle')
+
+    if (isCircleOnWindows) {
+      cy.log('Skipping test on CircleCI')
+
+      return
+    }
+
+    // cy.exec problem on Shippable CI
+    // https://github.com/cypress-io/cypress/issues/6718
+    const isShippable = Cypress.platform === 'linux' && Cypress.env('shippable')
+
+    if (isShippable) {
+      cy.log('Skipping test on ShippableCI')
+
+      return
+    }
+
+    cy.exec('echo Jane Lane')
+      .its('stdout').should('contain', 'Jane Lane')
+
+    if (Cypress.platform === 'win32') {
+      cy.exec(`print ${Cypress.config('configFile')}`)
+        .its('stderr').should('be.empty')
+    } else {
+      cy.exec(`cat ${Cypress.config('configFile')}`)
+        .its('stderr').should('be.empty')
+
+      cy.exec('pwd')
+        .its('code').should('eq', 0)
+    }
+  })
+
+  it('cy.focused() - get the DOM element that has focus', () => {
+    // https://on.cypress.io/focused
+    cy.get('.misc-form').find('#name').click()
+    cy.focused().should('have.id', 'name')
+
+    cy.get('.misc-form').find('#description').click()
+    cy.focused().should('have.id', 'description')
+  })
+
+  context('Cypress.Screenshot', function () {
+    it('cy.screenshot() - take a screenshot', () => {
+      // https://on.cypress.io/screenshot
+      cy.screenshot('my-image')
+    })
+
+    it('Cypress.Screenshot.defaults() - change default config of screenshots', function () {
+      Cypress.Screenshot.defaults({
+        blackout: ['.foo'],
+        capture: 'viewport',
+        clip: { x: 0, y: 0, width: 200, height: 200 },
+        scale: false,
+        disableTimersAndAnimations: true,
+        screenshotOnRunFailure: true,
+        onBeforeScreenshot () { },
+        onAfterScreenshot () { },
+      })
+    })
+  })
+
+  it('cy.wrap() - wrap an object', () => {
+    // https://on.cypress.io/wrap
+    cy.wrap({ foo: 'bar' })
+      .should('have.property', 'foo')
+      .and('include', 'bar')
+  })
+})

cypress/e2e/2-advanced-examples/navigation.cy.js

@@ -0,0 +1,56 @@
+/// <reference types="cypress" />
+
+context('Navigation', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io')
+    cy.get('.navbar-nav').contains('Commands').click()
+    cy.get('.dropdown-menu').contains('Navigation').click()
+  })
+
+  it('cy.go() - go back or forward in the browser\'s history', () => {
+    // https://on.cypress.io/go
+
+    cy.location('pathname').should('include', 'navigation')
+
+    cy.go('back')
+    cy.location('pathname').should('not.include', 'navigation')
+
+    cy.go('forward')
+    cy.location('pathname').should('include', 'navigation')
+
+    // clicking back
+    cy.go(-1)
+    cy.location('pathname').should('not.include', 'navigation')
+
+    // clicking forward
+    cy.go(1)
+    cy.location('pathname').should('include', 'navigation')
+  })
+
+  it('cy.reload() - reload the page', () => {
+    // https://on.cypress.io/reload
+    cy.reload()
+
+    // reload the page without using the cache
+    cy.reload(true)
+  })
+
+  it('cy.visit() - visit a remote url', () => {
+    // https://on.cypress.io/visit
+
+    // Visit any sub-domain of your current domain
+
+    // Pass options to the visit
+    cy.visit('https://example.cypress.io/commands/navigation', {
+      timeout: 50000, // increase total time for the visit to resolve
+      onBeforeLoad (contentWindow) {
+        // contentWindow is the remote page's window object
+        expect(typeof contentWindow === 'object').to.be.true
+      },
+      onLoad (contentWindow) {
+        // contentWindow is the remote page's window object
+        expect(typeof contentWindow === 'object').to.be.true
+      },
+    })
+    })
+})

cypress/e2e/2-advanced-examples/network_requests.cy.js

@@ -0,0 +1,163 @@
+/// <reference types="cypress" />
+
+context('Network Requests', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/network-requests')
+  })
+
+  // Manage HTTP requests in your app
+
+  it('cy.request() - make an XHR request', () => {
+    // https://on.cypress.io/request
+    cy.request('https://jsonplaceholder.cypress.io/comments')
+      .should((response) => {
+        expect(response.status).to.eq(200)
+        // the server sometimes gets an extra comment posted from another machine
+        // which gets returned as 1 extra object
+        expect(response.body).to.have.property('length').and.be.oneOf([500, 501])
+        expect(response).to.have.property('headers')
+        expect(response).to.have.property('duration')
+      })
+  })
+
+  it('cy.request() - verify response using BDD syntax', () => {
+    cy.request('https://jsonplaceholder.cypress.io/comments')
+    .then((response) => {
+      // https://on.cypress.io/assertions
+      expect(response).property('status').to.equal(200)
+      expect(response).property('body').to.have.property('length').and.be.oneOf([500, 501])
+      expect(response).to.include.keys('headers', 'duration')
+    })
+  })
+
+  it('cy.request() with query parameters', () => {
+    // will execute request
+    // https://jsonplaceholder.cypress.io/comments?postId=1&id=3
+    cy.request({
+      url: 'https://jsonplaceholder.cypress.io/comments',
+      qs: {
+        postId: 1,
+        id: 3,
+      },
+    })
+    .its('body')
+    .should('be.an', 'array')
+    .and('have.length', 1)
+    .its('0') // yields first element of the array
+    .should('contain', {
+      postId: 1,
+      id: 3,
+    })
+  })
+
+  it('cy.request() - pass result to the second request', () => {
+    // first, let's find out the userId of the first user we have
+    cy.request('https://jsonplaceholder.cypress.io/users?_limit=1')
+      .its('body') // yields the response object
+      .its('0') // yields the first element of the returned list
+      // the above two commands its('body').its('0')
+      // can be written as its('body.0')
+      // if you do not care about TypeScript checks
+      .then((user) => {
+        expect(user).property('id').to.be.a('number')
+        // make a new post on behalf of the user
+        cy.request('POST', 'https://jsonplaceholder.cypress.io/posts', {
+          userId: user.id,
+          title: 'Cypress Test Runner',
+          body: 'Fast, easy and reliable testing for anything that runs in a browser.',
+        })
+      })
+      // note that the value here is the returned value of the 2nd request
+      // which is the new post object
+      .then((response) => {
+        expect(response).property('status').to.equal(201) // new entity created
+        expect(response).property('body').to.contain({
+          title: 'Cypress Test Runner',
+        })
+
+        // we don't know the exact post id - only that it will be > 100
+        // since JSONPlaceholder has built-in 100 posts
+        expect(response.body).property('id').to.be.a('number')
+          .and.to.be.gt(100)
+
+        // we don't know the user id here - since it was in above closure
+        // so in this test just confirm that the property is there
+        expect(response.body).property('userId').to.be.a('number')
+      })
+  })
+
+  it('cy.request() - save response in the shared test context', () => {
+    // https://on.cypress.io/variables-and-aliases
+    cy.request('https://jsonplaceholder.cypress.io/users?_limit=1')
+      .its('body').its('0') // yields the first element of the returned list
+      .as('user') // saves the object in the test context
+      .then(function () {
+        // NOTE 👀
+        //  By the time this callback runs the "as('user')" command
+        //  has saved the user object in the test context.
+        //  To access the test context we need to use
+        //  the "function () { ... }" callback form,
+        //  otherwise "this" points at a wrong or undefined object!
+        cy.request('POST', 'https://jsonplaceholder.cypress.io/posts', {
+          userId: this.user.id,
+          title: 'Cypress Test Runner',
+          body: 'Fast, easy and reliable testing for anything that runs in a browser.',
+        })
+        .its('body').as('post') // save the new post from the response
+      })
+      .then(function () {
+        // When this callback runs, both "cy.request" API commands have finished
+        // and the test context has "user" and "post" objects set.
+        // Let's verify them.
+        expect(this.post, 'post has the right user id').property('userId').to.equal(this.user.id)
+      })
+  })
+
+  it('cy.intercept() - route responses to matching requests', () => {
+    // https://on.cypress.io/intercept
+
+    let message = 'whoa, this comment does not exist'
+
+    // Listen to GET to comments/1
+    cy.intercept('GET', '**/comments/*').as('getComment')
+
+    // we have code that gets a comment when
+    // the button is clicked in scripts.js
+    cy.get('.network-btn').click()
+
+    // https://on.cypress.io/wait
+    cy.wait('@getComment').its('response.statusCode').should('be.oneOf', [200, 304])
+
+    // Listen to POST to comments
+    cy.intercept('POST', '**/comments').as('postComment')
+
+    // we have code that posts a comment when
+    // the button is clicked in scripts.js
+    cy.get('.network-post').click()
+    cy.wait('@postComment').should(({ request, response }) => {
+      expect(request.body).to.include('email')
+      expect(request.headers).to.have.property('content-type')
+      expect(response && response.body).to.have.property('name', 'Using POST in cy.intercept()')
+    })
+
+    // Stub a response to PUT comments/ ****
+    cy.intercept({
+      method: 'PUT',
+      url: '**/comments/*',
+    }, {
+      statusCode: 404,
+      body: { error: message },
+      headers: { 'access-control-allow-origin': '*' },
+      delayMs: 500,
+    }).as('putComment')
+
+    // we have code that puts a comment when
+    // the button is clicked in scripts.js
+    cy.get('.network-put').click()
+
+    cy.wait('@putComment')
+
+    // our 404 statusCode logic in scripts.js executed
+    cy.get('.network-put-comment').should('contain', message)
+  })
+})

cypress/e2e/2-advanced-examples/querying.cy.js

@@ -0,0 +1,114 @@
+/// <reference types="cypress" />
+
+context('Querying', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/querying')
+  })
+
+  // The most commonly used query is 'cy.get()', you can
+  // think of this like the '$' in jQuery
+
+  it('cy.get() - query DOM elements', () => {
+    // https://on.cypress.io/get
+
+    cy.get('#query-btn').should('contain', 'Button')
+
+    cy.get('.query-btn').should('contain', 'Button')
+
+    cy.get('#querying .well>button:first').should('contain', 'Button')
+    //              ↲
+    // Use CSS selectors just like jQuery
+
+    cy.get('[data-test-id="test-example"]').should('have.class', 'example')
+
+    // 'cy.get()' yields jQuery object, you can get its attribute
+    // by invoking `.attr()` method
+    cy.get('[data-test-id="test-example"]')
+      .invoke('attr', 'data-test-id')
+      .should('equal', 'test-example')
+
+    // or you can get element's CSS property
+    cy.get('[data-test-id="test-example"]')
+      .invoke('css', 'position')
+      .should('equal', 'static')
+
+    // or use assertions directly during 'cy.get()'
+    // https://on.cypress.io/assertions
+    cy.get('[data-test-id="test-example"]')
+      .should('have.attr', 'data-test-id', 'test-example')
+      .and('have.css', 'position', 'static')
+  })
+
+  it('cy.contains() - query DOM elements with matching content', () => {
+    // https://on.cypress.io/contains
+    cy.get('.query-list')
+      .contains('bananas')
+      .should('have.class', 'third')
+
+    // we can pass a regexp to `.contains()`
+    cy.get('.query-list')
+      .contains(/^b\w+/)
+      .should('have.class', 'third')
+
+    cy.get('.query-list')
+      .contains('apples')
+      .should('have.class', 'first')
+
+    // passing a selector to contains will
+    // yield the selector containing the text
+    cy.get('#querying')
+      .contains('ul', 'oranges')
+      .should('have.class', 'query-list')
+
+    cy.get('.query-button')
+      .contains('Save Form')
+      .should('have.class', 'btn')
+  })
+
+  it('.within() - query DOM elements within a specific element', () => {
+    // https://on.cypress.io/within
+    cy.get('.query-form').within(() => {
+      cy.get('input:first').should('have.attr', 'placeholder', 'Email')
+      cy.get('input:last').should('have.attr', 'placeholder', 'Password')
+    })
+  })
+
+  it('cy.root() - query the root DOM element', () => {
+    // https://on.cypress.io/root
+
+    // By default, root is the document
+    cy.root().should('match', 'html')
+
+    cy.get('.query-ul').within(() => {
+      // In this within, the root is now the ul DOM element
+      cy.root().should('have.class', 'query-ul')
+    })
+  })
+
+  it('best practices - selecting elements', () => {
+    // https://on.cypress.io/best-practices#Selecting-Elements
+    cy.get('[data-cy=best-practices-selecting-elements]').within(() => {
+      // Worst - too generic, no context
+      cy.get('button').click()
+
+      // Bad. Coupled to styling. Highly subject to change.
+      cy.get('.btn.btn-large').click()
+
+      // Average. Coupled to the `name` attribute which has HTML semantics.
+      cy.get('[name=submission]').click()
+
+      // Better. But still coupled to styling or JS event listeners.
+      cy.get('#main').click()
+
+      // Slightly better. Uses an ID but also ensures the element
+      // has an ARIA role attribute
+      cy.get('#main[role=button]').click()
+
+      // Much better. But still coupled to text content that may change.
+      cy.contains('Submit').click()
+
+      // Best. Insulated from all changes.
+      cy.get('[data-cy=submit]').click()
+    })
+  })
+})

cypress/e2e/2-advanced-examples/spies_stubs_clocks.cy.js

@@ -0,0 +1,203 @@
+/// <reference types="cypress" />
+// remove no check once Cypress.sinon is typed
+// https://github.com/cypress-io/cypress/issues/6720
+
+context('Spies, Stubs, and Clock', () => {
+  it('cy.spy() - wrap a method in a spy', () => {
+    // https://on.cypress.io/spy
+    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
+
+    const obj = {
+      foo () {},
+    }
+
+    const spy = cy.spy(obj, 'foo').as('anyArgs')
+
+    obj.foo()
+
+    expect(spy).to.be.called
+  })
+
+  it('cy.spy() retries until assertions pass', () => {
+    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
+
+    const obj = {
+      /**
+       * Prints the argument passed
+       * @param x {any}
+      */
+      foo (x) {
+        console.log('obj.foo called with', x)
+      },
+    }
+
+    cy.spy(obj, 'foo').as('foo')
+
+    setTimeout(() => {
+      obj.foo('first')
+    }, 500)
+
+    setTimeout(() => {
+      obj.foo('second')
+    }, 2500)
+
+    cy.get('@foo').should('have.been.calledTwice')
+  })
+
+  it('cy.stub() - create a stub and/or replace a function with stub', () => {
+    // https://on.cypress.io/stub
+    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
+
+    const obj = {
+      /**
+       * prints both arguments to the console
+       * @param a {string}
+       * @param b {string}
+      */
+      foo (a, b) {
+        console.log('a', a, 'b', b)
+      },
+    }
+
+    const stub = cy.stub(obj, 'foo').as('foo')
+
+    obj.foo('foo', 'bar')
+
+    expect(stub).to.be.called
+  })
+
+  it('cy.clock() - control time in the browser', () => {
+    // https://on.cypress.io/clock
+
+    // create the date in UTC so its always the same
+    // no matter what local timezone the browser is running in
+    const now = new Date(Date.UTC(2017, 2, 14)).getTime()
+
+    cy.clock(now)
+    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
+    cy.get('#clock-div').click()
+      .should('have.text', '1489449600')
+  })
+
+  it('cy.tick() - move time in the browser', () => {
+    // https://on.cypress.io/tick
+
+    // create the date in UTC so its always the same
+    // no matter what local timezone the browser is running in
+    const now = new Date(Date.UTC(2017, 2, 14)).getTime()
+
+    cy.clock(now)
+    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
+    cy.get('#tick-div').click()
+      .should('have.text', '1489449600')
+
+    cy.tick(10000) // 10 seconds passed
+    cy.get('#tick-div').click()
+      .should('have.text', '1489449610')
+  })
+
+  it('cy.stub() matches depending on arguments', () => {
+    // see all possible matchers at
+    // https://sinonjs.org/releases/latest/matchers/
+    const greeter = {
+      /**
+       * Greets a person
+       * @param {string} name
+      */
+      greet (name) {
+        return `Hello, ${name}!`
+      },
+    }
+
+    cy.stub(greeter, 'greet')
+      .callThrough() // if you want non-matched calls to call the real method
+      .withArgs(Cypress.sinon.match.string).returns('Hi')
+      .withArgs(Cypress.sinon.match.number).throws(new Error('Invalid name'))
+
+    expect(greeter.greet('World')).to.equal('Hi')
+    expect(() => greeter.greet(42)).to.throw('Invalid name')
+    expect(greeter.greet).to.have.been.calledTwice
+
+    // non-matched calls goes the actual method
+    expect(greeter.greet()).to.equal('Hello, undefined!')
+  })
+
+  it('matches call arguments using Sinon matchers', () => {
+    // see all possible matchers at
+    // https://sinonjs.org/releases/latest/matchers/
+    const calculator = {
+      /**
+       * returns the sum of two arguments
+       * @param a {number}
+       * @param b {number}
+      */
+      add (a, b) {
+        return a + b
+      },
+    }
+
+    const spy = cy.spy(calculator, 'add').as('add')
+
+    expect(calculator.add(2, 3)).to.equal(5)
+
+    // if we want to assert the exact values used during the call
+    expect(spy).to.be.calledWith(2, 3)
+
+    // let's confirm "add" method was called with two numbers
+    expect(spy).to.be.calledWith(Cypress.sinon.match.number, Cypress.sinon.match.number)
+
+    // alternatively, provide the value to match
+    expect(spy).to.be.calledWith(Cypress.sinon.match(2), Cypress.sinon.match(3))
+
+    // match any value
+    expect(spy).to.be.calledWith(Cypress.sinon.match.any, 3)
+
+    // match any value from a list
+    expect(spy).to.be.calledWith(Cypress.sinon.match.in([1, 2, 3]), 3)
+
+    /**
+     * Returns true if the given number is even
+     * @param {number} x
+     */
+    const isEven = (x) => x % 2 === 0
+
+    // expect the value to pass a custom predicate function
+    // the second argument to "sinon.match(predicate, message)" is
+    // shown if the predicate does not pass and assertion fails
+    expect(spy).to.be.calledWith(Cypress.sinon.match(isEven, 'isEven'), 3)
+
+    /**
+     * Returns a function that checks if a given number is larger than the limit
+     * @param {number} limit
+     * @returns {(x: number) => boolean}
+     */
+    const isGreaterThan = (limit) => (x) => x > limit
+
+    /**
+     * Returns a function that checks if a given number is less than the limit
+     * @param {number} limit
+     * @returns {(x: number) => boolean}
+     */
+    const isLessThan = (limit) => (x) => x < limit
+
+    // you can combine several matchers using "and", "or"
+    expect(spy).to.be.calledWith(
+      Cypress.sinon.match.number,
+      Cypress.sinon.match(isGreaterThan(2), '> 2').and(Cypress.sinon.match(isLessThan(4), '< 4')),
+    )
+
+    expect(spy).to.be.calledWith(
+      Cypress.sinon.match.number,
+      Cypress.sinon.match(isGreaterThan(200), '> 200').or(Cypress.sinon.match(3)),
+    )
+
+    // matchers can be used from BDD assertions
+    cy.get('@add').should('have.been.calledWith',
+      Cypress.sinon.match.number, Cypress.sinon.match(3))
+
+    // you can alias matchers for shorter test code
+    const { match: M } = Cypress.sinon
+
+    cy.get('@add').should('have.been.calledWith', M.number, M(3))
+  })
+})

cypress/e2e/2-advanced-examples/traversal.cy.js

@@ -0,0 +1,121 @@
+/// <reference types="cypress" />
+
+context('Traversal', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/traversal')
+  })
+
+  it('.children() - get child DOM elements', () => {
+    // https://on.cypress.io/children
+    cy.get('.traversal-breadcrumb')
+      .children('.active')
+      .should('contain', 'Data')
+  })
+
+  it('.closest() - get closest ancestor DOM element', () => {
+    // https://on.cypress.io/closest
+    cy.get('.traversal-badge')
+      .closest('ul')
+      .should('have.class', 'list-group')
+  })
+
+  it('.eq() - get a DOM element at a specific index', () => {
+    // https://on.cypress.io/eq
+    cy.get('.traversal-list>li')
+      .eq(1).should('contain', 'siamese')
+  })
+
+  it('.filter() - get DOM elements that match the selector', () => {
+    // https://on.cypress.io/filter
+    cy.get('.traversal-nav>li')
+      .filter('.active').should('contain', 'About')
+  })
+
+  it('.find() - get descendant DOM elements of the selector', () => {
+    // https://on.cypress.io/find
+    cy.get('.traversal-pagination')
+      .find('li').find('a')
+      .should('have.length', 7)
+  })
+
+  it('.first() - get first DOM element', () => {
+    // https://on.cypress.io/first
+    cy.get('.traversal-table td')
+      .first().should('contain', '1')
+  })
+
+  it('.last() - get last DOM element', () => {
+    // https://on.cypress.io/last
+    cy.get('.traversal-buttons .btn')
+      .last().should('contain', 'Submit')
+  })
+
+  it('.next() - get next sibling DOM element', () => {
+    // https://on.cypress.io/next
+    cy.get('.traversal-ul')
+      .contains('apples').next().should('contain', 'oranges')
+  })
+
+  it('.nextAll() - get all next sibling DOM elements', () => {
+    // https://on.cypress.io/nextall
+    cy.get('.traversal-next-all')
+      .contains('oranges')
+      .nextAll().should('have.length', 3)
+  })
+
+  it('.nextUntil() - get next sibling DOM elements until next el', () => {
+    // https://on.cypress.io/nextuntil
+    cy.get('#veggies')
+      .nextUntil('#nuts').should('have.length', 3)
+  })
+
+  it('.not() - remove DOM elements from set of DOM elements', () => {
+    // https://on.cypress.io/not
+    cy.get('.traversal-disabled .btn')
+      .not('[disabled]').should('not.contain', 'Disabled')
+  })
+
+  it('.parent() - get parent DOM element from DOM elements', () => {
+    // https://on.cypress.io/parent
+    cy.get('.traversal-mark')
+      .parent().should('contain', 'Morbi leo risus')
+  })
+
+  it('.parents() - get parent DOM elements from DOM elements', () => {
+    // https://on.cypress.io/parents
+    cy.get('.traversal-cite')
+      .parents().should('match', 'blockquote')
+  })
+
+  it('.parentsUntil() - get parent DOM elements from DOM elements until el', () => {
+    // https://on.cypress.io/parentsuntil
+    cy.get('.clothes-nav')
+      .find('.active')
+      .parentsUntil('.clothes-nav')
+      .should('have.length', 2)
+  })
+
+  it('.prev() - get previous sibling DOM element', () => {
+    // https://on.cypress.io/prev
+    cy.get('.birds').find('.active')
+      .prev().should('contain', 'Lorikeets')
+  })
+
+  it('.prevAll() - get all previous sibling DOM elements', () => {
+    // https://on.cypress.io/prevall
+    cy.get('.fruits-list').find('.third')
+      .prevAll().should('have.length', 2)
+  })
+
+  it('.prevUntil() - get all previous sibling DOM elements until el', () => {
+    // https://on.cypress.io/prevuntil
+    cy.get('.foods-list').find('#nuts')
+      .prevUntil('#veggies').should('have.length', 3)
+  })
+
+  it('.siblings() - get all sibling DOM elements', () => {
+    // https://on.cypress.io/siblings
+    cy.get('.traversal-pills .active')
+      .siblings().should('have.length', 2)
+  })
+})

cypress/e2e/2-advanced-examples/utilities.cy.js

@@ -0,0 +1,108 @@
+/// <reference types="cypress" />
+
+context('Utilities', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/utilities')
+  })
+
+  it('Cypress._ - call a lodash method', () => {
+    // https://on.cypress.io/_
+    cy.request('https://jsonplaceholder.cypress.io/users')
+      .then((response) => {
+        let ids = Cypress._.chain(response.body).map('id').take(3).value()
+
+        expect(ids).to.deep.eq([1, 2, 3])
+      })
+  })
+
+  it('Cypress.$ - call a jQuery method', () => {
+    // https://on.cypress.io/$
+    let $li = Cypress.$('.utility-jquery li:first')
+
+    cy.wrap($li)
+      .should('not.have.class', 'active')
+      .click()
+      .should('have.class', 'active')
+  })
+
+  it('Cypress.Blob - blob utilities and base64 string conversion', () => {
+    // https://on.cypress.io/blob
+    cy.get('.utility-blob').then(($div) => {
+      // https://github.com/nolanlawson/blob-util#imgSrcToDataURL
+      // get the dataUrl string for the javascript-logo
+      return Cypress.Blob.imgSrcToDataURL('https://example.cypress.io/assets/img/javascript-logo.png', undefined, 'anonymous')
+      .then((dataUrl) => {
+        // create an <img> element and set its src to the dataUrl
+        let img = Cypress.$('<img />', { src: dataUrl })
+
+        // need to explicitly return cy here since we are initially returning
+        // the Cypress.Blob.imgSrcToDataURL promise to our test
+        // append the image
+        $div.append(img)
+
+        cy.get('.utility-blob img').click()
+          .should('have.attr', 'src', dataUrl)
+      })
+    })
+  })
+
+  it('Cypress.minimatch - test out glob patterns against strings', () => {
+    // https://on.cypress.io/minimatch
+    let matching = Cypress.minimatch('/users/1/comments', '/users/*/comments', {
+      matchBase: true,
+    })
+
+    expect(matching, 'matching wildcard').to.be.true
+
+    matching = Cypress.minimatch('/users/1/comments/2', '/users/*/comments', {
+      matchBase: true,
+    })
+
+    expect(matching, 'comments').to.be.false
+
+    // ** matches against all downstream path segments
+    matching = Cypress.minimatch('/foo/bar/baz/123/quux?a=b&c=2', '/foo/**', {
+      matchBase: true,
+    })
+
+    expect(matching, 'comments').to.be.true
+
+    // whereas * matches only the next path segment
+
+    matching = Cypress.minimatch('/foo/bar/baz/123/quux?a=b&c=2', '/foo/*', {
+      matchBase: false,
+    })
+
+    expect(matching, 'comments').to.be.false
+  })
+
+  it('Cypress.Promise - instantiate a bluebird promise', () => {
+    // https://on.cypress.io/promise
+    let waited = false
+
+    /**
+     * @return Bluebird<string>
+     */
+    function waitOneSecond () {
+      // return a promise that resolves after 1 second
+      return new Cypress.Promise((resolve, reject) => {
+        setTimeout(() => {
+          // set waited to true
+          waited = true
+
+          // resolve with 'foo' string
+          resolve('foo')
+        }, 1000)
+      })
+    }
+
+    cy.then(() => {
+      // return a promise to cy.then() that
+      // is awaited until it resolves
+      return waitOneSecond().then((str) => {
+        expect(str).to.eq('foo')
+        expect(waited).to.be.true
+      })
+    })
+  })
+})

cypress/e2e/2-advanced-examples/viewport.cy.js

@@ -0,0 +1,59 @@
+/// <reference types="cypress" />
+
+context('Viewport', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/viewport')
+  })
+
+  it('cy.viewport() - set the viewport size and dimension', () => {
+    // https://on.cypress.io/viewport
+
+    cy.get('#navbar').should('be.visible')
+    cy.viewport(320, 480)
+
+    // the navbar should have collapse since our screen is smaller
+    cy.get('#navbar').should('not.be.visible')
+    cy.get('.navbar-toggle').should('be.visible').click()
+    cy.get('.nav').find('a').should('be.visible')
+
+    // lets see what our app looks like on a super large screen
+    cy.viewport(2999, 2999)
+
+    // cy.viewport() accepts a set of preset sizes
+    // to easily set the screen to a device's width and height
+
+    // We added a cy.wait() between each viewport change so you can see
+    // the change otherwise it is a little too fast to see :)
+
+    cy.viewport('macbook-15')
+    cy.wait(200)
+    cy.viewport('macbook-13')
+    cy.wait(200)
+    cy.viewport('macbook-11')
+    cy.wait(200)
+    cy.viewport('ipad-2')
+    cy.wait(200)
+    cy.viewport('ipad-mini')
+    cy.wait(200)
+    cy.viewport('iphone-6+')
+    cy.wait(200)
+    cy.viewport('iphone-6')
+    cy.wait(200)
+    cy.viewport('iphone-5')
+    cy.wait(200)
+    cy.viewport('iphone-4')
+    cy.wait(200)
+    cy.viewport('iphone-3')
+    cy.wait(200)
+
+    // cy.viewport() accepts an orientation for all presets
+    // the default orientation is 'portrait'
+    cy.viewport('ipad-2', 'portrait')
+    cy.wait(200)
+    cy.viewport('iphone-4', 'landscape')
+    cy.wait(200)
+
+    // The viewport will be reset back to the default dimensions
+    // in between tests (the  default can be set in cypress.config.{js|ts})
+  })
+})

cypress/e2e/2-advanced-examples/waiting.cy.js

@@ -0,0 +1,31 @@
+/// <reference types="cypress" />
+
+context('Waiting', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/waiting')
+  })
+  // BE CAREFUL of adding unnecessary wait times.
+  // https://on.cypress.io/best-practices#Unnecessary-Waiting
+
+  // https://on.cypress.io/wait
+  it('cy.wait() - wait for a specific amount of time', () => {
+    cy.get('.wait-input1').type('Wait 1000ms after typing')
+    cy.wait(1000)
+    cy.get('.wait-input2').type('Wait 1000ms after typing')
+    cy.wait(1000)
+    cy.get('.wait-input3').type('Wait 1000ms after typing')
+    cy.wait(1000)
+  })
+
+  it('cy.wait() - wait for a specific route', () => {
+    // Listen to GET to comments/1
+    cy.intercept('GET', '**/comments/*').as('getComment')
+
+    // we have code that gets a comment when
+    // the button is clicked in scripts.js
+    cy.get('.network-btn').click()
+
+    // wait for GET comments/1
+    cy.wait('@getComment').its('response.statusCode').should('be.oneOf', [200, 304])
+  })
+})

cypress/e2e/2-advanced-examples/window.cy.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+
+context('Window', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/window')
+  })
+
+  it('cy.window() - get the global window object', () => {
+    // https://on.cypress.io/window
+    cy.window().should('have.property', 'top')
+  })
+
+  it('cy.document() - get the document object', () => {
+    // https://on.cypress.io/document
+    cy.document().should('have.property', 'charset').and('eq', 'UTF-8')
+  })
+
+  it('cy.title() - get the title', () => {
+    // https://on.cypress.io/title
+    cy.title().should('include', 'Kitchen Sink')
+  })
+})

cypress/e2e/GEMCO/Corresponsales/evitaDuplicidadFacturas.cy.js

@@ -0,0 +1,36 @@
+/// <reference types="cypress" />
+describe('empty spec', () => {
+  it('Heineken new traffic', () => {
+    cy.viewport(1400, 700);
+    cy.visit('');
+    cy.get('[name="Usuario"]').type('alfonso');
+    cy.get('[name="Contrasena"]').type('garcia');
+    cy.get('[type="submit"]').click();
+    cy.visit('/RptCorresponsalesTraficos?proc=1&modo=1');
+    cy.contains('Nuevo').click();
+    cy.get('select#CmbCliente').select('2206');
+    cy.get('select#CmbOpEntrada').select('1');
+    cy.get('select#CmbOpSalida').select('1');
+    cy.get('select#CmbIDCorresponsal').select('16');
+    cy.get('#BtnSave1').click();
+    cy.wait(2000);
+    cy.get('#LinkFacturas123').click();
+    let total = 123456;
+    const uuid = () => Cypress._.random(0, 1e6);
+    const id = uuid();
+    const Factura = `F${id}`;
+    const Pedido = `P${id}`;
+    Cypress._.times(5, (k) => {
+      total = total + 10;
+      cy.get('#Factura').clear();
+      cy.get('#ValorFacturaDls').clear();
+      cy.get('#Pedido').clear();
+      cy.get('#Factura').type(Factura);
+      cy.get('#ValorFacturaDls').type(total);
+      cy.get('#Pedido').type(Pedido);
+      cy.get('#IDProveedor').select('51');
+      cy.get('#BtnSave').click();
+      cy.wait(2000);
+    });
+  });
+});

cypress/e2e/GEMCO/Corresponsales/evitaDuplicidadFacturasTerceros.cy.js

@@ -0,0 +1,43 @@
+/// <reference types="cypress" />
+describe('empty spec', () => {
+  it('Heineken new traffic', () => {
+    cy.viewport(1400, 700);
+    cy.visit('');
+    cy.get('[name="Usuario"]').type('alfonso');
+    cy.get('[name="Contrasena"]').type('garcia');
+    cy.get('[type="submit"]').click();
+    cy.visit('/RptCorresponsalesTraficos?proc=1&modo=1');
+    cy.contains('Nuevo').click();
+    cy.get('select#CmbCliente').select('2206');
+    cy.get('select#CmbOpEntrada').select('1');
+    cy.get('select#CmbOpSalida').select('1');
+    cy.get('select#CmbIDCorresponsal').select('16');
+    cy.get('#BtnSave1').click();
+    cy.wait(2000);
+    cy.get('#LinkFacturasTerceros').click();
+    Cypress._.times(5, (k) => {
+      cy.get('#Factura').clear();
+      cy.get('#Factura').type('FA123456');
+      cy.get('select#CmbIDProveedor').select('1');
+      cy.get('#BtnSave').click();
+      cy.wait(1000);
+    });
+    /* let total = 123456;
+    const uuid = () => Cypress._.random(0, 1e6);
+    const id = uuid();
+    const Factura = `F${id}`;
+    const Pedido = `P${id}`;
+    Cypress._.times(5, (k) => {
+      total = total + 10;
+      cy.get('#Factura').clear();
+      cy.get('#ValorFacturaDls').clear();
+      cy.get('#Pedido').clear();
+      cy.get('#Factura').type(Factura);
+      cy.get('#ValorFacturaDls').type(total);
+      cy.get('#Pedido').type(Pedido);
+      cy.get('#IDProveedor').select('51');
+      cy.get('#BtnSave').click();
+      cy.wait(2000); 
+    });*/
+  });
+});

cypress/e2e/GEMCO/Heineken/newTraffic.cy.js

@@ -0,0 +1,60 @@
+/// <reference types="cypress" />
+describe("empty spec", () => {
+  it("Heineken new traffic", () => {
+    cy.viewport(1400, 700);
+    cy.visit("");
+    cy.get('[name="Usuario"]').type("alfonso");
+    cy.get('[name="Contrasena"]').type("garcia");
+    cy.get('[type="submit"]').click();
+    cy.visit("/RptCorresponsalesTraficos?proc=1&modo=1");
+    cy.contains("Nuevo").click();
+    cy.get("select#CmbCliente").select("2206");
+    cy.get("select#CmbOpEntrada").select("1");
+    cy.get("select#CmbOpSalida").select("1");
+    cy.get("select#CmbIDCorresponsal").select("16");
+    cy.get("#BtnSave1").click();
+    cy.wait(2000);
+    cy.get("#LinkFacturas123").click();
+    let total = 123456;
+    Cypress._.times(1, (k) => {
+      const uuid = () => Cypress._.random(0, 1e6);
+      const id = uuid();
+      const Factura = `F${id}`;
+      const Pedido = `P${id}`;
+      total = total + 10;
+      cy.get("#Factura").clear();
+      cy.get("#ValorFacturaDls").clear();
+      cy.get("#Pedido").clear();
+      cy.get("#Factura").type(Factura);
+      cy.get("#ValorFacturaDls").type(total);
+      cy.get("#Pedido").type(Pedido);
+      cy.get("#IDProveedor").select("51");
+      cy.get("#BtnSave").click();
+      cy.wait(2000);
+    });
+    cy.get("body").trigger("keydown", { keyCode: 27 });
+    cy.wait(1000);
+    cy.contains("Informacion corresponsal").click();
+    const uuid = () => Cypress._.random(0, 1e6);
+    const id = uuid();
+    cy.get("#CTrafico").type(`TRA${id}`);
+    cy.get("#FechaEntrada").type("2022-11-17");
+    cy.get("#FechaRevalidacionGuia").type("2022-11-17");
+    cy.get("#CFechaPago").type("2022-11-17");
+    Cypress._.times(10, (k) => {
+      cy.contains("Agregar").click();
+      cy.wait(1000);
+      cy.get("#CmbFacturas").select(1);
+      cy.get("#DescripcionMaterial").type(
+        "Esta es la descripcion del material"
+      );
+      cy.get("#FraccionArancelaria").type("FA123456");
+      cy.get("#ValorAduana").type("124578");
+      cy.get("#CDTA").type("224466", { force: true });
+      cy.get("#CIGI").type("446688", { force: true });
+      cy.get("#CIEPS").type("668800", { force: true });
+      cy.get("#BtnSavePartida").click();
+      cy.get("body").trigger("keydown", { keyCode: 27 });
+    });
+  });
+});

cypress/e2e/login.cy.ts

@@ -0,0 +1,13 @@
+/// <reference types="cypress" />
+
+describe('empty spec', () => {
+  it('log in ok', () => {
+    cy.visit('')
+    cy.get('[name="Usuario"]')
+      .type('alfonso')
+    cy.get('[name="Contrasena"]')
+      .type('garcia')
+    cy.get('[type="submit"]')
+      .click()
+  })
+})

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

cypress/support/e2e.ts

@@ -0,0 +1,21 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+require("cypress-plugin-tab");

package.json

@@ -0,0 +1,94 @@
+{
+  "name": "gemco",
+  "version": "0.1.0",
+  "homepage": ".",
+  "private": true,
+  "dependencies": {
+    "@reduxjs/toolkit": "^1.8.0",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.3",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.4.1",
+    "@types/node": "^16.11.26",
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.13",
+    "@types/react-redux": "^7.1.23",
+    "a-chart": "^1.1.4",
+    "ag-grid-community": "^27.0.1",
+    "ag-grid-react": "^27.0.1",
+    "apexcharts": "^3.35.3",
+    "axios": "^0.26.0",
+    "bootstrap": "^5.1.3",
+    "btoa": "^1.2.1",
+    "custom-item-select": "^1.2.3",
+    "env-cmd": "^10.1.0",
+    "file-saver": "^2.0.5",
+    "formik": "^2.2.9",
+    "jwt-decode": "^3.1.2",
+    "moment": "^2.29.1",
+    "qr-scanner": "^1.4.1",
+    "react": "^17.0.2",
+    "react-apexcharts": "^1.4.0",
+    "react-bootstrap": "^2.2.0",
+    "react-captchaa": "^1.0.13",
+    "react-currency-format": "^1.1.0",
+    "react-data-export": "^0.6.0",
+    "react-data-table-component": "^7.5.2",
+    "react-data-table-component-extensions": "^1.6.0",
+    "react-datepicker": "^4.8.0",
+    "react-datetime": "^3.1.1",
+    "react-dom": "^17.0.2",
+    "react-drag-drop-files": "^2.3.5",
+    "react-dropdown-select": "^4.9.0",
+    "react-dropzone": "^14.2.1",
+    "react-flexy-table": "^1.8.10",
+    "react-google-qrcode": "^1.0.3",
+    "react-grid-data": "^1.1.5",
+    "react-icons": "^4.3.1",
+    "react-number-format": "^5.1.2",
+    "react-print-components": "^1.0.4",
+    "react-redux": "^7.2.6",
+    "react-router-dom": "6",
+    "react-scripts": "5.0.0",
+    "react-to-print": "^2.14.7",
+    "react-webcam-qr-scanner.ts": "^1.0.4",
+    "redux": "^4.1.2",
+    "redux-starter-kit": "^2.0.0",
+    "string-hex": "^1.0.0",
+    "typescript": "^4.6.2",
+    "web-vitals": "^2.1.4",
+    "xlsx": "^0.18.4",
+    "yup": "^0.32.11"
+  },
+  "scripts": {
+    "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-prod": "env-cmd -f .env.production react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "cypress": "^11.0.1",
+    "cypress-plugin-tab": "^1.0.5"
+  }
+}

public/index.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Kanit&display=swap"
+      rel="stylesheet"
+    />
+    <title>GEMCO</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "GEMCO.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

src/.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "max_line_length": 120
+}

src/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/App.tsx

@@ -0,0 +1,120 @@
+import React, { useEffect, useState } from 'react'
+import { Outlet, useNavigate } from 'react-router-dom'
+import { Container, Form, Nav, Navbar, NavDropdown } from 'react-bootstrap'
+import ItemMenu from './Interfaces/Catalogos/IItemMenu'
+import 'ag-grid-community/dist/styles/ag-grid.css'
+import 'ag-grid-community/dist/styles/ag-theme-alpine.css'
+import usuariosServices from './Services/Catalogos/Usuarios.Services'
+import { logued } from './store/features/userStatusSlice/userStatusSlice'
+import { useSelector, useDispatch } from 'react-redux'
+import { RootState } from './store/store'
+import { MsgInformativo } from './Components/Utils/Toast/msgInformativo'
+import { IconContext } from 'react-icons'
+import { BsPersonCircle } from 'react-icons/bs'
+import Submenu from './Components/Submenu/Submenu'
+
+function App() {
+  const navigate = useNavigate()
+  const dispatch = useDispatch()
+  let _menu: ItemMenu[] = []
+  const [mainMenu, setMainMenu] = useState(_menu)
+  const userLogued = useSelector((state: RootState) => state.userStatus.value)
+  const [show, setShow] = useState(false)
+  const [msg, setMsg] = useState('')
+  const [header, setHeader] = useState('')
+  const msgColor = 'primary'
+  const menu = localStorage.getItem('menu') ? localStorage.getItem('menu') : ''
+  const User = () => {
+    const stickyValue = window.localStorage.getItem('User')
+    return stickyValue !== null ? JSON.parse(stickyValue) : ''
+  }
+  const [Depto, setDepto] = useState(() => {
+    const stickyValue = window.localStorage.getItem('Departamento')
+    return stickyValue !== null
+      ? JSON.parse(stickyValue).substring(0, 4) + '.'
+      : ''
+  })
+
+  useEffect(() => {
+    if (menu && userLogued) {
+      setMainMenu(JSON.parse(menu))
+    } else {
+      setMainMenu([])
+    }
+  }, [menu, userLogued])
+
+  useEffect(() => {
+    usuariosServices
+      .validate()
+      .then((response) => {
+        if (response.status === 200) {
+          dispatch(logued(true))
+        }
+      })
+      .catch((e: Error) => {
+        if (!window.location.href.indexOf('login')) {
+          localStorage.setItem('menu', '')
+          localStorage.setItem('token', '')
+          setHeader('Informativo')
+          setMsg('Su session ha expirado, necesita volver a loguerse')
+          setShow(true)
+          navigate('/')
+        }
+      })
+  }, [dispatch, navigate])
+
+  return (
+    <div className="App">
+      <Navbar className="custom-theme" bg="light" expand="lg">
+        <Container>
+          <Navbar.Brand href="/" style={{ color: '#FFFFFF' }}>
+            GEMCO
+          </Navbar.Brand>
+          <Navbar.Toggle aria-controls="basic-navbar-nav" />
+          <Navbar.Collapse id="basic-navbar-nav">
+            <Nav className="me-auto">
+              {mainMenu
+                ? mainMenu.map((itemMenu, index) => {
+                    if (itemMenu.padreId === 0) {
+                      return (
+                        <>
+                          <Submenu
+                            descripcion={itemMenu.descripcion}
+                            key={itemMenu.id}
+                            allItems={mainMenu}
+                            submenu={mainMenu.filter(function (item) {
+                              return item.padreId === itemMenu.id
+                            })}
+                          />
+                        </>
+                      )
+                    }
+                  })
+                : ''}
+            </Nav>
+            <Form className="d-flex">
+              {!userLogued ? (
+                <>
+                  <Nav.Link href="/#/login">Login</Nav.Link>
+                  {/* <Nav.Link href="/#/reset">Reset</Nav.Link> */}
+                </>
+              ) : (
+                <>
+                  <Nav.Link href="/#/logout">Logout</Nav.Link>
+                  <div style={{ paddingTop: '5px' }}>{User}&nbsp;</div>
+                  <IconContext.Provider value={{ size: '25px' }}>
+                    <BsPersonCircle />
+                  </IconContext.Provider>
+                  &nbsp;<div style={{ paddingTop: '5px' }}>{Depto}&nbsp;</div>
+                </>
+              )}
+            </Form>
+          </Navbar.Collapse>
+        </Container>
+      </Navbar>
+      <Outlet />
+    </div>
+  )
+}
+
+export default App

src/Classes/Corresponsales/CCorresponsalesTrafico.ts

@@ -0,0 +1,181 @@
+import ICorresponsalTrafico from "../../Interfaces/Corresponsales/ICorresponsalTrafico";
+
+export default class CCorresponsalesTrafico implements ICorresponsalTrafico {
+    id: number=0
+    folioGemco: string  
+    fechaRegistro?: string 
+    idUsuario: number=0  
+    idCliente: number=0  
+    tipoOperacion: number=0
+    opEntrada: number=0  
+    opSalida: number=0  
+    idCorresponsal: number=0  
+    bultos?: number  
+    kilos?: number  
+    estatus?: number  
+    trafico?: string 
+    aduana?: number  
+    patente?: number  
+    pedimento?: number  
+    clave?: string 
+    fechaPago?: string 
+    tipoCambio?: number  
+    valorAduanaMN?: number  
+    totalPagado?: number  
+    valorFacturaMN?: number  
+    cantidadFracciones?: number  
+    buque?: string 
+    valorFacturaDls?: number  
+    descripcionMercancia?: string 
+    observaciones?: string 
+    fechaDesaduanamiento: string
+    semaforoFiscal?: number  
+    noCuenta?: string 
+    fechaCuenta?: string 
+    tipoMercancia?: number  
+    ultimaActualizacion?: string
+    zipgemco?: string; 
+    zipCorresponsales?: string;
+    proceso: number;
+    rechazado: number;
+    idTabulador: number;
+    noRecti: number;
+    estatusCode: number;
+    activo?: number 
+
+    constructor() {
+    this.id=0  
+    this.folioGemco=''
+    this.fechaRegistro=''
+    this.idUsuario=0  
+    this.idCliente=0  
+    this.tipoOperacion=0
+    this.opEntrada=0  
+    this.opSalida=0  
+    this.idCorresponsal=0  
+    this.bultos=0  
+    this.kilos=0  
+    this.estatus=0  
+    this.trafico='' 
+    this.aduana=0  
+    this.patente=0  
+    this.pedimento=0  
+    this.clave='' 
+    this.fechaPago='' 
+    this.tipoCambio=0  
+    this.valorAduanaMN=0
+    this.totalPagado=0  
+    this.valorFacturaMN=0  
+    this.cantidadFracciones=0  
+    this.buque=''
+    this.valorFacturaDls=0  
+    this.descripcionMercancia='' 
+    this.observaciones='' 
+    this.fechaDesaduanamiento=''
+    this.semaforoFiscal=0  
+    this.noCuenta='' 
+    this.fechaCuenta='' 
+    this.tipoMercancia=0  
+    this.ultimaActualizacion=''
+    this.zipgemco='' 
+    this.zipCorresponsales=''
+    this.proceso=1
+    this.rechazado=1
+    this.idTabulador=0
+    this.noRecti=0;
+    this.estatusCode=0;
+    this.activo=1 
+    }
+
+    public getEmptyObject(): ICorresponsalTrafico {
+     return {
+         id: 0,  
+         folioGemco:'',
+         fechaRegistro: '',
+         idUsuario :0,  
+         idCliente :0,  
+         tipoOperacion :0,
+         opEntrada :0,  
+         opSalida:0,
+         idCorresponsal :0,  
+         bultos :0,  
+         kilos :0,  
+         estatus :0,  
+         trafico :'', 
+         aduana :0,  
+         patente :0,  
+         pedimento :0,  
+         clave :'', 
+         fechaPago :'', 
+         tipoCambio :0,  
+         valorAduanaMN :0,
+         totalPagado :0,  
+         valorFacturaMN :0,  
+         cantidadFracciones :0,  
+         buque :'',
+         valorFacturaDls :0,  
+         descripcionMercancia :'', 
+         observaciones :'', 
+         fechaDesaduanamiento :'',
+         semaforoFiscal :0,  
+         noCuenta :'', 
+         fechaCuenta :'', 
+         tipoMercancia :0,  
+         ultimaActualizacion :'', 
+         zipgemco:'', 
+         zipCorresponsales:'',
+         proceso:1,
+         rechazado:1,
+         idTabulador:0,
+         noRecti:0,
+         estatusCode:0,
+         activo :1 
+     }
+    }
+
+    public setObject(data: ICorresponsalTrafico): ICorresponsalTrafico {
+        return {
+            id: data.id,  
+            folioGemco: data.folioGemco,
+            fechaRegistro: data.fechaRegistro,
+            idUsuario : data.idUsuario,  
+            idCliente :data.idCliente,  
+            tipoOperacion :data.tipoOperacion,
+            opEntrada : data.opEntrada,  
+            opSalida: data.opSalida,
+            idCorresponsal : data.idCorresponsal,  
+            bultos :data.bultos,  
+            kilos : data.kilos,  
+            estatus : data.estatus,  
+            trafico : data.trafico, 
+            aduana : data.aduana,  
+            patente : data.patente,  
+            pedimento : data.pedimento,  
+            clave : data.clave, 
+            fechaPago : data.fechaPago, 
+            tipoCambio : data.tipoCambio,  
+            valorAduanaMN : data.valorAduanaMN,
+            totalPagado : data.totalPagado,  
+            valorFacturaMN : data.valorFacturaMN,  
+            cantidadFracciones : data.cantidadFracciones,  
+            buque : data.buque,
+            valorFacturaDls : data.valorFacturaDls,  
+            descripcionMercancia : data.descripcionMercancia, 
+            observaciones : data.observaciones, 
+            fechaDesaduanamiento : data.fechaDesaduanamiento,
+            semaforoFiscal : data.semaforoFiscal,  
+            noCuenta : data.noCuenta, 
+            fechaCuenta : data.fechaCuenta, 
+            tipoMercancia : data.tipoMercancia,  
+            ultimaActualizacion : data.ultimaActualizacion, 
+            zipgemco: data.zipgemco,
+            zipCorresponsales: data.zipCorresponsales,
+            proceso: data.proceso,
+            rechazado: data.rechazado,
+            idTabulador: data.idTabulador,
+            noRecti: data.noRecti,
+            estatusCode: data.estatusCode,
+            activo : data.activo 
+        }
+       }
+}

src/Components/AgenciaAduanal/AvisoCruce/AvisoCruce.tsx

@@ -0,0 +1,276 @@
+import React, { FC, useEffect, useState } from 'react'
+import { Alert, Card, Col, Row } from 'react-bootstrap'
+import QRCode from 'react-google-qrcode'
+import Header from '../../../images/AvisoCruceHeader.png'
+import Footer from '../../../images/AvisoCruceFooter.png'
+import PrintComponents from 'react-print-components'
+
+export interface IProps {}
+
+export default function AvisoCruce (props: IProps) {
+  const [AvisoCruce, setAvisoCruce] = useState('')
+  const [Validacion, setValidacion] = useState('')
+  const [Aduana, setAduana] = useState('')
+  const [Emision, setEmision] = useState('')
+  const [TipoOperacion, setTipoOperacion] = useState('')
+  const [TipoDocumento, setTipoDocumento] = useState('')
+  const [InformacionTipoDocumento, setInformacionTipoDocumento] = useState('')
+  const [ModalidadCruce, setModalidadCruce] = useState('')
+  const [FechaEmision, setFechaEmision] = useState('')
+  const [Contenedor, setContenedor] = useState('')
+  const [Candado, setCandado] = useState('')
+  const [URL, setURL] = useState<string>()
+
+  useEffect(() => {
+    setURL('https://sea-avc.anam.gob.mx/show/show/' + AvisoCruce)
+  }, [AvisoCruce])
+
+  function QRCodeBuilder(url: string) {
+    return <QRCode data={url} size={130} frame />
+  }
+
+  const showFile1 = (e: any) => {
+    e.preventDefault()
+    setAvisoCruce('')
+    setAduana('')
+    setEmision('')
+    setTipoOperacion('')
+    setTipoDocumento('')
+    setInformacionTipoDocumento('')
+    setModalidadCruce('')
+    setFechaEmision('')
+    setContenedor('')
+    setCandado('')
+    setURL('')
+    const reader = new FileReader()
+    reader.onload = async (e: any) => {
+      const text = e.target.result
+      const arr: string[] = text.split(/\r?\n/)
+      console.log(arr)
+      let Contenedores = '',
+        Candados = ''
+      for (var i = 0; i < arr.length; i++) {
+        // console.log(arr[i])
+        if (arr[i].includes('Aviso de cruce:')) {
+          setAvisoCruce(arr[i].replace('Aviso de cruce:', ''))
+        }
+        if (arr[i].includes('Emisión:')) setEmision(arr[i].replace('Emisión:', ''))
+        if (arr[i].includes('Aduana')) setAduana(arr[i].replace('Aduana:', ''))
+        if (arr[i].includes('Tipo de operación:')) setTipoOperacion(arr[i].replace('Tipo de operación:', ''))
+        if (arr[i].includes('Tipo de documento:')) setTipoDocumento(arr[i].replace('Tipo de documento:', ''))
+        if (arr[i].includes('|')) setInformacionTipoDocumento(arr[i])
+        if (arr[i].includes('Modalidad')) setModalidadCruce(arr[i])
+        if (arr[i].includes('Fecha de Emisi')) setFechaEmision(arr[i])
+        if (arr[i].includes('Contenedor-caja:')) {
+          Contenedores = ''
+          for (var ii = i; ii < arr.length; ii++) {
+            console.log('valor de caja contenedor ' + arr[ii])
+            if (arr[ii].length > 0) {
+              Contenedores += ',' + arr[ii]
+              console.log('Contenedores ' + Contenedores)
+            } else {
+              i = ii
+              Contenedores = Contenedores.replace(',Contenedor-caja:,', '')
+              setContenedor(Contenedores)
+              console.log('........................................Caja Contenedor value:' + Contenedores)
+              break
+            }
+          }
+        }
+        if (arr[i].includes('Candados:')) {
+          Candados = ''
+          for (var ii = i; ii < arr.length; ii++) {
+            console.log('valor de candados ' + arr[ii])
+            if (arr[ii].length > 0) {
+              Candados += ',' + arr[ii]
+              console.log('Candados ' + Candado)
+            } else {
+              i = ii
+              Candados = Candados.replace(',Candados:,', '')
+              setCandado(Candados)
+              console.log('........................................Candado value:' + Candados)
+              break
+            }
+          }
+        }
+      }
+    }
+    reader.readAsText(e.target.files[0])
+  }
+
+  const showFile2 = (e: any) => {
+    e.preventDefault()
+    const reader = new FileReader()
+    reader.onload = async (e: any) => {
+      const text = e.target.result
+      console.log(text)
+      setValidacion(text.replace('"', ''))
+    }
+    reader.readAsText(e.target.files[0])
+  }
+
+  const generatePDF = () => {}
+
+  return (
+    <div className='allScreen'>
+      {AvisoCruce === '' || Validacion === '' ? (
+        <div>
+          <Row>
+            <Col xs={12}>&nbsp;</Col>
+          </Row>
+          <Card>
+            <Card.Body>
+              <Row>
+                <Col>
+                  <Alert variant='secondary'></Alert>
+                  Proporcione el archivo AVC
+                </Col>
+                <Col>
+                  <Alert variant='secondary'>
+                    <input type='file' onChange={(e) => showFile1(e)} />
+                  </Alert>
+                </Col>
+                <Col xs={3}></Col>
+                <Col>Proporcione el archivo de validacion</Col>
+                <Col>
+                  <input type='file' onChange={(e) => showFile2(e)} />
+                </Col>
+              </Row>
+            </Card.Body>
+          </Card>
+        </div>
+      ) : (
+        <div>
+          <Row>
+            <Col xs={12}>&nbsp;</Col>
+          </Row>
+          {/*           <Row>
+            <Col xs={8}>
+              <Card style={{ textAlign: 'center', width: '1000px', height: '100%' }}>
+                <Card.Img variant='top' src={Header} />
+              </Card>
+            </Col>
+            <Col xs={4}></Col>
+          </Row> */}
+          <Row>
+            <Col xs={12}>&nbsp;</Col>
+          </Row>
+          <Row>
+            <Col xs={8}>
+              <PrintComponents trigger={<button>Print</button>}>
+                <table className='tableAvisoCruce allScreen'>
+                  <tr>
+                    <th colSpan={4} style={{ textAlign: 'center' }} className='tableAvisoCruceHeader'>
+                      AVISO DE CRUCE
+                    </th>
+                  </tr>
+                  <tr className='tableAvisoCruceHeader'>
+                    <th colSpan={3}>FOLIO AVISO DE CRUCE</th>
+                    <td>FECHA DE EMISIÓN</td>
+                  </tr>
+                  <tr>
+                    <th colSpan={3} className='tableAvisoCrucefNormal'>
+                      {AvisoCruce}
+                    </th>
+                    <td>{Emision}</td>
+                  </tr>
+                  <tr className='tableAvisoCruceHeader'>
+                    <td colSpan={2}>ADUANA</td>
+                    <td>TIPO OPERACIÓN</td>
+                    <td>TIPO DE DOCUMENTO</td>
+                  </tr>
+                  <tr>
+                    <td colSpan={2} rowSpan={3}>
+                      {Aduana}
+                    </td>
+                    <td>{TipoOperacion}</td>
+                    <td>{TipoDocumento}</td>
+                  </tr>
+                  <tr className='tableAvisoCruceHeader'>
+                    <td>MODALIDAD DE CRUCE</td>
+                    <td>TAG-GAFETE ÚNICO</td>
+                  </tr>
+                  <tr>
+                    <td>VEHICULAR</td>
+                    <td></td>
+                  </tr>
+                  <tr className='tableAvisoCruceHeader'>
+                    <th colSpan={3}>CONTENEDOR-CAJA</th>
+                    <td>CANDADOS</td>
+                  </tr>
+                  <tr>
+                    <th colSpan={3} className='tableAvisoCrucefNormal'>
+                      {Contenedor}
+                    </th>
+                    <td>{Candado}</td>
+                  </tr>
+                  <tr className='tableAvisoCruceHeader'>
+                    <th colSpan={4}>INFORMACIÓN DEL TIPO DE DOCUMENTO</th>
+                  </tr>
+                  <tr>
+                    <th colSpan={4} className='tableAvisoCrucefNormal'>
+                      {InformacionTipoDocumento}
+                    </th>
+                  </tr>
+                  <tr className='tableAvisoCruceHeader'>
+                    <th colSpan={4}>FOLIO FISCAL DEL CFDI CON COMPLEMENTO CARTA PORTE</th>
+                  </tr>
+                  <tr>
+                    <th colSpan={4} className='tableAvisoCrucefNormal'>
+                      &nbsp;
+                    </th>
+                  </tr>
+                  <tr className='tableAvisoCruceHeader'>
+                    <th colSpan={3}>DATOS ADICIONALES</th>
+                    <th colSpan={1}>CÓDIGO BIDIMENCIONAL QR</th>
+                  </tr>
+                  <tr>
+                    <th colSpan={3} className='tableAvisoCrucefNormal'>
+                      &nbsp;
+                    </th>
+                    <th colSpan={1}>
+                      <Row>
+                        <Col xs={3}>&nbsp;</Col>
+                        <Col xs={6}>
+                          <br />
+                          <img src={'https://chart.googleapis.com/chart?cht=qr&chl=' + URL + '&chs=200x200'} />
+                          <br />
+                        </Col>
+                        <Col xs={3}></Col>
+                      </Row>
+                    </th>
+                  </tr>
+                  <tr className='tableAvisoCruceHeader'>
+                    <th colSpan={4}>FOLIÓ DE VALICACIÓN DE LA AGENCIA</th>
+                  </tr>
+                  <tr>
+                    <th colSpan={4} className='tableAvisoCrucefNormal tdAvisoCruceWordWrap'>
+                      {Validacion}
+                    </th>
+                  </tr>
+                  <tr>
+                    <th colSpan={4}>
+                      <img src={Footer} />
+                    </th>
+                  </tr>
+                </table>
+              </PrintComponents>
+            </Col>
+            <Col xs={4}></Col>
+          </Row>
+          {/*  <Row>
+            <Col xs={12}>&nbsp;</Col>
+          </Row>
+          <Row>
+            <Col xs={8}>
+              <Card style={{ textAlign: 'center', width: '1000px', height: '100%' }}>
+                <Card.Img variant='top' src={Footer} />
+              </Card>
+            </Col>
+            <Col xs={4}></Col>
+          </Row> */}
+        </div>
+      )}
+    </div>
+  )
+}

src/Components/Bodega/FotosBodega.tsx

@@ -0,0 +1,149 @@
+import { FC, useState } from 'react'
+// Bootstrap components
+import { Button, Card, Col, Container, Form, Modal, Row } from 'react-bootstrap'
+// Interfaces
+import IFotosBodega from '../../Interfaces/IFotosBodega'
+//Services
+import archivoElectronicoServices from '../../Services/Catalogos/ArchivoElectronico.Services'
+// GUI components
+import '../../css/imageModal.css'
+import { MsgInformativo } from '../Utils/Toast/msgInformativo'
+import { TargetURL } from '../../Constants/TargetURL'
+const URL = new TargetURL()
+
+interface IProps {}
+export default function FotosBodega(props: IProps) {
+  const [API, setAPI] = useState(URL.get() + '/ArchivoElectronico/getPictureContent?Nombre=')
+  const [Referencia, setReferencia] = useState('')
+  const [imageFullSize, setImageFullSize] = useState('')
+  const [show, setShow] = useState(false)
+  const [FileList, setFileList] = useState<Array<IFotosBodega>>([])
+  const [MsgShow, setMsgShow] = useState(false)
+  const [MsgTxt, setMsgTxt] = useState('')
+  const [MsgAlerta, setMsgAlerta] = useState('Alerta')
+  const [MsgColor, setMsgColor] = useState('primary')
+
+  function getPictureInfo() {
+    if (Referencia.length === 0) {
+      setMsgTxt('Proporcione la referencia por favor...')
+      setMsgShow(true)
+      return false
+    }
+    const data: IFotosBodega = {
+      id: 0,
+      nombre: null,
+      referencia: Referencia,
+      registrado: null,
+      proceso: null,
+      creado: null,
+      usuario: null,
+      comentarios: null,
+      activo: 1,
+    }
+    archivoElectronicoServices
+      .getInfoPicturesFromWarehouse(data)
+      .then((response) => {
+        setFileList(response.data)
+        console.log(response.data)
+      })
+      .catch((e: Error) => {
+        console.log(e)
+        return
+      })
+  }
+
+  function showFullSize(picture: any) {
+    setImageFullSize(picture)
+    setShow(true)
+  }
+
+  function getProcessName(proc: any): string {
+    let tipoProceso = ''
+    if (proc == 1) tipoProceso = 'CAJA LLEGO'
+    if (proc == 2) tipoProceso = 'RECIBO ASI LLEGO'
+    if (proc == 3) tipoProceso = 'REVISION'
+    if (proc == 4) tipoProceso = 'ASI SE FUE'
+    if (proc == 5) tipoProceso = 'DAÑOS SIN GEMCO'
+    if (proc == 6) tipoProceso = 'ETIQUETADO'
+    if (proc == 7) tipoProceso = 'MANIOBRAS ARCOSA'
+    return tipoProceso
+  }
+
+  return (
+    <div>
+      <Card>
+        <Card.Body>
+          <div className='row'>
+            <div className='col-md-4'></div>
+            <div className='col-md-2'>
+              <Form.Control
+                type='text'
+                name='Referencia'
+                placeholder='Proporcione la referencia'
+                title='Inicio'
+                alt='Inicio'
+                data-date-format='YYYY-mm-dd'
+                onChange={(e) => setReferencia(e.target.value)}
+              />
+            </div>
+            <div className='col'>
+              <Button
+                variant='primary'
+                onClick={() => {
+                  getPictureInfo()
+                }}
+              >
+                Ver fotos
+              </Button>
+            </div>
+            <div className='col-md-4'></div>
+          </div>
+        </Card.Body>
+      </Card>
+      <br />
+      <div>
+        <Container>
+          <Row xs={1} md={3} className='g-4'>
+            {FileList
+              ? FileList.map((picture, index) => (
+                  <Col>
+                    <Card style={{ width: '18rem' }}>
+                      <Card.Header className='text-center'>{picture.creado}</Card.Header>
+                      <Card.Body>
+                        <Card.Img
+                          variant='top'
+                          src={`${API + picture.nombre}`}
+                          onClick={() => showFullSize(picture.nombre)}
+                        />
+                        <h6 className='text-center'>{picture.comentarios}</h6>
+                      </Card.Body>
+                      <Card.Footer className='text-center' as='h5'>
+                        {getProcessName(picture.proceso)}
+                      </Card.Footer>
+                    </Card>
+                  </Col>
+                ))
+              : null}
+          </Row>
+        </Container>
+      </div>
+      <Modal show={show} centered={true} animation={true} onHide={() => setShow(false)} contentClassName='image-modal'>
+        <Modal.Header closeButton>
+          <Modal.Title id='example-custom-modal-styling-title'></Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <img src={`${API + imageFullSize}`} width='750' height='1000' className='justify-content-center' />
+        </Modal.Body>
+      </Modal>
+      <MsgInformativo
+        show={MsgShow}
+        msg={MsgTxt}
+        header={MsgAlerta}
+        msgColor={MsgColor}
+        closeToast={function (arg: boolean): void {
+          setMsgShow(false)
+        }}
+      />
+    </div>
+  )
+}

src/Components/Bodega/QRScanner.tsx

@@ -0,0 +1,38 @@
+import React, { FC, useState } from 'react'
+import { ContinuousQrScanner } from 'react-webcam-qr-scanner.ts'
+
+interface IProps {}
+
+/**
+ * @author
+ * @function @QRScanner
+ **/
+
+export const QRScanner: FC<IProps> = (props) => {
+  const [qrCode, setQrCode] = useState('')
+  const [shouldScan, setShouldScan] = useState(false)
+
+  function startScanner() {
+    setShouldScan(true)
+  }
+  function stopScanner() {
+    setShouldScan(false)
+  }
+
+  return (
+    <>
+      <p>
+        QR Code: <code>{qrCode}</code>
+      </p>
+      {!shouldScan ? (
+        <button onClick={startScanner}>Scan QR Code</button>
+      ) : (
+        <>
+          <button onClick={stopScanner}>Stop Scanning</button>
+          {/* onQrCode can be fired multiple times */}
+          <ContinuousQrScanner onQrCode={setQrCode} />
+        </>
+      )}
+    </>
+  )
+}

src/Components/Catalogos/CatCorresponsales/CatCorresponsales.tsx

@@ -0,0 +1,375 @@
+import React, { FC, useEffect, useState } from 'react'
+import { Alert, Button, Card, Col, Form, Modal, Row } from 'react-bootstrap'
+import { IconContext } from 'react-icons'
+import ICatCorresponsales from '../../../Interfaces/Catalogos/ICatCorresponsales'
+import CorresponsalesDataService from '../../../Services/Catalogos/Corresponsales.Services'
+import { MsgInformativo } from '../../Utils/Toast/msgInformativo'
+import { useDispatch, useSelector } from 'react-redux'
+import {
+  addCatCorresponsales,
+  deleteCatCorresponsales,
+} from '../../../store/features/CatCorresponsales/CatCorresponsalesSlice'
+import { RootState } from '../../../store/store'
+import DataTable from 'react-data-table-component'
+import { ControlledInput } from './ControlledInput/ControlledInput'
+import { FaEraser, FaTimesCircle } from 'react-icons/fa'
+import * as CurrencyFormat from 'react-currency-format'
+
+interface IProps {
+  canDelete: boolean
+}
+
+export const CatCorresponsales: FC<IProps> = (props) => {
+  const dispatch = useDispatch()
+  const [Depto, setDepto] = useState(() => {
+    const stickyValue = window.localStorage.getItem('Departamento')
+    return stickyValue !== null ? JSON.parse(stickyValue) : ''
+  })
+  const [filteredData, setFilteredData] = useState<ICatCorresponsales[]>([])
+  const mCorresponsales = useSelector((state: RootState) => state.CatCorresponsales.CatCorresponsales)
+  // const gridRef = React.useRef<any>(null)
+  const [header, setHeader] = useState('')
+  const [msgColor, setMsgColor] = React.useState('primary')
+  const [show, setShowMsg] = useState(false)
+  const [msg, setMsg] = useState('')
+  const [id, setId] = useState(0)
+  const [msgDialog, setMsgDialog] = useState(false)
+  //  const [IDCorresponsal, setIDCorresponsal] = useState(0)
+  const [Nombre, setNombre] = useState('')
+  const [Patente, setPatente] = useState(0)
+  const [Aduana, setAduana] = useState(0)
+  const [Correos, setCorreos] = useState('')
+
+  useEffect(() => {
+    CorresponsalesDataService.getAll()
+      .then((response) => {
+        setFilteredData(response.data)
+        console.log(response.data)
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+  }, [])
+
+  const columnsCorresponsales = [
+    {
+      name: 'id',
+      width: '5%',
+      selector: (row: ICatCorresponsales) => row.id,
+      sortable: true,
+    },
+    {
+      name: 'Corresponsal ...................................................................................................................................... Patente ...... Aduana ...... Correos',
+      width: '90%',
+      cell: (row: ICatCorresponsales) => <ControlledInput record={row} />,
+    },
+    {
+      name: 'Elimina',
+      width: '5%',
+      cell: (row: ICatCorresponsales) => (
+        <div
+          style={{ textAlign: 'center', cursor: 'pointer' }}
+          onClick={() => {
+            setId(row.id)
+            setNombre(row.nombre)
+            setPatente(row.patente)
+            setAduana(row.aduana)
+            setCorreos(row.correos)
+            setMsgDialog(true)
+          }}
+        >
+          <IconContext.Provider value={{ color: 'red', size: '25px' }}>
+            <FaTimesCircle />
+          </IconContext.Provider>
+        </div>
+      ),
+    },
+  ]
+
+  function deleteRow(row: ICatCorresponsales) {
+    setId(row.id)
+    setNombre(row.nombre)
+    setPatente(row.patente)
+    setAduana(row.aduana)
+    setMsgDialog(true)
+  }
+
+  const loadRow = (data: ICatCorresponsales) => {
+    setId(data.id)
+    setNombre(data.nombre)
+    setPatente(data.patente)
+    setAduana(data.aduana)
+    setCorreos(data.correos)
+  }
+
+  function Guardar() {
+    if (Patente < 999) {
+      setHeader('Error!')
+      setMsgColor('danger')
+      setMsg('La patente debe tener 4 digitos')
+      setShowMsg(true)
+      return false
+    }
+    if (Aduana < 99) {
+      setHeader('Error!')
+      setMsgColor('danger')
+      setMsg('La aduana debe tener 3 digitos')
+      setShowMsg(true)
+      return false
+    }
+    const data: ICatCorresponsales = {
+      id: id,
+      nombre: Nombre,
+      aduana: Aduana,
+      patente: Patente,
+      correos: Correos,
+    }
+    CorresponsalesDataService.Append(data)
+      .then((response) => {
+        if (response.status == 200) {
+          dispatch(addCatCorresponsales(response.data))
+          setMsgColor('primary')
+          setHeader('Confirmacion')
+          setMsg('La informacion se guardo exitosamente')
+          setShowMsg(true)
+        }
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+  }
+
+  function cleanForm() {
+    setId(0)
+    setNombre('')
+    setPatente(0)
+    setAduana(0)
+  }
+
+  const deleteItem = () => {
+    setMsgDialog(false)
+    CorresponsalesDataService.Delete(id)
+      .then((response) => {
+        if (response.status == 200) {
+          dispatch(deleteCatCorresponsales(id))
+          cleanForm()
+        }
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+
+    setNombre('')
+    setId(0)
+  }
+
+  return (
+    <div>
+      <Card className='labelSize13px'>
+        <Card.Body>
+          <Row
+            style={{
+              visibility: props.canDelete ? 'visible' : 'hidden',
+              height: props.canDelete ? '' : '0px',
+            }}
+          >
+            <Col xs={1}>
+              <Form.Label>Corresponsal</Form.Label>
+            </Col>
+            <Col xs={5}>
+              {/* <Form.Control
+                type='text'
+                id='Nombre'
+                size='sm'
+                value={Nombre}
+                pattern='[a-zA-Z ]*'
+                onChange={(e) => setNombre((v) => (e.target.validity.valid ? e.target.value : v))}
+              /> */}
+              <input
+                type='text'
+                className='form-control genericSelect'
+                name='Nombre'
+                id='Nombre'
+                style={{ height: '30px' }}
+                value={Nombre}
+                placeholder='Proporcione el nombre del corresponsal'
+                onChange={(e) => {
+                  setNombre(e.target.value)
+                }}
+                /*  onKeyDown={(e) => handleKeyDown(e)} */
+              />
+            </Col>
+            <Col xs={1}>
+              <Form.Label>Correos</Form.Label>
+            </Col>
+            <Col xs={5}>
+              <Form.Control
+                type='text'
+                id='Correos'
+                size='sm'
+                value={Correos}
+                onChange={(e) => setCorreos((v) => e.target.value)}
+              />
+            </Col>
+          </Row>
+          <Row
+            style={{
+              paddingTop: 5,
+              visibility: props.canDelete ? 'visible' : 'hidden',
+              height: props.canDelete ? '' : '0px',
+            }}
+          >
+            <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={2}>&nbsp;</Col>
+            <Col>
+              <Form.Label>Patente</Form.Label>
+            </Col>
+            <Col>
+              <CurrencyFormat
+                value={Patente}
+                displayType={Depto === 'Corresponsalias' ? 'input' : 'text'}
+                onValueChange={(values: any) => {
+                  const { formattedValue, value } = values
+                  setPatente(value)
+                }}
+                style={
+                  Depto === 'Corresponsalias'
+                    ? {
+                        fontSize: '18px',
+                        backgroundColor: '#F5FFED',
+                        border: '2px solid #25D05B',
+                        width: '80px',
+                        textAlign: 'right',
+                        borderRadius: '10px',
+                      }
+                    : {
+                        fontSize: '18px',
+                        backgroundColor: '#F5FFED',
+                        border: '2px solid #25D05B',
+                        width: '80px',
+                        textAlign: 'right',
+                        borderRadius: '10px',
+                        paddingRight: '5px',
+                        paddingLeft: '5px',
+                      }
+                }
+              />
+            </Col>
+            <Col>&nbsp;</Col>
+            <Col>
+              <Form.Label>Aduana</Form.Label>
+            </Col>
+            <Col>
+              <CurrencyFormat
+                value={Aduana}
+                displayType={Depto === 'Corresponsalias' ? 'input' : 'text'}
+                onValueChange={(values: any) => {
+                  const { formattedValue, value } = values
+                  setAduana(value)
+                }}
+                style={
+                  Depto === 'Corresponsalias'
+                    ? {
+                        fontSize: '18px',
+                        backgroundColor: '#F5FFED',
+                        border: '2px solid #25D05B',
+                        width: '60px',
+                        textAlign: 'right',
+                        borderRadius: '10px',
+                      }
+                    : {
+                        fontSize: '18px',
+                        backgroundColor: '#F5FFED',
+                        border: '2px solid #25D05B',
+                        width: '60px',
+                        textAlign: 'right',
+                        borderRadius: '10px',
+                        paddingRight: '5px',
+                        paddingLeft: '5px',
+                      }
+                }
+              />
+            </Col>
+            <Col xs={2}></Col>
+            <Col md='auto'>
+              <Button
+                variant='primary'
+                size='sm'
+                onClick={() => {
+                  Guardar()
+                }}
+              >
+                Guardar
+              </Button>
+            </Col>
+          </Row>
+          <Row style={{ paddingTop: 5 }}>
+            <DataTable
+              noHeader
+              defaultSortFieldId={'id'}
+              defaultSortAsc={true}
+              pagination
+              highlightOnHover
+              columns={columnsCorresponsales}
+              data={mCorresponsales}
+            />
+            <Col></Col>
+          </Row>
+        </Card.Body>
+      </Card>
+      <Modal show={msgDialog} onHide={() => setMsgDialog(false)} size='sm'>
+        <Modal.Body>
+          <Alert variant='primary'>
+            <b>¿Esta seguro de eliminar?</b>
+            <br />
+            <h5>
+              {Nombre} | Patente: {Patente} | Aduana {Aduana}
+            </h5>
+          </Alert>
+        </Modal.Body>
+        <Modal.Footer>
+          <Row>
+            <Col xs={6}>
+              <Button variant='secondary' onClick={() => setMsgDialog(false)} size='sm'>
+                Cerrar
+              </Button>
+            </Col>
+            <Col xs={6}>
+              <Button variant='primary' onClick={deleteItem} size='sm'>
+                Si
+              </Button>
+            </Col>
+          </Row>
+        </Modal.Footer>
+      </Modal>
+      <MsgInformativo
+        show={show}
+        msg={msg}
+        header={header}
+        msgColor={msgColor}
+        closeToast={() => {
+          setShowMsg(false)
+        }}
+      />
+    </div>
+  )
+}

src/Components/Catalogos/CatCorresponsales/ControlledInput/ControlledInput.tsx

@@ -0,0 +1,114 @@
+import React, { FC, useState } from 'react'
+import { useDispatch } from 'react-redux'
+import ICatCorresponsales from '../../../../Interfaces/Catalogos/ICatCorresponsales'
+import CorDataService from '../../../../Services/Catalogos/Corresponsales.Services'
+import { updateCatCorresponsales } from '../../../../store/features/CatCorresponsales/CatCorresponsalesSlice'
+import { MsgInformativo } from '../../../Utils/Toast/msgInformativo'
+
+interface IProps {
+  record: ICatCorresponsales
+}
+
+export const ControlledInput: FC<IProps> = (props) => {
+  const dispatch = useDispatch()
+  const [IDCorresponsal, setIDCorresponsal] = useState(props.record.id)
+  const [Corresponsal, setCorresponsal] = useState(props.record.nombre)
+  const [Patente, setPatente] = useState(props.record.patente)
+  const [Aduana, setAduana] = useState(props.record.aduana)
+  const [Correos, setCorreos] = useState(props.record.correos)
+  const [header, setHeader] = useState('')
+  const [msgColor, setMsgColor] = React.useState('primary')
+  const [show, setShowMsg] = useState(false)
+  const [msg, setMsg] = useState('')
+
+  const onChangeCor = (event: any) => {
+    setCorresponsal(event.target.value)
+  }
+
+  const onChangeAd = (event: any) => {
+    setAduana(event.target.value)
+  }
+  const onChangePat = (event: any) => {
+    setPatente(event.target.value)
+  }
+  const onChangeEmail = (event: any) => {
+    setCorreos(event.target.value)
+  }
+
+  const handleKeyDown = (event: any, mode: number) => {
+    if (event.key === 'Enter') {
+      if (isNaN(event.target.value) && mode === 1) {
+        alert('Valor no valido!')
+        return
+      }
+      const data: ICatCorresponsales = {
+        id: props.record.id,
+        nombre: Corresponsal,
+        patente: Patente,
+        aduana: Aduana,
+        correos: Correos,
+      }
+      CorDataService.Append(data)
+        .then((response) => {
+          if (response.status == 200) {
+            dispatch(updateCatCorresponsales(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 (
+    <div>
+      <input
+        value={Corresponsal}
+        onChange={onChangeCor}
+        disabled={false}
+        onKeyDown={(e) => handleKeyDown(e, 2)}
+        style={{ width: '450px', textAlign: 'left' }}
+      />
+      &nbsp; &nbsp; &nbsp;
+      <input
+        value={Patente}
+        onChange={onChangePat}
+        disabled={false}
+        onKeyDown={(e) => handleKeyDown(e, 1)}
+        style={{ width: '50px', textAlign: 'right' }}
+      />
+      &nbsp; &nbsp; &nbsp;
+      <input
+        value={Aduana}
+        onChange={onChangeAd}
+        disabled={false}
+        onKeyDown={(e) => handleKeyDown(e, 1)}
+        style={{ width: '30px', textAlign: 'right' }}
+      />
+      &nbsp; &nbsp; &nbsp;
+      <input
+        value={Correos}
+        onChange={onChangeEmail}
+        disabled={false}
+        onKeyDown={(e) => handleKeyDown(e, 2)}
+        style={{ width: '650px', textAlign: 'left' }}
+      />
+      <MsgInformativo
+        show={show}
+        msg={msg}
+        header={header}
+        msgColor={msgColor}
+        closeToast={() => {
+          setShowMsg(false)
+        }}
+      />
+    </div>
+  )
+}

src/Components/Catalogos/CatTabulador/CatTabulador.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 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, Form, Modal, Row } from 'react-bootstrap'
+import { IconContext } from 'react-icons'
+import 'react-data-table-component-extensions/dist/index.css'
+import { BsPlusSquareFill } from 'react-icons/bs'
+import IClientes from '../../../Interfaces/Catalogos/IClientes'
+import { FcTimeline } from 'react-icons/fc'
+import { FaEraser, FaTimesCircle } from 'react-icons/fa'
+
+interface IProps {}
+
+interface IselectedRows {
+  allSelected: boolean
+  selectedCount: number
+  selectedRows: any
+}
+
+export default function CatTabuladores (props: IProps) {
+  const [UserId, setUserId] = useState(() => {
+    const stickyValue = window.localStorage.getItem('UserId')
+    return stickyValue !== null ? JSON.parse(stickyValue) : 0
+  })
+  const [Tabulador, setTabulador] = useState(0)
+  const [Concepto, setConcepto] = useState(0)
+  const [Cliente, setCliente] = useState(0)
+  const [Clientes, setClientes] = useState<Array<IClientes>>()
+  const [NombreTabulador, setNombreTabulador] = useState('')
+  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 [DialogTabs, setDialogTabs] = useState(false)
+
+  const columnsConcepts = [
+    {
+      name: 'id',
+      selector: (row: ITabuladorConceptos) => row.id,
+      sortable: true,
+    },
+    {
+      name: 'Concepto',
+      width: '70%',
+      selector: (row: ITabuladorConceptos) => row.concepto,
+      sortable: true,
+    },
+    {
+      name: 'Costo',
+      cell: (row: ITabuladorConceptos) => (
+        <ControlledInput
+          id={row.id}
+          value={row.costo}
+          postCost={(id, value) => {
+            postCost(id, value)
+          }}
+        />
+      ),
+    },
+  ]
+
+  const columnsTabs = [
+    {
+      name: 'id',
+      selector: (row: ITabulador) => row.id,
+      sortable: true,
+    },
+    {
+      name: 'Nombre',
+      width: '70%',
+      cell: (row: ITabulador) => (
+        <div
+          style={{ width: '450px', cursor: 'pointer' }}
+          onClick={() => {
+            setTabulador(row.id)
+            setNombreTabulador(row.nombre)
+          }}
+        >
+          {row.nombre}
+        </div>
+      ),
+      sortable: true,
+    },
+    {
+      name: 'Elimina',
+      cell: (row: ITabulador) => (
+        <div
+          style={{ textAlign: 'center', cursor: 'pointer' }}
+          onClick={() => {
+            setTabulador(row.id)
+            setNombreTabulador(row.nombre)
+            setDialogTabs(true)
+          }}
+        >
+          <IconContext.Provider value={{ color: 'red', size: '25px' }}>
+            <FaTimesCircle />
+          </IconContext.Provider>
+        </div>
+      ),
+    },
+  ]
+
+  const postCost = (id: number, Cost: number) => {
+    const data: ITabuladorConceptos = {
+      id: id,
+      idTabulador: Tabulador,
+      idConcepto: Concepto,
+      concepto: '',
+      costo: Cost,
+      activo: 1,
+    }
+    CTabDetDataService.Append(data)
+      .then((response) => {
+        setDetalleConceptos(response.data)
+        setHeader('Confirmacion')
+        setMsg('La informacion se guardo corrctamente')
+        setShowMsg(true)
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+  }
+
+  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
+      })
+  }
+
+  useEffect(() => {
+    CTabDetDataService.getAllConcepts()
+      .then((response) => {
+        setCatConceptos(response.data)
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+    ClientesDataService.getAllClientes(UserId)
+      .then((response) => {
+        setClientes(response.data)
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+  }, [])
+
+  useEffect(() => {
+    CTabDetDataService.GetDetailByIdTab(Tabulador)
+      .then((response) => {
+        setDetalleConceptos(response.data)
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+    console.log(Tabulador)
+  }, [Tabulador])
+
+  useEffect(() => {
+    if (Cliente > 0) {
+      setNombreTabulador('')
+      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 saveForm = () => {
+    const data: ITabulador = {
+      id: Tabulador,
+      idCliente: Cliente,
+      nombre: NombreTabulador,
+    }
+    CTabDataService.Append(data)
+      .then((response) => {
+        if (response.status === 200) {
+          setHeader('Informativo')
+          setMsg('La informacion se guardo correctamente')
+          setShowMsg(true)
+          if (Tabulador > 0) {
+            let tmp = Tabuladores
+            let idx = tmp.findIndex((obj) => obj.id == Tabulador)
+            tmp[idx].nombre = NombreTabulador
+            setTabuladores(tmp)
+            setAllTabuladores(tmp)
+          } else {
+            setTabulador(response.data.id)
+            const tmp = [...Tabuladores, response.data]
+            setTabuladores(tmp)
+            setAllTabuladores(tmp)
+          }
+          return
+        }
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+  }
+
+  const addConcept = () => {
+    if (Tabulador === 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>
+      <Card>
+        <Card.Body>
+          <Card style={{ height: '100%' }}>
+            <Card.Header as='h4'>Tabuladores</Card.Header>
+            <Card.Body>
+              <Container fluid>
+                <Alert variant='primary'>
+                  <Row>
+                    <Col xs={1} style={{ paddingTop: '5px' }}>
+                      <h5>Cliente: </h5>
+                    </Col>
+                    <Col xs={5}>
+                      <h4>
+                        <Form.Control
+                          as='select'
+                          onChange={(e) => {
+                            setCliente(parseInt(e.target.value))
+                          }}
+                          className='form-select form-select-sm'
+                          style={{ fontSize: '18px' }}
+                        >
+                          <option value='0'>-SELECCIONE-</option>
+                          {Clientes
+                            ? Clientes.map((c) => {
+                                return (
+                                  <option value={c.sClave} key={c.sClave}>
+                                    {c.sRazonSocial}
+                                  </option>
+                                )
+                              })
+                            : null}
+                        </Form.Control>
+                      </h4>
+                    </Col>
+                    <Col
+                      xs={1}
+                      style={{ textAlign: 'right', paddingTop: '5px', cursor: 'pointer' }}
+                      onClick={() => {
+                        setTabulador(0)
+                        setNombreTabulador('')
+                      }}
+                    >
+                      <IconContext.Provider value={{ color: 'orange', size: '25px' }}>
+                        <FaEraser />
+                      </IconContext.Provider>
+                    </Col>
+                    <Col xs={1} style={{ paddingTop: '5px' }}>
+                      <div>
+                        <h5>Tabulador</h5>
+                      </div>
+                    </Col>
+                    <Col xs={3}>
+                      <h4>
+                        <Form.Control
+                          type='text'
+                          id='NombreTabulador'
+                          size='sm'
+                          value={NombreTabulador}
+                          onChange={(e) => {
+                            setNombreTabulador(e.target.value)
+                          }}
+                          placeholder='Nombre del tabulador'
+                          style={{ fontSize: '18px' }}
+                        />
+                      </h4>
+                    </Col>
+                    <Col>
+                      <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={6}>
+                    <Card style={{}}>
+                      <Card.Body>
+                        <Card.Subtitle className='mb-2 text-muted'>
+                          <Row>
+                            <Col xs={2} style={{ paddingTop: '8px' }}>
+                              Conceptos
+                            </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 /> {NombreTabulador}?
+        </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

@@ -0,0 +1,226 @@
+import { useEffect, useState } from 'react'
+import { Button, Col, Form, Modal, Row } from 'react-bootstrap'
+import { MsgInformativo } from '../../../../Utils/Toast/msgInformativo'
+import DTO2096Descripcion from '../../DTO/DTO2096Descripcion'
+import { RootState } from '../../../../../store/store'
+import {
+  populateInvoices,
+  addInvoice,
+  updateInvoice,
+  deleteInvoice
+} from '../../../../../store/features/Clientes/2096/AmazonInvoices'
+// Redux
+import { useDispatch, useSelector } from 'react-redux'
+import DSAmazon from '../../Services/Amazon.Services'
+import I2096Headers from '../../Interfaces/I2096Header'
+import I2096Detail from '../../Interfaces/I2096Detail'
+
+export interface IComboDescripcionProps {
+  IDInvoice: number
+  IDDetail: number
+  Prioridad?: boolean
+  DescripcionOriginal: string
+  Deshabilitado: boolean
+  ConfirmaDescripcion: number
+  Detail: I2096Detail
+}
+
+export function ComboDescripcion(props: IComboDescripcionProps) {
+  const dispatch = useDispatch()
+  const [Perfil, setPerfil] = useState(() => {
+    const stickyValue = window.localStorage.getItem('Perfil')
+    return stickyValue !== null ? JSON.parse(stickyValue) : 0
+  })
+  const mInvoices = useSelector(
+    (state: RootState) => state.AmazonInvoices.Invoice
+  )
+  const [Validacion, setValidacion] = useState(props.ConfirmaDescripcion)
+  const [UserChanged, setUserChanged] = useState(false)
+  const [showModal, setShowModal] = useState(false)
+  const [Descripcion, setDescripcion] = useState(props.DescripcionOriginal)
+  const [header, setHeader] = useState('')
+  const [show, setShowMsg] = useState(false)
+  const [msg, setMsg] = useState('')
+  const msgColor = 'primary'
+
+  const changeValidacion = (e: number) => {
+    setValidacion(e)
+    setUserChanged(true)
+  }
+
+  const saveDescripcion = () => {
+    const data: DTO2096Descripcion = {
+      id: props.IDDetail,
+      descripcion: Descripcion,
+      confirmaDescripcion: Validacion
+    }
+    DSAmazon.DescripcionSET(data)
+      .then((response) => {
+        UpdateInfo()
+        setShowModal(false)
+        return
+      })
+      .catch((e: Error) => {
+        alert('Ocurrio un error' + e.message.toString())
+      })
+  }
+
+  const refreshStore = (Invoice: I2096Headers, Detail: I2096Detail[]) => {
+    const updatedInvoice: I2096Headers = {
+      id: props.IDInvoice,
+      referencia: Invoice.referencia,
+      commercialInvoiceDate: Invoice.commercialInvoiceDate,
+      invoiceNumber: Invoice.invoiceNumber,
+      name: Invoice.name,
+      trailerNumber: Invoice.trailerNumber,
+      trailerId: Invoice.trailerId,
+      porOfLoading: Invoice.porOfLoading,
+      portOfEntry: Invoice.portOfEntry,
+      paymentsTerms: Invoice.paymentsTerms,
+      incoterms: Invoice.incoterms,
+      hawb: Invoice.hawb,
+      totalInvoiceQuantityUnitOfMeasure:
+        Invoice.totalInvoiceQuantityUnitOfMeasure,
+      totalInvoiceQuantity: Invoice.totalInvoiceQuantity,
+      totalInvoiceWeightUnitOfMeasure: Invoice.totalInvoiceWeightUnitOfMeasure,
+      totalInvoiceWeight: Invoice.totalInvoiceWeight,
+      totalInvoiceValueChargeOrAllowance:
+        Invoice.totalInvoiceValueChargeOrAllowance,
+      totalInvoiceValueCurrencyISOCode:
+        Invoice.totalInvoiceValueCurrencyISOCode,
+      totalInvoiceValueMonetaryAmount: Invoice.totalInvoiceValueMonetaryAmount,
+      footNote: Invoice.footNote,
+      archivo: Invoice.archivo,
+      fCreacion: Invoice.fCreacion,
+      clasificador: Invoice.clasificador,
+      noVuelta: Invoice.noVuelta,
+      estatus: Invoice.estatus,
+      max: true,
+      urgente: Invoice.urgente,
+      detail: Detail
+    }
+    dispatch(updateInvoice(updatedInvoice))
+  }
+
+  const UpdateInfo = () => {
+    const Invoice = mInvoices
+      .filter((el) => el.id === props.IDInvoice)
+      .map((el) => {
+        return el
+      })
+    const newDetail = Invoice[0].detail.map((el) => {
+      if (el.id === props.IDDetail) {
+        return {
+          ...el,
+          descripcionGEMCO: Descripcion
+        }
+      }
+      return el
+    })
+    refreshStore(Invoice[0], newDetail)
+  }
+
+  useEffect(() => {
+    if (UserChanged) {
+      if (Validacion === 2) {
+        setDescripcion('')
+        setShowModal(true)
+      } else if (Validacion === 1) {
+        setDescripcion(props.DescripcionOriginal)
+        const data: DTO2096Descripcion = {
+          id: props.IDDetail,
+          descripcion: Descripcion,
+          confirmaDescripcion: Validacion
+        }
+        setDescripcion(props.DescripcionOriginal)
+        DSAmazon.DescripcionSET(data)
+          .then((response) => {
+            UpdateInfo()
+            setShowModal(false)
+            /*   setHeader('Confirmacion')
+          setMsg('La descripcion se ha guardado correctamente')
+          setShowMsg(true) */
+            return
+          })
+          .catch((e: Error) => {
+            alert('Ocurrio un error' + e.message.toString())
+          })
+      }
+    }
+  }, [Validacion, UserChanged])
+
+  return (
+    <div>
+      <Form.Control
+        as="select"
+        disabled={
+          ((props.Deshabilitado || props.Detail.validaFraccionOriginal === 3) &&
+            Perfil !== 'Clasificador Lider') ||
+          (props.Detail.validaFraccionOriginal === 4 && !props.Prioridad)
+        }
+        onChange={(e) => changeValidacion(parseInt(e.target.value))}
+        value={Validacion}
+      >
+        {props.Detail.validaFraccionOriginal <= 1 ? (
+          <option value="0"> </option>
+        ) : (
+          ''
+        )}
+        {props.Detail.confirmaDescripcion <= 1 ? (
+          <option value="1"> = </option>
+        ) : (
+          ''
+        )}
+        <option value="2"> != </option>
+        {props.Detail.validaFraccionOriginal === 3 ? (
+          <option value="3"> Ok </option>
+        ) : (
+          ''
+        )}
+      </Form.Control>
+      <Modal
+        show={showModal}
+        onHide={() => {
+          setShowModal(false)
+        }}
+        size={'sm'}
+        dialogClassName={'modal-50w'}
+      >
+        <Modal.Body>
+          <Row>
+            <Col xs={2}>Descripcion GEMCO</Col>
+            <Col xs={8}>
+              <Form.Control
+                type="text"
+                as="textarea"
+                placeholder="Proporcione la descripcion correcta..."
+                id="ComentariosRechazo"
+                size="sm"
+                value={Descripcion}
+                onChange={(e) => setDescripcion(e.target.value)}
+              />
+            </Col>
+            <Col xs={1}>
+              <Button
+                onClick={() => {
+                  saveDescripcion()
+                }}
+              >
+                Guardar
+              </Button>
+            </Col>
+          </Row>
+        </Modal.Body>
+      </Modal>
+      <MsgInformativo
+        show={show}
+        msg={msg}
+        header={header}
+        msgColor={msgColor}
+        closeToast={() => {
+          setShowMsg(false)
+        }}
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,339 @@
+import { useCallback, useEffect, useState } from 'react'
+import { Button, Col, Form, Modal, Row } from 'react-bootstrap'
+import * as CurrencyFormat from 'react-currency-format'
+import { MsgInformativo } from '../../../../Utils/Toast/msgInformativo'
+import { RootState } from '../../../../../store/store'
+import { updateInvoice } from '../../../../../store/features/Clientes/2096/AmazonInvoices'
+// Redux
+import { useDispatch, useSelector } from 'react-redux'
+import DTO2096Fraccion from '../../DTO/DTO2096Fraccion'
+import DSAmazon from '../../Services/Amazon.Services'
+import I2096Headers from '../../Interfaces/I2096Header'
+import I2096Detail from '../../Interfaces/I2096Detail'
+import DTO2096FraccionDescripcion from '../../DTO/DTO2096FraccionDescripcion'
+
+export interface IComboFraccionProps {
+  IDInvoice: number
+  IDDetail: number
+  Prioridad?: boolean
+  FraccionOriginal: string
+  Deshabilitado: boolean
+  ConfirmaFraccion: number
+  Detail: I2096Detail
+}
+
+export function ComboFraccion(props: IComboFraccionProps) {
+  const dispatch = useDispatch()
+  const [Perfil, setPerfil] = useState(() => {
+    const stickyValue = window.localStorage.getItem('Perfil')
+    return stickyValue !== null ? JSON.parse(stickyValue) : 0
+  })
+  const mInvoices = useSelector(
+    (state: RootState) => state.AmazonInvoices.Invoice
+  )
+  const [Validacion, setValidacion] = useState(props.ConfirmaFraccion)
+  const [UserChanged, setUserChanged] = useState(false)
+  const [showModal, setShowModal] = useState(false)
+  const [Fraccion, setFraccion] = useState(
+    props.Detail.validaFraccionOriginal == 0 ? '' : props.FraccionOriginal
+  )
+  const [header, setHeader] = useState('')
+  const [DescripcionGEMCO, setDescripcionGEMCO] = useState(
+    props.Detail.pedimentoDescription
+  )
+  const [show, setShowMsg] = useState(false)
+  const [msg, setMsg] = useState('')
+  const [CumplimientoNormativo, setCumplimientoNormativo] = useState(
+    props.Detail.cumplimientoNormativo ? props.Detail.cumplimientoNormativo : ''
+  )
+  const [Comentarios, setComentarios] = useState(
+    props.Detail.comentarios
+      ? props.Detail.comentarios
+      : 'Clasificacion Incorrecta'
+  )
+  const msgColor = 'primary'
+
+  const refreshStore = (Invoice: I2096Headers, Detail: I2096Detail[]) => {
+    const updatedInvoice: I2096Headers = {
+      id: props.IDInvoice,
+      referencia: Invoice.referencia,
+      commercialInvoiceDate: Invoice.commercialInvoiceDate,
+      invoiceNumber: Invoice.invoiceNumber,
+      name: Invoice.name,
+      trailerNumber: Invoice.trailerNumber,
+      trailerId: Invoice.trailerId,
+      porOfLoading: Invoice.porOfLoading,
+      portOfEntry: Invoice.portOfEntry,
+      paymentsTerms: Invoice.paymentsTerms,
+      incoterms: Invoice.incoterms,
+      hawb: Invoice.hawb,
+      totalInvoiceQuantityUnitOfMeasure:
+        Invoice.totalInvoiceQuantityUnitOfMeasure,
+      totalInvoiceQuantity: Invoice.totalInvoiceQuantity,
+      totalInvoiceWeightUnitOfMeasure: Invoice.totalInvoiceWeightUnitOfMeasure,
+      totalInvoiceWeight: Invoice.totalInvoiceWeight,
+      totalInvoiceValueChargeOrAllowance:
+        Invoice.totalInvoiceValueChargeOrAllowance,
+      totalInvoiceValueCurrencyISOCode:
+        Invoice.totalInvoiceValueCurrencyISOCode,
+      totalInvoiceValueMonetaryAmount: Invoice.totalInvoiceValueMonetaryAmount,
+      footNote: Invoice.footNote,
+      archivo: Invoice.archivo,
+      fCreacion: Invoice.fCreacion,
+      clasificador: Invoice.clasificador,
+      noVuelta: Invoice.noVuelta,
+      estatus: Invoice.estatus,
+      max: true,
+      urgente: Invoice.urgente,
+      detail: Detail
+    }
+    dispatch(updateInvoice(updatedInvoice))
+  }
+
+  const UpdateInfo = (newData: I2096Detail) => {
+    console.log('new data= ' + JSON.stringify(newData))
+    const Invoice = mInvoices
+      .filter((el) => el.id === props.IDInvoice)
+      .map((el) => {
+        return el
+      })
+    const newDetail = Invoice[0].detail.map((el) => {
+      if (el.id === props.IDDetail) {
+        return {
+          ...el,
+          fraccionGEMCO: newData.fraccionGEMCO,
+          descripcionGEMCO: newData.descripcionGEMCO,
+          autorizado: newData.autorizado,
+          confirmaDescripcion: newData.confirmaDescripcion,
+          cumplimientoNormativo: newData.cumplimientoNormativo,
+          comentarios: newData.comentarios,
+          confirmaFraccion: newData.confirmaFraccion
+          /*,
+          checked: true*/
+        }
+      }
+      return el
+    })
+    //console.log('newDetail '+JSON.stringify(newDetail))
+    refreshStore(Invoice[0], newDetail)
+  }
+
+  const changeValidacion = (e: number) => {
+    setValidacion(e)
+    setUserChanged(true)
+  }
+
+  useEffect(() => {
+    if (UserChanged) {
+      if (Validacion === 2) {
+        setShowModal(true)
+      } else if (Validacion === 1) {
+        setFraccion(props.Detail.destinationHTSCode)
+        saveFraccion(props.Detail.destinationHTSCode)
+      }
+    }
+  }, [Validacion, UserChanged])
+
+  const saveFraccion = (Fracc: string) => {
+    Fracc = Fracc.replaceAll('.', '').replaceAll(' ', '')
+    if (Validacion === 2) {
+      if (Comentarios.length === 0) {
+        setHeader('Error')
+        setMsg(
+          'Antes de poder guardar la informacion es necesario que proporcione los comentarios'
+        )
+        setShowMsg(true)
+        return
+      }
+      if (DescripcionGEMCO.length === 0) {
+        setHeader('Error')
+        setMsg(
+          'Antes de poder guardar la informacion es necesario que proporcione la descripcion GEMCO'
+        )
+        setShowMsg(true)
+        return
+      }
+    }
+    if (!Fracc) {
+      setFraccion(Fracc)
+      alert('La fraccion no puede estar vacia')
+      return false
+    }
+    DSAmazon.ValidaFraccionGET(Fracc)
+      .then((response) => {
+        if (response.data.respuesta === 'Si') {
+          const data: DTO2096FraccionDescripcion = {
+            id: props.IDDetail,
+            fraccion: Fracc,
+            cumplimientoNormativo: CumplimientoNormativo,
+            comentarios: Comentarios,
+            descripcionGEMCO: DescripcionGEMCO
+          }
+          DSAmazon.SETFraccionDescripcion(data)
+            .then((response) => {
+              UpdateInfo(response.data)
+              setShowModal(false)
+              return
+            })
+            .catch((e: Error) => {
+              alert('Ocurrio un error' + e.message.toString())
+            })
+        } else {
+          alert(
+            'Esa fraccion no existe, favor de verificarla antes de poder guardar...'
+          )
+          setValidacion(0)
+          return
+        }
+      })
+      .catch((e: Error) => {
+        alert('Ocurrio un error' + e.message.toString())
+      })
+  }
+
+  return (
+    <div>
+      <Form.Control
+        as="select"
+        className="form-select form-select-sm"
+        disabled={
+          ((props.Deshabilitado || props.Detail.validaFraccionOriginal === 3) &&
+            Perfil !== 'Clasificador Lider') ||
+          (props.Detail.validaFraccionOriginal === 4 && !props.Prioridad)
+        }
+        onChange={(e) => changeValidacion(parseInt(e.target.value))}
+        value={Validacion}
+      >
+        {props.Detail.validaFraccionOriginal == 0 ? (
+          <>
+            <option value="0"> </option>
+            <option value="1"> = </option>
+            <option value="2"> != </option>
+          </>
+        ) : (
+          ''
+        )}
+        {props.Detail.validaFraccionOriginal == 1 ? (
+          <>
+            <option value="0"> </option>
+            <option value="1"> = </option>
+            <option value="2"> != </option>
+          </>
+        ) : (
+          ''
+        )}
+        {/*  <option value="2"> != </option> */}
+        {props.Detail.validaFraccionOriginal === 3 ? (
+          <option value="3"> Ok </option>
+        ) : (
+          ''
+        )}
+        {props.Detail.validaFraccionOriginal === 4 && props.Prioridad ? (
+          <>
+            <option value="0"> </option>
+            <option value="1"> = </option>
+            <option value="2"> != </option>
+          </>
+        ) : (
+          ''
+        )}
+      </Form.Control>
+      <Modal
+        show={showModal}
+        onHide={() => {
+          setShowModal(false)
+        }}
+        size={'sm'}
+        dialogClassName={'modal-50w'}
+      >
+        <Modal.Body>
+          <Row>
+            <Col xs={3}>Fraccion GEMCO</Col>
+            <Col xs={3}>
+              <CurrencyFormat
+                onValueChange={(values: any) => {
+                  const { value } = values
+                  setFraccion(value)
+                }}
+                format={'####.##.####'}
+                value={Fraccion}
+                displayType={'input'}
+                style={{
+                  fontSize: '18px',
+                  backgroundColor: '#F1EEF9',
+                  border: '2px solid #5923F6',
+                  color: '#5923F6',
+                  width: '120px',
+                  textAlign: 'right',
+                  borderRadius: '10px'
+                }}
+              />
+            </Col>
+            <Col xs={6}></Col>
+          </Row>
+          <Row style={{ paddingTop: '15px' }}>
+            <Col xs={3}>Cumplimiento normativo</Col>
+            <Col xs={8}>
+              <Form.Control
+                as="textarea"
+                id="CumplimientoNormativo"
+                size="sm"
+                value={CumplimientoNormativo}
+                onChange={(e) => setCumplimientoNormativo(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={
+                  Comentarios.length ? Comentarios : 'Clasificacion incorrecta.'
+                }
+                onChange={(e) => setComentarios(e.target.value)}
+              />
+            </Col>
+            <Col>&nbsp;</Col>
+          </Row>
+          <Row style={{ paddingTop: '15px' }}>
+            <Col xs={3}>Descripcion GEMCO</Col>
+            <Col xs={8}>
+              <Form.Control
+                as="textarea"
+                id="PedimentoDescripcion"
+                size="sm"
+                value={DescripcionGEMCO}
+              />
+            </Col>
+          </Row>
+          <Row style={{ paddingTop: '10px' }}>
+            <Col XS={9}></Col>
+            <Col xs={3}>
+              <Button
+                onClick={() => {
+                  saveFraccion(Fraccion)
+                }}
+              >
+                Guardar
+              </Button>
+            </Col>
+          </Row>
+        </Modal.Body>
+      </Modal>
+      <MsgInformativo
+        show={show}
+        msg={msg}
+        header={header}
+        msgColor={msgColor}
+        closeToast={() => {
+          setShowMsg(false)
+        }}
+      />
+    </div>
+  )
+}

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

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+export default interface DTO2096Estatus {
+    code: number,
+    respuesta: string,
+    estatus: number 
+} 

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

@@ -0,0 +1,5 @@
+export default interface DTO2096Fraccion {
+    id: number,
+    fraccion: string
+    confirmaFraccion: number
+}

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

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

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

@@ -0,0 +1,29 @@
+export default interface DTO2096InvoiceStatus {
+    id: number
+    referencia: string
+    commercialInvoiceDate: string
+    invoiceNumber: string
+    name: string
+    trailerNumber: string
+    trailerId: string
+    porOfLoading: string
+    portOfEntry: string
+    paymentsTerms: string
+    incoterms: string
+    hawb: string
+    totalInvoiceQuantityUnitOfMeasure: string
+    totalInvoiceQuantity: number
+    totalInvoiceWeightUnitOfMeasure: string
+    totalInvoiceWeight: string
+    totalInvoiceValueChargeOrAllowance: string
+    totalInvoiceValueCurrencyISOCode: string
+    totalInvoiceValueMonetaryAmount: string,
+    fPago: string,
+    patente: string,
+    aduana: string,
+    pedimento: string,
+    estatus: string,
+    idArchivoACK: number,
+    archivoACK: string,
+    fhArchivoACK: string    
+}

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

@@ -0,0 +1,6 @@
+export default interface DTO2096ItemAutoriza {
+    id: number,
+    autorizado: boolean,
+    cumplimientoNormativo: string,
+    comentarios: string
+}

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

@@ -0,0 +1,8 @@
+export default interface DTO2096LinkInvoice2Reference {
+    referencia: string,
+    facturas: number[] 
+}
+
+export interface arrInvoices {
+    idFactura: number
+}

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

@@ -0,0 +1,7 @@
+export default interface DTO2096NoParte {
+  id: number
+  fraccionGEMCO: string
+  subdivisionGEMCO: string
+  descripcionAgenteAduanal: string
+  usuario: number
+}

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

@@ -0,0 +1,9 @@
+export default interface DTO2096NoParteVerificacion {
+    factura: string,
+    fFactura: string,
+    referencia: string,
+    patente: string,
+    aduana: string,
+    pedimento: string,
+    fPago: string
+}

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

@@ -0,0 +1,5 @@
+export default interface DTO2096PerfilesParecidos {
+  idUsuario: number
+  nombre: string
+  perfil: string
+}

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

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

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

@@ -0,0 +1,4 @@
+export default interface DTO2096RELParteFactura {
+    parte: string,
+    facturas: string
+}

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

@@ -0,0 +1,28 @@
+export default interface DTO2096RptPayedOperations {
+    id: number
+    referencia: string
+    commercialInvoiceDate: string
+    invoiceNumber: string
+    name: string
+    trailerNumber: string
+    trailerId: string
+    porOfLoading: string
+    portOfEntry: string
+    paymentsTerms: string
+    incoterms: string
+    hawb: string
+    totalInvoiceQuantityUnitOfMeasure: string
+    totalInvoiceQuantity: number
+    totalInvoiceWeightUnitOfMeasure: string
+    totalInvoiceWeight: string
+    totalInvoiceValueChargeOrAllowance: string
+    totalInvoiceValueCurrencyISOCode: string
+    totalInvoiceValueMonetaryAmount: string,
+    fPago: string,
+    patente: string,
+    aduana: string,
+    pedimento: string,
+    idArchivoACK: number,
+    archivoACK: string,
+    fhArchivoACK: string
+}

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

@@ -0,0 +1,5 @@
+export default interface DTO2096SightLine {
+    id: number,
+    sightLine: boolean,
+    comentariosSightLine: string
+}

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

@@ -0,0 +1,6 @@
+export default interface DTO2096TraficoFieldsUpdate {
+    id: number,
+    UnitMeasure: string,
+    UnitOfMeasure: number,
+    UnitCost: number
+}

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

@@ -0,0 +1,46 @@
+export default interface I2096Detail {
+  id: number
+  idHeader: number
+  invoiceNumber: string
+  amazonShipmentReferenceId: string
+  partida: number
+  trailerId: string
+  itemId: string
+  itemIdType: string
+  itemDescription: string
+  pedimentoDescription: string
+  destinationHTSCode: string
+  validaFraccionOriginal: number
+  confirmaFraccion: number
+  fraccionGEMCO: string
+  confirmaDescripcion: number
+  descripcionGEMCO: string
+  sourceHTSCode: string
+  eccn: string
+  licEx: string
+  countryOfOrigin: string
+  productGroup: string
+  upc: string
+  brand: string
+  model: string
+  itemQuantityUnitOfMeasure: string
+  quantity: number
+  netWeightUnitOfMeasure: string
+  weightValue: string
+  actualUnitCostChargeOrAllowance: string
+  actualUnitCostCurrencyISOCode: string
+  actualUnitCostMonetaryAmount: string
+  totalUnitValueChargeOrAllowance: string
+  totalUnitValueCurrencyISOCode: string
+  totalUnitValueMonetaryAmount: string
+  archivo: string
+  fCreacion: string
+  estatus: number
+  autorizado: boolean
+  cumplimientoNormativo: string
+  comentarios: string
+  sightLine: boolean
+  comentariosSightLine: string
+  checked: boolean
+  activo: number
+}

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

@@ -0,0 +1,32 @@
+import Detail from './I2096Detail'
+
+export default interface I2096Headers {
+  id: number
+  referencia: string
+  commercialInvoiceDate: string
+  invoiceNumber: string
+  name: string
+  trailerNumber: string
+  trailerId: string
+  porOfLoading: string
+  portOfEntry: string
+  paymentsTerms: string
+  incoterms: string
+  hawb: string
+  totalInvoiceQuantityUnitOfMeasure: string
+  totalInvoiceQuantity: number
+  totalInvoiceWeightUnitOfMeasure: string
+  totalInvoiceWeight: string
+  totalInvoiceValueChargeOrAllowance: string
+  totalInvoiceValueCurrencyISOCode: string
+  totalInvoiceValueMonetaryAmount: string
+  footNote: string
+  archivo: string
+  fCreacion: string
+  clasificador: number
+  noVuelta: number
+  estatus: number
+  max: boolean
+  urgente: boolean
+  detail: Detail[]
+}

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

@@ -0,0 +1,18 @@
+export default interface I2096NoParte {
+  id: number
+  claveCliente: number
+  parte: string
+  claveProveedor: number
+  tipoOperacion: number
+  fraccion: string
+  subdivision: string
+  descripcionFactura: string
+  descripcionAgenteAduanal: string
+  fechaConfirmacion: string
+  paisOrigen: string
+  unidadMedidaFactura: string
+  unidadMedidaCOVE: string
+  fhActualizacion: string
+  usuarioActualizacion: number
+  activo: number
+}

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

@@ -0,0 +1,14 @@
+export default interface I2096NoParteLog {
+  id: number
+  idCatNoParte: number
+  noParte: number
+  fraccionGEMCO: string
+  subdivisionGEMCO: string
+  descripcionAgenteAduanal: string
+  fraccionOriginal: string
+  subdivisionOriginal: string
+  descripcionOriginal: string
+  usuario: number
+  fhCreacion: string
+  sUsuario: string
+}

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

@@ -0,0 +1,4 @@
+export default interface I2096PaisClave {
+    paisNom: string,
+    clave_a3: string
+}

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

@@ -0,0 +1,687 @@
+import * as React from 'react'
+import { Alert, Button, Card, Col, Form, Modal, Row } from 'react-bootstrap'
+import DataTable from 'react-data-table-component'
+import I2096NoParte from '../Interfaces/I2096NoParte'
+import AmazonDS from '../Services/Amazon.Services'
+import {
+  populateNoPartes,
+  updateNoPartes
+} from '../../../../store/features/Clientes/2096/AmazonNoPartes'
+import { RootState } from '../../../../store/store'
+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 I2096PaisClave from '../Interfaces/I2096PaisClave'
+import DTO2096PerfilesParecidos from '../DTO/DTO2096PerfilesParecidos'
+import DSAmazon from '../Services/Amazon.Services'
+import DTO2096NoParte from '../DTO/DTO2096NoParte'
+import I2096NoParteLog from '../Interfaces/I2096NoParteLog'
+import { HiClipboardCheck } from 'react-icons/hi'
+import DTO2096NoParteVerificacion from '../DTO/DTO2096NoParteVerificacion'
+export interface IAmazonNoPartesProps {}
+
+export default function AmazonNoPartes(props: IAmazonNoPartesProps) {
+  const dispatch = useDispatch()
+  const mNoPartes = useSelector(
+    (state: RootState) => state.AmazonNoPartes.NoPartes
+  )
+  const [UserId, setUserId] = useState(() => {
+    const stickyValue = window.localStorage.getItem('UserId')
+    return stickyValue !== null ? JSON.parse(stickyValue) : 0
+  })
+  const [NoParteLOG, setNoParteLOG] = useState<I2096NoParteLog[]>([])
+  const [PaisClaves, setPaisClaves] = useState<I2096PaisClave[]>([])
+  const [Data, setData] = useState<DTO2096PerfilesParecidos[]>([])
+  const [DataNoParteVerificacion, setDataNoParteVeriifcacion] = useState<DTO2096NoParteVerificacion[]>([])
+  const [ShowModal, setShowModal] = useState(false)
+  const [ShowModalLog, setShowModalLog] = useState(false)
+  const [ShowModalNoParteVerificacion, setShowModalNoParteVerificacion] = useState(false)
+  const [header, setHeader] = useState('')
+  const [msgColor, setMsgColor] = useState('primary')
+  const [show, setShowMsg] = useState(false)
+  const [msg, setMsg] = useState('')
+  const [MsgTime, setMsgTime] = useState(3000)
+  const [IDParte, setIDParte] = useState(0)
+  const [Parte, setParte] = useState('')
+  const [TipoOperacion, setTipoOperacion] = useState(0)
+  const [Fraccion, setFraccion] = useState('')
+  const [Subdivision, setSubdivision] = useState('')
+  const [DescripcionFactura, setDescripcionFactura] = useState('')
+  const [DescripcionAgenteAduanal, setDescripcionAgenteAduanal] = useState('')
+  const [PaisOrigen, setPaisOrigen] = useState('')
+  const [UMF, setUMF] = useState('')
+  const [Search, setSearch] = useState('')
+  const [FechaInsercion, setFechaInsercion] = useState('')
+  const [Clasificador, setClasificador] = useState('')
+
+  const colsNoPartes = [
+    {
+      name: 'id',
+      width: '80px',
+      cell: (row: I2096NoParte) => (
+        <div
+          style={{ cursor: 'pointer' }}
+          onClick={() => {
+            loadNoPartesLOG(row)
+          }}
+        >
+          {row.id}
+        </div>
+      ),
+      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' }}>
+                <HiClipboardCheck />
+              </IconContext.Provider>
+            </div>
+          </Col>
+        </Row>
+      ),
+      sortable: true
+    },
+    {
+      name: '',
+      width: '50px',
+      cell: (row: I2096NoParte) => (
+        <Row>
+          <Col>
+            <div
+              style={{
+                textAlign: 'left',
+                cursor: 'pointer'
+              }}
+              onClick={() => {
+                loadData(row)
+                setShowModal(true)
+              }}
+            >
+              <IconContext.Provider value={{ color: 'blue', size: '20px' }}>
+                <BsFillPencilFill />
+              </IconContext.Provider>
+            </div>
+          </Col>
+        </Row>
+      )
+    },
+    {
+      name: 'Cliente',
+      width: '90px',
+      selector: (row: I2096NoParte) => row.claveCliente,
+      sortable: true
+    },
+    {
+      name: 'Parte',
+      width: '110px',
+      cell: (row: I2096NoParte) => (
+        <div style={{ cursor: 'pointer' }} onClick={() => openLink(row.parte)}>
+          {row.parte}
+        </div>
+      ),
+      sortable: true
+    },
+    {
+      name: 'Proveedor',
+      width: '110px',
+      selector: (row: I2096NoParte) => row.claveProveedor,
+      sortable: true
+    },
+    {
+      name: 'Tipo Oper',
+      width: '110px',
+      selector: (row: I2096NoParte) =>
+        row.tipoOperacion === 1 ? 'IMPO' : 'EXPO',
+      sortable: true
+    },
+    {
+      name: 'Fraccion',
+      width: '110px',
+      selector: (row: I2096NoParte) => row.fraccion,
+      sortable: true
+    },
+    {
+      name: 'Subdivision',
+      width: '110px',
+      selector: (row: I2096NoParte) => row.subdivision,
+      sortable: true
+    },
+    {
+      name: 'UMF',
+      width: '80px',
+      selector: (row: I2096NoParte) => row.unidadMedidaFactura ? row.unidadMedidaFactura : '',
+      sortable: true
+    },
+    {
+      name: 'UMC',
+      width: '80px',
+      selector: (row: I2096NoParte) => row.unidadMedidaCOVE ? row.unidadMedidaCOVE : '',
+      sortable: true
+    },
+    {
+      name: 'Descripcion factura',
+      width: '400px',
+      selector: (row: I2096NoParte) => row.descripcionFactura,
+      wrap: true,
+      sortable: true
+    },
+    {
+      name: 'Descripcion Agente Aduanal',
+      width: '300px',
+      selector: (row: I2096NoParte) => row.descripcionAgenteAduanal,
+      wrap: true,
+      sortable: true
+    },
+    {
+      name: 'Fecha / Hora',
+      width: '220px',
+      selector: (row: I2096NoParte) => row.fhActualizacion,
+      wrap: true,
+      sortable: true
+    },
+    {
+      name: 'Usuario',
+      width: '300px',
+      selector: (row: I2096NoParte) => getUser(row.usuarioActualizacion),
+      wrap: true,
+      sortable: true
+    }
+  ]
+
+  const colsNoPartesLOG = [
+    {
+      name: 'Fracc GEMCO',
+      width: '120px',
+      cell: (row: I2096NoParteLog) => row.fraccionGEMCO,
+      sortable: true
+    },
+    {
+      name: 'Fracc Original',
+      width: '130px',
+      cell: (row: I2096NoParteLog) => row.fraccionOriginal ? row.fraccionOriginal : '',
+      sortable: true
+    },
+    {
+      name: 'NICO GEMCO',
+      width: '130px',
+      cell: (row: I2096NoParteLog) => row.subdivisionGEMCO,
+      sortable: true,
+      center: true
+    },
+    {
+      name: 'NICO Original',
+      width: '130px',
+      cell: (row: I2096NoParteLog) => row.subdivisionOriginal ? row.subdivisionOriginal : '',
+      sortable: true,
+      center: true
+    },
+    {
+      name: 'Desc A. A.',
+      width: '250px',
+      cell: (row: I2096NoParteLog) => row.descripcionAgenteAduanal,
+      wrap: true,
+      sortable: true,
+    },
+    {
+      name: 'Desc Original',
+      width: '250px',
+      cell: (row: I2096NoParteLog) => row.descripcionOriginal,
+      wrap: true,
+      sorteable: true
+    },
+ 
+    {
+      name: 'Fecha / Hora',
+      width: '200px',
+      cell: (row: I2096NoParteLog) => row.fhCreacion,
+      sortable: true
+    },
+    {
+      name: 'Usuario',
+      width: '300px',
+      cell: (row: I2096NoParteLog) => row.sUsuario ? row.sUsuario : '',
+      wrap: true,
+      sortable: true
+    }
+  ]
+
+  const colsNoPartesVerificacion = [
+    {
+      name: 'Factura',
+      width: '350px',
+      cell: (row: DTO2096NoParteVerificacion) => row.factura,
+      sortable: true
+    },
+    {
+      name: 'Fecha factura',
+      width: '130px',
+      cell: (row: DTO2096NoParteVerificacion) => row.fFactura,
+      sortable: true
+    },
+    {
+      name: 'Referencia',
+      width: '140px',
+      cell: (row: DTO2096NoParteVerificacion) => row.referencia,
+      sortable: true,
+      center: true
+    },
+    {
+      name: 'Patente',
+      width: '110px',
+      cell: (row: DTO2096NoParteVerificacion) => row.patente,
+      sortable: true,
+      center: true
+    },
+    {
+      name: 'Aduana',
+      width: '100px',
+      cell: (row: DTO2096NoParteVerificacion) => row.aduana,
+      wrap: true,
+      sortable: true,
+    },
+    {
+      name: 'Pedimento',
+      width: '150px',
+      cell: (row: DTO2096NoParteVerificacion) => row.pedimento,
+      wrap: true,
+      sorteable: true
+    }
+  ]
+
+
+  const openLink = (item: string) => {
+    window.open('https://www.amazon.com/dp/' + item)
+  }
+
+  const getUser = (Id: number) => {
+    const NoAsignado = 'NO ASIGNADO'
+    if (Id === 0) return NoAsignado
+    else if (Data.length) {
+      const Usuario = Data.filter((item) => item.idUsuario === Id)
+      return Usuario ? Usuario[0].nombre : NoAsignado
+    }
+    return NoAsignado
+  }
+
+  const loadProfiles = () => {
+    DSAmazon.PerfilesParecidosGet('_')
+      .then((response) => {
+        setData(response.data)
+      })
+      .catch((e: Error) => {
+        alert('Ocurrio un error' + e.message.toString())
+      })
+  }
+
+  const loadNoPartesLOG = (row: I2096NoParte) => {
+    loadData(row)
+    setShowModalLog(true)
+    DSAmazon.NoPartesLogGET(row.id)
+      .then((response) => {
+        setNoParteLOG(response.data)
+      })
+      .catch((e: Error) => {
+        alert('Ocurrio un error' + e.message.toString())
+      })
+  }
+
+  const loadData = (row: I2096NoParte) => {
+    setIDParte(row.id)
+    setParte(row.parte)
+    setTipoOperacion(row.tipoOperacion)
+    setFraccion(row.fraccion.substring(0, 8))
+    setSubdivision(row.subdivision)
+    setPaisOrigen(row.paisOrigen ? row.paisOrigen : '')
+    setDescripcionFactura(row.descripcionFactura)
+    setDescripcionAgenteAduanal(row.descripcionAgenteAduanal)
+    setUMF(row.unidadMedidaFactura ? row.unidadMedidaFactura : '')
+    setFechaInsercion(row.fhActualizacion)
+    setClasificador(getUser(row.usuarioActualizacion))
+  }
+
+  const loadDataNoParteVerificacion = (row: I2096NoParte) => {
+    AmazonDS.NoParteVerificacionGET(row.parte)
+      .then((response) => {
+        setDataNoParteVeriifcacion(response.data)
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+  }
+
+  const loadPaisesClaves = () => {
+    AmazonDS.PaisClavesGET()
+      .then((response) => {
+        setPaisClaves(response.data)
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+  }
+
+  useEffect(() => {
+    loadPaisesClaves()
+    loadProfiles()
+  }, [])
+
+  const loadInfo = () => {
+    if (Search.length < 9) {
+      setHeader('Error')
+      setMsg('Proporcione el numero de parte, para poder continuar')
+      setShowMsg(true)
+      return
+    }
+    AmazonDS.NoPartesGet(Search)
+      .then((response) => {
+        dispatch(populateNoPartes(response.data))
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+  }
+
+  const saveInfo = () => {
+    const data: DTO2096NoParte = {
+      id: IDParte,
+      fraccionGEMCO: Fraccion,
+      subdivisionGEMCO: Subdivision,
+      descripcionAgenteAduanal: DescripcionAgenteAduanal,
+      usuario: UserId
+    }
+    AmazonDS.NoPartesUpdate(data)
+      .then((response) => {
+        dispatch(updateNoPartes(response.data))
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+  }
+
+  return (
+    <div>
+      <Card>
+        <Row style={{ paddingTop: '15px' }}>
+          <Col xs={8}></Col>
+          <Col xs={1} style={{ textAlign: 'right' }}>
+            No parte
+          </Col>
+          <Col xs={1}>
+            <Form.Control
+              type="text"
+              id="Search"
+              size="sm"
+              value={Search}
+              onChange={(e) => setSearch(e.target.value)}
+            />
+          </Col>
+          <Col xs={1}>
+            <Button
+              onClick={() => {
+                loadInfo()
+              }}
+            >
+              Busca
+            </Button>
+          </Col>
+        </Row>
+        <Row>
+          <Col>
+            <Card.Body>
+              <DataTable
+                noHeader
+                defaultSortFieldId={'id'}
+                defaultSortAsc={true}
+                pagination
+                highlightOnHover
+                columns={colsNoPartes}
+                data={mNoPartes.filter(function (el) {
+                  return el.id > 0
+                })}
+              />
+            </Card.Body>
+          </Col>
+        </Row>
+      </Card>
+      <Modal
+        show={ShowModal}
+        onHide={() => {
+          setShowModal(false)
+        }}
+        size={'sm'}
+        dialogClassName={'modal-50w'}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>
+            No Parte: {Parte} ................ insertado : [ {FechaInsercion} ]
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <div style={{ height: '400px', overflow: 'scroll' }}>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={2}>T. Operacion</Col>
+              <Col xs={3}>
+                <Form.Control
+                  disabled={true}
+                  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>
+              </Col>
+              <Col xs={1}>Fraccion</Col>
+              <Col xs={3}>
+                <Form.Control
+                  defaultValue={Fraccion}
+                  type="text"
+                  placeholder="Fraccion"
+                  onChange={(e) => setFraccion(e.target.value)}
+                  size="sm"
+                />
+              </Col>
+              <Col>Sub</Col>
+              <Col xs={2}>
+                <Form.Control
+                  defaultValue={Subdivision}
+                  type="text"
+                  placeholder="Subdivicion"
+                  onChange={(e) => setSubdivision(e.target.value)}
+                  size="sm"
+                />
+              </Col>
+            </Row>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={2}>
+                <Form.Label>Descripcion factura</Form.Label>
+              </Col>
+              <Col xs={10}>
+                <Form.Group className="mb-3">
+                  <Form.Control
+                    disabled={true}
+                    as="textarea"
+                    rows={3}
+                    value={DescripcionFactura}
+                  />
+                </Form.Group>
+              </Col>
+            </Row>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={2}>
+                <Form.Label>Descripcion agente aduanal</Form.Label>
+              </Col>
+              <Col xs={10}>
+                <Form.Group className="mb-3">
+                  <Form.Control
+                    as="textarea"
+                    rows={3}
+                    value={DescripcionAgenteAduanal}
+                    onChange={(e) =>
+                      setDescripcionAgenteAduanal(e.target.value)
+                    }
+                  />
+                </Form.Group>
+              </Col>
+            </Row>
+            <Row>
+              <Col xs={2}>Pais Origen</Col>
+              <Col xs={4}>
+                <Form.Control
+                  as="select"
+                  value={PaisOrigen}
+                  disabled={true}
+                  onChange={(e) => setPaisOrigen(e.target.value)}
+                  className="form-select form-select-sm"
+                >
+                  {' '}
+                  {PaisClaves
+                    ? PaisClaves.map((row) => {
+                        return (
+                          <option value={row.clave_a3}>{row.paisNom}</option>
+                        )
+                      })
+                    : ''}
+                </Form.Control>
+              </Col>
+              <Col xs={4}>Unidad medida factura</Col>
+              <Col xs={1}>
+                <Form.Control
+                  disabled={true}
+                  defaultValue={UMF}
+                  type="text"
+                  placeholder="Unidad de medida factura"
+                  onChange={(e) => setUMF(e.target.value)}
+                  size="sm"
+                />
+              </Col>
+            </Row>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={2}>Clasificador</Col>
+              <Col xs={4} style={{ textAlign: 'left' }}>
+                <Form.Control
+                  defaultValue={Clasificador}
+                  disabled={true}
+                  type="text"
+                  placeholder="Clasificador"
+                  size="sm"
+                />
+              </Col>
+              <Col xs={4}></Col>
+              <Col xs={1}>
+                <Button onClick={() => saveInfo()}>Guarda</Button>
+              </Col>
+            </Row>
+          </div>
+        </Modal.Body>
+      </Modal>
+
+      <Modal
+        show={ShowModalLog}
+        onHide={() => {
+          setShowModalLog(false)
+        }}
+        size={'sm'}
+        dialogClassName={'modal-90w'}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>No Parte: {Parte}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+         {/*  <div style={{ height: '400px', overflow: 'scroll' }}> */}
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={12}>
+                <DataTable
+                  noHeader
+                  fixedHeaderScrollHeight="400px"
+                  defaultSortFieldId={'id'}
+                  defaultSortAsc={true}
+                  pagination
+                  highlightOnHover
+                  striped={true}
+                  dense={true}
+                  columns={colsNoPartesLOG}
+                  data={NoParteLOG.filter(function (el) {
+                    return el.id > 0
+                  })}
+                />
+              </Col>
+            </Row>
+        {/*   </div> */}
+        </Modal.Body>
+      </Modal>
+
+      <Modal
+        show={ShowModalNoParteVerificacion}
+        onHide={() => {
+          setShowModalNoParteVerificacion(false)
+        }}
+        size={'sm'}
+        dialogClassName={'modal-90w'}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>No Parte: {Search}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={12}>
+                <DataTable
+                  noHeader
+                  fixedHeaderScrollHeight="400px"
+                  defaultSortFieldId={'id'}
+                  defaultSortAsc={true}
+                  pagination
+                  highlightOnHover
+                  striped={true}
+                  dense={true}
+                  columns={colsNoPartesVerificacion}
+                  data={DataNoParteVerificacion.filter(function (el) {
+                    return el
+                  })}
+                />
+              </Col>
+            </Row>
+        {/*   </div> */}
+        </Modal.Body>
+      </Modal>
+      <MsgInformativo
+        show={show}
+        msg={msg}
+        header={header}
+        msgColor={msgColor}
+        time={MsgTime}
+        closeToast={() => {
+          setShowMsg(false)
+        }}
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,722 @@
+import { useEffect, useState } from 'react'
+import {
+  Alert,
+  Button,
+  Card,
+  Col,
+  Form,
+  FormCheck,
+  Modal,
+  Row,
+  Table
+} from 'react-bootstrap'
+import { IconContext } from 'react-icons'
+import { BsChevronDown, BsChevronRight, BsSearch } from 'react-icons/bs'
+import { FaAmazon, FaFileExcel } from 'react-icons/fa'
+import I2096Headers from '../../../Interfaces/I2096Header'
+import DSAmazon from '../../../Services/Amazon.Services'
+import { MsgInformativo } from '../../../../../Utils/Toast/msgInformativo'
+import { RootState } from '../../../../../../store/store'
+import {
+  initializeInvoice,
+  populateInvoices,
+  updateInvoice
+} from '../../../../../../store/features/Clientes/2096/AmazonInvoices'
+import RtpAmazonFinishedClasificationInvoicesDetail from './RptAmazonFinishedClasificationInvoicesDetail'
+// Redux
+import { useDispatch, useSelector } from 'react-redux'
+import DTO2096PerfilesParecidos from '../../../DTO/DTO2096PerfilesParecidos'
+import loadingImg from '../../../../../../images/ajaxloader.gif'
+
+export interface IRptAmazonFinishedClasificationInvoicesProps {}
+
+export default function RptAmazonFinishedClasificationInvoices(
+  props: IRptAmazonFinishedClasificationInvoicesProps
+) {
+  const [Usuario, setUsuario] = useState(() => {
+    const stickyValue = window.localStorage.getItem('UserId')
+    return stickyValue !== null ? JSON.parse(stickyValue) : ''
+  })
+  const [Perfil, setPerfil] = useState(() => {
+    const stickyValue = window.localStorage.getItem('Perfil')
+    return stickyValue !== null ? JSON.parse(stickyValue) : 0
+  })
+  const dispatch = useDispatch()
+  const mInvoices = useSelector(
+    (state: RootState) => state.AmazonInvoices.Invoice
+  )
+  const [Data, setData] = useState<DTO2096PerfilesParecidos[]>([])
+  const [Accion, setAccion] = useState(0)
+  const [Estatus, setEstatus] = useState(0)
+  const [IDInvoice, setIDInvoice] = useState(0)
+  const [IDClasificador, setIDClasificador] = useState(0)
+  const [Clasificador, setClasificador] = useState('')
+  const [ShowModal, setShowModal] = useState(false)
+  const [ShowModalQuestion, setShowModalQuestion] = useState(false)
+  const [header, setHeader] = useState('')
+  const [show, setShowMsg] = useState(false)
+  const [msg, setMsg] = useState('')
+  const [WaitingDialog, setWaitingDialog] = useState(false)
+  const [WaitingMessage, setWaitingMessage] = useState('Plantilla de Partes')
+  const msgColor = 'primary'
+
+  const loadReport = () => {
+    DSAmazon.AmazonFinishedClasificationInvoiceGET()
+      .then((response) => {
+        dispatch(initializeInvoice([]))
+        dispatch(populateInvoices(response.data))
+      })
+      .catch((e: Error) => {
+        alert('Ocurrio un error' + e.message.toString())
+      })
+  }
+
+  const downloadExcel = (id: number, Factura: string) => {
+    setWaitingDialog(true)
+    DSAmazon.NoPartesAmazon2SIRGET(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',
+            'Plantilla de partes ' + Factura + '.xls'
+          )
+          document.body.appendChild(link)
+          link.click()
+          setWaitingDialog(false)
+        }
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error')
+        setShowMsg(true)
+        return
+      })
+  }
+
+  const loadProfiles = () => {
+    DSAmazon.PerfilesParecidosGet('Clasificador')
+      .then((response) => {
+        setData(response.data)
+      })
+      .catch((e: Error) => {
+        alert('Ocurrio un error' + e.message.toString())
+      })
+  }
+
+  useEffect(() => {
+    loadReport()
+    loadProfiles()
+  }, [])
+
+  const getUser = (Id: number) => {
+    const NoAsignado = 'NO ASIGNADO'
+    if (Id === 0) return NoAsignado
+    else if (Data.length) {
+      const Usuario = Data.filter((item) => item.idUsuario === Id)
+      return Usuario[0].nombre ? Usuario[0].nombre : NoAsignado
+    }
+    return NoAsignado
+  }
+
+  useEffect(() => {
+    if (ShowModal) {
+      setClasificador(getUser(IDClasificador))
+    }
+  }, [ShowModal])
+
+  const changeToggle = (row: I2096Headers) => {
+    let Invoice: I2096Headers[] = mInvoices.filter((item) => item.id === row.id)
+    const Obj = { ...Invoice[0] }
+    Obj.max = !Obj.max
+    dispatch(updateInvoice(Obj))
+  }
+
+ const TerminadeClasificar = () => {
+    DSAmazon.TerminaClasificarFactura(IDInvoice)
+      .then((response) => {
+        loadReport()
+        setShowModalQuestion(false)
+      })
+      .catch((e: Error) => {
+        setIDInvoice(0)
+        setHeader('Error')
+        setMsg('Ocurrio un error ' + e.toString())
+        setShowMsg(true)
+        return
+      })
+  }
+
+  const returnTO = () => {
+    DSAmazon.InvoiceReturnState(IDInvoice, 0)
+      .then((response) => {
+        loadReport()
+        setShowModal(false)
+      })
+      .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>{' '}
+                CLASIFICACION : facturas terminadas
+              </Card.Title>
+            </Col>
+            <Col xs={4}></Col>
+          </Row>
+        </Card.Body>
+      </Card>
+      <Row>
+        <Col xs={2}></Col>
+        <Col xs={8}></Col>
+        <Col xs={2} className="totalLabel"></Col>
+      </Row>
+      <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: '50px' }}></th>
+                  <th style={{ width: '80px' }}>Commercial Invoice Date</th>
+                  <th style={{ width: '300px' }}>Invoice Number</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>Tot partidas</th>
+                  <th>Clasificador</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                {mInvoices
+                  ? mInvoices .filter((a) => {
+                    if (
+                      a.clasificador === parseInt(Usuario) &&
+                      Perfil !== 'Clasificador lider'
+                    ) {
+                      return a
+                    } else if (
+                      ['Clasificador lider', 'Clasificador', 'Administrador'].includes(
+                        Perfil
+                      )
+                    ) {
+                      return a
+                    }
+                  }).map((MasterData) => {
+                      return (
+                        <>
+                          <tr
+                            style={{ cursor: 'pointer' }}
+                            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>
+                              {MasterData.estatus === 2 ? (
+                                <div
+                                  onClick={() =>
+                                    downloadExcel(
+                                      MasterData.id,
+                                      MasterData.invoiceNumber
+                                    )
+                                  }
+                                >
+                                  <IconContext.Provider
+                                    value={{ color: 'green', size: '20px' }}
+                                  >
+                                    <FaFileExcel />
+                                  </IconContext.Provider>
+                                </div>
+                              ) : null}
+                            </td>
+                            <td style={{ width: '50px', textAlign: 'center' }}>
+                              <FormCheck
+                                className="form-check form-switch form-control-sm"
+                                id="switchEnabled"
+                                type="switch"
+                                checked={false}
+                                onChange={() => {
+                                  setIDInvoice(MasterData.id)
+                                  setShowModalQuestion(true)
+                                 // sePuedeTerminarFactura(MasterData.id)
+                                }}
+                                label=""
+                              />
+                            </td>
+                            <td style={{ width: '80px', textAlign: 'center' }}>
+                              {MasterData.commercialInvoiceDate}
+                            </td>
+                            <td style={{ width: '300px' }}>
+                              {MasterData.invoiceNumber}
+                            </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>
+                            <td>{getUser(MasterData.clasificador)}</td>
+                            <td>
+                              <Form.Control
+                                as="select"
+                                className="form-select form-select-sm"
+                                onChange={(e) => {
+                                  setIDInvoice(MasterData.id)
+                                  setAccion(parseInt(e.target.value))
+                                  setIDClasificador(MasterData.clasificador)
+                                  setEstatus(MasterData.estatus)
+                                  setShowModal(true)
+                                }}
+                              >
+                                <option value="0">Ok</option>
+                                <option value="1">Regresa</option>
+                              </Form.Control>
+                            </td>
+                          </tr>
+                          {MasterData.max ? (
+                            <tr
+                              className={
+                                MasterData.max === true
+                                  ? 'masterSelected2'
+                                  : 'normalSelected2'
+                              }
+                            >
+                              <th colSpan={18}>
+                                <table
+                                  className="childTable"
+                                  style={{ width: '1450px' }}
+                                >
+                                  <thead>
+                                    <tr>
+                                      <th
+                                        style={{
+                                          width: '50px',
+                                          backgroundColor: '#FFFFFF',
+                                          color: '#346288'
+                                        }}
+                                      ></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'
+                                        }}
+                                      >
+                                        Pedimento Description
+                                      </th>
+                                      <th
+                                        style={{
+                                          width: '120px',
+                                          backgroundColor: '#D3E0EA',
+                                          color: '#346288',
+                                          textAlign: 'center'
+                                        }}
+                                      >
+                                        Destination HTS Code
+                                      </th>
+                                      <th
+                                        style={{
+                                          width: '120px',
+                                          backgroundColor: '#D3E0EA',
+                                          color: '#346288'
+                                        }}
+                                      >
+                                        Valida
+                                      </th>
+                                      <th
+                                        style={{
+                                          width: '120px',
+                                          backgroundColor: '#D3E0EA',
+                                          color: '#346288'
+                                        }}
+                                      >
+                                        Confirme fraccion
+                                      </th>
+                                      <th
+                                        style={{
+                                          width: '120px',
+                                          backgroundColor: '#D3E0EA',
+                                          color: '#346288',
+                                          textAlign: 'center'
+                                        }}
+                                      >
+                                        Fraccion GEMCO
+                                      </th>
+                                      <th
+                                        style={{
+                                          width: '120px',
+                                          backgroundColor: '#D3E0EA',
+                                          color: '#346288',
+                                          textAlign: 'center'
+                                        }}
+                                      >
+                                        Confirme descripcion
+                                      </th>
+                                      <th
+                                        style={{
+                                          width: '70px',
+                                          backgroundColor: '#D3E0EA',
+                                          color: '#346288',
+                                          textAlign: 'center'
+                                        }}
+                                      >
+                                        Descripcion GEMCO
+                                      </th>
+                                      <th
+                                        style={{
+                                          width: '70px',
+                                          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>
+                                    </tr>
+                                  </thead>
+                                  <tbody>
+                                    {mInvoices.map((MD) => {
+                                      return (
+                                        <>
+                                          {MD.detail
+                                            .filter(
+                                              (detail) =>
+                                                MasterData.id ===
+                                                detail.idHeader
+                                            )
+                                            .map((detail) => {
+                                              return (
+                                                <RtpAmazonFinishedClasificationInvoicesDetail
+                                                  IDMaster={MasterData.id}
+                                                  detail={detail}
+                                                  Deshabilitado={
+                                                    MasterData.estatus >= 3
+                                                  }
+                                                />
+                                              )
+                                            })}
+                                        </>
+                                      )
+                                    })}
+                                  </tbody>
+                                </table>
+                              </th>
+                            </tr>
+                          ) : null}
+                        </>
+                      )
+                    })
+                  : null}
+              </tbody>
+            </Table>
+          </div>
+        </Card.Body>
+      </Card>
+
+      <Modal
+        show={ShowModal}
+        onHide={() => {
+          setShowModal(false)
+        }}
+        size={'sm'}
+        dialogClassName={'modal-50w'}
+      >
+        <Modal.Body>
+          <div style={{ height: '150px' }}>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={1}></Col>
+              <Col xs={10}>
+                <Alert key={'danger'} variant={'danger'}>
+                  ¿Esta seguro de regresarle esta factura a: {Clasificador}?
+                </Alert>
+              </Col>
+              <Col xs={1}></Col>
+            </Row>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={6} style={{ textAlign: 'center' }}>
+                <Button
+                  variant="secondary"
+                  onClick={() => {
+                    setShowModal(false)
+                  }}
+                >
+                  &nbsp;&nbsp;No&nbsp;&nbsp;
+                </Button>
+              </Col>
+              <Col xs={6} style={{ textAlign: 'center' }}>
+                <Button
+                  variant="danger"
+                  onClick={() => {
+                    returnTO()
+                  }}
+                >
+                  &nbsp;&nbsp;Si&nbsp;&nbsp;
+                </Button>
+              </Col>
+            </Row>
+          </div>
+        </Modal.Body>
+      </Modal>
+
+
+      <Modal
+        show={ShowModalQuestion}
+        onHide={() => {
+          setShowModal(false)
+        }}
+        size={'sm'}
+        dialogClassName={'modal-50w'}
+      >
+        <Modal.Body>
+          <div style={{ height: '150px' }}>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={1}></Col>
+              <Col xs={10}>
+                <Alert key={'danger'} variant={'danger'}>
+                  ¿Esta seguro de terminar la factura en este proceso de clasificacion?
+                </Alert>
+              </Col>
+              <Col xs={1}></Col>
+            </Row>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={6} style={{ textAlign: 'center' }}>
+                <Button
+                  variant="secondary"
+                  onClick={() => {
+                    setShowModalQuestion(false)
+                  }}
+                >
+                  &nbsp;&nbsp;No&nbsp;&nbsp;
+                </Button>
+              </Col>
+              <Col xs={6} style={{ textAlign: 'center' }}>
+                <Button
+                  variant="danger"
+                  onClick={() => {
+                    TerminadeClasificar()
+                  }}
+                >
+                  &nbsp;&nbsp;Si&nbsp;&nbsp;
+                </Button>
+              </Col>
+            </Row>
+          </div>
+        </Modal.Body>
+      </Modal>
+
+
+      <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/Clasification/Finished/RptAmazonFinishedClasificationInvoicesDetail.tsx

@@ -0,0 +1,545 @@
+import * as React from 'react'
+import { useEffect, useState } from 'react'
+import {
+  Alert,
+  Button,
+  Col,
+  Form,
+  Modal,
+  OverlayTrigger,
+  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'
+import I2096Detail from '../../../Interfaces/I2096Detail'
+import I2096Headers from '../../../Interfaces/I2096Header'
+// Redux
+import { RootState } from '../../../../../../store/store'
+import { useDispatch, useSelector } from 'react-redux'
+import { updateInvoice } from '../../../../../../store/features/Clientes/2096/AmazonInvoices'
+import * as CurrencyFormat from 'react-currency-format'
+import { AiOutlineFileSearch } from 'react-icons/ai'
+import { BsFillChatRightTextFill } from 'react-icons/bs'
+
+export interface IRptAmazonFinishedClasificationInvoicesDetailProps {
+  IDMaster: number
+  detail: I2096Detail
+  Deshabilitado: boolean
+}
+
+export default function RptAmazonFinishedClasificationInvoicesDetail(
+  props: IRptAmazonFinishedClasificationInvoicesDetailProps
+) {
+  const dispatch = useDispatch()
+  const mInvoices = useSelector(
+    (state: RootState) => state.AmazonInvoices.Invoice
+  )
+  const [ShowModal, setShowModal] = useState(false)
+  const [EstatusSwith, setEstatusSwitch] = useState(props.detail.autorizado)
+  const [UserChanged, setUserChanged] = useState(false)
+  const [header, setHeader] = useState('')
+  const [show, setShowMsg] = useState(false)
+  const [Show, setShow] = useState(false)
+  const [msg, setMsg] = useState('')
+  const [CumplimientoNormativo, setCumplimientoNormativo] = useState(
+    props.detail.cumplimientoNormativo ? props.detail.cumplimientoNormativo : ''
+  )
+  const [Comentarios, setComentarios] = useState(
+    props.detail.comentarios
+      ? props.detail.comentarios
+      : 'Clasificacion Incorrecta'
+  )
+  const msgColor = 'primary'
+  const openLink = (item: string) => {
+    window.open('https://www.amazon.com/dp/' + item)
+  }
+  const target = React.useRef(null)
+
+  const UpdateInfo = (Invoice: I2096Headers, Detail: I2096Detail[]) => {
+    const updatedInvoice: I2096Headers = {
+      id: props.IDMaster,
+      referencia: Invoice.referencia,
+      commercialInvoiceDate: Invoice.commercialInvoiceDate,
+      invoiceNumber: Invoice.invoiceNumber,
+      name: Invoice.name,
+      trailerNumber: Invoice.trailerNumber,
+      trailerId: Invoice.trailerId,
+      porOfLoading: Invoice.porOfLoading,
+      portOfEntry: Invoice.portOfEntry,
+      paymentsTerms: Invoice.paymentsTerms,
+      incoterms: Invoice.incoterms,
+      hawb: Invoice.hawb,
+      totalInvoiceQuantityUnitOfMeasure:
+        Invoice.totalInvoiceQuantityUnitOfMeasure,
+      totalInvoiceQuantity: Invoice.totalInvoiceQuantity,
+      totalInvoiceWeightUnitOfMeasure: Invoice.totalInvoiceWeightUnitOfMeasure,
+      totalInvoiceWeight: Invoice.totalInvoiceWeight,
+      totalInvoiceValueChargeOrAllowance:
+        Invoice.totalInvoiceValueChargeOrAllowance,
+      totalInvoiceValueCurrencyISOCode:
+        Invoice.totalInvoiceValueCurrencyISOCode,
+      totalInvoiceValueMonetaryAmount: Invoice.totalInvoiceValueMonetaryAmount,
+      footNote: Invoice.footNote,
+      archivo: Invoice.archivo,
+      fCreacion: Invoice.fCreacion,
+      clasificador: Invoice.clasificador,
+      noVuelta: Invoice.noVuelta,
+      estatus: Invoice.estatus,
+      max: true,
+      urgente: Invoice.urgente,
+      detail: Detail
+    }
+    dispatch(updateInvoice(updatedInvoice))
+  }
+
+  const editArray = (id: number, valor: boolean) => {
+    const Invoice = mInvoices
+      .filter((el) => el.id === props.IDMaster)
+      .map((el) => {
+        return el
+      })
+    const newDetail = Invoice[0].detail.map((el) => {
+      if (el.id === id) {
+        return {
+          ...el,
+          autorizado: valor
+        }
+      }
+      return el
+    })
+    UpdateInfo(Invoice[0], newDetail)
+  }
+
+  const autoriceItem = (id: number) => {
+   /*  if (CumplimientoNormativo.length === 0 && EstatusSwith) {
+      setHeader('Error')
+      setMsg(
+        'Antes de poder guardar la informacion es necesario que proporcione el reparto normativo'
+      )
+      setShowMsg(true)
+      return
+    }
+    const data: DTO2096ItemAutoriza = {
+      id: id,
+      autorizado: EstatusSwith,
+      cumplimientoNormativo: CumplimientoNormativo,
+      comentarios: Comentarios
+    }
+    console.log(data)
+    DSAmazon.AutorizadoSET(data)
+      .then((response) => {
+        editArray(id, !props.detail.autorizado)
+        setShowModal(false)
+      })
+      .catch((e: Error) => {}) */
+  }
+
+  useEffect(() => {
+    if (UserChanged && EstatusSwith && !props.detail.fraccionGEMCO)
+      autoriceItem(props.detail.id)
+  }, [EstatusSwith, UserChanged])
+
+  return (
+    <>
+      <tr>
+        <th
+          style={{
+            width: '50px',
+            backgroundColor: '#FFFFFF'
+          }}
+          className="DetailData"
+        >
+          &nbsp;
+        </th>
+        <td
+          style={{
+            textAlign: 'center',
+            cursor: 'pointer'
+          }}
+          className="DetailData"
+          onClick={() => openLink(props.detail.itemId)}
+        >
+          {props.detail.itemId}
+        </td>
+        <td
+          style={{
+            textAlign: 'right'
+          }}
+          className="DetailData"
+        >
+          {props.detail.itemDescription}
+        </td>
+        <td
+          style={{
+            textAlign: 'right'
+          }}
+          className="DetailData"
+        >
+          {props.detail.pedimentoDescription}
+        </td>
+        <td
+          style={{
+            textAlign: 'center',
+            fontSize: '18px'
+          }}
+          className="DetailData"
+        >
+          &nbsp;&nbsp;{props.detail.destinationHTSCode}
+        </td>
+        <td
+          style={{
+            textAlign: 'center'
+          }}
+          className="DetailData"
+        >
+          {props.detail.validaFraccionOriginal === 0 ? (
+            <IconContext.Provider
+              value={{
+                color: 'orange',
+                size: '20px'
+              }}
+            >
+              <FaQuestionCircle />
+            </IconContext.Provider>
+          ) : props.detail.validaFraccionOriginal === 1 ? (
+            <IconContext.Provider
+              value={{
+                color: 'green',
+                size: '20px'
+              }}
+            >
+              <FaCheckCircle />
+            </IconContext.Provider>
+          ) : props.detail.validaFraccionOriginal === 3 ? (
+            <IconContext.Provider
+              value={{
+                color: 'blue',
+                size: '20px'
+              }}
+            >
+              <FaCheckCircle />
+            </IconContext.Provider>
+          ) : (
+            <IconContext.Provider
+              value={{
+                color: 'red',
+                size: '20px'
+              }}
+            >
+              <ImCross />
+            </IconContext.Provider>
+          )}
+        </td>
+        <td
+          style={{
+            textAlign: 'center'
+          }}
+          className="DetailData"
+        >
+          <ComboFraccion
+            IDInvoice={props.IDMaster}
+            IDDetail={props.detail.id}
+            FraccionOriginal={props.detail.destinationHTSCode}
+            ConfirmaFraccion={props.detail.confirmaFraccion}
+            Deshabilitado={props.Deshabilitado}
+            Detail={props.detail}
+          />
+        </td>
+        <td
+          style={{
+            textAlign: 'center'
+          }}
+          className="DetailData"
+        >
+          <CurrencyFormat
+            value={props.detail.fraccionGEMCO ? props.detail.fraccionGEMCO : ''}
+            disabled={true}
+            format={'####.##.####'}
+            displayType={'input'}
+            style={{
+              fontSize: '17px',
+              backgroundColor:
+                props.detail.validaFraccionOriginal === 0
+                  ? '#FFFAF2 '
+                  : '#E5F7B6',
+              border:
+                props.detail.validaFraccionOriginal === 0
+                  ? '2px solid #F9A721'
+                  : '2px solid green',
+              color:
+                props.detail.validaFraccionOriginal === 0
+                  ? '#5923F6'
+                  : '#000000',
+              width: '135px',
+              textAlign: 'right',
+              borderRadius: '10px'
+            }}
+          />
+        </td>
+        <td
+          style={{
+            textAlign: 'center'
+          }}
+          className="DetailData"
+        >
+          <ComboDescripcion
+            IDInvoice={props.IDMaster}
+            IDDetail={props.detail.id}
+            DescripcionOriginal={props.detail.pedimentoDescription}
+            ConfirmaDescripcion={props.detail.confirmaDescripcion}
+            Deshabilitado={props.Deshabilitado}
+            Detail={props.detail}
+          />
+        </td>
+        <td
+          style={{
+            textAlign: 'center'
+          }}
+          className="DetailData"
+        >
+          {props.detail.descripcionGEMCO}
+        </td>
+        <td
+          style={{
+            textAlign: 'center'
+          }}
+          className="DetailData"
+        >
+          {props.detail.countryOfOrigin}
+        </td>
+        <td
+          style={{
+            textAlign: 'right'
+          }}
+          className="DetailData"
+        >
+          {props.detail.productGroup}
+        </td>
+        <td
+          style={{
+            textAlign: 'right'
+          }}
+          className="DetailData"
+        >
+          {props.detail.brand}
+        </td>
+        <td
+          style={{
+            textAlign: 'right'
+          }}
+          className="DetailData"
+        >
+          {props.detail.model}
+        </td>
+        <td
+          style={{
+            textAlign: 'center'
+          }}
+          className="DetailData"
+        >
+          {props.detail.itemQuantityUnitOfMeasure}
+        </td>
+        <td
+          style={{
+            textAlign: 'center'
+          }}
+          className="DetailData"
+        >
+          {props.detail.quantity}
+        </td>
+        <td
+          style={{
+            textAlign: 'center'
+          }}
+          className="DetailData"
+        >
+          {props.detail.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',
+            visibility:
+              props.detail.destinationHTSCode.replaceAll('.', '').trim() !==
+              (props.detail.fraccionGEMCO
+                ? props.detail.fraccionGEMCO.trim()
+                : '')
+                ? 'visible'
+                : 'hidden'
+          }}
+          className="DetailData"
+        >
+        </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>
+      </tr>
+
+      <Modal
+        show={ShowModal}
+        onHide={() => {
+          setShowModal(false)
+        }}
+        size={'sm'}
+        dialogClassName={'modal-50w'}
+      >
+        <Modal.Body>
+          <div style={{ height: '280px' }}>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={1}></Col>
+              <Col xs={10}>
+                <Alert key={'danger'} variant={'danger'}>
+                  ¿Esta seguro que esta fraccion ya la autorizo Amazon?
+                </Alert>
+              </Col>
+              <Col xs={1}></Col>
+            </Row>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={3}>Cumplimiento normativo</Col>
+              <Col xs={8}>
+                {' '}
+                <Form.Control
+                  as="textarea"
+                  id="RequerimientoNormativo"
+                  size="sm"
+                  value={CumplimientoNormativo}
+                  onChange={(e) => setCumplimientoNormativo(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={
+                    Comentarios.length
+                      ? Comentarios
+                      : 'Clasificacion incorrecta.'
+                  }
+                  onChange={(e) => setComentarios(e.target.value)}
+                />
+              </Col>
+              <Col>&nbsp;</Col>
+            </Row>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={6} style={{ textAlign: 'center' }}>
+                <Button
+                  variant="secondary"
+                  onClick={() => {
+                    setShowModal(false)
+                  }}
+                >
+                  &nbsp;&nbsp;No&nbsp;&nbsp;
+                </Button>
+              </Col>
+              <Col xs={6} style={{ textAlign: 'center' }}>
+                <Button
+                  variant="danger"
+                  onClick={() => {
+                    autoriceItem(props.detail.id)
+                  }}
+                >
+                  &nbsp;&nbsp;Si&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/Clasification/Pending/ClasificatorAssign.tsx

@@ -0,0 +1,132 @@
+import * as React from 'react'
+import { useEffect, useState } from 'react'
+import { Alert, Button, Col, Form, Modal, Row } from 'react-bootstrap'
+import DTO2096PerfilesParecidos from '../../../DTO/DTO2096PerfilesParecidos'
+import { RootState } from '../../../../../../store/store'
+import { useDispatch, useSelector } from 'react-redux'
+import I2096Headers from '../../../Interfaces/I2096Header'
+import { updateInvoice } from '../../../../../../store/features/Clientes/2096/AmazonInvoices'
+import DSAmazon from '../../../Services/Amazon.Services'
+
+export interface IClasificatorAssignProps {
+  Invoice: I2096Headers
+  Disabled: boolean
+}
+
+export default function ClasificatorAssign(props: IClasificatorAssignProps) {
+  const dispatch = useDispatch()
+  const mInvoices = useSelector(
+    (state: RootState) => state.AmazonInvoices.Invoice
+  )
+  const [IDClasificador, setIDClasificador] = useState(
+    props.Invoice.clasificador ? props.Invoice.clasificador : 0
+  )
+  const [Clasificador, setClasificador] = useState('')
+  const [Data, setData] = useState<DTO2096PerfilesParecidos[]>([])
+  const [showModal, setShowModal] = useState(false)
+
+  useEffect(() => {
+    DSAmazon.PerfilesParecidosGet('Clasificador')
+      .then((response) => {
+        setData(response.data)
+      })
+      .catch((e: Error) => {
+        alert('Ocurrio un error' + e.message.toString())
+      })
+  }, [])
+
+  useEffect(() => {
+    setClasificador(getUser(IDClasificador))
+  }, [IDClasificador])
+
+  const getUser = (Id: number) => {
+    const NoAsignado = ' - NO ASIGNADO -'
+    if (Id === 0) return NoAsignado
+    else if (Data.length) {
+      const Usuario = Data.filter((item) => item.idUsuario === Id)
+      return Usuario[0].nombre ? Usuario[0].nombre : NoAsignado
+    }
+    return NoAsignado
+  }
+
+  const UpdateInfo = (updatedInvoice: I2096Headers) => {
+    dispatch(updateInvoice(updatedInvoice))
+  }
+
+  const editArray = () => {
+    const Invoice = mInvoices
+      .filter((el) => el.id === props.Invoice.id)
+      .map((el) => {
+        return {
+          ...el,
+          clasificador: IDClasificador
+        }
+      })
+    UpdateInfo(Invoice[0])
+  }
+
+  const saveAsignation = () => {
+    DSAmazon.AsignaFacturaClasificador(IDClasificador, props.Invoice.id)
+      .then((response) => {
+        setShowModal(false)
+        editArray()
+      })
+      .catch((e: Error) => {
+        alert('Ocurrio un error' + e.message.toString())
+      })
+  }
+
+  return (
+    <div>
+      <Form.Control
+        as="select"
+        disabled={props.Disabled}
+        className="form-select form-select-sm"
+        onChange={(e) => {
+          setIDClasificador(parseInt(e.target.value))
+          setShowModal(true)
+        }}
+        value={IDClasificador}
+      >
+        <option value="0">- NO ASIGNADO -</option>
+        {Data
+          ? Data.map((item) => {
+              return <option value={item.idUsuario}>{item.nombre}</option>
+            })
+          : ''}
+      </Form.Control>
+      <Modal
+        show={showModal}
+        onHide={() => {
+          setShowModal(false)
+        }}
+        size={'sm'}
+        dialogClassName={'modal-50w'}
+      >
+        <Modal.Body>
+          <Row>
+            <Col xs={12}>
+              <Alert variant="danger">
+                <Alert.Heading>
+                  ¿Esta seguro de asignar esta factura Amazon a: {Clasificador}?
+                </Alert.Heading>
+              </Alert>
+            </Col>
+          </Row>
+          <Row style={{ paddingTop: '10px' }}>
+            <Col XS={9}></Col>
+            <Col xs={3}>
+              <Button
+                onClick={() => {
+                  saveAsignation()
+                }}
+              >
+                Asignar
+              </Button>
+            </Col>
+          </Row>
+        </Modal.Body>
+      </Modal>
+    </div>
+  )
+}

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

@@ -0,0 +1,562 @@
+import * as React from 'react'
+import { useEffect, useState } from 'react'
+import {
+  Alert,
+  Button,
+  Col,
+  Form,
+  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'
+import DTO2096ItemAutoriza from '../../../DTO/DTO2096ItemAutoriza'
+import I2096Detail from '../../../Interfaces/I2096Detail'
+import I2096Headers from '../../../Interfaces/I2096Header'
+import DSAmazon from '../../../Services/Amazon.Services'
+// Redux
+import { RootState } from '../../../../../../store/store'
+import { useDispatch, useSelector } from 'react-redux'
+import { updateInvoice } from '../../../../../../store/features/Clientes/2096/AmazonInvoices'
+import * as CurrencyFormat from 'react-currency-format'
+import { AiOutlineFileSearch } from 'react-icons/ai'
+import { BsFillChatRightTextFill } from 'react-icons/bs'
+
+export interface IRtpAmazonPendingInvoivesDetailProps {
+  IDMaster: number
+  Prioridad: boolean,
+  detail: I2096Detail
+  Deshabilitado: boolean
+}
+
+export default function RtpAmazonPendingInvoivesDetail(
+  props: IRtpAmazonPendingInvoivesDetailProps
+) {
+  const [Perfil, setPerfil] = useState(() => {
+    const stickyValue = window.localStorage.getItem('Perfil')
+    return stickyValue !== null ? JSON.parse(stickyValue) : 0
+  })
+  const dispatch = useDispatch()
+  const mInvoices = useSelector(
+    (state: RootState) => state.AmazonInvoices.Invoice
+  )
+  const [ShowModal, setShowModal] = useState(false)
+  const [Checked, setChecked] = useState(props.detail.checked)
+  const [EstatusSwith, setEstatusSwitch] = useState(props.detail.autorizado)
+  const [UserChanged, setUserChanged] = useState(false)
+  const [header, setHeader] = useState('')
+  const [show, setShowMsg] = useState(false)
+  const [Show, setShow] = useState(false)
+  const [msg, setMsg] = useState('')
+  const [CumplimientoNormativo, setCumplimientoNormativo] = useState(
+    props.detail.cumplimientoNormativo ? props.detail.cumplimientoNormativo : ''
+  )
+  const [Comentarios, setComentarios] = useState(
+    props.detail.comentarios
+      ? props.detail.comentarios
+      : 'Clasificacion Incorrecta'
+  )
+  const msgColor = 'primary'
+  const openLink = (item: string) => {
+    window.open('https://www.amazon.com/dp/' + item)
+  }
+  //const target = React.useRef(null)
+
+  const UpdateInvoiceDetail = (
+    Invoice: I2096Headers,
+    Detail: I2096Detail[]
+  ) => {
+    const updatedInvoice: I2096Headers = {
+      id: props.IDMaster,
+      referencia: Invoice.referencia,
+      commercialInvoiceDate: Invoice.commercialInvoiceDate,
+      invoiceNumber: Invoice.invoiceNumber,
+      name: Invoice.name,
+      trailerNumber: Invoice.trailerNumber,
+      trailerId: Invoice.trailerId,
+      porOfLoading: Invoice.porOfLoading,
+      portOfEntry: Invoice.portOfEntry,
+      paymentsTerms: Invoice.paymentsTerms,
+      incoterms: Invoice.incoterms,
+      hawb: Invoice.hawb,
+      totalInvoiceQuantityUnitOfMeasure:
+        Invoice.totalInvoiceQuantityUnitOfMeasure,
+      totalInvoiceQuantity: Invoice.totalInvoiceQuantity,
+      totalInvoiceWeightUnitOfMeasure: Invoice.totalInvoiceWeightUnitOfMeasure,
+      totalInvoiceWeight: Invoice.totalInvoiceWeight,
+      totalInvoiceValueChargeOrAllowance:
+        Invoice.totalInvoiceValueChargeOrAllowance,
+      totalInvoiceValueCurrencyISOCode:
+        Invoice.totalInvoiceValueCurrencyISOCode,
+      totalInvoiceValueMonetaryAmount: Invoice.totalInvoiceValueMonetaryAmount,
+      footNote: Invoice.footNote,
+      archivo: Invoice.archivo,
+      fCreacion: Invoice.fCreacion,
+      clasificador: Invoice.clasificador,
+      noVuelta: Invoice.noVuelta,
+      estatus: Invoice.estatus,
+      max: true,
+      urgente: Invoice.urgente,
+      detail: Detail
+    }
+    dispatch(updateInvoice(updatedInvoice))
+  }
+
+  const editInvoice = (id: number, valor: boolean) => {
+    const Invoice = mInvoices
+      .filter((el) => el.id === props.IDMaster)
+      .map((el) => {
+        return el
+      })
+    const newDetails = Invoice[0].detail.map((el) => {
+      if (el.id === id) {
+        return {
+          ...el,
+          checked: valor
+        }
+      }
+      return el
+    })
+    UpdateInvoiceDetail(Invoice[0], newDetails)
+  }
+
+  const autoriceItem = (id: number) => {
+    if (CumplimientoNormativo.length === 0 && EstatusSwith) {
+      setHeader('Error')
+      setMsg(
+        'Antes de poder guardar la informacion es necesario que proporcione el reparto normativo'
+      )
+      setShowMsg(true)
+      return
+    }
+    const data: DTO2096ItemAutoriza = {
+      id: id,
+      autorizado: EstatusSwith,
+      cumplimientoNormativo: CumplimientoNormativo,
+      comentarios: Comentarios
+    }
+    console.log(data)
+  }
+
+  const checkDetail = () => {
+    DSAmazon.CheckDetail(props.detail.id)
+      .then((response) => {
+        setChecked(!Checked)
+        editInvoice(props.detail.id, !Checked)
+      })
+      .catch((e: Error) => {})
+  }
+
+  const ColorSET = (value: number, mode: number) => {
+    switch (mode) {
+      case 1: {
+        if (value === 3) return '#E9F3FC'
+        break
+      }
+      case 2: {
+        if (value === 3) return '2px solid blue'
+        break
+      }
+      case 3: {
+        if (value === 3) return 'blue'
+        break
+      }
+    }
+  }
+
+  return (
+    <>
+      <tr>
+        <th
+          style={{
+            width: '50px'
+          }}
+          className="DetailData"
+        >
+          &nbsp;
+        </th>
+        <td
+          style={{
+            textAlign: 'center',
+            cursor: 'pointer',
+            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+          }}
+          className="DetailData"
+          onClick={() => openLink(props.detail.itemId)}
+        >
+          {props.detail.itemId}
+        </td>
+        <td
+          style={{
+            textAlign: 'right',
+            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+          }}
+          className="DetailData"
+        >
+          {props.detail.itemDescription}
+        </td>
+        <td
+          style={{
+            textAlign: 'right',
+            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+          }}
+        >
+          {props.detail.pedimentoDescription}
+        </td>
+        <td
+          style={{
+            textAlign: 'center',
+            fontSize: '18px',
+            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+          }}
+        >
+          &nbsp;&nbsp;{props.detail.destinationHTSCode}
+        </td>
+        <td
+          style={{
+            textAlign: 'center',
+            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+          }}
+          className="DetailData"
+        >
+        </td>
+        <td
+          style={{
+            textAlign: 'center',
+            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+          }}
+          className="DetailData"
+        >
+          <ComboFraccion
+            IDInvoice={props.IDMaster}
+            IDDetail={props.detail.id}
+            Prioridad={props.Prioridad}
+            FraccionOriginal={props.detail.destinationHTSCode}
+            ConfirmaFraccion={props.detail.confirmaFraccion}
+            Deshabilitado={false}
+            Detail={props.detail}
+          />
+        </td>
+        <td
+          style={{
+            textAlign: 'center',
+            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+          }}
+          className="DetailData"
+        >
+          <CurrencyFormat
+            value={props.detail.fraccionGEMCO ? props.detail.fraccionGEMCO : ''}
+            disabled={true}
+            format={'####.##.####'}
+            displayType={'input'}
+            style={{
+              fontSize: '17px',
+              backgroundColor: ColorSET(props.detail.confirmaFraccion, 1),
+              border: ColorSET(props.detail.confirmaFraccion, 2),
+              color: ColorSET(props.detail.confirmaFraccion, 3),
+              width: '135px',
+              textAlign: 'right',
+              borderRadius: '10px'
+            }}
+          />
+        </td>
+        <td
+          style={{
+            textAlign: 'center',
+            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+          }}
+          className="DetailData"
+        >
+          <ComboDescripcion
+            IDInvoice={props.IDMaster}
+            IDDetail={props.detail.id}
+            Prioridad={props.Prioridad}            
+            DescripcionOriginal={props.detail.pedimentoDescription}
+            ConfirmaDescripcion={props.detail.confirmaDescripcion}
+            Deshabilitado={false}
+            Detail={props.detail}
+          />
+        </td>
+        <td
+          style={{
+            textAlign: 'center',
+            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+          }}
+          className="DetailData"
+        >
+          {props.detail.descripcionGEMCO}
+        </td>
+        <td
+          style={{
+            textAlign: 'center',
+            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+          }}
+          className="DetailData"
+        >
+          {props.detail.countryOfOrigin}
+        </td>
+        <td
+          style={{
+            textAlign: 'right',
+            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+          }}
+          className="DetailData"
+        >
+          {props.detail.productGroup}
+        </td>
+        <td
+          style={{
+            textAlign: 'right',
+            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+          }}
+          className="DetailData"
+        >
+          {props.detail.brand}
+        </td>
+        <td
+          style={{
+            textAlign: 'right',
+            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+          }}
+          className="DetailData"
+        >
+          {props.detail.model}
+        </td>
+        <td
+          style={{
+            textAlign: 'center',
+            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+          }}
+          className="DetailData"
+        >
+          {props.detail.itemQuantityUnitOfMeasure}
+        </td>
+        <td
+          style={{
+            textAlign: 'center',
+            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+          }}
+          className="DetailData"
+        >
+          {props.detail.quantity}
+        </td>
+        <td
+          style={{
+            textAlign: 'center',
+            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+          }}
+          className="DetailData"
+        >
+          {props.detail.weightValue}
+        </td>
+        <td
+          style={{
+            textAlign: 'center',
+            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+          }}
+          className="DetailData"
+        >
+          {props.detail.netWeightUnitOfMeasure}
+        </td>
+
+        <td
+          style={{
+            textAlign: 'center',
+            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+          }}
+          className="DetailData"
+        >
+          {props.detail.actualUnitCostMonetaryAmount}
+        </td>
+        <td
+          style={{
+            textAlign: 'center',
+            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+          }}
+          className="DetailData"
+        >
+          {props.detail.totalUnitValueMonetaryAmount}
+        </td>
+        <td
+          style={{
+            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+          }}
+        >
+          <OverlayTrigger
+            placement="bottom"
+            overlay={
+              <Tooltip id="button-tooltip-2">
+                {props.detail.confirmaFraccion === 2
+                  ? props.detail.cumplimientoNormativo
+                  : ''}
+              </Tooltip>
+            }
+          >
+            {({ ref, ...triggerHandler }) => (
+              <Button
+                variant="light"
+                {...triggerHandler}
+                style={{
+                  visibility:
+                    props.detail.confirmaFraccion === 2 ? 'visible' : 'hidden'
+                }}
+              >
+                <IconContext.Provider
+                  value={{
+                    color: 'blue',
+                    size: '25px'
+                  }}
+                >
+                  <AiOutlineFileSearch />
+                </IconContext.Provider>
+                <span className="ms-1"></span>
+              </Button>
+            )}
+          </OverlayTrigger>
+        </td>
+        <td
+          style={{
+            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+          }}
+        >
+          <OverlayTrigger
+            placement="bottom"
+            overlay={<Tooltip id="button-tooltip-2">{Comentarios}</Tooltip>}
+          >
+            {({ ref, ...triggerHandler }) => (
+              <Button
+                variant="light"
+                {...triggerHandler}
+                style={{
+                  visibility:
+                    props.detail.confirmaFraccion === 2 ? 'visible' : 'hidden'
+                }}
+              >
+                <IconContext.Provider
+                  value={{
+                    color: 'green',
+                    size: '25px'
+                  }}
+                >
+                  <BsFillChatRightTextFill />
+                </IconContext.Provider>
+                <span className="ms-1"></span>
+              </Button>
+            )}
+          </OverlayTrigger>
+        </td>
+        <td
+          style={{
+            textAlign: 'center',
+            backgroundColor: props.detail.checked ? '#E6EEF5' : '#ffffff'
+          }}
+        >
+          <Form>
+            <Form.Check
+              type="checkbox"
+              id="Checkbox"
+              disabled={((Perfil!=='Clasificador Lider')&&(props.detail.confirmaFraccion===0)||(props.detail.confirmaDescripcion===0))||
+                ((Perfil==='Clasificador')&&(props.detail.validaFraccionOriginal===3))}
+              onClick={() => {
+                checkDetail()
+              }}
+              checked={Checked}
+            />
+          </Form>
+        </td>
+      </tr>
+
+      <Modal
+        show={ShowModal}
+        onHide={() => {
+          setShowModal(false)
+        }}
+        size={'sm'}
+        dialogClassName={'modal-50w'}
+      >
+        <Modal.Body>
+          <div style={{ height: '280px' }}>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={1}></Col>
+              <Col xs={10}>
+                <Alert key={'danger'} variant={'danger'}>
+                  Para poder continuar es necesario que proporcione la siguiente
+                  informacion
+                </Alert>
+              </Col>
+              <Col xs={1}></Col>
+            </Row>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={3}>Cumplimiento normativo</Col>
+              <Col xs={8}>
+                <Form.Control
+                  as="textarea"
+                  id="RequerimientoNormativo"
+                  size="sm"
+                  value={CumplimientoNormativo}
+                  onChange={(e) => setCumplimientoNormativo(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={
+                    Comentarios.length
+                      ? Comentarios
+                      : 'Clasificacion incorrecta.'
+                  }
+                  onChange={(e) => setComentarios(e.target.value)}
+                />
+              </Col>
+              <Col>&nbsp;</Col>
+            </Row>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={6} style={{ textAlign: 'center' }}>
+                <Button
+                  variant="secondary"
+                  onClick={() => {
+                    setShowModal(false)
+                  }}
+                >
+                  &nbsp;&nbsp;No&nbsp;&nbsp;
+                </Button>
+              </Col>
+              <Col xs={6} style={{ textAlign: 'center' }}>
+                <Button
+                  variant="danger"
+                  onClick={() => {
+                    autoriceItem(props.detail.id)
+                  }}
+                >
+                  &nbsp;&nbsp;Si&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/Clasification/PrioritySelector/PrioritySelector.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react'
+import { IconContext } from 'react-icons'
+import { MdInfo } from 'react-icons/md'
+import DSAmazon from '../../../Services/Amazon.Services'
+import { MsgInformativo } from '../../../../../Utils/Toast/msgInformativo'
+import { RootState } from '../../../../../../store/store'
+import {
+  initializeInvoice,
+  populateInvoices,
+  updateInvoice
+} from '../../../../../../store/features/Clientes/2096/AmazonInvoices'
+import { useDispatch, useSelector } from 'react-redux'
+import { useState } from 'react'
+import I2096Headers from '../../../Interfaces/I2096Header'
+
+export interface IPrioritySelectorProps {
+  IDInvoice: number,
+  Priority: boolean,
+  canChange: boolean
+}
+
+export function PrioritySelector(props: IPrioritySelectorProps) {
+  const dispatch = useDispatch()
+  /* const mInvoices = useSelector(
+    (state: RootState) => state.AmazonInvoices.Invoice
+  ) */
+  const [Prioridad, setPrioridad] = React.useState(props.Priority)
+  const [show, setShowMsg] = useState(false)
+  const [header, setHeader] = useState('')
+  const [msg, setMsg] = useState('')
+  const msgColor = 'primary'
+
+  React.useEffect(() => {}, [])
+
+  const togglePriority = () => {
+    if (!props.canChange) return
+    const newPrority=!Prioridad
+    DSAmazon.AmazonInvoicePrioritySET(props.IDInvoice, newPrority)
+    .then((response) => {
+      if (response.data) {
+        setPrioridad(newPrority)
+        let Invoice: I2096Headers[] = response.data.filter(
+          (item) => item.id === props.IDInvoice
+        )
+        dispatch(updateInvoice(Invoice[0]))
+        setHeader('Importante')
+        setMsg('Se le ha cambiado la priodidad a esta factura')
+        return
+      }
+    })
+    .catch((e: Error) => {
+      setHeader('Error')
+      setMsg('Ocurrio un error')
+      return
+    })
+  }
+
+  return (
+    <div
+      onClick={() => {
+        togglePriority()
+      }}
+      style={{ width: '50px' }}
+    >
+      {Prioridad ? (
+        <IconContext.Provider value={{ color: '#DD0E0E', size: '25px' }}>
+          <MdInfo />
+        </IconContext.Provider>
+      ) : (
+        <img
+          src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
+          width="0"
+          height="0"
+          alt=""
+        />
+      )}
+       <MsgInformativo
+        show={show}
+        msg={msg}
+        header={header}
+        msgColor={msgColor}
+        closeToast={() => {
+          setShowMsg(false)
+        }}
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,936 @@
+import * as React from 'react'
+import { useEffect, useState } from 'react'
+import {
+  Alert,
+  Button,
+  Card,
+  Col,
+  FormCheck,
+  Modal,
+  Row,
+  Table
+} from 'react-bootstrap'
+import { IconContext } from 'react-icons'
+import { BsChevronDown, BsChevronRight } from 'react-icons/bs'
+import { FaAmazon, FaFileExcel } from 'react-icons/fa'
+import I2096Headers from '../../../Interfaces/I2096Header'
+import DSAmazon from '../../../Services/Amazon.Services'
+import { MsgInformativo } from '../../../../../Utils/Toast/msgInformativo'
+import { RootState } from '../../../../../../store/store'
+import {
+  initializeInvoice,
+  populateInvoices,
+  updateInvoice
+} from '../../../../../../store/features/Clientes/2096/AmazonInvoices'
+import loadingImg from '../../../../../../images/ajaxloader.gif'
+
+// Redux
+import { useDispatch, useSelector } from 'react-redux'
+import RtpPendingAnswerFromAmazonDetail from './RptPendingAnswerFromAmazonDetail'
+import { AiFillFileUnknown, AiTwotoneFileExcel } from 'react-icons/ai'
+import DTO2096PerfilesParecidos from '../../../DTO/DTO2096PerfilesParecidos'
+import { MFileManager } from '../../../../../Utils/MFileManager/MFileManager'
+import { setEmitFlags } from 'typescript'
+import DTO2096RELParteFactura from '../../../DTO/DTO2096RELParteFactura'
+import IFileManager from '../../../../../../Interfaces/Utils/IFileManager'
+export interface IRptPendingAnswerFromAmazonProps {}
+
+export default function RptPendingAnswerFromAmazon(
+  props: IRptPendingAnswerFromAmazonProps
+) {
+  const [Usuario, setUsuario] = useState(() => {
+    const stickyValue = window.localStorage.getItem('UserId')
+    return stickyValue !== null ? JSON.parse(stickyValue) : ''
+  })
+  const [Perfil, setPerfil] = useState(() => {
+    const stickyValue = window.localStorage.getItem('Perfil')
+    return stickyValue !== null ? JSON.parse(stickyValue) : 0
+  })
+  const dispatch = useDispatch()
+  const mInvoices = useSelector(
+    (state: RootState) => state.AmazonInvoices.Invoice
+  )
+  const [UserId, setUserId] = useState(() => {
+    const stickyValue = window.localStorage.getItem('UserId')
+    return stickyValue !== null ? JSON.parse(stickyValue) : 0
+  })
+  const [Data, setData] = useState<DTO2096PerfilesParecidos[]>([])
+  const [ResumeData, setResumeData] = useState<DTO2096RELParteFactura[]>([])
+  const [AmazonAnswerFile, setAmazonAnswerFile] = useState<IFileManager[]>([])
+  const [header, setHeader] = useState('')
+  const [IDFactura, setIDFactura] = useState(0)
+  const [Factura, setFactura] = useState('')
+  const [IDProcess, setIDProcess] = useState(25)
+  const [show, setShowMsg] = useState(false)
+  const [ShowModal, setShowModal] = useState(false)
+  const [WaitingDialog, setWaitingDialog] = useState(false)
+  const [WaitingMessage, setWaitingMessage] = useState('Generando...')
+  const [ShowModalAnswerFile, setShowModalAnswerFile] = useState(false)
+  const [ConfirmApplyAnswerFile, setConfirmApplyAnswerFile] = useState(false)
+  const [msg, setMsg] = useState('')
+  const msgColor = 'primary'
+
+  const loadReport = () => {
+    DSAmazon.InvoicePendingFromAmazonGET()
+      .then((response) => {
+        dispatch(initializeInvoice([]))
+        dispatch(populateInvoices(response.data))
+      })
+      .catch((e: Error) => {
+        alert('Ocurrio un error' + e.message.toString())
+      })
+  }
+
+  const loadProfiles = () => {
+    DSAmazon.PerfilesParecidosGet('Clasificador')
+      .then((response) => {
+        setData(response.data)
+      })
+      .catch((e: Error) => {
+        alert('Ocurrio un error' + e.message.toString())
+      })
+  }
+
+  const generateResume = (id: number) => {
+    DSAmazon.RELParteFacturasGET(id)
+      .then((response) => {
+        setResumeData(response.data)
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error')
+        setShowMsg(true)
+        return
+      })
+  }
+
+  const downloadExceptionsFile = (id: number, Factura: string) => {
+    setWaitingDialog(true)
+    generateResume(id)
+    setFactura(Factura)
+    DSAmazon.ExceptionsFileAmazonGET(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', 'Excepciones ' + Factura + '.xlsx')
+          document.body.appendChild(link)
+          link.click()
+        }
+        setWaitingMessage('')
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error')
+        setShowMsg(true)
+        return
+      })
+  }
+
+  useEffect(() => {
+    loadReport()
+    loadProfiles()
+  }, [])
+
+  const check4Updates = (IDInvoice: number) => {
+    DSAmazon.SETInvoiceDetailRevalidateParts(IDInvoice)
+      .then((response) => {
+         DSAmazon.AmazonInvoiceGET(IDInvoice)
+          .then((response) => {
+            //console.log(JSON.stringify(response.data))
+            dispatch(updateInvoice(response.data[0]))
+            let Invoice: I2096Headers[] = response.data.filter(
+              (item) => item.id === IDInvoice
+            )
+            const Obj = { ...Invoice[0] }
+            Obj.max = !Obj.max
+            dispatch(updateInvoice(Obj))
+          })
+          .catch((e: Error) => {
+            setHeader('Error')
+            setMsg('Ocurrio un error')
+            //setShowModalDeleteInvoice(false)
+            return
+          })
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error')
+        //setShowModalDeleteInvoice(false)
+        return
+      })
+  }
+
+  const toggleExpandRow = (row: I2096Headers) => {
+    if (!row.max) check4Updates(row.id)
+    let Invoice: I2096Headers[] = mInvoices.filter((item) => item.id === row.id)
+    const Obj = { ...Invoice[0] }
+    Obj.max = !Obj.max
+    dispatch(updateInvoice(Obj))
+  }
+
+  const getUser = (Id: number) => {
+    const NoAsignado = 'NO ASIGNADO'
+    if (Id === 0) return NoAsignado
+    else if (Data.length) {
+      const Usuario = Data.filter((item) => item.idUsuario === Id)
+      return Usuario[0] ? Usuario[0].nombre : NoAsignado
+    }
+    // return NoAsignado
+  }
+
+  const existsExeptions = (IDMaster: number) => {
+    const Exceptions = mInvoices
+      .filter((element) =>
+        element.detail.some((sub) => sub.idHeader === IDMaster)
+      )
+      .map((element) => {
+        let newElt = Object.assign({}, element) // copies element
+        return newElt.detail.filter(
+          (child) => child.idHeader === IDMaster && !child.autorizado
+        )
+      })
+    return Exceptions.length ? Exceptions[0].length : 0
+  }
+
+  const TerminadeClasificar = () => {
+    DSAmazon.TerminaClasificarFactura(IDFactura)
+      .then((response) => {
+        loadReport()
+        setShowModal(false)
+      })
+      .catch((e: Error) => {
+        setIDFactura(0)
+        setHeader('Error')
+        setMsg('Ocurrio un error ' + e.toString())
+        setShowMsg(true)
+        return
+      })
+  }
+
+  const sePuedeTerminarFactura = (id: number) => {
+    setIDFactura(id)
+    DSAmazon.SeRecibioRespuestaDeAmazon(id)
+      .then((response) => {
+        if (response.data.estatus === 0) {
+          setHeader('Error')
+          setMsg(
+            'Verifique que todas las partidas esten checadas por usted y que cuente con el archivo de respuesta'
+          )
+          setShowMsg(true)
+          return
+        } else if (response.data.estatus === 1) {
+          //TerminadeClasificar()
+          setShowModal(true)
+        } else {
+          setIDFactura(0)
+          setHeader('Informativo')
+          setMsg(response.data.respuesta)
+          setShowMsg(true)
+          return
+        }
+      })
+      .catch((e: Error) => {
+        setIDFactura(0)
+        setHeader('Error')
+        setMsg('Ocurrio un error')
+        setShowMsg(true)
+        return
+      })
+  }
+
+  const ApplyAnswerFiles2Invoice = () => {
+    const Filenames = AmazonAnswerFile.map(element => element.nombreArchivo);
+    DSAmazon.ApplyAnswerFile2Invoice(Filenames)
+    .then((response) => {
+      loadReport()
+      setAmazonAnswerFile([])
+      setShowModal(false)
+    })
+    .catch((e: Error) => {
+      setAmazonAnswerFile([])
+      setIDFactura(0)
+      setHeader('Error')
+      setMsg('Ocurrio un error ' + e.toString())
+      setShowMsg(true)
+      return
+    })
+  }
+
+  return (
+    <div>
+      <Card>
+        <Card.Body>
+          <Row>
+            <Col xs={5}>
+              <Card.Title>
+                <IconContext.Provider value={{ color: '#F6C34F', size: '8%' }}>
+                  <FaAmazon />
+                </IconContext.Provider>
+                CLASIFICACION : Facturas&nbsp;
+                <span
+                  style={{
+                    fontStyle: 'italic',
+                    textDecoration: 'underline',
+                    textDecorationColor: 'red'
+                  }}
+                >
+                  con Excepciones
+                </span>
+              </Card.Title>
+            </Col>
+            <Col xs={4}></Col>
+          </Row>
+        </Card.Body>
+      </Card>
+      <Row>
+        <Col xs={2}></Col>
+        <Col xs={8}></Col>
+        <Col xs={2} className="totalLabel"></Col>
+      </Row>
+      <Card>
+        <Card.Body>
+          <div className="MDcontainer">
+            <Table className="MDTable" hover>
+              <thead style={{ position: 'sticky', top: '0' }}>
+                <tr>
+                  <th style={{ width: '50px' }}></th>
+                  <th style={{ width: '50px' }}>id</th>
+                  <th style={{ width: '50px' }}></th>
+                  <th style={{ width: '50px' }}></th>
+                  <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: '100px' }}>Incoterms</th>
+                  <th style={{ width: '100px' }}>Qty Unit of measure</th>
+                  <th style={{ width: '100px' }}>Tot Qty</th>
+                  <th style={{ width: '100px' }}>Weight unit of measure</th>
+                  <th style={{ width: '100px' }}>Tot weight</th>
+                  <th style={{ width: '100px' }}>Tot Charge or allowance</th>
+                  <th style={{ width: '100px' }}>Tot currency ISO code</th>
+                  <th style={{ width: '100px' }}>Tot Monetary amount</th>
+                  <th style={{ width: '500px' }}>Total de partidas</th>
+                  <th style={{ width: '100px' }}>Clasificador</th>
+                </tr>
+              </thead>
+              <tbody>
+                {mInvoices
+                  ? mInvoices
+                      .filter((a) => {
+                        if (
+                          a.clasificador === parseInt(Usuario) &&
+                          Perfil !== 'Clasificador lider'
+                        ) {
+                          return a
+                        } else if (
+                          [
+                            'Clasificador lider',
+                            'Administrador',
+                            'Sistemas'
+                          ].includes(Perfil)
+                        ) {
+                          return a
+                        }
+                      })
+                      .map((MasterData) => {
+                        return (
+                          <>
+                            <tr
+                              style={{ cursor: 'pointer' }}
+                              className={
+                                MasterData.max === true
+                                  ? 'masterSelected'
+                                  : 'normalSelected'
+                              }
+                            >
+                              <td
+                                style={{ textAlign: 'left' }}
+                                className={
+                                  MasterData.max === true
+                                    ? 'masterSelected'
+                                    : 'normalSelected'
+                                }
+                                key={MasterData.id}
+                                onClick={() => {
+                                  toggleExpandRow(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>
+                                {existsExeptions(MasterData.id) > 0 ? (
+                                  <div
+                                    onClick={() =>
+                                      downloadExceptionsFile(
+                                        MasterData.id,
+                                        MasterData.invoiceNumber
+                                      )
+                                    }
+                                    title="Archivo de excepciones"
+                                  >
+                                    <IconContext.Provider
+                                      value={{ color: 'orange', size: '20px' }}
+                                    >
+                                      <FaFileExcel />
+                                    </IconContext.Provider>
+                                  </div>
+                                ) : null}
+                              </td>
+                              <td>
+                                <FormCheck
+                                  className="form-check form-switch form-control-sm"
+                                  id="switchEnabled"
+                                  type="switch"
+                                  checked={false}
+                                  onChange={() => {
+                                    sePuedeTerminarFactura(MasterData.id)
+                                  }}
+                                  label=""
+                                />
+                              </td>
+                              <td>
+                                <div
+                                  onClick={() => {
+                                    setIDFactura(MasterData.id)
+                                    setShowModalAnswerFile(!ShowModalAnswerFile)
+                                  }}
+                                  title="Archivo de respuesta"
+                                >
+                                  <IconContext.Provider
+                                    value={{ color: 'red', size: '23px' }}
+                                  >
+                                    <AiFillFileUnknown />
+                                  </IconContext.Provider>
+                                </div>
+                              </td>
+                              <td
+                                style={{ width: '80px', textAlign: 'center' }}
+                              >
+                                {MasterData.commercialInvoiceDate}
+                              </td>
+                              <td style={{ width: '150px' }}>
+                                {MasterData.invoiceNumber}
+                              </td>
+                              <td
+                                style={{ width: '50px', textAlign: 'center' }}
+                              >
+                                {MasterData.name}
+                              </td>
+                              <td
+                                style={{ width: '100px', textAlign: 'center' }}
+                              >
+                                {MasterData.incoterms}
+                              </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>
+                              <td style={{ textAlign: 'center' }}>
+                                {getUser(MasterData.clasificador)}
+                              </td>
+                            </tr>
+                            {MasterData.max ? (
+                              <tr
+                                className={
+                                  MasterData.max === true
+                                    ? 'masterSelected2'
+                                    : 'normalSelected2'
+                                }
+                              >
+                                <th colSpan={17}>
+                                  <table
+                                    className="childTable"
+                                    style={{ width: '1450px' }}
+                                  >
+                                    <thead>
+                                      <tr>
+                                        <th
+                                          style={{
+                                            width: '50px',
+                                            backgroundColor: '#FFFFFF',
+                                            color: '#346288'
+                                          }}
+                                        ></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'
+                                          }}
+                                        >
+                                          Pedimento Description
+                                        </th>
+                                        <th
+                                          style={{
+                                            width: '200px',
+                                            backgroundColor: '#D3E0EA',
+                                            color: '#346288',
+                                            textAlign: 'center'
+                                          }}
+                                        >
+                                          Destination HTS Code
+                                        </th>
+                                        <th
+                                          style={{
+                                            width: '120px',
+                                            backgroundColor: '#D3E0EA',
+                                            color: '#346288',
+                                            textAlign: 'center'
+                                          }}
+                                        >
+                                          Valida
+                                        </th>
+                                        <th
+                                          style={{
+                                            width: '120px',
+                                            backgroundColor: '#D3E0EA',
+                                            color: '#346288',
+                                            textAlign: 'center'
+                                          }}
+                                        >
+                                          Confirme fraccion
+                                        </th>
+                                        <th
+                                          style={{
+                                            width: '120px',
+                                            backgroundColor: '#D3E0EA',
+                                            color: '#346288',
+                                            textAlign: 'center'
+                                          }}
+                                        >
+                                          Fraccion GEMCO
+                                        </th>
+                                        <th
+                                          style={{
+                                            width: '120px',
+                                            backgroundColor: '#D3E0EA',
+                                            color: '#346288',
+                                            textAlign: 'center'
+                                          }}
+                                        >
+                                          Confirme descripcion
+                                        </th>
+                                        <th
+                                          style={{
+                                            width: '70px',
+                                            backgroundColor: '#D3E0EA',
+                                            color: '#346288',
+                                            textAlign: 'center'
+                                          }}
+                                        >
+                                          Descripcion GEMCO
+                                        </th>
+                                        <th
+                                          style={{
+                                            width: '70px',
+                                            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'
+                                          }}
+                                        >
+                                          Autorizado
+                                        </th>
+                                        <th
+                                          style={{
+                                            width: '70px',
+                                            backgroundColor: '#D3E0EA',
+                                            color: '#346288'
+                                          }}
+                                        >
+                                          RN
+                                        </th>
+                                        <th
+                                          style={{
+                                            width: '70px',
+                                            backgroundColor: '#D3E0EA',
+                                            color: '#346288'
+                                          }}
+                                        >
+                                          Comm
+                                        </th>
+                                      </tr>
+                                    </thead>
+                                    <tbody>
+                                      {mInvoices.map((MD) => {
+                                        return (
+                                          <>
+                                            {MD.detail
+                                              .filter(
+                                                (detail) =>
+                                                  MasterData.id ===
+                                                  detail.idHeader
+                                              )
+                                              .map((detail) => {
+                                                return (
+                                                  <RtpPendingAnswerFromAmazonDetail
+                                                    IDMaster={MasterData.id}
+                                                    detail={detail}
+                                                    Habilitado={
+                                                      MasterData.estatus <= 1
+                                                    }
+                                                  />
+                                                )
+                                              })}
+                                          </>
+                                        )
+                                      })}
+                                    </tbody>
+                                  </table>
+                                </th>
+                              </tr>
+                            ) : null}
+                          </>
+                        )
+                      })
+                  : null}
+              </tbody>
+            </Table>
+          </div>
+        </Card.Body>
+      </Card>
+
+      <Modal
+        show={ShowModal}
+        onHide={() => {
+          setShowModal(false)
+        }}
+        size={'sm'}
+        dialogClassName={'modal-50w'}
+      >
+        <Modal.Body>
+          <div style={{ height: '180px' }}>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={1}></Col>
+              <Col xs={10}>
+                <Alert key={'danger'} variant={'danger'}>
+                  La factura esta lista para terminarse, desea terminarla?
+                </Alert>
+              </Col>
+              <Col xs={1}></Col>
+            </Row>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={6} style={{ textAlign: 'center' }}>
+                <Button
+                  variant="secondary"
+                  onClick={() => {
+                    setShowModal(false)
+                  }}
+                >
+                  &nbsp;&nbsp;No&nbsp;&nbsp;
+                </Button>
+              </Col>
+              <Col xs={6} style={{ textAlign: 'center' }}>
+                <Button
+                  variant="danger"
+                  onClick={() => {
+                    //downloadExcel(IDFactura)
+                    TerminadeClasificar()
+                  }}
+                >
+                  &nbsp;&nbsp;Si&nbsp;&nbsp;
+                </Button>
+              </Col>
+            </Row>
+          </div>
+        </Modal.Body>
+      </Modal>
+
+      <Modal
+        show={ShowModalAnswerFile}
+        onHide={() => {
+          setShowModalAnswerFile(false)
+        }}
+        size={'sm'}
+        dialogClassName={'modal-50w'}
+      >
+        <Modal.Body>
+          <div style={{ height: '330px' }}>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={12}>
+                <Alert
+                  key={'danger'}
+                  variant={'danger'}
+                  style={{ textAlign: 'center' }}
+                >
+                  <h4>Proporcione el archivo de respuesta de Amazon</h4>
+                </Alert>
+              </Col>
+            </Row>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col></Col>
+              <Col xs={10} style={{ textAlign: 'center' }}>
+                <MFileManager
+                  IDTrafico={IDFactura}
+                  Proceso={IDProcess}
+                  showPreview={3}
+                  canEdit={true}
+                  Leyenda="Sube archivos de respuesta de Amazon" onAppendMFM={function (Files: IFileManager[]): void {
+                    setAmazonAnswerFile(Files)
+                    setConfirmApplyAnswerFile(true)
+                  }}/>
+              </Col>
+              <Col></Col>
+            </Row>
+          </div>
+        </Modal.Body>
+      </Modal>
+
+      <Modal
+        show={ConfirmApplyAnswerFile}
+        onHide={() => {
+          setConfirmApplyAnswerFile(false)
+        }}
+        size={'sm'}
+        dialogClassName={'modal-50w'}
+      >
+        <Modal.Body>
+          <div style={{ height: '330px' }}>
+            <Row style={{ paddingTop: '50px' }}>
+              <Col xs={12}>
+                <Alert
+                  key={'danger'}
+                  variant={'danger'}
+                  style={{ textAlign: 'center' }}
+                >
+                 <h4>Desea aplicar el archivo de respuesta de Amazon?</h4>
+                </Alert>
+              </Col>
+            </Row>
+            <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"
+                  onClick={() => {
+                    setShowModalAnswerFile(false)
+                    setConfirmApplyAnswerFile(false)
+                  }}
+                >
+                  &nbsp;&nbsp;&nbsp;No&nbsp;&nbsp;&nbsp;
+                </Button>
+              </Col>
+              <Col xs={6} style={{ textAlign: 'center' }}>
+              <Button
+                  variant="danger" size="lg"
+                  onClick={() => {
+                    setShowModalAnswerFile(false)
+                    ApplyAnswerFiles2Invoice()
+                    setConfirmApplyAnswerFile(false)                    
+                  }}
+                >
+                  &nbsp;&nbsp;&nbsp;Si&nbsp;&nbsp;&nbsp;
+                </Button>
+              </Col>
+            </Row>
+          </div>
+        </Modal.Body>
+      </Modal>
+
+      <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: WaitingMessage === 'Generando...' ? '150px' : '0px',
+              width: WaitingMessage === 'Generando...' ? '150px' : '0px'
+            }}
+            alt="proccessing"
+          />
+          {WaitingMessage}
+          <div style={{ overflow: 'auto' }}>
+            <table>
+              <tr>
+                <td style={{ backgroundColor: '#6095BF', color: '#FFFFFF' }}>
+                  Parte
+                </td>
+                <td style={{ backgroundColor: '#6095BF', color: '#FFFFFF' }}>
+                  Lista de facturas
+                </td>
+              </tr>
+              {ResumeData
+                ? ResumeData.map((data) => {
+                    return (
+                      <>
+                        <tr>
+                          <td>{data.parte}</td>
+                          <td>{data.facturas.replaceAll(Factura, '')}</td>
+                        </tr>
+                      </>
+                    )
+                  })
+                : ''}
+            </table>
+          </div>
+        </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/Clasification/WaitingAnswerFromAmazon/RptPendingAnswerFromAmazonDetail.tsx

@@ -0,0 +1,621 @@
+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 { 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'
+import I2096Detail from '../../../Interfaces/I2096Detail'
+import I2096Headers from '../../../Interfaces/I2096Header'
+import DSAmazon from '../../../Services/Amazon.Services'
+// Redux
+import { RootState } from '../../../../../../store/store'
+import { useDispatch, useSelector } from 'react-redux'
+import { updateInvoice } from '../../../../../../store/features/Clientes/2096/AmazonInvoices'
+import * as CurrencyFormat from 'react-currency-format'
+import { AiOutlineFileSearch } from 'react-icons/ai'
+import { BsFillChatRightTextFill } from 'react-icons/bs'
+import DTO2096FraccionDescripcion from '../../../DTO/DTO2096FraccionDescripcion'
+
+export interface IRptPendingAnswerFromAmazonDetailProps {
+  IDMaster: number
+  detail: I2096Detail
+  Habilitado: boolean
+}
+
+export default function RptPendingAnswerFromAmazonDetail(
+  props: IRptPendingAnswerFromAmazonDetailProps
+) {
+  const dispatch = useDispatch()
+  const mInvoices = useSelector(
+    (state: RootState) => state.AmazonInvoices.Invoice
+  )
+  const [ShowModal, setShowModal] = useState(false)
+  const [EstatusSwith, setEstatusSwitch] = useState(props.detail.autorizado)
+  const [Fraccion, setFraccion] = useState(props.detail.fraccionGEMCO)
+  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 [msg, setMsg] = useState('')
+  const [CumplimientoNormativo, setCumplimientoNormativo] = useState(
+    props.detail.cumplimientoNormativo ? props.detail.cumplimientoNormativo : ''
+  )
+  const [Comentarios, setComentarios] = useState(
+    props.detail.comentarios
+      ? props.detail.comentarios
+      : 'Clasificacion Incorrecta'
+  )
+  const msgColor = 'primary'
+  const openLink = (item: string) => {
+    window.open('https://www.amazon.com/dp/' + item)
+  }
+
+  const UpdateInfo = (Invoice: I2096Headers, Detail: I2096Detail[]) => {
+    const updatedInvoice: I2096Headers = {
+      id: props.IDMaster,
+      referencia: Invoice.referencia,
+      commercialInvoiceDate: Invoice.commercialInvoiceDate,
+      invoiceNumber: Invoice.invoiceNumber,
+      name: Invoice.name,
+      trailerNumber: Invoice.trailerNumber,
+      trailerId: Invoice.trailerId,
+      porOfLoading: Invoice.porOfLoading,
+      portOfEntry: Invoice.portOfEntry,
+      paymentsTerms: Invoice.paymentsTerms,
+      incoterms: Invoice.incoterms,
+      hawb: Invoice.hawb,
+      totalInvoiceQuantityUnitOfMeasure:
+        Invoice.totalInvoiceQuantityUnitOfMeasure,
+      totalInvoiceQuantity: Invoice.totalInvoiceQuantity,
+      totalInvoiceWeightUnitOfMeasure: Invoice.totalInvoiceWeightUnitOfMeasure,
+      totalInvoiceWeight: Invoice.totalInvoiceWeight,
+      totalInvoiceValueChargeOrAllowance:
+        Invoice.totalInvoiceValueChargeOrAllowance,
+      totalInvoiceValueCurrencyISOCode:
+        Invoice.totalInvoiceValueCurrencyISOCode,
+      totalInvoiceValueMonetaryAmount: Invoice.totalInvoiceValueMonetaryAmount,
+      footNote: Invoice.footNote,
+      archivo: Invoice.archivo,
+      fCreacion: Invoice.fCreacion,
+      clasificador: Invoice.clasificador,
+      noVuelta: Invoice.noVuelta,
+      estatus: Invoice.estatus,
+      max: true,
+      urgente: Invoice.urgente,
+      detail: Detail
+    }
+    dispatch(updateInvoice(updatedInvoice))
+  }
+
+  const editArray = (id: number, valor: boolean) => {
+    const Invoice = mInvoices
+      .filter((el) => el.id === props.IDMaster)
+      .map((el) => {
+        return el
+      })
+    const newDetail = Invoice[0].detail.map((el) => {
+      if (el.id === id) {
+        return {
+          ...el,
+          fraccionGEMCO: Fraccion,
+          autorizado: valor
+        }
+      }
+      return el
+    })
+    UpdateInfo(Invoice[0], newDetail)
+  }
+
+  const autoriceItem = (id: number) => {
+    if (EstatusSwith) {
+      if (Comentarios.length === 0) {
+        setHeader('Error')
+        setMsg(
+          'Antes de poder guardar la informacion es necesario que proporcione los comentarios'
+        )
+        setShowMsg(true)
+        return
+      }
+      if (DescripcionGEMCO.length === 0) {
+        setHeader('Error')
+        setMsg(
+          'Antes de poder guardar la informacion es necesario que proporcione la descripcion GEMCO'
+        )
+        setShowMsg(true)
+        return
+      }
+      DSAmazon.ValidaFraccionGET(Fraccion)
+      .then((response) => {
+        if (response.data.respuesta === 'Si') {
+          const data: DTO2096FraccionDescripcion = {
+            id: id,
+            fraccion: Fraccion,
+            cumplimientoNormativo: CumplimientoNormativo,
+            comentarios: Comentarios,
+            descripcionGEMCO: DescripcionGEMCO
+          }
+          DSAmazon.AutorizaItemFacturaAmazon(data)
+            .then((response) => {
+              editArray(id, !props.detail.autorizado)
+              setShowModal(false)
+            })
+            .catch((e: Error) => {})
+        } else {
+          alert(
+            'Esa fraccion no existe, favor de verificarla antes de guardarla'
+          )
+          return
+        }
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg(
+          'Ocurrio un error' + e.message.toString()
+        )
+        setShowMsg(true)
+        return
+      })
+
+    }
+
+
+ 
+  }
+
+  useEffect(() => {
+    if (UserChanged && EstatusSwith && !props.detail.fraccionGEMCO)
+      autoriceItem(props.detail.id)
+  }, [EstatusSwith, UserChanged])
+
+  const ColorSET = (value: number, mode: number) => {
+    switch (mode) {
+      case 1: {
+        // Background color
+        if (value === 1) return '#FFFAF2'
+        else if (value === 2) return '#E5F7B6'
+        else if (value === 3) return '#E9F3FC'
+        break
+      }
+      case 2: {
+        // Border color
+        if (value === 1) return '2px solid #F9A721'
+        else if (value === 2) return '2px solid green'
+        else if (value === 3) return '2px solid blue'
+        break
+      }
+      case 3: {
+        // Color
+        if (value === 1) return '#5923F6'
+        if (value === 2) return '#000000'
+        if (value === 3) return 'blue'
+        break
+      }
+    }
+  }
+
+  return (
+    <>
+      {props.detail.confirmaFraccion === 2 ? (
+        <tr>
+          <th
+            style={{
+              width: '50px',
+              backgroundColor: '#FFFFFF'
+            }}
+            className="DetailData"
+          >
+            &nbsp;
+          </th>
+          <td
+            style={{
+              textAlign: 'center',
+              cursor: 'pointer'
+            }}
+            className="DetailData"
+            onClick={() => openLink(props.detail.itemId)}
+          >
+            {props.detail.itemId}
+          </td>
+          <td
+            style={{
+              textAlign: 'right'
+            }}
+            className="DetailData"
+          >
+            {props.detail.itemDescription}
+          </td>
+          <td
+            style={{
+              textAlign: 'right'
+            }}
+            className="DetailData"
+          >
+            {props.detail.pedimentoDescription}
+          </td>
+          <td
+            style={{
+              textAlign: 'center',
+              fontSize: '18px'
+            }}
+            className="DetailData"
+          >
+            &nbsp;&nbsp;{props.detail.destinationHTSCode}
+          </td>
+          <td
+            style={{
+              textAlign: 'center'
+            }}
+            className="DetailData"
+          >
+          </td>
+          <td
+            style={{
+              textAlign: 'center'
+            }}
+            className="DetailData"
+          >
+            <ComboFraccion
+              IDInvoice={props.IDMaster}
+              IDDetail={props.detail.id}
+              FraccionOriginal={props.detail.destinationHTSCode}
+              ConfirmaFraccion={props.detail.confirmaFraccion}
+              Deshabilitado={true}
+              Detail={props.detail}
+            />
+          </td>
+          <td
+            style={{
+              textAlign: 'center'
+            }}
+            className="DetailData"
+          >
+            <CurrencyFormat
+              value={
+                props.detail.fraccionGEMCO ? props.detail.fraccionGEMCO : ''
+              }
+              disabled={true}
+              format={'####.##.####'}
+              displayType={'input'}
+              style={{
+                fontSize: '17px',
+                backgroundColor:
+                  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',
+                textAlign: 'right',
+                borderRadius: '10px'
+              }}
+            />
+          </td>
+          <td
+            style={{
+              textAlign: 'center'
+            }}
+            className="DetailData"
+          >
+            <ComboDescripcion
+              IDInvoice={props.IDMaster}
+              IDDetail={props.detail.id}
+              DescripcionOriginal={props.detail.pedimentoDescription}
+              ConfirmaDescripcion={props.detail.confirmaDescripcion}
+              Deshabilitado={false}
+              Detail={props.detail}
+            />
+          </td>
+          <td
+            style={{
+              textAlign: 'center'
+            }}
+            className="DetailData"
+          >
+            {props.detail.descripcionGEMCO}
+          </td>
+          <td
+            style={{
+              textAlign: 'center'
+            }}
+            className="DetailData"
+          >
+            {props.detail.countryOfOrigin}
+          </td>
+          <td
+            style={{
+              textAlign: 'center'
+            }}
+            className="DetailData"
+          >
+            {props.detail.productGroup}
+          </td>
+          <td
+            style={{
+              textAlign: 'right'
+            }}
+            className="DetailData"
+          >
+            {props.detail.brand}
+          </td>
+          <td
+            style={{
+              textAlign: 'right'
+            }}
+            className="DetailData"
+          >
+            {props.detail.model}
+          </td>
+          <td
+            style={{
+              textAlign: 'center'
+            }}
+            className="DetailData"
+          >
+            {props.detail.itemQuantityUnitOfMeasure}
+          </td>
+          <td
+            style={{
+              textAlign: 'center'
+            }}
+            className="DetailData"
+          >
+            {props.detail.quantity}
+          </td>
+          <td
+            style={{
+              textAlign: 'center'
+            }}
+            className="DetailData"
+          >
+            {props.detail.weightValue}
+          </td>
+          <td
+            style={{
+              textAlign: 'center'
+            }}
+            className="DetailData"
+          >
+            {props.detail.netWeightUnitOfMeasure}
+          </td>
+          <td
+            style={{
+              textAlign: 'center'
+            }}
+            className="DetailData"
+          >
+            {props.detail.actualUnitCostMonetaryAmount}
+          </td>
+          <td
+            /*  style={{visibility: EstatusSwith ? 'hidden' : 'visible'}} */
+            className="DetailData"
+          >
+            <FormCheck
+              className="form-check form-switch form-control-lg"
+              id="switchEnabled"
+              type="switch"
+              /* disabled={
+              props.detail.fraccionGEMCO ===
+              props.detail.destinationHTSCode.replaceAll('.', '')
+            } */
+              /* disabled={EstatusSwith} */
+              disabled={false}
+              checked={EstatusSwith && props.detail.autorizado}
+              onChange={() => {
+                setEstatusSwitch(!EstatusSwith)
+                setUserChanged(true)
+                setShowModal(!EstatusSwith)
+              }}
+              label=""
+            />
+          </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>
+        </tr>
+      ) : (
+        ''
+      )}
+
+      <Modal
+        show={ShowModal}
+        onHide={() => {
+          setShowModal(false)
+        }}
+        size={'sm'}
+        dialogClassName={'modal-50w'}
+      >
+        <Modal.Body>
+          <div style={{ height: '380px' }}>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={12}>
+                <Alert key={'danger'} variant={'danger'}>
+                  <Row>
+                    <Col
+                      xs={3}
+                      style={{ fontWeight: 'bold', cursor: 'pointer' }}
+                      onClick={() => openLink(props.detail.itemId)}
+                    >
+                      ({props.detail.itemId})
+                    </Col>
+                    <Col xs={9}>
+                      ¿Esta seguro que esta fraccion ya la autorizo Amazon?
+                    </Col>
+                  </Row>
+                </Alert>
+              </Col>
+            </Row>
+            <Row>
+              <Col xs={3}>Fraccion GEMCO</Col>
+              <Col xs={3}>
+                <CurrencyFormat
+                  onValueChange={(values: any) => {
+                    const { value } = values
+                    setFraccion(value)
+                  }}
+                  format={'####.##.####'}
+                  value={Fraccion}
+                  displayType={'input'}
+                  style={{
+                    fontSize: '18px',
+                    backgroundColor: '#F1EEF9',
+                    border: '2px solid #5923F6',
+                    color: '#5923F6',
+                    width: '120px',
+                    textAlign: 'right',
+                    borderRadius: '10px'
+                  }}
+                />
+              </Col>
+              <Col xs={6}></Col>
+            </Row>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={3}>Cumplimiento normativo</Col>
+              <Col xs={8}>
+                {' '}
+                <Form.Control
+                  as="textarea"
+                  id="RequerimientoNormativo"
+                  size="sm"
+                  value={CumplimientoNormativo}
+                  onChange={(e) => setCumplimientoNormativo(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={Comentarios}
+                  onChange={(e) => setComentarios(e.target.value)}
+                />
+              </Col>
+              <Col>&nbsp;</Col>
+            </Row>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={3}>Descripcion GEMCO</Col>
+              <Col xs={8}>
+                <Form.Control
+                  as="textarea"
+                  id="PedimentoDescripcion"
+                  size="sm"
+                  value={DescripcionGEMCO}
+                />
+              </Col>
+            </Row>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={6} style={{ textAlign: 'center' }}>
+                <Button
+                  variant="secondary"
+                  onClick={() => {
+                    setEstatusSwitch(!EstatusSwith)
+                    setShowModal(false)
+                  }}
+                >
+                  &nbsp;&nbsp;No&nbsp;&nbsp;
+                </Button>
+              </Col>
+              <Col xs={6} style={{ textAlign: 'center' }}>
+                <Button
+                  variant="danger"
+                  onClick={() => {
+                    autoriceItem(props.detail.id)
+                  }}
+                >
+                  &nbsp;&nbsp;Si&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

@@ -0,0 +1,505 @@
+import * as React from 'react'
+import { useEffect, useState } from 'react'
+import { RootState } from '../../../../../store/store'
+import DSAmazon from '../../Services/Amazon.Services'
+// Redux
+import { useDispatch, useSelector } from 'react-redux'
+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 { 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 DTO2096InvoiceStatus from '../../DTO/DTO2096InvoiceStatus'
+import IFileManager from '../../../../../Interfaces/Utils/IFileManager'
+
+export interface IRptAmazonInvoiceStatusProps {
+}
+
+export default function RptAmazonInvoiceStatus (props: IRptAmazonInvoiceStatusProps) {
+    const dispatch = useDispatch()
+    const mInvoices = useSelector(
+      (state: RootState) => state.AmazonInvoices.Invoice
+    )
+    const [header, setHeader] = useState('')
+    const [Referencia, setReferencia] = useState('')
+    const [Factura, setFactura] = useState('')
+    const [Inicio, setInicio] = useState(currentDate())
+    const [Fin, setFin] = useState(currentDate())
+    const [Data, setData] = useState<DTO2096InvoiceStatus[]>([])
+    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'
+  
+    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 = () => {
+      if (Factura.length==0) {
+        setHeader('Error')
+        setMsg('Para continuar, proporcione la factura a buscar')
+        setShowMsg(true)
+        return
+      }
+      DSAmazon.AmazonInvoiceStatusGET(Factura)
+        .then((response) => {
+          setData(response.data)
+        })
+        .catch((e: Error) => {
+          alert('Ocurrio un error' + e.message.toString())
+        })
+    }
+  
+    const downloadPDF = (id: number, InvoiceNumber: string) => {
+      setWaitingDialog(true)
+      setWaitingMessage(' archivo PDF ')
+      DSAmazon.PDFAmazonInvoiceGET(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', 'FAC_' + InvoiceNumber + '.pdf')
+            document.body.appendChild(link)
+            link.click()
+            setWaitingDialog(false)
+          }
+        })
+        .catch((e: Error) => {
+          setHeader('Error')
+          setMsg('Ocurrio un error')
+          setShowMsg(true)
+          return
+        })
+    }
+  
+    const downloadExcelInvoices = (Referencia: string) => {
+      setWaitingMessage(' archivo Excel ')
+      DSAmazon.GETAmazonFacturasByReference(Referencia)
+        .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', Referencia + '_FACTURAS_MODIFICA.xls')
+            document.body.appendChild(link)
+            link.click()
+            loadReport()
+          }
+        })
+        .catch((e: Error) => {
+          setHeader('Error')
+          setMsg('Ocurrio un error')
+          setShowMsg(true)
+          return
+        })
+    }
+  
+    const downloadExcelPartidas = (Referencia: string) => {
+      setWaitingMessage(' archivo Excel ')
+      DSAmazon.GETAmazonPartidasByReference(Referencia)
+        .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', Referencia + '_PARTIDAS_MODIFICA.xls')
+            document.body.appendChild(link)
+            link.click()
+            loadReport()
+          }
+        })
+        .catch((e: Error) => {
+          setHeader('Error')
+          setMsg('Ocurrio un error')
+          setShowMsg(true)
+          return
+        })
+    }
+  
+    const downloadNoPartes = (id: number, Factura: string) => {
+      DSAmazon.NoPartesAmazon2SIRGET(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',
+              'Plantilla de partes ' + Factura + '.xls'
+            )
+            document.body.appendChild(link)
+            link.click()
+            setWaitingDialog(false)
+          }
+        })
+        .catch((e: Error) => {
+          setHeader('Error')
+          setMsg('Ocurrio un error')
+          setShowMsg(true)
+          return
+        })
+    }
+
+    const downloadACKFile = (id: number, filename: string) => {
+      DSAmazon.GETACKFileById(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',filename)
+          document.body.appendChild(link)
+          link.click()
+          //loadReport()
+        }
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error')
+        setShowMsg(true)
+        return
+      })
+    }
+
+    const getOnlyDate = (dt: string) => {
+      return dt ? dt.substring(0, 16) : ''
+    }
+  
+    return (
+      <div>
+        <Card>
+          <Card.Body>
+            <Row>
+              <Col xs={5}>
+                <Card.Title>
+                  <IconContext.Provider value={{ color: '#F6C34F', size: '8%' }}>
+                    <FaAmazon />
+                  </IconContext.Provider>
+                  Operaciones Pagadas
+                </Card.Title>
+              </Col>
+              <Col></Col>
+              <Col style={{textAlign:'right'}}>Factura</Col>
+              <Col xs={3}>
+                <Form.Control
+                  defaultValue={Factura}
+                  name="Factura"
+                  placeholder="Factura"
+                  title="Factura"
+                  alt="Factura"
+                  onChange={(e) => setFactura(e.target.value)}
+                  size="sm"
+                />
+              </Col>
+              <Col style={{textAlign:'right'}} onClick={()=>{loadReport()}}><Button variant="primary">Buscar</Button></Col>
+            </Row>
+          </Card.Body>
+        </Card>
+  
+        <Card>
+          <Card.Body>
+            <div className="MDcontainer">
+              <Table className="MDTable" hover>
+                <thead style={{ position: 'sticky', top: '0' }}>
+                  <tr>
+                    <th style={{ width: '50px' }}>id</th>
+                    <th style={{ width: '50px' }}>PDF</th>
+                    <th style={{ width: '50px' }}>Facturas</th>
+                    <th style={{ width: '50px' }}>Partidas</th>
+                    <th style={{ width: '50px' }}>Arch Excep.</th>
+                    <th style={{ width: '50px' }}>No Partes</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' }}>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>Fecha pago</th>
+                    <th>Patente</th>
+                    <th>Aduana</th>
+                    <th>Pedimento</th>
+                    <th>Estatus</th>
+                    <th style={{ width: '150px' }}>ACK</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {Data
+                    ? Data.map((MasterData) => {
+                        return (
+                          <>
+                            <tr
+                              style={{ cursor: 'pointer', height: '25px' }}
+                              className={'normalSelected'}
+                            >
+                              <td
+                                style={{
+                                  textAlign: 'right',
+                                  paddingRight: '10px'
+                                }}
+                              >
+                                {MasterData.id}
+                              </td>
+                              <td style={{ width: '50px', textAlign: 'center' }}>
+                                <div
+                                  onClick={() => {
+                                    downloadPDF(
+                                      MasterData.id,
+                                      MasterData.invoiceNumber
+                                    )
+                                  }}
+                                >
+                                  <IconContext.Provider
+                                    value={{ color: 'red', size: '20px' }}
+                                  >
+                                    <BsFilePdfFill />
+                                  </IconContext.Provider>
+                                </div>
+                              </td>
+                              <td
+                                style={{
+                                  width: '50px',
+                                  textAlign: 'center',
+                                  visibility: MasterData.referencia
+                                    ? 'visible'
+                                    : 'hidden'
+                                }}
+                              >
+                                <div
+                                  onClick={() => {
+                                    downloadExcelInvoices(MasterData.referencia)
+                                  }}
+                                >
+                                  <IconContext.Provider
+                                    value={{ color: 'green', size: '20px' }}
+                                  >
+                                    <AiFillFileExcel />
+                                  </IconContext.Provider>
+                                </div>
+                              </td>
+                              <td
+                                style={{
+                                  width: '50px',
+                                  textAlign: 'center',
+                                  visibility: MasterData.referencia
+                                    ? 'visible'
+                                    : 'hidden'
+                                }}
+                              >
+                                <div
+                                  onClick={() => {
+                                    downloadExcelPartidas(MasterData.referencia)
+                                  }}
+                                >
+                                  <IconContext.Provider
+                                    value={{ color: 'green', size: '20px' }}
+                                  >
+                                    <AiFillFileExcel />
+                                  </IconContext.Provider>
+                                </div>
+                              </td>
+                              <td
+                                style={{
+                                  width: '50px',
+                                  textAlign: 'center',
+                                  visibility: MasterData.referencia
+                                    ? 'visible'
+                                    : 'hidden'
+                                }}
+                              >
+                                <div
+                                  onClick={() => {
+                                    setIDFactura(MasterData.id)
+                                    setShowModalAnswerFile(true)
+                                  }}
+                                >
+                                  <IconContext.Provider
+                                    value={{ color: 'orange', size: '20px' }}
+                                  >
+                                    <AiFillFileExcel />
+                                  </IconContext.Provider>
+                                </div>
+                              </td>
+                              <td
+                                style={{
+                                  width: '50px',
+                                  textAlign: 'center',
+                                  visibility: MasterData.referencia
+                                    ? 'visible'
+                                    : 'hidden'
+                                }}
+                              >
+                                <div
+                                  onClick={() => {
+                                    downloadNoPartes(
+                                      MasterData.id,
+                                      MasterData.invoiceNumber
+                                    )
+                                  }}
+                                >
+                                  <IconContext.Provider
+                                    value={{ color: 'blue', size: '20px' }}
+                                  >
+                                    <AiFillFileExcel />
+                                  </IconContext.Provider>
+                                </div>
+                              </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' }}>
+                                {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={{ textAlign: 'center' }}>
+                                {MasterData.fPago.substring(0,10)}
+                              </td>
+                              <td style={{ textAlign: 'center', width:'100px' }}>
+                                {MasterData.patente}
+                              </td>
+                              <td style={{ textAlign: 'center', width:'60px' }}>
+                                {MasterData.aduana}
+                              </td>
+                              <td style={{ textAlign: 'center', width:'100px' }}>
+                                {MasterData.pedimento}
+                              </td>
+                              <td style={{ textAlign: 'center', width:'200px' }}>
+                                {MasterData.estatus}
+                              </td>
+                              <td
+                              style={{ textAlign: 'center', width: '100px' }}
+                              onClick={() => {
+                                downloadACKFile(MasterData.idArchivoACK, MasterData.archivoACK)
+                              }}
+                            >
+                              {getOnlyDate(MasterData.fhArchivoACK)}
+                            </td>
+                            </tr>
+                          </>
+                        )
+                      })
+                    : 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>
+  
+        <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/Payed/RptAmazonPayedOperations.tsx

@@ -0,0 +1,569 @@
+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 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'
+
+export interface IRptAmazonPayedOpereationsProps {}
+
+export default function RptAmazonPayedOpereations(
+  props: IRptAmazonPayedOpereationsProps
+) {
+  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<DTO2096RptPayedOperations[]>([])
+  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'
+
+  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.AmazonPayedOperationsGET(Inicio, Fin)
+      .then((response) => {
+        setData(response.data)
+      })
+      .catch((e: Error) => {
+        alert('Ocurrio un error' + e.message.toString())
+      })
+  }
+
+  const downloadPDF = (id: number, InvoiceNumber: string) => {
+    setWaitingDialog(true)
+    setWaitingMessage(' archivo PDF ')
+    DSAmazon.PDFAmazonInvoiceGET(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', 'FAC_' + InvoiceNumber + '.pdf')
+          document.body.appendChild(link)
+          link.click()
+          setWaitingDialog(false)
+        }
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error')
+        setShowMsg(true)
+        return
+      })
+  }
+
+  const downloadExcelInvoices = (Referencia: string) => {
+    setWaitingMessage(' archivo Excel ')
+    DSAmazon.GETAmazonFacturasByReference(Referencia)
+      .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', Referencia + '_FACTURAS_MODIFICA.xls')
+          document.body.appendChild(link)
+          link.click()
+          loadReport()
+        }
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error')
+        setShowMsg(true)
+        return
+      })
+  }
+
+  const downloadExcelPartidas = (Referencia: string) => {
+    setWaitingMessage(' archivo Excel ')
+    DSAmazon.GETAmazonPartidasByReference(Referencia)
+      .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', Referencia + '_PARTIDAS_MODIFICA.xls')
+          document.body.appendChild(link)
+          link.click()
+          loadReport()
+        }
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error')
+        setShowMsg(true)
+        return
+      })
+  }
+
+  const downloadNoPartes = (id: number, Factura: string) => {
+    DSAmazon.NoPartesAmazon2SIRGET(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',
+            'Plantilla de partes ' + Factura + '.xls'
+          )
+          document.body.appendChild(link)
+          link.click()
+          setWaitingDialog(false)
+        }
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error')
+        setShowMsg(true)
+        return
+      })
+  }
+
+  const getOnlyDate = (dt: string) => {
+    return dt ? dt.substring(0, 16) : ''
+  }
+
+  const downloadACKFile = (id: number, filename: string) => {
+    DSAmazon.GETACKFileById(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',filename)
+        document.body.appendChild(link)
+        link.click()
+        //loadReport()
+      }
+    })
+    .catch((e: Error) => {
+      setHeader('Error')
+      setMsg('Ocurrio un error')
+      setShowMsg(true)
+      return
+    })
+  }
+
+  const createACKFile = (referencia: string) => {
+    DSAmazon.CreateACKFile(referencia)
+    .then((response: any) => {
+      DSAmazon.UploadACKFile2Amazon(referencia)
+      .then((response: any) => {
+        setHeader('Informativo')
+        setMsg('Se envio el archivo ACK a Amazon')
+        setShowMsg(true)
+        loadReport()
+        return
+      })
+      .catch((e: Error) => {
+        console.log(JSON.stringify(e))
+        setHeader('Error')
+        setMsg('Ocurrio un error '+e)
+        setShowMsg(true)
+        return
+      })
+    })
+    .catch((e: Error) => {
+      setHeader('Error')
+      setMsg('Ocurrio un error')
+      setShowMsg(true)
+      return
+    })
+  }
+
+  useEffect(() => {
+    loadReport()
+  }, [])
+
+  return (
+    <div>
+      <Card>
+        <Card.Body>
+          <Row>
+            <Col xs={5}>
+              <Card.Title>
+                <IconContext.Provider value={{ color: '#F6C34F', size: '8%' }}>
+                  <FaAmazon />
+                </IconContext.Provider>
+                Operaciones Pagadas
+              </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={() => {
+                loadReport()
+              }}
+            >
+              <Button variant="primary">Buscar</Button>
+            </Col>
+          </Row>
+        </Card.Body>
+      </Card>
+
+      <Card>
+        <Card.Body>
+          <div className="MDcontainer">
+            <Table className="MDTable" hover>
+              <thead style={{ position: 'sticky', top: '0' }}>
+                <tr>
+                  <th style={{ width: '50px' }}>id</th>
+                  <th style={{ width: '50px' }}>PDF</th>
+                  <th style={{ width: '50px' }}>Facturas</th>
+                  <th style={{ width: '50px' }}>Partidas</th>
+                  <th style={{ width: '50px' }}>Arch Excep.</th>
+                  <th style={{ width: '50px' }}>No Partes</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' }}>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>Fecha pago</th>
+                  <th>Patente</th>
+                  <th>Aduana</th>
+                  <th>Pedimento</th>
+                  <th style={{ width: '150px' }}>ACK</th>
+                </tr>
+              </thead>
+              <tbody>
+                {Data
+                  ? Data.map((MasterData) => {
+                      return (
+                        <>
+                          <tr
+                            style={{ cursor: 'pointer', height: '25px' }}
+                            className={'normalSelected'}
+                          >
+                            <td
+                              style={{
+                                textAlign: 'right',
+                                paddingRight: '10px'
+                              }}
+                            >
+                              {MasterData.id}
+                            </td>
+                            <td style={{ width: '50px', textAlign: 'center' }}>
+                              <div
+                                onClick={() => {
+                                  downloadPDF(
+                                    MasterData.id,
+                                    MasterData.invoiceNumber
+                                  )
+                                }}
+                              >
+                                <IconContext.Provider
+                                  value={{ color: 'red', size: '20px' }}
+                                >
+                                  <BsFilePdfFill />
+                                </IconContext.Provider>
+                              </div>
+                            </td>
+                            <td
+                              style={{
+                                width: '50px',
+                                textAlign: 'center',
+                                visibility: MasterData.referencia
+                                  ? 'visible'
+                                  : 'hidden'
+                              }}
+                            >
+                              <div
+                                onClick={() => {
+                                  downloadExcelInvoices(MasterData.referencia)
+                                }}
+                              >
+                                <IconContext.Provider
+                                  value={{ color: 'green', size: '20px' }}
+                                >
+                                  <AiFillFileExcel />
+                                </IconContext.Provider>
+                              </div>
+                            </td>
+                            <td
+                              style={{
+                                width: '50px',
+                                textAlign: 'center',
+                                visibility: MasterData.referencia
+                                  ? 'visible'
+                                  : 'hidden'
+                              }}
+                            >
+                              <div
+                                onClick={() => {
+                                  downloadExcelPartidas(MasterData.referencia)
+                                }}
+                              >
+                                <IconContext.Provider
+                                  value={{ color: 'green', size: '20px' }}
+                                >
+                                  <AiFillFileExcel />
+                                </IconContext.Provider>
+                              </div>
+                            </td>
+                            <td
+                              style={{
+                                width: '50px',
+                                textAlign: 'center',
+                                visibility: MasterData.referencia
+                                  ? 'visible'
+                                  : 'hidden'
+                              }}
+                            >
+                              <div
+                                onClick={() => {
+                                  setIDFactura(MasterData.id)
+                                  setShowModalAnswerFile(true)
+                                }}
+                              >
+                                <IconContext.Provider
+                                  value={{ color: 'orange', size: '20px' }}
+                                >
+                                  <AiFillFileExcel />
+                                </IconContext.Provider>
+                              </div>
+                            </td>
+                            <td
+                              style={{
+                                width: '50px',
+                                textAlign: 'center',
+                                visibility: MasterData.referencia
+                                  ? 'visible'
+                                  : 'hidden'
+                              }}
+                            >
+                              <div
+                                onClick={() => {
+                                  downloadNoPartes(
+                                    MasterData.id,
+                                    MasterData.invoiceNumber
+                                  )
+                                }}
+                              >
+                                <IconContext.Provider
+                                  value={{ color: 'blue', size: '20px' }}
+                                >
+                                  <AiFillFileExcel />
+                                </IconContext.Provider>
+                              </div>
+                            </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' }}>
+                              {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={{ textAlign: 'center' }}>
+                              {MasterData.fPago.substring(0, 10)}
+                            </td>
+                            <td style={{ textAlign: 'center', width: '100px' }}>
+                              {MasterData.patente}
+                            </td>
+                            <td style={{ textAlign: 'center', width: '60px' }}>
+                              {MasterData.aduana}
+                            </td>
+                            <td style={{ textAlign: 'center', width: '100px' }}>
+                              {MasterData.pedimento}
+                            </td>
+                            {MasterData.archivoACK==='' ?
+                            <td style={{textAlign:'center'}}>
+                              <div
+                                onClick={() => { createACKFile(MasterData.referencia) }}
+                              >
+                                <IconContext.Provider
+                                  value={{ color: 'orange', size: '22px' }}
+                                >
+                                  <GoGear />
+                                </IconContext.Provider>
+                              </div>
+                            </td>
+                            :
+                            <td
+                              style={{ textAlign: 'center', width: '100px' }}
+                              onClick={() => {
+                                downloadACKFile(MasterData.idArchivoACK, MasterData.archivoACK)
+                              }}
+                            >
+                              {getOnlyDate(MasterData.fhArchivoACK)}
+                            </td>
+                  }
+
+                          </tr>
+                        </>
+                      )
+                    })
+                  : 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>
+
+      <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/Traffic/Linking/RptAmazonLinkInvoice2Traffic.tsx

@@ -0,0 +1,970 @@
+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 I2096Headers from '../../../Interfaces/I2096Header'
+import DSAmazon from '../../../Services/Amazon.Services'
+import { MsgInformativo } from '../../../../../Utils/Toast/msgInformativo'
+import { RootState } from '../../../../../../store/store'
+import {
+  initializeInvoice,
+  populateInvoices,
+  updateInvoice
+} from '../../../../../../store/features/Clientes/2096/AmazonInvoices'
+
+// Redux
+import { useDispatch, useSelector } from 'react-redux'
+import DTO2096LinkInvoice2Reference from '../../../DTO/DTO2096LinkInvoice2Reference'
+import { AiFillFileExcel } from 'react-icons/ai'
+import RptAmazonLinkInvoice2TrafficDetail from './RptAmazonLinkInvoice2TrafficDetail'
+import loadingImg from '../../../../../../images/ajaxloader.gif'
+import * as XLSX from 'xlsx'
+
+export interface IRptAmazonLinkInvoice2TrafficProps {}
+
+export default function RptAmazonLinkInvoice2Traffic(
+  props: IRptAmazonLinkInvoice2TrafficProps
+) {
+  const dispatch = useDispatch()
+  const mInvoices = useSelector(
+    (state: RootState) => state.AmazonInvoices.Invoice
+  )
+  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 msgColor = 'primary'
+
+  const loadReport = () => {
+    DSAmazon.AmazonLinkInvoice2TrafficGet()
+      .then((response) => {
+        dispatch(initializeInvoice([]))
+        dispatch(populateInvoices(response.data))
+      })
+      .catch((e: Error) => {
+        alert('Ocurrio un error' + e.message.toString())
+      })
+  }
+
+  const downloadPDF = (id: number, InvoiceNumber: string) => {
+    setWaitingDialog(true)
+    setWaitingMessage(' archivo PDF ')
+    DSAmazon.PDFAmazonInvoiceGET(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', 'FAC_' + InvoiceNumber + '.pdf')
+          document.body.appendChild(link)
+          link.click()
+          setWaitingDialog(false)
+        }
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error')
+        setShowMsg(true)
+        return
+      })
+  }
+
+  const downloadExcelInvoices = (Referencia: string) => {
+    setWaitingMessage(' archivo Excel ')
+    DSAmazon.GETAmazonFacturasByReference(Referencia)
+      .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', Referencia + '_FACTURAS_MODIFICA.xls')
+          document.body.appendChild(link)
+          link.click()
+          loadReport()
+        }
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error')
+        setShowMsg(true)
+        return
+      })
+  }
+
+  const downloadExcelPartidas = (Referencia: string) => {
+    setWaitingMessage(' archivo Excel ')
+    DSAmazon.GETAmazonPartidasByReference(Referencia)
+      .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', Referencia + '_PARTIDAS_MODIFICA.xls')
+          document.body.appendChild(link)
+          link.click()
+          loadReport()
+        }
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error')
+        setShowMsg(true)
+        return
+      })
+  }
+
+  useEffect(() => {
+    loadReport()
+  }, [])
+
+  const check4Updates = (IDInvoice: number) => {
+    DSAmazon.SETInvoiceDetailRevalidateParts(IDInvoice)
+      .then((response) => {
+        DSAmazon.AmazonInvoiceGET(IDInvoice)
+          .then((response) => {
+            dispatch(updateInvoice(response.data[0]))
+            let Invoice: I2096Headers[] = response.data.filter(
+              (item) => item.id === IDInvoice
+            )
+            const Obj = { ...Invoice[0] }
+            Obj.max = !Obj.max
+            dispatch(updateInvoice(Obj))
+          })
+          .catch((e: Error) => {
+            setHeader('Error')
+            setMsg('Ocurrio un error')
+            return
+          })
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error')
+        return
+      })
+  }
+
+  const changeToggle = (row: I2096Headers) => {
+    let Invoice: I2096Headers[] = mInvoices.filter((item) => item.id === row.id)
+    const Obj = { ...Invoice[0] }
+    Obj.max = !Obj.max
+    dispatch(updateInvoice(Obj))
+    if (Obj.max) check4Updates(row.id)
+  }
+
+  const updateDataGrid = (IDInvoice: number) => {
+    //toggleInvoice(IDInvoice)
+    let Invoice: I2096Headers[] = mInvoices.filter(
+      (item) => item.id === IDInvoice
+    )
+    const Obj = { ...Invoice[0] }
+    Obj.max = !Obj.max
+    dispatch(updateInvoice(Obj))
+    if (Obj.max) check4Updates(IDInvoice)
+  }
+
+  const toggleInvoice = (id: number) => {
+    if (!Invoices.includes(id)) {
+      Invoices.push(id)
+    } else {
+      setInvoices(
+        Invoices.filter(function (el) {
+          return el != id
+        })
+      )
+    }
+  }
+
+  const processInvoices = () => {
+    if (Invoices.length === 0) {
+      setHeader('Error')
+      setMsg(
+        'Para poder continuar es necesario que seleccione por lo menos 1 factura'
+      )
+      setShowMsg(true)
+      return
+    }
+    setShowModal(true)
+  }
+
+  const unlinkInvoices = () => {
+    if (Invoices.length === 0) {
+      setHeader('Error')
+      setMsg(
+        'Para poder continuar es necesario que seleccione por lo menos 1 factura'
+      )
+      setShowModalUnlink(true)
+      return
+    }
+    setShowModalUnlink(true)
+  }
+
+  const asociaFacturasReferencia = () => {
+    const data: DTO2096LinkInvoice2Reference = {
+      referencia: Referencia,
+      facturas: Invoices
+    }
+    DSAmazon.AsignaFacturasReferencia(data)
+      .then((response: any) => {
+        setHeader('Confirmacion')
+        setMsg('Las facturas se asociaron correctamente con la referencia')
+        //setShowMsg(true)
+        setInvoices([])
+        setShowModal(false)
+        loadReport()
+        return
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error')
+        setShowMsg(true)
+        return
+      })
+  }
+
+  const desasociaFacturasReferencia = () => {
+    const data: DTO2096LinkInvoice2Reference = {
+      referencia: Referencia,
+      facturas: Invoices
+    }
+    DSAmazon.AsignaFacturasReferencia(data)
+      .then((response: any) => {
+        setHeader('Confirmacion')
+        setMsg('Las facturas se desasociaron correctamente')
+        // setShowMsg(true)
+        setInvoices([])
+        setShowModalUnlink(false)
+        loadReport()
+        return
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error')
+        setShowMsg(true)
+        return
+      })
+  }
+
+  function getReceiver(Cadena: string, char1: string[1], char2: string[1]) {
+    return Cadena.slice(Cadena.indexOf(char1) + 1, Cadena.lastIndexOf(char2))
+  }
+
+  const downloadExcel = () => {
+    interface IRptExcel {
+      id: number
+      referencia: string
+      commercialInvoiceDate: string
+      invoiceNumber: string
+      receiver: string
+      incoterms: string
+      hawb: string
+      totalInvoiceQuantityUnitOfMeasure: string
+      totalInvoiceQuantity: number
+      totalInvoiceWeightUnitOfMeasure: string
+      totalInvoiceWeight: string
+      totalInvoiceValueChargeOrAllowance: string
+      totalInvoiceValueCurrencyISOCode: string
+      totalInvoiceValueMonetaryAmount: string
+      totalPartidas: number
+    }
+
+    const RptExcel: IRptExcel[] = []
+    mInvoices.forEach(function (invoice) {
+      var data: IRptExcel = {
+        id: invoice.id,
+        referencia: invoice.referencia,
+        commercialInvoiceDate: invoice.commercialInvoiceDate,
+        invoiceNumber: invoice.invoiceNumber,
+        receiver: getRec(invoice.id),
+        incoterms: invoice.incoterms,
+        hawb: invoice.hawb,
+        totalInvoiceQuantityUnitOfMeasure:
+          invoice.totalInvoiceQuantityUnitOfMeasure,
+        totalInvoiceQuantity: invoice.totalInvoiceQuantity,
+        totalInvoiceWeightUnitOfMeasure:
+          invoice.totalInvoiceWeightUnitOfMeasure,
+        totalInvoiceWeight: invoice.totalInvoiceWeight,
+        totalInvoiceValueChargeOrAllowance:
+          invoice.totalInvoiceValueChargeOrAllowance,
+        totalInvoiceValueCurrencyISOCode:
+          invoice.totalInvoiceValueCurrencyISOCode,
+        totalInvoiceValueMonetaryAmount: invoice.totalInvoiceValueMonetaryAmount,
+        totalPartidas: getTotPartidas(invoice.id)
+      }
+      RptExcel.push(data)
+    })
+    //console.log(RptExcel)
+    exportExcel(RptExcel, 'Reporte de trafico - facturas terminadas')
+  }
+
+  const getRec: any = (IDInvoice: number) => {
+    const result = mInvoices
+      .filter((value) => value.id === IDInvoice)
+      .map((row) => {
+        return getReceiver(row.detail[0].amazonShipmentReferenceId, '_', '_')
+      })
+    return result[0]
+  }
+
+  const getTotPartidas: any = (IDInvoice: number) => {
+    let Tot=0;
+    const result = mInvoices
+      .filter((value) => value.id === IDInvoice)
+      .map((row) => {
+        return row.detail.length
+      })
+    return result[0]
+  }
+
+  function exportExcel(jsonData: any[], fileName: string): void {
+    let Heading = [
+      [
+        'id',
+        'Referencia',
+        'Commercial invoice date',
+        'Invoice number',
+        'Receiver',
+        'Incoterms',
+        'HAWB',
+        'Qty Unit of measure',
+        'Tot qty',
+        'Weight unit of measure',
+        'Tot weight',
+        'Tot charge or allowance',
+        'Tot currency ISO code',
+        'Tot Monetary amount',
+        'Total de partidas'
+      ]
+    ]
+    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>
+          <Row>
+            <Col xs={6}>
+              <Card.Title>
+                <IconContext.Provider value={{ color: '#F6C34F', size: '8%' }}>
+                  <FaAmazon />
+                </IconContext.Provider>{' '}
+                TRAFICO : facturas terminadas
+              </Card.Title>
+            </Col>
+            <Col>
+              <Button
+                variant="danger"
+                onClick={() => {
+                  unlinkInvoices()
+                }}
+              >
+                Desasociar
+              </Button>
+            </Col>
+            <Col></Col>
+            <Col>
+              <Button
+                variant="success"
+                onClick={() => {
+                  downloadExcel()
+                }}
+              >
+                Excel
+              </Button>
+            </Col>
+            <Col></Col>
+            <Col>
+              <Button
+                onClick={() => {
+                  processInvoices()
+                }}
+              >
+                Procesa
+              </Button>
+            </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: '50px' }}>PDF</th>
+                  <th style={{ width: '50px' }}>Facturas</th>
+                  <th style={{ width: '50px' }}>Partidas</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 style={{ textAlign: 'center' }}>
+                              <Form.Check
+                                aria-label="ChkRow"
+                                onClick={() => toggleInvoice(MasterData.id)}
+                              />
+                            </td>
+                            <td style={{ width: '50px', textAlign: 'center' }}>
+                              <div
+                                onClick={() => {
+                                  downloadPDF(
+                                    MasterData.id,
+                                    MasterData.invoiceNumber
+                                  )
+                                }}
+                              >
+                                <IconContext.Provider
+                                  value={{ color: 'red', size: '20px' }}
+                                >
+                                  <BsFilePdfFill />
+                                </IconContext.Provider>
+                              </div>
+                            </td>
+                            <td
+                              style={{
+                                width: '50px',
+                                textAlign: 'center',
+                                visibility: MasterData.referencia
+                                  ? 'visible'
+                                  : 'hidden'
+                              }}
+                            >
+                              <div
+                                onClick={() => {
+                                  downloadExcelInvoices(MasterData.referencia)
+                                }}
+                              >
+                                <IconContext.Provider
+                                  value={{ color: 'green', size: '20px' }}
+                                >
+                                  <AiFillFileExcel />
+                                </IconContext.Provider>
+                              </div>
+                            </td>
+                            <td
+                              style={{
+                                width: '50px',
+                                textAlign: 'center',
+                                visibility: MasterData.referencia
+                                  ? 'visible'
+                                  : 'hidden'
+                              }}
+                            >
+                              <div
+                                onClick={() => {
+                                  downloadExcelPartidas(MasterData.referencia)
+                                }}
+                              >
+                                <IconContext.Provider
+                                  value={{ color: 'green', size: '20px' }}
+                                >
+                                  <AiFillFileExcel />
+                                </IconContext.Provider>
+                              </div>
+                            </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'
+                                        }}
+                                      >
+                                        Sideline
+                                      </th>
+                                      <th
+                                        style={{
+                                          width: '70px',
+                                          backgroundColor: '#D3E0EA',
+                                          color: '#346288'
+                                        }}
+                                      ></th>
+                                      <th
+                                        style={{
+                                          width: '70px',
+                                          backgroundColor: '#D3E0EA',
+                                          color: '#346288'
+                                        }}
+                                      ></th>
+                                      <th
+                                        style={{
+                                          width: '70px',
+                                          backgroundColor: '#D3E0EA',
+                                          color: '#346288'
+                                        }}
+                                      ></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 (
+                                                <RptAmazonLinkInvoice2TrafficDetail
+                                                  IDMaster={MasterData.id}
+                                                  detail={detail}
+                                                  Habilitado={
+                                                    MasterData.estatus <= 1
+                                                  }
+                                                  onDataChange={function (
+                                                    IDMaster: number
+                                                  ): void {
+                                                    updateDataGrid(IDMaster)
+                                                  }}
+                                                />
+                                              )
+                                            })}
+                                        </>
+                                      )
+                                    })}
+                                  </tbody>
+                                </table>
+                              </th>
+                            </tr>
+                          ) : null}
+                        </>
+                      )
+                    })
+                  : null}
+              </tbody>
+            </Table>
+          </div>
+        </Card.Body>
+      </Card>
+      <Modal
+        show={ShowModal}
+        onHide={() => {
+          setShowModal(false)
+        }}
+        size={'sm'}
+        dialogClassName={'modal-50w'}
+      >
+        <Modal.Body>
+          <div style={{ height: '180px' }}>
+            <Alert key={'danger'} variant={'danger'}>
+              <Row style={{ paddingTop: '15px' }}>
+                <Col xs={9}>
+                  Para asociar estar facturas proporcione la referencia de SIR
+                </Col>
+                <Col xs={3}>
+                  <Form.Control
+                    type="text"
+                    id="Referencia"
+                    size="sm"
+                    value={Referencia}
+                    onChange={(e) => setReferencia(e.target.value)}
+                  />
+                </Col>
+              </Row>
+            </Alert>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={6} style={{ textAlign: 'center' }}>
+                <Button
+                  variant="secondary"
+                  onClick={() => {
+                    setShowModal(false)
+                  }}
+                >
+                  &nbsp;&nbsp;Cancelar&nbsp;&nbsp;
+                </Button>
+              </Col>
+              <Col xs={6} style={{ textAlign: 'center' }}>
+                <Button
+                  variant="danger"
+                  onClick={() => {
+                    asociaFacturasReferencia()
+                  }}
+                >
+                  &nbsp;&nbsp;Asociar referencia&nbsp;&nbsp;
+                </Button>
+              </Col>
+            </Row>
+          </div>
+        </Modal.Body>
+      </Modal>
+
+      <Modal
+        show={ShowModalUnlink}
+        onHide={() => {
+          setShowModal(false)
+        }}
+        size={'sm'}
+        dialogClassName={'modal-50w'}
+      >
+        <Modal.Body>
+          <div style={{ height: '180px' }}>
+            <Alert key={'danger'} variant={'danger'}>
+              <Row style={{ paddingTop: '15px' }}>
+                <Col xs={12}>
+                  <h1>¿Esta seguro de desasociar esta referencia?</h1>
+                </Col>
+              </Row>
+            </Alert>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={6} style={{ textAlign: 'center' }}>
+                <Button
+                  variant="secondary"
+                  onClick={() => {
+                    setShowModalUnlink(false)
+                  }}
+                >
+                  &nbsp;&nbsp;Cancelar&nbsp;&nbsp;
+                </Button>
+              </Col>
+              <Col xs={6} style={{ textAlign: 'center' }}>
+                <Button
+                  variant="danger"
+                  onClick={() => {
+                    desasociaFacturasReferencia()
+                  }}
+                >
+                  &nbsp;&nbsp;DESASOCIAR&nbsp;&nbsp;
+                </Button>
+              </Col>
+            </Row>
+          </div>
+        </Modal.Body>
+      </Modal>
+
+      <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/Traffic/Linking/RptAmazonLinkInvoice2TrafficDetail.tsx

@@ -0,0 +1,598 @@
+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 { IconContext } from 'react-icons'
+import { MsgInformativo } from '../../../../../Utils/Toast/msgInformativo'
+import I2096Detail from '../../../Interfaces/I2096Detail'
+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 { AiOutlineFileSearch, AiTwotoneEdit } from 'react-icons/ai'
+import { BsFillChatRightTextFill, BsFillPencilFill } from 'react-icons/bs'
+import DTO2096SightLine from '../../../DTO/DTO2096SightLine'
+import { updateInvoice } from '../../../../../../store/features/Clientes/2096/AmazonInvoices'
+import DTO2096TraficoFieldsUpdate from '../../../DTO/DTO2096TraficoFieldsUpdate'
+import I2096Headers from '../../../Interfaces/I2096Header'
+
+export interface IRtpAmazonInvoiceTrafficDetailProps {
+  IDMaster: number,
+  detail: I2096Detail,
+  Habilitado: boolean,
+  onDataChange: (IDMaster: number) => void
+}
+
+export default function RtpAmazonInvoice2TrafficDetail(
+  props: IRtpAmazonInvoiceTrafficDetailProps
+) {
+  const dispatch = useDispatch()
+  const mInvoices = useSelector(
+    (state: RootState) => state.AmazonInvoices.Invoice
+  )
+  const [ShowModal, setShowModal] = useState(false)
+  const [EstatusSwith, setEstatusSwitch] = useState(props.detail.sightLine)
+  const [UserChanged, setUserChanged] = useState(false)
+  const [header, setHeader] = useState('')
+  const [show, setShowMsg] = useState(false)
+  //const [Show, setShow] = useState(false)
+  const [msg, setMsg] = useState('')
+  const [CumplimientoNormativo, setCumplimientoNormativo] = useState(
+    props.detail.cumplimientoNormativo ? props.detail.cumplimientoNormativo : ''
+  )
+  const [Comentarios, setComentarios] = useState(
+    props.detail.comentarios
+      ? props.detail.comentarios
+      : 'Clasificacion Incorrecta'
+  )
+  const [ShowModalEdit, setShowModalEdit] = useState(false)
+  const [UnitMeasure, setUnitMeasure] = useState('')
+  const [UnitOfMeasure, setUnitOfMeasure] = useState('')
+  const [UnitCost, setUnitCost] = useState('')
+  const [Quantity, setQuantity] = useState(0)
+  const [ItemId, setItemId] = useState('')
+  const [ItemDescription, setItemDescription] = useState('')
+  const [FraccionGEMCO, setFraccionGEMCO] = useState('')
+  const [DescripcionGEMCO, setDescripcionGEMCO] = useState('')
+  const msgColor = 'primary'
+  const openLink = (item: string) => {
+    window.open('https://www.amazon.com/dp/' + item)
+  }
+  const UpdateInvoiceDetail = (
+    Invoice: I2096Headers,
+    Detail: I2096Detail[]
+  ) => {
+    const updatedInvoice: I2096Headers = {
+      id: props.IDMaster,
+      referencia: Invoice.referencia,
+      commercialInvoiceDate: Invoice.commercialInvoiceDate,
+      invoiceNumber: Invoice.invoiceNumber,
+      name: Invoice.name,
+      trailerNumber: Invoice.trailerNumber,
+      trailerId: Invoice.trailerId,
+      porOfLoading: Invoice.porOfLoading,
+      portOfEntry: Invoice.portOfEntry,
+      paymentsTerms: Invoice.paymentsTerms,
+      incoterms: Invoice.incoterms,
+      hawb: Invoice.hawb,
+      totalInvoiceQuantityUnitOfMeasure:
+        Invoice.totalInvoiceQuantityUnitOfMeasure,
+      totalInvoiceQuantity: Invoice.totalInvoiceQuantity,
+      totalInvoiceWeightUnitOfMeasure: Invoice.totalInvoiceWeightUnitOfMeasure,
+      totalInvoiceWeight: Invoice.totalInvoiceWeight,
+      totalInvoiceValueChargeOrAllowance:
+        Invoice.totalInvoiceValueChargeOrAllowance,
+      totalInvoiceValueCurrencyISOCode:
+        Invoice.totalInvoiceValueCurrencyISOCode,
+      totalInvoiceValueMonetaryAmount: Invoice.totalInvoiceValueMonetaryAmount,
+      footNote: Invoice.footNote,
+      archivo: Invoice.archivo,
+      fCreacion: Invoice.fCreacion,
+      clasificador: Invoice.clasificador,
+      noVuelta: Invoice.noVuelta,
+      estatus: Invoice.estatus,
+      max: true,
+      urgente: Invoice.urgente,
+      detail: Detail
+    }
+    dispatch(updateInvoice(updatedInvoice))
+  }
+
+  const editInvoice = (id: number) => {
+    const Invoice = mInvoices
+      .filter((el) => el.id === props.IDMaster)
+      .map((el) => {
+        return el
+      })
+    const newDetails = Invoice[0].detail.map((el) => {
+      if (el.id === id) {
+        return {
+          ...el,
+          itemQuantityUnitOfMeasure: UnitMeasure,
+          weightValue: UnitOfMeasure,
+          actualUnitCostMonetaryAmount: UnitCost,
+          totalUnitValueMonetaryAmount: (
+            el.quantity * parseFloat(UnitCost)
+          ).toString()
+        }
+      }
+      return el
+    })
+    UpdateInvoiceDetail(Invoice[0], newDetails)
+  }
+
+  const ToggleSightLine = (id: number) => {
+    const data: DTO2096SightLine = {
+      id: id,
+      sightLine: EstatusSwith,
+      comentariosSightLine: Comentarios
+    }
+    DSAmazon.SightLineSET(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
+      })
+  }
+
+  const saveFields = () => {
+    const data: DTO2096TraficoFieldsUpdate = {
+      id: props.detail.id,
+      UnitMeasure: UnitMeasure,
+      UnitOfMeasure: parseFloat(UnitOfMeasure),
+      UnitCost: parseFloat(UnitCost)
+    }
+    DSAmazon.TrafficFieldsUpdate(data)
+      .then((response) => {
+        /*
+       itemQuantityUnitOfMeasure: UnitMeasure,
+          weightValue: UnitOfMeasure,
+          actualUnitCostMonetaryAmount: UnitCost
+      */
+        setUnitMeasure(response.data.itemQuantityUnitOfMeasure)
+        setUnitOfMeasure(response.data.weightValue)
+        setUnitCost(response.data.actualUnitCostMonetaryAmount)
+        editInvoice(props.detail.id)
+        setHeader('Informativo')
+        setMsg('La informacion se guardo exitosamente')
+        setShowMsg(true)
+        return
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error')
+        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"
+          onClick={() => openLink(props.detail.itemId)}
+        >
+          {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:
+                props.detail.validaFraccionOriginal === 0
+                  ? '#FFFAF2 '
+                  : '#E5F7B6',
+              border:
+                props.detail.validaFraccionOriginal === 0
+                  ? '2px solid #F9A721'
+                  : '2px solid green',
+              color:
+                props.detail.validaFraccionOriginal === 0
+                  ? '#5923F6'
+                  : '#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>
+          <div
+            style={{ cursor: 'pointer' }}
+            onClick={() => {
+              setItemId(props.detail.itemId)
+              setItemDescription(props.detail.itemDescription)
+              setDescripcionGEMCO(props.detail.descripcionGEMCO)
+              setUnitMeasure(props.detail.itemQuantityUnitOfMeasure)
+              setUnitOfMeasure(props.detail.weightValue)
+              setUnitCost(props.detail.actualUnitCostMonetaryAmount)
+              setFraccionGEMCO(props.detail.fraccionGEMCO)
+              setShowModalEdit(true)
+            }}
+          >
+            <IconContext.Provider
+              value={{
+                color: 'blue',
+                size: '25px'
+              }}
+            >
+              <BsFillPencilFill />
+            </IconContext.Provider>
+          </div>
+        </td>
+      </tr>
+      <Modal
+        show={ShowModalEdit}
+        onHide={() => {
+          setShowModalEdit(false)
+        }}
+        size={'sm'}
+        dialogClassName={'modal-50w'}
+      >
+        <Modal.Body>
+          <div style={{ height: '230px' }}>
+            <Row>
+              <Col xs={12}>
+                <Alert key="warning" variant="warning">
+                  <span style={{ fontWeight: 'bold' }}>No Parte:</span> {ItemId}{' '}
+                  <br />
+                  <span style={{ fontWeight: 'bold' }}>
+                    Fraccion GEMCO:
+                  </span>{' '}
+                  {FraccionGEMCO} <br />
+                  <span style={{ fontWeight: 'bold' }}>
+                    Descripcion GEMCO:
+                  </span>{' '}
+                  {DescripcionGEMCO}
+                </Alert>
+              </Col>
+            </Row>
+            <Row>
+              <Col xs={3}>Unit Measure:</Col>
+              <Col xs={3}>
+                <Form.Control
+                  type="text"
+                  id="Search"
+                  size="sm"
+                  value={UnitMeasure}
+                  onChange={(e) => setUnitMeasure(e.target.value)}
+                />
+              </Col>
+            </Row>
+            <Row style={{ paddingTop: '5px' }}>
+              <Col xs={3}>Unit of Measure:</Col>
+              <Col xs={3}>
+                <CurrencyFormat
+                  onValueChange={(values: any) => {
+                    const { value } = values
+                    setUnitOfMeasure(value)
+                  }}
+                  /* format={'########.##'} */
+                  value={UnitOfMeasure}
+                  displayType={'input'}
+                  style={{
+                    fontSize: '18px',
+                    backgroundColor: '#F1EEF9',
+                    border: '2px solid #5923F6',
+                    color: '#5923F6',
+                    width: '120px',
+                    textAlign: 'right',
+                    borderRadius: '10px'
+                  }}
+                />
+              </Col>
+            </Row>
+            <Row style={{ paddingTop: '5px' }}>
+              <Col xs={3}>Unit Cost:</Col>
+              <Col xs={3}>
+                <CurrencyFormat
+                  onValueChange={(values: any) => {
+                    const { value } = values
+                    setUnitCost(value)
+                  }}
+                  /*  format={'########.##'} */
+                  value={UnitCost}
+                  displayType={'input'}
+                  style={{
+                    fontSize: '18px',
+                    backgroundColor: '#F1EEF9',
+                    border: '2px solid #5923F6',
+                    color: '#5923F6',
+                    width: '120px',
+                    textAlign: 'right',
+                    borderRadius: '10px'
+                  }}
+                />
+              </Col>
+              <Col xs={4}></Col>
+              <Col xs={2}>
+                <Button
+                  variant="primary"
+                  onClick={() => {
+                    saveFields()
+                  }}
+                >
+                  &nbsp;&nbsp;Guardar&nbsp;&nbsp;
+                </Button>
+              </Col>
+            </Row>
+          </div>
+        </Modal.Body>
+      </Modal>
+      <Modal
+        show={ShowModal}
+        onHide={() => {
+          setShowModal(false)
+        }}
+        size={'sm'}
+        dialogClassName={'modal-50w'}
+      >
+        <Modal.Body>
+          <div style={{ height: '150px' }}>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={3}>Comentarios</Col>
+              <Col xs={8}>
+                {' '}
+                <Form.Control
+                  as="textarea"
+                  id="Comentarios"
+                  size="sm"
+                  value={Comentarios.length ? Comentarios : ''}
+                  onChange={(e) => setComentarios(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;No&nbsp;&nbsp;
+                </Button>
+              </Col>
+              <Col xs={6} style={{ textAlign: 'center' }}>
+                <Button
+                  variant="danger"
+                  onClick={() => {
+                    ToggleSightLine(props.detail.id)
+                  }}
+                >
+                  &nbsp;&nbsp;Si&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/Traffic/Pending/RptAmazonPendingTraficInvoiceDetail.tsx

@@ -0,0 +1,375 @@
+import * as React from 'react'
+import { useEffect, useState } from 'react'
+import {
+  Button,
+  Col,
+  Form,
+  FormCheck,
+  Modal,
+  OverlayTrigger,
+  Row,
+  Tooltip
+} from 'react-bootstrap'
+import { IconContext } from 'react-icons'
+import { MsgInformativo } from '../../../../../Utils/Toast/msgInformativo'
+import I2096Detail from '../../../Interfaces/I2096Detail'
+import I2096Headers from '../../../Interfaces/I2096Header'
+import DSAmazon from '../../../Services/Amazon.Services'
+// Redux
+import { RootState } from '../../../../../../store/store'
+import { useDispatch, useSelector } from 'react-redux'
+import { updateInvoice } from '../../../../../../store/features/Clientes/2096/AmazonInvoices'
+import * as CurrencyFormat from 'react-currency-format'
+import { BsFillChatRightTextFill } from 'react-icons/bs'
+import DTO2096SightLine from '../../../DTO/DTO2096SightLine'
+
+export interface IRptAmazonPendingTraficInvoiceDetailProps {
+  IDMaster: number
+  detail: I2096Detail
+  Habilitado: boolean
+}
+
+export default function RptAmazonPendingTraficInvoiceDetail(
+  props: IRptAmazonPendingTraficInvoiceDetailProps
+) {
+  const dispatch = useDispatch()
+  const mInvoices = useSelector(
+    (state: RootState) => state.AmazonInvoices.Invoice
+  )
+  const [ShowModal, setShowModal] = useState(false)
+  const [EstatusSwith, setEstatusSwitch] = useState(props.detail.sightLine)
+  const [UserChanged, setUserChanged] = useState(false)
+  const [header, setHeader] = useState('')
+  const [show, setShowMsg] = useState(false)
+  //const [Show, setShow] = useState(false)
+  const [msg, setMsg] = useState('')
+  const [Comentarios, setComentarios] = useState(
+    props.detail.comentariosSightLine ? props.detail.comentariosSightLine : ''
+  )
+  const msgColor = 'primary'
+  const openLink = (item: string) => {
+    window.open('https://www.amazon.com/dp/' + item)
+  }
+  //const target = React.useRef(null)
+
+  const UpdateInfo = (Invoice: I2096Headers, Detail: I2096Detail[]) => {
+    const updatedInvoice: I2096Headers = {
+      id: props.IDMaster,
+      referencia: Invoice.referencia,
+      commercialInvoiceDate: Invoice.commercialInvoiceDate,
+      invoiceNumber: Invoice.invoiceNumber,
+      name: Invoice.name,
+      trailerNumber: Invoice.trailerNumber,
+      trailerId: Invoice.trailerId,
+      porOfLoading: Invoice.porOfLoading,
+      portOfEntry: Invoice.portOfEntry,
+      paymentsTerms: Invoice.paymentsTerms,
+      incoterms: Invoice.incoterms,
+      hawb: Invoice.hawb,
+      totalInvoiceQuantityUnitOfMeasure:
+        Invoice.totalInvoiceQuantityUnitOfMeasure,
+      totalInvoiceQuantity: Invoice.totalInvoiceQuantity,
+      totalInvoiceWeightUnitOfMeasure: Invoice.totalInvoiceWeightUnitOfMeasure,
+      totalInvoiceWeight: Invoice.totalInvoiceWeight,
+      totalInvoiceValueChargeOrAllowance:
+        Invoice.totalInvoiceValueChargeOrAllowance,
+      totalInvoiceValueCurrencyISOCode:
+        Invoice.totalInvoiceValueCurrencyISOCode,
+      totalInvoiceValueMonetaryAmount: Invoice.totalInvoiceValueMonetaryAmount,
+      footNote: Invoice.footNote,
+      archivo: Invoice.archivo,
+      fCreacion: Invoice.fCreacion,
+      clasificador: Invoice.clasificador,
+      noVuelta: Invoice.noVuelta,
+      estatus: Invoice.estatus,
+      max: true,
+      urgente: Invoice.urgente,
+      detail: Detail
+    }
+    dispatch(updateInvoice(updatedInvoice))
+  }
+
+  const ToggleSightLine = (id: number) => {
+    const data: DTO2096SightLine = {
+      id: id,
+      sightLine: EstatusSwith,
+      comentariosSightLine: Comentarios
+    }
+    DSAmazon.SightLineSET(data)
+      .then((response) => {
+        console.log(response.data)
+        //editArray(id, !props.detail.autorizado)
+        setShowModal(false)
+      })
+      .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'
+          }}
+          className="DetailData"
+        >
+          &nbsp;
+        </th>
+        <td
+          style={{
+            textAlign: 'center',
+            cursor: 'pointer'
+          }}
+          className="DetailData"
+          onClick={() => openLink(props.detail.itemId)}
+        >
+          {props.detail.itemId}
+        </td>
+        <td
+          style={{
+            textAlign: 'right'
+          }}
+          className="DetailData"
+        >
+          {props.detail.itemDescription}
+        </td>
+        <td
+          style={{
+            textAlign: 'center'
+          }}
+          className="DetailData"
+        >
+          <CurrencyFormat
+            value={props.detail.fraccionGEMCO ? props.detail.fraccionGEMCO : ''}
+            disabled={true}
+            format={'####.##.####'}
+            displayType={'input'}
+            style={{
+              fontSize: '17px',
+              backgroundColor:
+                props.detail.validaFraccionOriginal === 0
+                  ? '#FFFAF2 '
+                  : '#E5F7B6',
+              border:
+                props.detail.validaFraccionOriginal === 0
+                  ? '2px solid #F9A721'
+                  : '2px solid green',
+              color:
+                props.detail.validaFraccionOriginal === 0
+                  ? '#5923F6'
+                  : '#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: 'right'
+          }}
+          className="DetailData"
+        >
+          {props.detail.productGroup}
+        </td>
+        <td
+          style={{
+            textAlign: 'right'
+          }}
+          className="DetailData"
+        >
+          {props.detail.brand}
+        </td>
+        <td
+          style={{
+            textAlign: 'right'
+          }}
+          className="DetailData"
+        >
+          {props.detail.model}
+        </td>
+        <td
+          style={{
+            textAlign: 'center'
+          }}
+          className="DetailData"
+        >
+          {props.detail.itemQuantityUnitOfMeasure}
+        </td>
+        <td
+          style={{
+            textAlign: 'center'
+          }}
+          className="DetailData"
+        >
+          {props.detail.quantity}
+        </td>
+        <td
+          style={{
+            textAlign: 'center'
+          }}
+          className="DetailData"
+        >
+          {props.detail.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)
+            }}
+            label=""
+          />
+        </td>
+        <td
+          style={{
+            visibility: props.detail.sightLine ? 'hidden' : 'visible'
+          }}
+        >
+          {' '}
+          <OverlayTrigger
+            placement="bottom"
+            overlay={<Tooltip id="button-tooltip-2">{Comentarios}</Tooltip>}
+          >
+            {({ ref, ...triggerHandler }) => (
+              <Button variant="light" {...triggerHandler}>
+                <IconContext.Provider
+                  value={{
+                    color: 'blue',
+                    size: '25px'
+                  }}
+                >
+                  <BsFillChatRightTextFill />
+                </IconContext.Provider>
+                <span className="ms-1"></span>
+              </Button>
+            )}
+          </OverlayTrigger>
+        </td>
+      </tr>
+
+      <Modal
+        show={ShowModal}
+        onHide={() => {
+          setShowModal(false)
+        }}
+        size={'sm'}
+        dialogClassName={'modal-50w'}
+        backdrop="static"
+        disableEscapeKeyDown={true}
+      >
+        <Modal.Body>
+          <div style={{ height: '150px' }}>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={3}>Comentarios</Col>
+              <Col xs={8}>
+                {' '}
+                <Form.Control
+                  as="textarea"
+                  id="Comentarios"
+                  size="sm"
+                  value={Comentarios.length ? Comentarios : ''}
+                  onChange={(e) => setComentarios(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;No&nbsp;&nbsp;
+                </Button>
+              </Col>
+              <Col xs={6} style={{ textAlign: 'center' }}>
+                <Button
+                  variant="danger"
+                  onClick={() => {
+                    ToggleSightLine(props.detail.id)
+                  }}
+                >
+                  &nbsp;&nbsp;Si&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/Traffic/Pending/RtpAmazonPendingTraficInvoice.tsx

@@ -0,0 +1,513 @@
+import { useEffect, useState } from 'react'
+import {
+  Alert,
+  Button,
+  Card,
+  Col,
+  FormCheck,
+  Modal,
+  Row,
+  Table
+} from 'react-bootstrap'
+import { IconContext } from 'react-icons'
+import { BsChevronDown, BsChevronRight } from 'react-icons/bs'
+import I2096Headers from '../../../Interfaces/I2096Header'
+import DSAmazon from '../../../Services/Amazon.Services'
+import { MsgInformativo } from '../../../../../Utils/Toast/msgInformativo'
+import { RootState } from '../../../../../../store/store'
+import {
+  initializeInvoice,
+  populateInvoices,
+  updateInvoice
+} from '../../../../../../store/features/Clientes/2096/AmazonInvoices'
+// Redux
+import { useDispatch, useSelector } from 'react-redux'
+import RtpAmazonPendingTraficInvoiceDetail from './RptAmazonPendingTraficInvoiceDetail'
+import { FaAmazon } from 'react-icons/fa'
+
+export interface IRptAmazonPendingTraficInvoiceProps {}
+
+export default function RptAmazonPendingTraficInvoice(
+  props: IRptAmazonPendingTraficInvoiceProps
+) {
+  const dispatch = useDispatch()
+  const mInvoices = useSelector(
+    (state: RootState) => state.AmazonInvoices.Invoice
+  )
+  const [header, setHeader] = useState('')
+  const [IDFactura, setIDFactura] = useState(0)
+  const [show, setShowMsg] = useState(false)
+  const [ShowModal, setShowModal] = useState(false)
+  const [msg, setMsg] = useState('')
+  const msgColor = 'primary'
+
+  const loadReport = () => {
+    DSAmazon.AmazonPendingTraficInvoiceGET()
+      .then((response) => {
+        dispatch(initializeInvoice([]))
+        dispatch(populateInvoices(response.data))
+      })
+      .catch((e: Error) => {
+        alert('Ocurrio un error' + e.message.toString())
+      })
+  }
+
+  useEffect(() => {
+    loadReport()
+  }, [])
+
+  const InvoiceToggle = (row: I2096Headers) => {
+    let Invoice: I2096Headers[] = mInvoices.filter((item) => item.id === row.id)
+    const Obj = { ...Invoice[0] }
+    Obj.max = !Obj.max
+    dispatch(updateInvoice(Obj))
+  }
+
+  const finishInvoice = (id: number) => {
+    DSAmazon.SePuedeTerminarXTraficoFactura(id)
+      .then((response) => {
+        if (response.data.respuesta.includes('lista')) {
+          DSAmazon.TerminaXTraficoFactura(id)
+            .then((response) => {
+              loadReport()
+            })
+            .catch((e: Error) => {})
+          setShowModal(false)
+        } else {
+          setIDFactura(0)
+          setHeader('Informativo')
+          setMsg(response.data.respuesta)
+          setShowMsg(true)
+          return
+        }
+      })
+      .catch((e: Error) => {
+        setIDFactura(0)
+        setHeader('Error')
+        setMsg('Ocurrio un error')
+        setShowMsg(true)
+        return
+      })
+  }
+
+  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={4}>
+              <Card.Title>
+                <IconContext.Provider value={{ color: '#F6C34F', size: '8%' }}>
+                  <FaAmazon />
+                </IconContext.Provider>{' '}
+                TRAFICO : facturas pendientes
+              </Card.Title>
+            </Col>
+            <Col xs={4}></Col>
+          </Row>
+        </Card.Body>
+      </Card>
+      <Row>
+        <Col xs={2}></Col>
+        <Col xs={8}></Col>
+        <Col xs={2} className="totalLabel"></Col>
+      </Row>
+      <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: '80px' }}>Commercial Invoice Date</th>
+                  <th style={{ width: '150px' }}>Invoice Number</th>
+                  <th style={{ width: '50px' }}>Receiver</th>
+                  <th style={{ width: '100px' }}>Incoterms</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 style={{ width: '500px' }}>Total de partidas</th>
+                </tr>
+              </thead>
+              <tbody>
+                {mInvoices
+                  ? mInvoices.map((MasterData) => {
+                      return (
+                        <>
+                          <tr
+                            style={{ cursor: 'pointer' }}
+                            className={
+                              MasterData.max === true
+                                ? 'masterSelected'
+                                : 'normalSelected'
+                            }
+                          >
+                            <td
+                              style={{ textAlign: 'left' }}
+                              className={
+                                MasterData.max === true
+                                  ? 'masterSelected'
+                                  : 'normalSelected'
+                              }
+                              key={MasterData.id}
+                              onClick={() => {
+                                InvoiceToggle(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>
+                              <FormCheck
+                                className="form-check form-switch form-control-sm"
+                                id="switchEnabled"
+                                type="switch"
+                                checked={false}
+                                onChange={() => {
+                                  /* facturaTerminada(MasterData) */
+                                  setIDFactura(MasterData.id)
+                                  setShowModal(true)
+                                }}
+                                label=""
+                              />
+                            </td>
+                            <td style={{ width: '80px', textAlign: 'center' }}>
+                              {MasterData.commercialInvoiceDate}
+                            </td>
+                            <td style={{ width: '150px' }}>
+                              {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.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={15}>
+                                <table
+                                  className="childTable"
+                                  style={{ width: '1450px' }}
+                                >
+                                  <thead>
+                                    <tr>
+                                      <th
+                                        style={{
+                                          width: '50px',
+                                          backgroundColor: '#FFFFFF',
+                                          color: '#346288'
+                                        }}
+                                      ></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'
+                                        }}
+                                      >
+                                        Sideline
+                                      </th>
+                                      <th
+                                        style={{
+                                          width: '70px',
+                                          backgroundColor: '#D3E0EA',
+                                          color: '#346288'
+                                        }}
+                                      >
+                                        Comentarios
+                                      </th>
+                                    </tr>
+                                  </thead>
+                                  <tbody>
+                                    {mInvoices.map((MD) => {
+                                      return (
+                                        <>
+                                          {MD.detail
+                                            .filter(
+                                              (detail) =>
+                                                MasterData.id ===
+                                                detail.idHeader
+                                            )
+                                            .map((detail) => {
+                                              return (
+                                                <RtpAmazonPendingTraficInvoiceDetail
+                                                  IDMaster={MasterData.id}
+                                                  detail={detail}
+                                                  Habilitado={
+                                                    MasterData.estatus <= 1
+                                                  }
+                                                />
+                                              )
+                                            })}
+                                        </>
+                                      )
+                                    })}
+                                  </tbody>
+                                </table>
+                              </th>
+                            </tr>
+                          ) : null}
+                        </>
+                      )
+                    })
+                  : null}
+              </tbody>
+            </Table>
+          </div>
+        </Card.Body>
+      </Card>
+      <Modal
+        show={ShowModal}
+        onHide={() => {
+          setShowModal(false)
+        }}
+        size={'sm'}
+        dialogClassName={'modal-50w'}
+      >
+        <Modal.Body>
+          <div style={{ height: '180px' }}>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={1}></Col>
+              <Col xs={10}>
+                <Alert key={'danger'} variant={'danger'}>
+                  La factura esta lista para terminarse, desea terminarla?
+                </Alert>
+              </Col>
+              <Col xs={1}></Col>
+            </Row>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={6} style={{ textAlign: 'center' }}>
+                <Button
+                  variant="secondary"
+                  onClick={() => {
+                    setShowModal(false)
+                  }}
+                >
+                  &nbsp;&nbsp;No&nbsp;&nbsp;
+                </Button>
+              </Col>
+              <Col xs={6} style={{ textAlign: 'center' }}>
+                <Button
+                  variant="danger"
+                  onClick={() => {
+                    finishInvoice(IDFactura)
+                  }}
+                >
+                  &nbsp;&nbsp;Si&nbsp;&nbsp;
+                </Button>
+              </Col>
+            </Row>
+          </div>
+        </Modal.Body>
+      </Modal>
+      <MsgInformativo
+        show={show}
+        msg={msg}
+        header={header}
+        msgColor={msgColor}
+        closeToast={() => {
+          setShowMsg(false)
+        }}
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,219 @@
+import http from '../../../../Services/common/http-common'
+import I2096Headers from '../Interfaces/I2096Header'
+import IRespuesta from '../../../../Interfaces/IRespuesta'
+import DTO2096Fraccion from '../DTO/DTO2096Fraccion'
+import I2096Detail from '../Interfaces/I2096Detail'
+import DTO2096Descripcion from '../DTO/DTO2096Descripcion'
+import I2096NoParte from '../Interfaces/I2096NoParte'
+import I2096PaisClave from '../Interfaces/I2096PaisClave'
+import DTORespuesta from '../../ZincInternacional/DTO/DTORespuesta'
+import DTO2096SightLine from '../DTO/DTO2096SightLine'
+import DTO2096FraccionDescripcion from '../DTO/DTO2096FraccionDescripcion'
+import DTO2096PerfilesParecidos from '../DTO/DTO2096PerfilesParecidos'
+import DTO2096LinkInvoice2Reference from '../DTO/DTO2096LinkInvoice2Reference'
+import DTO2096Estatus from '../DTO/DTO2096Estatus'
+import DTO2096NoParte from '../DTO/DTO2096NoParte'
+import I2096NoParteLog from '../Interfaces/I2096NoParteLog'
+import DTO2096TraficoFieldsUpdate from '../DTO/DTO2096TraficoFieldsUpdate'
+import DTO2096RELParteFactura from '../DTO/DTO2096RELParteFactura'
+import DTO2096RptPayedOperations from '../DTO/DTO2096RptPayedOperations'
+import DTO2096NoParteVerificacion from '../DTO/DTO2096NoParteVerificacion'
+import DTO2096InvoiceStatus from '../DTO/DTO2096InvoiceStatus'
+import IFileManager from '../../../../Interfaces/Utils/IFileManager'
+
+class AmazonDataService {
+  AmazonPendingClasificationInvoiceGET() {
+    return http.get<I2096Headers[]>(`/AmazonInvoice/AmazonPendingClasificationInvoiceGet`)
+  }
+  AmazonInvoiceGET(id: number) {
+    return http.get<I2096Headers[]>(`/AmazonInvoice/AmazonInvoiceGET?id=${id}`)
+  }
+  InvoicePendingFromAmazonGET() {
+    return http.get<I2096Headers[]>(`/AmazonInvoice/InvoicePendingFromAmazonGET`)
+  }
+  AmazonFinishedClasificationInvoiceGET() {
+    return http.get<I2096Headers[]>(`/AmazonInvoice/AmazonFinishedClasificationInvoiceGet`)
+  }
+  SePuedeTerminardeClasificarFactura(id: number) {
+    return http.get<DTO2096Estatus>(`/AmazonInvoice/SePuedeTerminardeClasificarFactura?id=${id}`)
+  }
+  SeRecibioRespuestaDeAmazon(id: number) {
+    return http.get<DTO2096Estatus>(`/AmazonInvoice/SeRecibioRespuestaDeAmazon?id=${id}`)
+  }
+  EliminaFactura(id: number) {
+    return http.delete<boolean>(`/AmazonInvoice/AmazonInvoiceDelete?id=${id}`)
+  }
+  EnviaEsperaRespuestaAmazon(id: number) {
+    return http.get<DTORespuesta>(`/AmazonInvoice/EnviaEsperaRespuestaAmazon?id=${id}`)
+  }
+  ArchivoRespuestaAmazon(id: number, idFile: number) {
+    return http.put<DTORespuesta>(`/AmazonInvoice/ArchivoRespuestaAmazon?id=${id}&idFile=${idFile}`)
+  }
+  TerminaClasificarFactura(id: number) {
+    return http.get<boolean>(`/AmazonInvoice/TerminaClasificarFactura?id=${id}`)
+  }
+  CheckDetail(id: number) {
+    return http.put<I2096Detail>(`/AmazonInvoice/C2096CheckDetail?id=${id}`)
+  }
+  InvoiceReturnState(IdFactura: number, Estatus: number) {
+    return http.put<I2096Detail>(`/AmazonInvoice/InvoiceReturnState?IdFactura=${IdFactura}&Estatus=${Estatus}`)
+  }
+
+  
+  AmazonPendingTraficInvoiceGET() {
+    return http.get<I2096Headers[]>(`/AmazonInvoice/AmazonPendingTraficInvoiceGet`)
+  }
+  AmazonLinkInvoice2TrafficGet() {
+    return http.get<I2096Headers[]>(`/AmazonInvoice/AmazonLinkInvoice2TrafficGet`)
+  }
+  SePuedeTerminarXTraficoFactura(id: number) {
+    return http.get<DTORespuesta>(`/AmazonInvoice/SePuedeTerminarXTraficoFactura?id=${id}`)
+  }
+  TerminaXTraficoFactura(id: number) {
+    return http.get<boolean>(`/AmazonInvoice/TerminaXTraficoFactura?id=${id}`)
+  }
+
+
+  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}`)
+  }
+  AmazonInvoicePrioritySET(Id: number, Prioridad: boolean) {
+    return http.get<I2096Headers[]>(`/AmazonInvoice/AmazonInvoicePrioritySET?id=${Id}&prioridad=${Prioridad}`)
+  }
+
+
+
+  RELParteFacturasGET(id: number) {
+    return http.get<DTO2096RELParteFactura[]>(`/AmazonInvoice/RELParteFacturasGET?id=${id}`)
+  }
+
+  ValidaFraccionGET(Fraccion: string) {
+    return http.get<IRespuesta>(`/AmazonInvoice/C2096ValidaFraccion?Fraccion=${Fraccion}`)
+  }
+  SETFraccionDescripcion(data: DTO2096FraccionDescripcion) {
+    return http.put<I2096Detail>(`/AmazonInvoice/C2096FraccionDescripcionSET`, data)
+  }
+  FraccionSET(data: DTO2096Fraccion) {
+    return http.post<I2096Detail>(`/AmazonInvoice/C2096FraccionSet`, data)
+  }
+  DescripcionSET(data: DTO2096Descripcion) {
+    return http.post<I2096Detail>(`/AmazonInvoice/C2096DescripcionSet`, data)
+  }
+  AutorizaItemFacturaAmazon(data: DTO2096FraccionDescripcion) {
+    return http.put<I2096Detail>(`/AmazonInvoice/C2096AutorizaItemFactura`, data)
+  }
+  SightLineSET(data: DTO2096SightLine) {
+    return http.put<DTO2096SightLine>(`/AmazonInvoice/AmazonSightLineSET`, data)
+  }
+  
+  PaisClavesGET() {
+    return http.get<I2096PaisClave[]>(`/AmazonInvoice/PaisClavesGet`)
+  }
+  NoPartesAmazon2SIRGET(id: number) {
+    return http.get<ArrayBuffer>(`/AmazonInvoice/GetNoPartesAmazon2SIR?id=${id}`, {responseType: 'arraybuffer'})
+    .then(function (response) {
+       return response
+     })
+     .catch(function (error) {
+       console.log(error)
+     })
+  }
+  ExceptionsFileAmazonGET(id: number) {
+    return http.get<ArrayBuffer>(`/AmazonInvoice/ExceptionsFileAmazonGET?id=${id}`, {responseType: 'arraybuffer'})
+    .then(function (response) {
+       return response
+     })
+     .catch(function (error) {
+       console.log(error)
+     })
+  }
+  PDFAmazonInvoiceGET(id: number) {
+    return http.get<ArrayBuffer>(`/AmazonInvoice/PDFAmazonInvoiceGET?id=${id}`, {responseType: 'arraybuffer'})
+    .then(function (response) {
+       return response
+     })
+     .catch(function (error) {
+       console.log(error)
+     })
+  }
+  GETAmazonPartidasByReference(Referencia: string) {
+    return http.get<ArrayBuffer>(`/AmazonInvoice/GETAmazonPartidasByReference?referencia=${Referencia}`, {responseType: 'arraybuffer'})
+    .then(function (response) {
+       return response
+     })
+     .catch(function (error) {
+       console.log(error)
+     })
+  }
+  GETAmazonFacturasByReference(Referencia: string) {
+    return http.get<ArrayBuffer>(`/AmazonInvoice/getAmazonFacturasByReference?referencia=${Referencia}`, {responseType: 'arraybuffer'})
+    .then(function (response) {
+       return response
+     })
+     .catch(function (error) {
+       console.log(error)
+     })
+  }
+  GETACKFileById(id: number) {
+    return http.get<ArrayBuffer>(`/AmazonInvoice/GETACKFileById?IDArchivoACK=${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)
+  }
+  UploadACKFile2Amazon(referencia: string) {
+    return http.get<Boolean>(`/AmazonInvoice/UploadACKFile2Amazon?Referencia=`+referencia)
+  }
+  AsignaFacturasReferencia(data: DTO2096LinkInvoice2Reference) {
+    return http.post<Boolean>(`/AmazonInvoice/AsignaFacturasReferencia`, data)
+  }
+  TrafficFieldsUpdate(data: DTO2096TraficoFieldsUpdate) {
+    return http.put<I2096Detail>(`/AmazonInvoice/TrafficFieldsUpdate`, data)
+  }
+
+
+
+  NoPartesGet(Search: string) {
+    return http.get<I2096NoParte[]>(`/AmazonInvoice/NoPartesGet?Search=${Search}`)
+  }
+  NoPartesUpdate(data: DTO2096NoParte) {
+    return http.put<I2096NoParte>(`/AmazonInvoice/NoPartesUpdate`, data)
+  }
+  NoPartesLogGET(id: number) {
+    return http.get<I2096NoParteLog[]>(`/AmazonInvoice/NoPartesLogGET?id=${id}`)
+  }
+  NoParteVerificacionGET(Parte: string) {
+    return http.get<DTO2096NoParteVerificacion[]>(`/AmazonInvoice/NoParteVerificacionGET?Parte=${Parte}`)
+  }
+  PerfilesParecidosGet(Perfil: string) {
+    return http.get<DTO2096PerfilesParecidos[]>(`/Usuarios/Catalogo/Usuarios/PerfilesParecidos?Perfil=${Perfil}`)
+  }
+  AsignaFacturaClasificador(IdUsuario: number, IdFactura: number) {
+    return http.put<DTO2096PerfilesParecidos[]>(`/AmazonInvoice/AsignaFactura?IdUsuario=${IdUsuario}&IdFactura=${IdFactura}`)
+  }
+  UploadAndSyncAmazonInvoicesInFilePath() {
+    return http.get<boolean>(`/AmazonInvoice/SyncInvoicesInFilePath`)
+  }
+  UploadAndSyncAmazonInvoicesByFTP() {
+    return http.get<boolean>(`/AmazonInvoice/SyncInvoicesByFTP`)
+  }
+  SETInvoiceDetail2Unchecked(id: number) {
+    return http.get<I2096Headers>(`/AmazonInvoice/SETInvoiceDetail2Unchecked?id=${id}`)
+  }
+  SETInvoiceDetailRevalidateParts(id: number) {
+    return http.get<Boolean>(`/AmazonInvoice/SETInvoiceDetailRevalidateParts?id=${id}`)
+  }
+  ApplyAnswerFile2Invoice(Files: string[]) {
+    return http.post<Boolean>(`/AmazonInvoice/ApplyAnswerFile2Invoice`, Files)
+  }
+}
+export default new AmazonDataService()

src/Components/Clientes/CasaCuervo/Interfaces/I325Pedidos.ts

@@ -0,0 +1,26 @@
+export default interface I325Pedidos {
+    id: number, 
+    po: string,
+    aduana: string,
+    destination: string,
+    truckNumber: string,
+    forwarder: string,
+    carrier: string,
+    loadDate: string,
+    prioridad: number, 
+    estatus: string,
+    comentarioGEMCO: string,
+    fechaCompromiso: string,
+    fechaCruce: string,
+    factura: string,
+    uuid: string,
+    trafico: string,
+    pedimento: string, 
+    patente: string,
+    modulacion: string,
+    medidaCaja: string,
+    sello1: string,
+    sello2: string,
+    actualizacion: string,
+    activo: number, 
+}

src/Components/Clientes/CasaCuervo/Interfaces/I325RptCOVEs.ts

@@ -0,0 +1,8 @@
+export default interface I325RptCOVEs {
+    factura : string,
+    cove: string,
+    pedimento: string,
+    clave: string,
+    fechaPago: string,
+    vehiculo: string
+}

src/Components/Clientes/CasaCuervo/PDFs/FormatoRevision.tsx

@@ -0,0 +1,314 @@
+import React, { FC, useEffect, useState } from 'react'
+import { useParams } from 'react-router-dom'
+import '../../../../css/printableArea.css'
+import I325Pedidos from '../Interfaces/I325Pedidos'
+import PedDataService from '../Services/CasaCuervo.Services'
+
+interface IProps {}
+
+interface IMedidaCaja {
+  id: number
+  Medida: string
+}
+
+export default function FormatoRevision (props: IProps) {
+  const { id } = useParams()
+  const [ID, setID] = useState<number>(0)
+  const [Data, setData] = useState<I325Pedidos>()
+
+  const mCatMedidas: IMedidaCaja[] = [
+    { id: 0, Medida: 'SELECCIONE' },
+    { id: 1, Medida: 'Caja 53 pies' },
+    { id: 2, Medida: 'Caja 48 pies' },
+    { id: 3, Medida: 'Refrigerada 53 pies' },
+    { id: 4, Medida: 'Pipa' }
+  ]
+
+  const Print = () => {
+    let printContents: string = (
+      document.getElementById('printableDiv') as HTMLInputElement
+    ).innerHTML
+    let originalContents = document.body.innerHTML
+    document.body.innerHTML = printContents
+    window.print()
+    document.body.innerHTML = originalContents
+  }
+
+  const GetID = () => {
+    let Id: string = id ?? '0'
+    return parseInt(Id)
+  }
+
+  const loadData = () => {
+    PedDataService.GetById(GetID())
+      .then((response) => {
+        setData(response.data)
+        Print()
+      })
+      .catch((e: Error) => {
+        return false
+      })
+  }
+
+  /*  useEffect(() => {
+    Print()
+  }, []) */
+
+  const GetCurrentDateTime = () => {
+    var today = new Date()
+    var date =
+      today.getDate().toString().padStart(2, '0') +
+      '-' +
+      (today.getMonth() + 1).toString().padStart(2, '0') +
+      '-' +
+      today.getFullYear()
+    var time =
+      today.getHours() +
+      ':' +
+      today.getMinutes().toString().padStart(2, '0') +
+      ':' +
+      today.getSeconds().toString().padStart(2, '0')
+    var dateTime = date + ' ' + time
+    return dateTime
+  }
+
+  useEffect(() => {
+    loadData()
+  }, [id])
+
+  return (
+    <div id="printableDiv">
+      <div className="printableDiv">
+        <table>
+          <tr>
+            <th
+              colSpan={6}
+              style={{ textAlign: 'center', backgroundColor: '#FFFFFF' }}
+            >
+              Nota de revision de mercancia y sellos de seguridad: Casa Cuervo
+            </th>
+          </tr>
+          <tr>
+            <td style={{ textAlign: 'right' }}>
+              <span style={{ fontWeight: 'bold' }}>
+                Fecha y hora de impresion:&nbsp;
+              </span>
+              {GetCurrentDateTime()}
+            </td>
+          </tr>
+
+          <tr>
+            <td>
+              Sr Despachador / Tramitador
+              <br />
+              1. Tomar sellos de seguridad
+              <br />
+              2. Romper los sellos se seguridad de origen
+              <br />
+              3. Abrir caja trailer y tomar fotos de la mercancia
+              <br />
+              4. Vertificar numeros de lote contra factura
+              <br />
+              5. Contar la cantidad de bultos
+              <br />
+              6. Colocar la caja trailer y colocar nuevos sellos
+            </td>
+          </tr>
+          <tr>
+            <td>
+              Si no se cuentra con sellos del cliente, poner sellos de GEMCO
+              previa autorizacion del cliente
+            </td>
+          </tr>
+          <tr style={{ width: '100%' }}>
+            <th colSpan={6} style={{ backgroundColor: '#FFFFFF' }}>
+              &nbsp;
+            </th>
+          </tr>
+          <tr>
+            <td>
+              <table style={{ width: '100%' }}>
+                <tr>
+                  <td
+                    style={{ backgroundColor: '#FFFFFF', fontWeight: 'bold' }}
+                  >
+                    No. de pedido
+                  </td>
+                  <td
+                    style={{ backgroundColor: '#FFFFFF', fontWeight: 'bold' }}
+                  >
+                    No. de factura
+                  </td>
+                  <td
+                    style={{ backgroundColor: '#FFFFFF', fontWeight: 'bold' }}
+                  >
+                    Cartones
+                  </td>
+                  <td
+                    style={{ backgroundColor: '#FFFFFF', fontWeight: 'bold' }}
+                  >
+                    Bultos
+                  </td>
+                  <td
+                    style={{ backgroundColor: '#FFFFFF', fontWeight: 'bold' }}
+                  >
+                    No. de Caja
+                  </td>
+                  <td
+                    style={{ backgroundColor: '#FFFFFF', fontWeight: 'bold' }}
+                  >
+                    Medida de la caja
+                  </td>
+                </tr>
+                <tr>
+                  <td>{Data?.po}</td>
+                  <td>{Data?.factura}</td>
+                  <td>&nbsp;</td>
+                  <td>&nbsp;</td>
+                  <td>{Data?.truckNumber}</td>
+                  <td>
+                    {mCatMedidas
+                      ? mCatMedidas.map((a) => {
+                          return Data?.medidaCaja === a.id.toString()
+                            ? a.Medida
+                            : ''
+                        })
+                      : null}
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+          <tr>
+            <td>&nbsp;</td>
+          </tr>
+          <tr>
+            <td>
+              <span style={{ fontWeight: 'bold' }}>Nombre de la linea: </span>
+              {Data?.forwarder}
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <table style={{ width: '100%' }}>
+                <tr>
+                  <th
+                    colSpan={6}
+                    style={{ textAlign: 'center', backgroundColor: '#FFFFFF' }}
+                  >
+                    Numero de sellos
+                  </th>
+                </tr>
+                <tr>
+                  <td
+                    style={{ backgroundColor: '#FFFFFF', fontWeight: 'bold' }}
+                    width="30%"
+                  >
+                    Origen
+                  </td>
+                  <td
+                    style={{ backgroundColor: '#FFFFFF', fontWeight: 'bold' }}
+                    width="10%"
+                  >
+                    Izquierdo
+                  </td>
+                  <td
+                    style={{ backgroundColor: '#FFFFFF', fontWeight: 'bold' }}
+                    width="10%"
+                  >
+                    Derecho
+                  </td>
+                  <td
+                    style={{ backgroundColor: '#FFFFFF', fontWeight: 'bold' }}
+                    width="30%"
+                  >
+                    Nuevos despues de la revision
+                  </td>
+                  <td
+                    style={{ backgroundColor: '#FFFFFF', fontWeight: 'bold' }}
+                    width="10%"
+                  >
+                    Izquierdo
+                  </td>
+                  <td
+                    style={{ backgroundColor: '#FFFFFF', fontWeight: 'bold' }}
+                    width="10%"
+                  >
+                    Derecho
+                  </td>
+                </tr>
+                <tr>
+                  <td width="30%">{Data?.sello1}</td>
+                  <td width="10%" style={{ backgroundColor: '#FFFFFF' }}>
+                    &nbsp;
+                  </td>
+                  <td width="10%">&nbsp;</td>
+                  <td width="30%" style={{ backgroundColor: '#FFFFFF' }}>
+                    &nbsp;
+                  </td>
+                  <td width="10%">&nbsp;</td>
+                  <td width="10%" style={{ backgroundColor: '#FFFFFF' }}>
+                    &nbsp;
+                  </td>
+                </tr>
+                <tr>
+                  <td width="30%">{Data?.sello2}</td>
+                  <td width="10%">&nbsp;</td>
+                  <td width="10%">&nbsp;</td>
+                  <td width="30%">&nbsp;</td>
+                  <td width="10%">&nbsp;</td>
+                  <td width="10%">&nbsp;</td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+          <tr>
+            <td>&nbsp;</td>
+          </tr>
+          <tr>
+            <th colSpan={6} style={{ backgroundColor: '#FFFFFF' }}>
+              Numero de placa y estado de Origen
+            </th>
+          </tr>
+          <tr>
+            <td>&nbsp;</td>
+          </tr>
+          <tr>
+            <th colSpan={6} style={{ backgroundColor: '#FFFFFF' }}>
+              Condiciones de la caja o pipa
+            </th>
+          </tr>
+          <tr style={{ height: '90px' }}>
+            <td>&nbsp;</td>
+          </tr>
+          <tr>
+            <th colSpan={6} style={{ backgroundColor: '#FFFFFF' }}>
+              Resultado de la revision de la mercancia
+            </th>
+          </tr>
+          <tr style={{ height: '90px' }}>
+            <td>&nbsp;</td>
+          </tr>
+          <tr>
+            <td>
+              <table style={{ width: '100%' }}>
+                <tr>
+                  <td>&nbsp;</td>
+                  <td style={{ backgroundColor: '#FFFFFF' }}>&nbsp;</td>
+                </tr>
+                <tr>
+                  <th style={{ textAlign: 'center' }}>
+                    Nombre y firma del revisor
+                  </th>
+                  <th style={{ textAlign: 'center' }}>
+                    Fecha y hora de la revision
+                  </th>
+                </tr>
+              </table>
+            </td>
+          </tr>
+        </table>
+      </div>
+    </div>
+  )
+}

src/Components/Clientes/CasaCuervo/Reportes/ControlledInput/ControlledInput.tsx

@@ -0,0 +1,111 @@
+import React, { FC, useState } from 'react'
+import PedidosDataService from '../../Services/CasaCuervo.Services'
+import { Form } from 'react-bootstrap'
+//import Datetime from 'react-datetime'
+//import 'react-datetime/css/react-datetime.css'
+//import '../../../../../css/generic01.css'
+import DatePicker from 'react-datepicker'
+
+interface IProps {
+  value: string
+  mode: string
+  IDPedido: number
+  onUpdate: (valor: string) => void
+}
+
+export const ControlledInput: FC<IProps> = (props) => {
+  //const dispatch = useDispatch()
+  const [value, setValue] = useState(props.value)
+  const [valueDT, setValueDT] = useState(null)
+  const [header, setHeader] = useState('')
+  const [msgColor, setMsgColor] = React.useState('primary')
+  const [show, setShowMsg] = useState(false)
+  const [msg, setMsg] = useState('')
+  const [startDate, setStartDate] = useState(new Date())
+
+  const onChange = (event: any) => {
+    setValue(event.target.value)
+  }
+
+  const DoStuff = (event: any) => {
+    setValue(event.target.value)
+    PedidosDataService.Update(props.IDPedido, props.mode, event.target.value)
+      .then((response) => {
+        if (response.status == 200) {
+          setHeader('Informativo')
+          setMsg('La informacion se guardo exitosamente')
+          setShowMsg(true)
+          props.onUpdate(event.target.value)
+          return
+        }
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+  }
+
+  const handleKeyDown = (event: any) => {
+    if (event.key === 'Enter') {
+      if (value) {
+        PedidosDataService.Update(props.IDPedido, props.mode, value)
+          .then((response) => {
+            if (response.status == 200) {
+              setHeader('Informativo')
+              setMsg('La informacion se guardo exitosamente')
+              setShowMsg(true)
+              props.onUpdate(value)
+              return
+            }
+          })
+          .catch((e: Error) => {
+            setHeader('Error')
+            setMsg('Ocurrio un error: ' + e)
+            setShowMsg(true)
+            return
+          })
+      }
+    }
+  }
+
+  return (
+    <>
+      {props.mode === 'estatus' || props.mode === 'comentarioGEMCO' ? (
+        <input
+          value={value}
+          onChange={onChange}
+          onKeyDown={(e) => handleKeyDown(e)}
+          style={{ width: '75%' }}
+        />
+      ) : (
+        /*   <Form.Control
+          defaultValue={value}
+          type='date'
+          name='Inicio'
+          placeholder='Inicio'
+          title='Inicio'
+          alt='Inicio'
+          data-date-format='YYYY-mm-dd'
+          onChange={(e) => DoStuff(e)}
+          size='sm'
+        /> */
+        /*  <Datetime
+          input={true}
+          initialValue={value}
+          inputProps={{ placeholder: 'No definido', className: 'genericinput' }}
+          onChange={(date: any) => setValue(date)}
+          dateFormat='yyyy-MM-DD'
+        /> */
+        <DatePicker
+          selected={valueDT}
+          onChange={(date: any) => setStartDate(date)}
+          timeInputLabel="Time:"
+          dateFormat="MM/dd/yyyy h:mm aa"
+          showTimeInput
+        />
+      )}
+    </>
+  )
+}

src/Components/Clientes/CasaCuervo/Reportes/RptCasaCuervoCOVEs.tsx

@@ -0,0 +1,528 @@
+import { FC, useEffect, useState } from 'react'
+import { Alert, Button, Card, Col, Form, Modal, Row } from 'react-bootstrap'
+import {
+  BsCloudArrowUpFill,
+  BsFileEarmarkExcel,
+  BsFillPencilFill,
+  BsSearch
+} from 'react-icons/bs'
+import I325Pedidos from '../Interfaces/I325Pedidos'
+import { MsgInformativo } from '../../../Utils/Toast/msgInformativo'
+import PedDataService from '../Services/CasaCuervo.Services'
+import DataTable from 'react-data-table-component'
+import DTO325AduanasPedidos from '../../../../DTO/Clientes/CasaCuervo/DTO325AduanasPedidos'
+import * as XLSX from 'xlsx'
+import { IconContext } from 'react-icons'
+import FileManager from '../../../Utils/FileManager/FileManager'
+import DatePicker from 'react-datepicker'
+import 'react-datepicker/dist/react-datepicker.css'
+import DTO325UpdateFromWeb from '../../../../DTO/Clientes/CasaCuervo/DTO325UpdateFromWeb'
+import I325RptCOVEs from '../Interfaces/I325RptCOVEs'
+
+
+interface IMedidaCaja {
+  id: number
+  Medida: string
+}
+
+export interface IRptCOVEsProps {
+}
+
+export default function RptCasaCuervoCOVEs (props: IRptCOVEsProps) {
+  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 [UserType, setUserType] = useState(() => {
+    const stickyValue = window.localStorage.getItem('UserType')
+    return stickyValue !== null ? JSON.parse(stickyValue) : ''
+  })
+  const queryParams = new URLSearchParams(window.location.search)
+  const [Search, setSearch] = useState('')
+  const [DoneColor, setDoneColor] = useState('#CCD1D1')
+  const [CurrentTime2Number, setCurrentTime2Number] = useState(0)
+  const [Data, setData] = useState<I325RptCOVEs[]>([])
+  const [DataOriginal, setDataOriginal] = useState<I325RptCOVEs[]>([])
+  const [Aduanas, setAduanas] = useState<DTO325AduanasPedidos[]>([])
+  const [Aduana, setAduana] = useState('Aduanas...')
+  const [show, setShowMsg] = useState(false)
+  const [ShowModal, setShowModal] = useState(false)
+  const [header, setHeader] = useState('')
+  const [msg, setMsg] = useState('')
+  const [Inicio, setInicio] = useState(currentDate(-30))
+  const [Fin, setFin] = useState(currentDate(0))
+  const [filtro, setFiltro] = useState('')
+  const [tipoReporte, setTipoReporte] = useState(0)
+  const [msgColor, setMsgColor] = useState('primary')
+  const [modalFileManager, setModalFileManager] = useState(false)
+  const [modalFileManagerCorresponsal, setModalFileManagerCorresponsal] =
+    useState(false)
+  const [modalEdit, setModalEdit] = useState(false)
+  const [ComentarioGEMCO, setComentarioGEMCO] = useState('')
+  const [fechaCompromiso, setFechaCompromiso] = useState<Date | null>()
+  const [fechaCruce, setFechaCruce] = useState<Date | null>()
+  const [DTOfechaCompromiso, setDTOFechaCompromiso] = useState<string>('')
+  const [DTOfechaCruce, setDTOFechaCruce] = useState<string>('')
+  const [PO, setPO] = useState('')
+  const [Carrier, setCarrier] = useState('')
+  const [IDPedido, setIDPedido] = useState(0)
+  const [Factura, setFactura] = useState('')
+  const [MedidaCaja, setMedidaCaja] = useState('')
+  const [Sello1, setSello1] = useState('')
+  const [Sello2, setSello2] = useState('')
+  const [UUID, setUUID] = useState('')
+  const [Trafico, setTrafico] = useState('')
+  const [Pedimento, setPedimento] = useState('')
+  const [Patente, setPatente] = useState('')
+  const [ModalTmpPDF, setModalTmpPDF] = useState(false)
+  const [NoPedido, setNoPedido] = useState('')
+  const [NoCaja, setNoCaja] = useState('')
+
+  const columnsConcepts = [
+    {
+      name: 'Factura',
+      width: '120px',
+      selector: (row: I325RptCOVEs) => row.factura,
+      sortable: true
+    },
+    {
+      name: 'COVE',
+      width: '150px',
+      selector: (row: I325RptCOVEs) => row.cove,
+      sortable: true
+    },
+    {
+      name: 'Pedimento',
+      width: '120px',
+      selector: (row: I325RptCOVEs) => row.pedimento,
+      sortable: true
+    },
+    {
+      name: 'Clave',
+      width: '80px',
+      selector: (row: I325RptCOVEs) => row.clave,
+      sortable: true
+    },
+    {
+      name: 'Fecha pago',
+      width: '170px',
+      selector: (row: I325RptCOVEs) => row.fechaPago,
+      sortable: true
+    },
+    {
+      name: 'Vehiculo',
+      width: '150px',
+      selector: (row: I325RptCOVEs) => row.vehiculo,
+      sortable: true
+    }
+  ]
+
+  const mCatMedidas: IMedidaCaja[] = [
+    { id: 0, Medida: 'SELECCIONE' },
+    { id: 1, Medida: 'Caja 53 pies' },
+    { id: 2, Medida: 'Caja 48 pies' },
+    { id: 3, Medida: 'Refrigerada 53 pies' },
+    { id: 4, Medida: 'Pipa' }
+  ]
+
+  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 StrtoDate = (str: string): Date | null => {
+    if (str) {
+      const original: any = new Date(str)
+      return original
+    } else return null
+  }
+
+  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
+  }
+
+  const generaReporte = () => {
+    setTipoReporte(0)
+    PedDataService.GetRptCOVEs(
+      Inicio,
+      Fin
+    )
+      .then((response) => {
+        setData(response.data)
+        setDataOriginal(response.data)
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+  }
+
+  const populateAduanas = () => {
+    PedDataService.getAduanas(UserId, UserType)
+      .then((response) => {
+        console.log(
+          '...........................................Aduanas ' + response.data
+        )
+        setAduanas(response.data)
+        setAduana(response.data[0].value)
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+  }
+
+ 
+  const uploadExcel = () => {
+    const d1 = new Date()
+    setCurrentTime2Number(d1.getTime())
+    setModalFileManager(true)
+  }
+
+  const uploadExcelCorresponsal = () => {
+    const d1 = new Date()
+    setCurrentTime2Number(d1.getTime())
+    setModalFileManagerCorresponsal(true)
+  }
+
+  const downloadExcel = () => {
+    exportExcel(Data, 'Reporte de COVEs de Casa Cuervo')
+  }
+
+  function exportExcel(jsonData: I325RptCOVEs[], fileName: string): void {
+    let Heading = [
+      [
+        'Factura',
+        'COVE',
+        'Pedimento',
+        'Clave',
+        'Fecha pago',
+        'Vehiculo'
+      ]
+    ]
+    const dataOnly = jsonData.map(
+      ({
+        factura,
+        cove,
+        pedimento,
+        clave,
+        fechaPago,
+        vehiculo
+      }) => {
+        return {
+          factura,
+        cove,
+        pedimento,
+        clave,
+        fechaPago,
+        vehiculo
+        }
+      }
+    )
+   /*  dataOnly.forEach((row, index, array) => {
+      if (row.fechaCruce.length === 0 && row.modulacion.length > 0) {
+        dataOnly[index].fechaCruce = row.modulacion
+      }
+    }) */
+    /* const Report = dataOnly.map(
+      ({
+        po,
+        aduana,
+        destination,
+        truckNumber,
+        forwarder,
+        carrier,
+        loadDate,
+        prioridad,
+        estatus,
+        comentarioGEMCO,
+        fechaCompromiso,
+        fechaCruce,
+        factura,
+        uuid,
+        trafico,
+        pedimento,
+        patente,
+        actualizacion
+      }) => {
+        return {
+          po,
+          aduana,
+          destination,
+          truckNumber,
+          forwarder,
+          carrier,
+          loadDate,
+          prioridad,
+          estatus,
+          comentarioGEMCO,
+          fechaCompromiso,
+          fechaCruce,
+          factura,
+          uuid,
+          trafico,
+          pedimento,
+          patente,
+          actualizacion
+        }
+      }
+    ) */
+    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, dataOnly, { 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 uploadFile = (idFile: number, Process: number) => {
+    PedDataService.Append(idFile, Process)
+      .then((response) => {
+        console.log(response.data)
+        if (!response.data) {
+          setHeader('Error')
+          setMsg(
+            'Ocurrio un error, favor de verificar el formato de la fecha, debe ser: MM/dd/yyyy '
+          )
+          setShowMsg(true)
+        }
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+  }
+
+  useEffect(() => {
+    populateAduanas()
+  }, [])
+
+  useEffect(() => {
+    if (fechaCompromiso) setDTOFechaCompromiso(fechaCompromiso.toString())
+    if (fechaCruce) setDTOFechaCruce(fechaCruce.toString())
+  }, [fechaCompromiso, fechaCruce])
+
+  let handleColor = (time: Date) => {
+    return time.getHours() > 12 ? 'text-success' : 'text-error'
+  }
+
+  /* const saveInfo = (mode: number) => {
+    const data: DTO325UpdateFromWeb = {
+      id: IDPedido,
+      ComentarioGEMCO: ComentarioGEMCO,
+      FechaCompromiso: fechaCompromiso
+        ? adjustTimeZone(DTOfechaCompromiso)
+        : '',
+      FechaCruce: fechaCruce ? adjustTimeZone(DTOfechaCruce) : '',
+      Factura: Factura,
+      MedidaCaja: MedidaCaja,
+      Sello1: Sello1,
+      Sello2: Sello2,
+      UUID: UUID,
+      Trafico: Trafico,
+      Pedimento: Pedimento,
+      Patente: Patente
+    }
+    PedDataService.UpdateInfo(data)
+      .then((response) => {
+        const idx = Data.findIndex((obj) => obj.id == IDPedido)
+        Data[idx].comentarioGEMCO = ComentarioGEMCO
+        Data[idx].fechaCompromiso = fechaCompromiso
+          ? adjustTimeZone(DTOfechaCompromiso)
+          : ''
+        Data[idx].fechaCruce = fechaCruce ? adjustTimeZone(DTOfechaCruce) : ''
+        Data[idx].factura = Factura
+        Data[idx].sello1 = Sello1
+        Data[idx].sello2 = Sello2
+        Data[idx].trafico = Trafico
+        Data[idx].uuid = UUID
+        Data[idx].pedimento = Pedimento
+        Data[idx].patente = Patente
+        setDataOriginal(Data)
+        if (mode === 2) createPDF()
+        setModalEdit(false)
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        setModalEdit(false)
+      })
+  } */
+
+  useEffect(() => {
+    setData(DataOriginal)
+    /* if (tipoReporte === 0) setData(DataOriginal)
+    else if (tipoReporte === 1) {
+      setData(
+        DataOriginal.filter(function (row) {
+          if (row.fechaCruce.length === 0 && row.modulacion.length === 0)
+            return row
+        })
+      )
+    } else if (tipoReporte === 2) {
+      setData(
+        DataOriginal.filter(function (row) {
+          if (row.fechaCruce.length > 0 || row.modulacion.length > 0) return row
+        })
+      )
+    } */
+  }, [tipoReporte])
+
+  const createPDF = () => {
+    PedDataService.GeneratePDF4CC(IDPedido)
+      .then((response: any) => {
+        if (response.status === 200) {
+          console.log(response.data)
+          const blob = new Blob([response.data], { type: 'application/pdf' })
+          const url = window.URL.createObjectURL(blob)
+          window.open(url)
+        }
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('A esta factura no se le ha anexado PDF')
+        setShowMsg(true)
+        return
+      })
+  }
+
+  const generateTempPDF = () => {
+    PedDataService.GenerateTempPDF(
+      NoPedido ? NoPedido : '',
+      NoCaja ? NoCaja : '',
+      MedidaCaja ? MedidaCaja : '0',
+      Factura ? Factura : '',
+      Sello1 ? Sello1 : '.',
+      Sello2 ? Sello2 : '.',
+      Carrier ? Carrier : '.'
+    )
+      .then((response: any) => {
+        if (response.status === 200) {
+          console.log(response.data)
+          const blob = new Blob([response.data], { type: 'application/pdf' })
+          const url = window.URL.createObjectURL(blob)
+          window.open(url)
+        }
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg(e.message.toString())
+        setShowMsg(true)
+        return
+      })
+  }
+
+  return (
+    <div>
+      <Card>
+        <Card.Body>
+          <div className="row">
+            <div className="col-md-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"
+              />
+            </div>
+            <div className="col-md-1">
+              <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-6">&nbsp;</div>
+            <div className="col-md-1 right-label">
+              <Button
+                variant="primary"
+                size="sm"
+                onClick={() => {
+                  generaReporte()
+                }}
+              >
+                <BsSearch />
+                Buscar
+              </Button>
+            </div>
+            <div className="col-md-2">&nbsp;</div>
+            <div className="col">
+              <Button
+                size="sm"
+                variant="success"
+                onClick={() => {
+                  downloadExcel()
+                }}
+              >
+                <BsFileEarmarkExcel />
+                &nbsp; Descarga
+              </Button>
+            </div>
+          </div>
+        </Card.Body>
+      </Card>
+      <br />
+      <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>
+      <MsgInformativo
+        show={show}
+        msg={msg}
+        header={header}
+        msgColor={msgColor}
+        closeToast={() => {
+          setShowMsg(false)
+        }}
+      />
+    </div>
+  )
+}

src/Components/Clientes/CasaCuervo/Services/CasaCuervo.Services.ts

@@ -0,0 +1,80 @@
+import http from '../../../../Services/common/http-common'
+import IPedidosCasaCuervo from '../Interfaces/I325Pedidos'
+import DTO325AduanasPedidos from '../../../../DTO/Clientes/CasaCuervo/DTO325AduanasPedidos'
+import DTO325UpdateFromWeb from '../../../../DTO/Clientes/CasaCuervo/DTO325UpdateFromWeb'
+import { IServerSideTransactionManager } from 'ag-grid-community'
+import I325RptCOVEs from '../Interfaces/I325RptCOVEs'
+
+class CasaCuervoDataService {
+  getAll(Inicio: string, Fin: string, Aduana: string) {
+    return http.get<IPedidosCasaCuervo[]>(
+      `/Clientes/CasaCuervo/Pedidos/getAll?Inicio=${Inicio}&Fin=${Fin}&Aduana=${Aduana}`
+    )
+  }
+  GetById(Id: number) {
+    return http.get<IPedidosCasaCuervo>(
+      `/Clientes/CasaCuervo/Pedidos/GetById?Id=${Id}`
+    )
+  }
+  getAduanas(Usuario: number, TipoUsuario: number) {
+    return http.get<DTO325AduanasPedidos[]>(
+      `/Clientes/CasaCuervo/Pedidos/getAduanas?Usuario=${Usuario}&TipoUsuario=${TipoUsuario}`
+    )
+  }
+  Update(id: number, Campo: string, Valor: string) {
+    return http.put<IPedidosCasaCuervo[]>(
+      `/Clientes/CasaCuervo/Pedidos/Update/${id}/${Campo}/${Valor}`
+    )
+  }
+  UpdateInfo(data: DTO325UpdateFromWeb) {
+    return http.put<IPedidosCasaCuervo>(
+      `/Clientes/CasaCuervo/Pedidos/UpdateInfo/${data.id}`,
+      data
+    )
+  }
+  Append(id: number, Proceso: number) {
+    return http.get<IPedidosCasaCuervo[]>(
+      `/Clientes/CasaCuervo/Pedidos/UploadExcel?id=${id}&Proceso=${Proceso}`
+    )
+  }
+  GeneratePDF4CC(id: number) {
+    return http
+      .get<ArrayBuffer>(
+        `/Clientes/CasaCuervo/Pedidos/GeneratePDF4CC?id=${id}`,
+        { responseType: 'arraybuffer' }
+      )
+      .then(function (response) {
+        return response
+      })
+      .catch(function (error) {
+        console.log(error)
+      })
+  }
+  GenerateTempPDF(
+    NoPedido: string,
+    NoCaja: string,
+    nMedidaCaja: string,
+    Factura: string,
+    Sello1: string,
+    Sello2: string,
+    Carrier: string
+  ) {
+    return http
+      .get<ArrayBuffer>(
+        `/Clientes/CasaCuervo/Pedidos/GenerateTempPDF?NoPedido=${NoPedido}&NoCaja=${NoCaja}&nMedidaCaja=${nMedidaCaja}&Factura=${Factura}&Sello1=${Sello1}&Sello2=${Sello2}&Carrier=${Carrier}`,
+        { responseType: 'arraybuffer' }
+      )
+      .then(function (response) {
+        return response
+      })
+      .catch(function (error) {
+        console.log(error)
+      })
+  }
+  GetRptCOVEs(Inicio: string, Fin: string) {
+    return http.get<I325RptCOVEs[]>(
+      `/Clientes/CasaCuervo/Pedidos/GetRptCOVEs?Inicio=${Inicio}&Fin=${Fin}`
+    )
+  }
+}
+export default new CasaCuervoDataService()

src/Components/Clientes/Heineken/Components/CmbArchivos.tsx

@@ -0,0 +1,105 @@
+import React, { FC, useEffect, useState } from 'react'
+import { Form } from 'react-bootstrap'
+import { IconContext } from 'react-icons'
+import { BsX } from 'react-icons/bs'
+import IFileManager from '../../../../Interfaces/Utils/IFileManager'
+import MFileManagerDS from '../../../../Services/Utils/MFileManager.Service'
+
+interface IProps {
+  id: number
+  docType: number
+}
+
+export const CmbArchivos: FC<IProps> = (props) => {
+  const [Data, setData] = useState<IFileManager[]>([])
+  const [IDArchivo, setIDArchivo] = useState(0)
+
+  useEffect(() => {
+    if (props.id !== 0) {
+      MFileManagerDS.Get(props.id, props.docType)
+        .then((response) => {
+          console.log(JSON.stringify(response.data))
+          setData(response.data)
+        })
+        .catch((e: Error) => {
+          return
+        })
+    }
+  }, [props.id])
+
+  const viewFile = (e: any) => {
+    setIDArchivo(parseInt(e.target.value))
+    getFileContent(parseInt(e.target.value), props.docType)
+  }
+
+  const getFileContent = (id: number, proceso: number) => {
+    MFileManagerDS.getFileContentById(id, proceso)
+      .then((response: any) => {
+        if (response.status === 200) {
+          let found = Data.filter((a) => {
+            if (a.id == id) {
+              return a
+            }
+          })
+          if (found[0].nombreArchivo.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 (
+            found[0].nombreArchivo.toLowerCase().endsWith('.png') ||
+            found[0].nombreArchivo.toLowerCase().endsWith('.jpg')
+          ) {
+            const blob = new Blob([response.data], { type: 'image/png' })
+            const url = window.URL.createObjectURL(blob)
+            window.open(url)
+          } else {
+            const url = window.URL.createObjectURL(new Blob([response.data]))
+            const link = document.createElement('a')
+            link.href = url
+            link.setAttribute('download', found[0].nombreArchivo ? found[0].nombreArchivo : 'Archivo.zip')
+            document.body.appendChild(link)
+            link.click()
+          }
+        } else {
+          return
+        }
+      })
+      .catch((e: Error) => {
+        return
+      })
+  }
+
+  return (
+    <div style={{ textAlign: 'center' }}>
+      {Data.length > 0 ? (
+        <>
+          <Form.Control
+            as='select'
+            onChange={(e) => {
+              viewFile(e)
+            }}
+            className='form-select form-select-sm'
+          >
+            <option value='0'>-SELECCIONE-</option>
+            {Data
+              ? Data.map((c) => {
+                  return (
+                    <option key={c.id} value={c.id}>
+                      {c.nombreArchivo}
+                    </option>
+                  )
+                })
+              : null}
+          </Form.Control>
+        </>
+      ) : (
+        <IconContext.Provider value={{ color: '#000000', size: '15px' }}>
+          <BsX />
+        </IconContext.Provider>
+      )}
+    </div>
+  )
+}
+
+export default CmbArchivos