gitark/taskncoffee
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Calendar component to Dashboard for task organization by week

Browse Source
This commit is contained in:
IluaAir
2025-10-19 23:10:10 +03:00
parent 6f2ca0a891
commit 024fa8b366
2 changed files with 103 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
taskncoffee-app/src/components/Calendar.jsx Normal file
View 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>
)
}

86
taskncoffee-app/src/pages/Dashboard.jsx
View File

@@ -7,7 +7,7 @@ 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') },
@@ -16,7 +16,6 @@ const menuItems = [
];
export default function Dashboard() {
const [tasksFromBackend, setTasksFromBackend] = useState([]);
const [loading, setLoading] = useState(true);
const [authError, setAuthError] = useState(false);
@@ -58,62 +57,20 @@ export default function Dashboard() {
}, []);
// Get current date and week
const today = new Date();
const currentDay = today.getDay();
// 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
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) {
return (
<div className="dashboard-container">
<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>
);
@@ -167,42 +124,7 @@ export default function Dashboard() {
<span className="sign-pink-inline">Task&</span>
<span className="sign-inline">Coffee</span>
</h1>
<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>
<Calendar />
<div className="dashboard-spacer"></div>
</div>