Files
myeasycms-v2/apps/web/app/[locale]/home/[account]/documents/page.tsx

130 lines
3.7 KiB
TypeScript

import Link from 'next/link';
import {
CreditCard,
FileText,
Tag,
BarChart3,
Mail,
Award,
} from 'lucide-react';
import { getSupabaseServerClient } from '@kit/supabase/server-client';
import { Button } from '@kit/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
import { AccountNotFound } from '~/components/account-not-found';
import { CmsPageShell } from '~/components/cms-page-shell';
interface PageProps {
params: Promise<{ account: string }>;
}
const DOCUMENT_TYPES = [
{
id: 'member-card',
title: 'Mitgliedsausweis',
description:
'Mitgliedsausweise mit Foto, Name und Mitgliedsnummer generieren.',
icon: CreditCard,
color: 'text-blue-600 bg-blue-50',
},
{
id: 'invoice',
title: 'Rechnung',
description:
'Professionelle Rechnungen im PDF-Format mit Logo und Positionen.',
icon: FileText,
color: 'text-green-600 bg-green-50',
},
{
id: 'labels',
title: 'Etiketten',
description: 'Adressetiketten für Serienbriefe im Avery-Format drucken.',
icon: Tag,
color: 'text-orange-600 bg-orange-50',
},
{
id: 'report',
title: 'Bericht',
description: 'Statistische Auswertungen und Berichte als PDF oder Excel.',
icon: BarChart3,
color: 'text-purple-600 bg-purple-50',
},
{
id: 'letter',
title: 'Brief',
description: 'Serienbriefe mit personalisierten Platzhaltern erstellen.',
icon: Mail,
color: 'text-rose-600 bg-rose-50',
},
{
id: 'certificate',
title: 'Zertifikat',
description: 'Teilnahmebescheinigungen und Zertifikate mit Unterschrift.',
icon: Award,
color: 'text-amber-600 bg-amber-50',
},
] as const;
export default async function DocumentsPage({ params }: PageProps) {
const { account } = await params;
const client = getSupabaseServerClient();
const { data: acct } = await client
.from('accounts')
.select('id')
.eq('slug', account)
.single();
if (!acct) return <AccountNotFound />;
return (
<CmsPageShell
account={account}
title="Dokumente"
description="Dokumente erstellen und verwalten"
>
<div className="flex w-full flex-col gap-6">
{/* Actions */}
<div className="flex items-center justify-end">
<Link href={`/home/${account}/documents/templates`}>
<Button variant="outline">Vorlagen verwalten</Button>
</Link>
</div>
{/* Document Type Grid */}
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
{DOCUMENT_TYPES.map((docType) => {
const Icon = docType.icon;
return (
<Card key={docType.id} className="flex flex-col">
<CardHeader className="flex flex-row items-start gap-4 space-y-0">
<div className={`rounded-lg p-3 ${docType.color}`}>
<Icon className="h-6 w-6" />
</div>
<div className="flex-1">
<CardTitle className="text-base">{docType.title}</CardTitle>
</div>
</CardHeader>
<CardContent className="flex flex-1 flex-col justify-between gap-4">
<p className="text-muted-foreground text-sm">
{docType.description}
</p>
<Link
href={`/home/${account}/documents/generate?type=${docType.id}`}
>
<Button variant="outline" size="sm" className="w-full">
Erstellen
</Button>
</Link>
</CardContent>
</Card>
);
})}
</div>
</div>
</CmsPageShell>
);
}