131 lines
4.7 KiB
TypeScript
131 lines
4.7 KiB
TypeScript
import Link from 'next/link';
|
|
|
|
import { createClient } from '@supabase/supabase-js';
|
|
|
|
import { UserCircle, FileText, CreditCard, Shield } from 'lucide-react';
|
|
|
|
import { PortalLoginForm } from '@kit/site-builder/components';
|
|
import { Button } from '@kit/ui/button';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
|
|
|
|
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="bg-muted/30 min-h-screen">
|
|
<header className="bg-background border-b px-6 py-4">
|
|
<div className="mx-auto flex max-w-4xl items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<Shield className="text-primary h-5 w-5" />
|
|
<h1 className="text-lg font-bold">
|
|
Mitgliederbereich — {String(account.name)}
|
|
</h1>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-muted-foreground text-sm">
|
|
{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="mx-auto max-w-4xl px-6 py-12">
|
|
<h2 className="mb-6 text-2xl font-bold">
|
|
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 cursor-pointer transition-colors">
|
|
<CardContent className="p-6 text-center">
|
|
<UserCircle className="text-primary mx-auto mb-3 h-10 w-10" />
|
|
<h3 className="font-semibold">Mein Profil</h3>
|
|
<p className="text-muted-foreground mt-1 text-xs">
|
|
Kontaktdaten und Datenschutz
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
<Link href={`/club/${slug}/portal/documents`}>
|
|
<Card className="hover:border-primary cursor-pointer transition-colors">
|
|
<CardContent className="p-6 text-center">
|
|
<FileText className="text-primary mx-auto mb-3 h-10 w-10" />
|
|
<h3 className="font-semibold">Dokumente</h3>
|
|
<p className="text-muted-foreground mt-1 text-xs">
|
|
Rechnungen und Bescheinigungen
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
<Card>
|
|
<CardContent className="p-6 text-center">
|
|
<CreditCard className="text-primary mx-auto mb-3 h-10 w-10" />
|
|
<h3 className="font-semibold">Mitgliedsausweis</h3>
|
|
<p className="text-muted-foreground mt-1 text-xs">
|
|
Digital anzeigen
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
// Not logged in or not a member — show login form
|
|
return (
|
|
<div className="bg-muted/30 min-h-screen">
|
|
<header className="bg-background border-b px-6 py-4">
|
|
<div className="mx-auto flex max-w-4xl items-center justify-between">
|
|
<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="mx-auto max-w-4xl px-6 py-12">
|
|
<PortalLoginForm slug={slug} accountName={String(account.name)} />
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|