Add account hierarchy framework with migrations, RLS policies, and UI components

2026-03-31 22:18:04 +02:00
parent 7e7da0b465
commit 59546ad6d2
262 changed files with 11671 additions and 3927 deletions
--- a/apps/web/app/[locale]/home/[account]/modules/[moduleId]/[recordId]/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/modules/[moduleId]/[recordId]/page.tsx
@@ -1,12 +1,14 @@
-import { getSupabaseServerClient } from '@kit/supabase/server-client';
+import Link from 'next/link';
+
+import { Pencil, Trash2, Lock, Unlock } from 'lucide-react';

 import { createModuleBuilderApi } from '@kit/module-builder/api';
 import { ModuleForm } from '@kit/module-builder/components';
-import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
+import { formatDate } from '@kit/shared/dates';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { Badge } from '@kit/ui/badge';
 import { Button } from '@kit/ui/button';
-import { Pencil, Trash2, Lock, Unlock } from 'lucide-react';
-import Link from 'next/link';
+import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';

 import { CmsPageShell } from '~/components/cms-page-shell';

@@ -14,7 +16,9 @@ interface RecordDetailPageProps {
  params: Promise<{ account: string; moduleId: string; recordId: string }>;
 }

-export default async function RecordDetailPage({ params }: RecordDetailPageProps) {
+export default async function RecordDetailPage({
+  params,
+}: RecordDetailPageProps) {
  const { account, moduleId, recordId } = await params;
  const client = getSupabaseServerClient();
  const api = createModuleBuilderApi(client);
@@ -26,29 +30,49 @@ export default async function RecordDetailPage({ params }: RecordDetailPageProps

  if (!moduleWithFields || !record) return <div>Nicht gefunden</div>;

-  const fields = (moduleWithFields as unknown as {
-    fields: Array<{
-      name: string; display_name: string; field_type: string;
-      is_required: boolean; placeholder: string | null;
-      help_text: string | null; is_readonly: boolean;
-      select_options: Array<{ label: string; value: string }> | null;
-      section: string; sort_order: number; show_in_form: boolean; width: string;
-    }>;
-  }).fields;
+  const fields = (
+    moduleWithFields as unknown as {
+      fields: Array<{
+        name: string;
+        display_name: string;
+        field_type: string;
+        is_required: boolean;
+        placeholder: string | null;
+        help_text: string | null;
+        is_readonly: boolean;
+        select_options: Array<{ label: string; value: string }> | null;
+        section: string;
+        sort_order: number;
+        show_in_form: boolean;
+        width: string;
+      }>;
+    }
+  ).fields;

  const data = (record.data ?? {}) as Record<string, unknown>;
  const isLocked = record.status === 'locked';

  return (
-    <CmsPageShell account={account} title={`${String(moduleWithFields.display_name)} — Datensatz`}>
+    <CmsPageShell
+      account={account}
+      title={`${String(moduleWithFields.display_name)} — Datensatz`}
+    >
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
-            <Badge variant={isLocked ? 'destructive' : record.status === 'active' ? 'default' : 'secondary'}>
+            <Badge
+              variant={
+                isLocked
+                  ? 'destructive'
+                  : record.status === 'active'
+                    ? 'default'
+                    : 'secondary'
+              }
+            >
              {String(record.status)}
            </Badge>
-            <span className="text-sm text-muted-foreground">
-              Erstellt: {new Date(record.created_at).toLocaleDateString('de-DE')}
+            <span className="text-muted-foreground text-sm">
+              Erstellt: {formatDate(record.created_at)}
            </span>
          </div>
          <div className="flex gap-2">
--- a/apps/web/app/[locale]/home/[account]/modules/[moduleId]/import/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/modules/[moduleId]/import/page.tsx
@@ -1,9 +1,9 @@
-import { getSupabaseServerClient } from '@kit/supabase/server-client';
+import { Upload, ArrowRight, CheckCircle } from 'lucide-react';

 import { createModuleBuilderApi } from '@kit/module-builder/api';
-import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { Button } from '@kit/ui/button';
-import { Upload, ArrowRight, CheckCircle } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';

 import { CmsPageShell } from '~/components/cms-page-shell';

@@ -19,22 +19,45 @@ export default async function ImportPage({ params }: ImportPageProps) {
  const moduleWithFields = await api.modules.getModuleWithFields(moduleId);
  if (!moduleWithFields) return <div>Modul nicht gefunden</div>;

-  const fields = (moduleWithFields as unknown as { fields: Array<{ name: string; display_name: string }> }).fields ?? [];
+  const fields =
+    (
+      moduleWithFields as unknown as {
+        fields: Array<{ name: string; display_name: string }>;
+      }
+    ).fields ?? [];

  return (
-    <CmsPageShell account={account} title={`${String(moduleWithFields.display_name)} — Import`}>
+    <CmsPageShell
+      account={account}
+      title={`${String(moduleWithFields.display_name)} — Import`}
+    >
      <div className="space-y-6">
        {/* Step indicator */}
        <div className="flex items-center justify-center gap-2">
-          {['Datei hochladen', 'Spalten zuordnen', 'Vorschau', 'Importieren'].map((step, i) => (
+          {[
+            'Datei hochladen',
+            'Spalten zuordnen',
+            'Vorschau',
+            'Importieren',
+          ].map((step, i) => (
            <div key={step} className="flex items-center gap-2">
-              <div className={`flex h-8 w-8 items-center justify-center rounded-full text-xs font-bold ${
-                i === 0 ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'
-              }`}>
+              <div
+                className={`flex h-8 w-8 items-center justify-center rounded-full text-xs font-bold ${
+                  i === 0
+                    ? 'bg-primary text-primary-foreground'
+                    : 'bg-muted text-muted-foreground'
+                }`}
+              >
                {i + 1}
              </div>
-              <span className={`text-sm ${i === 0 ? 'font-semibold' : 'text-muted-foreground'}`}>{step}</span>
-              {i < 3 && <ArrowRight className="h-4 w-4 text-muted-foreground" />}
+              <span
+                className={`text-sm ${i === 0 ? 'font-semibold' : 'text-muted-foreground'}`}
+              >
+                {step}
+              </span>
+              {i < 3 && (
+                <ArrowRight className="text-muted-foreground h-4 w-4" />
+              )}
            </div>
          ))}
        </div>
@@ -49,21 +72,30 @@ export default async function ImportPage({ params }: ImportPageProps) {
          </CardHeader>
          <CardContent>
            <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-12 text-center">
-              <Upload className="mb-4 h-10 w-10 text-muted-foreground" />
-              <p className="text-lg font-semibold">CSV oder Excel-Datei hierher ziehen</p>
-              <p className="mt-1 text-sm text-muted-foreground">oder klicken zum Auswählen</p>
+              <Upload className="text-muted-foreground mb-4 h-10 w-10" />
+              <p className="text-lg font-semibold">
+                CSV oder Excel-Datei hierher ziehen
+              </p>
+              <p className="text-muted-foreground mt-1 text-sm">
+                oder klicken zum Auswählen
+              </p>
              <input
                type="file"
                accept=".csv,.xlsx,.xls"
-                className="mt-4 block w-full max-w-xs text-sm text-muted-foreground file:mr-4 file:rounded-md file:border-0 file:bg-primary file:px-4 file:py-2 file:text-sm file:font-semibold file:text-primary-foreground hover:file:bg-primary/90"
+                className="text-muted-foreground file:bg-primary file:text-primary-foreground hover:file:bg-primary/90 mt-4 block w-full max-w-xs text-sm file:mr-4 file:rounded-md file:border-0 file:px-4 file:py-2 file:text-sm file:font-semibold"
              />
            </div>

            <div className="mt-6">
-              <h4 className="text-sm font-semibold mb-2">Verfügbare Zielfelder:</h4>
+              <h4 className="mb-2 text-sm font-semibold">
+                Verfügbare Zielfelder:
+              </h4>
              <div className="flex flex-wrap gap-1">
                {fields.map((field) => (
-                  <span key={field.name} className="rounded-md bg-muted px-2 py-1 text-xs">
+                  <span
+                    key={field.name}
+                    className="bg-muted rounded-md px-2 py-1 text-xs"
+                  >
                    {field.display_name}
                  </span>
                ))}
--- a/apps/web/app/[locale]/home/[account]/modules/[moduleId]/new/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/modules/[moduleId]/new/page.tsx
@@ -1,7 +1,7 @@
-import { getSupabaseServerClient } from '@kit/supabase/server-client';
-
 import { createModuleBuilderApi } from '@kit/module-builder/api';
 import { ModuleForm } from '@kit/module-builder/components';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+
 import { CmsPageShell } from '~/components/cms-page-shell';

 interface NewRecordPageProps {
@@ -16,18 +16,30 @@ export default async function NewRecordPage({ params }: NewRecordPageProps) {
  const moduleWithFields = await api.modules.getModuleWithFields(moduleId);
  if (!moduleWithFields) return <div>Modul nicht gefunden</div>;

-  const fields = (moduleWithFields as unknown as {
-    fields: Array<{
-      name: string; display_name: string; field_type: string;
-      is_required: boolean; placeholder: string | null;
-      help_text: string | null; is_readonly: boolean;
-      select_options: Array<{ label: string; value: string }> | null;
-      section: string; sort_order: number; show_in_form: boolean; width: string;
-    }>;
-  }).fields;
+  const fields = (
+    moduleWithFields as unknown as {
+      fields: Array<{
+        name: string;
+        display_name: string;
+        field_type: string;
+        is_required: boolean;
+        placeholder: string | null;
+        help_text: string | null;
+        is_readonly: boolean;
+        select_options: Array<{ label: string; value: string }> | null;
+        section: string;
+        sort_order: number;
+        show_in_form: boolean;
+        width: string;
+      }>;
+    }
+  ).fields;

  return (
-    <CmsPageShell account={account} title={`${String(moduleWithFields.display_name)} — Neuer Datensatz`}>
+    <CmsPageShell
+      account={account}
+      title={`${String(moduleWithFields.display_name)} — Neuer Datensatz`}
+    >
      <div className="mx-auto max-w-3xl">
        <ModuleForm
          fields={fields as Parameters<typeof ModuleForm>[0]['fields']}
--- a/apps/web/app/[locale]/home/[account]/modules/[moduleId]/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/modules/[moduleId]/page.tsx
@@ -1,13 +1,15 @@
-import { getSupabaseServerClient } from '@kit/supabase/server-client';
-
 import { createModuleBuilderApi } from '@kit/module-builder/api';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';

 interface ModuleDetailPageProps {
  params: Promise<{ account: string; moduleId: string }>;
  searchParams: Promise<Record<string, string | string[] | undefined>>;
 }

-export default async function ModuleDetailPage({ params, searchParams }: ModuleDetailPageProps) {
+export default async function ModuleDetailPage({
+  params,
+  searchParams,
+}: ModuleDetailPageProps) {
  const { account, moduleId } = await params;
  const search = await searchParams;
  const client = getSupabaseServerClient();
@@ -20,14 +22,21 @@ export default async function ModuleDetailPage({ params, searchParams }: ModuleD
  }

  const page = Number(search.page) || 1;
-  const pageSize = Number(search.pageSize) || moduleWithFields.default_page_size || 25;
+  const pageSize =
+    Number(search.pageSize) || moduleWithFields.default_page_size || 25;

  const result = await api.query.query({
    moduleId,
    page,
    pageSize,
-    sortField: (search.sort as string) ?? moduleWithFields.default_sort_field ?? undefined,
-    sortDirection: (search.dir as 'asc' | 'desc') ?? (moduleWithFields.default_sort_direction as 'asc' | 'desc') ?? 'asc',
+    sortField:
+      (search.sort as string) ??
+      moduleWithFields.default_sort_field ??
+      undefined,
+    sortDirection:
+      (search.dir as 'asc' | 'desc') ??
+      (moduleWithFields.default_sort_direction as 'asc' | 'desc') ??
+      'asc',
    search: (search.q as string) ?? undefined,
    filters: [],
  });
@@ -36,20 +45,25 @@ export default async function ModuleDetailPage({ params, searchParams }: ModuleD
    <div className="flex flex-col gap-4">
      <div className="flex items-center justify-between">
        <div>
-          <h1 className="text-2xl font-bold">{moduleWithFields.display_name}</h1>
+          <h1 className="text-2xl font-bold">
+            {moduleWithFields.display_name}
+          </h1>
          {moduleWithFields.description && (
-            <p className="text-muted-foreground">{moduleWithFields.description}</p>
+            <p className="text-muted-foreground">
+              {moduleWithFields.description}
+            </p>
          )}
        </div>
      </div>

-      <div className="text-sm text-muted-foreground">
-        {result.pagination.total} Datensätze — Seite {result.pagination.page} von {result.pagination.totalPages}
+      <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="p-4 text-xs overflow-auto max-h-96">
+        <pre className="max-h-96 overflow-auto p-4 text-xs">
          {JSON.stringify(result.data, null, 2)}
        </pre>
      </div>
--- a/apps/web/app/[locale]/home/[account]/modules/[moduleId]/settings/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/modules/[moduleId]/settings/page.tsx
@@ -1,12 +1,12 @@
-import { getSupabaseServerClient } from '@kit/supabase/server-client';
+import { Settings2, List, Shield } from 'lucide-react';

 import { createModuleBuilderApi } from '@kit/module-builder/api';
-import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { Badge } from '@kit/ui/badge';
 import { Button } from '@kit/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
 import { Input } from '@kit/ui/input';
 import { Label } from '@kit/ui/label';
-import { Settings2, List, Shield } from 'lucide-react';

 import { CmsPageShell } from '~/components/cms-page-shell';

@@ -14,7 +14,9 @@ interface ModuleSettingsPageProps {
  params: Promise<{ account: string; moduleId: string }>;
 }

-export default async function ModuleSettingsPage({ params }: ModuleSettingsPageProps) {
+export default async function ModuleSettingsPage({
+  params,
+}: ModuleSettingsPageProps) {
  const { account, moduleId } = await params;
  const client = getSupabaseServerClient();
  const api = createModuleBuilderApi(client);
@@ -23,10 +25,14 @@ export default async function ModuleSettingsPage({ params }: ModuleSettingsPageP
  if (!moduleWithFields) return <div>Modul nicht gefunden</div>;

  const mod = moduleWithFields;
-  const fields = (mod as unknown as { fields: Array<Record<string, unknown>> }).fields ?? [];
+  const fields =
+    (mod as unknown as { fields: Array<Record<string, unknown>> }).fields ?? [];

  return (
-    <CmsPageShell account={account} title={`${String(mod.display_name)} — Einstellungen`}>
+    <CmsPageShell
+      account={account}
+      title={`${String(mod.display_name)} — Einstellungen`}
+    >
      <div className="space-y-6">
        {/* General Settings */}
        <Card>
@@ -44,7 +50,11 @@ export default async function ModuleSettingsPage({ params }: ModuleSettingsPageP
              </div>
              <div className="space-y-2">
                <Label>Systemname</Label>
-                <Input defaultValue={String(mod.name)} readOnly className="bg-muted" />
+                <Input
+                  defaultValue={String(mod.name)}
+                  readOnly
+                  className="bg-muted"
+                />
              </div>
              <div className="col-span-full space-y-2">
                <Label>Beschreibung</Label>
@@ -56,7 +66,10 @@ export default async function ModuleSettingsPage({ params }: ModuleSettingsPageP
              </div>
              <div className="space-y-2">
                <Label>Seitengröße</Label>
-                <Input type="number" defaultValue={String(mod.default_page_size ?? 25)} />
+                <Input
+                  type="number"
+                  defaultValue={String(mod.default_page_size ?? 25)}
+                />
              </div>
            </div>
            <div className="flex flex-wrap gap-2">
@@ -73,7 +86,11 @@ export default async function ModuleSettingsPage({ params }: ModuleSettingsPageP
              ].map(({ key, label }) => (
                <Badge
                  key={key}
-                  variant={(mod as Record<string, unknown>)[key] ? 'default' : 'secondary'}
+                  variant={
+                    (mod as Record<string, unknown>)[key]
+                      ? 'default'
+                      : 'secondary'
+                  }
                >
                  {(mod as Record<string, unknown>)[key] ? '✓' : '✗'} {label}
                </Badge>
@@ -96,7 +113,7 @@ export default async function ModuleSettingsPage({ params }: ModuleSettingsPageP
            <div className="rounded-md border">
              <table className="w-full text-sm">
                <thead>
-                  <tr className="border-b bg-muted/50">
+                  <tr className="bg-muted/50 border-b">
                    <th className="p-3 text-left">Name</th>
                    <th className="p-3 text-left">Anzeigename</th>
                    <th className="p-3 text-left">Typ</th>
@@ -108,21 +125,35 @@ export default async function ModuleSettingsPage({ params }: ModuleSettingsPageP
                <tbody>
                  {fields.length === 0 ? (
                    <tr>
-                      <td colSpan={6} className="p-8 text-center text-muted-foreground">
+                      <td
+                        colSpan={6}
+                        className="text-muted-foreground p-8 text-center"
+                      >
                        Noch keine Felder definiert
                      </td>
                    </tr>
                  ) : (
                    fields.map((field) => (
-                      <tr key={String(field.id)} className="border-b hover:bg-muted/30">
-                        <td className="p-3 font-mono text-xs">{String(field.name)}</td>
+                      <tr
+                        key={String(field.id)}
+                        className="hover:bg-muted/30 border-b"
+                      >
+                        <td className="p-3 font-mono text-xs">
+                          {String(field.name)}
+                        </td>
                        <td className="p-3">{String(field.display_name)}</td>
                        <td className="p-3">
-                          <Badge variant="secondary">{String(field.field_type)}</Badge>
+                          <Badge variant="secondary">
+                            {String(field.field_type)}
+                          </Badge>
                        </td>
                        <td className="p-3">{field.is_required ? '✓' : '—'}</td>
-                        <td className="p-3">{field.show_in_table ? '✓' : '—'}</td>
-                        <td className="p-3">{field.show_in_form ? '✓' : '—'}</td>
+                        <td className="p-3">
+                          {field.show_in_table ? '✓' : '—'}
+                        </td>
+                        <td className="p-3">
+                          {field.show_in_form ? '✓' : '—'}
+                        </td>
                      </tr>
                    ))
                  )}
@@ -141,8 +172,9 @@ export default async function ModuleSettingsPage({ params }: ModuleSettingsPageP
            </CardTitle>
          </CardHeader>
          <CardContent>
-            <p className="text-sm text-muted-foreground">
-              Modulspezifische Berechtigungen pro Rolle können hier konfiguriert werden.
+            <p className="text-muted-foreground text-sm">
+              Modulspezifische Berechtigungen pro Rolle können hier konfiguriert
+              werden.
            </p>
          </CardContent>
        </Card>
--- a/apps/web/app/[locale]/home/[account]/modules/_components/module-toggles.tsx
+++ b/apps/web/app/[locale]/home/[account]/modules/_components/module-toggles.tsx
@@ -1,11 +1,12 @@
 'use client';

-import { useRouter } from 'next/navigation';
 import { useTransition } from 'react';

-import { Fish, FileSignature, Building2 } from 'lucide-react';
-import { toast } from '@kit/ui/sonner';
+import { useRouter } from 'next/navigation';

+import { Fish, FileSignature, Building2 } from 'lucide-react';
+
+import { toast } from '@kit/ui/sonner';
 import { Switch } from '@kit/ui/switch';

 import { toggleModuleAction } from '../_lib/server/toggle-module';
@@ -55,9 +56,7 @@ export function ModuleToggles({ accountId, features }: ModuleTogglesProps) {
      const result = await toggleModuleAction(accountId, moduleKey, enabled);

      if (result.success) {
-        toast.success(
-          enabled ? 'Modul aktiviert' : 'Modul deaktiviert',
-        );
+        toast.success(enabled ? 'Modul aktiviert' : 'Modul deaktiviert');

        router.refresh();
      } else {
--- a/apps/web/app/[locale]/home/[account]/modules/_lib/server/toggle-module.ts
+++ b/apps/web/app/[locale]/home/[account]/modules/_lib/server/toggle-module.ts
@@ -18,8 +18,7 @@ export async function toggleModuleAction(
    .eq('account_id', accountId)
    .maybeSingle();

-  const currentFeatures =
-    (settings?.features as Record<string, boolean>) ?? {};
+  const currentFeatures = (settings?.features as Record<string, boolean>) ?? {};
  const newFeatures = { ...currentFeatures, [moduleKey]: enabled };

  // Upsert
--- a/apps/web/app/[locale]/home/[account]/modules/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/modules/page.tsx
@@ -1,11 +1,10 @@
 import Link from 'next/link';

+import { createModuleBuilderApi } from '@kit/module-builder/api';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';

-import { createModuleBuilderApi } from '@kit/module-builder/api';
-
-import { CmsPageShell } from '~/components/cms-page-shell';
 import { AccountNotFound } from '~/components/account-not-found';
+import { CmsPageShell } from '~/components/cms-page-shell';

 import { ModuleToggles } from './_components/module-toggles';

@@ -61,17 +60,15 @@ export default async function ModulesPage({ params }: ModulesPageProps) {
              <Link
                key={module.id as string}
                href={`/home/${account}/modules/${module.id as string}`}
-                className="block rounded-lg border p-4 hover:bg-accent/50 transition-colors"
+                className="hover:bg-accent/50 block rounded-lg border p-4 transition-colors"
              >
-                <h3 className="font-semibold">
-                  {String(module.display_name)}
-                </h3>
+                <h3 className="font-semibold">{String(module.display_name)}</h3>
                {module.description ? (
-                  <p className="text-sm text-muted-foreground mt-1">
+                  <p className="text-muted-foreground mt-1 text-sm">
                    {String(module.description)}
                  </p>
                ) : null}
-                <div className="mt-2 text-xs text-muted-foreground">
+                <div className="text-muted-foreground mt-2 text-xs">
                  Status: {String(module.status)}
                </div>
              </Link>