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]/site-builder/[pageId]/edit/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/site-builder/[pageId]/edit/page.tsx
@@ -1,19 +1,32 @@
-import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { createSiteBuilderApi } from '@kit/site-builder/api';
 import { SiteEditor } from '@kit/site-builder/components';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+
 import { AccountNotFound } from '~/components/account-not-found';

-interface Props { params: Promise<{ account: string; pageId: string }> }
+interface Props {
+  params: Promise<{ account: string; pageId: string }>;
+}

 export default async function EditPageRoute({ params }: Props) {
  const { account, pageId } = await params;
  const client = getSupabaseServerClient();
-  const { data: acct } = await client.from('accounts').select('id').eq('slug', account).single();
+  const { data: acct } = await client
+    .from('accounts')
+    .select('id')
+    .eq('slug', account)
+    .single();
  if (!acct) return <AccountNotFound />;

  const api = createSiteBuilderApi(client);
  const page = await api.getPage(pageId);
  if (!page) return <div>Seite nicht gefunden</div>;

-  return <SiteEditor pageId={pageId} accountId={acct.id} initialData={(page.puck_data ?? {}) as Record<string, unknown>} />;
+  return (
+    <SiteEditor
+      pageId={pageId}
+      accountId={acct.id}
+      initialData={(page.puck_data ?? {}) as Record<string, unknown>}
+    />
+  );
 }
--- a/apps/web/app/[locale]/home/[account]/site-builder/new/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/site-builder/new/page.tsx
@@ -1,7 +1,8 @@
-import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { CreatePageForm } from '@kit/site-builder/components';
-import { CmsPageShell } from '~/components/cms-page-shell';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+
 import { AccountNotFound } from '~/components/account-not-found';
