Search and Filters

const handleSmartSearch = (filters: Record<string, unknown>) => {
  const typedFilters: AlumnoSearchFilters = {};

  if (filters.nombre) typedFilters.nombre = String(filters.nombre);
  if (filters.apellido) typedFilters.apellido = String(filters.apellido);
  if (filters.activo !== undefined)
    typedFilters.activo = Boolean(filters.activo);
  if (filters.propietario !== undefined)
    typedFilters.propietario = Boolean(filters.propietario);
  if (filters.fechaInscripcion)
    typedFilters.fechaInscripcion = String(filters.fechaInscripcion);
  if (filters.fechaNacimiento)
    typedFilters.fechaNacimiento = String(filters.fechaNacimiento);

  setSearchFilters(typedFilters);
  setCurrentPage(1); // Reset to page 1 on search
};

const { data: alumnos = [], isLoading } = useQuery({
  queryKey: ["alumnos", searchFilters],
  queryFn: () => {
    // If search filters exist, use search endpoint
    if (Object.keys(searchFilters).length > 0) {
      return alumnosApi.buscar(searchFilters);
    }
    // Otherwise, list all
    return alumnosApi.listar();
  },
  enabled: true,
});

const filterConfig = [
  {
    name: "cantidadClases",
    label: "Clases/Mes",
    type: "select" as const,
    options: [
      { label: "4 clases", value: "4" },
      { label: "8 clases", value: "8" },
      { label: "12 clases", value: "12" },
      { label: "16 clases", value: "16" },
    ],
  },
  {
    name: "activo",
    label: "Estado",
    type: "select" as const,
    options: [
      { label: "Activo", value: "true" },
      { label: "Inactivo", value: "false" },
    ],
  },
  {
    name: "propietario",
    label: "Propietario",
    type: "select" as const,
    options: [
      { label: "Sí", value: "true" },
      { label: "No", value: "false" },
    ],
  },
];

<FilterBar
  filters={filterConfig}
  values={filters}
  onChange={handleFilterChange}
  onReset={handleResetFilters}
  isLoading={isLoading}
/>

const filteredData = useMemo(() => {
  const validAlumnos = alumnos.filter((alumno: unknown): alumno is Alumno => {
    return (
      typeof alumno === "object" &&
      alumno !== null &&
      "id" in alumno &&
      "nombre" in alumno
    );
  });

  return validAlumnos.filter((alumno: Alumno) => {
    if (
      filters.cantidadClases !== "all" &&
      String(alumno.cantidadClases) !== filters.cantidadClases
    ) {
      return false;
    }
    if (
      filters.activo !== "all" &&
      String(alumno.activo) !== filters.activo
    ) {
      return false;
    }
    if (
      filters.propietario !== "all" &&
      String(alumno.propietario) !== filters.propietario
    ) {
      return false;
    }
    return true;
  });
}, [alumnos, filters]);

const filterConfig = [
  {
    name: "alumnoId",
    label: "Alumno",
    type: "select" as const,
    options: alumnos.map((a: Alumno) => ({
      label: `${a.nombre} ${a.apellido}`,
      value: String(a.id),
    })),
    placeholder: "Todos los alumnos",
  },
  {
    name: "instructorId",
    label: "Instructor",
    type: "select" as const,
    options: instructores.map((i: Instructor) => ({
      label: `${i.nombre} ${i.apellido}`,
      value: String(i.id),
    })),
    placeholder: "Todos los instructores",
  },
];

**Available in all sections**:
- Students
- Instructors
- Horses
- Classes

**Features**:
- Real-time search
- Filters by multiple fields simultaneously
- Instant results
- Maintains traditional filters available

const handleFilterChange = (name: string, value: string) => {
  setFilters((prev) => ({ ...prev, [name]: value }));
  setCurrentPage(1); // Reset to page 1 when filtering
};

const paginatedData = useMemo(() => {
  const startIndex = (currentPage - 1) * pageSize;
  const endIndex = startIndex + pageSize;
  return filteredData.slice(startIndex, endIndex);
}, [filteredData, currentPage, pageSize]);

const totalPages = Math.ceil(filteredData.length / pageSize);

const [filters, setFilters] = useState({
  cantidadClases: "all",
  activo: "all",
  propietario: "all",
});

const handleResetFilters = () => {
  setFilters({
    cantidadClases: "all",
    activo: "all",
    propietario: "all",
  });
  setSearchFilters({});
  setCurrentPage(1);
};

const isSearchActive = Object.keys(searchFilters).length > 0;

useEffect(() => {
  const handleGlobalSearchEvent = (e: CustomEvent) => {
    const { filters, entityType } = e.detail;
    if (entityType === "alumnos") {
      handleSmartSearch(filters);
    }
  };

  window.addEventListener(
    "globalSearch",
    handleGlobalSearchEvent as EventListener,
  );
  return () => {
    window.removeEventListener(
      "globalSearch",
      handleGlobalSearchEvent as EventListener,
    );
  };
}, []);