From 5f5dbae7a27948c071a0b121655d5f31674df00b Mon Sep 17 00:00:00 2001
From: Luis Rendon <lrendon@gemcousa.com>
Date: Thu, 17 Aug 2023 17:08:42 -0500
Subject: [PATCH] Se agrego los archivos correspodientes para el nuevo
 componente FacturasFraccion

---
 .../Reportes/RptContsFacturasFraccion.tsx     | 301 ++++++++++++++++++
 .../Reportes/IRptContsFacturasFraccion.ts     |  16 +
 src/Services/Reportes/reportes.services.ts    |  14 +
 src/index.tsx                                 |  23 +-
 4 files changed, 346 insertions(+), 8 deletions(-)
 create mode 100644 src/Components/Reportes/RptContsFacturasFraccion.tsx
 create mode 100644 src/Interfaces/Reportes/IRptContsFacturasFraccion.ts

diff --git a/src/Components/Reportes/RptContsFacturasFraccion.tsx b/src/Components/Reportes/RptContsFacturasFraccion.tsx
new file mode 100644
index 0000000..2e4db35
--- /dev/null
+++ b/src/Components/Reportes/RptContsFacturasFraccion.tsx
@@ -0,0 +1,301 @@
+import React, { useEffect, useState } from 'react'
+//boostrap componentes
+import { Button, Card, Form } from 'react-bootstrap'
+
+//interfaces
+
+import { IRptFacturasFraccion } from '../../Interfaces/Reportes/IRptContsFacturasFraccion'
+
+import reportsDataService from '../../Services/Reportes/reportes.services'
+import { useDispatch } from 'react-redux'
+
+// Gui Components
+import { MsgInformativo } from '../Utils/Toast/msgInformativo'
+import { TargetURL } from '../../Constants/TargetURL'
+// import DataTable from 'react-data-table-component'
+import DataTable, { TableColumn } from 'react-data-table-component'
+
+//Other
+import moment from 'moment'
+import * as XLSX from 'xlsx'
+import { string } from 'yup'
+const URL = new TargetURL()
+
+export default function RptPFacturasFraccion() {
+  const [curURL, setCurURL] = useState(URL.get())
+  const [UserId, setUserId] = useState(() => {
+    const stickyValue = window.localStorage.getItem('UserId')
+    return stickyValue !== null ? JSON.parse(stickyValue) : 0
+  })
+  const [Data, setData] = useState<Array<IRptFacturasFraccion>>([])
+  const [filteredData, setFilteredData] = useState<Array<IRptFacturasFraccion>>(
+    []
+  )
+
+  const [msgColor, setMsgColor] = React.useState('primary')
+  const [show, setShowMsg] = useState(false)
+  const [header, setHeader] = useState('')
+  const [msg, setMsg] = useState('')
+  const [filtro, setFiltro] = useState('')
+  // const gridRef = React.useRef<any>(null)
+  const [referencia, setReferencia] = useState('')
+
+  const columnDefs = [
+    {
+      name: <div style={{ textAlign: 'center' }}>Factura</div>,
+      width: '220px',
+      selector: (row: IRptFacturasFraccion) => row.factura,
+      sortable: true,
+      filter: true,
+      center: true
+    },
+    {
+      name: <div style={{ textAlign: 'center' }}>Almacen</div>,
+      width: '100px',
+      selector: (row: IRptFacturasFraccion) => row.almacen,
+      sortable: true,
+      filter: true,
+      center: true
+    },
+    {
+      name: <div style={{ textAlign: 'center' }}>Orden</div>,
+      width: '100px',
+      selector: (row: IRptFacturasFraccion) => row.orden,
+      sortable: true,
+      filter: true,
+      center: true,
+      texAlign: 'center'
+    },
+    {
+      name: <div style={{ textAlign: 'center' }}>Parte</div>,
+      width: '150px',
+      selector: (row: IRptFacturasFraccion) => row.parte,
+      sortable: true,
+      filter: true,
+      center: true
+    },
+    {
+      name: <div style={{ textAlign: 'center' }}>Pais</div>,
+      width: '120px',
+      selector: (row: IRptFacturasFraccion) => row.pais,
+      sortable: true,
+      filter: true,
+      center: true
+    },
+    {
+      name: <div style={{ textAlign: 'center' }}>Fraccion Factura XML</div>,
+      width: '200px',
+      selector: (row: IRptFacturasFraccion) => row.fraccionFacturaXML,
+      sortable: true,
+      filter: true,
+      center: true
+    },
+    {
+      name: <div style={{ textAlign: 'center' }}>Fraccion GEMCO</div>,
+      width: '150px',
+      selector: (row: IRptFacturasFraccion) => row.fraccionGEMCO,
+      sortable: true,
+      filter: true,
+      center: true
+    },
+    {
+      name: <div style={{ textAlign: 'center' }}>Nico GEMCO</div>,
+      width: '120px',
+      selector: (row: IRptFacturasFraccion) => row.nicoGEMCO,
+      sortable: true,
+      filter: true,
+      center: true
+    }
+  ]
+
+  function currentDate(): string {
+    var today = new Date()
+    var dd = String(today.getDate()).padStart(2, '0')
+    var mm = String(today.getMonth() + 1).padStart(2, '0') //January is 0!
+    var yyyy = today.getFullYear()
+    return yyyy + '-' + mm + '-' + dd
+  }
+
+  const closeToast = (show: boolean): void => {
+    setShowMsg(false)
+  }
+
+  const generaReporte = () => {
+    reportsDataService
+      .getRptContsFacturasFraccion(referencia) // Usa la variable 'referencia' en lugar de 'Referencia'
+      .then((response) => {
+        setData(response.data)
+        setFilteredData(response.data)
+
+        setHeader('Informativo')
+        setMsg('Se encontró la siguiente información...')
+        setShowMsg(true)
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrió un error: ' + e.message)
+        setShowMsg(true)
+        return
+      })
+  }
+
+  const downloadExcel = () => {
+    console.log(Data)
+    exportExcel(Data, 'Facturas Fraccion')
+  }
+
+  function exportExcel(
+    jsonData: IRptFacturasFraccion[],
+    fileName: string
+  ): void {
+    let Heading = [
+      [
+        'Factura',
+        'Almacen',
+        'Orden',
+        'Parte',
+        'Pais',
+        'Fraccion Factura XML',
+        'Fraccion GEMCO',
+        'Nico GEMCO'
+      ]
+    ]
+    /* jsonData.forEach(function (v) {
+        delete v.tipodeCambiodePedimento
+      }) */
+    /*     jsonData.map(function (item) {
+        delete item.tipodeCambiodePedimento
+        return item
+      }) */
+    const wb = XLSX.utils.book_new()
+    const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet([])
+    XLSX.utils.sheet_add_aoa(ws, Heading)
+    XLSX.utils.sheet_add_json(ws, jsonData, { origin: 'A2', skipHeader: true })
+    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
+    XLSX.writeFile(wb, fileName + '.xlsx')
+    var range = XLSX.utils.decode_range(ws['!ref?'])
+    for (var C = range.s.c; C <= range.e.c; ++C) {
+      var address = XLSX.utils.encode_col(C) + '1' // <-- first row, column number C
+      if (!ws[address]) continue
+      ws[address].v = ws[address].v.toUpperCase()
+    }
+  }
+
+  const filtraReporte = (e: any) => {
+    const searchText = e.target.value.toLowerCase()
+
+    setFiltro(searchText)
+
+    const filtered = Data.filter((item) => {
+      return (
+        (item.factura && item.factura.toLowerCase().includes(searchText)) ||
+        (item.almacen && item.almacen.toLowerCase().includes(searchText)) ||
+        (item.orden && item.orden.toString().includes(searchText)) ||
+        (item.parte && item.parte.toLowerCase().includes(searchText)) ||
+        (item.pais && item.pais.toLowerCase().includes(searchText)) ||
+        (item.fraccionFacturaXML &&
+          item.fraccionFacturaXML.toLowerCase().includes(searchText)) ||
+        (item.fraccionGEMCO &&
+          item.fraccionGEMCO.toLowerCase().includes(searchText)) ||
+        (item.nicoGEMCO && String(item.nicoGEMCO).includes(searchText))
+      )
+    })
+
+    // console.log('Filtered Data:', filtered)
+
+    setFilteredData(filtered)
+  }
+
+  return (
+    <div>
+      <Card>
+        <Card.Body>
+          <div className="row">
+            <div className="col-md-1" style={{ textAlign: 'right' }}>
+              <Form.Label size="sm">Referencia</Form.Label>
+            </div>
+            <div className="col-md-1" style={{ width: '130px' }}>
+              <Form.Control
+                type="text"
+                size="sm"
+                value={referencia}
+                onChange={(e) => setReferencia(e.target.value)}
+              />
+            </div>
+
+            <div className="col-md-1" style={{ width: '5px' }}></div>
+            <div className="col-md-4" style={{ width: '150px ' }}>
+              <Button
+                variant="primary"
+                size="sm"
+                onClick={() => {
+                  generaReporte()
+                }}
+              >
+                Buscar
+              </Button>
+            </div>
+
+            <div className="col-md-1" style={{ width: '50px' }}></div>
+
+            <div className="col-md-4">
+              <Form.Control
+                type="text"
+                size="sm"
+                placeholder="Search..."
+                onChange={(e) => {
+                  filtraReporte(e)
+                }}
+              />
+            </div>
+            <div className="col-md-1" style={{ width: '260px' }}></div>
+            <div className="col-md-1">
+              <Button
+                size="sm"
+                variant="success"
+                onClick={() => {
+                  downloadExcel()
+                }}
+              >
+                Excel
+              </Button>
+            </div>
+          </div>
+        </Card.Body>
+      </Card>
+
+      <Card>
+        <Card.Body>
+          <div
+            className="ag-theme-alpine"
+            style={{ height: 400, width: '100%', textAlign: 'center' }}
+          >
+            <DataTable
+              columns={columnDefs}
+              data={filteredData}
+              defaultSortAsc={true}
+              striped={true}
+              dense={true}
+              paginationPerPage={10}
+              pagination
+              highlightOnHover
+              pointerOnHover
+              style={{ height: 300, width: '100%', textAlign: 'center' }}
+              noHeader // Para evitar que se muestre el encabezado del DataTable
+              onRowClicked={(row) => {
+                // Aquí puedes manejar el clic en una fila si es necesario
+              }}
+            />
+          </div>
+        </Card.Body>
+      </Card>
+      <MsgInformativo
+        show={show}
+        msg={msg}
+        header={header}
+        msgColor={msgColor}
+        closeToast={closeToast}
+      />
+    </div>
+  )
+}
diff --git a/src/Interfaces/Reportes/IRptContsFacturasFraccion.ts b/src/Interfaces/Reportes/IRptContsFacturasFraccion.ts
new file mode 100644
index 0000000..47e26e8
--- /dev/null
+++ b/src/Interfaces/Reportes/IRptContsFacturasFraccion.ts
@@ -0,0 +1,16 @@
+export interface IRptFacturasFraccion{
+factura : string, 
+almacen : string, 
+orden : number ; 
+parte : string,  
+pais : string , 
+fraccionFacturaXML : string,  
+fraccionGEMCO : string, 
+nicoGEMCO : string; 
+
+
+ 
+
+
+
+} 
\ No newline at end of file
diff --git a/src/Services/Reportes/reportes.services.ts b/src/Services/Reportes/reportes.services.ts
index 3721e6a..89ce4e9 100644
--- a/src/Services/Reportes/reportes.services.ts
+++ b/src/Services/Reportes/reportes.services.ts
@@ -17,6 +17,8 @@ import IRptOperacionesDiarias from '../../Interfaces/Reportes/IRptOperacionesDia
 import { IRptPedimentosPagadosFacturasCruzadas } from '../../Interfaces/Reportes/IRptPedimentosPagadosFacturasCruzadas'
 import {  IRptMonitoreoFacturaPagadasAmazon  } from '../../Interfaces/Reportes/IRptMonitoreoFacturasPagadasAmazon'
 import DTORPTMonitorFacturasPagAmazon from '../../DTO/Utils/DTORPTMonitorFacturasPagAmazon'
