Add Calendar component to Dashboard for task organization by week
This commit is contained in:
IluaAir
99
taskncoffee-app/src/components/Calendar.jsx
Normal file
99
taskncoffee-app/src/components/Calendar.jsx
Normal file
@@ -0,0 +1,99 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default function Calendar() {
|
||||||
|
const [tasksFromBackend, setTasksFromBackend] = useState([]);
|
||||||
|
|
||||||
|
const today = new Date();
|
||||||
|
const currentDay = today.getDay();
|
||||||
|
|
||||||
|
|
||||||
|
const currentDate = new Date(today);
|
||||||
|
const dayOffset = currentDay === 0 ? -6 : 1 - currentDay;
|
||||||
|
currentDate.setDate(today.getDate() + dayOffset);
|
||||||
|
|
||||||
|
|
||||||
|
const groupTasksByDay = (tasks) => {
|
||||||
|
const grouped = {};
|
||||||
|
|
||||||
|
tasks.forEach(task => {
|
||||||
|
const taskDate = new Date(task.due_date);
|
||||||
|
const dateKey = taskDate.toDateString();
|
||||||
|
|
||||||
|
if (!grouped[dateKey]) {
|
||||||
|
grouped[dateKey] = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
grouped[dateKey].push({
|
||||||
|
id: task.id,
|
||||||
|
title: task.title,
|
||||||
|
priority: task.priority,
|
||||||
|
completed: task.status === 'closed' || task.status === 'completed',
|
||||||
|
dueDate: task.due_date
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return grouped;
|
||||||
|
};
|
||||||
|
|
||||||
|
const groupedTasks = groupTasksByDay(tasksFromBackend);
|
||||||
|
|
||||||
|
|
||||||
|
const daysOfWeek = [
|
||||||
|
'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
|
||||||
|
].map((name, index) => {
|
||||||
|
const date = new Date(currentDate);
|
||||||
|
date.setDate(currentDate.getDate() + index);
|
||||||
|
const dateKey = date.toDateString();
|
||||||
|
|
||||||
|
return {
|
||||||
|
name,
|
||||||
|
date: date.getDate(),
|
||||||
|
month: date.toLocaleDateString('en-US', { month: 'short' }),
|
||||||
|
fullDate: date,
|
||||||
|
tasks: groupedTasks[dateKey] || []
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="dashboard-surface-container">
|
||||||
|
<div className="dashboard-week-grid">
|
||||||
|
{daysOfWeek.map((day, index) => {
|
||||||
|
const isToday = day.fullDate.toDateString() === today.toDateString();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={day.name}
|
||||||
|
className={`dashboard-day-column ${isToday ? 'today' : ''} dashboard-card-filled`}
|
||||||
|
>
|
||||||
|
<div className="dashboard-day-header">
|
||||||
|
<h3 className="dashboard-day-title">{day.name}</h3>
|
||||||
|
<p className="dashboard-day-date">{day.month} {day.date}</p>
|
||||||
|
</div>
|
||||||
|
<div className="dashboard-tasks-container">
|
||||||
|
{day.tasks.length > 0 ? (
|
||||||
|
day.tasks.map((task) => (
|
||||||
|
<div
|
||||||
|
key={task.id}
|
||||||
|
className={`dashboard-task-card ${task.completed ? 'completed' : ''} priority-${task.priority}`}
|
||||||
|
>
|
||||||
|
<div className="dashboard-task-header">
|
||||||
|
<span className={`dashboard-task-priority ${task.priority}`}></span>
|
||||||
|
<p className="dashboard-task-title">{task.title}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<p className="dashboard-no-tasks">No tasks</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -7,7 +7,7 @@ import { Home, Settings, Bell } from 'lucide-react';
|
|||||||
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
|
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
|
||||||
import { jwtexp } from '@/lib/utils';
|
import { jwtexp } from '@/lib/utils';
|
||||||
import { getUserTasks } from '@/api/users.service';
|
import { getUserTasks } from '@/api/users.service';
|
||||||
|
import Calendar from '@/components/Calendar';
|
||||||
|
|
||||||
const menuItems = [
|
const menuItems = [
|
||||||
{ label: 'home', icon: Home, onClick: () => console.log('Home clicked') },
|
{ label: 'home', icon: Home, onClick: () => console.log('Home clicked') },
|
||||||
@@ -16,7 +16,6 @@ const menuItems = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export default function Dashboard() {
|
export default function Dashboard() {
|
||||||
const [tasksFromBackend, setTasksFromBackend] = useState([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [authError, setAuthError] = useState(false);
|
const [authError, setAuthError] = useState(false);
|
||||||
|
|
||||||
@@ -58,62 +57,20 @@ export default function Dashboard() {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// Get current date and week
|
// Get current date and week
|
||||||
const today = new Date();
|
|
||||||
const currentDay = today.getDay();
|
|
||||||
|
|
||||||
// Calculate the Monday of current week
|
// Calculate the Monday of current week
|
||||||
const currentDate = new Date(today);
|
|
||||||
const dayOffset = currentDay === 0 ? -6 : 1 - currentDay;
|
|
||||||
currentDate.setDate(today.getDate() + dayOffset);
|
|
||||||
|
|
||||||
// Group tasks by day
|
// Group tasks by day
|
||||||
const groupTasksByDay = (tasks) => {
|
|
||||||
const grouped = {};
|
|
||||||
|
|
||||||
tasks.forEach(task => {
|
|
||||||
const taskDate = new Date(task.due_date);
|
|
||||||
const dateKey = taskDate.toDateString();
|
|
||||||
|
|
||||||
if (!grouped[dateKey]) {
|
|
||||||
grouped[dateKey] = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
grouped[dateKey].push({
|
|
||||||
id: task.id,
|
|
||||||
title: task.title,
|
|
||||||
priority: task.priority,
|
|
||||||
completed: task.status === 'closed' || task.status === 'completed',
|
|
||||||
dueDate: task.due_date
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
return grouped;
|
|
||||||
};
|
|
||||||
|
|
||||||
const groupedTasks = groupTasksByDay(tasksFromBackend);
|
|
||||||
|
|
||||||
// Generate days of week with dates and tasks
|
|
||||||
const daysOfWeek = [
|
|
||||||
'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
|
|
||||||
].map((name, index) => {
|
|
||||||
const date = new Date(currentDate);
|
|
||||||
date.setDate(currentDate.getDate() + index);
|
|
||||||
const dateKey = date.toDateString();
|
|
||||||
|
|
||||||
return {
|
|
||||||
name,
|
|
||||||
date: date.getDate(),
|
|
||||||
month: date.toLocaleDateString('en-US', { month: 'short' }),
|
|
||||||
fullDate: date,
|
|
||||||
tasks: groupedTasks[dateKey] || []
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<div className="dashboard-container">
|
<div className="dashboard-container">
|
||||||
<div className="flex items-center justify-center min-h-screen">
|
<div className="flex items-center justify-center min-h-screen">
|
||||||
<p className="text-xl">Loading tasks...</p>
|
<p className="text-xl">Loading dashboard...</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -167,42 +124,7 @@ export default function Dashboard() {
|
|||||||
<span className="sign-pink-inline">Task&</span>
|
<span className="sign-pink-inline">Task&</span>
|
||||||
<span className="sign-inline">Coffee</span>
|
<span className="sign-inline">Coffee</span>
|
||||||
</h1>
|
</h1>
|
||||||
<div className="dashboard-surface-container">
|
<Calendar />
|
||||||
<div className="dashboard-week-grid">
|
|
||||||
{daysOfWeek.map((day, index) => {
|
|
||||||
const isToday = day.fullDate.toDateString() === today.toDateString();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={day.name}
|
|
||||||
className={`dashboard-day-column ${isToday ? 'today' : ''} dashboard-card-filled`}
|
|
||||||
>
|
|
||||||
<div className="dashboard-day-header">
|
|
||||||
<h3 className="dashboard-day-title">{day.name}</h3>
|
|
||||||
<p className="dashboard-day-date">{day.month} {day.date}</p>
|
|
||||||
</div>
|
|
||||||
<div className="dashboard-tasks-container">
|
|
||||||
{day.tasks.length > 0 ? (
|
|
||||||
day.tasks.map((task) => (
|
|
||||||
<div
|
|
||||||
key={task.id}
|
|
||||||
className={`dashboard-task-card ${task.completed ? 'completed' : ''} priority-${task.priority}`}
|
|
||||||
>
|
|
||||||
<div className="dashboard-task-header">
|
|
||||||
<span className={`dashboard-task-priority ${task.priority}`}></span>
|
|
||||||
<p className="dashboard-task-title">{task.title}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<p className="dashboard-no-tasks">No tasks</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="dashboard-spacer"></div>
|
<div className="dashboard-spacer"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user