mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-23 18:51:14 -05:00
Refactor code structure and remove redundant changes
This commit is contained in:
164
app/dashboard/page.tsx
Normal file
164
app/dashboard/page.tsx
Normal file
@@ -0,0 +1,164 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* Dashboard Page
|
||||
*
|
||||
* Protected page that displays user information and account details
|
||||
*/
|
||||
|
||||
import { useAuth } from '@/lib/contexts/AuthContext';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function DashboardPage() {
|
||||
const { user, isAuthenticated, isLoading, logout } = useAuth();
|
||||
const router = useRouter();
|
||||
|
||||
// Redirect to home if not authenticated
|
||||
useEffect(() => {
|
||||
if (!isLoading && !isAuthenticated) {
|
||||
router.push('/');
|
||||
}
|
||||
}, [isLoading, isAuthenticated, router]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
|
||||
<p className="text-gray-600">Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isAuthenticated || !user) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const handleLogout = async () => {
|
||||
await logout();
|
||||
router.push('/');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
|
||||
{/* Header */}
|
||||
<header className="bg-white shadow-sm">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
|
||||
<h1 className="text-2xl font-bold text-gray-900">ThrillWiki</h1>
|
||||
</Link>
|
||||
<span className="text-sm text-gray-400">|</span>
|
||||
<span className="text-sm font-medium text-gray-600">Dashboard</span>
|
||||
</div>
|
||||
<Button onClick={handleLogout} variant="outline" size="sm">
|
||||
Logout
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div className="mb-8">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-2">
|
||||
Welcome, {user.username}!
|
||||
</h2>
|
||||
<p className="text-gray-600">
|
||||
Manage your account and view your activity
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* User Profile Card */}
|
||||
<div className="lg:col-span-1">
|
||||
<div className="bg-white rounded-lg shadow-lg p-6">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="h-24 w-24 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white text-4xl font-bold mb-4">
|
||||
{user.username.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-1">{user.username}</h3>
|
||||
<p className="text-gray-600 mb-4">{user.email}</p>
|
||||
|
||||
<div className="w-full space-y-2 text-sm">
|
||||
<div className="flex justify-between py-2 border-t">
|
||||
<span className="text-gray-600">User ID:</span>
|
||||
<span className="font-mono text-gray-900">{user.id}</span>
|
||||
</div>
|
||||
<div className="flex justify-between py-2 border-t">
|
||||
<span className="text-gray-600">Email Verified:</span>
|
||||
<span className={user.email_verified ? 'text-green-600' : 'text-orange-600'}>
|
||||
{user.email_verified ? '✓ Yes' : '✗ No'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between py-2 border-t">
|
||||
<span className="text-gray-600">Account Status:</span>
|
||||
<span className="text-green-600">Active</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Activity Section */}
|
||||
<div className="lg:col-span-2">
|
||||
<div className="bg-white rounded-lg shadow-lg p-6 mb-6">
|
||||
<h3 className="text-xl font-bold mb-4">Quick Actions</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<button className="p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors text-left">
|
||||
<h4 className="font-semibold mb-2">Browse Parks</h4>
|
||||
<p className="text-sm text-gray-600">Explore theme parks worldwide</p>
|
||||
</button>
|
||||
<button className="p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors text-left">
|
||||
<h4 className="font-semibold mb-2">Browse Rides</h4>
|
||||
<p className="text-sm text-gray-600">Discover roller coasters and attractions</p>
|
||||
</button>
|
||||
<button className="p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors text-left">
|
||||
<h4 className="font-semibold mb-2">My Reviews</h4>
|
||||
<p className="text-sm text-gray-600">View and manage your reviews</p>
|
||||
</button>
|
||||
<button className="p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors text-left">
|
||||
<h4 className="font-semibold mb-2">Settings</h4>
|
||||
<p className="text-sm text-gray-600">Update your profile and preferences</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg shadow-lg p-6">
|
||||
<h3 className="text-xl font-bold mb-4">Recent Activity</h3>
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
<p>No recent activity to display</p>
|
||||
<p className="text-sm mt-2">Start exploring to see your activity here!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Feature Preview */}
|
||||
<div className="mt-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg shadow-lg p-6 text-white">
|
||||
<h3 className="text-2xl font-bold mb-2">Coming Soon</h3>
|
||||
<p className="mb-4">
|
||||
More features are being developed including park browsing, ride reviews, and social features.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
|
||||
<div className="bg-white/10 rounded p-3">
|
||||
<h4 className="font-semibold mb-1">🗺️ Interactive Maps</h4>
|
||||
<p className="text-sm opacity-90">Explore parks with interactive maps</p>
|
||||
</div>
|
||||
<div className="bg-white/10 rounded p-3">
|
||||
<h4 className="font-semibold mb-1">📊 Statistics</h4>
|
||||
<p className="text-sm opacity-90">Track your coaster count and stats</p>
|
||||
</div>
|
||||
<div className="bg-white/10 rounded p-3">
|
||||
<h4 className="font-semibold mb-1">👥 Social Features</h4>
|
||||
<p className="text-sm opacity-90">Connect with other enthusiasts</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user