+import { IRptFacturasFraccion } from '../../Interfaces/Reportes/IRptContsFacturasFraccion'
+import { data } from 'cypress/types/jquery'
 class reportsDataService {
   getRptPedimentosPagados(data: DTOReporte) {
     return http.post<Array<IRptPedimentosPagados>>(
@@ -115,5 +117,17 @@ class reportsDataService {
     )
   }
 
+  getRptContsFacturasFraccion(Referencia: string)  
+  {
+    return http.get<Array<IRptFacturasFraccion>>(
+      `/reportes/RptContsFacturasConFraccion?Referencia=${Referencia}`
+    );
+    
+  }
+
+
+  
+  
+
 }
 export default new reportsDataService()
diff --git a/src/index.tsx b/src/index.tsx
index 2d6d86d..6cb3cf4 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -64,6 +64,7 @@ import RptSegregacion from './Components/Clientes/Amazon/Reportes/Segregacion/Rp
 import RptConsultaTrafico from './Components/Clientes/Amazon/Reportes/ConsultaTrafico/RptConsultaTrafico'
 import RptMonitoreoFacturasPagadasAmazon from './Components/Reportes/RptMonitoreoFacturasPagadasAmazon'
 import CatFraccionesVulnerables from './Components/Catalogos/CatFraccionesVulnerables/CatFraccionesVulnerables'
+import RptFacturasFraccion from './Components/Reportes/RptContsFacturasFraccion'
 
 require(`./css/${process.env.REACT_APP_ENVIRONMENT}-home.css`)
 
@@ -150,7 +151,10 @@ ReactDOM.render(
             <Route path="/CatTabuladores" element={<CatTabuladores />} />
             <Route path="/RptPedidos" element={<RptPedidos />} />
             <Route path="/Rpt1868Facturas" element={<Rpt1868Facturas />} />
-            <Route path = "/CatFraccionesVulnerables" element={<CatFraccionesVulnerables />  } />
+            <Route
+              path="/CatFraccionesVulnerables"
+              element={<CatFraccionesVulnerables />}
+            />
             <Route
               path="/Rpt1868Transportista"
               element={<Rpt1868Transportista />}
@@ -194,10 +198,7 @@ ReactDOM.render(
               path="/RptAmazonFacturasPagadas"
               element={<RptAmazonFacturasPagadas />}
             />
-            <Route
-              path="/RptSegregacion"
-              element={<RptSegregacion />}
-            />
+            <Route path="/RptSegregacion" element={<RptSegregacion />} />
             <Route
               path="/RptCasaCuervoCOVEs"
               element={<RptCasaCuervoCOVEs />}
@@ -210,9 +211,9 @@ ReactDOM.render(
               path="/RptPedimentosPagadosFacturasCruzadas"
               element={<RptPedimentosPagadosFacturasCruzadas />}
             />
-            <Route 
-            path="/RptMonitoreoFacturasPagadasAmazon"
-            element = {<RptMonitoreoFacturasPagadasAmazon />}
+            <Route
+              path="/RptMonitoreoFacturasPagadasAmazon"
+              element={<RptMonitoreoFacturasPagadasAmazon />}
             />
             <Route
               path="/RptPedimentosCruces01"
@@ -238,6 +239,12 @@ ReactDOM.render(
               path="/RptPedimentosCruces06"
               element={<RptPedimentosCruces06 />}
             />
+
+            <Route
+              path="/RptConsFacturasFraccion"
+              element={<RptFacturasFraccion />}
+            />
+
             <Route path="*" element={<PageNotFound />} />
           </Route>
         </Routes>