- 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:
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