tenant admin startseite schicker gestaltet und super-admin und tenant admin (filament) aufgesplittet.
Es gibt nun task collections und vordefinierte tasks für alle. Onboarding verfeinert und webseite-carousel gefixt (logging später entfernen!)
This commit is contained in:
Codex Agent
@@ -1,4 +1,5 @@
|
||||
import { authorizedFetch } from './auth/tokens';
|
||||
import i18n from './i18n';
|
||||
|
||||
type JsonValue = Record<string, any>;
|
||||
|
||||
@@ -108,25 +109,93 @@ export type CreditLedgerEntry = {
|
||||
|
||||
export type TenantTask = {
|
||||
id: number;
|
||||
slug: string;
|
||||
title: string;
|
||||
title_translations: Record<string, string>;
|
||||
description: string | null;
|
||||
description_translations: Record<string, string | null>;
|
||||
example_text: string | null;
|
||||
example_text_translations: Record<string, string>;
|
||||
priority: 'low' | 'medium' | 'high' | 'urgent' | null;
|
||||
difficulty: 'easy' | 'medium' | 'hard' | null;
|
||||
due_date: string | null;
|
||||
is_completed: boolean;
|
||||
collection_id: number | null;
|
||||
source_task_id: number | null;
|
||||
source_collection_id: number | null;
|
||||
assigned_events_count: number;
|
||||
assigned_events?: TenantEvent[];
|
||||
created_at: string | null;
|
||||
updated_at: string | null;
|
||||
};
|
||||
|
||||
export type TenantTaskCollection = {
|
||||
id: number;
|
||||
slug: string;
|
||||
name: string;
|
||||
name_translations: Record<string, string>;
|
||||
description: string | null;
|
||||
description_translations: Record<string, string | null>;
|
||||
tenant_id: number | null;
|
||||
is_global: boolean;
|
||||
event_type?: {
|
||||
id: number;
|
||||
slug: string;
|
||||
name: string;
|
||||
name_translations: Record<string, string>;
|
||||
icon: string | null;
|
||||
} | null;
|
||||
tasks_count: number;
|
||||
position: number | null;
|
||||
source_collection_id: number | null;
|
||||
created_at: string | null;
|
||||
updated_at: string | null;
|
||||
};
|
||||
|
||||
export type TenantEmotion = {
|
||||
id: number;
|
||||
name: string;
|
||||
name_translations: Record<string, string>;
|
||||
description: string | null;
|
||||
description_translations: Record<string, string | null>;
|
||||
icon: string;
|
||||
color: string;
|
||||
sort_order: number;
|
||||
is_active: boolean;
|
||||
is_global: boolean;
|
||||
tenant_id: number | null;
|
||||
event_types: Array<{
|
||||
id: number;
|
||||
slug: string;
|
||||
name: string;
|
||||
name_translations: Record<string, string>;
|
||||
}>;
|
||||
created_at: string | null;
|
||||
updated_at: string | null;
|
||||
};
|
||||
|
||||
export type TaskPayload = Partial<{
|
||||
title: string;
|
||||
title_translations: Record<string, string>;
|
||||
description: string | null;
|
||||
description_translations: Record<string, string | null>;
|
||||
example_text: string | null;
|
||||
example_text_translations: Record<string, string | null>;
|
||||
collection_id: number | null;
|
||||
priority: 'low' | 'medium' | 'high' | 'urgent';
|
||||
due_date: string | null;
|
||||
is_completed: boolean;
|
||||
difficulty: 'easy' | 'medium' | 'hard';
|
||||
}>;
|
||||
|
||||
export type EmotionPayload = Partial<{
|
||||
name: string;
|
||||
description: string | null;
|
||||
icon: string;
|
||||
color: string;
|
||||
sort_order: number;
|
||||
is_active: boolean;
|
||||
event_type_ids: number[];
|
||||
}>;
|
||||
|
||||
export type EventMember = {
|
||||
@@ -197,6 +266,62 @@ function buildPagination(payload: JsonValue | null, defaultCount: number): Pagin
|
||||
};
|
||||
}
|
||||
|
||||
function translationLocales(): string[] {
|
||||
const locale = i18n.language;
|
||||
const base = locale?.includes('-') ? locale.split('-')[0] : locale;
|
||||
const fallback = ['de', 'en'];
|
||||
return [locale, base, ...fallback].filter(
|
||||
(value, index, self): value is string => Boolean(value) && self.indexOf(value) === index
|
||||
);
|
||||
}
|
||||
|
||||
function normalizeTranslationMap(value: unknown, fallback?: string, allowEmpty = false): Record<string, string> {
|
||||
if (typeof value === 'string') {
|
||||
const map: Record<string, string> = {};
|
||||
for (const locale of translationLocales()) {
|
||||
map[locale] = value;
|
||||
}
|
||||
return map;
|
||||
}
|
||||
|
||||
if (value && typeof value === 'object' && !Array.isArray(value)) {
|
||||
const entries: Record<string, string> = {};
|
||||
for (const [key, entry] of Object.entries(value as Record<string, unknown>)) {
|
||||
if (typeof entry === 'string') {
|
||||
entries[key] = entry;
|
||||
}
|
||||
}
|
||||
|
||||
if (Object.keys(entries).length > 0) {
|
||||
return entries;
|
||||
}
|
||||
}
|
||||
|
||||
if (fallback) {
|
||||
const locales = translationLocales();
|
||||
return locales.reduce<Record<string, string>>((acc, locale) => {
|
||||
acc[locale] = fallback;
|
||||
return acc;
|
||||
}, {});
|
||||
}
|
||||
|
||||
return allowEmpty ? {} : {};
|
||||
}
|
||||
|
||||
function pickTranslatedText(translations: Record<string, string>, fallback: string): string {
|
||||
const locales = translationLocales();
|
||||
for (const locale of locales) {
|
||||
if (translations[locale]) {
|
||||
return translations[locale]!;
|
||||
}
|
||||
}
|
||||
const first = Object.values(translations)[0];
|
||||
if (first) {
|
||||
return first;
|
||||
}
|
||||
return fallback;
|
||||
}
|
||||
|
||||
function normalizeEvent(event: TenantEvent): TenantEvent {
|
||||
return {
|
||||
...event,
|
||||
@@ -260,14 +385,29 @@ function normalizeTenantPackage(pkg: JsonValue): TenantPackageSummary {
|
||||
}
|
||||
|
||||
function normalizeTask(task: JsonValue): TenantTask {
|
||||
const titleTranslations = normalizeTranslationMap(task.title_translations ?? task.title ?? {});
|
||||
const descriptionTranslations = normalizeTranslationMap(task.description_translations ?? task.description ?? {});
|
||||
const exampleTranslations = normalizeTranslationMap(task.example_text ?? {});
|
||||
|
||||
return {
|
||||
id: Number(task.id ?? 0),
|
||||
title: String(task.title ?? 'Ohne Titel'),
|
||||
description: task.description ?? null,
|
||||
tenant_id: task.tenant_id ?? null,
|
||||
slug: String(task.slug ?? `task-${task.id ?? ''}`),
|
||||
title: pickTranslatedText(titleTranslations, 'Ohne Titel'),
|
||||
title_translations: titleTranslations,
|
||||
description: Object.keys(descriptionTranslations).length
|
||||
? pickTranslatedText(descriptionTranslations, '')
|
||||
: null,
|
||||
description_translations: Object.keys(descriptionTranslations).length ? descriptionTranslations : {},
|
||||
example_text: Object.keys(exampleTranslations).length ? pickTranslatedText(exampleTranslations, '') : null,
|
||||
example_text_translations: Object.keys(exampleTranslations).length ? exampleTranslations : {},
|
||||
priority: (task.priority ?? null) as TenantTask['priority'],
|
||||
difficulty: (task.difficulty ?? null) as TenantTask['difficulty'],
|
||||
due_date: task.due_date ?? null,
|
||||
is_completed: Boolean(task.is_completed ?? false),
|
||||
collection_id: task.collection_id ?? null,
|
||||
source_task_id: task.source_task_id ?? null,
|
||||
source_collection_id: task.source_collection_id ?? null,
|
||||
assigned_events_count: Number(task.assigned_events_count ?? 0),
|
||||
assigned_events: Array.isArray(task.assigned_events) ? task.assigned_events.map(normalizeEvent) : undefined,
|
||||
created_at: task.created_at ?? null,
|
||||
@@ -275,6 +415,75 @@ function normalizeTask(task: JsonValue): TenantTask {
|
||||
};
|
||||
}
|
||||
|
||||
function normalizeTaskCollection(raw: JsonValue): TenantTaskCollection {
|
||||
const nameTranslations = normalizeTranslationMap(raw.name_translations ?? raw.name ?? {});
|
||||
const descriptionTranslations = normalizeTranslationMap(raw.description_translations ?? raw.description ?? {}, true);
|
||||
|
||||
const eventTypeRaw = raw.event_type ?? raw.eventType ?? null;
|
||||
let eventType: TenantTaskCollection['event_type'] = null;
|
||||
if (eventTypeRaw && typeof eventTypeRaw === 'object') {
|
||||
const eventNameTranslations = normalizeTranslationMap(eventTypeRaw.name ?? {});
|
||||
eventType = {
|
||||
id: Number(eventTypeRaw.id ?? 0),
|
||||
slug: String(eventTypeRaw.slug ?? ''),
|
||||
name: pickTranslatedText(eventNameTranslations, String(eventTypeRaw.slug ?? '')),
|
||||
name_translations: eventNameTranslations,
|
||||
icon: eventTypeRaw.icon ?? null,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
id: Number(raw.id ?? 0),
|
||||
slug: String(raw.slug ?? `collection-${raw.id ?? ''}`),
|
||||
name: pickTranslatedText(nameTranslations, 'Unbenannte Sammlung'),
|
||||
name_translations: nameTranslations,
|
||||
description: descriptionTranslations ? pickTranslatedText(descriptionTranslations, '') : null,
|
||||
description_translations: descriptionTranslations ?? {},
|
||||
tenant_id: raw.tenant_id ?? null,
|
||||
is_global: !raw.tenant_id,
|
||||
event_type: eventType,
|
||||
tasks_count: Number(raw.tasks_count ?? raw.tasksCount ?? 0),
|
||||
position: raw.position !== undefined ? Number(raw.position) : null,
|
||||
source_collection_id: raw.source_collection_id ?? null,
|
||||
created_at: raw.created_at ?? null,
|
||||
updated_at: raw.updated_at ?? null,
|
||||
};
|
||||
}
|
||||
|
||||
function normalizeEmotion(raw: JsonValue): TenantEmotion {
|
||||
const nameTranslations = normalizeTranslationMap(raw.name_translations ?? raw.name ?? {});
|
||||
const descriptionTranslations = normalizeTranslationMap(raw.description_translations ?? raw.description ?? {}, true);
|
||||
|
||||
const eventTypes = Array.isArray(raw.event_types ?? raw.eventTypes)
|
||||
? (raw.event_types ?? raw.eventTypes)
|
||||
: [];
|
||||
|
||||
return {
|
||||
id: Number(raw.id ?? 0),
|
||||
name: pickTranslatedText(nameTranslations, 'Emotion'),
|
||||
name_translations: nameTranslations,
|
||||
description: descriptionTranslations ? pickTranslatedText(descriptionTranslations, '') : null,
|
||||
description_translations: descriptionTranslations ?? {},
|
||||
icon: String(raw.icon ?? 'lucide-smile'),
|
||||
color: String(raw.color ?? '#6366f1'),
|
||||
sort_order: Number(raw.sort_order ?? 0),
|
||||
is_active: Boolean(raw.is_active ?? true),
|
||||
is_global: !raw.tenant_id,
|
||||
tenant_id: raw.tenant_id ?? null,
|
||||
event_types: (eventTypes as JsonValue[]).map((eventType) => {
|
||||
const translations = normalizeTranslationMap(eventType.name ?? {});
|
||||
return {
|
||||
id: Number(eventType.id ?? 0),
|
||||
slug: String(eventType.slug ?? ''),
|
||||
name: pickTranslatedText(translations, String(eventType.slug ?? '')),
|
||||
name_translations: translations,
|
||||
};
|
||||
}),
|
||||
created_at: raw.created_at ?? null,
|
||||
updated_at: raw.updated_at ?? null,
|
||||
};
|
||||
}
|
||||
|
||||
function normalizeMember(member: JsonValue): EventMember {
|
||||
return {
|
||||
id: Number(member.id ?? 0),
|
||||
@@ -479,6 +688,8 @@ type LedgerResponse = {
|
||||
|
||||
type TaskCollectionResponse = {
|
||||
data?: JsonValue[];
|
||||
collection?: JsonValue;
|
||||
message?: string;
|
||||
meta?: Partial<PaginationMeta>;
|
||||
current_page?: number;
|
||||
last_page?: number;
|
||||
@@ -685,6 +896,102 @@ export async function syncCreditBalance(payload: {
|
||||
return jsonOrThrow(response, 'Failed to sync credit balance');
|
||||
}
|
||||
|
||||
export async function getTaskCollections(params: {
|
||||
page?: number;
|
||||
per_page?: number;
|
||||
search?: string;
|
||||
event_type?: string;
|
||||
scope?: 'global' | 'tenant';
|
||||
} = {}): Promise<PaginatedResult<TenantTaskCollection>> {
|
||||
const searchParams = new URLSearchParams();
|
||||
if (params.page) searchParams.set('page', String(params.page));
|
||||
if (params.per_page) searchParams.set('per_page', String(params.per_page));
|
||||
if (params.search) searchParams.set('search', params.search);
|
||||
if (params.event_type) searchParams.set('event_type', params.event_type);
|
||||
if (params.scope) searchParams.set('scope', params.scope);
|
||||
|
||||
const queryString = searchParams.toString();
|
||||
const response = await authorizedFetch(
|
||||
`/api/v1/tenant/task-collections${queryString ? `?${queryString}` : ''}`
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
const payload = await safeJson(response);
|
||||
console.error('[API] Failed to load task collections', response.status, payload);
|
||||
throw new Error('Failed to load task collections');
|
||||
}
|
||||
|
||||
const json = (await response.json()) as TaskCollectionResponse;
|
||||
const collections = Array.isArray(json.data) ? json.data.map(normalizeTaskCollection) : [];
|
||||
|
||||
return {
|
||||
data: collections,
|
||||
meta: buildPagination(json as JsonValue, collections.length),
|
||||
};
|
||||
}
|
||||
|
||||
export async function getTaskCollection(collectionId: number): Promise<TenantTaskCollection> {
|
||||
const response = await authorizedFetch(`/api/v1/tenant/task-collections/${collectionId}`);
|
||||
const json = await jsonOrThrow<{ data: JsonValue }>(response, 'Failed to load task collection');
|
||||
return normalizeTaskCollection(json.data);
|
||||
}
|
||||
|
||||
export async function importTaskCollection(
|
||||
collectionId: number,
|
||||
eventSlug: string
|
||||
): Promise<TenantTaskCollection> {
|
||||
const response = await authorizedFetch(`/api/v1/tenant/task-collections/${collectionId}/activate`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ event_slug: eventSlug }),
|
||||
});
|
||||
|
||||
const json = await jsonOrThrow<TaskCollectionResponse>(response, 'Failed to import task collection');
|
||||
if (json.collection) {
|
||||
return normalizeTaskCollection(json.collection);
|
||||
}
|
||||
|
||||
if (json.data && json.data.length === 1) {
|
||||
return normalizeTaskCollection(json.data[0]!);
|
||||
}
|
||||
|
||||
throw new Error('Missing collection payload');
|
||||
}
|
||||
|
||||
export async function getEmotions(): Promise<TenantEmotion[]> {
|
||||
const response = await authorizedFetch('/api/v1/tenant/emotions');
|
||||
if (!response.ok) {
|
||||
const payload = await safeJson(response);
|
||||
console.error('[API] Failed to load emotions', response.status, payload);
|
||||
throw new Error('Failed to load emotions');
|
||||
}
|
||||
|
||||
const json = (await response.json()) as { data?: JsonValue[] };
|
||||
return Array.isArray(json.data) ? json.data.map(normalizeEmotion) : [];
|
||||
}
|
||||
|
||||
export async function createEmotion(payload: EmotionPayload): Promise<TenantEmotion> {
|
||||
const response = await authorizedFetch('/api/v1/tenant/emotions', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
|
||||
const json = await jsonOrThrow<{ data: JsonValue }>(response, 'Failed to create emotion');
|
||||
return normalizeEmotion(json.data);
|
||||
}
|
||||
|
||||
export async function updateEmotion(emotionId: number, payload: EmotionPayload): Promise<TenantEmotion> {
|
||||
const response = await authorizedFetch(`/api/v1/tenant/emotions/${emotionId}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
|
||||
const json = await jsonOrThrow<{ data: JsonValue }>(response, 'Failed to update emotion');
|
||||
return normalizeEmotion(json.data);
|
||||
}
|
||||
|
||||
export async function getTasks(params: { page?: number; per_page?: number; search?: string } = {}): Promise<PaginatedResult<TenantTask>> {
|
||||
const searchParams = new URLSearchParams();
|
||||
if (params.page) searchParams.set('page', String(params.page));
|
||||
|
||||
@@ -8,6 +8,8 @@ import {
|
||||
ADMIN_SETTINGS_PATH,
|
||||
ADMIN_TASKS_PATH,
|
||||
ADMIN_BILLING_PATH,
|
||||
ADMIN_TASK_COLLECTIONS_PATH,
|
||||
ADMIN_EMOTIONS_PATH,
|
||||
} from '../constants';
|
||||
import { LanguageSwitcher } from './LanguageSwitcher';
|
||||
|
||||
@@ -15,6 +17,8 @@ const navItems = [
|
||||
{ to: ADMIN_HOME_PATH, labelKey: 'navigation.dashboard', end: true },
|
||||
{ to: ADMIN_EVENTS_PATH, labelKey: 'navigation.events' },
|
||||
{ to: ADMIN_TASKS_PATH, labelKey: 'navigation.tasks' },
|
||||
{ to: ADMIN_TASK_COLLECTIONS_PATH, labelKey: 'navigation.collections' },
|
||||
{ to: ADMIN_EMOTIONS_PATH, labelKey: 'navigation.emotions' },
|
||||
{ to: ADMIN_BILLING_PATH, labelKey: 'navigation.billing' },
|
||||
{ to: ADMIN_SETTINGS_PATH, labelKey: 'navigation.settings' },
|
||||
];
|
||||
|
||||
@@ -2,12 +2,15 @@ export const ADMIN_BASE_PATH = '/event-admin';
|
||||
|
||||
export const adminPath = (suffix = ''): string => `${ADMIN_BASE_PATH}${suffix}`;
|
||||
|
||||
export const ADMIN_HOME_PATH = ADMIN_BASE_PATH;
|
||||
export const ADMIN_PUBLIC_LANDING_PATH = ADMIN_BASE_PATH;
|
||||
export const ADMIN_HOME_PATH = adminPath('/dashboard');
|
||||
export const ADMIN_LOGIN_PATH = adminPath('/login');
|
||||
export const ADMIN_AUTH_CALLBACK_PATH = adminPath('/auth/callback');
|
||||
export const ADMIN_EVENTS_PATH = adminPath('/events');
|
||||
export const ADMIN_SETTINGS_PATH = adminPath('/settings');
|
||||
export const ADMIN_TASKS_PATH = adminPath('/tasks');
|
||||
export const ADMIN_TASK_COLLECTIONS_PATH = adminPath('/task-collections');
|
||||
export const ADMIN_EMOTIONS_PATH = adminPath('/emotions');
|
||||
export const ADMIN_BILLING_PATH = adminPath('/billing');
|
||||
export const ADMIN_PHOTOS_PATH = adminPath('/photos');
|
||||
export const ADMIN_WELCOME_BASE_PATH = adminPath('/welcome');
|
||||
|
||||
@@ -7,6 +7,8 @@
|
||||
"dashboard": "Dashboard",
|
||||
"events": "Events",
|
||||
"tasks": "Aufgaben",
|
||||
"collections": "Aufgabenvorlagen",
|
||||
"emotions": "Emotionen",
|
||||
"billing": "Abrechnung",
|
||||
"settings": "Einstellungen"
|
||||
},
|
||||
|
||||
@@ -146,5 +146,100 @@
|
||||
"urgent": "Dringend"
|
||||
}
|
||||
}
|
||||
,
|
||||
"collections": {
|
||||
"title": "Aufgabenvorlagen",
|
||||
"subtitle": "Durchstöbere kuratierte Vorlagen oder aktiviere sie für deine Events.",
|
||||
"actions": {
|
||||
"import": "Importieren",
|
||||
"create": "Vorlage erstellen",
|
||||
"openTasks": "Task-Bibliothek öffnen"
|
||||
},
|
||||
"filters": {
|
||||
"search": "Nach Vorlagen suchen",
|
||||
"scope": "Bereich",
|
||||
"allScopes": "Alle Bereiche",
|
||||
"eventType": "Event-Typ",
|
||||
"allEventTypes": "Alle Event-Typen",
|
||||
"globalOnly": "Nur globale Vorlagen",
|
||||
"tenantOnly": "Nur eigene Vorlagen"
|
||||
},
|
||||
"scope": {
|
||||
"global": "Globale Vorlage",
|
||||
"tenant": "Eigene Vorlage"
|
||||
},
|
||||
"empty": {
|
||||
"title": "Noch keine Vorlagen",
|
||||
"description": "Importiere eine Fotospiel-Kollektion oder erstelle dein eigenes Aufgabenpaket."
|
||||
},
|
||||
"dialogs": {
|
||||
"importTitle": "Vorlage importieren",
|
||||
"collectionLabel": "Vorlage",
|
||||
"selectEvent": "Event auswählen",
|
||||
"submit": "Importieren",
|
||||
"cancel": "Abbrechen"
|
||||
},
|
||||
"notifications": {
|
||||
"imported": "Vorlage erfolgreich importiert",
|
||||
"error": "Vorlage konnte nicht importiert werden"
|
||||
},
|
||||
"errors": {
|
||||
"eventsLoad": "Events konnten nicht geladen werden.",
|
||||
"selectEvent": "Bitte wähle ein Event aus.",
|
||||
"noEvents": "Noch keine Events – lege eines an, um die Vorlage zu aktivieren."
|
||||
},
|
||||
"labels": {
|
||||
"taskCount": "{{count}} Tasks",
|
||||
"updated": "Aktualisiert: {{date}}"
|
||||
},
|
||||
"pagination": {
|
||||
"prev": "Zurück",
|
||||
"next": "Weiter",
|
||||
"page": "Seite {{current}} von {{total}}"
|
||||
}
|
||||
},
|
||||
"emotions": {
|
||||
"title": "Emotionen",
|
||||
"subtitle": "Verwalte Stimmungen und Icons, die deine Events begleiten.",
|
||||
"actions": {
|
||||
"create": "Neue Emotion",
|
||||
"enable": "Aktivieren",
|
||||
"disable": "Deaktivieren"
|
||||
},
|
||||
"scope": {
|
||||
"global": "Global",
|
||||
"tenant": "Eigen"
|
||||
},
|
||||
"labels": {
|
||||
"updated": "Aktualisiert: {{date}}",
|
||||
"noEventType": "Alle Event-Typen"
|
||||
},
|
||||
"status": {
|
||||
"active": "Aktiv",
|
||||
"inactive": "Inaktiv"
|
||||
},
|
||||
"errors": {
|
||||
"genericTitle": "Aktion fehlgeschlagen",
|
||||
"load": "Emotionen konnten nicht geladen werden.",
|
||||
"create": "Emotion konnte nicht erstellt werden.",
|
||||
"toggle": "Status konnte nicht aktualisiert werden.",
|
||||
"nameRequired": "Bitte gib einen Namen ein."
|
||||
},
|
||||
"empty": {
|
||||
"title": "Noch keine Emotionen",
|
||||
"description": "Erstelle eine eigene Emotion oder verwende die Fotospiel-Vorlagen."
|
||||
},
|
||||
"dialogs": {
|
||||
"createTitle": "Eigene Emotion hinzufügen",
|
||||
"name": "Name",
|
||||
"description": "Beschreibung",
|
||||
"icon": "Icon",
|
||||
"color": "Farbe",
|
||||
"activeLabel": "Aktiv",
|
||||
"activeDescription": "In Task-Listen sichtbar",
|
||||
"cancel": "Abbrechen",
|
||||
"submit": "Emotion speichern"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -7,6 +7,8 @@
|
||||
"dashboard": "Dashboard",
|
||||
"events": "Events",
|
||||
"tasks": "Tasks",
|
||||
"collections": "Collections",
|
||||
"emotions": "Emotions",
|
||||
"billing": "Billing",
|
||||
"settings": "Settings"
|
||||
},
|
||||
|
||||
@@ -146,4 +146,99 @@
|
||||
"urgent": "Urgent"
|
||||
}
|
||||
}
|
||||
,
|
||||
"collections": {
|
||||
"title": "Task collections",
|
||||
"subtitle": "Browse curated task bundles or activate them for your events.",
|
||||
"actions": {
|
||||
"import": "Import",
|
||||
"create": "Create collection",
|
||||
"openTasks": "Open task library"
|
||||
},
|
||||
"filters": {
|
||||
"search": "Search collections",
|
||||
"scope": "Scope",
|
||||
"allScopes": "All scopes",
|
||||
"eventType": "Event type",
|
||||
"allEventTypes": "All event types",
|
||||
"globalOnly": "Global templates",
|
||||
"tenantOnly": "Tenant collections"
|
||||
},
|
||||
"scope": {
|
||||
"global": "Global template",
|
||||
"tenant": "Tenant-owned"
|
||||
},
|
||||
"empty": {
|
||||
"title": "No collections yet",
|
||||
"description": "Import one of Fotospiel’s curated templates or create your own bundle to get started."
|
||||
},
|
||||
"dialogs": {
|
||||
"importTitle": "Import collection",
|
||||
"collectionLabel": "Collection",
|
||||
"selectEvent": "Select event",
|
||||
"submit": "Import",
|
||||
"cancel": "Cancel"
|
||||
},
|
||||
"notifications": {
|
||||
"imported": "Collection imported successfully",
|
||||
"error": "Collection could not be imported"
|
||||
},
|
||||
"errors": {
|
||||
"eventsLoad": "Events could not be loaded.",
|
||||
"selectEvent": "Please select an event.",
|
||||
"noEvents": "No events yet – create one to activate this collection."
|
||||
},
|
||||
"labels": {
|
||||
"taskCount": "{{count}} tasks",
|
||||
"updated": "Updated: {{date}}"
|
||||
},
|
||||
"pagination": {
|
||||
"prev": "Previous",
|
||||
"next": "Next",
|
||||
"page": "Page {{current}} of {{total}}"
|
||||
}
|
||||
},
|
||||
"emotions": {
|
||||
"title": "Emotions",
|
||||
"subtitle": "Manage the emotional tone available for your events.",
|
||||
"actions": {
|
||||
"create": "Add emotion",
|
||||
"enable": "Enable",
|
||||
"disable": "Disable"
|
||||
},
|
||||
"scope": {
|
||||
"global": "Global",
|
||||
"tenant": "Tenant"
|
||||
},
|
||||
"labels": {
|
||||
"updated": "Updated: {{date}}",
|
||||
"noEventType": "All event types"
|
||||
},
|
||||
"status": {
|
||||
"active": "Active",
|
||||
"inactive": "Inactive"
|
||||
},
|
||||
"errors": {
|
||||
"genericTitle": "Action failed",
|
||||
"load": "Emotions could not be loaded.",
|
||||
"create": "Emotion could not be created.",
|
||||
"toggle": "Emotion status could not be updated.",
|
||||
"nameRequired": "Please provide a name."
|
||||
},
|
||||
"empty": {
|
||||
"title": "No emotions yet",
|
||||
"description": "Create your own emotion or use the Fotospiel defaults."
|
||||
},
|
||||
"dialogs": {
|
||||
"createTitle": "Add custom emotion",
|
||||
"name": "Name",
|
||||
"description": "Description",
|
||||
"icon": "Icon",
|
||||
"color": "Color",
|
||||
"activeLabel": "Active",
|
||||
"activeDescription": "Visible in the task library",
|
||||
"cancel": "Cancel",
|
||||
"submit": "Save emotion"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
384
resources/js/admin/pages/EmotionsPage.tsx
Normal file
384
resources/js/admin/pages/EmotionsPage.tsx
Normal file
@@ -0,0 +1,384 @@
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { format } from 'date-fns';
|
||||
import { de, enGB } from 'date-fns/locale';
|
||||
import type { Locale } from 'date-fns';
|
||||
import { Palette, Plus, Power, Smile } from 'lucide-react';
|
||||
|
||||
import { AdminLayout } from '../components/AdminLayout';
|
||||
import {
|
||||
getEmotions,
|
||||
createEmotion,
|
||||
updateEmotion,
|
||||
TenantEmotion,
|
||||
EmotionPayload,
|
||||
} from '../api';
|
||||
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 { Switch } from '@/components/ui/switch';
|
||||
|
||||
const DEFAULT_COLOR = '#6366f1';
|
||||
|
||||
type EmotionFormState = {
|
||||
name: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
color: string;
|
||||
is_active: boolean;
|
||||
sort_order: number;
|
||||
};
|
||||
|
||||
const INITIAL_FORM_STATE: EmotionFormState = {
|
||||
name: '',
|
||||
description: '',
|
||||
icon: 'lucide-smile',
|
||||
color: DEFAULT_COLOR,
|
||||
is_active: true,
|
||||
sort_order: 0,
|
||||
};
|
||||
|
||||
export default function EmotionsPage(): JSX.Element {
|
||||
const { t, i18n } = useTranslation('management');
|
||||
|
||||
const [emotions, setEmotions] = React.useState<TenantEmotion[]>([]);
|
||||
const [loading, setLoading] = React.useState(true);
|
||||
const [error, setError] = React.useState<string | null>(null);
|
||||
|
||||
const [dialogOpen, setDialogOpen] = React.useState(false);
|
||||
const [saving, setSaving] = React.useState(false);
|
||||
const [form, setForm] = React.useState<EmotionFormState>(INITIAL_FORM_STATE);
|
||||
|
||||
React.useEffect(() => {
|
||||
let cancelled = false;
|
||||
async function load() {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const data = await getEmotions();
|
||||
if (!cancelled) {
|
||||
setEmotions(data);
|
||||
}
|
||||
} catch (err) {
|
||||
if (!isAuthError(err)) {
|
||||
setError(t('emotions.errors.load'));
|
||||
}
|
||||
} finally {
|
||||
if (!cancelled) {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
void load();
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [t]);
|
||||
|
||||
function openCreateDialog() {
|
||||
setForm(INITIAL_FORM_STATE);
|
||||
setDialogOpen(true);
|
||||
}
|
||||
|
||||
async function handleCreate(event: React.FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
if (!form.name.trim()) {
|
||||
setError(t('emotions.errors.nameRequired'));
|
||||
return;
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
const payload: EmotionPayload = {
|
||||
name: form.name.trim(),
|
||||
description: form.description.trim() || null,
|
||||
icon: form.icon.trim() || 'lucide-smile',
|
||||
color: form.color.trim() || DEFAULT_COLOR,
|
||||
is_active: form.is_active,
|
||||
sort_order: form.sort_order,
|
||||
};
|
||||
|
||||
try {
|
||||
const created = await createEmotion(payload);
|
||||
setEmotions((prev) => [created, ...prev]);
|
||||
setDialogOpen(false);
|
||||
} catch (err) {
|
||||
if (!isAuthError(err)) {
|
||||
setError(t('emotions.errors.create'));
|
||||
}
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleEmotion(emotion: TenantEmotion) {
|
||||
try {
|
||||
const updated = await updateEmotion(emotion.id, { is_active: !emotion.is_active });
|
||||
setEmotions((prev) => prev.map((item) => (item.id === updated.id ? updated : item)));
|
||||
} catch (err) {
|
||||
if (!isAuthError(err)) {
|
||||
setError(t('emotions.errors.toggle'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const locale = i18n.language.startsWith('en') ? enGB : de;
|
||||
|
||||
return (
|
||||
<AdminLayout
|
||||
title={t('emotions.title') ?? 'Emotions'}
|
||||
subtitle={t('emotions.subtitle') ?? ''}
|
||||
actions={
|
||||
<Button
|
||||
className="bg-gradient-to-r from-pink-500 via-fuchsia-500 to-purple-500 text-white shadow-lg shadow-pink-500/20"
|
||||
onClick={openCreateDialog}
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
{t('emotions.actions.create')}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertTitle>{t('emotions.errors.genericTitle')}</AlertTitle>
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Card className="border-0 bg-white/85 shadow-xl shadow-pink-100/60">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl text-slate-900">{t('emotions.title')}</CardTitle>
|
||||
<CardDescription className="text-sm text-slate-600">{t('emotions.subtitle')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{loading ? (
|
||||
<EmotionSkeleton />
|
||||
) : emotions.length === 0 ? (
|
||||
<EmptyEmotionsState />
|
||||
) : (
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
{emotions.map((emotion) => (
|
||||
<EmotionCard
|
||||
key={emotion.id}
|
||||
emotion={emotion}
|
||||
onToggle={() => toggleEmotion(emotion)}
|
||||
locale={locale}
|
||||
canToggle={!emotion.is_global}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<EmotionDialog
|
||||
open={dialogOpen}
|
||||
onOpenChange={setDialogOpen}
|
||||
form={form}
|
||||
setForm={setForm}
|
||||
saving={saving}
|
||||
onSubmit={handleCreate}
|
||||
/>
|
||||
</AdminLayout>
|
||||
);
|
||||
}
|
||||
|
||||
function EmotionCard({
|
||||
emotion,
|
||||
onToggle,
|
||||
locale,
|
||||
canToggle,
|
||||
}: {
|
||||
emotion: TenantEmotion;
|
||||
onToggle: () => void;
|
||||
locale: Locale;
|
||||
canToggle: boolean;
|
||||
}) {
|
||||
const { t } = useTranslation('management');
|
||||
const updatedLabel = emotion.updated_at
|
||||
? format(new Date(emotion.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={emotion.is_global ? 'border-indigo-200 text-indigo-600' : 'border-pink-200 text-pink-600'}
|
||||
>
|
||||
{emotion.is_global ? t('emotions.scope.global') : t('emotions.scope.tenant')}
|
||||
</Badge>
|
||||
<Badge variant="secondary" className="bg-slate-100 text-slate-700">
|
||||
{emotion.event_types.map((type) => type.name).join(', ') || t('emotions.labels.noEventType')}
|
||||
</Badge>
|
||||
</div>
|
||||
<CardTitle className="flex items-center gap-2 text-lg text-slate-900">
|
||||
<Smile className="h-4 w-4" />
|
||||
{emotion.name}
|
||||
</CardTitle>
|
||||
{emotion.description && (
|
||||
<CardDescription className="text-sm text-slate-600">{emotion.description}</CardDescription>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent className="flex items-center justify-between text-xs text-slate-500">
|
||||
<div className="flex items-center gap-2">
|
||||
<Palette className="h-4 w-4" />
|
||||
<span>{emotion.color}</span>
|
||||
</div>
|
||||
{updatedLabel && <span>{t('emotions.labels.updated', { date: updatedLabel })}</span>}
|
||||
</CardContent>
|
||||
<CardFooter className="flex items-center justify-between border-t border-slate-100 bg-slate-50/60 px-4 py-3">
|
||||
<span className="text-xs text-slate-500">
|
||||
{emotion.is_active ? t('emotions.status.active') : t('emotions.status.inactive')}
|
||||
</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={onToggle}
|
||||
disabled={!canToggle}
|
||||
className={!canToggle ? 'pointer-events-none opacity-60' : ''}
|
||||
>
|
||||
<Power className="mr-2 h-4 w-4" />
|
||||
{emotion.is_active ? t('emotions.actions.disable') : t('emotions.actions.enable')}
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyEmotionsState() {
|
||||
const { t } = useTranslation('management');
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center gap-4 rounded-2xl border border-dashed border-indigo-200 bg-indigo-50/40 p-12 text-center">
|
||||
<div className="rounded-full bg-white p-4 shadow-inner">
|
||||
<Smile className="h-8 w-8 text-indigo-500" />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<h3 className="text-lg font-semibold text-slate-800">{t('emotions.empty.title')}</h3>
|
||||
<p className="text-sm text-slate-600">{t('emotions.empty.description')}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function EmotionSkeleton() {
|
||||
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 EmotionDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
form,
|
||||
setForm,
|
||||
saving,
|
||||
onSubmit,
|
||||
}: {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
form: EmotionFormState;
|
||||
setForm: React.Dispatch<React.SetStateAction<EmotionFormState>>;
|
||||
saving: boolean;
|
||||
onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
|
||||
}) {
|
||||
const { t } = useTranslation('management');
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t('emotions.dialogs.createTitle')}</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<form className="space-y-4" onSubmit={onSubmit}>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="emotion-name">{t('emotions.dialogs.name')}</Label>
|
||||
<Input
|
||||
id="emotion-name"
|
||||
value={form.name}
|
||||
onChange={(event) => setForm((prev) => ({ ...prev, name: event.target.value }))}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="emotion-description">{t('emotions.dialogs.description')}</Label>
|
||||
<textarea
|
||||
id="emotion-description"
|
||||
value={form.description}
|
||||
onChange={(event) => setForm((prev) => ({ ...prev, description: event.target.value }))}
|
||||
className="min-h-[80px] w-full rounded-md border border-slate-200 bg-white/80 p-2 text-sm shadow-sm focus:border-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-200"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="emotion-icon">{t('emotions.dialogs.icon')}</Label>
|
||||
<Input
|
||||
id="emotion-icon"
|
||||
value={form.icon}
|
||||
onChange={(event) => setForm((prev) => ({ ...prev, icon: event.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="emotion-color">{t('emotions.dialogs.color')}</Label>
|
||||
<Input
|
||||
id="emotion-color"
|
||||
value={form.color}
|
||||
onChange={(event) => setForm((prev) => ({ ...prev, color: event.target.value }))}
|
||||
placeholder="#6366f1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between rounded-lg border border-indigo-100 bg-indigo-50/60 p-3">
|
||||
<div>
|
||||
<Label htmlFor="emotion-active" className="text-sm font-medium text-slate-800">
|
||||
{t('emotions.dialogs.activeLabel')}
|
||||
</Label>
|
||||
<p className="text-xs text-slate-500">{t('emotions.dialogs.activeDescription')}</p>
|
||||
</div>
|
||||
<Switch
|
||||
id="emotion-active"
|
||||
checked={form.is_active}
|
||||
onCheckedChange={(checked) => setForm((prev) => ({ ...prev, is_active: Boolean(checked) }))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="flex justify-end gap-2">
|
||||
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
|
||||
{t('emotions.dialogs.cancel')}
|
||||
</Button>
|
||||
<Button type="submit" disabled={saving}>
|
||||
{saving ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
|
||||
{t('emotions.dialogs.submit')}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
492
resources/js/admin/pages/TaskCollectionsPage.tsx
Normal file
492
resources/js/admin/pages/TaskCollectionsPage.tsx
Normal file
@@ -0,0 +1,492 @@
|
||||
import React from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { format } from 'date-fns';
|
||||
import { de, enGB } from 'date-fns/locale';
|
||||
import { Layers, Library, Loader2, Plus } from 'lucide-react';
|
||||
|
||||
import { AdminLayout } from '../components/AdminLayout';
|
||||
import {
|
||||
getTaskCollections,
|
||||
importTaskCollection,
|
||||
getEvents,
|
||||
PaginationMeta,
|
||||
TenantEvent,
|
||||
TenantTaskCollection,
|
||||
} from '../api';
|
||||
import { ADMIN_TASKS_PATH } 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;
|
||||
|
||||
type ScopeFilter = 'all' | 'global' | 'tenant';
|
||||
|
||||
type CollectionsState = {
|
||||
items: TenantTaskCollection[];
|
||||
meta: PaginationMeta | null;
|
||||
};
|
||||
|
||||
export default function TaskCollectionsPage(): JSX.Element {
|
||||
const navigate = useNavigate();
|
||||
const { t, i18n } = useTranslation('management');
|
||||
|
||||
const [collectionsState, setCollectionsState] = React.useState<CollectionsState>({ items: [], meta: null });
|
||||
const [page, setPage] = React.useState(1);
|
||||
const [search, setSearch] = React.useState('');
|
||||
const [scope, setScope] = React.useState<ScopeFilter>('all');
|
||||
const [loading, setLoading] = React.useState(true);
|
||||
const [error, setError] = React.useState<string | null>(null);
|
||||
const [successMessage, setSuccessMessage] = React.useState<string | null>(null);
|
||||
|
||||
const [dialogOpen, setDialogOpen] = React.useState(false);
|
||||
const [selectedCollection, setSelectedCollection] = React.useState<TenantTaskCollection | null>(null);
|
||||
const [events, setEvents] = React.useState<TenantEvent[]>([]);
|
||||
const [selectedEventSlug, setSelectedEventSlug] = React.useState('');
|
||||
const [importing, setImporting] = React.useState(false);
|
||||
const [eventsLoading, setEventsLoading] = React.useState(false);
|
||||
const [eventError, setEventError] = React.useState<string | null>(null);
|
||||
const [reloadToken, setReloadToken] = React.useState(0);
|
||||
|
||||
const scopeParam = React.useMemo(() => {
|
||||
if (scope === 'global') return 'global';
|
||||
if (scope === 'tenant') return 'tenant';
|
||||
return undefined;
|
||||
}, [scope]);
|
||||
|
||||
React.useEffect(() => {
|
||||
let cancelled = false;
|
||||
async function loadCollections() {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const result = await getTaskCollections({
|
||||
page,
|
||||
per_page: DEFAULT_PAGE_SIZE,
|
||||
search: search.trim() || undefined,
|
||||
scope: scopeParam,
|
||||
});
|
||||
if (cancelled) return;
|
||||
setCollectionsState({ items: result.data, meta: result.meta });
|
||||
} catch (err) {
|
||||
if (cancelled) return;
|
||||
if (!isAuthError(err)) {
|
||||
setError(t('collections.notifications.error'));
|
||||
}
|
||||
} finally {
|
||||
if (!cancelled) {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
void loadCollections();
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [page, search, scopeParam, reloadToken, t]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (successMessage) {
|
||||
const timeout = setTimeout(() => setSuccessMessage(null), 4000);
|
||||
return () => clearTimeout(timeout);
|
||||
}
|
||||
return undefined;
|
||||
}, [successMessage]);
|
||||
|
||||
async function ensureEventsLoaded() {
|
||||
if (events.length > 0 || eventsLoading) {
|
||||
return;
|
||||
}
|
||||
setEventsLoading(true);
|
||||
setEventError(null);
|
||||
try {
|
||||
const result = await getEvents();
|
||||
setEvents(result);
|
||||
} catch (err) {
|
||||
if (!isAuthError(err)) {
|
||||
setEventError(t('collections.errors.eventsLoad'));
|
||||
}
|
||||
} finally {
|
||||
setEventsLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
function openImportDialog(collection: TenantTaskCollection) {
|
||||
setSelectedCollection(collection);
|
||||
setSelectedEventSlug('');
|
||||
setDialogOpen(true);
|
||||
void ensureEventsLoaded();
|
||||
}
|
||||
|
||||
async function handleImport(event: React.FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
if (!selectedCollection || !selectedEventSlug) {
|
||||
setEventError(t('collections.errors.selectEvent'));
|
||||
return;
|
||||
}
|
||||
setImporting(true);
|
||||
setEventError(null);
|
||||
try {
|
||||
await importTaskCollection(selectedCollection.id, selectedEventSlug);
|
||||
setSuccessMessage(t('collections.notifications.imported'));
|
||||
setDialogOpen(false);
|
||||
setReloadToken((token) => token + 1);
|
||||
} catch (err) {
|
||||
if (!isAuthError(err)) {
|
||||
setEventError(t('collections.notifications.error'));
|
||||
}
|
||||
} finally {
|
||||
setImporting(false);
|
||||
}
|
||||
}
|
||||
|
||||
const showEmpty = !loading && collectionsState.items.length === 0;
|
||||
|
||||
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>
|
||||
}
|
||||
>
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertTitle>{t('collections.notifications.error')}</AlertTitle>
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{successMessage && (
|
||||
<Alert className="border-l-4 border-green-500 bg-green-50 text-sm text-green-900">
|
||||
<AlertTitle>{t('collections.notifications.imported')}</AlertTitle>
|
||||
<AlertDescription>{successMessage}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<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>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
||||
<Input
|
||||
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>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<CollectionSkeleton />
|
||||
) : showEmpty ? (
|
||||
<EmptyCollectionsState onCreate={() => navigate(ADMIN_TASKS_PATH)} />
|
||||
) : (
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
{collectionsState.items.map((collection) => (
|
||||
<CollectionCard
|
||||
key={collection.id}
|
||||
collection={collection}
|
||||
onImport={() => openImportDialog(collection)}
|
||||
/>
|
||||
))}
|
||||
</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">
|
||||
{t('collections.pagination.page', {
|
||||
current: collectionsState.meta.current_page,
|
||||
total: collectionsState.meta.last_page,
|
||||
})}
|
||||
</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>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<ImportDialog
|
||||
open={dialogOpen}
|
||||
onOpenChange={setDialogOpen}
|
||||
collection={selectedCollection}
|
||||
events={events}
|
||||
eventError={eventError}
|
||||
eventsLoading={eventsLoading}
|
||||
selectedEventSlug={selectedEventSlug}
|
||||
onEventChange={setSelectedEventSlug}
|
||||
onSubmit={handleImport}
|
||||
importing={importing}
|
||||
/>
|
||||
</AdminLayout>
|
||||
);
|
||||
}
|
||||
|
||||
function CollectionCard({
|
||||
collection,
|
||||
onImport,
|
||||
}: {
|
||||
collection: TenantTaskCollection;
|
||||
onImport: () => 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');
|
||||
|
||||
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>
|
||||
)}
|
||||
</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>
|
||||
</div>
|
||||
{updatedLabel && <span>{t('collections.labels.updated', { date: updatedLabel })}</span>}
|
||||
</CardContent>
|
||||
<CardFooter className="flex justify-end">
|
||||
<Button variant="outline" onClick={onImport}>
|
||||
{t('collections.actions.import')}
|
||||
</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({
|
||||
open,
|
||||
onOpenChange,
|
||||
collection,
|
||||
events,
|
||||
eventsLoading,
|
||||
eventError,
|
||||
selectedEventSlug,
|
||||
onEventChange,
|
||||
onSubmit,
|
||||
importing,
|
||||
}: {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
collection: TenantTaskCollection | null;
|
||||
events: TenantEvent[];
|
||||
eventsLoading: boolean;
|
||||
eventError: string | null;
|
||||
selectedEventSlug: string;
|
||||
onEventChange: (value: string) => void;
|
||||
onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
|
||||
importing: boolean;
|
||||
}) {
|
||||
const { t, i18n } = useTranslation('management');
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-lg">
|
||||
<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" />
|
||||
</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}
|
||||
>
|
||||
<SelectTrigger id="collection-event">
|
||||
<SelectValue placeholder={t('collections.dialogs.selectEvent') ?? 'Event auswählen'} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{events.map((event) => (
|
||||
<SelectItem key={event.slug} value={event.slug}>
|
||||
{formatEventLabel(event, i18n.language)}
|
||||
</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>}
|
||||
</div>
|
||||
|
||||
<DialogFooter className="flex justify-end gap-2">
|
||||
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
|
||||
{t('collections.dialogs.cancel')}
|
||||
</Button>
|
||||
<Button type="submit" disabled={importing || !selectedEventSlug}>
|
||||
{importing ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
|
||||
{t('collections.dialogs.submit')}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
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 })})`;
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { CheckCircle2, Circle, Loader2, Pencil, Plus, Trash2 } from 'lucide-react';
|
||||
|
||||
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
||||
@@ -23,7 +24,7 @@ import {
|
||||
updateTask,
|
||||
} from '../api';
|
||||
import { isAuthError } from '../auth/tokens';
|
||||
import { ADMIN_EVENTS_PATH } from '../constants';
|
||||
import { ADMIN_EVENTS_PATH, ADMIN_TASK_COLLECTIONS_PATH } from '../constants';
|
||||
|
||||
type TaskFormState = {
|
||||
title: string;
|
||||
@@ -43,6 +44,7 @@ const INITIAL_FORM: TaskFormState = {
|
||||
|
||||
export default function TasksPage() {
|
||||
const navigate = useNavigate();
|
||||
const { t } = useTranslation('common');
|
||||
const [tasks, setTasks] = React.useState<TenantTask[]>([]);
|
||||
const [meta, setMeta] = React.useState<PaginationMeta | null>(null);
|
||||
const [page, setPage] = React.useState(1);
|
||||
@@ -150,6 +152,9 @@ export default function TasksPage() {
|
||||
}
|
||||
|
||||
async function toggleCompletion(task: TenantTask) {
|
||||
if (task.tenant_id === null) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const updated = await updateTask(task.id, { is_completed: !task.is_completed });
|
||||
setTasks((prev) => prev.map((entry) => (entry.id === updated.id ? updated : entry)));
|
||||
@@ -165,13 +170,18 @@ export default function TasksPage() {
|
||||
title="Task Bibliothek"
|
||||
subtitle="Weise Aufgaben zu und tracke Fortschritt rund um deine Events."
|
||||
actions={
|
||||
<Button
|
||||
className="bg-gradient-to-r from-pink-500 via-fuchsia-500 to-purple-500 text-white shadow-lg shadow-pink-500/20"
|
||||
onClick={openCreate}
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
Neuer Task
|
||||
</Button>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button variant="outline" onClick={() => navigate(ADMIN_TASK_COLLECTIONS_PATH)}>
|
||||
{t('navigation.collections')}
|
||||
</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={openCreate}
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
Neu
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{error && (
|
||||
@@ -269,25 +279,34 @@ function TaskRow({
|
||||
}) {
|
||||
const assignedCount = task.assigned_events_count ?? task.assigned_events?.length ?? 0;
|
||||
const completed = task.is_completed;
|
||||
const isGlobal = task.tenant_id === null;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3 rounded-2xl border border-slate-100 bg-white/90 p-4 shadow-sm sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="flex flex-1 items-start gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onToggle}
|
||||
className="rounded-full border border-pink-200 bg-white/80 p-2 text-pink-600 shadow-sm transition hover:bg-pink-50"
|
||||
onClick={isGlobal ? undefined : onToggle}
|
||||
aria-disabled={isGlobal}
|
||||
className={`rounded-full border border-pink-200 bg-white/80 p-2 text-pink-600 shadow-sm transition ${
|
||||
isGlobal ? 'opacity-50 cursor-not-allowed' : 'hover:bg-pink-50'
|
||||
}`}
|
||||
>
|
||||
{completed ? <CheckCircle2 className="h-5 w-5" /> : <Circle className="h-5 w-5" />}
|
||||
</button>
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<p className={`text-sm font-semibold ${completed ? 'text-slate-500 line-through' : 'text-slate-900'}`}>
|
||||
{task.title}
|
||||
</p>
|
||||
<Badge variant="outline" className="border-pink-200 text-pink-600">
|
||||
{mapPriority(task.priority)}
|
||||
</Badge>
|
||||
{isGlobal && (
|
||||
<Badge variant="secondary" className="bg-slate-100 text-slate-600">
|
||||
Global
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{task.description && <p className="text-xs text-slate-600">{task.description}</p>}
|
||||
<div className="flex flex-wrap items-center gap-3 text-xs text-slate-500">
|
||||
@@ -297,10 +316,16 @@ function TaskRow({
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={onEdit}>
|
||||
<Button variant="outline" size="sm" onClick={onEdit} disabled={isGlobal} className={isGlobal ? 'opacity-50' : ''}>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={onDelete} className="text-rose-600">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={onDelete}
|
||||
className={`text-rose-600 ${isGlobal ? 'opacity-50' : ''}`}
|
||||
disabled={isGlobal}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
115
resources/js/admin/pages/WelcomeTeaserPage.tsx
Normal file
115
resources/js/admin/pages/WelcomeTeaserPage.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
import React from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Sparkles, Users, Camera, Heart, ArrowRight } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ADMIN_HOME_PATH } from '../constants';
|
||||
import { useAuth } from '../auth/context';
|
||||
|
||||
const highlights = [
|
||||
{
|
||||
icon: Sparkles,
|
||||
title: 'Momente lenken, nicht das Handy',
|
||||
description:
|
||||
'Fotospiel liefert euch spielerische Aufgaben, damit eure Gäste das Fest genießen und gleichzeitig emotionale Motive festhalten.',
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: 'Alle Gäste auf einer Reise',
|
||||
description:
|
||||
'Einladungslinks und QR-Codes führen direkt in eure Event-Galerie. Kein Technik-Know-how nötig – nur teilen und loslegen.',
|
||||
},
|
||||
{
|
||||
icon: Camera,
|
||||
title: 'Live-Galerie und Moderation',
|
||||
description:
|
||||
'Sammelt Bilder in Echtzeit, markiert Highlights und entscheidet gemeinsam, welche Erinnerungen groß rauskommen.',
|
||||
},
|
||||
];
|
||||
|
||||
export default function WelcomeTeaserPage() {
|
||||
const navigate = useNavigate();
|
||||
const { login } = useAuth();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-rose-50 via-white to-sky-50 text-slate-800">
|
||||
<header className="mx-auto flex w-full max-w-5xl flex-col gap-6 px-6 pb-12 pt-16 text-center md:pt-20">
|
||||
<div className="mx-auto w-fit rounded-full border border-rose-100 bg-white/80 px-4 py-1 text-sm font-medium text-rose-500 shadow-sm">
|
||||
Willkommen bei Fotospiel
|
||||
</div>
|
||||
<h1 className="font-display text-4xl font-semibold tracking-tight text-slate-900 md:text-5xl">
|
||||
Eure Gäste als Geschichtenerzähler – ohne Technikstress
|
||||
</h1>
|
||||
<p className="mx-auto max-w-2xl text-base leading-relaxed text-slate-600 md:text-lg">
|
||||
Dieses Kontrollzentrum zeigt euch, wie ihr Fotospiel für Hochzeit, Jubiläum oder Team-Event einsetzt.
|
||||
Wir führen euch Schritt für Schritt durch Aufgaben, Event-Setup und Einladungen.
|
||||
</p>
|
||||
<div className="flex flex-col justify-center gap-3 md:flex-row">
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="group inline-flex items-center justify-center gap-2 rounded-full border border-transparent bg-white px-6 py-3 text-base font-semibold text-rose-500 shadow-sm transition hover:border-rose-200 hover:text-rose-600"
|
||||
onClick={() => login(ADMIN_HOME_PATH)}
|
||||
>
|
||||
Ich habe bereits Zugang
|
||||
<ArrowRight className="h-4 w-4 transition group-hover:translate-x-0.5" />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="mx-auto w-full max-w-5xl space-y-12 px-6 pb-16">
|
||||
<section className="grid gap-6 rounded-3xl border border-white/60 bg-white/80 p-6 shadow-xl shadow-rose-100/40 backdrop-blur-md md:grid-cols-3 md:p-8">
|
||||
{highlights.map((item) => (
|
||||
<article key={item.title} className="flex flex-col gap-4 rounded-2xl bg-white/70 p-5 shadow-sm">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-rose-100 text-rose-500">
|
||||
<item.icon className="h-6 w-6" />
|
||||
</div>
|
||||
<h2 className="text-lg font-semibold text-slate-900">{item.title}</h2>
|
||||
<p className="text-sm leading-relaxed text-slate-600">{item.description}</p>
|
||||
</article>
|
||||
))}
|
||||
</section>
|
||||
|
||||
<section className="grid gap-8 rounded-3xl border border-sky-100 bg-gradient-to-br from-white via-sky-50 to-white p-6 shadow-lg md:grid-cols-2 md:p-10">
|
||||
<div className="space-y-5">
|
||||
<div className="inline-flex items-center gap-2 rounded-full bg-sky-100 px-3 py-1 text-xs font-semibold text-sky-700">
|
||||
<Heart className="h-4 w-4" />
|
||||
So startet ihr
|
||||
</div>
|
||||
<h2 className="text-2xl font-semibold text-slate-900 md:text-3xl">In drei Schritten zu eurer Story</h2>
|
||||
<ol className="space-y-4 text-sm leading-relaxed text-slate-600">
|
||||
<li>
|
||||
<span className="font-semibold text-slate-900">1. Aufgaben entdecken </span>
|
||||
Stellt euer erstes Aufgabenpaket zusammen, das zu eurer Feier passt.
|
||||
</li>
|
||||
<li>
|
||||
<span className="font-semibold text-slate-900">2. Event anlegen </span>
|
||||
Benennt euer Event, legt Farben fest und erstellt den QR-Einladungslink.
|
||||
</li>
|
||||
<li>
|
||||
<span className="font-semibold text-slate-900">3. Link teilen </span>
|
||||
Gäste scannen, laden Fotos hoch und ihr entscheidet, was in euer Album kommt.
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<aside className="space-y-4 rounded-2xl border border-rose-100 bg-white/90 p-6 text-sm leading-relaxed text-slate-600 shadow-md">
|
||||
<p>
|
||||
Ihr könnt jederzeit unterbrechen und später weiter machen. Falls ihr Fragen habt, meldet euch unter{' '}
|
||||
<a className="font-medium text-rose-500 underline" href="mailto:hallo@fotospiel.de">
|
||||
hallo@fotospiel.de
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
Nach dem Login geleiten wir euch automatisch zur geführten Einrichtung. Dort entscheidet ihr auch,
|
||||
wann eure Gästegalerie sichtbar wird.
|
||||
</p>
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer className="border-t border-white/60 bg-white/70 py-6 text-center text-xs text-slate-500">
|
||||
Fotospiel • Eure Gäste gestalten eure Lieblingsmomente
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -11,12 +11,16 @@ import EventMembersPage from './pages/EventMembersPage';
|
||||
import EventTasksPage from './pages/EventTasksPage';
|
||||
import BillingPage from './pages/BillingPage';
|
||||
import TasksPage from './pages/TasksPage';
|
||||
import TaskCollectionsPage from './pages/TaskCollectionsPage';
|
||||
import EmotionsPage from './pages/EmotionsPage';
|
||||
import AuthCallbackPage from './pages/AuthCallbackPage';
|
||||
import WelcomeTeaserPage from './pages/WelcomeTeaserPage';
|
||||
import { useAuth } from './auth/context';
|
||||
import {
|
||||
ADMIN_AUTH_CALLBACK_PATH,
|
||||
ADMIN_BASE_PATH,
|
||||
ADMIN_HOME_PATH,
|
||||
ADMIN_LOGIN_PATH,
|
||||
ADMIN_PUBLIC_LANDING_PATH,
|
||||
} from './constants';
|
||||
import WelcomeLandingPage from './onboarding/pages/WelcomeLandingPage';
|
||||
import WelcomePackagesPage from './onboarding/pages/WelcomePackagesPage';
|
||||
@@ -42,32 +46,60 @@ function RequireAuth() {
|
||||
return <Outlet />;
|
||||
}
|
||||
|
||||
function LandingGate() {
|
||||
const { status } = useAuth();
|
||||
|
||||
if (status === 'loading') {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center text-sm text-muted-foreground">
|
||||
Bitte warten ...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (status === 'authenticated') {
|
||||
return <Navigate to={ADMIN_HOME_PATH} replace />;
|
||||
}
|
||||
|
||||
return <WelcomeTeaserPage />;
|
||||
}
|
||||
|
||||
export const router = createBrowserRouter([
|
||||
{ path: ADMIN_LOGIN_PATH, element: <LoginPage /> },
|
||||
{ path: ADMIN_AUTH_CALLBACK_PATH, element: <AuthCallbackPage /> },
|
||||
{
|
||||
path: ADMIN_BASE_PATH,
|
||||
element: <RequireAuth />,
|
||||
element: <Outlet />,
|
||||
children: [
|
||||
{ index: true, element: <DashboardPage /> },
|
||||
{ path: 'dashboard', element: <Navigate to={ADMIN_BASE_PATH} replace /> },
|
||||
{ path: 'events', element: <EventsPage /> },
|
||||
{ path: 'events/new', element: <EventFormPage /> },
|
||||
{ path: 'events/:slug', element: <EventDetailPage /> },
|
||||
{ path: 'events/:slug/edit', element: <EventFormPage /> },
|
||||
{ path: 'events/:slug/photos', element: <EventPhotosPage /> },
|
||||
{ path: 'events/:slug/members', element: <EventMembersPage /> },
|
||||
{ path: 'events/:slug/tasks', element: <EventTasksPage /> },
|
||||
{ path: 'tasks', element: <TasksPage /> },
|
||||
{ path: 'billing', element: <BillingPage /> },
|
||||
{ path: 'settings', element: <SettingsPage /> },
|
||||
{ path: 'welcome', element: <WelcomeLandingPage /> },
|
||||
{ path: 'welcome/packages', element: <WelcomePackagesPage /> },
|
||||
{ path: 'welcome/summary', element: <WelcomeOrderSummaryPage /> },
|
||||
{ path: 'welcome/event', element: <WelcomeEventSetupPage /> },
|
||||
{ index: true, element: <LandingGate /> },
|
||||
{ path: 'login', element: <LoginPage /> },
|
||||
{ path: 'auth/callback', element: <AuthCallbackPage /> },
|
||||
{
|
||||
element: <RequireAuth />,
|
||||
children: [
|
||||
{ path: 'dashboard', element: <DashboardPage /> },
|
||||
{ path: 'events', element: <EventsPage /> },
|
||||
{ path: 'events/new', element: <EventFormPage /> },
|
||||
{ path: 'events/:slug', element: <EventDetailPage /> },
|
||||
{ path: 'events/:slug/edit', element: <EventFormPage /> },
|
||||
{ path: 'events/:slug/photos', element: <EventPhotosPage /> },
|
||||
{ path: 'events/:slug/members', element: <EventMembersPage /> },
|
||||
{ path: 'events/:slug/tasks', element: <EventTasksPage /> },
|
||||
{ path: 'tasks', element: <TasksPage /> },
|
||||
{ path: 'task-collections', element: <TaskCollectionsPage /> },
|
||||
{ path: 'emotions', element: <EmotionsPage /> },
|
||||
{ path: 'billing', element: <BillingPage /> },
|
||||
{ path: 'settings', element: <SettingsPage /> },
|
||||
{ path: 'welcome', element: <WelcomeLandingPage /> },
|
||||
{ path: 'welcome/packages', element: <WelcomePackagesPage /> },
|
||||
{ path: 'welcome/summary', element: <WelcomeOrderSummaryPage /> },
|
||||
{ path: 'welcome/event', element: <WelcomeEventSetupPage /> },
|
||||
{ path: '', element: <Navigate to="dashboard" replace /> },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{ path: '*', element: <Navigate to={ADMIN_BASE_PATH} replace /> },
|
||||
{
|
||||
path: '*',
|
||||
element: <Navigate to={ADMIN_PUBLIC_LANDING_PATH} replace />,
|
||||
},
|
||||
]);
|
||||
|
||||
|
||||
|
||||
@@ -41,9 +41,18 @@ const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
|
||||
return
|
||||
}
|
||||
|
||||
console.log('Embla API initialized:', api)
|
||||
console.log('Embla options:', opts)
|
||||
console.log('Embla plugins:', plugins)
|
||||
|
||||
setCount(api.slideNodes().length)
|
||||
api.on("reInit", setCount)
|
||||
api.on("slideChanged", ({ slide }: { slide: number }) => setCurrent(slide))
|
||||
api.on("slideChanged", ({ slide }: { slide: number }) => {
|
||||
console.log('Slide changed to:', slide)
|
||||
setCurrent(slide)
|
||||
})
|
||||
api.on("pointerDown", () => console.log('Pointer down event'))
|
||||
api.on("pointerUp", () => console.log('Pointer up event'))
|
||||
setApi?.(api)
|
||||
}, [api, setApi])
|
||||
|
||||
@@ -55,11 +64,15 @@ const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
|
||||
"relative w-full",
|
||||
className
|
||||
)}
|
||||
onTouchStart={(e) => console.log('Carousel touch start:', e.touches.length)}
|
||||
onTouchMove={(e) => console.log('Carousel touch move:', e.touches.length)}
|
||||
onTouchEnd={(e) => console.log('Carousel touch end')}
|
||||
{...props}
|
||||
>
|
||||
<div
|
||||
className="overflow-hidden"
|
||||
ref={emblaRef}
|
||||
style={{ touchAction: 'pan-y pinch-zoom' }}
|
||||
>
|
||||
<div className="flex">{children}</div>
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,10 @@ import { Head, Link } from '@inertiajs/react';
|
||||
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import MarketingLayout from '@/layouts/mainWebsite';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
interface Props {
|
||||
posts: {
|
||||
@@ -44,37 +48,42 @@ const Blog: React.FC<Props> = ({ posts }) => {
|
||||
if (!posts.links || posts.links.length <= 3) return null;
|
||||
|
||||
return (
|
||||
<div className="mt-12 text-center">
|
||||
<div className="flex justify-center space-x-2">
|
||||
{posts.links.map((link, index) => {
|
||||
const href = resolvePaginationHref(link.url);
|
||||
<div className="mt-12">
|
||||
<Card className="p-6">
|
||||
<div className="flex justify-center">
|
||||
<div className="flex flex-wrap justify-center gap-2">
|
||||
{posts.links.map((link, index) => {
|
||||
const href = resolvePaginationHref(link.url);
|
||||
|
||||
const baseClasses = `px-3 py-2 rounded ${
|
||||
link.active
|
||||
? 'bg-[#FFB6C1] text-white'
|
||||
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
|
||||
}`;
|
||||
if (!href) {
|
||||
return (
|
||||
<Button
|
||||
key={index}
|
||||
variant={link.active ? "default" : "outline"}
|
||||
disabled
|
||||
className={link.active ? "bg-[#FFB6C1] hover:bg-[#FF69B4]" : ""}
|
||||
dangerouslySetInnerHTML={{ __html: link.label }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (!href) {
|
||||
return (
|
||||
<span
|
||||
key={index}
|
||||
className={`${baseClasses} cursor-default`}
|
||||
dangerouslySetInnerHTML={{ __html: link.label }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={index}
|
||||
href={href}
|
||||
className={baseClasses}
|
||||
dangerouslySetInnerHTML={{ __html: link.label }}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
return (
|
||||
<Button
|
||||
key={index}
|
||||
asChild
|
||||
variant={link.active ? "default" : "outline"}
|
||||
className={link.active ? "bg-[#FFB6C1] hover:bg-[#FF69B4]" : ""}
|
||||
>
|
||||
<Link
|
||||
href={href}
|
||||
dangerouslySetInnerHTML={{ __html: link.label }}
|
||||
/>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -83,54 +92,91 @@ const Blog: React.FC<Props> = ({ posts }) => {
|
||||
<MarketingLayout title={t('blog.title')}>
|
||||
<Head title={t('blog.title')} />
|
||||
{/* Hero Section */}
|
||||
<section className="bg-aurora-enhanced text-gray-900 dark:text-gray-100 py-20 px-4">
|
||||
<div className="container mx-auto text-center">
|
||||
<h1 className="text-4xl md:text-6xl font-bold mb-4 font-display">{t('blog.hero_title')}</h1>
|
||||
<p className="text-xl md:text-2xl mb-8 max-w-3xl mx-auto font-sans-marketing">{t('blog.hero_description')}</p>
|
||||
<Link href="#posts" className="bg-white dark:bg-gray-800 text-[#FFB6C1] px-8 py-4 rounded-full font-semibold text-lg font-sans-marketing hover:bg-gray-100 dark:hover:bg-gray-700 transition">
|
||||
{t('blog.hero_cta')}
|
||||
</Link>
|
||||
<section className="bg-aurora-enhanced py-20 px-4">
|
||||
<div className="container mx-auto max-w-4xl">
|
||||
<Card className="bg-white/10 backdrop-blur-sm border-white/20 shadow-xl">
|
||||
<CardContent className="p-8 md:p-12 text-center">
|
||||
<h1 className="text-4xl md:text-6xl font-bold mb-6 font-display text-gray-900 dark:text-gray-100">{t('blog.hero_title')}</h1>
|
||||
<p className="text-xl md:text-2xl mb-8 max-w-3xl mx-auto font-sans-marketing text-gray-800 dark:text-gray-200">{t('blog.hero_description')}</p>
|
||||
<Button
|
||||
asChild
|
||||
size="lg"
|
||||
className="bg-white text-[#FFB6C1] hover:bg-gray-100 px-8 py-4 rounded-full font-semibold text-lg font-sans-marketing"
|
||||
>
|
||||
<Link href="#posts">
|
||||
{t('blog.hero_cta')}
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Posts Section */}
|
||||
<section id="posts" className="py-20 px-4 bg-white dark:bg-gray-900">
|
||||
<div className="container mx-auto max-w-4xl">
|
||||
<h2 className="text-3xl font-bold text-center mb-12 font-display text-gray-900 dark:text-gray-100">{t('blog.posts_title')}</h2>
|
||||
<div className="container mx-auto max-w-6xl">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-bold font-display text-gray-900 dark:text-gray-100 mb-4">{t('blog.posts_title')}</h2>
|
||||
<Separator className="w-24 mx-auto" />
|
||||
</div>
|
||||
|
||||
{posts.data.length > 0 ? (
|
||||
<>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
{posts.data.map((post) => (
|
||||
<div key={post.id} className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg">
|
||||
<Card key={post.id} className="overflow-hidden hover:shadow-lg transition-shadow duration-300">
|
||||
{post.featured_image && (
|
||||
<img
|
||||
src={post.featured_image}
|
||||
alt={post.title}
|
||||
className="w-full h-48 object-cover rounded mb-4"
|
||||
/>
|
||||
<div className="aspect-video overflow-hidden">
|
||||
<img
|
||||
src={post.featured_image}
|
||||
alt={post.title}
|
||||
className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<h3 className="text-xl font-semibold mb-2 font-sans-marketing text-gray-900 dark:text-gray-100">
|
||||
<Link href={`${localizedPath(`/blog/${post.slug}`)}`} className="hover:text-[#FFB6C1]">
|
||||
{post.title?.[locale] || post.title?.de || post.title || 'No Title'}
|
||||
</Link>
|
||||
</h3>
|
||||
<p className="mb-4 text-gray-700 dark:text-gray-300 font-serif-custom">{post.excerpt?.[locale] || post.excerpt?.de || post.excerpt || 'No Excerpt'}</p>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-4 font-sans-marketing">
|
||||
{t('blog.by')} {post.author?.name?.[locale] || post.author?.name?.de || post.author?.name || t('blog.team')} | {t('blog.published_at')} {post.published_at}
|
||||
</p>
|
||||
<Link
|
||||
href={`${localizedPath(`/blog/${post.slug}`)}`}
|
||||
className="text-[#FFB6C1] font-semibold font-sans-marketing hover:underline"
|
||||
>
|
||||
{t('blog.read_more')}
|
||||
</Link>
|
||||
</div>
|
||||
<CardContent className="p-6">
|
||||
<CardTitle className="text-xl font-semibold mb-3 font-sans-marketing">
|
||||
<Link
|
||||
href={`${localizedPath(`/blog/${post.slug}`)}`}
|
||||
className="hover:text-[#FFB6C1] transition-colors"
|
||||
>
|
||||
{post.title?.[locale] || post.title?.de || post.title || 'No Title'}
|
||||
</Link>
|
||||
</CardTitle>
|
||||
|
||||
<p className="text-gray-700 dark:text-gray-300 font-serif-custom mb-4 leading-relaxed">
|
||||
{post.excerpt?.[locale] || post.excerpt?.de || post.excerpt || 'No Excerpt'}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-3 mb-4">
|
||||
<Badge variant="secondary" className="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300">
|
||||
{t('blog.by')} {post.author?.name?.[locale] || post.author?.name?.de || post.author?.name || t('blog.team')}
|
||||
</Badge>
|
||||
<Separator orientation="vertical" className="hidden sm:block h-4" />
|
||||
<Badge variant="outline" className="text-gray-500">
|
||||
{t('blog.published_at')} {new Date(post.published_at).toLocaleDateString('de-DE', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
})}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<Button asChild variant="ghost" className="p-0 h-auto text-[#FFB6C1] hover:text-[#FF69B4] hover:bg-transparent">
|
||||
<Link href={`${localizedPath(`/blog/${post.slug}`)}`} className="font-semibold">
|
||||
{t('blog.read_more')}
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
{renderPagination()}
|
||||
</>
|
||||
) : (
|
||||
<p className="text-center text-gray-600 dark:text-gray-400 font-serif-custom">{t('blog.empty')}</p>
|
||||
<Card className="p-8 text-center">
|
||||
<p className="text-gray-600 dark:text-gray-400 font-serif-custom">{t('blog.empty')}</p>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -3,6 +3,10 @@ import { Head, Link } from '@inertiajs/react';
|
||||
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import MarketingLayout from '@/layouts/mainWebsite';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
interface Props {
|
||||
post: {
|
||||
@@ -25,39 +29,82 @@ const BlogShow: React.FC<Props> = ({ post }) => {
|
||||
return (
|
||||
<MarketingLayout title={`${post.title} ${t('title_suffix')}`}>
|
||||
<Head title={`${post.title} ${t('title_suffix')}`} />
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-gradient-to-r from-[#FFB6C1] via-[#FFD700] to-[#87CEEB] text-white py-20 px-4">
|
||||
<div className="container mx-auto text-center">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-4">{post.title}</h1>
|
||||
<p className="text-lg mb-8">
|
||||
{t('by_author')} {post.author?.name || t('team')} | {t('published_on')} {new Date(post.published_at).toLocaleDateString('de-DE')}
|
||||
</p>
|
||||
{post.featured_image && (
|
||||
<img
|
||||
src={post.featured_image}
|
||||
alt={post.title}
|
||||
className="mx-auto rounded-lg shadow-lg max-w-2xl"
|
||||
/>
|
||||
)}
|
||||
<section className="bg-gradient-to-r from-[#FFB6C1] via-[#FFD700] to-[#87CEEB] py-20 px-4">
|
||||
<div className="container mx-auto max-w-4xl">
|
||||
<Card className="bg-white/10 backdrop-blur-sm border-white/20 text-white shadow-xl">
|
||||
<CardContent className="p-8 text-center">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-6 leading-tight">{post.title}</h1>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-8 text-lg">
|
||||
<Badge variant="secondary" className="bg-white/20 text-white border-white/30">
|
||||
{t('by_author')} {post.author?.name || t('team')}
|
||||
</Badge>
|
||||
<Separator orientation="vertical" className="hidden sm:block h-6 bg-white/30" />
|
||||
<Badge variant="secondary" className="bg-white/20 text-white border-white/30">
|
||||
{t('published_on')} {new Date(post.published_at).toLocaleDateString('de-DE', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
})}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{post.featured_image && (
|
||||
<div className="mt-8">
|
||||
<img
|
||||
src={post.featured_image}
|
||||
alt={post.title}
|
||||
className="mx-auto rounded-lg shadow-lg max-w-2xl w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Post Content */}
|
||||
<section className="py-20 px-4 bg-white">
|
||||
<div className="container mx-auto max-w-4xl prose prose-lg max-w-none">
|
||||
<div dangerouslySetInnerHTML={{ __html: post.content_html }} />
|
||||
<div className="container mx-auto max-w-4xl">
|
||||
<Card className="shadow-sm">
|
||||
<CardContent className="p-8 md:p-12">
|
||||
<div
|
||||
className="prose prose-lg prose-slate max-w-none
|
||||
prose-headings:text-slate-900 prose-headings:font-semibold
|
||||
prose-p:text-slate-700 prose-p:leading-relaxed
|
||||
prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline
|
||||
prose-strong:text-slate-900 prose-strong:font-semibold
|
||||
prose-code:text-slate-900 prose-code:bg-slate-100 prose-code:px-1 prose-code:py-0.5 prose-code:rounded
|
||||
prose-pre:bg-slate-900 prose-pre:text-slate-100
|
||||
prose-blockquote:border-l-4 prose-blockquote:border-blue-500 prose-blockquote:pl-6 prose-blockquote:italic
|
||||
prose-ul:text-slate-700 prose-ol:text-slate-700
|
||||
prose-li:text-slate-700"
|
||||
dangerouslySetInnerHTML={{ __html: post.content_html }}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Back to Blog */}
|
||||
<section className="py-10 px-4 bg-gray-50">
|
||||
<div className="container mx-auto text-center">
|
||||
<Link
|
||||
href={localizedPath('/blog')}
|
||||
className="bg-[#FFB6C1] text-white px-8 py-3 rounded-full font-semibold hover:bg-[#FF69B4] transition"
|
||||
>
|
||||
{t('back_to_blog')}
|
||||
</Link>
|
||||
<div className="container mx-auto max-w-4xl">
|
||||
<Card className="shadow-sm">
|
||||
<CardContent className="p-8 text-center">
|
||||
<Separator className="mb-6" />
|
||||
<Button
|
||||
asChild
|
||||
size="lg"
|
||||
className="bg-[#FFB6C1] hover:bg-[#FF69B4] text-white px-8 py-3 rounded-full font-semibold transition-colors"
|
||||
>
|
||||
<Link href={localizedPath('/blog')}>
|
||||
{t('back_to_blog')}
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
</MarketingLayout>
|
||||
|
||||
@@ -106,12 +106,15 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
|
||||
|
||||
{/* Mobile Carousel for Endcustomer Packages */}
|
||||
<div className="block md:hidden">
|
||||
<Carousel className="w-full max-w-md mx-auto">
|
||||
<Carousel className="w-full max-w-md mx-auto" opts={{ loop: true }}>
|
||||
<CarouselContent className="-ml-1">
|
||||
{endcustomerPackages.map((pkg) => (
|
||||
<CarouselItem key={pkg.id} className="pl-1 basis-full">
|
||||
<div
|
||||
className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border hover:shadow-lg transition-all duration-300"
|
||||
onTouchStart={(e) => console.log('Touch start on carousel item:', e.touches.length)}
|
||||
onTouchMove={(e) => console.log('Touch move on carousel item:', e.touches.length)}
|
||||
onTouchEnd={(e) => console.log('Touch end on carousel item')}
|
||||
>
|
||||
<div className="text-center mb-4">
|
||||
<ShoppingCart className="w-12 h-12 text-[#FFB6C1] mx-auto" />
|
||||
@@ -329,12 +332,15 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
|
||||
|
||||
{/* Mobile Carousel for Reseller Packages */}
|
||||
<div className="block md:hidden">
|
||||
<Carousel className="w-full max-w-md mx-auto">
|
||||
<Carousel className="w-full max-w-md mx-auto" opts={{ loop: true }}>
|
||||
<CarouselContent className="-ml-1">
|
||||
{resellerPackages.map((pkg) => (
|
||||
<CarouselItem key={pkg.id} className="pl-1 basis-full">
|
||||
<div
|
||||
className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border hover:shadow-lg transition-all duration-300"
|
||||
onTouchStart={(e) => console.log('Touch start on reseller carousel item:', e.touches.length)}
|
||||
onTouchMove={(e) => console.log('Touch move on reseller carousel item:', e.touches.length)}
|
||||
onTouchEnd={(e) => console.log('Touch end on reseller carousel item')}
|
||||
>
|
||||
<div className="text-center mb-4">
|
||||
<ShoppingCart className="w-12 h-12 text-[#FFD700] mx-auto" />
|
||||
|
||||
Reference in New Issue
Block a user