+import { CmsPageShell } from '~/components/cms-page-shell';

 interface Props {
  params: Promise<{ account: string }>;
@@ -10,11 +11,19 @@ interface Props {
 export default async function NewSitePage({ params }: Props) {
  const { account } = await params;
  const client = getSupabaseServerClient();
-  const { data: acct } = await client.from('accounts').select('id').eq('slug', account).single();
+  const { data: acct } = await client
+    .from('accounts')
+    .select('id')
+    .eq('slug', account)
+    .single();
  if (!acct) return <AccountNotFound />;

  return (
-    <CmsPageShell account={account} title="Neue Seite" description="Seite für Ihre Vereinswebsite erstellen">
+    <CmsPageShell
+      account={account}
+      title="Neue Seite"
+      description="Seite für Ihre Vereinswebsite erstellen"
+    >
      <CreatePageForm accountId={acct.id} account={account} />
    </CmsPageShell>
  );
--- a/apps/web/app/[locale]/home/[account]/site-builder/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/site-builder/page.tsx
@@ -1,21 +1,31 @@
-import { getSupabaseServerClient } from '@kit/supabase/server-client';
+import Link from 'next/link';
+
+import { Plus, Globe, FileText, Settings, ExternalLink } from 'lucide-react';
+
+import { formatDate } from '@kit/shared/dates';
 import { createSiteBuilderApi } from '@kit/site-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 { cn } from '@kit/ui/utils';
-import { Plus, Globe, FileText, Settings, ExternalLink } from 'lucide-react';
-import Link from 'next/link';
+
+import { AccountNotFound } from '~/components/account-not-found';
 import { CmsPageShell } from '~/components/cms-page-shell';
 import { EmptyState } from '~/components/empty-state';
-import { AccountNotFound } from '~/components/account-not-found';

-interface Props { params: Promise<{ account: string }> }
+interface Props {
+  params: Promise<{ account: string }>;
+}

 export default async function SiteBuilderDashboard({ params }: Props) {
  const { account } = await params;
  const client = getSupabaseServerClient();
-  const { data: acct } = await client.from('accounts').select('id').eq('slug', account).single();
+  const { data: acct } = await client
+    .from('accounts')
+    .select('id')
+    .eq('slug', account)
+    .single();
  if (!acct) return <AccountNotFound />;

  const api = createSiteBuilderApi(client);
@@ -24,39 +34,72 @@ export default async function SiteBuilderDashboard({ params }: Props) {
  const posts = await api.listPosts(acct.id);

  const isOnline = Boolean(settings?.is_public);
-  const publishedCount = pages.filter((p: Record<string, unknown>) => p.is_published).length;
+  const publishedCount = pages.filter(
+    (p: Record<string, unknown>) => p.is_published,
+  ).length;

  return (
-    <CmsPageShell account={account} title="Website-Baukasten" description="Ihre Vereinswebseite verwalten">
+    <CmsPageShell
+      account={account}
+      title="Website-Baukasten"
+      description="Ihre Vereinswebseite verwalten"
+    >
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <div className="flex gap-2">
            <Link href={`/home/${account}/site-builder/settings`}>
-              <Button variant="outline" size="sm"><Settings className="mr-2 h-4 w-4" />Einstellungen</Button>
+              <Button variant="outline" size="sm">
+                <Settings className="mr-2 h-4 w-4" />
+                Einstellungen
+              </Button>
            </Link>
            <Link href={`/home/${account}/site-builder/posts`}>
-              <Button variant="outline" size="sm"><FileText className="mr-2 h-4 w-4" />Beiträge ({posts.length})</Button>
+              <Button variant="outline" size="sm">
+                <FileText className="mr-2 h-4 w-4" />
+                Beiträge ({posts.length})
+              </Button>
            </Link>
            {isOnline && (
              <a href={`/club/${account}`} target="_blank" rel="noopener">
-                <Button variant="outline" size="sm"><ExternalLink className="mr-2 h-4 w-4" />Website ansehen</Button>
+                <Button variant="outline" size="sm">
+                  <ExternalLink className="mr-2 h-4 w-4" />
+                  Website ansehen
+                </Button>
              </a>
            )}
          </div>
          <Link href={`/home/${account}/site-builder/new`}>
-            <Button><Plus className="mr-2 h-4 w-4" />Neue Seite</Button>
+            <Button>
+              <Plus className="mr-2 h-4 w-4" />
+              Neue Seite
+            </Button>
          </Link>
        </div>

        <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
-          <Card><CardContent className="p-6"><p className="text-sm text-muted-foreground">Seiten</p><p className="text-2xl font-bold">{pages.length}</p></CardContent></Card>
-          <Card><CardContent className="p-6"><p className="text-sm text-muted-foreground">Veröffentlicht</p><p className="text-2xl font-bold">{publishedCount}</p></CardContent></Card>
          <Card>
            <CardContent className="p-6">
-              <p className="text-sm text-muted-foreground">Status</p>
+              <p className="text-muted-foreground text-sm">Seiten</p>
+              <p className="text-2xl font-bold">{pages.length}</p>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardContent className="p-6">
+              <p className="text-muted-foreground text-sm">Veröffentlicht</p>
+              <p className="text-2xl font-bold">{publishedCount}</p>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardContent className="p-6">
+              <p className="text-muted-foreground text-sm">Status</p>
              <p className="text-2xl font-bold">
                <span className="flex items-center gap-1.5">
-                  <span className={cn('inline-block h-2 w-2 rounded-full', isOnline ? 'bg-green-500' : 'bg-red-500')} />
+                  <span
+                    className={cn(
+                      'inline-block h-2 w-2 rounded-full',
+                      isOnline ? 'bg-green-500' : 'bg-red-500',
+                    )}
+                  />
                  <span>{isOnline ? 'Online' : 'Offline'}</span>
                </span>
              </p>
@@ -75,25 +118,44 @@ export default async function SiteBuilderDashboard({ params }: Props) {
        ) : (
          <div className="rounded-md border">
            <table className="w-full text-sm">
-              <thead><tr className="border-b bg-muted/50">
-                <th className="p-3 text-left font-medium">Titel</th>
-                <th className="p-3 text-left font-medium">URL</th>
-                <th className="p-3 text-left font-medium">Status</th>
-                <th className="p-3 text-left font-medium">Startseite</th>
-                <th className="p-3 text-left font-medium">Aktualisiert</th>
-                <th className="p-3 text-left font-medium">Aktionen</th>
-              </tr></thead>
+              <thead>
+                <tr className="bg-muted/50 border-b">
+                  <th className="p-3 text-left font-medium">Titel</th>
+                  <th className="p-3 text-left font-medium">URL</th>
+                  <th className="p-3 text-left font-medium">Status</th>
+                  <th className="p-3 text-left font-medium">Startseite</th>
+                  <th className="p-3 text-left font-medium">Aktualisiert</th>
+                  <th className="p-3 text-left font-medium">Aktionen</th>
+                </tr>
+              </thead>
              <tbody>
                {pages.map((page: Record<string, unknown>) => (
-                  <tr key={String(page.id)} className="border-b hover:bg-muted/30">
+                  <tr
+                    key={String(page.id)}
+                    className="hover:bg-muted/30 border-b"
+                  >
                    <td className="p-3 font-medium">{String(page.title)}</td>
-                    <td className="p-3 text-muted-foreground font-mono text-xs">/{String(page.slug)}</td>
-                    <td className="p-3"><Badge variant={page.is_published ? 'default' : 'secondary'}>{page.is_published ? 'Veröffentlicht' : 'Entwurf'}</Badge></td>
-                    <td className="p-3">{page.is_homepage ? '⭐' : '—'}</td>
-                    <td className="p-3 text-xs text-muted-foreground">{page.updated_at ? new Date(String(page.updated_at)).toLocaleDateString('de-DE') : '—'}</td>
+                    <td className="text-muted-foreground p-3 font-mono text-xs">
+                      /{String(page.slug)}
+                    </td>
                    <td className="p-3">
-                      <Link href={`/home/${account}/site-builder/${String(page.id)}/edit`}>
-                        <Button size="sm" variant="outline">Bearbeiten</Button>
+                      <Badge
+                        variant={page.is_published ? 'default' : 'secondary'}
+                      >
+                        {page.is_published ? 'Veröffentlicht' : 'Entwurf'}
+                      </Badge>
+                    </td>
+                    <td className="p-3">{page.is_homepage ? '⭐' : '—'}</td>
+                    <td className="text-muted-foreground p-3 text-xs">
+                      {formatDate(page.updated_at)}
+                    </td>
+                    <td className="p-3">
+                      <Link
+                        href={`/home/${account}/site-builder/${String(page.id)}/edit`}
+                      >
+                        <Button size="sm" variant="outline">
+                          Bearbeiten
+                        </Button>
                      </Link>
                    </td>
                  </tr>
--- a/apps/web/app/[locale]/home/[account]/site-builder/posts/new/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/site-builder/posts/new/page.tsx
@@ -1,18 +1,29 @@
-import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { CreatePostForm } from '@kit/site-builder/components';
-import { CmsPageShell } from '~/components/cms-page-shell';
-import { AccountNotFound } from '~/components/account-not-found';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';

-interface Props { params: Promise<{ account: string }> }
+import { AccountNotFound } from '~/components/account-not-found';
+import { CmsPageShell } from '~/components/cms-page-shell';
+
+interface Props {
+  params: Promise<{ account: string }>;
+}

 export default async function NewPostPage({ params }: Props) {
  const { account } = await params;
  const client = getSupabaseServerClient();
-  const { data: acct } = await client.from('accounts').select('id').eq('slug', account).single();
+  const { data: acct } = await client
+    .from('accounts')
+    .select('id')
+    .eq('slug', account)
+    .single();
  if (!acct) return <AccountNotFound />;

  return (
-    <CmsPageShell account={account} title="Neuer Beitrag" description="Beitrag erstellen">
+    <CmsPageShell
+      account={account}
+      title="Neuer Beitrag"
+      description="Beitrag erstellen"
+    >
      <CreatePostForm accountId={acct.id} account={account} />
    </CmsPageShell>
  );
--- a/apps/web/app/[locale]/home/[account]/site-builder/posts/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/site-builder/posts/page.tsx
@@ -1,47 +1,83 @@
-import { getSupabaseServerClient } from '@kit/supabase/server-client';
+import Link from 'next/link';
+
+import { Plus } from 'lucide-react';
+
+import { formatDate } from '@kit/shared/dates';
 import { createSiteBuilderApi } from '@kit/site-builder/api';
-import { Card, CardContent } from '@kit/ui/card';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { Badge } from '@kit/ui/badge';
 import { Button } from '@kit/ui/button';
-import { Plus } from 'lucide-react';
-import Link from 'next/link';
+import { Card, CardContent } from '@kit/ui/card';
+
+import { AccountNotFound } from '~/components/account-not-found';
 import { CmsPageShell } from '~/components/cms-page-shell';
 import { EmptyState } from '~/components/empty-state';
-import { AccountNotFound } from '~/components/account-not-found';

-interface Props { params: Promise<{ account: string }> }
+interface Props {
+  params: Promise<{ account: string }>;
+}

 export default async function PostsManagerPage({ params }: Props) {
  const { account } = await params;
  const client = getSupabaseServerClient();
-  const { data: acct } = await client.from('accounts').select('id').eq('slug', account).single();
+  const { data: acct } = await client
+    .from('accounts')
+    .select('id')
+    .eq('slug', account)
+    .single();
  if (!acct) return <AccountNotFound />;

  const api = createSiteBuilderApi(client);
  const posts = await api.listPosts(acct.id);

  return (
-    <CmsPageShell account={account} title="Beiträge" description="Neuigkeiten und Artikel verwalten">
+    <CmsPageShell
+      account={account}
+      title="Beiträge"
+      description="Neuigkeiten und Artikel verwalten"
+    >
      <div className="space-y-6">
        <div className="flex justify-end">
-          <Button><Plus className="mr-2 h-4 w-4" />Neuer Beitrag</Button>
+          <Button>
+            <Plus className="mr-2 h-4 w-4" />
+            Neuer Beitrag
+          </Button>
        </div>
        {posts.length === 0 ? (
-          <EmptyState title="Keine Beiträge" description="Erstellen Sie Ihren ersten Beitrag." actionLabel="Beitrag erstellen" />
+          <EmptyState
+            title="Keine Beiträge"
+            description="Erstellen Sie Ihren ersten Beitrag."
+            actionLabel="Beitrag erstellen"
+          />
        ) : (
          <div className="rounded-md border">
            <table className="w-full text-sm">
-              <thead><tr className="border-b bg-muted/50">
-                <th className="p-3 text-left">Titel</th>
-                <th className="p-3 text-left">Status</th>
-                <th className="p-3 text-left">Erstellt</th>
-              </tr></thead>
+              <thead>
+                <tr className="bg-muted/50 border-b">
+                  <th className="p-3 text-left">Titel</th>
+                  <th className="p-3 text-left">Status</th>
+                  <th className="p-3 text-left">Erstellt</th>
+                </tr>
+              </thead>
              <tbody>
                {posts.map((post: Record<string, unknown>) => (
-                  <tr key={String(post.id)} className="border-b hover:bg-muted/30">
+                  <tr
+                    key={String(post.id)}
+                    className="hover:bg-muted/30 border-b"
+                  >
                    <td className="p-3 font-medium">{String(post.title)}</td>
-                    <td className="p-3"><Badge variant={post.status === 'published' ? 'default' : 'secondary'}>{String(post.status)}</Badge></td>
-                    <td className="p-3 text-xs text-muted-foreground">{post.created_at ? new Date(String(post.created_at)).toLocaleDateString('de-DE') : '—'}</td>
+                    <td className="p-3">
+                      <Badge
+                        variant={
+                          post.status === 'published' ? 'default' : 'secondary'
+                        }
+                      >
+                        {String(post.status)}
+                      </Badge>
+                    </td>
+                    <td className="text-muted-foreground p-3 text-xs">
+                      {formatDate(post.created_at)}
+                    </td>
                  </tr>
                ))}
              </tbody>
--- a/apps/web/app/[locale]/home/[account]/site-builder/settings/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/site-builder/settings/page.tsx
@@ -1,23 +1,38 @@
-import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { createSiteBuilderApi } from '@kit/site-builder/api';
 import { SiteSettingsForm } from '@kit/site-builder/components';
-import { CmsPageShell } from '~/components/cms-page-shell';
-import { AccountNotFound } from '~/components/account-not-found';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';

-interface Props { params: Promise<{ account: string }> }
+import { AccountNotFound } from '~/components/account-not-found';
+import { CmsPageShell } from '~/components/cms-page-shell';
+
+interface Props {
+  params: Promise<{ account: string }>;
+}

 export default async function SiteSettingsPage({ params }: Props) {
  const { account } = await params;
  const client = getSupabaseServerClient();
-  const { data: acct } = await client.from('accounts').select('id').eq('slug', account).single();
+  const { data: acct } = await client
+    .from('accounts')
+    .select('id')
+    .eq('slug', account)
+    .single();
  if (!acct) return <AccountNotFound />;

  const api = createSiteBuilderApi(client);
  const settings = await api.getSiteSettings(acct.id);

  return (
-    <CmsPageShell account={account} title="Website-Einstellungen" description="Design und Kontaktdaten">
-      <SiteSettingsForm accountId={acct.id} account={account} settings={settings} />
+    <CmsPageShell
+      account={account}
+      title="Website-Einstellungen"
+      description="Design und Kontaktdaten"
+    >
+      <SiteSettingsForm
+        accountId={acct.id}
+        account={account}
+        settings={settings}
+      />
    </CmsPageShell>
  );
 }