feat: MyEasyCMS v2 — Full SaaS rebuild
Complete rebuild of 22-year-old PHP CMS as modern SaaS: Database (15 migrations, 42+ tables): - Foundation: account_settings, audit_log, GDPR register, cms_files - Module Engine: modules, fields, records, permissions, relations + RPC - Members: 45+ field member profiles, departments, roles, honors, SEPA mandates - Courses: courses, sessions, categories, instructors, locations, attendance - Bookings: rooms, guests, bookings with availability - Events: events, registrations, holiday passes - Finance: SEPA batches/items (pain.008/001 XML), invoices - Newsletter: campaigns, templates, recipients, subscriptions - Site Builder: site_pages (Puck JSON), site_settings, cms_posts - Portal Auth: member_portal_invitations, user linking Feature Packages (9): - @kit/module-builder — dynamic low-code CRUD engine - @kit/member-management — 31 API methods, 21 actions, 8 components - @kit/course-management, @kit/booking-management, @kit/event-management - @kit/finance — SEPA XML generator + IBAN validator - @kit/newsletter — campaigns + dispatch - @kit/document-generator — PDF/Excel/Word - @kit/site-builder — Puck visual editor, 15 blocks, public rendering Pages (60+): - Dashboard with real stats from all APIs - Full CRUD for all 8 domains with react-hook-form + Zod - Recharts statistics - German i18n throughout - Member portal with auth + invitation system - Public club websites via Puck at /club/[slug] Infrastructure: - Dockerfile (multi-stage, standalone output) - docker-compose.yml (Supabase self-hosted + Next.js) - Kong API gateway config - .env.production.example
This commit is contained in:
Zaid Marzguioui
31
apps/web/app/[locale]/club/[slug]/[...page]/page.tsx
Normal file
31
apps/web/app/[locale]/club/[slug]/[...page]/page.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import { createClient } from '@supabase/supabase-js';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { SiteRenderer } from '@kit/site-builder/components';
|
||||
|
||||
interface Props { params: Promise<{ slug: string; page: string[] }> }
|
||||
|
||||
export default async function ClubSubPage({ params }: Props) {
|
||||
const { slug, page: pagePath } = await params;
|
||||
const pageSlug = pagePath.join('/');
|
||||
|
||||
const supabase = createClient(
|
||||
process.env.NEXT_PUBLIC_SUPABASE_URL!,
|
||||
process.env.NEXT_PUBLIC_SUPABASE_PUBLIC_KEY!,
|
||||
);
|
||||
|
||||
const { data: account } = await supabase.from('accounts').select('id').eq('slug', slug).single();
|
||||
if (!account) notFound();
|
||||
|
||||
const { data: settings } = await supabase.from('site_settings').select('*').eq('account_id', account.id).eq('is_public', true).maybeSingle();
|
||||
if (!settings) notFound();
|
||||
|
||||
const { data: sitePageData } = await supabase.from('site_pages').select('*')
|
||||
.eq('account_id', account.id).eq('slug', pageSlug).eq('is_published', true).maybeSingle();
|
||||
if (!sitePageData) notFound();
|
||||
|
||||
return (
|
||||
<div style={{ '--primary': settings.primary_color, fontFamily: settings.font_family } as React.CSSProperties}>
|
||||
<SiteRenderer data={(sitePageData.puck_data ?? {}) as Record<string, unknown>} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
|
||||
import { Input } from '@kit/ui/input';
|
||||
import { Label } from '@kit/ui/label';
|
||||
import { Button } from '@kit/ui/button';
|
||||
import { Mail } from 'lucide-react';
|
||||
|
||||
interface Props { params: Promise<{ slug: string }> }
|
||||
|
||||
export default async function NewsletterSubscribePage({ params }: Props) {
|
||||
const { slug } = await params;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-muted/30 flex items-center justify-center p-6">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader className="text-center">
|
||||
<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
|
||||
<Mail className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<CardTitle>Newsletter abonnieren</CardTitle>
|
||||
<p className="text-sm text-muted-foreground">Bleiben Sie über Neuigkeiten informiert.</p>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Name (optional)</Label>
|
||||
<Input name="name" placeholder="Max Mustermann" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>E-Mail-Adresse *</Label>
|
||||
<Input name="email" type="email" placeholder="ihre@email.de" required />
|
||||
</div>
|
||||
<Button type="submit" className="w-full">Abonnieren</Button>
|
||||
<p className="text-xs text-center text-muted-foreground">
|
||||
Sie können sich jederzeit abmelden. Wir senden Ihnen eine Bestätigungs-E-Mail.
|
||||
</p>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
|
||||
import { Button } from '@kit/ui/button';
|
||||
import { MailX } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
interface Props { params: Promise<{ slug: string }>; searchParams: Promise<{ token?: string }> }
|
||||
|
||||
export default async function NewsletterUnsubscribePage({ params, searchParams }: Props) {
|
||||
const { slug } = await params;
|
||||
const { token } = await searchParams;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-muted/30 flex items-center justify-center p-6">
|
||||
<Card className="w-full max-w-md text-center">
|
||||
<CardHeader>
|
||||
<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-destructive/10">
|
||||
<MailX className="h-6 w-6 text-destructive" />
|
||||
</div>
|
||||
<CardTitle>Newsletter abbestellen</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{token ? (
|
||||
<>
|
||||
<p className="text-sm text-muted-foreground">Möchten Sie den Newsletter wirklich abbestellen?</p>
|
||||
<Button variant="destructive" className="w-full">Abbestellen bestätigen</Button>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">Kein gültiger Abmeldelink. Bitte verwenden Sie den Link aus der Newsletter-E-Mail.</p>
|
||||
)}
|
||||
<Link href={`/club/${slug}`}>
|
||||
<Button variant="outline" size="sm">← Zurück zur Website</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
34
apps/web/app/[locale]/club/[slug]/page.tsx
Normal file
34
apps/web/app/[locale]/club/[slug]/page.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import { createClient } from '@supabase/supabase-js';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { SiteRenderer } from '@kit/site-builder/components';
|
||||
|
||||
interface Props { params: Promise<{ slug: string }> }
|
||||
|
||||
export default async function ClubHomePage({ params }: Props) {
|
||||
const { slug } = await params;
|
||||
|
||||
// Use anon client for public access
|
||||
const supabase = createClient(
|
||||
process.env.NEXT_PUBLIC_SUPABASE_URL!,
|
||||
process.env.NEXT_PUBLIC_SUPABASE_PUBLIC_KEY!,
|
||||
);
|
||||
|
||||
// Resolve slug → account
|
||||
const { data: account } = await supabase.from('accounts').select('id, name').eq('slug', slug).single();
|
||||
if (!account) notFound();
|
||||
|
||||
// Check site is public
|
||||
const { data: settings } = await supabase.from('site_settings').select('*').eq('account_id', account.id).eq('is_public', true).maybeSingle();
|
||||
if (!settings) notFound();
|
||||
|
||||
// Get homepage
|
||||
const { data: page } = await supabase.from('site_pages').select('*')
|
||||
.eq('account_id', account.id).eq('is_homepage', true).eq('is_published', true).maybeSingle();
|
||||
if (!page) notFound();
|
||||
|
||||
return (
|
||||
<div style={{ '--primary': settings.primary_color, '--secondary': settings.secondary_color, fontFamily: settings.font_family } as React.CSSProperties}>
|
||||
<SiteRenderer data={(page.puck_data ?? {}) as Record<string, unknown>} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
100
apps/web/app/[locale]/club/[slug]/portal/documents/page.tsx
Normal file
100
apps/web/app/[locale]/club/[slug]/portal/documents/page.tsx
Normal file
@@ -0,0 +1,100 @@
|
||||
import { createClient } from '@supabase/supabase-js';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
|
||||
import { Button } from '@kit/ui/button';
|
||||
import { Badge } from '@kit/ui/badge';
|
||||
import { FileText, Download, Shield, Receipt, FileCheck } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
interface Props {
|
||||
params: Promise<{ slug: string }>;
|
||||
}
|
||||
|
||||
export default async function PortalDocumentsPage({ params }: Props) {
|
||||
const { slug } = await params;
|
||||
|
||||
const supabase = createClient(
|
||||
process.env.NEXT_PUBLIC_SUPABASE_URL!,
|
||||
process.env.SUPABASE_SERVICE_ROLE_KEY || process.env.NEXT_PUBLIC_SUPABASE_PUBLIC_KEY!,
|
||||
);
|
||||
|
||||
const { data: account } = await supabase.from('accounts').select('id, name').eq('slug', slug).single();
|
||||
if (!account) return <div className="p-8 text-center">Organisation nicht gefunden</div>;
|
||||
|
||||
// Demo documents (in production: query invoices + cms_files for this member)
|
||||
const documents = [
|
||||
{ id: '1', title: 'Mitgliedsbeitrag 2026', type: 'Rechnung', date: '2026-01-15', status: 'paid' },
|
||||
{ id: '2', title: 'Mitgliedsbeitrag 2025', type: 'Rechnung', date: '2025-01-10', status: 'paid' },
|
||||
{ id: '3', title: 'Beitrittserklärung', type: 'Dokument', date: '2020-01-15', status: 'signed' },
|
||||
];
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case 'paid': return <Badge variant="default">Bezahlt</Badge>;
|
||||
case 'open': return <Badge variant="secondary">Offen</Badge>;
|
||||
case 'signed': return <Badge variant="outline">Unterschrieben</Badge>;
|
||||
default: return <Badge variant="secondary">{status}</Badge>;
|
||||
}
|
||||
};
|
||||
|
||||
const getIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case 'Rechnung': return <Receipt className="h-5 w-5 text-primary" />;
|
||||
case 'Dokument': return <FileCheck className="h-5 w-5 text-primary" />;
|
||||
default: return <FileText className="h-5 w-5 text-primary" />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-muted/30">
|
||||
<header className="border-b bg-background px-6 py-4">
|
||||
<div className="flex items-center justify-between max-w-4xl mx-auto">
|
||||
<div className="flex items-center gap-3">
|
||||
<Shield className="h-5 w-5 text-primary" />
|
||||
<h1 className="text-lg font-bold">Meine Dokumente</h1>
|
||||
</div>
|
||||
<Link href={`/club/${slug}/portal`}>
|
||||
<Button variant="ghost" size="sm">← Zurück zum Portal</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-3xl mx-auto py-8 px-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Verfügbare Dokumente</CardTitle>
|
||||
<p className="text-sm text-muted-foreground">{String(account.name)} — Dokumente und Rechnungen</p>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{documents.length === 0 ? (
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
<FileText className="mx-auto h-10 w-10 mb-3" />
|
||||
<p>Keine Dokumente vorhanden</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{documents.map((doc) => (
|
||||
<div key={doc.id} className="flex items-center justify-between rounded-lg border p-4 hover:bg-muted/30 transition-colors">
|
||||
<div className="flex items-center gap-3">
|
||||
{getIcon(doc.type)}
|
||||
<div>
|
||||
<p className="font-medium text-sm">{doc.title}</p>
|
||||
<p className="text-xs text-muted-foreground">{doc.type} — {new Date(doc.date).toLocaleDateString('de-DE')}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{getStatusBadge(doc.status)}
|
||||
<Button size="sm" variant="outline">
|
||||
<Download className="h-3 w-3 mr-1" />
|
||||
PDF
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
125
apps/web/app/[locale]/club/[slug]/portal/invite/page.tsx
Normal file
125
apps/web/app/[locale]/club/[slug]/portal/invite/page.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
import { createClient } from '@supabase/supabase-js';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
|
||||
import { Button } from '@kit/ui/button';
|
||||
import { Input } from '@kit/ui/input';
|
||||
import { Label } from '@kit/ui/label';
|
||||
import { UserPlus, Shield, CheckCircle } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
interface Props {
|
||||
params: Promise<{ slug: string }>;
|
||||
searchParams: Promise<{ token?: string }>;
|
||||
}
|
||||
|
||||
export default async function PortalInvitePage({ params, searchParams }: Props) {
|
||||
const { slug } = await params;
|
||||
const { token } = await searchParams;
|
||||
|
||||
if (!token) notFound();
|
||||
|
||||
const supabase = createClient(
|
||||
process.env.NEXT_PUBLIC_SUPABASE_URL!,
|
||||
process.env.NEXT_PUBLIC_SUPABASE_PUBLIC_KEY!,
|
||||
);
|
||||
|
||||
// Resolve account
|
||||
const { data: account } = await supabase.from('accounts').select('id, name').eq('slug', slug).single();
|
||||
if (!account) notFound();
|
||||
|
||||
// Look up invitation
|
||||
const { data: invitation } = await supabase.from('member_portal_invitations')
|
||||
.select('id, email, status, expires_at, member_id')
|
||||
.eq('invite_token', token)
|
||||
.maybeSingle();
|
||||
|
||||
if (!invitation || invitation.status !== 'pending') {
|
||||
return (
|
||||
<div className="min-h-screen bg-muted/30 flex items-center justify-center p-6">
|
||||
<Card className="max-w-md text-center">
|
||||
<CardContent className="p-8">
|
||||
<Shield className="mx-auto h-10 w-10 text-destructive mb-4" />
|
||||
<h2 className="text-lg font-bold">Einladung ungültig</h2>
|
||||
<p className="text-sm text-muted-foreground mt-2">
|
||||
Diese Einladung ist abgelaufen, wurde bereits verwendet oder ist ungültig.
|
||||
Bitte wenden Sie sich an Ihren Vereinsadministrator.
|
||||
</p>
|
||||
<Link href={`/club/${slug}`}>
|
||||
<Button variant="outline" className="mt-4">← Zur Website</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const expired = new Date(invitation.expires_at) < new Date();
|
||||
if (expired) {
|
||||
return (
|
||||
<div className="min-h-screen bg-muted/30 flex items-center justify-center p-6">
|
||||
<Card className="max-w-md text-center">
|
||||
<CardContent className="p-8">
|
||||
<Shield className="mx-auto h-10 w-10 text-amber-500 mb-4" />
|
||||
<h2 className="text-lg font-bold">Einladung abgelaufen</h2>
|
||||
<p className="text-sm text-muted-foreground mt-2">
|
||||
Diese Einladung ist am {new Date(invitation.expires_at).toLocaleDateString('de-DE')} abgelaufen.
|
||||
Bitte fordern Sie eine neue Einladung an.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-muted/30 flex items-center justify-center p-6">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader className="text-center">
|
||||
<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
|
||||
<UserPlus className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<CardTitle>Einladung zum Mitgliederbereich</CardTitle>
|
||||
<p className="text-sm text-muted-foreground">{String(account.name)}</p>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="rounded-md bg-primary/5 border border-primary/20 p-4 mb-6">
|
||||
<p className="text-sm">
|
||||
Sie wurden eingeladen, ein Konto für den Mitgliederbereich zu erstellen.
|
||||
Damit können Sie Ihr Profil einsehen, Dokumente herunterladen und Ihre Datenschutz-Einstellungen verwalten.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form className="space-y-4" action={`/api/club/accept-invite`} method="POST">
|
||||
<input type="hidden" name="token" value={token} />
|
||||
<input type="hidden" name="slug" value={slug} />
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>E-Mail-Adresse</Label>
|
||||
<Input type="email" value={invitation.email} readOnly className="bg-muted" />
|
||||
<p className="text-xs text-muted-foreground">Ihre E-Mail-Adresse wurde vom Verein vorgegeben.</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Passwort festlegen *</Label>
|
||||
<Input type="password" name="password" placeholder="Mindestens 8 Zeichen" required minLength={8} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Passwort wiederholen *</Label>
|
||||
<Input type="password" name="passwordConfirm" placeholder="Passwort bestätigen" required minLength={8} />
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full">
|
||||
<CheckCircle className="mr-2 h-4 w-4" />
|
||||
Konto erstellen & Einladung annehmen
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<p className="mt-4 text-xs text-center text-muted-foreground">
|
||||
Bereits ein Konto? <Link href={`/club/${slug}/portal`} className="text-primary underline">Anmelden</Link>
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
100
apps/web/app/[locale]/club/[slug]/portal/page.tsx
Normal file
100
apps/web/app/[locale]/club/[slug]/portal/page.tsx
Normal file
@@ -0,0 +1,100 @@
|
||||
import { createClient } from '@supabase/supabase-js';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
|
||||
import { Button } from '@kit/ui/button';
|
||||
import { UserCircle, FileText, CreditCard, Shield } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
import { PortalLoginForm } from '@kit/site-builder/components';
|
||||
|
||||
interface Props {
|
||||
params: Promise<{ slug: string }>;
|
||||
}
|
||||
|
||||
export default async function MemberPortalPage({ params }: Props) {
|
||||
const { slug } = await params;
|
||||
|
||||
const supabase = createClient(
|
||||
process.env.NEXT_PUBLIC_SUPABASE_URL!,
|
||||
process.env.NEXT_PUBLIC_SUPABASE_PUBLIC_KEY!,
|
||||
);
|
||||
|
||||
const { data: account } = await supabase.from('accounts').select('id, name').eq('slug', slug).single();
|
||||
if (!account) return <div className="p-8 text-center">Organisation nicht gefunden</div>;
|
||||
|
||||
// Check if user is already logged in
|
||||
const { data: { user } } = await supabase.auth.getUser();
|
||||
|
||||
if (user) {
|
||||
// Check if this user is a member of this club
|
||||
const { data: member } = await supabase.from('members')
|
||||
.select('id, first_name, last_name, status')
|
||||
.eq('account_id', account.id)
|
||||
.eq('user_id', user.id)
|
||||
.maybeSingle();
|
||||
|
||||
if (member) {
|
||||
// Logged in member — show portal dashboard
|
||||
return (
|
||||
<div className="min-h-screen bg-muted/30">
|
||||
<header className="border-b bg-background px-6 py-4">
|
||||
<div className="flex items-center justify-between max-w-4xl mx-auto">
|
||||
<div className="flex items-center gap-3">
|
||||
<Shield className="h-5 w-5 text-primary" />
|
||||
<h1 className="text-lg font-bold">Mitgliederbereich — {String(account.name)}</h1>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm text-muted-foreground">{String(member.first_name)} {String(member.last_name)}</span>
|
||||
<Link href={`/club/${slug}`}><Button variant="ghost" size="sm">← Website</Button></Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main className="max-w-4xl mx-auto py-12 px-6">
|
||||
<h2 className="text-2xl font-bold mb-6">Willkommen, {String(member.first_name)}!</h2>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
<Link href={`/club/${slug}/portal/profile`}>
|
||||
<Card className="hover:border-primary transition-colors cursor-pointer">
|
||||
<CardContent className="p-6 text-center">
|
||||
<UserCircle className="mx-auto h-10 w-10 text-primary mb-3" />
|
||||
<h3 className="font-semibold">Mein Profil</h3>
|
||||
<p className="text-xs text-muted-foreground mt-1">Kontaktdaten und Datenschutz</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
<Link href={`/club/${slug}/portal/documents`}>
|
||||
<Card className="hover:border-primary transition-colors cursor-pointer">
|
||||
<CardContent className="p-6 text-center">
|
||||
<FileText className="mx-auto h-10 w-10 text-primary mb-3" />
|
||||
<h3 className="font-semibold">Dokumente</h3>
|
||||
<p className="text-xs text-muted-foreground mt-1">Rechnungen und Bescheinigungen</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
<Card>
|
||||
<CardContent className="p-6 text-center">
|
||||
<CreditCard className="mx-auto h-10 w-10 text-primary mb-3" />
|
||||
<h3 className="font-semibold">Mitgliedsausweis</h3>
|
||||
<p className="text-xs text-muted-foreground mt-1">Digital anzeigen</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Not logged in or not a member — show login form
|
||||
return (
|
||||
<div className="min-h-screen bg-muted/30">
|
||||
<header className="border-b bg-background px-6 py-4">
|
||||
<div className="flex items-center justify-between max-w-4xl mx-auto">
|
||||
<h1 className="text-lg font-bold">Mitgliederbereich</h1>
|
||||
<Link href={`/club/${slug}`}><Button variant="ghost" size="sm">← Zurück zur Website</Button></Link>
|
||||
</div>
|
||||
</header>
|
||||
<main className="max-w-4xl mx-auto py-12 px-6">
|
||||
<PortalLoginForm slug={slug} accountName={String(account.name)} />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
131
apps/web/app/[locale]/club/[slug]/portal/profile/page.tsx
Normal file
131
apps/web/app/[locale]/club/[slug]/portal/profile/page.tsx
Normal file
@@ -0,0 +1,131 @@
|
||||
import { createClient } from '@supabase/supabase-js';
|
||||
import { redirect } from 'next/navigation';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
|
||||
import { Button } from '@kit/ui/button';
|
||||
import { Input } from '@kit/ui/input';
|
||||
import { Label } from '@kit/ui/label';
|
||||
import { UserCircle, Mail, MapPin, Phone, Shield, Calendar } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
interface Props {
|
||||
params: Promise<{ slug: string }>;
|
||||
}
|
||||
|
||||
export default async function PortalProfilePage({ params }: Props) {
|
||||
const { slug } = await params;
|
||||
|
||||
const supabase = createClient(
|
||||
process.env.NEXT_PUBLIC_SUPABASE_URL!,
|
||||
process.env.NEXT_PUBLIC_SUPABASE_PUBLIC_KEY!,
|
||||
);
|
||||
|
||||
const { data: account } = await supabase.from('accounts').select('id, name').eq('slug', slug).single();
|
||||
if (!account) return <div className="p-8 text-center">Organisation nicht gefunden</div>;
|
||||
|
||||
// Get current user
|
||||
const { data: { user } } = await supabase.auth.getUser();
|
||||
if (!user) redirect(`/club/${slug}/portal`);
|
||||
|
||||
// Find member linked to this user
|
||||
const { data: member } = await supabase.from('members')
|
||||
.select('*')
|
||||
.eq('account_id', account.id)
|
||||
.eq('user_id', user.id)
|
||||
.maybeSingle();
|
||||
|
||||
if (!member) {
|
||||
return (
|
||||
<div className="min-h-screen bg-muted/30 flex items-center justify-center">
|
||||
<Card className="max-w-md">
|
||||
<CardContent className="p-8 text-center">
|
||||
<Shield className="mx-auto h-10 w-10 text-destructive mb-4" />
|
||||
<h2 className="text-lg font-bold">Kein Mitglied</h2>
|
||||
<p className="text-sm text-muted-foreground mt-2">
|
||||
Ihr Benutzerkonto ist nicht mit einem Mitgliedsprofil in diesem Verein verknüpft.
|
||||
Bitte wenden Sie sich an Ihren Vereinsadministrator.
|
||||
</p>
|
||||
<Link href={`/club/${slug}/portal`}>
|
||||
<Button variant="outline" className="mt-4">← Zurück</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const m = member;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-muted/30">
|
||||
<header className="border-b bg-background px-6 py-4">
|
||||
<div className="flex items-center justify-between max-w-4xl mx-auto">
|
||||
<div className="flex items-center gap-3">
|
||||
<Shield className="h-5 w-5 text-primary" />
|
||||
<h1 className="text-lg font-bold">Mein Profil</h1>
|
||||
</div>
|
||||
<Link href={`/club/${slug}/portal`}><Button variant="ghost" size="sm">← Zurück zum Portal</Button></Link>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-3xl mx-auto py-8 px-6 space-y-6">
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-primary/10 text-primary">
|
||||
<UserCircle className="h-8 w-8" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-bold">{String(m.first_name)} {String(m.last_name)}</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Nr. {String(m.member_number ?? '—')} — Mitglied seit {m.entry_date ? new Date(String(m.entry_date)).toLocaleDateString('de-DE') : '—'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader><CardTitle className="flex items-center gap-2"><Mail className="h-4 w-4" />Kontaktdaten</CardTitle></CardHeader>
|
||||
<CardContent className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2"><Label>Vorname</Label><Input defaultValue={String(m.first_name)} readOnly /></div>
|
||||
<div className="space-y-2"><Label>Nachname</Label><Input defaultValue={String(m.last_name)} readOnly /></div>
|
||||
<div className="space-y-2"><Label>E-Mail</Label><Input defaultValue={String(m.email ?? '')} /></div>
|
||||
<div className="space-y-2"><Label>Telefon</Label><Input defaultValue={String(m.phone ?? '')} /></div>
|
||||
<div className="space-y-2"><Label>Mobil</Label><Input defaultValue={String(m.mobile ?? '')} /></div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader><CardTitle className="flex items-center gap-2"><MapPin className="h-4 w-4" />Adresse</CardTitle></CardHeader>
|
||||
<CardContent className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2"><Label>Straße</Label><Input defaultValue={String(m.street ?? '')} /></div>
|
||||
<div className="space-y-2"><Label>Hausnummer</Label><Input defaultValue={String(m.house_number ?? '')} /></div>
|
||||
<div className="space-y-2"><Label>PLZ</Label><Input defaultValue={String(m.postal_code ?? '')} /></div>
|
||||
<div className="space-y-2"><Label>Ort</Label><Input defaultValue={String(m.city ?? '')} /></div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader><CardTitle className="flex items-center gap-2"><Shield className="h-4 w-4" />Datenschutz-Einwilligungen</CardTitle></CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{[
|
||||
{ key: 'gdpr_newsletter', label: 'Newsletter per E-Mail', value: m.gdpr_newsletter },
|
||||
{ key: 'gdpr_internet', label: 'Veröffentlichung auf der Homepage', value: m.gdpr_internet },
|
||||
{ key: 'gdpr_print', label: 'Veröffentlichung in der Vereinszeitung', value: m.gdpr_print },
|
||||
{ key: 'gdpr_birthday_info', label: 'Geburtstagsinfo an Mitglieder', value: m.gdpr_birthday_info },
|
||||
].map(({ key, label, value }) => (
|
||||
<label key={key} className="flex items-center gap-3 text-sm">
|
||||
<input type="checkbox" defaultChecked={Boolean(value)} className="h-4 w-4 rounded border-input" />
|
||||
{label}
|
||||
</label>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button>Änderungen speichern</Button>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user