feat: unify tenant admin ui and add photo moderation
This commit is contained in:
Codex Agent
@@ -137,6 +137,11 @@ export type DashboardSummary = {
|
||||
expires_at?: string | null;
|
||||
remaining_events?: number | null;
|
||||
} | null;
|
||||
engagement_totals?: {
|
||||
tasks?: number;
|
||||
collections?: number;
|
||||
emotions?: number;
|
||||
};
|
||||
};
|
||||
|
||||
export type TenantOnboardingStatus = {
|
||||
@@ -622,6 +627,29 @@ function normalizeDashboard(payload: JsonValue | null): DashboardSummary | null
|
||||
remaining_events: payload.active_package.remaining_events ?? payload.active_package.remainingEvents ?? null,
|
||||
}
|
||||
: null,
|
||||
engagement_totals: {
|
||||
tasks:
|
||||
Number(
|
||||
payload.tasks?.summary?.total ??
|
||||
payload.tasks_total ??
|
||||
payload.engagement?.tasks ??
|
||||
0,
|
||||
),
|
||||
collections:
|
||||
Number(
|
||||
payload.task_collections?.summary?.total ??
|
||||
payload.collections_total ??
|
||||
payload.engagement?.collections ??
|
||||
0,
|
||||
),
|
||||
emotions:
|
||||
Number(
|
||||
payload.emotions?.summary?.total ??
|
||||
payload.emotions_total ??
|
||||
payload.engagement?.emotions ??
|
||||
0,
|
||||
),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@@ -923,6 +951,18 @@ export async function deletePhoto(slug: string, id: number): Promise<void> {
|
||||
}
|
||||
}
|
||||
|
||||
export async function updatePhotoVisibility(slug: string, id: number, visible: boolean): Promise<TenantPhoto> {
|
||||
const response = await authorizedFetch(`${eventEndpoint(slug)}/photos/${id}/visibility`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ visible }),
|
||||
});
|
||||
const data = await jsonOrThrow<PhotoResponse>(response, 'Failed to update photo visibility');
|
||||
return normalizePhoto(data.data);
|
||||
}
|
||||
|
||||
export async function toggleEvent(slug: string): Promise<TenantEvent> {
|
||||
const response = await authorizedFetch(`${eventEndpoint(slug)}/toggle`, { method: 'POST' });
|
||||
const data = await jsonOrThrow<{ message: string; data: JsonValue }>(response, 'Failed to toggle event');
|
||||
|
||||
@@ -1,15 +1,6 @@
|
||||
import React from 'react';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { cn } from '@/lib/utils';
|
||||
import toast from 'react-hot-toast';
|
||||
import {
|
||||
ADMIN_HOME_PATH,
|
||||
ADMIN_EVENTS_PATH,
|
||||
ADMIN_SETTINGS_PATH,
|
||||
ADMIN_BILLING_PATH,
|
||||
ADMIN_ENGAGEMENT_PATH,
|
||||
} from '../constants';
|
||||
import {
|
||||
LayoutDashboard,
|
||||
CalendarDays,
|
||||
@@ -17,6 +8,15 @@ import {
|
||||
CreditCard,
|
||||
Settings as SettingsIcon,
|
||||
} from 'lucide-react';
|
||||
import toast from 'react-hot-toast';
|
||||
import { cn } from '@/lib/utils';
|
||||
import {
|
||||
ADMIN_HOME_PATH,
|
||||
ADMIN_EVENTS_PATH,
|
||||
ADMIN_SETTINGS_PATH,
|
||||
ADMIN_BILLING_PATH,
|
||||
ADMIN_ENGAGEMENT_PATH,
|
||||
} from '../constants';
|
||||
import { LanguageSwitcher } from './LanguageSwitcher';
|
||||
import { registerApiErrorListener } from '../lib/apiError';
|
||||
import { getDashboardSummary, getEvents, getTenantPackagesOverview } from '../api';
|
||||
@@ -92,27 +92,29 @@ export function AdminLayout({ title, subtitle, actions, children }: AdminLayoutP
|
||||
}, [t]);
|
||||
|
||||
return (
|
||||
<div className="relative min-h-svh overflow-hidden bg-slate-950 text-white">
|
||||
<div className="relative min-h-svh overflow-hidden bg-gradient-to-br from-rose-50 via-white to-slate-50 text-slate-900 dark:bg-slate-950 dark:text-white">
|
||||
<div
|
||||
aria-hidden
|
||||
className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,_rgba(255,137,170,0.28),_transparent_60%),radial-gradient(ellipse_at_bottom,_rgba(99,102,241,0.25),_transparent_65%)]"
|
||||
className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_10%_10%,rgba(255,137,170,0.25),transparent_55%),radial-gradient(circle_at_80%_0%,rgba(96,165,250,0.22),transparent_60%)] opacity-60 dark:opacity-30"
|
||||
/>
|
||||
<div aria-hidden className="absolute inset-0 bg-gradient-to-br from-slate-950 via-slate-900/60 to-[#1d1130]" />
|
||||
<div aria-hidden className="absolute inset-0 bg-gradient-to-b from-white/80 via-white/60 to-transparent dark:from-slate-950 dark:via-slate-950/90 dark:to-slate-950/80" />
|
||||
<div className="relative z-10 flex min-h-svh flex-col">
|
||||
<header className="sticky top-0 z-30 px-4 pt-6 sm:px-6">
|
||||
<div className="mx-auto w-full max-w-6xl rounded-3xl border border-white/15 bg-white/85 text-slate-900 shadow-2xl shadow-rose-400/10 backdrop-blur-xl">
|
||||
<div className="flex flex-col gap-6 px-6 py-6 md:flex-row md:items-center md:justify-between">
|
||||
<header className="sticky top-0 z-40 border-b border-slate-200/70 bg-white/90 backdrop-blur-xl dark:border-white/10 dark:bg-slate-950/80">
|
||||
<div className="mx-auto flex w-full max-w-6xl flex-col gap-3 px-4 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-6">
|
||||
<div className="space-y-1">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-[0.4em] text-rose-500 dark:text-rose-200">{t('app.brand')}</p>
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-[0.35em] text-rose-400">{t('app.brand')}</p>
|
||||
<h1 className="font-display text-3xl font-semibold text-slate-900">{title}</h1>
|
||||
{subtitle ? <p className="mt-1 text-sm text-slate-600">{subtitle}</p> : null}
|
||||
<h1 className="text-xl font-semibold text-slate-900 dark:text-white sm:text-2xl">{title}</h1>
|
||||
{subtitle ? <p className="text-xs text-slate-600 dark:text-slate-300 sm:text-sm">{subtitle}</p> : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<LanguageSwitcher />
|
||||
{actions}
|
||||
<LanguageSwitcher />
|
||||
</div>
|
||||
</div>
|
||||
<nav className="hidden items-center gap-2 border-t border-slate-200/70 px-6 py-4 md:flex">
|
||||
<nav className="hidden border-t border-slate-200/60 dark:border-white/5 sm:block">
|
||||
<div className="mx-auto flex w-full max-w-6xl items-center gap-1 px-4 py-2 sm:px-6">
|
||||
{navItems.map(({ to, labelKey, icon: Icon, end }) => (
|
||||
<NavLink
|
||||
key={to}
|
||||
@@ -123,10 +125,10 @@ export function AdminLayout({ title, subtitle, actions, children }: AdminLayoutP
|
||||
onTouchStart={() => triggerPrefetch(to)}
|
||||
className={({ isActive }) =>
|
||||
cn(
|
||||
'flex items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-slate-950',
|
||||
'flex items-center gap-2 rounded-2xl px-3 py-2 text-xs font-semibold uppercase tracking-wide transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-400/60',
|
||||
isActive
|
||||
? 'bg-rose-600 text-white shadow-md shadow-rose-400/30'
|
||||
: 'border border-slate-200/80 bg-white text-slate-700 hover:bg-rose-50/80 hover:text-rose-700'
|
||||
? 'bg-rose-600 text-white shadow shadow-rose-300/40'
|
||||
: 'text-slate-500 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white'
|
||||
)
|
||||
}
|
||||
>
|
||||
@@ -134,28 +136,34 @@ export function AdminLayout({ title, subtitle, actions, children }: AdminLayoutP
|
||||
{t(labelKey)}
|
||||
</NavLink>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main className="relative z-10 mx-auto w-full max-w-6xl flex-1 px-4 pb-[calc(env(safe-area-inset-bottom,0)+6.5rem)] pt-6 sm:px-6 md:pb-16">
|
||||
<div className="grid gap-6">{children}</div>
|
||||
<main className="relative z-10 mx-auto w-full max-w-5xl flex-1 px-4 pb-[calc(env(safe-area-inset-bottom,0)+5.5rem)] pt-5 sm:px-6 md:pb-16">
|
||||
<div className="space-y-5">{children}</div>
|
||||
</main>
|
||||
|
||||
<TenantMobileNav items={navItems} />
|
||||
<TenantMobileNav items={navItems} onPrefetch={triggerPrefetch} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TenantMobileNav({ items }: { items: typeof navItems }) {
|
||||
function TenantMobileNav({
|
||||
items,
|
||||
onPrefetch,
|
||||
}: {
|
||||
items: typeof navItems;
|
||||
onPrefetch: (path: string) => void;
|
||||
}) {
|
||||
const { t } = useTranslation('common');
|
||||
|
||||
return (
|
||||
<nav className="md:hidden" aria-label={t('navigation.mobile', { defaultValue: 'Tenant Navigation' })}>
|
||||
<div
|
||||
aria-hidden
|
||||
className="pointer-events-none fixed inset-x-0 bottom-0 z-30 h-16 bg-gradient-to-t from-slate-950/35 via-transparent to-transparent dark:from-black/60"
|
||||
className="pointer-events-none fixed inset-x-0 bottom-0 z-30 h-12 bg-gradient-to-t from-white via-white/40 to-transparent dark:from-slate-950 dark:via-slate-950/60 dark:to-transparent"
|
||||
/>
|
||||
<div className="fixed inset-x-0 bottom-0 z-40 border-t border-slate-200/80 bg-white/95 px-4 pb-[calc(env(safe-area-inset-bottom,0)+0.75rem)] pt-3 shadow-2xl shadow-rose-300/15 backdrop-blur supports-[backdrop-filter]:bg-white/90 dark:border-slate-800/70 dark:bg-slate-950/90">
|
||||
<div className="mx-auto flex max-w-xl items-center justify-around gap-1">
|
||||
@@ -164,9 +172,9 @@ function TenantMobileNav({ items }: { items: typeof navItems }) {
|
||||
key={to}
|
||||
to={to}
|
||||
end={end}
|
||||
onPointerEnter={() => triggerPrefetch(to)}
|
||||
onFocus={() => triggerPrefetch(to)}
|
||||
onTouchStart={() => triggerPrefetch(to)}
|
||||
onPointerEnter={() => onPrefetch(to)}
|
||||
onFocus={() => onPrefetch(to)}
|
||||
onTouchStart={() => onPrefetch(to)}
|
||||
className={({ isActive }) =>
|
||||
cn(
|
||||
'flex flex-col items-center gap-1 rounded-xl px-3 py-2 text-xs font-semibold text-slate-600 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:text-slate-300 dark:focus-visible:ring-offset-slate-950',
|
||||
|
||||
38
resources/js/admin/components/tenant/action-grid.tsx
Normal file
38
resources/js/admin/components/tenant/action-grid.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import React from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export interface ActionItem {
|
||||
key: string;
|
||||
label: string;
|
||||
description: string;
|
||||
icon?: React.ReactNode;
|
||||
onClick: () => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
interface ActionGridProps {
|
||||
items: ActionItem[];
|
||||
columns?: 1 | 2;
|
||||
}
|
||||
|
||||
export function ActionGrid({ items, columns = 2 }: ActionGridProps) {
|
||||
return (
|
||||
<div className={cn('grid gap-3', columns === 2 ? 'sm:grid-cols-2' : '')}>
|
||||
{items.map((item) => (
|
||||
<button
|
||||
key={item.key}
|
||||
type="button"
|
||||
onClick={item.onClick}
|
||||
disabled={item.disabled}
|
||||
className="group flex flex-col gap-1.5 rounded-2xl border border-slate-200 bg-white p-4 text-left shadow-sm transition duration-200 hover:-translate-y-0.5 hover:border-rose-200 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-rose-300 disabled:cursor-not-allowed disabled:opacity-60 dark:border-white/10 dark:bg-white/5"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-sm font-semibold text-slate-900 dark:text-white">
|
||||
{item.icon ? <span className="text-rose-500 dark:text-rose-200">{item.icon}</span> : null}
|
||||
{item.label}
|
||||
</div>
|
||||
<p className="text-xs text-slate-600 dark:text-slate-400">{item.description}</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -4,7 +4,7 @@ import { Card } from '@/components/ui/card';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export const frostedCardClass = cn(
|
||||
'border border-white/15 bg-white/92 text-slate-900 shadow-lg shadow-rose-400/10 backdrop-blur-lg',
|
||||
'border border-slate-200 bg-white text-slate-900 shadow-lg shadow-rose-100/30 backdrop-blur',
|
||||
'dark:border-slate-800/70 dark:bg-slate-950/85 dark:text-slate-100'
|
||||
);
|
||||
|
||||
@@ -22,7 +22,7 @@ export function FrostedSurface({ className, ...props }: FrostedSurfaceProps) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'rounded-2xl border border-white/15 bg-white/88 text-slate-900 shadow-lg shadow-rose-300/10 backdrop-blur-lg',
|
||||
'rounded-2xl border border-slate-200 bg-white text-slate-900 shadow-lg shadow-rose-100/30 backdrop-blur',
|
||||
'dark:border-slate-800/70 dark:bg-slate-950/80 dark:text-slate-100',
|
||||
className
|
||||
)}
|
||||
|
||||
@@ -29,31 +29,27 @@ export function TenantHeroCard({
|
||||
return (
|
||||
<Card
|
||||
className={cn(
|
||||
'relative overflow-hidden border border-slate-200/80 bg-white text-slate-900 shadow-xl shadow-rose-200/30 backdrop-blur',
|
||||
'dark:border-white/10 dark:bg-slate-950/90 dark:text-slate-100',
|
||||
'relative overflow-hidden border border-slate-200 bg-white text-slate-900 shadow-lg shadow-rose-100/50 backdrop-blur dark:border-white/10 dark:bg-slate-900/80 dark:text-slate-100',
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div
|
||||
aria-hidden
|
||||
className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,_rgba(255,137,170,0.18),_transparent_55%),radial-gradient(ellipse_at_bottom,_rgba(99,102,241,0.16),_transparent_65%)] motion-safe:animate-[aurora_18s_ease-in-out_infinite] dark:hidden"
|
||||
/>
|
||||
<div aria-hidden className="absolute inset-0 bg-gradient-to-br from-rose-50/70 via-white to-sky-50/70 dark:hidden" />
|
||||
<div aria-hidden className="absolute inset-0 hidden bg-gradient-to-br from-slate-950/80 via-slate-900/20 to-transparent mix-blend-overlay dark:block" />
|
||||
|
||||
<CardContent className="relative z-10 flex flex-col gap-8 px-6 py-8 lg:flex-row lg:items-start lg:justify-between lg:px-10 lg:py-12">
|
||||
<div className="max-w-2xl space-y-6">
|
||||
<CardContent className="relative z-10 flex flex-col gap-6 px-5 py-6 sm:px-6 lg:flex-row lg:items-start lg:justify-between">
|
||||
<div className="space-y-4">
|
||||
{badge ? (
|
||||
<span className="inline-flex items-center gap-2 rounded-full border border-rose-100 bg-rose-50/80 px-4 py-1 text-xs font-semibold uppercase tracking-[0.35em] text-rose-600 dark:border-white/30 dark:bg-white/15 dark:text-white">
|
||||
<span className="inline-flex items-center gap-2 rounded-full bg-rose-100/80 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.25em] text-rose-600 dark:bg-white/15 dark:text-white">
|
||||
{badge}
|
||||
</span>
|
||||
) : null}
|
||||
|
||||
<div className="space-y-3 text-slate-700 dark:text-slate-100">
|
||||
<h1 className="font-display text-3xl font-semibold tracking-tight text-slate-900 dark:text-white sm:text-4xl">{title}</h1>
|
||||
{description ? <p className="text-sm text-slate-600 dark:text-white/75 sm:text-base">{description}</p> : null}
|
||||
<div className="space-y-2 text-slate-700 dark:text-slate-100">
|
||||
<h1 className="font-display text-2xl font-semibold leading-tight text-slate-900 dark:text-white sm:text-3xl">
|
||||
{title}
|
||||
</h1>
|
||||
{description ? (
|
||||
<p className="text-sm text-slate-600 dark:text-white/80">{description}</p>
|
||||
) : null}
|
||||
{supporting?.map((paragraph) => (
|
||||
<p key={paragraph} className="text-sm text-slate-600 dark:text-white/75 sm:text-base">
|
||||
<p key={paragraph} className="text-sm text-slate-600 dark:text-white/70">
|
||||
{paragraph}
|
||||
</p>
|
||||
))}
|
||||
@@ -61,14 +57,18 @@ export function TenantHeroCard({
|
||||
</div>
|
||||
|
||||
{(primaryAction || secondaryAction) && (
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{primaryAction}
|
||||
{secondaryAction}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{aside ? <div className="w-full max-w-sm">{aside}</div> : null}
|
||||
{aside ? (
|
||||
<div className="rounded-2xl border border-slate-200/70 bg-white/90 p-4 text-sm dark:border-white/10 dark:bg-white/5">
|
||||
{aside}
|
||||
</div>
|
||||
) : null}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
@@ -3,3 +3,6 @@ export { FrostedCard, FrostedSurface, frostedCardClass } from './frosted-surface
|
||||
export { ChecklistRow } from './checklist-row';
|
||||
export type { ChecklistStep } from './onboarding-checklist-card';
|
||||
export { TenantOnboardingChecklistCard } from './onboarding-checklist-card';
|
||||
export { SectionCard, SectionHeader } from './section-card';
|
||||
export { StatCarousel } from './stat-carousel';
|
||||
export { ActionGrid } from './action-grid';
|
||||
|
||||
41
resources/js/admin/components/tenant/section-card.tsx
Normal file
41
resources/js/admin/components/tenant/section-card.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import React from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export interface SectionCardProps extends React.HTMLAttributes<HTMLElement> {
|
||||
as?: 'section' | 'div';
|
||||
}
|
||||
|
||||
export function SectionCard({ className, as: Tag = 'section', ...props }: SectionCardProps) {
|
||||
return (
|
||||
<Tag
|
||||
className={cn(
|
||||
'rounded-3xl border border-slate-200 bg-white p-5 shadow-sm dark:border-white/10 dark:bg-white/5 dark:shadow-inner',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
interface SectionHeaderProps {
|
||||
eyebrow?: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
endSlot?: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function SectionHeader({ eyebrow, title, description, endSlot, className }: SectionHeaderProps) {
|
||||
return (
|
||||
<div className={cn('flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between', className)}>
|
||||
<div>
|
||||
{eyebrow ? (
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.35em] text-rose-500 dark:text-rose-200">{eyebrow}</p>
|
||||
) : null}
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-white">{title}</h2>
|
||||
{description ? <p className="text-sm text-slate-600 dark:text-slate-300">{description}</p> : null}
|
||||
</div>
|
||||
{endSlot}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
35
resources/js/admin/components/tenant/stat-carousel.tsx
Normal file
35
resources/js/admin/components/tenant/stat-carousel.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import React from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface StatItem {
|
||||
key: string;
|
||||
label: string;
|
||||
value: string | number;
|
||||
icon?: React.ReactNode;
|
||||
hint?: string;
|
||||
}
|
||||
|
||||
interface StatCarouselProps {
|
||||
items: StatItem[];
|
||||
}
|
||||
|
||||
export function StatCarousel({ items }: StatCarouselProps) {
|
||||
return (
|
||||
<div className="-mx-4 flex snap-x snap-mandatory gap-3 overflow-x-auto px-4 pb-2 sm:mx-0 sm:grid sm:snap-none sm:overflow-visible sm:px-0 sm:pb-0 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{items.map((item) => (
|
||||
<div key={item.key} className="min-w-[70%] snap-center sm:min-w-0">
|
||||
<div className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-white/5">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">{item.label}</span>
|
||||
{item.icon ? <span className="text-rose-500 dark:text-rose-200">{item.icon}</span> : null}
|
||||
</div>
|
||||
<div className="mt-3 text-2xl font-semibold text-slate-900 dark:text-white">{item.value}</div>
|
||||
{item.hint ? (
|
||||
<p className="mt-2 text-xs text-slate-500 dark:text-slate-400">{item.hint}</p>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -5,7 +5,6 @@ import { useTranslation } from 'react-i18next';
|
||||
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
|
||||
import { AdminLayout } from '../components/AdminLayout';
|
||||
@@ -13,10 +12,11 @@ import { getTenantPackagesOverview, getTenantPaddleTransactions, PaddleTransacti
|
||||
import { isAuthError } from '../auth/tokens';
|
||||
import {
|
||||
TenantHeroCard,
|
||||
FrostedCard,
|
||||
FrostedSurface,
|
||||
tenantHeroPrimaryButtonClass,
|
||||
tenantHeroSecondaryButtonClass,
|
||||
SectionCard,
|
||||
SectionHeader,
|
||||
} from '../components/tenant';
|
||||
|
||||
type PackageWarning = { id: string; tone: 'warning' | 'danger'; message: string };
|
||||
@@ -196,22 +196,17 @@ export default function BillingPage() {
|
||||
<BillingSkeleton />
|
||||
) : (
|
||||
<>
|
||||
<FrostedCard className="mt-6 border border-white/20">
|
||||
<CardHeader className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
||||
<div>
|
||||
<CardTitle className="flex items-center gap-2 text-xl text-slate-900">
|
||||
<Sparkles className="h-5 w-5 text-pink-500" />
|
||||
{t('billing.sections.overview.title')}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-sm text-slate-600">
|
||||
{t('billing.sections.overview.description')}
|
||||
</CardDescription>
|
||||
</div>
|
||||
<SectionCard className="mt-6 space-y-5">
|
||||
<SectionHeader
|
||||
eyebrow={t('billing.sections.overview.badge', 'Aktuelles Paket')}
|
||||
title={t('billing.sections.overview.title')}
|
||||
description={t('billing.sections.overview.description')}
|
||||
endSlot={(
|
||||
<Badge className={activePackage ? 'bg-pink-500/10 text-pink-700 dark:bg-pink-500/20 dark:text-pink-200' : 'bg-slate-200 text-slate-700 dark:bg-slate-800 dark:text-slate-200'}>
|
||||
{activePackage ? activePackage.package_name : t('billing.sections.overview.emptyBadge')}
|
||||
</Badge>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
)}
|
||||
/>
|
||||
{activePackage ? (
|
||||
<div className="space-y-4">
|
||||
{activeWarnings.length > 0 && (
|
||||
@@ -263,20 +258,15 @@ export default function BillingPage() {
|
||||
) : (
|
||||
<EmptyState message={t('billing.sections.overview.empty')} />
|
||||
)}
|
||||
</CardContent>
|
||||
</FrostedCard>
|
||||
</SectionCard>
|
||||
|
||||
<FrostedCard className="border border-white/20">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-xl text-slate-900">
|
||||
<Sparkles className="h-5 w-5 text-amber-500" />
|
||||
{t('billing.sections.packages.title')}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-sm text-slate-600">
|
||||
{t('billing.sections.packages.description')}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<SectionCard className="space-y-4">
|
||||
<SectionHeader
|
||||
eyebrow={t('billing.sections.packages.badge', 'Pakete')}
|
||||
title={t('billing.sections.packages.title')}
|
||||
description={t('billing.sections.packages.description')}
|
||||
/>
|
||||
<div className="space-y-3">
|
||||
{packages.length === 0 ? (
|
||||
<EmptyState message={t('billing.sections.packages.empty')} />
|
||||
) : (
|
||||
@@ -295,20 +285,16 @@ export default function BillingPage() {
|
||||
);
|
||||
})
|
||||
)}
|
||||
</CardContent>
|
||||
</FrostedCard>
|
||||
</div>
|
||||
</SectionCard>
|
||||
|
||||
<FrostedCard className="border border-white/20">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-xl text-slate-900">
|
||||
<Sparkles className="h-5 w-5 text-sky-500" />
|
||||
{t('billing.sections.transactions.title')}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-sm text-slate-600">
|
||||
{t('billing.sections.transactions.description')}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<SectionCard className="space-y-4">
|
||||
<SectionHeader
|
||||
eyebrow={t('billing.sections.transactions.badge', 'Transaktionen')}
|
||||
title={t('billing.sections.transactions.title')}
|
||||
description={t('billing.sections.transactions.description')}
|
||||
/>
|
||||
<div className="space-y-3">
|
||||
{transactions.length === 0 ? (
|
||||
<EmptyState message={t('billing.sections.transactions.empty')} />
|
||||
) : (
|
||||
@@ -341,8 +327,8 @@ export default function BillingPage() {
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</CardContent>
|
||||
</FrostedCard>
|
||||
</div>
|
||||
</SectionCard>
|
||||
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -27,6 +27,10 @@ import {
|
||||
FrostedSurface,
|
||||
tenantHeroPrimaryButtonClass,
|
||||
tenantHeroSecondaryButtonClass,
|
||||
SectionCard,
|
||||
SectionHeader,
|
||||
StatCarousel,
|
||||
ActionGrid,
|
||||
} from '../components/tenant';
|
||||
import type { ChecklistStep } from '../components/tenant';
|
||||
|
||||
@@ -267,6 +271,44 @@ export default function DashboardPage() {
|
||||
}, [summary, events]);
|
||||
|
||||
const primaryEventSlug = readiness.primaryEventSlug;
|
||||
const statItems = React.useMemo(
|
||||
() => ([
|
||||
{
|
||||
key: 'activeEvents',
|
||||
label: translate('overview.stats.activeEvents'),
|
||||
value: summary?.active_events ?? publishedEvents.length,
|
||||
hint: translate('overview.stats.publishedHint', { count: publishedEvents.length }),
|
||||
icon: <CalendarDays className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
key: 'newPhotos',
|
||||
label: translate('overview.stats.newPhotos'),
|
||||
value: summary?.new_photos ?? 0,
|
||||
icon: <Camera className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
key: 'taskProgress',
|
||||
label: translate('overview.stats.taskProgress'),
|
||||
value: `${Math.round(summary?.task_progress ?? 0)}%`,
|
||||
icon: <Users className="h-4 w-4" />,
|
||||
},
|
||||
activePackage
|
||||
? {
|
||||
key: 'package',
|
||||
label: translate('overview.stats.activePackage', 'Aktives Paket'),
|
||||
value: activePackage.package_name,
|
||||
icon: <PackageIcon className="h-4 w-4" />,
|
||||
}
|
||||
: null,
|
||||
].filter(Boolean) as {
|
||||
key: string;
|
||||
label: string;
|
||||
value: string | number;
|
||||
hint?: string;
|
||||
icon?: React.ReactNode;
|
||||
}[]),
|
||||
[summary, publishedEvents.length, translate, activePackage],
|
||||
);
|
||||
|
||||
const onboardingChecklist = React.useMemo<ChecklistStep[]>(() => {
|
||||
const steps: ChecklistStep[] = [
|
||||
@@ -428,7 +470,7 @@ export default function DashboardPage() {
|
||||
</Button>
|
||||
);
|
||||
const heroAside = (
|
||||
<FrostedSurface className="w-full rounded-2xl border-white/30 bg-white/90 p-5 text-slate-900 shadow-lg shadow-rose-300/20 backdrop-blur">
|
||||
<FrostedSurface className="w-full rounded-2xl border-slate-200 bg-white p-5 text-slate-900 shadow-lg shadow-rose-300/20 dark:border-white/20 dark:bg-white/10">
|
||||
<div className="flex items-center justify-between text-sm font-medium text-slate-700">
|
||||
<span>{onboardingCardTitle}</span>
|
||||
<span>
|
||||
@@ -441,32 +483,58 @@ export default function DashboardPage() {
|
||||
);
|
||||
const readinessCompleteLabel = translate('readiness.complete', 'Erledigt');
|
||||
const readinessPendingLabel = translate('readiness.pending', 'Noch offen');
|
||||
const quickActionItems = React.useMemo(
|
||||
() => [
|
||||
{
|
||||
key: 'create',
|
||||
label: translate('quickActions.createEvent.label'),
|
||||
description: translate('quickActions.createEvent.description'),
|
||||
icon: <Plus className="h-5 w-5" />,
|
||||
onClick: () => navigate(ADMIN_EVENT_CREATE_PATH),
|
||||
},
|
||||
{
|
||||
key: 'photos',
|
||||
label: translate('quickActions.moderatePhotos.label'),
|
||||
description: translate('quickActions.moderatePhotos.description'),
|
||||
icon: <Camera className="h-5 w-5" />,
|
||||
onClick: () => navigate(ADMIN_EVENTS_PATH),
|
||||
},
|
||||
{
|
||||
key: 'tasks',
|
||||
label: translate('quickActions.organiseTasks.label'),
|
||||
description: translate('quickActions.organiseTasks.description'),
|
||||
icon: <ClipboardList className="h-5 w-5" />,
|
||||
onClick: () => navigate(buildEngagementTabPath('tasks')),
|
||||
},
|
||||
{
|
||||
key: 'packages',
|
||||
label: translate('quickActions.managePackages.label'),
|
||||
description: translate('quickActions.managePackages.description'),
|
||||
icon: <Sparkles className="h-5 w-5" />,
|
||||
onClick: () => navigate(ADMIN_BILLING_PATH),
|
||||
},
|
||||
{
|
||||
key: 'marketing',
|
||||
label: marketingDashboardLabel,
|
||||
description: marketingDashboardDescription,
|
||||
icon: <ArrowUpRight className="h-5 w-5" />,
|
||||
onClick: () => window.location.assign('/dashboard'),
|
||||
},
|
||||
],
|
||||
[translate, navigate, marketingDashboardLabel, marketingDashboardDescription],
|
||||
);
|
||||
|
||||
const actions = (
|
||||
<>
|
||||
const layoutActions = (
|
||||
<Button
|
||||
className="bg-brand-rose text-white shadow-lg shadow-rose-400/40 hover:bg-[var(--brand-rose-strong)]"
|
||||
className="rounded-full bg-brand-rose px-4 text-white shadow-lg shadow-rose-400/40 hover:bg-[var(--brand-rose-strong)]"
|
||||
onClick={() => navigate(ADMIN_EVENT_CREATE_PATH)}
|
||||
>
|
||||
<Plus className="h-4 w-4" /> {translate('actions.newEvent')}
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => navigate(ADMIN_EVENTS_PATH)} className="border-brand-rose-soft text-brand-rose">
|
||||
<CalendarDays className="h-4 w-4" /> {translate('actions.allEvents')}
|
||||
</Button>
|
||||
{events.length === 0 && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => navigate(ADMIN_WELCOME_BASE_PATH)}
|
||||
className="border-brand-rose-soft text-brand-rose hover:bg-brand-rose-soft/40"
|
||||
>
|
||||
<Sparkles className="h-4 w-4" /> {translate('actions.guidedSetup')}
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<AdminLayout title={greetingTitle} subtitle={subtitle} actions={actions}>
|
||||
<AdminLayout title={greetingTitle} subtitle={subtitle} actions={layoutActions}>
|
||||
{errorMessage && (
|
||||
<Alert variant="destructive">
|
||||
<AlertTitle>{t('dashboard.alerts.errorTitle')}</AlertTitle>
|
||||
@@ -481,17 +549,17 @@ export default function DashboardPage() {
|
||||
<TenantHeroCard
|
||||
badge={heroBadge}
|
||||
title={greetingTitle}
|
||||
description={subtitle}
|
||||
supporting={[heroDescription, heroSupportingCopy]}
|
||||
description={heroDescription}
|
||||
supporting={[heroSupportingCopy]}
|
||||
primaryAction={heroPrimaryAction}
|
||||
secondaryAction={heroSecondaryAction}
|
||||
aside={heroAside}
|
||||
/>
|
||||
|
||||
{events.length === 0 && (
|
||||
<Card className="border-0 bg-brand-card shadow-brand-primary">
|
||||
<CardHeader className="space-y-3">
|
||||
<CardTitle className="flex items-center gap-2 text-xl text-slate-900">
|
||||
<Card className="border-none bg-white/90 shadow-lg shadow-rose-100/50">
|
||||
<CardHeader className="space-y-2">
|
||||
<CardTitle className="flex items-center gap-2 text-base font-semibold text-slate-900">
|
||||
<Sparkles className="h-5 w-5 text-brand-rose" />
|
||||
{translate('welcomeCard.title')}
|
||||
</CardTitle>
|
||||
@@ -499,14 +567,12 @@ export default function DashboardPage() {
|
||||
{translate('welcomeCard.summary')}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
||||
<div className="space-y-2 text-sm text-slate-600">
|
||||
<CardContent className="flex flex-col gap-3 text-sm text-slate-600">
|
||||
<p>{translate('welcomeCard.body1')}</p>
|
||||
<p>{translate('welcomeCard.body2')}</p>
|
||||
</div>
|
||||
<Button
|
||||
size="lg"
|
||||
className="rounded-full bg-rose-500 text-white shadow-lg shadow-rose-400/40 hover:bg-rose-500/90"
|
||||
size="sm"
|
||||
className="self-start rounded-full bg-brand-rose px-5 text-white shadow-md shadow-rose-300/40"
|
||||
onClick={() => navigate(ADMIN_WELCOME_BASE_PATH)}
|
||||
>
|
||||
{translate('welcomeCard.cta')}
|
||||
@@ -515,47 +581,19 @@ export default function DashboardPage() {
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Card className="border-0 bg-brand-card shadow-brand-primary">
|
||||
<CardHeader className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
|
||||
<div>
|
||||
<CardTitle className="flex items-center gap-2 text-xl text-slate-900">
|
||||
<Sparkles className="h-5 w-5 text-brand-rose" />
|
||||
{translate('overview.title')}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-sm text-slate-600">
|
||||
{translate('overview.description')}
|
||||
</CardDescription>
|
||||
</div>
|
||||
<SectionCard className="space-y-3">
|
||||
<SectionHeader
|
||||
eyebrow={translate('overview.title')}
|
||||
title={translate('overview.title')}
|
||||
description={translate('overview.description')}
|
||||
endSlot={(
|
||||
<Badge className="bg-brand-rose-soft text-brand-rose">
|
||||
{activePackage?.package_name ?? translate('overview.noPackage')}
|
||||
</Badge>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
<StatCard
|
||||
label={translate('overview.stats.activeEvents')}
|
||||
value={summary?.active_events ?? publishedEvents.length}
|
||||
hint={translate('overview.stats.publishedHint', { count: publishedEvents.length })}
|
||||
icon={<CalendarDays className="h-5 w-5 text-brand-rose" />}
|
||||
)}
|
||||
/>
|
||||
<StatCard
|
||||
label={translate('overview.stats.newPhotos')}
|
||||
value={summary?.new_photos ?? 0}
|
||||
icon={<Camera className="h-5 w-5 text-fuchsia-500" />}
|
||||
/>
|
||||
<StatCard
|
||||
label={translate('overview.stats.taskProgress')}
|
||||
value={`${Math.round(summary?.task_progress ?? 0)}%`}
|
||||
icon={<Users className="h-5 w-5 text-amber-500" />}
|
||||
/>
|
||||
{activePackage ? (
|
||||
<StatCard
|
||||
label={translate('overview.stats.activePackage')}
|
||||
value={activePackage.package_name}
|
||||
icon={<Sparkles className="h-5 w-5 text-sky-500" />}
|
||||
/>
|
||||
) : null}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<StatCarousel items={statItems} />
|
||||
</SectionCard>
|
||||
|
||||
{primaryEventLimits ? (
|
||||
<Card className="border-0 bg-brand-card shadow-brand-primary">
|
||||
@@ -627,48 +665,14 @@ export default function DashboardPage() {
|
||||
</Card>
|
||||
) : null}
|
||||
|
||||
<Card className="border-0 bg-brand-card shadow-brand-primary">
|
||||
<CardHeader className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-xl text-slate-900">{translate('quickActions.title')}</CardTitle>
|
||||
<CardDescription className="text-sm text-slate-600">
|
||||
{translate('quickActions.description')}
|
||||
</CardDescription>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<QuickAction
|
||||
icon={<Plus className="h-5 w-5" />}
|
||||
label={translate('quickActions.createEvent.label')}
|
||||
description={translate('quickActions.createEvent.description')}
|
||||
onClick={() => navigate(ADMIN_EVENT_CREATE_PATH)}
|
||||
<SectionCard className="space-y-3">
|
||||
<SectionHeader
|
||||
eyebrow={translate('quickActions.title')}
|
||||
title={translate('quickActions.title')}
|
||||
description={translate('quickActions.description')}
|
||||
/>
|
||||
<QuickAction
|
||||
icon={<Camera className="h-5 w-5" />}
|
||||
label={translate('quickActions.moderatePhotos.label')}
|
||||
description={translate('quickActions.moderatePhotos.description')}
|
||||
onClick={() => navigate(ADMIN_EVENTS_PATH)}
|
||||
/>
|
||||
<QuickAction
|
||||
icon={<Users className="h-5 w-5" />}
|
||||
label={translate('quickActions.organiseTasks.label')}
|
||||
description={translate('quickActions.organiseTasks.description')}
|
||||
onClick={() => navigate(buildEngagementTabPath('tasks'))}
|
||||
/>
|
||||
<QuickAction
|
||||
icon={<Sparkles className="h-5 w-5" />}
|
||||
label={translate('quickActions.managePackages.label')}
|
||||
description={translate('quickActions.managePackages.description')}
|
||||
onClick={() => navigate(ADMIN_BILLING_PATH)}
|
||||
/>
|
||||
<QuickAction
|
||||
icon={<ArrowUpRight className="h-5 w-5" />}
|
||||
label={marketingDashboardLabel}
|
||||
description={marketingDashboardDescription}
|
||||
onClick={() => window.location.assign('/dashboard')}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<ActionGrid items={quickActionItems} />
|
||||
</SectionCard>
|
||||
|
||||
<TenantOnboardingChecklistCard
|
||||
title={onboardingCardTitle}
|
||||
@@ -683,20 +687,20 @@ export default function DashboardPage() {
|
||||
fallbackActionLabel={onboardingFallbackCta}
|
||||
/>
|
||||
|
||||
<Card className="border-0 bg-brand-card shadow-brand-primary">
|
||||
<CardHeader className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
|
||||
<section className="space-y-4 rounded-3xl border border-slate-200 bg-white p-5 shadow-sm dark:border-white/10 dark:bg-white/5 dark:shadow-inner">
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-xl text-slate-900">{translate('upcoming.title')}</CardTitle>
|
||||
<CardDescription className="text-sm text-slate-600">
|
||||
{translate('upcoming.description')}
|
||||
</CardDescription>
|
||||
<p className="text-xs uppercase tracking-[0.35em] text-rose-500 dark:text-rose-200">
|
||||
{translate('upcoming.title')}
|
||||
</p>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-300">{translate('upcoming.description')}</p>
|
||||
</div>
|
||||
<Button variant="outline" onClick={() => navigate(ADMIN_SETTINGS_PATH)}>
|
||||
<Button variant="outline" size="sm" onClick={() => navigate(ADMIN_SETTINGS_PATH)}>
|
||||
<Settings className="h-4 w-4" />
|
||||
{translate('upcoming.settings')}
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{upcomingEvents.length === 0 ? (
|
||||
<EmptyState
|
||||
message={translate('upcoming.empty.message')}
|
||||
@@ -719,8 +723,8 @@ export default function DashboardPage() {
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)}
|
||||
</AdminLayout>
|
||||
@@ -933,30 +937,6 @@ function StatCard({
|
||||
);
|
||||
}
|
||||
|
||||
function QuickAction({
|
||||
icon,
|
||||
label,
|
||||
description,
|
||||
onClick,
|
||||
}: {
|
||||
icon: React.ReactNode;
|
||||
label: string;
|
||||
description: string;
|
||||
onClick: () => void;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className="group flex flex-col items-start gap-2 rounded-2xl border border-slate-100 bg-white/85 p-4 text-left shadow-sm transition duration-200 ease-out hover:-translate-y-0.5 hover:border-brand-rose-soft hover:shadow-md focus:outline-none focus:ring-2 focus:ring-brand-rose/40 dark:border-slate-800/70 dark:bg-slate-950/80"
|
||||
>
|
||||
<span className="rounded-full bg-brand-rose-soft p-2 text-brand-rose shadow-sm shadow-rose-200/60 transition-transform duration-200 group-hover:scale-105">{icon}</span>
|
||||
<span className="text-sm font-semibold text-slate-900 dark:text-slate-100">{label}</span>
|
||||
<span className="text-xs text-slate-600 dark:text-slate-400">{description}</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function UpcomingEventRow({
|
||||
event,
|
||||
onView,
|
||||
@@ -979,7 +959,7 @@ function UpcomingEventRow({
|
||||
: labels.noDate;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2 rounded-2xl border border-sky-100 bg-white/90 p-4 shadow-sm sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="flex flex-col gap-2 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm shadow-white/30 dark:border-white/10 dark:bg-white/5 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-xs font-medium uppercase tracking-wide text-slate-500">{formattedDate}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
@@ -990,7 +970,7 @@ function UpcomingEventRow({
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={onView}
|
||||
className="border-brand-rose-soft text-brand-rose hover:bg-brand-rose-soft/40"
|
||||
className="rounded-full border-brand-rose-soft text-brand-rose hover:bg-brand-rose-soft/40"
|
||||
>
|
||||
{labels.open}
|
||||
</Button>
|
||||
|
||||
@@ -9,11 +9,16 @@ import { AdminLayout } from '../components/AdminLayout';
|
||||
import { CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import {
|
||||
TenantHeroCard,
|
||||
FrostedCard,
|
||||
TenantOnboardingChecklistCard,
|
||||
FrostedSurface,
|
||||
tenantHeroPrimaryButtonClass,
|
||||
tenantHeroSecondaryButtonClass,
|
||||
SectionCard,
|
||||
SectionHeader,
|
||||
StatCarousel,
|
||||
ActionGrid,
|
||||
} from '../components/tenant';
|
||||
import { getDashboardSummary } from '../api';
|
||||
import { TasksSection } from './TasksPage';
|
||||
import { TaskCollectionsSection } from './TaskCollectionsPage';
|
||||
import { EmotionsSection } from './EmotionsPage';
|
||||
@@ -32,6 +37,7 @@ export default function EngagementPage() {
|
||||
const { t } = useTranslation('management');
|
||||
const { t: tc } = useTranslation('common');
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const [engagementStats, setEngagementStats] = React.useState<{ tasks?: number; collections?: number; emotions?: number } | null>(null);
|
||||
|
||||
const initialTab = React.useMemo(() => ensureValidTab(searchParams.get('tab')), [searchParams]);
|
||||
const [activeTab, setActiveTab] = React.useState<EngagementTab>(initialTab);
|
||||
@@ -48,6 +54,22 @@ export default function EngagementPage() {
|
||||
},
|
||||
[setSearchParams]
|
||||
);
|
||||
React.useEffect(() => {
|
||||
let cancelled = false;
|
||||
(async () => {
|
||||
try {
|
||||
const summary = await getDashboardSummary();
|
||||
if (!cancelled && summary?.engagement_totals) {
|
||||
setEngagementStats(summary.engagement_totals);
|
||||
}
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
})();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const heading = tc('navigation.engagement');
|
||||
const heroDescription = t('engagement.hero.description', {
|
||||
@@ -76,7 +98,7 @@ export default function EngagementPage() {
|
||||
</Button>
|
||||
);
|
||||
const heroAside = (
|
||||
<FrostedSurface className="space-y-4 border-white/20 p-5 text-slate-900 shadow-md shadow-rose-300/20 dark:border-slate-800/70 dark:bg-slate-950/80">
|
||||
<FrostedSurface className="space-y-4 border-slate-200 p-5 text-slate-900 shadow-md shadow-rose-300/20 dark:border-white/20 dark:bg-white/10">
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400">{t('engagement.hero.activeTab', { defaultValue: 'Aktiver Bereich' })}</p>
|
||||
<p className="mt-2 text-lg font-semibold text-slate-900 dark:text-slate-100">{t(`engagement.tabs.${activeTab}.title`, { defaultValue: tc(`navigation.${activeTab}`) })}</p>
|
||||
@@ -102,11 +124,53 @@ export default function EngagementPage() {
|
||||
aside={heroAside}
|
||||
/>
|
||||
|
||||
<FrostedCard className="mt-6 border border-white/20">
|
||||
<CardHeader className="px-0 pt-0">
|
||||
<CardTitle className="sr-only">{heading}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<SectionCard className="mt-6 space-y-6">
|
||||
<SectionHeader
|
||||
eyebrow={t('engagement.sections.active.badge', 'Active Toolkit')}
|
||||
title={t('engagement.sections.active.title', 'Aufgaben & Co.')}
|
||||
description={t('engagement.sections.active.description', 'Verwalte Aufgaben, Kollektionen und Emotionen an einem Ort.')}
|
||||
/>
|
||||
<StatCarousel
|
||||
items={[
|
||||
{
|
||||
key: 'tasks',
|
||||
label: t('engagement.stats.tasks', 'Aufgaben'),
|
||||
value: engagementStats?.tasks ?? '—',
|
||||
},
|
||||
{
|
||||
key: 'collections',
|
||||
label: t('engagement.stats.collections', 'Kollektionen'),
|
||||
value: engagementStats?.collections ?? '—',
|
||||
},
|
||||
{
|
||||
key: 'emotions',
|
||||
label: t('engagement.stats.emotions', 'Emotionen'),
|
||||
value: engagementStats?.emotions ?? '—',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ActionGrid
|
||||
items={[
|
||||
{
|
||||
key: 'newTask',
|
||||
label: t('engagement.actions.newTask', 'Neue Aufgabe'),
|
||||
description: t('engagement.actions.newTask.description', 'Starte mit einer neuen Idee oder Vorlage.'),
|
||||
onClick: () => handleTabChange('tasks'),
|
||||
},
|
||||
{
|
||||
key: 'collection',
|
||||
label: t('engagement.actions.collection', 'Kollektion bauen'),
|
||||
description: t('engagement.actions.collection.description', 'Fasse Aufgaben zu Events zusammen.'),
|
||||
onClick: () => handleTabChange('collections'),
|
||||
},
|
||||
{
|
||||
key: 'emotion',
|
||||
label: t('engagement.actions.emotion', 'Emotion hinzufügen'),
|
||||
description: t('engagement.actions.emotion.description', 'Markiere Momente zur Moderation.'),
|
||||
onClick: () => handleTabChange('emotions'),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<Tabs value={activeTab} onValueChange={handleTabChange} className="space-y-6">
|
||||
<TabsList className="grid w-full grid-cols-3 rounded-2xl border border-white/25 bg-white/80 p-1 shadow-inner shadow-rose-200/20 dark:border-slate-800/70 dark:bg-slate-900/70">
|
||||
{(['tasks', 'collections', 'emotions'] as const).map((tab) => (
|
||||
@@ -132,8 +196,7 @@ export default function EngagementPage() {
|
||||
<EmotionsSection embedded />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</CardContent>
|
||||
</FrostedCard>
|
||||
</SectionCard>
|
||||
</AdminLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -37,6 +37,7 @@ import {
|
||||
getEventToolkit,
|
||||
toggleEvent,
|
||||
submitTenantFeedback,
|
||||
updatePhotoVisibility,
|
||||
} from '../api';
|
||||
import { buildLimitWarnings } from '../lib/limitWarnings';
|
||||
import { getApiErrorMessage } from '../lib/apiError';
|
||||
@@ -49,6 +50,11 @@ import {
|
||||
ADMIN_EVENT_PHOTOS_PATH,
|
||||
ADMIN_EVENT_TASKS_PATH,
|
||||
} from '../constants';
|
||||
import {
|
||||
SectionCard,
|
||||
SectionHeader,
|
||||
ActionGrid,
|
||||
} from '../components/tenant';
|
||||
|
||||
type EventDetailPageProps = {
|
||||
mode?: 'detail' | 'toolkit';
|
||||
@@ -203,11 +209,11 @@ export default function EventDetailPage({ mode = 'detail' }: EventDetailPageProp
|
||||
if (!slug) {
|
||||
return (
|
||||
<AdminLayout title={t('events.errors.notFoundTitle', 'Event nicht gefunden')} subtitle={t('events.errors.notFoundCopy', 'Bitte wähle ein Event aus der Übersicht.')} actions={actions}>
|
||||
<Card className="border-0 bg-white/85 shadow-xl shadow-pink-100/60">
|
||||
<CardContent className="p-6 text-sm text-slate-600">
|
||||
<SectionCard>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-300">
|
||||
{t('events.errors.notFoundBody', 'Ohne gültige Kennung können wir keine Daten laden. Kehre zur Eventliste zurück und wähle dort ein Event aus.')}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</p>
|
||||
</SectionCard>
|
||||
</AdminLayout>
|
||||
);
|
||||
}
|
||||
@@ -294,20 +300,21 @@ export default function EventDetailPage({ mode = 'detail' }: EventDetailPageProp
|
||||
|
||||
<div className="grid gap-6 xl:grid-cols-[minmax(0,1.4fr)_minmax(0,0.8fr)]">
|
||||
<PendingPhotosCard
|
||||
slug={event.slug}
|
||||
photos={toolkitData?.photos.pending ?? []}
|
||||
navigateToModeration={() => navigate(ADMIN_EVENT_PHOTOS_PATH(event.slug))}
|
||||
/>
|
||||
<RecentUploadsCard photos={toolkitData?.photos.recent ?? []} />
|
||||
<RecentUploadsCard slug={event.slug} photos={toolkitData?.photos.recent ?? []} />
|
||||
</div>
|
||||
|
||||
<FeedbackCard slug={event.slug} />
|
||||
</div>
|
||||
) : (
|
||||
<Card className="border-0 bg-white/90 shadow-xl shadow-pink-100/60">
|
||||
<CardContent className="p-6 text-sm text-slate-600">
|
||||
<SectionCard>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-300">
|
||||
{t('events.errors.notFoundBody', 'Ohne gültige Kennung können wir keine Daten laden. Kehre zur Eventliste zurück und wähle dort ein Event aus.')}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</p>
|
||||
</SectionCard>
|
||||
)}
|
||||
</AdminLayout>
|
||||
);
|
||||
@@ -335,17 +342,13 @@ function StatusCard({ event, stats, busy, onToggle }: { event: TenantEvent; stat
|
||||
: t('events.status.archived', 'Archiviert');
|
||||
|
||||
return (
|
||||
<Card className="border-0 bg-white/90 shadow-xl shadow-pink-100/60">
|
||||
<CardHeader className="space-y-2">
|
||||
<CardTitle className="flex items-center gap-2 text-xl text-slate-900">
|
||||
<Sparkles className="h-5 w-5 text-pink-500" />
|
||||
{t('events.workspace.sections.statusTitle', 'Eventstatus & Sichtbarkeit')}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-sm text-slate-600">
|
||||
{t('events.workspace.sections.statusSubtitle', 'Aktiviere dein Event für Gäste oder verstecke es vorübergehend.')}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4 text-sm text-slate-700">
|
||||
<SectionCard className="space-y-4">
|
||||
<SectionHeader
|
||||
eyebrow={t('events.workspace.sections.statusBadge', 'Status')}
|
||||
title={t('events.workspace.sections.statusTitle', 'Eventstatus & Sichtbarkeit')}
|
||||
description={t('events.workspace.sections.statusSubtitle', 'Aktiviere dein Event für Gäste oder verstecke es vorübergehend.')}
|
||||
/>
|
||||
<div className="space-y-4 text-sm text-slate-700 dark:text-slate-300">
|
||||
<InfoRow icon={<Sparkles className="h-4 w-4 text-pink-500" />} label={t('events.workspace.fields.status', 'Status')} value={statusLabel} />
|
||||
<InfoRow icon={<Circle className="h-4 w-4 text-amber-500" />} label={t('events.workspace.fields.active', 'Aktiv für Gäste')} value={event.is_active ? t('events.workspace.activeYes', 'Ja') : t('events.workspace.activeNo', 'Nein')} />
|
||||
<InfoRow icon={<CalendarIcon />} label={t('events.workspace.fields.date', 'Eventdatum')} value={formatDate(event.event_date)} />
|
||||
@@ -380,88 +383,67 @@ function StatusCard({ event, stats, busy, onToggle }: { event: TenantEvent; stat
|
||||
{event.is_active ? t('events.workspace.actions.pause', 'Event pausieren') : t('events.workspace.actions.activate', 'Event aktivieren')}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</SectionCard>
|
||||
);
|
||||
}
|
||||
|
||||
function QuickActionsCard({ slug, busy, onToggle, navigate }: { slug: string; busy: boolean; onToggle: () => void | Promise<void>; navigate: ReturnType<typeof useNavigate> }) {
|
||||
const { t } = useTranslation('management');
|
||||
|
||||
const actions = [
|
||||
const gridItems = [
|
||||
{
|
||||
key: 'photos',
|
||||
icon: <Camera className="h-4 w-4" />,
|
||||
label: t('events.quickActions.moderate', 'Fotos moderieren'),
|
||||
description: t('events.quickActions.moderateDesc', 'Prüfe Uploads und veröffentliche Highlights.'),
|
||||
onClick: () => navigate(ADMIN_EVENT_PHOTOS_PATH(slug)),
|
||||
},
|
||||
{
|
||||
key: 'tasks',
|
||||
icon: <Sparkles className="h-4 w-4" />,
|
||||
label: t('events.quickActions.tasks', 'Aufgaben bearbeiten'),
|
||||
description: t('events.quickActions.tasksDesc', 'Passe Story-Prompts und Moderation an.'),
|
||||
onClick: () => navigate(ADMIN_EVENT_TASKS_PATH(slug)),
|
||||
},
|
||||
{
|
||||
key: 'invites',
|
||||
icon: <QrCode className="h-4 w-4" />,
|
||||
label: t('events.quickActions.invites', 'Layouts & QR verwalten'),
|
||||
description: t('events.quickActions.invitesDesc', 'Aktualisiere QR-Kits und Einladungslayouts.'),
|
||||
onClick: () => navigate(`${ADMIN_EVENT_INVITES_PATH(slug)}?tab=layout`),
|
||||
},
|
||||
{
|
||||
key: 'roles',
|
||||
icon: <Users className="h-4 w-4" />,
|
||||
label: t('events.quickActions.roles', 'Team & Rollen anpassen'),
|
||||
description: t('events.quickActions.rolesDesc', 'Verwalte Moderatoren und Co-Leads.'),
|
||||
onClick: () => navigate(ADMIN_EVENT_MEMBERS_PATH(slug)),
|
||||
},
|
||||
{
|
||||
key: 'print',
|
||||
icon: <Printer className="h-4 w-4" />,
|
||||
label: t('events.quickActions.print', 'Layouts als PDF drucken'),
|
||||
description: t('events.quickActions.printDesc', 'Exportiere QR-Sets für den Druck.'),
|
||||
onClick: () => navigate(`${ADMIN_EVENT_INVITES_PATH(slug)}?tab=export`),
|
||||
},
|
||||
{
|
||||
icon: <CheckCircle2 className="h-4 w-4" />,
|
||||
label: t('events.quickActions.toggle', 'Status ändern'),
|
||||
onClick: () => { void onToggle(); },
|
||||
disabled: busy,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Card className="border-0 bg-white/90 shadow-xl shadow-violet-100/60">
|
||||
<CardHeader className="space-y-1">
|
||||
<CardTitle className="flex items-center gap-2 text-lg text-slate-900">
|
||||
<Sparkles className="h-5 w-5 text-violet-500" />
|
||||
{t('events.quickActions.title', 'Schnellaktionen')}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-sm text-slate-600">
|
||||
{t('events.quickActions.subtitle', 'Nutze die wichtigsten Schritte vor und während deines Events.')}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
{actions.map((action, index) => (
|
||||
<button
|
||||
key={index}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (action.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const result = action.onClick();
|
||||
if (result instanceof Promise) {
|
||||
void result;
|
||||
}
|
||||
}}
|
||||
disabled={action.disabled}
|
||||
className="flex w-full items-center justify-between rounded-lg border border-slate-200 bg-white px-4 py-3 text-left text-sm text-slate-700 transition hover:border-violet-200 hover:bg-violet-50 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-violet-100 text-violet-600">
|
||||
{action.icon}
|
||||
</span>
|
||||
{action.label}
|
||||
</span>
|
||||
<ChevronRight className="h-4 w-4 text-slate-400" />
|
||||
</button>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<SectionCard className="space-y-4">
|
||||
<SectionHeader
|
||||
eyebrow={t('events.quickActions.badge', 'Schnellaktionen')}
|
||||
title={t('events.quickActions.title', 'Schnellaktionen')}
|
||||
description={t('events.quickActions.subtitle', 'Nutze die wichtigsten Schritte vor und während deines Events.')}
|
||||
/>
|
||||
<ActionGrid items={gridItems} columns={1} />
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button onClick={() => { void onToggle(); }} disabled={busy} variant="outline" className="rounded-full border-rose-200 text-rose-600 hover:bg-rose-50">
|
||||
{busy ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <CheckCircle2 className="mr-2 h-4 w-4" />}
|
||||
{t('events.quickActions.toggle', 'Status ändern')}
|
||||
</Button>
|
||||
</div>
|
||||
</SectionCard>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -493,16 +475,18 @@ function MetricsGrid({ metrics, stats }: { metrics: EventToolkit['metrics'] | nu
|
||||
|
||||
return (
|
||||
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
||||
{cards.map((card, index) => (
|
||||
<Card key={index} className="border-0 bg-white/90 shadow-md shadow-slate-100/60">
|
||||
<CardContent className="flex items-center gap-4 p-5">
|
||||
<span className="flex h-12 w-12 items-center justify-center rounded-full bg-slate-100">{card.icon}</span>
|
||||
{cards.map((card) => (
|
||||
<SectionCard key={card.label} className="p-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="flex h-12 w-12 items-center justify-center rounded-full bg-slate-100 dark:bg-white/10">
|
||||
{card.icon}
|
||||
</span>
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wide text-slate-500">{card.label}</p>
|
||||
<p className="text-2xl font-semibold text-slate-900">{card.value}</p>
|
||||
<p className="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">{card.label}</p>
|
||||
<p className="text-2xl font-semibold text-slate-900 dark:text-white">{card.value}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</SectionCard>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
@@ -512,22 +496,18 @@ function InviteSummary({ invites, navigateToInvites }: { invites: EventToolkit['
|
||||
const { t } = useTranslation('management');
|
||||
|
||||
return (
|
||||
<Card className="border-0 bg-white/90 shadow-md shadow-amber-100/60">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-lg text-slate-900">
|
||||
<QrCode className="h-5 w-5 text-amber-500" />
|
||||
{t('events.invites.title', 'QR-Einladungen')}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-sm text-slate-600">
|
||||
{t('events.invites.subtitle', 'Behält aktive Einladungen und Layouts im Blick.')}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3 text-sm text-slate-700">
|
||||
<SectionCard className="space-y-3">
|
||||
<SectionHeader
|
||||
eyebrow={t('events.invites.badge', 'Einladungen')}
|
||||
title={t('events.invites.title', 'QR-Einladungen')}
|
||||
description={t('events.invites.subtitle', 'Behält aktive Einladungen und Layouts im Blick.')}
|
||||
/>
|
||||
<div className="space-y-3 text-sm text-slate-700 dark:text-slate-300">
|
||||
<div className="flex gap-2 text-sm text-slate-900">
|
||||
<Badge variant="outline" className="border-amber-200 text-amber-700">
|
||||
<Badge variant="outline" className="border-amber-200 text-amber-700 dark:border-amber-500/30 dark:text-amber-200">
|
||||
{t('events.invites.activeCount', { defaultValue: '{{count}} aktiv', count: invites?.summary.active ?? 0 })}
|
||||
</Badge>
|
||||
<Badge variant="outline" className="border-amber-200 text-amber-700">
|
||||
<Badge variant="outline" className="border-amber-200 text-amber-700 dark:border-amber-500/30 dark:text-amber-200">
|
||||
{t('events.invites.totalCount', { defaultValue: '{{count}} gesamt', count: invites?.summary.total ?? 0 })}
|
||||
</Badge>
|
||||
</div>
|
||||
@@ -548,8 +528,8 @@ function InviteSummary({ invites, navigateToInvites }: { invites: EventToolkit['
|
||||
<Button variant="outline" onClick={navigateToInvites} className="border-amber-200 text-amber-700 hover:bg-amber-50">
|
||||
<QrCode className="mr-2 h-4 w-4" /> {t('events.invites.manage', 'Layouts & Einladungen verwalten')}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</SectionCard>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -557,26 +537,22 @@ function TaskOverviewCard({ tasks, navigateToTasks }: { tasks: EventToolkit['tas
|
||||
const { t } = useTranslation('management');
|
||||
|
||||
return (
|
||||
<Card className="border-0 bg-white/90 shadow-md shadow-pink-100/60">
|
||||
<CardHeader className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
|
||||
<div>
|
||||
<CardTitle className="flex items-center gap-2 text-xl text-slate-900">
|
||||
<Sparkles className="h-5 w-5 text-pink-500" />
|
||||
{t('events.tasks.title', 'Aktive Aufgaben')}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-sm text-slate-600">
|
||||
{t('events.tasks.subtitle', 'Motiviere Gäste mit klaren Aufgaben & Highlights.')}
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Badge variant="outline" className="border-pink-200 text-pink-600">
|
||||
<SectionCard className="space-y-3">
|
||||
<SectionHeader
|
||||
eyebrow={t('events.tasks.badge', 'Aufgaben')}
|
||||
title={t('events.tasks.title', 'Aktive Aufgaben')}
|
||||
description={t('events.tasks.subtitle', 'Motiviere Gäste mit klaren Aufgaben & Highlights.')}
|
||||
endSlot={(
|
||||
<Badge variant="outline" className="border-pink-200 text-pink-600 dark:border-pink-500/30 dark:text-pink-200">
|
||||
{t('events.tasks.summary', {
|
||||
defaultValue: '{{completed}} von {{total}} erledigt',
|
||||
completed: tasks?.summary.completed ?? 0,
|
||||
total: tasks?.summary.total ?? 0,
|
||||
})}
|
||||
</Badge>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3 text-sm text-slate-700">
|
||||
)}
|
||||
/>
|
||||
<div className="space-y-3 text-sm text-slate-700 dark:text-slate-300">
|
||||
{tasks?.items?.length ? (
|
||||
<div className="space-y-2">
|
||||
{tasks.items.slice(0, 4).map((task) => (
|
||||
@@ -590,8 +566,8 @@ function TaskOverviewCard({ tasks, navigateToTasks }: { tasks: EventToolkit['tas
|
||||
<Button variant="outline" onClick={navigateToTasks} className="border-pink-200 text-pink-600 hover:bg-pink-50">
|
||||
<Sparkles className="mr-2 h-4 w-4" /> {t('events.tasks.manage', 'Aufgabenbereich öffnen')}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</SectionCard>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -609,31 +585,81 @@ function TaskRow({ task }: { task: EventToolkitTask }) {
|
||||
);
|
||||
}
|
||||
|
||||
function PendingPhotosCard({ photos, navigateToModeration }: { photos: TenantPhoto[]; navigateToModeration: () => void }) {
|
||||
function PendingPhotosCard({
|
||||
slug,
|
||||
photos,
|
||||
navigateToModeration,
|
||||
}: {
|
||||
slug: string;
|
||||
photos: TenantPhoto[];
|
||||
navigateToModeration: () => void;
|
||||
}) {
|
||||
const { t } = useTranslation('management');
|
||||
const [entries, setEntries] = React.useState(photos);
|
||||
const [updatingId, setUpdatingId] = React.useState<number | null>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
setEntries(photos);
|
||||
}, [photos]);
|
||||
|
||||
const handleVisibility = async (photo: TenantPhoto, visible: boolean) => {
|
||||
setUpdatingId(photo.id);
|
||||
try {
|
||||
const updated = await updatePhotoVisibility(slug, photo.id, visible);
|
||||
setEntries((prev) => prev.map((item) => (item.id === photo.id ? updated : item)));
|
||||
toast.success(
|
||||
visible
|
||||
? t('events.photos.toastVisible', 'Foto wieder sichtbar gemacht.')
|
||||
: t('events.photos.toastHidden', 'Foto ausgeblendet.'),
|
||||
);
|
||||
} catch (err) {
|
||||
toast.error(
|
||||
isAuthError(err)
|
||||
? t('events.photos.errorAuth', 'Session abgelaufen. Bitte erneut anmelden.')
|
||||
: t('events.photos.errorVisibility', 'Sichtbarkeit konnte nicht geändert werden.'),
|
||||
);
|
||||
} finally {
|
||||
setUpdatingId(null);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="border-0 bg-white/90 shadow-md shadow-slate-100/60">
|
||||
<CardHeader className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
|
||||
<div>
|
||||
<CardTitle className="flex items-center gap-2 text-lg text-slate-900">
|
||||
<Camera className="h-5 w-5 text-emerald-500" />
|
||||
{t('events.photos.pendingTitle', 'Fotos in Moderation')}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-sm text-slate-600">
|
||||
{t('events.photos.pendingSubtitle', 'Schnell prüfen, bevor Gäste live gehen.')}
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Badge variant="outline" className="border-emerald-200 text-emerald-600">
|
||||
{t('events.photos.pendingCount', { defaultValue: '{{count}} Fotos offen', count: photos.length })}
|
||||
<SectionCard className="space-y-3">
|
||||
<SectionHeader
|
||||
eyebrow={t('events.photos.pendingBadge', 'Moderation')}
|
||||
title={t('events.photos.pendingTitle', 'Fotos in Moderation')}
|
||||
description={t('events.photos.pendingSubtitle', 'Schnell prüfen, bevor Gäste live gehen.')}
|
||||
endSlot={(
|
||||
<Badge variant="outline" className="border-emerald-200 text-emerald-600 dark:border-emerald-500/30 dark:text-emerald-200">
|
||||
{t('events.photos.pendingCount', { defaultValue: '{{count}} Fotos offen', count: entries.length })}
|
||||
</Badge>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3 text-sm text-slate-700">
|
||||
{photos.length ? (
|
||||
)}
|
||||
/>
|
||||
<div className="space-y-3 text-sm text-slate-700 dark:text-slate-300">
|
||||
{entries.length ? (
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{photos.slice(0, 6).map((photo) => (
|
||||
<img key={photo.id} src={photo.thumbnail_url ?? photo.url} alt={photo.caption ?? 'Foto'} className="h-24 w-full rounded-lg object-cover" />
|
||||
))}
|
||||
{entries.slice(0, 6).map((photo) => {
|
||||
const hidden = photo.status === 'hidden';
|
||||
return (
|
||||
<div key={photo.id} className="relative">
|
||||
<img
|
||||
src={photo.thumbnail_url ?? photo.url}
|
||||
alt={photo.caption ?? 'Foto'}
|
||||
className={`h-24 w-full rounded-lg object-cover ${hidden ? 'opacity-60' : ''}`}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleVisibility(photo, hidden)}
|
||||
disabled={updatingId === photo.id}
|
||||
className="absolute inset-x-2 bottom-2 rounded-full bg-white/90 px-2 py-1 text-[11px] font-semibold text-slate-700 shadow disabled:opacity-60"
|
||||
>
|
||||
{hidden
|
||||
? t('events.photos.show', 'Einblenden')
|
||||
: t('events.photos.hide', 'Ausblenden')}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-xs text-slate-500">{t('events.photos.pendingEmpty', 'Aktuell warten keine Fotos auf Freigabe.')}</p>
|
||||
@@ -642,37 +668,79 @@ function PendingPhotosCard({ photos, navigateToModeration }: { photos: TenantPho
|
||||
<Button variant="outline" onClick={navigateToModeration} className="border-emerald-200 text-emerald-600 hover:bg-emerald-50">
|
||||
<Camera className="mr-2 h-4 w-4" /> {t('events.photos.openModeration', 'Moderation öffnen')}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</SectionCard>
|
||||
);
|
||||
}
|
||||
|
||||
function RecentUploadsCard({ photos }: { photos: TenantPhoto[] }) {
|
||||
function RecentUploadsCard({ slug, photos }: { slug: string; photos: TenantPhoto[] }) {
|
||||
const { t } = useTranslation('management');
|
||||
const [entries, setEntries] = React.useState(photos);
|
||||
const [updatingId, setUpdatingId] = React.useState<number | null>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
setEntries(photos);
|
||||
}, [photos]);
|
||||
|
||||
const handleVisibility = async (photo: TenantPhoto, visible: boolean) => {
|
||||
setUpdatingId(photo.id);
|
||||
try {
|
||||
const updated = await updatePhotoVisibility(slug, photo.id, visible);
|
||||
setEntries((prev) => prev.map((item) => (item.id === photo.id ? updated : item)));
|
||||
toast.success(
|
||||
visible
|
||||
? t('events.photos.toastVisible', 'Foto wieder sichtbar gemacht.')
|
||||
: t('events.photos.toastHidden', 'Foto ausgeblendet.'),
|
||||
);
|
||||
} catch (err) {
|
||||
toast.error(
|
||||
isAuthError(err)
|
||||
? t('events.photos.errorAuth', 'Session abgelaufen. Bitte erneut anmelden.')
|
||||
: t('events.photos.errorVisibility', 'Sichtbarkeit konnte nicht geändert werden.'),
|
||||
);
|
||||
} finally {
|
||||
setUpdatingId(null);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="border-0 bg-white/90 shadow-md shadow-slate-100/60">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-lg text-slate-900">
|
||||
<Camera className="h-5 w-5 text-sky-500" />
|
||||
{t('events.photos.recentTitle', 'Neueste Uploads')}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-sm text-slate-600">
|
||||
{t('events.photos.recentSubtitle', 'Halte Ausschau nach Highlight-Momenten der Gäste.')}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2 text-sm text-slate-700">
|
||||
{photos.length ? (
|
||||
<SectionCard className="space-y-3">
|
||||
<SectionHeader
|
||||
eyebrow={t('events.photos.recentBadge', 'Uploads')}
|
||||
title={t('events.photos.recentTitle', 'Neueste Uploads')}
|
||||
description={t('events.photos.recentSubtitle', 'Halte Ausschau nach Highlight-Momenten der Gäste.')}
|
||||
/>
|
||||
<div className="space-y-2 text-sm text-slate-700 dark:text-slate-300">
|
||||
{entries.length ? (
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{photos.slice(0, 6).map((photo) => (
|
||||
<img key={photo.id} src={photo.thumbnail_url ?? photo.url} alt={photo.caption ?? 'Foto'} className="h-24 w-full rounded-lg object-cover" />
|
||||
))}
|
||||
{entries.slice(0, 6).map((photo) => {
|
||||
const hidden = photo.status === 'hidden';
|
||||
return (
|
||||
<div key={photo.id} className="relative">
|
||||
<img
|
||||
src={photo.thumbnail_url ?? photo.url}
|
||||
alt={photo.caption ?? 'Foto'}
|
||||
className={`h-24 w-full rounded-lg object-cover ${hidden ? 'opacity-60' : ''}`}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleVisibility(photo, hidden)}
|
||||
disabled={updatingId === photo.id}
|
||||
className="absolute inset-x-2 bottom-2 rounded-full bg-white/90 px-2 py-1 text-[11px] font-semibold text-slate-700 shadow disabled:opacity-60"
|
||||
>
|
||||
{hidden
|
||||
? t('events.photos.show', 'Einblenden')
|
||||
: t('events.photos.hide', 'Ausblenden')}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-xs text-slate-500">{t('events.photos.recentEmpty', 'Noch keine neuen Uploads.')}</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</SectionCard>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -691,17 +759,13 @@ function FeedbackCard({ slug }: { slug: string }) {
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="border-0 bg-white/90 shadow-md shadow-slate-100/60">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-lg text-slate-900">
|
||||
<MessageSquare className="h-5 w-5 text-slate-500" />
|
||||
{t('events.feedback.title', 'Wie läuft dein Event?')}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-sm text-slate-600">
|
||||
{t('events.feedback.subtitle', 'Feedback hilft uns, neue Features zu priorisieren.')}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<SectionCard className="space-y-4">
|
||||
<SectionHeader
|
||||
eyebrow={t('events.feedback.badge', 'Feedback')}
|
||||
title={t('events.feedback.title', 'Wie läuft dein Event?')}
|
||||
description={t('events.feedback.subtitle', 'Feedback hilft uns, neue Features zu priorisieren.')}
|
||||
/>
|
||||
<div className="space-y-4">
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertTitle>{t('events.feedback.errorTitle', 'Feedback konnte nicht gesendet werden.')}</AlertTitle>
|
||||
@@ -758,8 +822,8 @@ function FeedbackCard({ slug }: { slug: string }) {
|
||||
>
|
||||
{busy ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <MessageSquare className="mr-2 h-4 w-4" />} {submitted ? t('events.feedback.submitted', 'Danke!') : t('events.feedback.submit', 'Feedback senden')}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</SectionCard>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,18 +1,21 @@
|
||||
import React from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import { AlertTriangle, ArrowRight, CalendarDays, Plus, Share2 } from 'lucide-react';
|
||||
import { AlertTriangle, ArrowRight, CalendarDays, Camera, Heart, Plus } from 'lucide-react';
|
||||
|
||||
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import {
|
||||
TenantHeroCard,
|
||||
FrostedCard,
|
||||
FrostedSurface,
|
||||
tenantHeroPrimaryButtonClass,
|
||||
tenantHeroSecondaryButtonClass,
|
||||
SectionCard,
|
||||
SectionHeader,
|
||||
StatCarousel,
|
||||
ActionGrid,
|
||||
} from '../components/tenant';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
import { AdminLayout } from '../components/AdminLayout';
|
||||
import { getEvents, TenantEvent } from '../api';
|
||||
@@ -66,6 +69,56 @@ export default function EventsPage() {
|
||||
tCommon(key, { defaultValue: fallback, ...(options ?? {}) }),
|
||||
[tCommon],
|
||||
);
|
||||
const statItems = React.useMemo(
|
||||
() => [
|
||||
{
|
||||
key: 'total',
|
||||
label: t('events.list.stats.total', 'Events gesamt'),
|
||||
value: totalEvents,
|
||||
},
|
||||
{
|
||||
key: 'published',
|
||||
label: t('events.list.stats.published', 'Veröffentlicht'),
|
||||
value: publishedEvents,
|
||||
},
|
||||
{
|
||||
key: 'drafts',
|
||||
label: t('events.list.stats.drafts', 'Entwürfe'),
|
||||
value: Math.max(0, totalEvents - publishedEvents),
|
||||
},
|
||||
nextEvent
|
||||
? {
|
||||
key: 'next',
|
||||
label: t('events.list.stats.nextEvent', 'Nächstes Event'),
|
||||
value: formatDate(nextEvent.event_date),
|
||||
}
|
||||
: null,
|
||||
].filter(Boolean) as { key: string; label: string; value: string | number }[],
|
||||
[t, totalEvents, publishedEvents, nextEvent],
|
||||
);
|
||||
const actionItems = React.useMemo(
|
||||
() => [
|
||||
{
|
||||
key: 'new',
|
||||
label: t('events.list.actions.create', 'Neues Event'),
|
||||
description: t('events.list.actions.createDescription', 'Starte mit einem frischen Setup.'),
|
||||
onClick: () => navigate(adminPath('/events/new')),
|
||||
},
|
||||
{
|
||||
key: 'welcome',
|
||||
label: t('events.list.actions.guidedSetup', 'Geführte Einrichtung'),
|
||||
description: t('events.list.actions.guidedSetupDescription', 'Springe zurück in den Onboarding-Flow.'),
|
||||
onClick: () => navigate(ADMIN_WELCOME_BASE_PATH),
|
||||
},
|
||||
{
|
||||
key: 'settings',
|
||||
label: t('events.list.actions.settings', 'Einstellungen öffnen'),
|
||||
description: t('events.list.actions.settingsDescription', 'Passe Farben, Branding und Aufgabenpakete an.'),
|
||||
onClick: () => navigate(ADMIN_SETTINGS_PATH),
|
||||
},
|
||||
],
|
||||
[t, navigate],
|
||||
);
|
||||
|
||||
const pageTitle = translateManagement('events.list.title', 'Deine Events');
|
||||
const pageSubtitle = translateManagement(
|
||||
@@ -114,7 +167,7 @@ export default function EventsPage() {
|
||||
</Button>
|
||||
);
|
||||
const heroAside = (
|
||||
<FrostedSurface className="w-full rounded-2xl border-white/30 bg-white/95 p-5 text-slate-900 shadow-lg shadow-pink-200/20 backdrop-blur">
|
||||
<FrostedSurface className="w-full rounded-2xl border-slate-200 bg-white p-5 text-slate-900 shadow-lg shadow-pink-200/20 dark:border-white/20 dark:bg-white/10">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wide text-slate-500">
|
||||
@@ -152,7 +205,37 @@ export default function EventsPage() {
|
||||
</div>
|
||||
</FrostedSurface>
|
||||
);
|
||||
|
||||
const draftEvents = totalEvents - publishedEvents;
|
||||
const [statusFilter, setStatusFilter] = React.useState<'all' | 'published' | 'draft'>('all');
|
||||
const filteredRows = React.useMemo(() => {
|
||||
if (statusFilter === 'published') {
|
||||
return rows.filter((event) => event.status === 'published');
|
||||
}
|
||||
if (statusFilter === 'draft') {
|
||||
return rows.filter((event) => event.status !== 'published');
|
||||
}
|
||||
return rows;
|
||||
}, [rows, statusFilter]);
|
||||
const overviewDescription = React.useMemo(() => {
|
||||
if (loading) {
|
||||
return t('events.list.overview.loading', 'Wir sammeln gerade deine Event-Details …');
|
||||
}
|
||||
if (filteredRows.length === 0) {
|
||||
if (statusFilter === 'published') {
|
||||
return t('events.list.overview.empty_published', 'Noch keine veröffentlichten Events.');
|
||||
}
|
||||
if (statusFilter === 'draft') {
|
||||
return t('events.list.overview.empty_drafts', 'Keine Entwürfe – nutze die Zeit für dein nächstes Event.');
|
||||
}
|
||||
return t('events.list.overview.empty', 'Noch keine Events - starte jetzt und lege dein erstes Event an.');
|
||||
}
|
||||
return t('events.list.overview.count', '{{count}} Events aktiv verwaltet.', { count: filteredRows.length });
|
||||
}, [filteredRows.length, loading, statusFilter, t]);
|
||||
const filterOptions: Array<{ key: 'all' | 'published' | 'draft'; label: string; count: number }> = [
|
||||
{ key: 'all', label: t('events.list.filters.all', 'Alle'), count: totalEvents },
|
||||
{ key: 'published', label: t('events.list.filters.published', 'Live'), count: publishedEvents },
|
||||
{ key: 'draft', label: t('events.list.filters.drafts', 'Entwürfe'), count: Math.max(0, draftEvents) },
|
||||
];
|
||||
|
||||
return (
|
||||
<AdminLayout title={pageTitle} subtitle={pageSubtitle}>
|
||||
@@ -173,34 +256,64 @@ export default function EventsPage() {
|
||||
aside={heroAside}
|
||||
/>
|
||||
|
||||
<FrostedCard className="mt-6">
|
||||
<CardHeader className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
||||
<div>
|
||||
<CardTitle>{t('events.list.overview.title', 'Übersicht')}</CardTitle>
|
||||
<CardDescription>
|
||||
{loading
|
||||
? t('events.list.overview.loading', 'Wir sammeln gerade deine Event-Details …')
|
||||
: totalEvents === 0
|
||||
? t('events.list.overview.empty', 'Noch keine Events - starte jetzt und lege dein erstes Event an.')
|
||||
: t('events.list.overview.count', '{{count}} Events aktiv verwaltet.', { count: totalEvents })}
|
||||
</CardDescription>
|
||||
<SectionCard className="space-y-4">
|
||||
<SectionHeader
|
||||
eyebrow={t('events.list.badge', 'Events')}
|
||||
title={t('events.list.overview.title', 'Übersicht')}
|
||||
description={overviewDescription}
|
||||
endSlot={(
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-full border border-slate-200 bg-white px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-slate-800 shadow-inner shadow-white/20 dark:border-white/15 dark:bg-white/10 dark:text-white"
|
||||
>
|
||||
{t('events.list.badge.dashboard', 'Tenant Dashboard')}
|
||||
</button>
|
||||
)}
|
||||
/>
|
||||
<StatCarousel items={statItems} />
|
||||
<ActionGrid items={actionItems} columns={1} />
|
||||
<div className="flex gap-2 overflow-x-auto pb-1">
|
||||
{filterOptions.map((option) => (
|
||||
<button
|
||||
key={option.key}
|
||||
type="button"
|
||||
onClick={() => setStatusFilter(option.key)}
|
||||
className={cn(
|
||||
'flex items-center gap-2 rounded-full border px-4 py-1.5 text-xs font-semibold transition',
|
||||
statusFilter === option.key
|
||||
? 'border-rose-200 bg-rose-50 text-rose-700 shadow shadow-rose-100/40 dark:border-white/60 dark:bg-white/10 dark:text-white'
|
||||
: 'border-slate-200 text-slate-600 hover:text-slate-900 dark:border-white/15 dark:text-slate-300 dark:hover:text-white'
|
||||
)}
|
||||
>
|
||||
{option.label}
|
||||
<span className="text-[11px] text-slate-400 dark:text-slate-500">{option.count}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<Badge className="bg-pink-100 text-pink-700">{t('events.list.badge.dashboard', 'Tenant Dashboard')}</Badge>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{loading ? (
|
||||
<LoadingState />
|
||||
) : totalEvents === 0 ? (
|
||||
<EmptyState onCreate={() => navigate(adminPath('/events/new'))} />
|
||||
) : filteredRows.length === 0 ? (
|
||||
<EmptyState
|
||||
title={t('events.list.empty.title', 'Noch kein Event angelegt')}
|
||||
description={t(
|
||||
'events.list.empty.description',
|
||||
'Starte jetzt mit deinem ersten Event und lade Gäste in dein farbenfrohes Erlebnisportal ein.'
|
||||
)}
|
||||
onCreate={() => navigate(adminPath('/events/new'))}
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{rows.map((event) => (
|
||||
<EventCard key={event.id} event={event} translate={translateManagement} translateCommon={translateCommon} />
|
||||
<div className="space-y-3">
|
||||
{filteredRows.map((event) => (
|
||||
<EventCard
|
||||
key={event.id}
|
||||
event={event}
|
||||
translate={translateManagement}
|
||||
translateCommon={translateCommon}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</FrostedCard>
|
||||
</SectionCard>
|
||||
</AdminLayout>
|
||||
);
|
||||
}
|
||||
@@ -222,41 +335,40 @@ function EventCard({
|
||||
() => buildLimitWarnings(event.limits ?? null, (key, opts) => translateCommon(`limits.${key}`, undefined, opts)),
|
||||
[event.limits, translateCommon],
|
||||
);
|
||||
const metaItems = [
|
||||
{
|
||||
key: 'date',
|
||||
label: translate('events.list.meta.date', 'Eventdatum'),
|
||||
value: formatDate(event.event_date),
|
||||
icon: <CalendarDays className="h-4 w-4 text-rose-500" />,
|
||||
},
|
||||
{
|
||||
key: 'photos',
|
||||
label: translate('events.list.meta.photos', 'Uploads'),
|
||||
value: photoCount,
|
||||
icon: <Camera className="h-4 w-4 text-fuchsia-500" />,
|
||||
},
|
||||
{
|
||||
key: 'likes',
|
||||
label: translate('events.list.meta.likes', 'Likes'),
|
||||
value: likeCount,
|
||||
icon: <Heart className="h-4 w-4 text-amber-500" />,
|
||||
},
|
||||
];
|
||||
const secondaryLinks = [
|
||||
{ key: 'edit', label: translateCommon('actions.edit', 'Bearbeiten'), to: ADMIN_EVENT_EDIT_PATH(slug) },
|
||||
{ key: 'members', label: translate('events.list.actions.members', 'Mitglieder'), to: ADMIN_EVENT_MEMBERS_PATH(slug) },
|
||||
{ key: 'tasks', label: translate('events.list.actions.tasks', 'Tasks'), to: ADMIN_EVENT_TASKS_PATH(slug) },
|
||||
{ key: 'invites', label: translate('events.list.actions.invites', 'QR-Einladungen'), to: ADMIN_EVENT_INVITES_PATH(slug) },
|
||||
{ key: 'toolkit', label: translate('events.list.actions.toolkit', 'Toolkit'), to: ADMIN_EVENT_TOOLKIT_PATH(slug) },
|
||||
];
|
||||
|
||||
return (
|
||||
<FrostedSurface className="p-5 transition hover:-translate-y-0.5 hover:shadow-lg">
|
||||
{limitWarnings.length > 0 && (
|
||||
<div className="mb-4 space-y-2">
|
||||
{limitWarnings.map((warning) => (
|
||||
<Alert
|
||||
key={warning.id}
|
||||
variant={warning.tone === 'danger' ? 'destructive' : 'default'}
|
||||
className={warning.tone === 'warning' ? 'border-amber-400/40 bg-amber-50 text-amber-900' : undefined}
|
||||
>
|
||||
<AlertDescription className="flex items-center gap-2 text-xs">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
{warning.message}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-lg font-semibold text-slate-900">{renderName(event.name)}</h3>
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs text-slate-600">
|
||||
<span className="inline-flex items-center gap-1 rounded-full bg-pink-100/90 px-3 py-1 font-medium text-pink-700">
|
||||
<CalendarDays className="h-3.5 w-3.5" />
|
||||
{formatDate(event.event_date)}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1 rounded-full bg-sky-100/90 px-3 py-1 font-medium text-sky-700">
|
||||
{translate('events.list.badges.photos', 'Fotos')}: {photoCount}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1 rounded-full bg-amber-100/90 px-3 py-1 font-medium text-amber-700">
|
||||
{translate('events.list.badges.likes', 'Likes')}: {likeCount}
|
||||
</span>
|
||||
</div>
|
||||
<FrostedSurface className="space-y-4 rounded-3xl p-5 shadow-lg shadow-rose-100/30 transition hover:-translate-y-0.5 hover:shadow-rose-200/60">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-[0.3em] text-rose-300/80">{translate('events.list.item.label', 'Event')}</p>
|
||||
<h3 className="text-xl font-semibold text-slate-900">{renderName(event.name)}</h3>
|
||||
</div>
|
||||
<Badge className={isPublished ? 'bg-emerald-500/90 text-white shadow shadow-emerald-500/30' : 'bg-slate-200 text-slate-700'}>
|
||||
{isPublished
|
||||
@@ -265,67 +377,119 @@ function EventCard({
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex flex-wrap gap-2">
|
||||
<Button asChild variant="outline" className="border-pink-200 text-pink-700 hover:bg-pink-50">
|
||||
<div className="-mx-1 flex snap-x snap-mandatory gap-3 overflow-x-auto px-1">
|
||||
{metaItems.map((item) => (
|
||||
<MetaChip key={item.key} icon={item.icon} label={item.label} value={item.value} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{limitWarnings.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
{limitWarnings.map((warning) => (
|
||||
<div
|
||||
key={warning.id}
|
||||
className={cn(
|
||||
'flex items-start gap-2 rounded-2xl border p-3 text-xs',
|
||||
warning.tone === 'danger'
|
||||
? 'border-rose-200/60 bg-rose-50 text-rose-900'
|
||||
: 'border-amber-200/60 bg-amber-50 text-amber-900',
|
||||
)}
|
||||
>
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<span>{warning.message}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid gap-2 sm:grid-cols-2">
|
||||
<Button
|
||||
asChild
|
||||
className="rounded-full bg-brand-rose text-white shadow shadow-rose-400/40 hover:bg-brand-rose/90"
|
||||
>
|
||||
<Link to={ADMIN_EVENT_VIEW_PATH(slug)}>
|
||||
{translateCommon('actions.open', 'Öffnen')} <ArrowRight className="ml-1 h-3.5 w-3.5" />
|
||||
{translateCommon('actions.open', 'Öffnen')} <ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" className="border-fuchsia-200 text-fuchsia-700 hover:bg-fuchsia-50">
|
||||
<Link to={ADMIN_EVENT_EDIT_PATH(slug)}>{translateCommon('actions.edit', 'Bearbeiten')}</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" className="border-sky-200 text-sky-700 hover:bg-sky-50">
|
||||
<Button asChild variant="outline" className="rounded-full border-rose-200 text-rose-600 hover:bg-rose-50">
|
||||
<Link to={ADMIN_EVENT_PHOTOS_PATH(slug)}>
|
||||
{translate('events.list.actions.photos', 'Fotos moderieren')}
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" className="border-emerald-200 text-emerald-600 hover:bg-emerald-50">
|
||||
<Link to={ADMIN_EVENT_MEMBERS_PATH(slug)}>
|
||||
{translate('events.list.actions.members', 'Mitglieder')}
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" className="border-amber-200 text-amber-600 hover:bg-amber-50">
|
||||
<Link to={ADMIN_EVENT_TASKS_PATH(slug)}>
|
||||
{translate('events.list.actions.tasks', 'Tasks')}
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" className="border-slate-200 text-slate-700 hover:bg-slate-50">
|
||||
<Link to={ADMIN_EVENT_INVITES_PATH(slug)}>
|
||||
<Share2 className="h-3.5 w-3.5" /> {translate('events.list.actions.invites', 'QR-Einladungen')}
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" className="border-emerald-200 text-emerald-600 hover:bg-emerald-50">
|
||||
<Link to={ADMIN_EVENT_TOOLKIT_PATH(slug)}>{translate('events.list.actions.toolkit', 'Toolkit')}</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{secondaryLinks.map((action) => (
|
||||
<ActionChip key={action.key} to={action.to}>
|
||||
{action.label}
|
||||
</ActionChip>
|
||||
))}
|
||||
</div>
|
||||
</FrostedSurface>
|
||||
);
|
||||
}
|
||||
|
||||
function MetaChip({
|
||||
icon,
|
||||
label,
|
||||
value,
|
||||
}: {
|
||||
icon: React.ReactNode;
|
||||
label: string;
|
||||
value: string | number;
|
||||
}) {
|
||||
return (
|
||||
<div className="min-w-[55%] snap-center rounded-2xl border border-slate-200 bg-white p-3 text-left text-xs shadow-sm sm:min-w-0 dark:border-white/15 dark:bg-white/10 dark:text-white">
|
||||
<div className="flex items-center gap-2 text-slate-500 dark:text-slate-300">
|
||||
{icon}
|
||||
<span>{label}</span>
|
||||
</div>
|
||||
<p className="mt-1 text-sm font-semibold text-slate-900 dark:text-white">{value}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ActionChip({ to, children }: { to: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<Link
|
||||
to={to}
|
||||
className="inline-flex items-center rounded-full border border-slate-200 px-3 py-1.5 text-xs font-semibold text-slate-600 transition hover:border-rose-200 hover:bg-rose-50 hover:text-rose-700 dark:border-white/15 dark:text-slate-300 dark:hover:border-white/40 dark:hover:bg-white/10 dark:hover:text-white"
|
||||
>
|
||||
{children}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
function LoadingState() {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{Array.from({ length: 3 }).map((_, index) => (
|
||||
<FrostedSurface
|
||||
key={index}
|
||||
className="h-24 animate-pulse bg-gradient-to-r from-white/40 via-white/70 to-white/40"
|
||||
className="h-24 animate-pulse rounded-3xl bg-gradient-to-r from-white/20 via-white/60 to-white/20"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyState({ onCreate }: { onCreate: () => void }) {
|
||||
function EmptyState({
|
||||
title,
|
||||
description,
|
||||
onCreate,
|
||||
}: {
|
||||
title: string;
|
||||
description: string;
|
||||
onCreate: () => void;
|
||||
}) {
|
||||
return (
|
||||
<FrostedSurface className="flex flex-col items-center justify-center gap-4 border-dashed border-pink-200/70 p-10 text-center">
|
||||
<div className="rounded-full bg-pink-100 p-3 text-pink-600 shadow-inner shadow-pink-200/80">
|
||||
<Plus className="h-5 w-5" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-lg font-semibold text-slate-900">Noch kein Event angelegt</h3>
|
||||
<p className="text-sm text-slate-600">
|
||||
Starte jetzt mit deinem ersten Event und lade Gäste in dein farbenfrohes Erlebnisportal ein.
|
||||
</p>
|
||||
<h3 className="text-lg font-semibold text-slate-900">{title}</h3>
|
||||
<p className="text-sm text-slate-600">{description}</p>
|
||||
</div>
|
||||
<Button
|
||||
onClick={onCreate}
|
||||
|
||||
@@ -11,10 +11,11 @@ import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { AdminLayout } from '../components/AdminLayout';
|
||||
import {
|
||||
TenantHeroCard,
|
||||
FrostedCard,
|
||||
FrostedSurface,
|
||||
tenantHeroPrimaryButtonClass,
|
||||
tenantHeroSecondaryButtonClass,
|
||||
SectionCard,
|
||||
SectionHeader,
|
||||
} from '../components/tenant';
|
||||
import { useAuth } from '../auth/context';
|
||||
import { ADMIN_EVENTS_PATH, ADMIN_LOGIN_PATH, ADMIN_PROFILE_PATH } from '../constants';
|
||||
@@ -65,7 +66,7 @@ export default function SettingsPage() {
|
||||
</Button>
|
||||
);
|
||||
const heroAside = (
|
||||
<FrostedSurface className="space-y-3 border-white/25 p-5 text-slate-900 shadow-lg shadow-rose-300/20 dark:border-slate-800/70 dark:bg-slate-950/80">
|
||||
<FrostedSurface className="space-y-3 border-slate-200 p-5 text-slate-900 shadow-lg shadow-rose-300/20 dark:border-white/20 dark:bg-white/10">
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400">{t('settings.hero.accountLabel', { defaultValue: 'Angemeldeter Account' })}</p>
|
||||
<p className="mt-2 text-lg font-semibold text-slate-900 dark:text-slate-100">{accountName}</p>
|
||||
@@ -120,16 +121,12 @@ export default function SettingsPage() {
|
||||
aside={heroAside}
|
||||
/>
|
||||
|
||||
<FrostedCard className="mt-6 max-w-2xl border border-white/20">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-xl text-slate-900">
|
||||
<Palette className="h-5 w-5 text-amber-500" /> Darstellung & Account
|
||||
</CardTitle>
|
||||
<CardDescription className="text-sm text-slate-600">
|
||||
Gestalte den Admin-Bereich so farbenfroh wie dein Gästeportal.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<SectionCard className="mt-6 max-w-2xl space-y-6">
|
||||
<SectionHeader
|
||||
eyebrow={t('settings.appearance.badge', 'Darstellung & Account')}
|
||||
title={t('settings.appearance.title', 'Darstellung & Account')}
|
||||
description={t('settings.appearance.description', 'Gestalte den Admin-Bereich so farbenfroh wie dein Gästeportal.')}
|
||||
/>
|
||||
<section className="space-y-2">
|
||||
<h2 className="text-sm font-semibold text-slate-800">Darstellung</h2>
|
||||
<p className="text-sm text-slate-600">
|
||||
@@ -162,20 +159,14 @@ export default function SettingsPage() {
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</CardContent>
|
||||
</FrostedCard>
|
||||
</SectionCard>
|
||||
|
||||
<FrostedCard className="max-w-3xl border border-white/20">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-xl text-slate-900">
|
||||
<AlertTriangle className="h-5 w-5 text-pink-500" />
|
||||
{t('settings.notifications.title', 'Benachrichtigungen')}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-sm text-slate-600">
|
||||
{t('settings.notifications.description', 'Lege fest, für welche Ereignisse wir dich per E-Mail informieren.')}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<SectionCard className="max-w-3xl space-y-6">
|
||||
<SectionHeader
|
||||
eyebrow={t('settings.notifications.badge', 'Benachrichtigungen')}
|
||||
title={t('settings.notifications.title', 'Benachrichtigungen')}
|
||||
description={t('settings.notifications.description', 'Lege fest, für welche Ereignisse wir dich per E-Mail informieren.')}
|
||||
/>
|
||||
{notificationError && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>{notificationError}</AlertDescription>
|
||||
@@ -225,8 +216,7 @@ export default function SettingsPage() {
|
||||
translate={translateNotification}
|
||||
/>
|
||||
) : null}
|
||||
</CardContent>
|
||||
</FrostedCard>
|
||||
</SectionCard>
|
||||
</AdminLayout>
|
||||
);
|
||||
}
|
||||
@@ -275,7 +265,7 @@ function NotificationPreferencesForm({
|
||||
const checked = preferences[item.key] ?? defaults[item.key] ?? true;
|
||||
|
||||
return (
|
||||
<FrostedSurface key={item.key} className="flex items-start justify-between gap-4 border border-pink-100/60 p-4 text-slate-900 shadow-sm shadow-rose-200/20 dark:border-pink-500/20 dark:bg-slate-950/80">
|
||||
<FrostedSurface key={item.key} className="flex items-start justify-between gap-4 border border-slate-200 p-4 text-slate-900 shadow-sm shadow-rose-200/20 dark:border-pink-500/20 dark:bg-white/10">
|
||||
<div className="space-y-1">
|
||||
<h3 className="text-sm font-semibold text-slate-900 dark:text-slate-100">{item.label}</h3>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">{item.description}</p>
|
||||
|
||||
Reference in New Issue
Block a user