Enhance dashboard layout and styles with task grouping and priority indicators

taskncoffee-app/src/pages/Dashboard.jsx

@@ -12,24 +12,67 @@ const menuItems = [
 ];
 
 export default function Dashboard() {
-    const daysOfWeek = [
+    // Mock data from backend
-        {
+    const tasksFromBackend = [
-            name: 'Monday',
+        { title: "testtitle", due_date: "2025-10-14", priority: "medium", id: 1, status: "open" },
-            tasks: [
+        { title: "title", due_date: "2025-10-15", priority: "high", id: 3, status: "open" },
-                { id: 1, title: 'Task 1 super task enable', completed: false },
+        { title: "title title2", due_date: "2025-10-15", priority: "medium", id: 4, status: "closed" },
-                { id: 2, title: 'Task 2', completed: false },
+        { title: "title title3", due_date: "2025-10-15", priority: "medium", id: 5, status: "open" },
-                { id: 3, title: 'Task 3', completed: true }
+        { title: "title16", due_date: "2025-10-15", priority: "medium", id: 6, status: "completed" },
-            ]
+        { title: "super late title", due_date: "2025-10-15", priority: "low", id: 2, status: "open" }
-        },
-        { name: 'Tuesday', tasks: [] },
-        { name: 'Wednesday', tasks: [] },
-        { name: 'Thursday', tasks: [] },
-        { name: 'Friday', tasks: [] },
-        { name: 'Saturday', tasks: [] },
-        { name: 'Sunday', tasks: [] }
     ];
 
-    const today = new Date().getDay();
+    // 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] || []
+        };
+    });
 
     return (
         <div className="dashboard-container">
@@ -60,56 +103,40 @@ export default function Dashboard() {
                         <span className="sign-pink-inline">Task&</span>
                         <span className="sign-inline">Coffee</span>
                     </h1>
-
-                    {/* Material Design 3 Cards Grid */}
-                    {/* <div className="dashboard-cards-grid">
-                        <div className="dashboard-card-filled">
-                            <h3 className="dashboard-card-title">Filled Card</h3>
-                            <p className="dashboard-card-text">
-                                Material Design 3 filled container with large rounded corners.
-                            </p>
-                        </div>
-
-                        <div className="dashboard-card-elevated">
-                            <h3 className="dashboard-card-title">Elevated Card</h3>
-                            <p className="dashboard-card-text">
-                                Elevated surface with prominent shadow for hierarchy.
-                            </p>
-                        </div>
-
-                        <div className="dashboard-card-outlined">
-                            <h3 className="dashboard-card-title">Outlined Card</h3>
-                            <p className="dashboard-card-text">
-                                Outlined container with subtle border emphasis.
-                            </p>
-                        </div>
-                    </div> */}
-
-                    {/* Surface Container - Weekly View */}
                     <div className="dashboard-surface-container">
                         <div className="dashboard-week-grid border-1">
-                            {daysOfWeek.map((day, index) => (
+                            {daysOfWeek.map((day, index) => {
+                                const isToday = day.fullDate.toDateString() === today.toDateString();
+
+                                return (
                                     <div
                                         key={day.name}
-                                    className={`dashboard-day-column ${index === today ? 'today' : ''} dashboard-card-filled`}
+                                        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' : ''}`}
+                                                        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>
 

taskncoffee-app/src/pages/dashboard.css

@@ -162,19 +162,34 @@
     border: 2px solid var(--color-primary);
 }
 
+.dashboard-day-header {
+    text-align: center;
+    padding-bottom: 0.75rem;
+    border-bottom: 1px solid var(--color-border);
+    margin-bottom: 0.75rem;
+}
+
 .dashboard-day-title {
     font-size: 1rem;
     font-weight: 600;
-    margin-bottom: 0.75rem;
+    margin: 0 0 0.25rem 0;
-    text-align: center;
+}
-    padding-bottom: 0.5rem;
+
-    border-bottom: 1px solid var(--color-border);
+.dashboard-day-date {
+    font-size: 0.875rem;
+    color: var(--color-muted-foreground);
+    margin: 0;
 }
 
 .dashboard-day-column.today .dashboard-day-title {
     color: var(--color-primary);
 }
 
+.dashboard-day-column.today .dashboard-day-date {
+    color: var(--color-primary);
+    font-weight: 600;
+}
+
 .dashboard-tasks-container {
     flex: 1;
     display: flex;
@@ -202,10 +217,36 @@
     text-decoration: line-through;
 }
 
+.dashboard-task-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.dashboard-task-priority {
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+.dashboard-task-priority.low {
+    background: #10b981; /* green */
+}
+
+.dashboard-task-priority.medium {
+    background: #f59e0b; /* orange */
+}
+
+.dashboard-task-priority.high {
+    background: #ef4444; /* red */
+}
+
 .dashboard-task-title {
     margin: 0;
     font-size: 0.875rem;
     color: var(--color-foreground);
+    flex: 1;
 }
 
 .dashboard-no-tasks {