mirror of
https://github.com/LukeHagar/Sveltey.git
synced 2025-12-06 04:21:38 +00:00
218 lines
6.8 KiB
Svelte
218 lines
6.8 KiB
Svelte
<script lang="ts">
|
|
import {
|
|
User,
|
|
Settings,
|
|
CreditCard,
|
|
Key,
|
|
BarChart,
|
|
Shield,
|
|
Star,
|
|
Users,
|
|
Zap
|
|
} from 'lucide-svelte';
|
|
|
|
// The session is managed by the root layout and available through page.data
|
|
const { data } = $props();
|
|
|
|
const session = $derived(data.session);
|
|
const user = $derived(session?.user);
|
|
|
|
// Mock dashboard data - in a real app, this would come from your backend
|
|
const dashboardStats = [
|
|
{ label: 'Projects', value: '3', icon: BarChart, color: 'text-primary-500' },
|
|
{ label: 'API Calls', value: '12.4k', icon: Zap, color: 'text-success-500' },
|
|
{ label: 'Users', value: '24', icon: Users, color: 'text-warning-500' },
|
|
{ label: 'Uptime', value: '99.9%', icon: Shield, color: 'text-error-500' }
|
|
];
|
|
|
|
const quickActions = [
|
|
{
|
|
title: 'My Profile',
|
|
description: 'View and manage your personal information and application preferences.',
|
|
icon: User,
|
|
action: 'Go to Profile',
|
|
href: '/app/dashboard/profile',
|
|
available: false
|
|
},
|
|
{
|
|
title: 'Subscription',
|
|
description: 'Check your current plan, billing history, and manage your subscription.',
|
|
icon: CreditCard,
|
|
action: 'Manage Subscription',
|
|
href: '/dashboard/billing',
|
|
available: false
|
|
},
|
|
{
|
|
title: 'API Keys',
|
|
description: 'Manage your API keys for programmatic access to our services.',
|
|
icon: Key,
|
|
action: 'Manage Keys',
|
|
href: '/dashboard/api-keys',
|
|
available: false
|
|
},
|
|
{
|
|
title: 'Usage Analytics',
|
|
description: 'View detailed usage statistics and analytics for your account.',
|
|
icon: BarChart,
|
|
action: 'View Analytics',
|
|
href: '/dashboard/analytics',
|
|
available: false
|
|
},
|
|
{
|
|
title: 'Settings',
|
|
description: 'Configure your account settings, notifications, and preferences.',
|
|
icon: Settings,
|
|
action: 'Open Settings',
|
|
href: '/dashboard/settings',
|
|
available: false
|
|
}
|
|
];
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Dashboard - Welcome Back</title>
|
|
<meta
|
|
name="description"
|
|
content="Manage your account, view analytics, and access all your SaaS features from your personalized dashboard."
|
|
/>
|
|
</svelte:head>
|
|
|
|
<div class="container mx-auto space-y-20 py-20">
|
|
{#if session}
|
|
<!-- Welcome Header -->
|
|
<header class="mx-auto max-w-3xl space-y-4 text-center">
|
|
<h1 class="h1">
|
|
Welcome back, <span class="text-primary-500">{user?.user_metadata.full_name || 'User'}</span>!
|
|
</h1>
|
|
<p class="text-xl opacity-75">
|
|
Manage your account, monitor usage, and access all your SaaS features from your personalized
|
|
dashboard.
|
|
</p>
|
|
</header>
|
|
|
|
<hr class="hr mx-auto max-w-48" />
|
|
|
|
<!-- Stats Overview -->
|
|
<section class="space-y-8">
|
|
<h2 class="h2 text-center">Account Overview</h2>
|
|
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
|
{#each dashboardStats as stat}
|
|
<div
|
|
class="card preset-outlined-surface-200-800 space-y-4 p-6 text-center transition-all duration-300 hover:scale-105"
|
|
>
|
|
<stat.icon class={`mx-auto size-8 ${stat.color}`} />
|
|
<div class="space-y-1">
|
|
<div class="text-3xl font-bold">{stat.value}</div>
|
|
<p class="text-sm opacity-75">{stat.label}</p>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="hr mx-auto max-w-48" />
|
|
|
|
<!-- Quick Actions -->
|
|
<section class="space-y-8">
|
|
<h2 class="h2 text-center">Quick Actions</h2>
|
|
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
|
{#each quickActions as action}
|
|
<div
|
|
class="card preset-outlined-surface-200-800 group space-y-4 p-6 transition-all duration-300 hover:scale-105 md:p-8"
|
|
>
|
|
<action.icon
|
|
class="text-primary-500 size-10 transition-transform group-hover:scale-110"
|
|
/>
|
|
<h3 class="h4 group-hover:text-primary-500 transition-colors">{action.title}</h3>
|
|
<p class="text-sm opacity-75">{action.description}</p>
|
|
|
|
{#if action.available}
|
|
<a href={action.href} class="btn preset-filled-primary-500 w-full">
|
|
{action.action}
|
|
</a>
|
|
{:else}
|
|
<button class="btn preset-outlined-surface-200-800 w-full opacity-50" disabled>
|
|
{action.action} (Coming Soon)
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="hr mx-auto max-w-48" />
|
|
|
|
<!-- Account Status & Upgrade -->
|
|
<section class="space-y-8">
|
|
<div class="card preset-outlined-primary-500 space-y-6 p-8 text-center">
|
|
<div class="flex items-center justify-center gap-2">
|
|
<Star class="text-primary-500 size-8" />
|
|
<h3 class="h3 text-primary-500">Current Plan: Starter</h3>
|
|
</div>
|
|
<p class="mx-auto max-w-2xl opacity-75">
|
|
You're currently on our free Starter plan. Upgrade to unlock advanced features, higher
|
|
limits, and priority support.
|
|
</p>
|
|
<div class="flex flex-col justify-center gap-4 sm:flex-row">
|
|
<a href="/pricing" class="btn preset-filled-primary-500">
|
|
<Star class="size-5" />
|
|
<span>Upgrade Plan</span>
|
|
</a>
|
|
<button class="btn preset-outlined-surface-200-800" disabled>
|
|
<BarChart class="size-5" />
|
|
<span>View Usage</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Recent Activity (Placeholder) -->
|
|
<section class="space-y-8">
|
|
<h2 class="h2 text-center">Recent Activity</h2>
|
|
<div class="card preset-outlined-surface-200-800 space-y-4 p-8 text-center">
|
|
<BarChart class="text-primary-500 mx-auto size-16 opacity-50" />
|
|
<h3 class="h4">No recent activity</h3>
|
|
<p class="opacity-75">
|
|
Start using our services to see your activity here. Create your first project or make an
|
|
API call to get started.
|
|
</p>
|
|
<div class="flex flex-col justify-center gap-4 sm:flex-row">
|
|
<button class="btn preset-filled-primary-500" disabled>
|
|
Create Project (Coming Soon)
|
|
</button>
|
|
<button class="btn preset-outlined-surface-200-800" disabled>
|
|
View Documentation (Coming Soon)
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{:else if session === null}
|
|
<!-- Access Denied -->
|
|
<div class="card preset-outlined-error-500 mx-auto max-w-2xl space-y-6 p-8 text-center md:p-12">
|
|
<Shield class="text-error-500 mx-auto size-16" />
|
|
<h2 class="h3">Access Denied</h2>
|
|
<p class="opacity-75">
|
|
You need to be logged in to access your dashboard. Please sign in to continue.
|
|
</p>
|
|
<div class="flex flex-col justify-center gap-4 sm:flex-row">
|
|
<a href="/auth/login" class="btn preset-filled-primary-500">
|
|
<User class="size-5" />
|
|
<span>Sign In</span>
|
|
</a>
|
|
<a href="/auth/signup" class="btn preset-outlined-surface-200-800">
|
|
<span>Create Account</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{:else}
|
|
<!-- Loading State -->
|
|
<div
|
|
class="card preset-outlined-surface-200-800 mx-auto max-w-2xl space-y-4 p-8 text-center md:p-12"
|
|
>
|
|
<div class="border-primary-500 mx-auto h-12 w-12 animate-spin rounded-full border-b-2"></div>
|
|
<h3 class="h4">Loading your dashboard...</h3>
|
|
<p class="opacity-75">Please wait while we prepare your personalized experience.</p>
|
|
</div>
|
|
{/if}
|
|
</div>
|