1294caa7fa
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
72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import {
|
|
BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
|
|
PieChart, Pie, Cell, Legend,
|
|
} from 'recharts';
|
|
|
|
const COLORS = ['#0d9488', '#14b8a6', '#2dd4bf', '#5eead4', '#99f6e4', '#ccfbf1'];
|
|
|
|
interface BarChartData {
|
|
name: string;
|
|
value: number;
|
|
}
|
|
|
|
interface PieChartData {
|
|
name: string;
|
|
value: number;
|
|
}
|
|
|
|
export function StatsBarChart({ data, title }: { data: BarChartData[]; title?: string }) {
|
|
if (data.length === 0 || data.every(d => d.value === 0)) {
|
|
return (
|
|
<div className="flex h-64 items-center justify-center text-sm text-muted-foreground">
|
|
Noch keine Daten vorhanden
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="h-64">
|
|
{title && <p className="mb-2 text-sm font-medium text-muted-foreground">{title}</p>}
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart data={data}>
|
|
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
|
|
<XAxis dataKey="name" className="text-xs" />
|
|
<YAxis className="text-xs" />
|
|
<Tooltip />
|
|
<Bar dataKey="value" fill="var(--primary, #0d9488)" radius={[4, 4, 0, 0]} />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function StatsPieChart({ data, title }: { data: PieChartData[]; title?: string }) {
|
|
const filtered = data.filter(d => d.value > 0);
|
|
if (filtered.length === 0) {
|
|
return (
|
|
<div className="flex h-64 items-center justify-center text-sm text-muted-foreground">
|
|
Noch keine Daten vorhanden
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="h-64">
|
|
{title && <p className="mb-2 text-sm font-medium text-muted-foreground">{title}</p>}
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<PieChart>
|
|
<Pie data={filtered} cx="50%" cy="50%" innerRadius={50} outerRadius={80} dataKey="value" label={({ name, percent }) => `${name} (${((percent ?? 0) * 100).toFixed(0)}%)`}>
|
|
{filtered.map((_, i) => (
|
|
<Cell key={`cell-${i}`} fill={COLORS[i % COLORS.length]} />
|
|
))}
|
|
</Pie>
|
|
<Legend />
|
|
<Tooltip />
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
}
|