feat: enhance API response handling and add new components for module management

apps/web/app/[locale]/home/[account]/modules/[moduleId]/page.tsx

@@ -1,5 +1,13 @@
+import Link from 'next/link';
+
+import { Plus } from 'lucide-react';
+
 import { createModuleBuilderApi } from '@kit/module-builder/api';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
+import { Button } from '@kit/ui/button';
+
+import { decodeFilters } from './_lib/filter-params';
+import { ModuleSearchBar } from './module-search-bar';
 
 interface ModuleDetailPageProps {
   params: Promise<{ account: string; moduleId: string }>;
@@ -25,6 +33,8 @@ export default async function ModuleDetailPage({
   const pageSize =
     Number(search.pageSize) || moduleWithFields.default_page_size || 25;
 
+  const filters = decodeFilters(search.f as string | undefined);
+
   const result = await api.query.query({
     moduleId,
     page,
@@ -38,9 +48,20 @@ export default async function ModuleDetailPage({
       (moduleWithFields.default_sort_direction as 'asc' | 'desc') ??
       'asc',
     search: (search.q as string) ?? undefined,
-    filters: [],
+    filters,
   });
 
+  const fields = (
+    moduleWithFields as unknown as {
+      fields: Array<{
+        name: string;
+        display_name: string;
+        show_in_filter: boolean;
+        show_in_search: boolean;
+      }>;
+    }
+  ).fields;
+
   return (
     <div className="flex flex-col gap-4">
       <div className="flex items-center justify-between">
@@ -54,14 +75,21 @@ export default async function ModuleDetailPage({
             </p>
           )}
         </div>
+        <Button asChild>
+          <Link href={`/home/${account}/modules/${moduleId}/new`}>
+            <Plus className="mr-2 h-4 w-4" />
+            Neuer Datensatz
+          </Link>
+        </Button>
       </div>
 
+      <ModuleSearchBar fields={fields} />
+
       <div className="text-muted-foreground text-sm">
         {result.pagination.total} Datensätze — Seite {result.pagination.page}{' '}
         von {result.pagination.totalPages}
       </div>
 
-      {/* Phase 3 will replace this with module-table component */}
       <div className="rounded-lg border">
         <pre className="max-h-96 overflow-auto p-4 text-xs">
           {JSON.stringify(result.data, null, 2)}