Se agrego la funcionalidad del boton bucar por area

src/components/BuscarFuncionario.tsx

@@ -4,7 +4,7 @@
 import React, { useState } from 'react';
 import axios from 'axios';
 import { Funcionario } from '../types/Funcionarios';
-
+import { PayloadBusqueda } from '../types/Funcionarios';
 
 interface BuscarFuncionarioProps {
     onResultados: (data: Funcionario[]) => void;
@@ -15,22 +15,31 @@ export default function BuscarFuncionario({ onResultados }: BuscarFuncionarioPro
     const [apellidos, setApellidos] = useState('');
     const [area, setArea] = useState('0');
 
-    const fetchData = async () => {
-        try {
-        const payload = {
-            Nombre: nombre.trim(),
-            Apellidos: apellidos.trim(),
-            IdUnidadResponsable: parseInt(area, 10),
-        };
+const fetchData = async () => {
+    try {
+        const payload: PayloadBusqueda = {};
 
-        const response = await axios.post('https://venus.acatlan.unam.mx/funcionarios_test/test?', payload);
+        if (area !== '0') {
+            // Búsqueda por área
+            payload.tipoBusqueda = 'area';
+            payload.IdUnidadResponsable = parseInt(area, 10);
+        } else if (nombre.trim() || apellidos.trim()) {
+            // Búsqueda por nombre/apellidos
+            payload.tipoBusqueda = 'nombre';
+            payload.Nombre = nombre.trim();
+            payload.Apellidos = apellidos.trim();
+        } else {
+            alert('Por favor llena al menos un campo para filtrar.');
+            return;
+        }
+
+        const response = await axios.post('/api/directorio', payload);
         console.log('Datos recibidos:', response.data);
         onResultados(response.data as Funcionario[]);
-        console.log('Datos recibidos:', response.data); // 👈 Ver en consola
-        } catch (error) {
+    } catch (error) {
         console.error('Error al buscar funcionario:', error);
         onResultados([]);
-        }
+    }
     };
 
     const limpiarFiltro = () => {

src/types/Funcionarios.ts

@@ -5,3 +5,13 @@ export interface Funcionario {
     telefono: string;
     correo: string;
 }
+
+export interface DatosEntradaDirectorio {
+    Nombre?: string;
+    Apellidos?: string;
+    IdUnidadResponsable?: number;
+}
+
+export type PayloadBusqueda = DatosEntradaDirectorio & {
+    tipoBusqueda?: 'nombre' | 'area';
+};