Se agrego el boton de regresar al diagrama

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';