Se agrego el boton de regresar al diagrama

.tsxt

@@ -1,13 +0,0 @@
-110 Departamento de movilidad estudiantil intercambio academico
-
-198 secretaría Auxiliar de Extensión Universitaria y Vinculación Institucional
-
-148 Secretaría Auxiliar de la Secretaría General", cargo: "Secretario Auxiliar
-
-5 Unidad de Administración y Recursos", cargo
-
-3 Unidad de Servicios a la Comunidad
-
-61 Superintendencia de Obras y Mantenimiento
-
-59 Unidad de la Oficina Jurídica

src/app/page.tsx

@@ -5,6 +5,7 @@ import BuscarFuncionario from '@/components/BuscarFuncionario';
 import OrganigramaInteractivo from '@/components/OrganigramaInteractivo';
 import axios from 'axios';
 import { Funcionario, PayloadBusqueda } from '@/types/Funcionarios';
+import { useRouter } from 'next/navigation';
 
 
 export default function Home() {
@@ -18,6 +19,8 @@ export default function Home() {
   const isPanning = useRef(false);
   const lastMouse = useRef<{ x: number; y: number } | null>(null);
 
+  const router = useRouter();
+
   const clamp = (v: number, a = 0.5, b = 5) => Math.min(Math.max(v, a), b);
 
   const handleWheel = useCallback((e: React.WheelEvent) => {
@@ -105,6 +108,12 @@ export default function Home() {
       .join(' ');
   };
 
+  const redirect = () => {
+    setResultados([]);
+    setCurrentAreaLabel('');
+    router.push('/')
+  }
+
   return (
     <main className="container-fluid py-4 bg-light min-h-screen">
       <div className="row">
@@ -112,7 +121,15 @@ export default function Home() {
 
         <div className="col-12 col-md-9">
           <h2 className="text-dorado mb-4">Directorio de Funcionarios</h2>
-          {currentAreaLabel && <h3 className="text-dorado mb-3 ms-2">{currentAreaLabel}</h3>}
+          {currentAreaLabel && (
+            <div className='d-flex align-items-center justify-content-between'>
+              <h3 className="text-dorado mb-3 ms-2">
+                {currentAreaLabel}
+              </h3>
+
+              <button type='button' className='btn btn-outline-primary btn-sm me-3' onClick={redirect}>Regresar al diagrama</button>
+            </div>
+          )}
 
           
 

src/components/BuscarFuncionario.tsx

@@ -1,4 +1,4 @@
-    'use client';
+'use client';
 
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';

src/data/areas.ts

@@ -23,6 +23,7 @@ export const AREAS: Array<{ id: number; label: string }> = [
   { id: 55, label: 'Coordinación del Programa de Diseño Gráfico' },
   { id: 54, label: 'Coordinación del Programa de Economía' },
   { id: 49, label: 'Coordinación del Programa de Enseñanza de Inglés' },
+  { id: 52, label: 'Coordinación del Programa de Humanidades'},
   { id: 51, label: 'Coordinación del Programa de Ingeniería Civil' },
   { id: 48, label: 'Coordinación del Programa de Matemáticas Aplicadas y Computación' },
   { id: 47, label: 'Coordinación del Programa de Pedagogía' },