136 lines
4.7 KiB
JavaScript
136 lines
4.7 KiB
JavaScript
'use client';
|
|
import { useState, useEffect } from 'react';
|
|
import '../neon.css';
|
|
import './dashboard.css';
|
|
import { MenuDock } from '@/components/ui/shadcn-io/menu-dock';
|
|
import { Home, Settings, Bell } from 'lucide-react';
|
|
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
|
|
import { jwtexp } from '@/lib/utils';
|
|
import { getUserTasks } from '@/api/users.service';
|
|
import Calendar from '@/components/Calendar';
|
|
|
|
const menuItems = [
|
|
{ label: 'home', icon: Home, onClick: () => console.log('Home clicked') },
|
|
{ label: 'notify', icon: Bell, onClick: () => console.log('Notifications clicked') },
|
|
{ label: 'settings', icon: Settings, onClick: () => console.log('Settings clicked') },
|
|
];
|
|
|
|
export default function Dashboard() {
|
|
const [loading, setLoading] = useState(true);
|
|
const [authError, setAuthError] = useState(false);
|
|
|
|
// Fetch tasks
|
|
useEffect(() => {
|
|
console.log('Dashboard useEffect triggered');
|
|
const fetchTasks = async () => {
|
|
try {
|
|
console.log('Starting fetchTasks...');
|
|
const token = localStorage.getItem('access_token');
|
|
if (token) {
|
|
console.log('Token found, validating...');
|
|
const isTokenValid = await jwtexp(token);
|
|
if (!isTokenValid) {
|
|
console.error('Token validation failed');
|
|
setAuthError(true);
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
} else {
|
|
console.error('No access token found');
|
|
setAuthError(true);
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
console.log('Fetching user tasks...');
|
|
const response = await getUserTasks(1);
|
|
console.log('Tasks from backend:', response);
|
|
setTasksFromBackend(response);
|
|
} catch (error) {
|
|
console.error('Failed to fetch tasks:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchTasks();
|
|
}, []);
|
|
|
|
// Get current date and week
|
|
|
|
|
|
// Calculate the Monday of current week
|
|
|
|
// Group tasks by day
|
|
|
|
|
|
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="dashboard-container">
|
|
<div className="flex items-center justify-center min-h-screen">
|
|
<p className="text-xl">Loading dashboard...</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (authError) {
|
|
return (
|
|
<div className="dashboard-container">
|
|
<div className="flex items-center justify-center min-h-screen">
|
|
<div className="text-center">
|
|
<p className="text-xl text-red-500 mb-4">Authentication Error</p>
|
|
<p className="text-gray-600">Please log in again</p>
|
|
<button
|
|
onClick={() => window.location.href = '/login'}
|
|
className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
|
|
>
|
|
Go to Login
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="dashboard-container">
|
|
{/* Navigation Rail - Material Design 3 */}
|
|
<aside className="dashboard-sidebar">
|
|
{/* Avatar with large M3 container */}
|
|
<div className="dashboard-avatar-container">
|
|
<Avatar className="dashboard-avatar">
|
|
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
|
|
<AvatarFallback className="dashboard-avatar-fallback">CN</AvatarFallback>
|
|
</Avatar>
|
|
</div>
|
|
|
|
<MenuDock
|
|
items={menuItems}
|
|
orientation="vertical"
|
|
animated={false}
|
|
showIndicator={false}
|
|
showLabels={true}
|
|
variant="compact"
|
|
/>
|
|
</aside>
|
|
|
|
{/* Main Content Area */}
|
|
<main className="dashboard-main">
|
|
<div className="dashboard-content">
|
|
<h1 className="dashboard-header">
|
|
<span className="sign-pink-inline">Task&</span>
|
|
<span className="sign-inline">Coffee</span>
|
|
</h1>
|
|
<Calendar />
|
|
|
|
<div className="dashboard-spacer"></div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|