feat(11-04): add client-side search bar to catalog page, remove ServiceForm

- New CatalogSearch client component: filters ServiceWithTags[] by name/tag, case-insensitive, instant (no reload)
- page.tsx now passes filtered services through CatalogSearch -> ServiceTable
- ServiceForm.tsx deleted — quick-add row in ServiceTable replaces its create-service UX
This commit is contained in:
2026-06-13 16:01:17 +02:00
parent c0bedf300e
commit 912a892ba5
3 changed files with 39 additions and 110 deletions
+36
View File
@@ -0,0 +1,36 @@
"use client";
import { useState, useMemo } from "react";
import { Input } from "@/components/ui/input";
import { Search } from "lucide-react";
import { ServiceTable } from "@/components/admin/catalog/ServiceTable";
import type { ServiceWithTags } from "@/lib/admin-queries";
export function CatalogSearch({ services }: { services: ServiceWithTags[] }) {
const [query, setQuery] = useState("");
const filtered = useMemo(() => {
const q = query.trim().toLowerCase();
if (!q) return services;
return services.filter((s) => {
if (s.name.toLowerCase().includes(q)) return true;
return s.tags.some((tag) => tag.toLowerCase().includes(q));
});
}, [services, query]);
return (
<div className="space-y-4">
<div className="relative max-w-sm">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#71717a]" />
<Input
type="text"
placeholder="Cerca per nome o tag..."
value={query}
onChange={(e) => setQuery(e.target.value)}
className="pl-9 h-9"
/>
</div>
<ServiceTable services={filtered} />
</div>
);
}
+3 -8
View File
@@ -1,6 +1,5 @@
import { getAllServices } from "@/lib/admin-queries";
import { ServiceTable } from "@/components/admin/catalog/ServiceTable";
import { ServiceForm } from "@/components/admin/catalog/ServiceForm";
import { CatalogSearch } from "./CatalogSearch";
export const revalidate = 0;
@@ -13,16 +12,12 @@ export default async function CatalogPage() {
<h1 className="text-2xl font-bold text-[#1a1a1a]">Catalogo Servizi</h1>
</div>
<div className="mb-6">
<ServiceForm />
</div>
{services.length === 0 ? (
<p className="text-sm text-[#71717a]">
Nessun servizio nel catalogo. Aggiungi il primo servizio qui sopra.
Nessun servizio nel catalogo. Scrivi un nome nella riga in fondo alla tabella e premi invio per crearne uno.
</p>
) : (
<ServiceTable services={services} />
<CatalogSearch services={services} />
)}
</div>
);