tknuth/QR-master
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refine onboarding UI and fix dashboard checklist progress

Browse Source
This commit is contained in:
Timo Knuth
2026-04-23 19:03:41 +02:00
parent fc0e6a0a69
commit eacaef1fbd
7 changed files with 316 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/app/(main)/(app)/dashboard/page.tsx
View File

@@ -320,27 +320,11 @@ export default function DashboardPage() {
}
};
const getPlanBadgeColor = (plan: string) => {
switch (plan) {
case 'PRO':
return 'info';
case 'BUSINESS':
return 'warning';
default:
return 'default';
}
};
const getPlanEmoji = (plan: string) => {
// No emojis anymore
return '';
};
return (
<div className="space-y-8">
return (
<div className="space-y-6">
{/* Header with Plan Badge */}
<div className="flex items-start justify-between">
<div>
<div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
<div className="min-w-0">
<h1 className="text-3xl font-bold text-gray-900">{t('dashboard.title')}</h1>
<p className="text-gray-600 mt-2">
{!loading && qrCodes.length === 0
@@ -348,17 +332,17 @@ export default function DashboardPage() {
: t('dashboard.subtitle')}
</p>
</div>
<div className="flex items-center space-x-3">
<Badge variant={getPlanBadgeColor(userPlan)} className="text-lg px-4 py-2">
{userPlan} Plan
</Badge>
{userPlan === 'FREE' && (
<Link href="/pricing">
<Button variant="primary">Upgrade</Button>
</Link>
)}
</div>
</div>
<div className="flex flex-wrap items-center gap-3">
<Badge className="border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-700">
{userPlan} Plan
</Badge>
{userPlan === 'FREE' && (
<Link href="/pricing">
<Button className="bg-slate-900 text-white hover:bg-slate-800">Upgrade</Button>
</Link>
)}
</div>
</div>
{/* Stats Grid */}
<OnboardingChecklist state={onboardingState} />
@@ -373,9 +357,9 @@ export default function DashboardPage() {
{/* Recent QR Codes */}
<div>
<div className="flex items-center justify-between mb-6">
<h2 className="text-xl font-semibold text-gray-900">{t('dashboard.recent_codes')}</h2>
<div className="flex gap-3">
<div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<h2 className="text-xl font-semibold text-gray-900">{t('dashboard.recent_codes')}</h2>
<div className="flex flex-wrap gap-3">
{qrCodes.length > 0 && (
<Button
variant="outline"
@@ -385,12 +369,12 @@ export default function DashboardPage() {
>
{deletingAll ? 'Deleting...' : 'Delete All'}
</Button>
)}
<Link href="/create">
<Button>Create New QR Code</Button>
</Link>
</div>
</div>
)}
<Link href="/create">
<Button className="bg-slate-900 text-white hover:bg-slate-800">Create New QR Code</Button>
</Link>
</div>
</div>
{loading ? (
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -410,14 +394,14 @@ export default function DashboardPage() {
))}
</div>
) : qrCodes.length === 0 ? (
<div className="text-center py-16 border-2 border-dashed border-gray-200 rounded-xl">
<div className="rounded-[24px] border border-dashed border-gray-200 py-16 text-center">
<QrCode className="w-12 h-12 text-gray-300 mx-auto mb-4" />
<h3 className="text-lg font-semibold text-gray-700 mb-2">Create your first QR code</h3>
<p className="text-gray-500 mb-6 max-w-sm mx-auto">
You have {FREE_DYNAMIC_QR_LIMIT} free dynamic QR codes. They redirect wherever you want and track every scan.
</p>
<Link href="/create">
<Button>Create QR Code — it takes 90 seconds</Button>
<Button className="bg-slate-900 text-white hover:bg-slate-800">Create QR Code — it takes 90 seconds</Button>
</Link>
</div>
) : (