From 024fa8b3667b4043de367bcef34789944475772d Mon Sep 17 00:00:00 2001
From: IluaAir <ilya@air.ru>
Date: Sun, 19 Oct 2025 23:10:10 +0300
Subject: [PATCH] Add Calendar component to Dashboard for task organization by
 week

---
 taskncoffee-app/src/components/Calendar.jsx | 99 +++++++++++++++++++++
 taskncoffee-app/src/pages/Dashboard.jsx     | 86 +-----------------
 2 files changed, 103 insertions(+), 82 deletions(-)
 create mode 100644 taskncoffee-app/src/components/Calendar.jsx

diff --git a/taskncoffee-app/src/components/Calendar.jsx b/taskncoffee-app/src/components/Calendar.jsx
new file mode 100644
index 0000000..f19f6cb
--- /dev/null
+++ 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>
+    )
+}
\ No newline at end of file
diff --git a/taskncoffee-app/src/pages/Dashboard.jsx b/taskncoffee-app/src/pages/Dashboard.jsx
index bc45c75..6f5127d 100644
--- a/taskncoffee-app/src/pages/Dashboard.jsx
+++ b/taskncoffee-app/src/pages/Dashboard.jsx
@@ -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>