Add Calendar component to Dashboard for task organization by week

2025-10-19 23:10:10 +03:00
parent 6f2ca0a891
commit 024fa8b366
2 changed files with 103 additions and 82 deletions
--- a/taskncoffee-app/src/components/Calendar.jsx
+++ b/taskncoffee-app/src/components/Calendar.jsx
@@ -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>
+    )
+}