diff --git a/src/Components/Dashboard/Dashboard.tsx b/src/Components/Dashboard/Dashboard.tsx
index 54690ab..faef2b4 100644
--- a/src/Components/Dashboard/Dashboard.tsx
+++ b/src/Components/Dashboard/Dashboard.tsx
@@ -6,6 +6,7 @@ import { Heineken1 } from './Heineken1'
 import { DashboardFacturacion } from './DashboardFacturacion'
 import { DashboardClasificacion } from './DashboardClasificacion'
 import DashboardTrafico from './DashboardTrafico'
+import DashboardDireccion from './DashboardDireccion'
 
 interface IProps {}
 
@@ -44,6 +45,9 @@ export default function Dashboard(props: IProps) {
           {[['Direcccion', 'Sistemas', 'Operaciones', 'Trafico'].includes(Depto) ? <DashboardTrafico /> : ''].map((item) => {
             return <React.Fragment>{item}</React.Fragment>
           })}
+          {[['Direccion', 'Sistemas'].includes(User) ? <DashboardDireccion /> : ''].map((item) => {
+            return <React.Fragment>{item}</React.Fragment>
+          })}
         </Row>
       </Container>
     </div>
diff --git a/src/Components/Dashboard/DashboardDireccion.tsx b/src/Components/Dashboard/DashboardDireccion.tsx
new file mode 100644
index 0000000..703b368
--- /dev/null
+++ b/src/Components/Dashboard/DashboardDireccion.tsx
@@ -0,0 +1,58 @@
+import React, { FC, useEffect, useState } from 'react'
+import { Card, Col, Container, Row } from 'react-bootstrap'
+import { IconContext } from 'react-icons'
+import { BsCashCoin } from 'react-icons/bs'
+import { Link } from 'react-router-dom'
+import DashboardDataService from '../../Services/Dashboard/Dashboard.Contabilidad.Service'
+
+interface IProps {}
+
+const DashboardDireccion: FC<IProps> = (props) => {
+  const [CTCTotal, setCTCTotal] = useState(0) // Corresponsales: Traficos terminados listos para contabilidad
+  const [CAPATotal, setCAPATotal] = useState(0) // Corresponsales anticipos pendientes de autorizar
+  const [CuentasComplementariasPedientes, setCuentasComplementariasPendientes] = useState(0) // Corresponsales anticipos pendientes de autorizar
+
+  useEffect(() => {
+    DashboardDataService.getTotalTraficosPendientesAutorizar(5)
+      .then((response) => {
+        setCTCTotal(response.data.total)
+      })
+      .catch((e: Error) => {
+        return
+      })
+  }, [])
+
+  return (
+    <>
+      <Col>
+        <Card style={{ width: '18rem' }} className='dashboardComponentFont'>
+          <Card.Header>Facturacion</Card.Header>
+          <Card.Body style={{ paddingBottom: '50px' }}>
+            <Card.Title>
+              Traficos pendientes
+              <br />
+              <br />
+            </Card.Title>
+            <Card.Img variant='top' src='' onClick={() => {}} />
+            <div style={{ fontSize: '6em' }} className='text-center'>
+              <IconContext.Provider value={{ color: 'green', size: '35%' }}>
+                <BsCashCoin />
+              </IconContext.Provider>
+              &nbsp;{CTCTotal}
+            </div>
+          </Card.Body>
+          <Card.Footer style={{ paddingRight: '5px' }}>
+            <Link
+              to='../RptCorresponsalesTraficos?proc=3&modo=1'
+              style={{ textDecoration: 'none', float: 'right', paddingRight: '10px' }}
+            >
+              Ver mas...
+            </Link>
+          </Card.Footer>
+        </Card>
+      </Col>
+    </>
+  )
+}
+
+export default DashboardDireccion
diff --git a/src/Interfaces/Dashboard/IDashboardPedimentosCruces.ts b/src/Interfaces/Dashboard/IDashboardPedimentosCruces.ts
new file mode 100644
index 0000000..ead7aa9
--- /dev/null
+++ b/src/Interfaces/Dashboard/IDashboardPedimentosCruces.ts
@@ -0,0 +1,9 @@
+export default interface IDashboardPedimentosCruces {
+   orden: number,
+   mes: number,
+   smes: string,
+   anio: number,
+   operacion: number,
+   despachos: number,
+   pedimentos: number 
+}
\ No newline at end of file
diff --git a/src/Services/Dashboard/Dashboard.Direccion.Services.ts b/src/Services/Dashboard/Dashboard.Direccion.Services.ts
new file mode 100644
index 0000000..e693872
--- /dev/null
+++ b/src/Services/Dashboard/Dashboard.Direccion.Services.ts
@@ -0,0 +1,12 @@
+import http from "../common/http-common";
+import IDashboardTotal from "../../Interfaces/IDashboardTotal";
+
+class Dashboard$Direccion$DataService {
+  GETPedimentosCruzadosData(id: number) {
+    return http.get<IDashboardTotal>(`/Direccion/GetPedimentosCrucesData?id=${id}`);
+  }
+  GETPedimentosCruzadosListaCliente() {
+    return http.get<IDashboardTotal>(`/Direccion/GetPedimentosCrucesListaPedimentos`);
+  }
+}
+export default new Dashboard$Direccion$DataService();
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index d5439ee..899b894 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -15,6 +15,7 @@ import AvisoCruce from './Components/AgenciaAduanal/AvisoCruce/AvisoCruce'
 import CatTabuladores from './Components/Catalogos/CatTabulador/CatTabulador'
 import DashboardCorresponsales from './Components/Dashboard/DashboardCorresponsales'
 import Dashboard from './Components/Dashboard/Dashboard'
+import DashboardDireccion from './Components/Dashboard/DashboardDireccion'
 import Logout from './Components/Logout/logout'
 import ResetCredentials from './Components/Login/ResetCredentials'
 import Register from './Components/Register/register'
@@ -107,6 +108,10 @@ ReactDOM.render(
             <Route
               path="/DashboardCorresponsales"
               element={<DashboardCorresponsales />}
+            />
+             <Route
+              path="/DashboardDireccion"
+              element={<DashboardDireccion />}
             />
             <Route path="/Dashboard" element={<Dashboard />} />
             <Route path="/RptOperaciones" element={<RptOperaciones />} />