Creacion del Reporte de facturas de traficos consolidados de Alen

src/Components/ReportesClientes/Alen/ReporteFacturasConsolidados.tsx

@@ -0,0 +1,71 @@
+import { useState } from "react"
+import { Button, Card, Col, Form, Row } from "react-bootstrap"
+import ReportesAlenService from "../../../Services/Reportes/ReportesAlen.Service"
+import { MsgInformativo } from "../../Utils/Toast/msgInformativo"
+
+export const ReporteFacturasConsolidados:React.FC = () => {
+    const [Referencia, setReferencia] = useState('')
+    const [show, setShowMsg] = useState(false)
+    const [header, setHeader] = useState('')
+    const [msg, setMsg] = useState('')
+    const [msgColor, setMsgColor] = useState('primary')
+
+    const GetExcel = () => {
+        if(Referencia !== ''){
+            ReportesAlenService.getFacturasConsolidados(Referencia)
+            .then(resp => {
+                const url = window.URL.createObjectURL(new Blob([resp.data]));
+                const link = document.createElement('a');
+                link.href = url;
+                link.setAttribute('download', `${Referencia}.xlsx`);
+                document.body.appendChild(link);
+                link.click();
+            }).catch(e => {
+                setHeader('Error')
+                setMsg('Ocurrio un error al generar el reporte. Por favor, intentelo de nuevo.')
+                setShowMsg(true)
+                return
+            })
+        }else{
+            setHeader('Error')
+            setMsg('Favor de capturar la referencia para generar el reporte.')
+            setShowMsg(true)
+            return
+        }
+    }
+    return(
+        <>
+            <Row style={{height:'90vh'}} className="align-items-center justify-content-center">
+                    <Col xs={3}>
+                        <Card style={{width:'100%'}}>
+                            <Card.Header><h4>Reporte de Facturas</h4></Card.Header>
+                            <Card.Body>
+                                <Row style={{padding:'0px 20px 0px 20px'}} className="align-items-center justify-content-center">
+                                    <Form.Control
+                                        type="text"
+                                        placeholder="Referencia"
+                                        onChange={e => setReferencia(e.target.value)}
+                                    />
+                                </Row>
+                            </Card.Body>
+                            <Card.Footer style={{textAlign:'end'}}>
+                                <Button variant="primary"  title="Quitar archivo cargado" style={{marginRight:'10px'}} onClick={GetExcel}>
+                                    Generar Excel
+                                </Button>
+                            </Card.Footer>
+                        </Card>
+                    </Col>
+
+                </Row>
+            <MsgInformativo
+                show={show}
+                msg={msg}
+                header={header}
+                msgColor={msgColor}
+                closeToast={() => {
+                setShowMsg(false)
+                }}
+            />
+        </>
+    )
+}

src/Services/Reportes/ReportesAlen.Service.ts

@@ -5,6 +5,9 @@ class ReportesAlenService{
     getRelacionFacturas(referencia: string){
         return http.get(`ReportesAlen/RelacionFacturas?referencia=${referencia}`, {responseType: 'blob'});
     }
+    getFacturasConsolidados(referencia: string){
+        return http.get(`ReportesAlen/FacturasConsolidados?referencia=${referencia}`, {responseType: 'blob'});
+    }
 }
 
 export default new ReportesAlenService();

src/index.tsx

@@ -28,6 +28,7 @@ import { ClientesExternos } from './Components/Clientes/Clientes'
 import { ReporteGC50 } from './Components/ReportesClientes/GC50/ReporteGC50'
 import RptClientesTraficos from './Components/Clientes/Traficos/RptClientesTraficos'
 import { RelacionFacturas } from './Components/ReportesClientes/Alen/RelacionFacturas'
+import { ReporteFacturasConsolidados } from './Components/ReportesClientes/Alen/ReporteFacturasConsolidados'
 require (`./css/${process.env.REACT_APP_ENVIRONMENT}-home.css`)
 
 function PageNotFound() {
@@ -87,6 +88,7 @@ root.render(
               <Route path='/Reportes/GC50' element={<ReporteGC50/>}/>
               <Route path='/Reportes/Alen' element={<Outlet/>}>
                 <Route path='/Reportes/Alen/RelacionFacturas' element={<RelacionFacturas/>}/>
+                <Route path='/Reportes/Alen/FacturasConsolidados' element={<ReporteFacturasConsolidados/>}/>
               </Route>
             </Route>
             <Route path="Clientes" element={<Outlet/>}>{/*Aqui van todas las rutas relacionadas a los clientes */}