From 13e498c68c131b9b51515e404cf2e5af260e82b2 Mon Sep 17 00:00:00 2001
From: unknown <agarcia@gemcousa.com>
Date: Wed, 22 Mar 2023 11:28:07 -0500
Subject: [PATCH] Version funcional en 22.Mar.2022

---
 .../Payed/RptAmazonPayedOperations.tsx        | 448 ++++++++++++++++++
 .../Linking/RptAmazonLinkInvoice2Traffic.tsx  |   1 -
 .../Amazon/Services/Amazon.Services.ts        |   5 +
 src/Constants/TargetURL.ts                    |   5 +-
 src/css/home.css                              |   4 +
 src/index.tsx                                 |   7 +-
 6 files changed, 465 insertions(+), 5 deletions(-)
 create mode 100644 src/Components/Clientes/Amazon/Reportes/Payed/RptAmazonPayedOperations.tsx

diff --git a/src/Components/Clientes/Amazon/Reportes/Payed/RptAmazonPayedOperations.tsx b/src/Components/Clientes/Amazon/Reportes/Payed/RptAmazonPayedOperations.tsx
new file mode 100644
index 0000000..58e24a3
--- /dev/null
+++ b/src/Components/Clientes/Amazon/Reportes/Payed/RptAmazonPayedOperations.tsx
@@ -0,0 +1,448 @@
+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'
+
+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 [show, setShowMsg] = useState(false)
+  const [ShowModal, setShowModal] = useState(false)
+  const [WaitingDialog, setWaitingDialog] = useState(false)
+  const [WaitingMessage, setWaitingMessage] = useState('')
+  const [msg, setMsg] = useState('')
+  const [ShowModalAnswerFile, setShowModalAnswerFile] = useState(false)
+  const [IDProcess, setIDProcess] = useState(25)
+  const [IDFactura, setIDFactura] = useState(0)
+  const [Invoices, setInvoices] = useState<number[]>([])
+  const msgColor = 'primary'
+
+  const loadReport = () => {
+    DSAmazon.AmazonPayedOperationsGET()
+      .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
+      })
+  }
+
+  const downloadNoPartes = (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
+      })
+  }
+
+  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 xs={6}></Col>
+            <Col></Col>
+          </Row>
+        </Card.Body>
+      </Card>
+
+      <Card>
+        <Card.Body>
+          <div className="MDcontainer">
+            <Table className="MDTable" hover>
+              <thead style={{ position: 'sticky', top: '0' }}>
+                <tr>
+                  <th 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>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: '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={{
+                                fontWeight: 'bold',
+                                textAlign: 'center'
+                              }}
+                            >
+                              {mInvoices
+                                .filter((value) => value.id === MasterData.id)
+                                .map((row) => {
+                                  return row.detail.length
+                                })}
+                            </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"
+                />
+              </Col>
+              <Col></Col>
+            </Row>
+          </div>
+        </Modal.Body>
+      </Modal>
+
+      <MsgInformativo
+        show={show}
+        msg={msg}
+        header={header}
+        msgColor={msgColor}
+        closeToast={() => {
+          setShowMsg(false)
+        }}
+      />
+    </div>
+  )
+}
diff --git a/src/Components/Clientes/Amazon/Reportes/Traffic/Linking/RptAmazonLinkInvoice2Traffic.tsx b/src/Components/Clientes/Amazon/Reportes/Traffic/Linking/RptAmazonLinkInvoice2Traffic.tsx
index 9bbb36c..012d519 100644
--- a/src/Components/Clientes/Amazon/Reportes/Traffic/Linking/RptAmazonLinkInvoice2Traffic.tsx
+++ b/src/Components/Clientes/Amazon/Reportes/Traffic/Linking/RptAmazonLinkInvoice2Traffic.tsx
@@ -20,7 +20,6 @@ import {
 } from 'react-icons/fa'
 import I2096Headers from '../../../Interfaces/I2096Header'
 import DSAmazon from '../../../Services/Amazon.Services'
