Creacion del indicador de traficos con cargos en dolares para contabilidad

src/Components/Dashboard/DashboardContabilidad.tsx

@@ -1,13 +1,11 @@
 import React, { FC, useEffect, useState } from 'react'
-import { Card, Col, Container, Row } from 'react-bootstrap'
+import { Card, Col } from 'react-bootstrap'
 import { IconContext } from 'react-icons'
-import { BsQuestionOctagonFill } from 'react-icons/bs'
-import { FaCcMastercard, FaFileInvoiceDollar, FaReply } from 'react-icons/fa'
-import { FcCancel, FcSurvey, FcUndo } from 'react-icons/fc'
+import { FaCcMastercard, FaFileInvoiceDollar, FaMoneyBillAlt, FaReply } from 'react-icons/fa'
+import { FcSurvey } from 'react-icons/fc'
 import { Link } from 'react-router-dom'
 import DashboardDataService from '../../Services/Dashboard/Dashboard.Contabilidad.Service'
 import DashboardCorresponsales from './DashboardCorresponsales'
-
 interface IProps {
   Depto: string;
 }
@@ -17,6 +15,7 @@ export const DashboardContabilidad: FC<IProps> = (props) => {
   const [CAPATotal, setCAPATotal] = useState(0) // Corresponsales anticipos pendientes de autorizar
   const [CuentasComplementariasPedientes, setCuentasComplementariasPendientes] = useState(0) // Corresponsales anticipos pendientes de autorizar
   const [RechazosContabilidad, setRechazosContabilidad] = useState(0);
+  const [TraficosConCargos, setTraficosConCargos] = useState(0);
 
   useEffect(() => {
     DashboardDataService.getTotalTraficosPendientesAutorizar(4)
@@ -46,6 +45,11 @@ export const DashboardContabilidad: FC<IProps> = (props) => {
     }).catch((e: Error) => {
       return;
     })
+    DashboardDataService.GetTraficosConCargos().then((response) => {
+      setTraficosConCargos(response.data.total)
+    }).catch((e: Error) => {
+      return;
+    })
   }, [])
 
   return (
@@ -148,6 +152,30 @@ export const DashboardContabilidad: FC<IProps> = (props) => {
           </Card.Footer>
         </Card>
       </Col>
+      <Col>
+        <Card style={{ width: '18rem' }} className='dashboardComponentFont'>
+          <Card.Header>Contabilidad </Card.Header>
+          <Card.Body style={{ paddingBottom: '50px' }}>
+            <Card.Title>&nbsp;Traficos Con Cargos de Dlls<br/><br/></Card.Title>
+            <Card.Img variant='top' src='' onClick={() => {}} />
+            <div style={{ fontSize: '6em' }} className='text-center'>
+              <IconContext.Provider value={{ color: '#428d00' }}>
+                <FcSurvey style={{fontSize:'larger'}}/>
+                <FaMoneyBillAlt   style={{fontSize:'60px', margin:'0 0 0 -4rem', position:"absolute", bottom: '6rem'}}/>
+              </IconContext.Provider>
+              {TraficosConCargos}
+            </div>
+          </Card.Body>
+          <Card.Footer style={{ paddingRight: '5px' }}>
+            <Link
+              to='../RptCorresponsalesTraficos/proc=2/modo=5'
+              style={{ textDecoration: 'none', float: 'right', paddingRight: '10px' }}
+            >
+              Ver mas...
+            </Link>
+          </Card.Footer>
+        </Card>
+      </Col>
     </>
   )
 }

src/Services/Dashboard/Dashboard.Contabilidad.Service.ts

@@ -14,5 +14,9 @@ class Dashboard_Contabilidad_DataService {
   getTotalRechazosContabilidad() {
     return http.get<IDashboardTotal>(`/Dashboard/Corresponsales/RechazosContabilidad`);
   }
+  
+  GetTraficosConCargos() {
+    return http.get<IDashboardTotal>(`/Dashboard/Corresponsales/TraficosConCargos`);
+  }
 }
 export default new Dashboard_Contabilidad_DataService();