Merge version_2 into main #1
285
src/app/dashboard/page.tsx
Normal file
285
src/app/dashboard/page.tsx
Normal file
@@ -0,0 +1,285 @@
|
||||
"use client"
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import { AlertCircle, CheckCircle2, TrendingUp, Users, Zap, Award, Lock } from 'lucide-react';
|
||||
|
||||
interface DashboardCard {
|
||||
id: string;
|
||||
label: string;
|
||||
value: string;
|
||||
subtext?: string;
|
||||
icon?: React.ReactNode;
|
||||
}
|
||||
|
||||
interface Task {
|
||||
id: string;
|
||||
title: string;
|
||||
status: 'pending' | 'completed';
|
||||
}
|
||||
|
||||
export default function DashboardPage() {
|
||||
const greeting = "Welcome back, Alex";
|
||||
const currentTime = new Date().toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
|
||||
|
||||
const tasks: Task[] = [
|
||||
{ id: '1', title: 'Review pending transactions', status: 'pending' },
|
||||
{ id: '2', title: 'Update account settings', status: 'completed' },
|
||||
{ id: '3', title: 'Verify two-factor authentication', status: 'pending' },
|
||||
{ id: '4', title: 'Download monthly report', status: 'completed' }
|
||||
];
|
||||
|
||||
const successRate = 87;
|
||||
const completedTasks = tasks.filter(t => t.status === 'completed').length;
|
||||
|
||||
const quickStats: DashboardCard[] = [
|
||||
{ id: '1', label: 'Account Balance', value: '$12,450.50', icon: <Zap className="w-5 h-5" /> },
|
||||
{ id: '2', label: 'Active Plans', value: '3', icon: <Award className="w-5 h-5" /> },
|
||||
{ id: '3', label: 'Security Level', value: 'Premium', icon: <Lock className="w-5 h-5" /> },
|
||||
{ id: '4', label: 'Transactions', value: '24 this month', icon: <TrendingUp className="w-5 h-5" /> }
|
||||
];
|
||||
|
||||
const accountsOverview = [
|
||||
{ id: '1', name: 'Checking Account', balance: '$8,250.00', status: 'active' },
|
||||
{ id: '2', name: 'Savings Account', balance: '$4,200.50', status: 'active' }
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="Dashboard"
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Accounts", id: "accounts" },
|
||||
{ name: "Tasks", id: "tasks" },
|
||||
{ name: "Support", id: "#" }
|
||||
]}
|
||||
button={{ text: "Settings", href: "#" }}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<main className="min-h-screen bg-background">
|
||||
{/* Header Section */}
|
||||
<div id="header" data-section="header" className="pt-32 pb-8 px-6 md:px-10">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="flex justify-between items-start mb-8">
|
||||
<div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-foreground mb-2">{greeting}</h1>
|
||||
<p className="text-base md:text-lg text-foreground/70">{currentTime}</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-sm text-foreground/60">Last login</p>
|
||||
<p className="text-base font-semibold text-foreground">Today at 9:42 AM</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Announcement Banner */}
|
||||
<div id="announcement" data-section="announcement" className="px-6 md:px-10 mb-8">
|
||||
<div className="max-w-7xl mx-auto bg-primary-cta/10 border border-primary-cta/30 rounded-lg p-4 md:p-6 flex items-start gap-4">
|
||||
<AlertCircle className="w-6 h-6 text-primary-cta flex-shrink-0 mt-1" />
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-foreground mb-1">System Maintenance Scheduled</h3>
|
||||
<p className="text-sm text-foreground/70">We'll be performing scheduled maintenance on Saturday from 2:00 AM to 4:00 AM UTC. Services will be temporarily unavailable.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* System Status Bar */}
|
||||
<div id="systemStatus" data-section="systemStatus" className="px-6 md:px-10 mb-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div className="bg-card rounded-lg p-4 border border-accent/20">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-foreground/70">API Status</span>
|
||||
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
|
||||
</div>
|
||||
<p className="text-sm font-medium text-foreground mt-1">Operational</p>
|
||||
</div>
|
||||
<div className="bg-card rounded-lg p-4 border border-accent/20">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-foreground/70">Database</span>
|
||||
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
|
||||
</div>
|
||||
<p className="text-sm font-medium text-foreground mt-1">Operational</p>
|
||||
</div>
|
||||
<div className="bg-card rounded-lg p-4 border border-accent/20">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-foreground/70">CDN</span>
|
||||
<div className="w-2 h-2 bg-yellow-500 rounded-full"></div>
|
||||
</div>
|
||||
<p className="text-sm font-medium text-foreground mt-1">Degraded</p>
|
||||
</div>
|
||||
<div className="bg-card rounded-lg p-4 border border-accent/20">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-foreground/70">Services</span>
|
||||
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
|
||||
</div>
|
||||
<p className="text-sm font-medium text-foreground mt-1">Operational</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Accounts Overview */}
|
||||
<div id="accounts" data-section="accounts" className="px-6 md:px-10 mb-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<h2 className="text-2xl font-bold text-foreground mb-6">Accounts Overview</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{accountsOverview.map((account) => (
|
||||
<div key={account.id} className="bg-card rounded-lg p-6 border border-accent/20 shadow-sm">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="font-semibold text-foreground">{account.name}</h3>
|
||||
<span className="text-xs bg-green-100 text-green-800 px-3 py-1 rounded-full">{account.status}</span>
|
||||
</div>
|
||||
<p className="text-2xl font-bold text-primary-cta">{account.balance}</p>
|
||||
<p className="text-sm text-foreground/60 mt-2">Account Number: ****5432</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tasks and Success Rate */}
|
||||
<div id="tasks" data-section="tasks" className="px-6 md:px-10 mb-8">
|
||||
<div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Tasks Card */}
|
||||
<div className="lg:col-span-2 bg-card rounded-lg p-6 border border-accent/20 shadow-sm">
|
||||
<h2 className="text-2xl font-bold text-foreground mb-6">Pending Tasks</h2>
|
||||
<div className="space-y-3">
|
||||
{tasks.map((task) => (
|
||||
<div key={task.id} className="flex items-center gap-3 p-3 bg-background/50 rounded-lg">
|
||||
{task.status === 'completed' ? (
|
||||
<CheckCircle2 className="w-5 h-5 text-green-500 flex-shrink-0" />
|
||||
) : (
|
||||
<div className="w-5 h-5 border-2 border-accent rounded-full flex-shrink-0"></div>
|
||||
)}
|
||||
<span className={task.status === 'completed' ? 'line-through text-foreground/50' : 'text-foreground'}>
|
||||
{task.title}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Success Rate Card */}
|
||||
<div className="bg-card rounded-lg p-6 border border-accent/20 shadow-sm">
|
||||
<h3 className="text-lg font-bold text-foreground mb-6">Success Rate</h3>
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<div className="relative w-32 h-32 mb-4">
|
||||
<svg className="w-full h-full transform -rotate-90">
|
||||
<circle
|
||||
cx="64"
|
||||
cy="64"
|
||||
r="56"
|
||||
stroke="currentColor"
|
||||
strokeWidth="8"
|
||||
fill="none"
|
||||
className="text-accent/30"
|
||||
/>
|
||||
<circle
|
||||
cx="64"
|
||||
cy="64"
|
||||
r="56"
|
||||
stroke="currentColor"
|
||||
strokeWidth="8"
|
||||
fill="none"
|
||||
strokeDasharray={`${(successRate / 100) * (2 * Math.PI * 56)} ${2 * Math.PI * 56}`}
|
||||
className="text-primary-cta transition-all duration-500"
|
||||
/>
|
||||
</svg>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<span className="text-3xl font-bold text-primary-cta">{successRate}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-foreground/70 text-center mt-2">{completedTasks} of {tasks.length} tasks completed</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Stats */}
|
||||
<div id="quickStats" data-section="quickStats" className="px-6 md:px-10 mb-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<h2 className="text-2xl font-bold text-foreground mb-6">Quick Stats</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{quickStats.map((stat) => (
|
||||
<div key={stat.id} className="bg-card rounded-lg p-5 border border-accent/20 shadow-sm hover:shadow-md transition-shadow">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-foreground/70 mb-2">{stat.label}</p>
|
||||
<p className="text-xl font-bold text-foreground">{stat.value}</p>
|
||||
</div>
|
||||
{stat.icon && <div className="text-primary-cta/60">{stat.icon}</div>}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* License Redemption Form */}
|
||||
<div id="licenseRedemption" data-section="licenseRedemption" className="px-6 md:px-10 pb-12">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="bg-card rounded-lg p-8 border border-accent/20 shadow-sm">
|
||||
<h2 className="text-2xl font-bold text-foreground mb-2">Redeem License Key</h2>
|
||||
<p className="text-foreground/70 mb-6">Enter your license key to activate premium features and unlock full access.</p>
|
||||
|
||||
<form className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">License Key</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="XXXX-XXXX-XXXX-XXXX"
|
||||
className="w-full px-4 py-3 bg-background border border-accent/30 rounded-lg text-foreground placeholder-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary-cta/50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">Activation Email</label>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="your@email.com"
|
||||
className="w-full px-4 py-3 bg-background border border-accent/30 rounded-lg text-foreground placeholder-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary-cta/50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="terms"
|
||||
className="w-4 h-4 accent-primary-cta rounded"
|
||||
/>
|
||||
<label htmlFor="terms" className="text-sm text-foreground/70">
|
||||
I agree to the terms and conditions
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full md:w-auto bg-primary-cta text-primary-cta-text px-8 py-3 rounded-lg font-medium hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Redeem License
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user