-import * as XLSX from 'xlsx'
 import { MsgInformativo } from '../../../../../Utils/Toast/msgInformativo'
 import { RootState } from '../../../../../../store/store'
 import {
diff --git a/src/Components/Clientes/Amazon/Services/Amazon.Services.ts b/src/Components/Clientes/Amazon/Services/Amazon.Services.ts
index 6c9e9d5..becb5ae 100644
--- a/src/Components/Clientes/Amazon/Services/Amazon.Services.ts
+++ b/src/Components/Clientes/Amazon/Services/Amazon.Services.ts
@@ -65,6 +65,11 @@ class AmazonDataService {
     return http.get<boolean>(`/AmazonInvoice/TerminaXTraficoFactura?id=${id}`)
   }
 
+
+  AmazonPayedOperationsGET() {
+    return http.get<I2096Headers[]>(`/AmazonInvoice/AmazonPayedOperationsGET`)
+  }
+
   ValidaFraccionGET(Fraccion: string) {
     return http.get<IRespuesta>(`/AmazonInvoice/C2096ValidaFraccion?Fraccion=${Fraccion}`)
   }
diff --git a/src/Constants/TargetURL.ts b/src/Constants/TargetURL.ts
index a0299bf..fa83520 100644
--- a/src/Constants/TargetURL.ts
+++ b/src/Constants/TargetURL.ts
@@ -3,8 +3,7 @@ export class TargetURL {
     return !process.env.NODE_ENV || process.env.NODE_ENV === 'development'
       ? 'https://localhost:5001/api'
       : //: "http://reportes.gemcousa.com:5000/api";
-        //   'https://www.gemcousa.mx/GEMCOBackend/api'
-        //: "https://www.alphaomega.com.mx/AOLBackend/api";
-        'http://209.159.158.178/QABackend/api'
+           'https://www.gemcousa.mx/GEMCOBackend/api'
+        //'http://209.159.158.178/QABackend/api'
   }
 }
diff --git a/src/css/home.css b/src/css/home.css
index e6c8df8..03412a2 100644
--- a/src/css/home.css
+++ b/src/css/home.css
@@ -25,6 +25,10 @@ div.App > div.container {
     background-image: linear-gradient(to bottom, rgb(0, 75, 187),rgb(0, 113, 219),rgb(64, 150, 248)) !important;
     color: white;
 }
+.QAcustom-theme {
+    background-image: linear-gradient(to bottom, rgb(0, 75, 187),rgb(0, 113, 219),rgb(64, 150, 248)) !important;
+    color: white;
+}
 .navbar-brand, .navbar-nav .dropdown-toggle.nav-link, .navbar-collapse .btn-outline-success, #basic-navbar-nav a.nav-link, .navbar-toggler-icon {
     color: white;
 }
diff --git a/src/index.tsx b/src/index.tsx
index 1101d92..129b2cd 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -46,6 +46,7 @@ import { AmazonNoPartes } from './Components/Clientes/Amazon/Reportes/AmazonNoPa
 import { RptAmazonPendingTraficInvoice } from './Components/Clientes/Amazon/Reportes/Traffic/Pending/RtpAmazonPendingTraficInvoice'
 import { RptAmazonLinkInvoice2Traffic } from './Components/Clientes/Amazon/Reportes/Traffic/Linking/RptAmazonLinkInvoice2Traffic'
 import RptPendingAnswerFromAmazon from './Components/Clientes/Amazon/Reportes/Clasification/WaitingAnswerFromAmazon/RptPendingAnswerFromAmazon'
+import RptAmazonPayedOperations from './Components/Clientes/Amazon/Reportes/Payed/RptAmazonPayedOperations'
 
 function PageNotFound() {
   return (
@@ -174,8 +175,12 @@ ReactDOM.render(
               path="/RptAmazonLinkInvoice2Traffic"
               element={<RptAmazonLinkInvoice2Traffic />}
             />
+            <Route
+              path="/RptAmazonPayedOperations"
+              element={<RptAmazonPayedOperations />}
+            />
+            <Route path="*" element={<PageNotFound />} />
           </Route>
-          <Route path="*" element={<PageNotFound />} />
         </Routes>
       </HashRouter>
     </React.StrictMode>