Initial state for GitNexus analysis
This commit is contained in:
Zaid Marzguioui
@@ -1,41 +1,381 @@
|
||||
import { use } from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
import { getTranslations } from 'next-intl/server';
|
||||
import {
|
||||
ArrowRight,
|
||||
FileText,
|
||||
GraduationCap,
|
||||
Mail,
|
||||
Plus,
|
||||
UserCheck,
|
||||
UserPlus,
|
||||
CalendarDays,
|
||||
Activity,
|
||||
BedDouble,
|
||||
} from 'lucide-react';
|
||||
|
||||
import { AppBreadcrumbs } from '@kit/ui/app-breadcrumbs';
|
||||
import { PageBody } from '@kit/ui/page';
|
||||
import { Trans } from '@kit/ui/trans';
|
||||
import { getSupabaseServerClient } from '@kit/supabase/server-client';
|
||||
import { Badge } from '@kit/ui/badge';
|
||||
import { Button } from '@kit/ui/button';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@kit/ui/card';
|
||||
|
||||
import { DashboardDemo } from './_components/dashboard-demo';
|
||||
import { TeamAccountLayoutPageHeader } from './_components/team-account-layout-page-header';
|
||||
import { createMemberManagementApi } from '@kit/member-management/api';
|
||||
import { createCourseManagementApi } from '@kit/course-management/api';
|
||||
import { createFinanceApi } from '@kit/finance/api';
|
||||
import { createNewsletterApi } from '@kit/newsletter/api';
|
||||
import { createBookingManagementApi } from '@kit/booking-management/api';
|
||||
import { createEventManagementApi } from '@kit/event-management/api';
|
||||
|
||||
import { CmsPageShell } from '~/components/cms-page-shell';
|
||||
import { StatsCard } from '~/components/stats-card';
|
||||
|
||||
interface TeamAccountHomePageProps {
|
||||
params: Promise<{ account: string }>;
|
||||
}
|
||||
|
||||
export const generateMetadata = async () => {
|
||||
const t = await getTranslations('teams');
|
||||
const title = t('home.pageTitle');
|
||||
export default async function TeamAccountHomePage({
|
||||
params,
|
||||
}: TeamAccountHomePageProps) {
|
||||
const { account } = await params;
|
||||
const client = getSupabaseServerClient();
|
||||
|
||||
return {
|
||||
title,
|
||||
};
|
||||
};
|
||||
const { data: acct } = await client
|
||||
.from('accounts')
|
||||
.select('id, name')
|
||||
.eq('slug', account)
|
||||
.single();
|
||||
|
||||
function TeamAccountHomePage({ params }: TeamAccountHomePageProps) {
|
||||
const account = use(params).account;
|
||||
if (!acct) return <div>Konto nicht gefunden</div>;
|
||||
|
||||
// Load all stats in parallel with allSettled for resilience
|
||||
const [
|
||||
memberStatsResult,
|
||||
courseStatsResult,
|
||||
invoicesResult,
|
||||
newslettersResult,
|
||||
bookingsResult,
|
||||
eventsResult,
|
||||
] = await Promise.allSettled([
|
||||
createMemberManagementApi(client).getMemberStatistics(acct.id),
|
||||
createCourseManagementApi(client).getStatistics(acct.id),
|
||||
createFinanceApi(client).listInvoices(acct.id, { status: 'draft' }),
|
||||
createNewsletterApi(client).listNewsletters(acct.id),
|
||||
createBookingManagementApi(client).listBookings(acct.id, { page: 1 }),
|
||||
createEventManagementApi(client).listEvents(acct.id, { page: 1 }),
|
||||
]);
|
||||
|
||||
const memberStats =
|
||||
memberStatsResult.status === 'fulfilled'
|
||||
? memberStatsResult.value
|
||||
: { total: 0, active: 0, inactive: 0, pending: 0, resigned: 0 };
|
||||
|
||||
const courseStats =
|
||||
courseStatsResult.status === 'fulfilled'
|
||||
? courseStatsResult.value
|
||||
: { totalCourses: 0, openCourses: 0, completedCourses: 0, totalParticipants: 0 };
|
||||
|
||||
const openInvoices =
|
||||
invoicesResult.status === 'fulfilled' ? invoicesResult.value : [];
|
||||
|
||||
const newsletters =
|
||||
newslettersResult.status === 'fulfilled' ? newslettersResult.value : [];
|
||||
|
||||
const bookings =
|
||||
bookingsResult.status === 'fulfilled'
|
||||
? bookingsResult.value
|
||||
: { data: [], total: 0 };
|
||||
|
||||
const events =
|
||||
eventsResult.status === 'fulfilled'
|
||||
? eventsResult.value
|
||||
: { data: [], total: 0 };
|
||||
|
||||
const accountName = acct.name ? String(acct.name) : 'Dashboard';
|
||||
|
||||
return (
|
||||
<PageBody>
|
||||
<TeamAccountLayoutPageHeader
|
||||
account={account}
|
||||
title={<Trans i18nKey={'common.routes.dashboard'} />}
|
||||
description={<AppBreadcrumbs />}
|
||||
/>
|
||||
<CmsPageShell account={account} title={accountName}>
|
||||
<div className="flex w-full flex-col gap-6">
|
||||
{/* Stats Row */}
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<StatsCard
|
||||
title="Mitglieder"
|
||||
value={memberStats.active}
|
||||
icon={<UserCheck className="h-5 w-5" />}
|
||||
description={`${memberStats.total} gesamt, ${memberStats.pending} ausstehend`}
|
||||
/>
|
||||
<StatsCard
|
||||
title="Kurse"
|
||||
value={courseStats.openCourses}
|
||||
icon={<GraduationCap className="h-5 w-5" />}
|
||||
description={`${courseStats.totalCourses} gesamt, ${courseStats.totalParticipants} Teilnehmer`}
|
||||
/>
|
||||
<StatsCard
|
||||
title="Offene Rechnungen"
|
||||
value={openInvoices.length}
|
||||
icon={<FileText className="h-5 w-5" />}
|
||||
description="Entwürfe zum Versenden"
|
||||
/>
|
||||
<StatsCard
|
||||
title="Newsletter"
|
||||
value={newsletters.length}
|
||||
icon={<Mail className="h-5 w-5" />}
|
||||
description="Erstellt"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DashboardDemo />
|
||||
</PageBody>
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
||||
{/* Letzte Aktivität */}
|
||||
<Card className="lg:col-span-2">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Activity className="h-5 w-5" />
|
||||
Letzte Aktivität
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Aktuelle Buchungen und Veranstaltungen
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{/* Recent bookings */}
|
||||
{bookings.data.slice(0, 3).map((booking: Record<string, unknown>) => (
|
||||
<div
|
||||
key={String(booking.id)}
|
||||
className="flex items-center justify-between rounded-md border p-3"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="rounded-full bg-blue-500/10 p-2 text-blue-600">
|
||||
<BedDouble className="h-4 w-4" />
|
||||
</div>
|
||||
<div>
|
||||
<Link
|
||||
href={`/home/${account}/bookings/${String(booking.id)}`}
|
||||
className="text-sm font-medium hover:underline"
|
||||
>
|
||||
Buchung #{String(booking.id).slice(0, 8)}
|
||||
</Link>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{booking.check_in
|
||||
? new Date(
|
||||
String(booking.check_in),
|
||||
).toLocaleDateString('de-DE')
|
||||
: '—'}{' '}
|
||||
–{' '}
|
||||
{booking.check_out
|
||||
? new Date(
|
||||
String(booking.check_out),
|
||||
).toLocaleDateString('de-DE')
|
||||
: '—'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant="outline">
|
||||
{String(booking.status ?? '—')}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Recent events */}
|
||||
{events.data.slice(0, 3).map((event: Record<string, unknown>) => (
|
||||
<div
|
||||
key={String(event.id)}
|
||||
className="flex items-center justify-between rounded-md border p-3"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="rounded-full bg-amber-500/10 p-2 text-amber-600">
|
||||
<CalendarDays className="h-4 w-4" />
|
||||
</div>
|
||||
<div>
|
||||
<Link
|
||||
href={`/home/${account}/events/${String(event.id)}`}
|
||||
className="text-sm font-medium hover:underline"
|
||||
>
|
||||
{String(event.name)}
|
||||
</Link>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{event.event_date
|
||||
? new Date(
|
||||
String(event.event_date),
|
||||
).toLocaleDateString('de-DE')
|
||||
: 'Kein Datum'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant="outline">
|
||||
{String(event.status ?? '—')}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{bookings.data.length === 0 && events.data.length === 0 && (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-center">
|
||||
<Activity className="h-8 w-8 text-muted-foreground/50" />
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
Noch keine Aktivitäten vorhanden
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Schnellaktionen */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Schnellaktionen</CardTitle>
|
||||
<CardDescription>Häufig verwendete Aktionen</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-2">
|
||||
<Link href={`/home/${account}/members-cms/new`}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-between"
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
<UserPlus className="h-4 w-4" />
|
||||
Neues Mitglied
|
||||
</span>
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
<Link href={`/home/${account}/courses/new`}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-between"
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
<GraduationCap className="h-4 w-4" />
|
||||
Neuer Kurs
|
||||
</span>
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
<Link href={`/home/${account}/newsletter/new`}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-between"
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
<Mail className="h-4 w-4" />
|
||||
Newsletter erstellen
|
||||
</span>
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
<Link href={`/home/${account}/bookings/new`}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-between"
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
<BedDouble className="h-4 w-4" />
|
||||
Neue Buchung
|
||||
</span>
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
<Link href={`/home/${account}/events/new`}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-between"
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
<Plus className="h-4 w-4" />
|
||||
Neue Veranstaltung
|
||||
</span>
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Module Overview Row */}
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">
|
||||
Buchungen
|
||||
</p>
|
||||
<p className="text-2xl font-bold">{bookings.total}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{bookings.data.filter(
|
||||
(b: Record<string, unknown>) =>
|
||||
b.status === 'confirmed' || b.status === 'checked_in',
|
||||
).length}{' '}
|
||||
aktiv
|
||||
</p>
|
||||
</div>
|
||||
<Link href={`/home/${account}/bookings`}>
|
||||
<Button variant="ghost" size="icon">
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">
|
||||
Veranstaltungen
|
||||
</p>
|
||||
<p className="text-2xl font-bold">{events.total}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{events.data.filter(
|
||||
(e: Record<string, unknown>) =>
|
||||
e.status === 'published' ||
|
||||
e.status === 'registration_open',
|
||||
).length}{' '}
|
||||
aktiv
|
||||
</p>
|
||||
</div>
|
||||
<Link href={`/home/${account}/events`}>
|
||||
<Button variant="ghost" size="icon">
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">
|
||||
Kurse abgeschlossen
|
||||
</p>
|
||||
<p className="text-2xl font-bold">
|
||||
{courseStats.completedCourses}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
von {courseStats.totalCourses} insgesamt
|
||||
</p>
|
||||
</div>
|
||||
<Link href={`/home/${account}/courses`}>
|
||||
<Button variant="ghost" size="icon">
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</CmsPageShell>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamAccountHomePage;
|
||||
|
||||
Reference in New Issue
Block a user