Add src/app/dashboard/page.tsx
This commit is contained in:
135
src/app/dashboard/page.tsx
Normal file
135
src/app/dashboard/page.tsx
Normal file
@@ -0,0 +1,135 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
|
import ReactLenis from "lenis/react";
|
||||||
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||||
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||||
|
import { Wallet, ShoppingCart, Hourglass, CheckCircle, Settings, LogOut } from "lucide-react";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
export default function UserDashboardPage() {
|
||||||
|
const stats = [
|
||||||
|
{ id: "balance", title: "Current Balance", value: "$1,250.50", icon: Wallet },
|
||||||
|
{ id: "totalOrders", title: "Total Orders", value: "1,234", icon: ShoppingCart },
|
||||||
|
{ id: "pendingOrders", title: "Pending Orders", value: "42", icon: Hourglass },
|
||||||
|
{ id: "completedOrders", title: "Completed Orders", value: "1,192", icon: CheckCircle },
|
||||||
|
];
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{ name: "Home", id: "/" },
|
||||||
|
{ name: "Dashboard", id: "/dashboard" },
|
||||||
|
{ name: "New Order", id: "/new-order" },
|
||||||
|
{ name: "My Orders", id: "/orders" }
|
||||||
|
];
|
||||||
|
|
||||||
|
const footerColumns = [
|
||||||
|
{
|
||||||
|
title: "Company", items: [
|
||||||
|
{ label: "About Us", href: "/#features" },
|
||||||
|
{ label: "Dashboard", href: "/dashboard" },
|
||||||
|
{ label: "New Order", href: "/new-order" },
|
||||||
|
{ label: "My Orders", href: "/orders" }
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ThemeProvider
|
||||||
|
defaultButtonVariant="icon-arrow"
|
||||||
|
defaultTextAnimation="background-highlight"
|
||||||
|
borderRadius="soft"
|
||||||
|
contentWidth="medium"
|
||||||
|
sizing="large"
|
||||||
|
background="grid"
|
||||||
|
cardStyle="solid"
|
||||||
|
primaryButtonStyle="gradient"
|
||||||
|
secondaryButtonStyle="glass"
|
||||||
|
headingFontWeight="normal"
|
||||||
|
>
|
||||||
|
<ReactLenis root>
|
||||||
|
<div id="nav" data-section="nav">
|
||||||
|
<NavbarStyleFullscreen
|
||||||
|
navItems={navItems}
|
||||||
|
logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
|
||||||
|
logoAlt="SocBoost Logo"
|
||||||
|
brandName="SocBoost"
|
||||||
|
button={{
|
||||||
|
text: "Register", href: "/register"
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col lg:flex-row min-h-screen pt-20">
|
||||||
|
{/* Sidebar */}
|
||||||
|
<aside className="w-full lg:w-64 bg-card p-6 border-r border-border shadow-md">
|
||||||
|
<h2 className="text-2xl font-semibold mb-6 text-foreground">User Panel</h2>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li className="mb-4">
|
||||||
|
<Link href="/dashboard" className="flex items-center text-foreground hover:text-primary-cta transition-colors">
|
||||||
|
<Wallet className="mr-2 h-5 w-5" /> Dashboard
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li className="mb-4">
|
||||||
|
<Link href="/new-order" className="flex items-center text-foreground hover:text-primary-cta transition-colors">
|
||||||
|
<ShoppingCart className="mr-2 h-5 w-5" /> New Order
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li className="mb-4">
|
||||||
|
<Link href="/orders" className="flex items-center text-foreground hover:text-primary-cta transition-colors">
|
||||||
|
<Hourglass className="mr-2 h-5 w-5" /> My Orders
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li className="mb-4">
|
||||||
|
<Link href="/settings" className="flex items-center text-foreground hover:text-primary-cta transition-colors">
|
||||||
|
<Settings className="mr-2 h-5 w-5" /> Settings
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li className="mb-4">
|
||||||
|
<button className="flex items-center text-foreground hover:text-red-500 transition-colors w-full text-left">
|
||||||
|
<LogOut className="mr-2 h-5 w-5" /> Logout
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<main className="flex-1 p-8 bg-background">
|
||||||
|
<h1 className="text-4xl font-bold mb-8 text-foreground">Dashboard Overview</h1>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||||
|
{stats.map((stat) => (
|
||||||
|
<div key={stat.id} className="bg-card p-6 rounded-lg shadow-lg flex items-center space-x-4">
|
||||||
|
<div classNameName="p-3 rounded-full bg-primary-cta bg-opacity-20">
|
||||||
|
<stat.icon className="h-6 w-6 text-primary-cta" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-foreground-light">{stat.title}</p>
|
||||||
|
<p className="text-2xl font-bold text-foreground">{stat.value}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Additional Dashboard Content would go here */}
|
||||||
|
<div className="bg-card p-6 rounded-lg shadow-lg">
|
||||||
|
<h2 className="text-2xl font-semibold mb-4 text-foreground">Recent Activity</h2>
|
||||||
|
<p className="text-foreground-light">Your recent orders and transactions will appear here.</p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="footer" data-section="footer">
|
||||||
|
<FooterBase
|
||||||
|
columns={footerColumns}
|
||||||
|
logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
|
||||||
|
logoAlt="SocBoost Logo"
|
||||||
|
logoText="SocBoost"
|
||||||
|
copyrightText="© 2024 SocBoost. All rights reserved."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ReactLenis>
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user