rearranged tenant admin layout, invite layouts now visible and manageable
This commit is contained in:
Codex Agent
@@ -5,6 +5,15 @@ import { format } from 'date-fns';
|
||||
import { de, enGB } from 'date-fns/locale';
|
||||
import { Layers, Library, Loader2, 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 { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
|
||||
import { AdminLayout } from '../components/AdminLayout';
|
||||
import {
|
||||
getTaskCollections,
|
||||
@@ -14,29 +23,8 @@ import {
|
||||
TenantEvent,
|
||||
TenantTaskCollection,
|
||||
} from '../api';
|
||||
import { ADMIN_TASKS_PATH } from '../constants';
|
||||
import { buildEngagementTabPath } from '../constants';
|
||||
import { isAuthError } from '../auth/tokens';
|
||||
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
|
||||
const DEFAULT_PAGE_SIZE = 12;
|
||||
|
||||
@@ -47,7 +35,12 @@ type CollectionsState = {
|
||||
meta: PaginationMeta | null;
|
||||
};
|
||||
|
||||
export default function TaskCollectionsPage(): JSX.Element {
|
||||
export type TaskCollectionsSectionProps = {
|
||||
embedded?: boolean;
|
||||
onNavigateToTasks?: () => void;
|
||||
};
|
||||
|
||||
export function TaskCollectionsSection({ embedded = false, onNavigateToTasks }: TaskCollectionsSectionProps): JSX.Element {
|
||||
const navigate = useNavigate();
|
||||
const { t, i18n } = useTranslation('management');
|
||||
|
||||
@@ -163,27 +156,23 @@ export default function TaskCollectionsPage(): JSX.Element {
|
||||
}
|
||||
|
||||
const showEmpty = !loading && collectionsState.items.length === 0;
|
||||
const locale = i18n.language.startsWith('en') ? enGB : de;
|
||||
|
||||
const title = t('collections.title') ?? 'Task Collections';
|
||||
const subtitle = embedded
|
||||
? t('collections.subtitle') ?? ''
|
||||
: t('collections.subtitle') ?? '';
|
||||
|
||||
const navigateToTasks = React.useCallback(() => {
|
||||
if (onNavigateToTasks) {
|
||||
onNavigateToTasks();
|
||||
return;
|
||||
}
|
||||
navigate(buildEngagementTabPath('tasks'));
|
||||
}, [navigate, onNavigateToTasks]);
|
||||
|
||||
return (
|
||||
<AdminLayout
|
||||
title={t('collections.title') ?? 'Task Collections'}
|
||||
subtitle={t('collections.subtitle') ?? ''}
|
||||
actions={
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button variant="outline" onClick={() => navigate(ADMIN_TASKS_PATH)}>
|
||||
<Library className="mr-2 h-4 w-4" />
|
||||
{t('collections.actions.openTasks')}
|
||||
</Button>
|
||||
<Button
|
||||
className="bg-gradient-to-r from-pink-500 via-fuchsia-500 to-purple-500 text-white shadow-lg shadow-pink-500/20"
|
||||
onClick={() => navigate(ADMIN_TASKS_PATH)}
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
{t('collections.actions.create')}
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="space-y-6">
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertTitle>{t('collections.notifications.error')}</AlertTitle>
|
||||
@@ -199,253 +188,236 @@ export default function TaskCollectionsPage(): JSX.Element {
|
||||
)}
|
||||
|
||||
<Card className="border-0 bg-white/85 shadow-xl shadow-pink-100/60">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl text-slate-900">{t('collections.title')}</CardTitle>
|
||||
<CardDescription className="text-sm text-slate-600">{t('collections.subtitle')}</CardDescription>
|
||||
<CardHeader className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div>
|
||||
<CardTitle className="flex items-center gap-2 text-xl text-slate-900">
|
||||
<Layers className="h-5 w-5 text-pink-500" />
|
||||
{title}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-sm text-slate-600">{subtitle}</CardDescription>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button variant="outline" onClick={navigateToTasks}>
|
||||
<Library className="mr-2 h-4 w-4" />
|
||||
{t('collections.actions.openTasks')}
|
||||
</Button>
|
||||
<Button
|
||||
className="bg-gradient-to-r from-pink-500 via-fuchsia-500 to-purple-500 text-white shadow-lg shadow-pink-500/20"
|
||||
onClick={() => setScope('tenant')}
|
||||
>
|
||||
{t('collections.scope.tenant')}
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div className="grid gap-3 md:grid-cols-[minmax(0,1fr),220px]">
|
||||
<Input
|
||||
placeholder={t('collections.filters.search') ?? 'Nach Vorlagen suchen'}
|
||||
value={search}
|
||||
onChange={(event) => {
|
||||
setPage(1);
|
||||
setSearch(event.target.value);
|
||||
}}
|
||||
placeholder={t('collections.filters.search') ?? 'Search collections'}
|
||||
className="w-full lg:max-w-md"
|
||||
/>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Select
|
||||
value={scope}
|
||||
onValueChange={(value) => {
|
||||
setScope(value as ScopeFilter);
|
||||
setPage(1);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="w-[220px]">
|
||||
<SelectValue placeholder={t('collections.filters.scope')} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">{t('collections.filters.allScopes')}</SelectItem>
|
||||
<SelectItem value="global">{t('collections.filters.globalOnly')}</SelectItem>
|
||||
<SelectItem value="tenant">{t('collections.filters.tenantOnly')}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<Select value={scope} onValueChange={(value: ScopeFilter) => { setPage(1); setScope(value); }}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder={t('collections.filters.allScopes')} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">{t('collections.filters.allScopes')}</SelectItem>
|
||||
<SelectItem value="tenant">{t('collections.filters.tenantOnly')}</SelectItem>
|
||||
<SelectItem value="global">{t('collections.filters.globalOnly')}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<CollectionSkeleton />
|
||||
<CollectionsSkeleton />
|
||||
) : showEmpty ? (
|
||||
<EmptyCollectionsState onCreate={() => navigate(ADMIN_TASKS_PATH)} />
|
||||
<EmptyCollectionsState onCreate={navigateToTasks} />
|
||||
) : (
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
{collectionsState.items.map((collection) => (
|
||||
<CollectionCard
|
||||
<TaskCollectionCard
|
||||
key={collection.id}
|
||||
collection={collection}
|
||||
locale={locale}
|
||||
onImport={() => openImportDialog(collection)}
|
||||
onNavigateToTasks={navigateToTasks}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{collectionsState.meta && collectionsState.meta.last_page > 1 && (
|
||||
<div className="flex items-center justify-between">
|
||||
<Button
|
||||
variant="outline"
|
||||
disabled={page <= 1}
|
||||
onClick={() => setPage((prev) => Math.max(prev - 1, 1))}
|
||||
>
|
||||
{t('collections.pagination.prev')}
|
||||
</Button>
|
||||
<span className="text-xs text-slate-500">
|
||||
{collectionsState.meta && collectionsState.meta.last_page > 1 ? (
|
||||
<div className="flex flex-wrap items-center justify-between gap-2 border-t border-slate-100 pt-4 text-sm">
|
||||
<div className="text-slate-500">
|
||||
{t('collections.pagination.page', {
|
||||
current: collectionsState.meta.current_page,
|
||||
total: collectionsState.meta.last_page,
|
||||
current: collectionsState.meta.current_page ?? 1,
|
||||
total: collectionsState.meta.last_page ?? 1,
|
||||
})}
|
||||
</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
disabled={page >= collectionsState.meta.last_page}
|
||||
onClick={() => setPage((prev) => Math.min(prev + 1, collectionsState.meta!.last_page))}
|
||||
>
|
||||
{t('collections.pagination.next')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setPage((value) => Math.max(value - 1, 1))}
|
||||
disabled={(collectionsState.meta.current_page ?? 1) <= 1}
|
||||
>
|
||||
{t('collections.pagination.prev')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setPage((value) => Math.min(value + 1, collectionsState.meta?.last_page ?? value + 1))}
|
||||
disabled={(collectionsState.meta.current_page ?? 1) >= (collectionsState.meta.last_page ?? 1)}
|
||||
>
|
||||
{t('collections.pagination.next')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
) : null}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<ImportDialog
|
||||
<ImportCollectionDialog
|
||||
open={dialogOpen}
|
||||
onOpenChange={setDialogOpen}
|
||||
collection={selectedCollection}
|
||||
events={events}
|
||||
eventError={eventError}
|
||||
eventsLoading={eventsLoading}
|
||||
selectedEventSlug={selectedEventSlug}
|
||||
onEventChange={setSelectedEventSlug}
|
||||
onSelectedEventChange={setSelectedEventSlug}
|
||||
onSubmit={handleImport}
|
||||
importing={importing}
|
||||
error={eventError}
|
||||
locale={locale}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function TaskCollectionsPage(): JSX.Element {
|
||||
const navigate = useNavigate();
|
||||
const { t } = useTranslation('management');
|
||||
return (
|
||||
<AdminLayout
|
||||
title={t('collections.title') ?? 'Task Collections'}
|
||||
subtitle={t('collections.subtitle') ?? ''}
|
||||
>
|
||||
<TaskCollectionsSection onNavigateToTasks={() => navigate(buildEngagementTabPath('tasks'))} />
|
||||
</AdminLayout>
|
||||
);
|
||||
}
|
||||
|
||||
function CollectionCard({
|
||||
function TaskCollectionCard({
|
||||
collection,
|
||||
locale,
|
||||
onImport,
|
||||
onNavigateToTasks,
|
||||
}: {
|
||||
collection: TenantTaskCollection;
|
||||
locale: Locale;
|
||||
onImport: () => void;
|
||||
onNavigateToTasks: () => void;
|
||||
}) {
|
||||
const { t, i18n } = useTranslation('management');
|
||||
const locale = i18n.language.startsWith('en') ? enGB : de;
|
||||
const updatedLabel = collection.updated_at
|
||||
? format(new Date(collection.updated_at), 'PP', { locale })
|
||||
: null;
|
||||
const scopeLabel = collection.is_global ? t('collections.scope.global') : t('collections.scope.tenant');
|
||||
const eventTypeLabel = collection.event_type?.name ?? t('collections.filters.allEventTypes');
|
||||
|
||||
const { t } = useTranslation('management');
|
||||
const updatedAt = collection.updated_at ? format(new Date(collection.updated_at), 'Pp', { locale }) : null;
|
||||
return (
|
||||
<Card className="border border-slate-100 bg-white/90 shadow-sm">
|
||||
<CardHeader className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={collection.is_global ? 'border-indigo-200 text-indigo-600' : 'border-pink-200 text-pink-600'}
|
||||
>
|
||||
{scopeLabel}
|
||||
</Badge>
|
||||
{eventTypeLabel && (
|
||||
<Badge variant="secondary" className="bg-slate-100 text-slate-700">
|
||||
{eventTypeLabel}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<CardTitle className="text-lg text-slate-900">{collection.name}</CardTitle>
|
||||
{collection.description && (
|
||||
<CardDescription className="text-sm text-slate-600">
|
||||
{collection.description}
|
||||
</CardDescription>
|
||||
)}
|
||||
<Card className="border border-slate-200/70 bg-white/85 shadow-md shadow-pink-100/20">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base text-slate-900">{collection.name}</CardTitle>
|
||||
{collection.description ? (
|
||||
<CardDescription className="text-xs text-slate-500">{collection.description}</CardDescription>
|
||||
) : null}
|
||||
</CardHeader>
|
||||
<CardContent className="flex items-center justify-between text-sm text-slate-500">
|
||||
<div className="flex items-center gap-2">
|
||||
<Layers className="h-4 w-4" />
|
||||
<span>{t('collections.labels.taskCount', { count: collection.tasks_count })}</span>
|
||||
<CardContent className="space-y-3 text-sm text-slate-600">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Badge variant={collection.is_global ? 'secondary' : 'default'}>
|
||||
{collection.is_global ? t('collections.scope.global') : t('collections.scope.tenant')}
|
||||
</Badge>
|
||||
<Badge variant="outline">{t('collections.labels.taskCount', { count: collection.tasks_count })}</Badge>
|
||||
{collection.event_type ? (
|
||||
<Badge variant="outline">{collection.event_type.name}</Badge>
|
||||
) : null}
|
||||
</div>
|
||||
{updatedLabel && <span>{t('collections.labels.updated', { date: updatedLabel })}</span>}
|
||||
{updatedAt ? (
|
||||
<p className="text-xs text-slate-400">{t('collections.labels.updated', { date: updatedAt })}</p>
|
||||
) : null}
|
||||
</CardContent>
|
||||
<CardFooter className="flex justify-end">
|
||||
<Button variant="outline" onClick={onImport}>
|
||||
<CardFooter className="flex flex-wrap gap-2">
|
||||
<Button className="bg-gradient-to-r from-pink-500 via-fuchsia-500 to-purple-500 text-white" onClick={onImport}>
|
||||
<Plus className="mr-1 h-4 w-4" />
|
||||
{t('collections.actions.import')}
|
||||
</Button>
|
||||
<Button variant="outline" onClick={onNavigateToTasks}>
|
||||
{t('collections.actions.openTasks')}
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyCollectionsState({ onCreate }: { onCreate: () => void }) {
|
||||
const { t } = useTranslation('management');
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center gap-4 rounded-2xl border border-dashed border-pink-200 bg-pink-50/40 p-12 text-center">
|
||||
<div className="rounded-full bg-white p-4 shadow-inner">
|
||||
<Layers className="h-8 w-8 text-pink-500" />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<h3 className="text-lg font-semibold text-slate-800">{t('collections.empty.title')}</h3>
|
||||
<p className="text-sm text-slate-600">{t('collections.empty.description')}</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button onClick={onCreate}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
{t('collections.actions.create')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CollectionSkeleton() {
|
||||
return (
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
{Array.from({ length: 4 }).map((_, index) => (
|
||||
<div key={index} className="animate-pulse rounded-2xl border border-slate-100 bg-white/80 p-6 shadow-sm">
|
||||
<div className="mb-3 h-4 w-24 rounded bg-slate-200" />
|
||||
<div className="mb-2 h-5 w-40 rounded bg-slate-200" />
|
||||
<div className="h-16 rounded bg-slate-100" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ImportDialog({
|
||||
function ImportCollectionDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
collection,
|
||||
events,
|
||||
eventsLoading,
|
||||
eventError,
|
||||
selectedEventSlug,
|
||||
onEventChange,
|
||||
onSelectedEventChange,
|
||||
onSubmit,
|
||||
importing,
|
||||
error,
|
||||
locale,
|
||||
}: {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
collection: TenantTaskCollection | null;
|
||||
events: TenantEvent[];
|
||||
eventsLoading: boolean;
|
||||
eventError: string | null;
|
||||
selectedEventSlug: string;
|
||||
onEventChange: (value: string) => void;
|
||||
onSelectedEventChange: (slug: string) => void;
|
||||
onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
|
||||
importing: boolean;
|
||||
error: string | null;
|
||||
locale: Locale;
|
||||
}) {
|
||||
const { t, i18n } = useTranslation('management');
|
||||
const { t } = useTranslation('management');
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-lg">
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t('collections.dialogs.importTitle')}</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<form className="space-y-4" onSubmit={onSubmit}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="collection-name">{t('collections.dialogs.collectionLabel')}</Label>
|
||||
<Input id="collection-name" value={collection?.name ?? ''} readOnly disabled className="bg-slate-100" />
|
||||
<form onSubmit={onSubmit} className="space-y-4">
|
||||
<div className="space-y-1">
|
||||
<Label>{t('collections.dialogs.collectionLabel')}</Label>
|
||||
<p className="rounded-md border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-600">
|
||||
{collection?.name ?? 'Unbekannte Sammlung'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="collection-event">{t('collections.dialogs.selectEvent')}</Label>
|
||||
<Select
|
||||
value={selectedEventSlug}
|
||||
onValueChange={onEventChange}
|
||||
disabled={eventsLoading || events.length === 0}
|
||||
>
|
||||
<Select value={selectedEventSlug} onValueChange={onSelectedEventChange} disabled={eventsLoading || !events.length}>
|
||||
<SelectTrigger id="collection-event">
|
||||
<SelectValue placeholder={t('collections.dialogs.selectEvent') ?? 'Event auswählen'} />
|
||||
<SelectValue placeholder={eventsLoading ? t('collections.errors.eventsLoad') : t('collections.dialogs.selectEvent')} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{events.map((event) => (
|
||||
<SelectItem key={event.slug} value={event.slug}>
|
||||
{formatEventLabel(event, i18n.language)}
|
||||
</SelectItem>
|
||||
))}
|
||||
{events.map((event) => {
|
||||
const eventDate = event.event_date ? format(new Date(event.event_date), 'PPP', { locale }) : null;
|
||||
return (
|
||||
<SelectItem key={event.slug} value={event.slug}>
|
||||
{event.name && typeof event.name === 'string' ? event.name : event.slug}
|
||||
{eventDate ? ` · ${eventDate}` : ''}
|
||||
</SelectItem>
|
||||
);
|
||||
})}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{events.length === 0 && !eventsLoading && (
|
||||
<p className="text-xs text-slate-500">
|
||||
{t('collections.errors.noEvents') ?? 'Noch keine Events vorhanden.'}
|
||||
</p>
|
||||
)}
|
||||
{eventError && <p className="text-xs text-red-500">{eventError}</p>}
|
||||
{error ? <p className="text-xs text-rose-600">{error}</p> : null}
|
||||
</div>
|
||||
|
||||
<DialogFooter className="flex justify-end gap-2">
|
||||
<DialogFooter className="flex gap-2">
|
||||
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
|
||||
{t('collections.dialogs.cancel')}
|
||||
</Button>
|
||||
@@ -460,33 +432,26 @@ function ImportDialog({
|
||||
);
|
||||
}
|
||||
|
||||
function formatEventLabel(event: TenantEvent, language: string): string {
|
||||
const locales = [language, language?.split('-')[0], 'de', 'en'].filter(Boolean) as string[];
|
||||
|
||||
let name: string | undefined;
|
||||
if (typeof event.name === 'string') {
|
||||
name = event.name;
|
||||
} else if (event.name && typeof event.name === 'object') {
|
||||
for (const locale of locales) {
|
||||
const value = (event.name as Record<string, string>)[locale!];
|
||||
if (value) {
|
||||
name = value;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!name) {
|
||||
const first = Object.values(event.name as Record<string, string>)[0];
|
||||
if (first) {
|
||||
name = first;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const eventDate = event.event_date ? new Date(event.event_date) : null;
|
||||
if (!eventDate) {
|
||||
return name ?? event.slug;
|
||||
}
|
||||
|
||||
const locale = language.startsWith('en') ? enGB : de;
|
||||
return `${name ?? event.slug} (${format(eventDate, 'PP', { locale })})`;
|
||||
function CollectionsSkeleton() {
|
||||
return (
|
||||
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
{Array.from({ length: 6 }).map((_, index) => (
|
||||
<div key={`collection-skeleton-${index}`} className="h-40 animate-pulse rounded-xl bg-gradient-to-r from-white/40 via-white/60 to-white/40" />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyCollectionsState({ onCreate }: { onCreate: () => void }) {
|
||||
const { t } = useTranslation('management');
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-slate-200 bg-slate-50/60 p-10 text-center">
|
||||
<h3 className="text-base font-semibold text-slate-800">{t('collections.empty.title')}</h3>
|
||||
<p className="text-sm text-slate-500">{t('collections.empty.description')}</p>
|
||||
<Button onClick={onCreate} className="bg-gradient-to-r from-pink-500 via-fuchsia-500 to-purple-500 text-white">
|
||||
<Plus className="mr-1 h-4 w-4" />
|
||||
{t('collections.actions.create')}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user