- Tenant-Admin-PWA: Neues /event-admin/welcome Onboarding mit WelcomeHero, Packages-, Order-Summary- und Event-Setup-Pages, Zustandsspeicher, Routing-Guard und Dashboard-CTA für Erstnutzer; Filament-/admin-Login via Custom-View behoben.
- Brand/Theming: Marketing-Farb- und Typographievariablen in `resources/css/app.css` eingeführt, AdminLayout, Dashboardkarten und Onboarding-Komponenten entsprechend angepasst; Dokumentation (`docs/todo/tenant-admin-onboarding-fusion.md`, `docs/changes/...`) aktualisiert. - Checkout & Payments: Checkout-, PayPal-Controller und Tests für integrierte Stripe/PayPal-Flows sowie Paket-Billing-Abläufe überarbeitet; neue PayPal SDK-Factory und Admin-API-Helper (`resources/js/admin/api.ts`) schaffen Grundlage für Billing/Members/Tasks-Seiten. - DX & Tests: Neue Playwright/E2E-Struktur (docs/testing/e2e.md, `tests/e2e/tenant-onboarding-flow.test.ts`, Utilities), E2E-Tenant-Seeder und zusätzliche Übersetzungen/Factories zur Unterstützung der neuen Flows. - Marketing-Kommunikation: Automatische Kontakt-Bestätigungsmail (`ContactConfirmation` + Blade-Template) implementiert; Guest-PWA unter `/event` erreichbar. - Nebensitzung: Blogsystem gefixt und umfassenden BlogPostSeeder für Beispielinhalte angelegt.
This commit is contained in:
Codex Agent
@@ -0,0 +1,69 @@
|
||||
import React from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { LucideIcon } from 'lucide-react';
|
||||
|
||||
export interface OnboardingAction {
|
||||
id: string;
|
||||
label: string;
|
||||
description?: string;
|
||||
href?: string;
|
||||
onClick?: () => void;
|
||||
icon?: LucideIcon;
|
||||
variant?: 'primary' | 'secondary';
|
||||
disabled?: boolean;
|
||||
buttonLabel?: string;
|
||||
}
|
||||
|
||||
interface OnboardingCTAListProps {
|
||||
actions: OnboardingAction[];
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function OnboardingCTAList({ actions, className }: OnboardingCTAListProps) {
|
||||
if (!actions.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn('grid gap-4 md:grid-cols-2', className)}>
|
||||
{actions.map(({ id, label, description, href, onClick, icon: Icon, variant = 'primary', disabled, buttonLabel }) => (
|
||||
<div
|
||||
key={id}
|
||||
className="flex flex-col gap-3 rounded-2xl border border-brand-rose-soft bg-brand-card p-5 shadow-brand-primary backdrop-blur"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
{Icon && (
|
||||
<span className="flex size-10 items-center justify-center rounded-full bg-brand-rose-soft text-brand-rose shadow-inner">
|
||||
<Icon className="size-5" />
|
||||
</span>
|
||||
)}
|
||||
<span className="text-base font-semibold text-brand-slate">{label}</span>
|
||||
</div>
|
||||
{description && (
|
||||
<p className="text-sm text-brand-navy/80">{description}</p>
|
||||
)}
|
||||
<div>
|
||||
<Button
|
||||
variant="default"
|
||||
size="lg"
|
||||
className={cn(
|
||||
'w-full rounded-full transition-all',
|
||||
variant === 'secondary'
|
||||
? 'bg-brand-gold text-brand-slate shadow-md shadow-amber-200/40 hover:bg-[var(--brand-gold-soft)]'
|
||||
: 'bg-brand-rose text-white shadow-md shadow-rose-400/30 hover:bg-[var(--brand-rose-strong)]'
|
||||
)}
|
||||
disabled={disabled}
|
||||
onClick={onClick}
|
||||
{...(href ? { asChild: true } : {})}
|
||||
>
|
||||
{href ? <a href={href}>{buttonLabel ?? label}</a> : buttonLabel ?? label}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
OnboardingCTAList.displayName = 'OnboardingCTAList';
|
||||
@@ -0,0 +1,53 @@
|
||||
import React from 'react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { LucideIcon } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export interface HighlightItem {
|
||||
id: string;
|
||||
icon: LucideIcon;
|
||||
title: string;
|
||||
description: string;
|
||||
badge?: string;
|
||||
}
|
||||
|
||||
interface OnboardingHighlightsGridProps {
|
||||
items: HighlightItem[];
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function OnboardingHighlightsGrid({ items, className }: OnboardingHighlightsGridProps) {
|
||||
if (!items.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn('grid gap-4 md:grid-cols-3', className)}>
|
||||
{items.map(({ id, icon: Icon, title, description, badge }) => (
|
||||
<Card
|
||||
key={id}
|
||||
className="relative overflow-hidden rounded-3xl border border-white/70 bg-white/90 shadow-xl shadow-rose-100/40"
|
||||
>
|
||||
<CardHeader className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="flex size-12 items-center justify-center rounded-full bg-rose-100 text-rose-500 shadow-inner">
|
||||
<Icon className="size-6" />
|
||||
</span>
|
||||
{badge && (
|
||||
<span className="rounded-full bg-rose-100 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-rose-500">
|
||||
{badge}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<CardTitle className="text-lg font-semibold text-slate-900">{title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-slate-600">{description}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
OnboardingHighlightsGrid.displayName = 'OnboardingHighlightsGrid';
|
||||
@@ -0,0 +1,67 @@
|
||||
import React from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export interface TenantWelcomeLayoutProps {
|
||||
eyebrow?: string;
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
headerAction?: React.ReactNode;
|
||||
footer?: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export function TenantWelcomeLayout({
|
||||
eyebrow,
|
||||
title,
|
||||
subtitle,
|
||||
headerAction,
|
||||
footer,
|
||||
children,
|
||||
}: TenantWelcomeLayoutProps) {
|
||||
React.useEffect(() => {
|
||||
document.body.classList.add('tenant-admin-theme', 'tenant-admin-welcome-theme');
|
||||
|
||||
return () => {
|
||||
document.body.classList.remove('tenant-admin-theme', 'tenant-admin-welcome-theme');
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen w-full bg-brand-gradient text-brand-slate transition-colors duration-500 ease-out">
|
||||
<div className="mx-auto flex min-h-screen w-full max-w-5xl px-6 py-12 md:py-16 lg:px-10">
|
||||
<div className="flex w-full flex-col gap-10 rounded-[40px] border border-brand-rose-soft bg-brand-card p-8 shadow-brand-primary backdrop-blur-xl md:gap-14 md:p-14">
|
||||
<header className="flex flex-col gap-6 md:flex-row md:items-start md:justify-between">
|
||||
<div className="max-w-xl">
|
||||
{eyebrow && (
|
||||
<p className="text-xs uppercase tracking-[0.35em] text-brand-rose">{eyebrow}</p>
|
||||
)}
|
||||
{title && (
|
||||
<h1 className="mt-2 font-display text-4xl font-semibold tracking-tight text-brand-slate md:text-5xl">
|
||||
{title}
|
||||
</h1>
|
||||
)}
|
||||
{subtitle && (
|
||||
<p className="mt-4 text-base font-sans-marketing text-brand-navy/80 md:text-lg">
|
||||
{subtitle}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{headerAction && <div className="flex shrink-0 items-center">{headerAction}</div>}
|
||||
</header>
|
||||
|
||||
<main className="flex flex-1 flex-col gap-8">
|
||||
{children}
|
||||
</main>
|
||||
|
||||
{footer && (
|
||||
<footer className="flex flex-col items-center gap-4 text-sm text-brand-navy/70 md:flex-row md:justify-between">
|
||||
{footer}
|
||||
</footer>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
TenantWelcomeLayout.displayName = 'TenantWelcomeLayout';
|
||||
93
resources/js/admin/onboarding/components/WelcomeHero.tsx
Normal file
93
resources/js/admin/onboarding/components/WelcomeHero.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
import React from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { LucideIcon } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface ActionProps {
|
||||
label: string;
|
||||
onClick?: () => void;
|
||||
href?: string;
|
||||
icon?: LucideIcon;
|
||||
variant?: 'default' | 'outline';
|
||||
}
|
||||
|
||||
export interface WelcomeHeroProps {
|
||||
eyebrow?: string;
|
||||
title: string;
|
||||
scriptTitle?: string;
|
||||
description?: string;
|
||||
actions?: ActionProps[];
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function WelcomeHero({
|
||||
eyebrow,
|
||||
title,
|
||||
scriptTitle,
|
||||
description,
|
||||
actions = [],
|
||||
className,
|
||||
}: WelcomeHeroProps) {
|
||||
return (
|
||||
<section
|
||||
className={cn(
|
||||
'rounded-3xl border border-brand-rose-soft bg-brand-card p-8 shadow-brand-primary backdrop-blur-xl',
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div className="space-y-4 text-center md:space-y-6">
|
||||
{eyebrow && (
|
||||
<p className="text-xs uppercase tracking-[0.35em] text-brand-rose md:text-sm">
|
||||
{eyebrow}
|
||||
</p>
|
||||
)}
|
||||
<h2 className="font-display text-3xl font-semibold tracking-tight text-brand-slate md:text-4xl">
|
||||
{title}
|
||||
</h2>
|
||||
{scriptTitle && (
|
||||
<p className="font-script text-2xl text-brand-rose md:text-3xl">
|
||||
{scriptTitle}
|
||||
</p>
|
||||
)}
|
||||
{description && (
|
||||
<p className="mx-auto max-w-2xl text-base font-sans-marketing text-brand-navy/80 md:text-lg">
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
{actions.length > 0 && (
|
||||
<div className="flex flex-col items-center gap-3 pt-4 md:flex-row md:justify-center">
|
||||
{actions.map(({ label, onClick, href, icon: Icon, variant = 'default' }) => (
|
||||
<Button
|
||||
key={label}
|
||||
size="lg"
|
||||
variant={variant === 'outline' ? 'outline' : 'default'}
|
||||
className={cn(
|
||||
'min-w-[220px] rounded-full px-6',
|
||||
variant === 'outline'
|
||||
? 'border-brand-rose-soft text-brand-rose hover:bg-brand-rose-soft/40'
|
||||
: 'bg-brand-rose text-white shadow-md shadow-rose-400/40 hover:bg-[var(--brand-rose-strong)]'
|
||||
)}
|
||||
onClick={onClick}
|
||||
{...(href ? { asChild: true } : {})}
|
||||
>
|
||||
{href ? (
|
||||
<a href={href} className="flex items-center justify-center gap-2">
|
||||
{Icon && <Icon className="h-4 w-4" />}
|
||||
<span>{label}</span>
|
||||
</a>
|
||||
) : (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
{Icon && <Icon className="h-4 w-4" />}
|
||||
<span>{label}</span>
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
WelcomeHero.displayName = 'WelcomeHero';
|
||||
65
resources/js/admin/onboarding/components/WelcomeStepCard.tsx
Normal file
65
resources/js/admin/onboarding/components/WelcomeStepCard.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import React from 'react';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import { LucideIcon } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export interface WelcomeStepCardProps {
|
||||
step: number;
|
||||
totalSteps: number;
|
||||
title: string;
|
||||
description?: string;
|
||||
icon?: LucideIcon;
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function WelcomeStepCard({
|
||||
step,
|
||||
totalSteps,
|
||||
title,
|
||||
description,
|
||||
icon: Icon,
|
||||
children,
|
||||
className,
|
||||
}: WelcomeStepCardProps) {
|
||||
const progress = Math.min(Math.max(step, 1), totalSteps);
|
||||
const percent = totalSteps <= 1 ? 100 : Math.round((progress / totalSteps) * 100);
|
||||
|
||||
return (
|
||||
<Card
|
||||
className={cn(
|
||||
'relative overflow-hidden rounded-3xl border border-brand-rose-soft bg-brand-card shadow-brand-primary',
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-brand-rose-soft via-[var(--brand-gold-soft)] to-brand-sky-soft" />
|
||||
<CardHeader className="space-y-4 pt-8">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<span className="text-xs font-semibold uppercase tracking-[0.4em] text-brand-rose">
|
||||
Step {progress} / {totalSteps}
|
||||
</span>
|
||||
<div className="w-28">
|
||||
<Progress value={percent} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-4">
|
||||
{Icon && (
|
||||
<span className="flex size-12 items-center justify-center rounded-full bg-brand-rose-soft text-brand-rose shadow-inner">
|
||||
<Icon className="size-5" />
|
||||
</span>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
<CardTitle className="font-display text-2xl font-semibold text-brand-slate md:text-3xl">{title}</CardTitle>
|
||||
{description && (
|
||||
<CardDescription className="text-base font-sans-marketing text-brand-navy/80">{description}</CardDescription>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6 pb-10">{children}</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
WelcomeStepCard.displayName = 'WelcomeStepCard';
|
||||
Reference in New Issue
Block a user