Implement missing API endpoints

src/components/shared/SearchBar.tsx

@@ -0,0 +1,73 @@
+import { useState, useEffect } from 'react';
+import { Search, X, Loader2 } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+interface SearchBarProps {
+  onSearch: (query: string) => void;
+  placeholder?: string;
+  className?: string;
+  loading?: boolean;
+  debounceMs?: number;
+}
+
+export const SearchBar = ({
+  onSearch,
+  placeholder = 'Buscar...',
+  className,
+  loading = false,
+  debounceMs = 500,
+}: SearchBarProps) => {
+  const [query, setQuery] = useState('');
+  const [debouncedQuery, setDebouncedQuery] = useState('');
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedQuery(query);
+    }, debounceMs);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [query, debounceMs]);
+
+  useEffect(() => {
+    onSearch(debouncedQuery);
+  }, [debouncedQuery, onSearch]);
+
+  const handleClear = () => {
+    setQuery('');
+    setDebouncedQuery('');
+    onSearch('');
+  };
+
+  return (
+    <div className={cn('relative', className)}>
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
+        <Input
+          type="text"
+          placeholder={placeholder}
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          className="pl-10 pr-20"
+        />
+        <div className="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2">
+          {loading && <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />}
+          {query && (
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="h-6 w-6"
+              onClick={handleClear}
+            >
+              <X className="w-4 h-4" />
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};