292 lines
10 KiB
TypeScript
292 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
|
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
|
import { Lock, Shield, Zap, Clock, MapPin, Smartphone } from "lucide-react";
|
|
|
|
export default function DashboardPage() {
|
|
const navItems = [
|
|
{ name: "Home", id: "/" },
|
|
{ name: "Features", id: "#features" },
|
|
{ name: "Security", id: "#metrics" },
|
|
{ name: "Sign In", id: "https://example.com/login" },
|
|
{ name: "Sign Up", id: "https://example.com/signup" },
|
|
];
|
|
|
|
const footerColumns = [
|
|
{
|
|
title: "Product",
|
|
items: [
|
|
{ label: "Features", href: "#features" },
|
|
{ label: "Security", href: "#metrics" },
|
|
{ label: "Pricing", href: "#" },
|
|
{ label: "Documentation", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{ label: "About Us", href: "#" },
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Contact", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Resources",
|
|
items: [
|
|
{ label: "API Docs", href: "#" },
|
|
{ label: "Security Guide", href: "#" },
|
|
{ label: "FAQ", href: "#faq" },
|
|
{ label: "Status", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal",
|
|
items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookie Policy", href: "#" },
|
|
{ label: "Compliance", href: "#" },
|
|
],
|
|
},
|
|
];
|
|
|
|
const activeSessions = [
|
|
{
|
|
id: 1,
|
|
device: "MacBook Pro",
|
|
browser: "Chrome on macOS",
|
|
location: "San Francisco, CA",
|
|
lastActive: "5 minutes ago",
|
|
ip: "192.168.1.100",
|
|
icon: Smartphone,
|
|
},
|
|
{
|
|
id: 2,
|
|
device: "iPhone 14 Pro",
|
|
browser: "Safari on iOS",
|
|
location: "San Francisco, CA",
|
|
lastActive: "2 hours ago",
|
|
ip: "192.168.1.101",
|
|
icon: Smartphone,
|
|
},
|
|
{
|
|
id: 3,
|
|
device: "iPad Air",
|
|
browser: "Safari on iPad OS",
|
|
location: "San Francisco, CA",
|
|
lastActive: "1 day ago",
|
|
ip: "192.168.1.102",
|
|
icon: Smartphone,
|
|
},
|
|
];
|
|
|
|
const securityMetrics = [
|
|
{
|
|
label: "Password Strength",
|
|
value: "Strong",
|
|
status: "good",
|
|
icon: Lock,
|
|
},
|
|
{
|
|
label: "Two-Factor Auth",
|
|
value: "Enabled",
|
|
status: "good",
|
|
icon: Shield,
|
|
},
|
|
{
|
|
label: "Last Password Change",
|
|
value: "30 days ago",
|
|
status: "warning",
|
|
icon: Clock,
|
|
},
|
|
{
|
|
label: "Account Security",
|
|
value: "Excellent",
|
|
status: "good",
|
|
icon: Zap,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="compact"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="gradient-radial"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple brandName="AuthVault" navItems={navItems} />
|
|
</div>
|
|
|
|
<div className="min-h-screen bg-background py-8 md:py-16">
|
|
<div className="max-w-6xl mx-auto px-4 md:px-6">
|
|
<div className="mb-12">
|
|
<h1 className="text-4xl md:text-5xl font-bold mb-4 text-foreground">
|
|
Security Dashboard
|
|
</h1>
|
|
<p className="text-lg text-gray-600">
|
|
Monitor your account security and manage your active sessions
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
|
|
{securityMetrics.map((metric, idx) => {
|
|
const Icon = metric.icon;
|
|
return (
|
|
<div
|
|
key={idx}
|
|
className="bg-card rounded-lg p-6 border border-gray-200 shadow-sm"
|
|
>
|
|
<div className="flex items-start justify-between mb-4">
|
|
<div>
|
|
<p className="text-sm text-gray-600 mb-2">
|
|
{metric.label}
|
|
</p>
|
|
<p className="text-2xl font-bold text-foreground">
|
|
{metric.value}
|
|
</p>
|
|
</div>
|
|
<div
|
|
className={`p-3 rounded-lg ${
|
|
metric.status === "good"
|
|
? "bg-green-100 text-green-600"
|
|
: "bg-yellow-100 text-yellow-600"
|
|
}`}
|
|
>
|
|
<Icon className="w-6 h-6" />
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={`h-1 rounded-full ${
|
|
metric.status === "good"
|
|
? "bg-green-500"
|
|
: "bg-yellow-500"
|
|
}`}
|
|
/>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<div className="bg-card rounded-lg p-8 border border-gray-200 shadow-sm">
|
|
<div className="mb-6">
|
|
<h2 className="text-2xl font-bold text-foreground mb-2">
|
|
Active Sessions
|
|
</h2>
|
|
<p className="text-gray-600">
|
|
Manage your devices and sign out from other sessions if needed
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{activeSessions.map((session) => (
|
|
<div
|
|
key={session.id}
|
|
className="flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
|
|
>
|
|
<div className="flex items-center gap-4 flex-1">
|
|
<div className="p-3 bg-primary-cta bg-opacity-10 rounded-lg">
|
|
<Smartphone className="w-6 h-6 text-primary-cta" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="font-semibold text-foreground">
|
|
{session.device}
|
|
</p>
|
|
<p className="text-sm text-gray-600">{session.browser}</p>
|
|
<div className="flex items-center gap-4 mt-2 text-xs text-gray-500">
|
|
<div className="flex items-center gap-1">
|
|
<MapPin className="w-3 h-3" />
|
|
{session.location}
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<Clock className="w-3 h-3" />
|
|
{session.lastActive}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button className="px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-50 rounded-lg transition-colors">
|
|
Sign Out
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-6 pt-6 border-t border-gray-200">
|
|
<button className="px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-50 rounded-lg transition-colors">
|
|
Sign Out From All Sessions
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-12 grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="bg-card rounded-lg p-8 border border-gray-200 shadow-sm">
|
|
<h3 className="text-xl font-bold text-foreground mb-4">
|
|
Account Settings
|
|
</h3>
|
|
<div className="space-y-4">
|
|
<button className="w-full px-4 py-3 text-left bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors text-foreground font-medium">
|
|
Change Password
|
|
</button>
|
|
<button className="w-full px-4 py-3 text-left bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors text-foreground font-medium">
|
|
Update Email
|
|
</button>
|
|
<button className="w-full px-4 py-3 text-left bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors text-foreground font-medium">
|
|
Manage Two-Factor Auth
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-card rounded-lg p-8 border border-gray-200 shadow-sm">
|
|
<h3 className="text-xl font-bold text-foreground mb-4">
|
|
Security Alerts
|
|
</h3>
|
|
<div className="space-y-3">
|
|
<div className="flex items-start gap-3 p-3 bg-green-50 rounded-lg">
|
|
<div className="w-2 h-2 rounded-full bg-green-600 mt-1.5" />
|
|
<div>
|
|
<p className="font-medium text-green-900 text-sm">
|
|
System Status: Healthy
|
|
</p>
|
|
<p className="text-xs text-green-700">
|
|
No security issues detected
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-3 p-3 bg-blue-50 rounded-lg">
|
|
<div className="w-2 h-2 rounded-full bg-blue-600 mt-1.5" />
|
|
<div>
|
|
<p className="font-medium text-blue-900 text-sm">
|
|
Regular Backups Active
|
|
</p>
|
|
<p className="text-xs text-blue-700">
|
|
Last backup: Today at 02:00 AM
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={footerColumns}
|
|
bottomLeftText="© 2025 AuthVault. All rights reserved. Enterprise-grade security solutions."
|
|
bottomRightText="Made with security in mind"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |