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

apps/web/app/[locale]/home/[account]/modules/[moduleId]/new/create-record-form.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { useTransition } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { createRecord } from '@kit/module-builder/actions/record-actions';
+import { ModuleForm } from '@kit/module-builder/components';
+import { useActionWithToast } from '@kit/ui/use-action-with-toast';
+
+type FieldDef = Parameters<typeof ModuleForm>[0]['fields'][number];
+
+interface CreateRecordFormProps {
+  fields: FieldDef[];
+  moduleId: string;
+  accountId: string;
+  accountSlug: string;
+}
+
+export function CreateRecordForm({
+  fields,
+  moduleId,
+  accountId,
+  accountSlug,
+}: CreateRecordFormProps) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+
+  const { execute, isPending: isExecuting } = useActionWithToast(createRecord, {
+    successMessage: 'Datensatz erstellt',
+    errorMessage: 'Fehler beim Erstellen',
+    onSuccess: () => {
+      startTransition(() => {
+        router.push(`/home/${accountSlug}/modules/${moduleId}`);
+      });
+    },
+  });
+
+  return (
+    <ModuleForm
+      fields={fields}
+      onSubmit={async (data) => {
+        execute({ moduleId, accountId, data });
+      }}
+      isLoading={isExecuting || isPending}
+    />
+  );
+}

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

@@ -2,8 +2,11 @@ import { createModuleBuilderApi } from '@kit/module-builder/api';
 import { ModuleForm } from '@kit/module-builder/components';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
 
+import { AccountNotFound } from '~/components/account-not-found';
 import { CmsPageShell } from '~/components/cms-page-shell';
 
+import { CreateRecordForm } from './create-record-form';
+
 interface NewRecordPageProps {
   params: Promise<{ account: string; moduleId: string }>;
 }
@@ -13,6 +16,14 @@ export default async function NewRecordPage({ params }: NewRecordPageProps) {
   const client = getSupabaseServerClient();
   const api = createModuleBuilderApi(client);
 
+  const { data: accountData } = await client
+    .from('accounts')
+    .select('id')
+    .eq('slug', account)
+    .single();
+
+  if (!accountData) return <AccountNotFound />;
+
   const moduleWithFields = await api.modules.getModuleWithFields(moduleId);
   if (!moduleWithFields) return <div>Modul nicht gefunden</div>;
 
@@ -41,10 +52,11 @@ export default async function NewRecordPage({ params }: NewRecordPageProps) {
       title={`${String(moduleWithFields.display_name)} — Neuer Datensatz`}
     >
       <div className="mx-auto max-w-3xl">
-        <ModuleForm
+        <CreateRecordForm
           fields={fields as Parameters<typeof ModuleForm>[0]['fields']}
-          onSubmit={async () => {}}
-          isLoading={false}
+          moduleId={moduleId}
+          accountId={accountData.id}
+          accountSlug={account}
         />
       </div>
     </CmsPageShell>