Switch to version 1: remove src/app/dashboard/page.tsx
This commit is contained in:
@@ -1,288 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { ThemeProvider } from '@/components/theme/ThemeProvider';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import { LogOut, Package, Clock, User, Mail, Phone } from 'lucide-react';
|
||||
|
||||
const navItems = [
|
||||
{ name: 'Home', id: '/' },
|
||||
{ name: 'Register', id: '/register' },
|
||||
{ name: 'Login', id: '/login' },
|
||||
{ name: 'Dashboard', id: '/dashboard' },
|
||||
{ name: 'Orders', id: '/orders' },
|
||||
];
|
||||
|
||||
export default function DashboardPage() {
|
||||
const [activeTab, setActiveTab] = useState('overview');
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
|
||||
const customerData = {
|
||||
name: 'John Doe',
|
||||
email: 'john@example.com',
|
||||
phone: '+1 (555) 123-4567',
|
||||
address: '123 Main St, New York, NY 10001',
|
||||
joinDate: 'January 15, 2024',
|
||||
};
|
||||
|
||||
const recentOrders = [
|
||||
{
|
||||
id: 'ORD-001',
|
||||
date: '2024-01-20',
|
||||
status: 'Delivered',
|
||||
total: '$89.99',
|
||||
items: 2,
|
||||
},
|
||||
{
|
||||
id: 'ORD-002',
|
||||
date: '2024-01-15',
|
||||
status: 'In Transit',
|
||||
total: '$145.50',
|
||||
items: 3,
|
||||
},
|
||||
{
|
||||
id: 'ORD-003',
|
||||
date: '2024-01-10',
|
||||
status: 'Processing',
|
||||
total: '$62.25',
|
||||
items: 1,
|
||||
},
|
||||
];
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'Delivered':
|
||||
return 'text-green-600 bg-green-50';
|
||||
case 'In Transit':
|
||||
return 'text-blue-600 bg-blue-50';
|
||||
case 'Processing':
|
||||
return 'text-yellow-600 bg-yellow-50';
|
||||
default:
|
||||
return 'text-gray-600 bg-gray-50';
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogout = () => {
|
||||
window.location.href = '/';
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<NavbarStyleApple navItems={navItems} brandName="Customer Portal" />
|
||||
<main className="bg-background text-foreground min-h-screen p-6">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<div>
|
||||
<h1 className="text-3xl md:text-4xl font-bold mb-2">Welcome back, {customerData.name}!</h1>
|
||||
<p className="text-foreground/60">Manage your account and view your orders</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="flex items-center gap-2 px-4 py-2 border border-primary-cta text-primary-cta rounded-lg hover:bg-primary-cta hover:text-white transition"
|
||||
>
|
||||
<LogOut size={18} />
|
||||
Sign Out
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-4 mb-8 border-b border-foreground/10">
|
||||
<button
|
||||
onClick={() => setActiveTab('overview')}
|
||||
className={`px-4 py-3 font-semibold transition ${
|
||||
activeTab === 'overview'
|
||||
? 'text-primary-cta border-b-2 border-primary-cta'
|
||||
: 'text-foreground/60 hover:text-foreground'
|
||||
}`}
|
||||
>
|
||||
Overview
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('profile')}
|
||||
className={`px-4 py-3 font-semibold transition ${
|
||||
activeTab === 'profile'
|
||||
? 'text-primary-cta border-b-2 border-primary-cta'
|
||||
: 'text-foreground/60 hover:text-foreground'
|
||||
}`}
|
||||
>
|
||||
Account Settings
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Overview Tab */}
|
||||
{activeTab === 'overview' && (
|
||||
<div className="space-y-8">
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="bg-card border border-primary-cta/20 rounded-lg p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-foreground/60 text-sm">Total Orders</p>
|
||||
<p className="text-3xl font-bold mt-2">12</p>
|
||||
</div>
|
||||
<Package className="text-primary-cta" size={32} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-card border border-primary-cta/20 rounded-lg p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-foreground/60 text-sm">In Transit</p>
|
||||
<p className="text-3xl font-bold mt-2">2</p>
|
||||
</div>
|
||||
<Clock className="text-accent" size={32} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-card border border-primary-cta/20 rounded-lg p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-foreground/60 text-sm">Total Spent</p>
|
||||
<p className="text-3xl font-bold mt-2">$1,284</p>
|
||||
</div>
|
||||
<div className="text-secondary-cta" size={32}>
|
||||
💳
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recent Orders */}
|
||||
<div className="bg-card border border-primary-cta/20 rounded-lg p-6">
|
||||
<h2 className="text-xl font-bold mb-6 flex items-center gap-2">
|
||||
<Package size={24} /> Recent Orders
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{recentOrders.map((order) => (
|
||||
<div key={order.id} className="flex items-center justify-between p-4 bg-background rounded-lg border border-foreground/10 hover:border-primary-cta/30 transition">
|
||||
<div className="flex-1">
|
||||
<p className="font-semibold">{order.id}</p>
|
||||
<p className="text-sm text-foreground/60">{order.date} • {order.items} item(s)</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="font-semibold">{order.total}</p>
|
||||
<span className={`inline-block text-xs font-semibold px-3 py-1 rounded-full mt-2 ${getStatusColor(order.status)}`}>
|
||||
{order.status}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<a
|
||||
href="/orders"
|
||||
className="block mt-6 text-center px-4 py-2 border border-primary-cta text-primary-cta rounded-lg hover:bg-primary-cta hover:text-white transition font-semibold"
|
||||
>
|
||||
View All Orders
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Account Settings Tab */}
|
||||
{activeTab === 'profile' && (
|
||||
<div className="max-w-2xl">
|
||||
<div className="bg-card border border-primary-cta/20 rounded-lg p-8">
|
||||
<h2 className="text-2xl font-bold mb-6">Account Information</h2>
|
||||
|
||||
{!isEditing ? (
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="flex items-center gap-3 p-4 bg-background rounded-lg">
|
||||
<User size={20} className="text-primary-cta" />
|
||||
<div>
|
||||
<p className="text-sm text-foreground/60">Name</p>
|
||||
<p className="font-semibold">{customerData.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-4 bg-background rounded-lg">
|
||||
<Mail size={20} className="text-primary-cta" />
|
||||
<div>
|
||||
<p className="text-sm text-foreground/60">Email</p>
|
||||
<p className="font-semibold">{customerData.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-4 bg-background rounded-lg">
|
||||
<Phone size={20} className="text-primary-cta" />
|
||||
<div>
|
||||
<p className="text-sm text-foreground/60">Phone</p>
|
||||
<p className="font-semibold">{customerData.phone}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 bg-background rounded-lg">
|
||||
<p className="text-sm text-foreground/60 mb-1">Address</p>
|
||||
<p className="font-semibold">{customerData.address}</p>
|
||||
</div>
|
||||
<div className="p-4 bg-background rounded-lg">
|
||||
<p className="text-sm text-foreground/60 mb-1">Member Since</p>
|
||||
<p className="font-semibold">{customerData.joinDate}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsEditing(true)}
|
||||
className="w-full bg-primary-cta text-white py-3 rounded-lg font-semibold hover:opacity-90 transition mt-8"
|
||||
>
|
||||
Edit Profile
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<input
|
||||
type="text"
|
||||
defaultValue={customerData.name}
|
||||
placeholder="Full Name"
|
||||
className="px-4 py-2 border border-primary-cta/20 rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
<input
|
||||
type="email"
|
||||
defaultValue={customerData.email}
|
||||
placeholder="Email"
|
||||
className="px-4 py-2 border border-primary-cta/20 rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="tel"
|
||||
defaultValue={customerData.phone}
|
||||
placeholder="Phone"
|
||||
className="w-full px-4 py-2 border border-primary-cta/20 rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
defaultValue={customerData.address}
|
||||
placeholder="Address"
|
||||
className="w-full px-4 py-2 border border-primary-cta/20 rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
<div className="flex gap-4 mt-6">
|
||||
<button
|
||||
onClick={() => setIsEditing(false)}
|
||||
className="flex-1 bg-primary-cta text-white py-2 rounded-lg font-semibold hover:opacity-90 transition"
|
||||
>
|
||||
Save Changes
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setIsEditing(false)}
|
||||
className="flex-1 border border-primary-cta text-primary-cta py-2 rounded-lg font-semibold hover:bg-primary-cta hover:text-white transition"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user