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]/newsletter/[campaignId]/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/newsletter/[campaignId]/page.tsx
@@ -2,16 +2,15 @@ import Link from 'next/link';

 import { ArrowLeft, Send, Users } from 'lucide-react';

+import { createNewsletterApi } from '@kit/newsletter/api';
 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 { createNewsletterApi } from '@kit/newsletter/api';
-
+import { AccountNotFound } from '~/components/account-not-found';
 import { CmsPageShell } from '~/components/cms-page-shell';
 import { StatsCard } from '~/components/stats-card';
-import { AccountNotFound } from '~/components/account-not-found';
 import {
  NEWSLETTER_STATUS_VARIANT,
  NEWSLETTER_STATUS_LABEL,
@@ -115,7 +114,7 @@ export default async function NewsletterDetailPage({ params }: PageProps) {
          </CardHeader>
          <CardContent>
            {recipients.length === 0 ? (
-              <p className="py-8 text-center text-sm text-muted-foreground">
+              <p className="text-muted-foreground py-8 text-center text-sm">
                Keine Empfänger hinzugefügt. Fügen Sie Empfänger aus Ihrer
                Mitgliederliste hinzu.
              </p>
@@ -123,7 +122,7 @@ export default async function NewsletterDetailPage({ params }: PageProps) {
              <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 font-medium">Name</th>
                      <th className="p-3 text-left font-medium">E-Mail</th>
                      <th className="p-3 text-left font-medium">Status</th>
@@ -135,7 +134,7 @@ export default async function NewsletterDetailPage({ params }: PageProps) {
                      return (
                        <tr
                          key={String(recipient.id)}
-                          className="border-b hover:bg-muted/30"
+                          className="hover:bg-muted/30 border-b"
                        >
                          <td className="p-3 font-medium">
                            {String(recipient.name ?? '—')}
@@ -146,10 +145,12 @@ export default async function NewsletterDetailPage({ params }: PageProps) {
                          <td className="p-3">
                            <Badge
                              variant={
-                                NEWSLETTER_RECIPIENT_STATUS_VARIANT[rStatus] ?? 'secondary'
+                                NEWSLETTER_RECIPIENT_STATUS_VARIANT[rStatus] ??
+                                'secondary'
                              }
                            >
-                              {NEWSLETTER_RECIPIENT_STATUS_LABEL[rStatus] ?? rStatus}
+                              {NEWSLETTER_RECIPIENT_STATUS_LABEL[rStatus] ??
+                                rStatus}
                            </Badge>
                          </td>
                        </tr>
--- a/apps/web/app/[locale]/home/[account]/newsletter/new/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/newsletter/new/page.tsx
@@ -1,18 +1,29 @@
-import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { CreateNewsletterForm } from '@kit/newsletter/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 NewNewsletterPage({ 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 Newsletter" description="Newsletter-Kampagne erstellen">
+    <CmsPageShell
+      account={account}
+      title="Neuer Newsletter"
+      description="Newsletter-Kampagne erstellen"
+    >
      <CreateNewsletterForm accountId={acct.id} account={account} />
    </CmsPageShell>
  );
--- a/apps/web/app/[locale]/home/[account]/newsletter/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/newsletter/page.tsx
@@ -1,18 +1,25 @@
 import Link from 'next/link';

-import { ChevronLeft, ChevronRight, Mail, Plus, Send, Users } from 'lucide-react';
+import {
+  ChevronLeft,
+  ChevronRight,
+  Mail,
+  Plus,
+  Send,
+  Users,
+} from 'lucide-react';

+import { createNewsletterApi } from '@kit/newsletter/api';
+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 { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';

-import { createNewsletterApi } from '@kit/newsletter/api';
-
+import { AccountNotFound } from '~/components/account-not-found';
 import { CmsPageShell } from '~/components/cms-page-shell';
 import { EmptyState } from '~/components/empty-state';
 import { StatsCard } from '~/components/stats-card';
-import { AccountNotFound } from '~/components/account-not-found';
 import {
  NEWSLETTER_STATUS_VARIANT,
  NEWSLETTER_STATUS_LABEL,
@@ -25,7 +32,10 @@ interface PageProps {
  searchParams: Promise<Record<string, string | string[] | undefined>>;
 }

-export default async function NewsletterPage({ params, searchParams }: PageProps) {
+export default async function NewsletterPage({
+  params,
+  searchParams,
+}: PageProps) {
  const { account } = await params;
  const search = await searchParams;
  const client = getSupabaseServerClient();
@@ -116,7 +126,7 @@ export default async function NewsletterPage({ params, searchParams }: PageProps
              <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 font-medium">Betreff</th>
                      <th className="p-3 text-left font-medium">Status</th>
                      <th className="p-3 text-right font-medium">Empfänger</th>
@@ -128,7 +138,7 @@ export default async function NewsletterPage({ params, searchParams }: PageProps
                    {newsletters.map((nl: Record<string, unknown>) => (
                      <tr
                        key={String(nl.id)}
-                        className="border-b hover:bg-muted/30"
+                        className="hover:bg-muted/30 border-b"
                      >
                        <td className="p-3 font-medium">
                          <Link
@@ -141,10 +151,12 @@ export default async function NewsletterPage({ params, searchParams }: PageProps
                        <td className="p-3">
                          <Badge
                            variant={
-                              NEWSLETTER_STATUS_VARIANT[String(nl.status)] ?? 'secondary'
+                              NEWSLETTER_STATUS_VARIANT[String(nl.status)] ??
+                              'secondary'
                            }
                          >
-                            {NEWSLETTER_STATUS_LABEL[String(nl.status)] ?? String(nl.status)}
+                            {NEWSLETTER_STATUS_LABEL[String(nl.status)] ??
+                              String(nl.status)}
                          </Badge>
                        </td>
                        <td className="p-3 text-right">
@@ -152,16 +164,8 @@ export default async function NewsletterPage({ params, searchParams }: PageProps
                            ? String(nl.total_recipients)
                            : '—'}
                        </td>
-                        <td className="p-3">
-                          {nl.created_at
-                            ? new Date(String(nl.created_at)).toLocaleDateString('de-DE')
-                            : '—'}
-                        </td>
-                        <td className="p-3">
-                          {nl.sent_at
-                            ? new Date(String(nl.sent_at)).toLocaleDateString('de-DE')
-                            : '—'}
-                        </td>
+                        <td className="p-3">{formatDate(nl.created_at)}</td>
+                        <td className="p-3">{formatDate(nl.sent_at)}</td>
                      </tr>
                    ))}
                  </tbody>
@@ -171,12 +175,15 @@ export default async function NewsletterPage({ params, searchParams }: PageProps
              {/* Pagination */}
              {totalPages > 1 && (
                <div className="flex items-center justify-between pt-4">
-                  <p className="text-sm text-muted-foreground">
-                    {startIdx + 1}–{Math.min(startIdx + PAGE_SIZE, totalItems)} von {totalItems}
+                  <p className="text-muted-foreground text-sm">
+                    {startIdx + 1}–{Math.min(startIdx + PAGE_SIZE, totalItems)}{' '}
+                    von {totalItems}
                  </p>
                  <div className="flex items-center gap-1">
                    {safePage > 1 ? (
-                      <Link href={`/home/${account}/newsletter?page=${safePage - 1}`}>
+                      <Link
+                        href={`/home/${account}/newsletter?page=${safePage - 1}`}
+                      >
                        <Button variant="outline" size="sm">
                          <ChevronLeft className="h-4 w-4" />
                        </Button>
@@ -192,7 +199,9 @@ export default async function NewsletterPage({ params, searchParams }: PageProps
                    </span>

                    {safePage < totalPages ? (
-                      <Link href={`/home/${account}/newsletter?page=${safePage + 1}`}>
+                      <Link
+                        href={`/home/${account}/newsletter?page=${safePage + 1}`}
+                      >
                        <Button variant="outline" size="sm">
                          <ChevronRight className="h-4 w-4" />
                        </Button>
--- a/apps/web/app/[locale]/home/[account]/newsletter/templates/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/newsletter/templates/page.tsx
@@ -2,16 +2,15 @@ import Link from 'next/link';

 import { FileText, Plus } from 'lucide-react';

+import { createNewsletterApi } from '@kit/newsletter/api';
 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 { createNewsletterApi } from '@kit/newsletter/api';
-
+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 PageProps {
  params: Promise<{ account: string }>;
@@ -67,7 +66,7 @@ export default async function NewsletterTemplatesPage({ params }: PageProps) {
              <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 font-medium">Name</th>
                      <th className="p-3 text-left font-medium">Betreff</th>
                      <th className="p-3 text-left font-medium">Variablen</th>
@@ -81,7 +80,7 @@ export default async function NewsletterTemplatesPage({ params }: PageProps) {
                      return (
                        <tr
                          key={String(template.id)}
-                          className="border-b hover:bg-muted/30"
+                          className="hover:bg-muted/30 border-b"
                        >
                          <td className="p-3 font-medium">
                            {String(template.name ?? '—')}
@@ -91,17 +90,19 @@ export default async function NewsletterTemplatesPage({ params }: PageProps) {
                          </td>
                          <td className="p-3">
                            <div className="flex flex-wrap gap-1">
-                              {variables.length > 0
-                                ? variables.map((v) => (
-                                    <Badge
-                                      key={v}
-                                      variant="secondary"
-                                      className="text-xs"
-                                    >
-                                      {`{{${v}}}`}
-                                    </Badge>
-                                  ))
-                                : <span className="text-muted-foreground">—</span>}
+                              {variables.length > 0 ? (
+                                variables.map((v) => (
+                                  <Badge
+                                    key={v}
+                                    variant="secondary"
+                                    className="text-xs"
+                                  >
+                                    {`{{${v}}}`}
+                                  </Badge>
+                                ))
+                              ) : (
+                                <span className="text-muted-foreground">—</span>
+                              )}
                            </div>
                          </td>
                        </tr>