Enhance dashboard layout and styles with task grouping and priority indicators

taskncoffee-app/src/pages/Dashboard.jsx

@@ -12,6 +12,68 @@ const menuItems = [
 ];
 
 export default function Dashboard() {
+    // Mock data from backend
+    const tasksFromBackend = [
+        { title: "testtitle", due_date: "2025-10-14", priority: "medium", id: 1, status: "open" },
+        { title: "title", due_date: "2025-10-15", priority: "high", id: 3, status: "open" },
+        { title: "title title2", due_date: "2025-10-15", priority: "medium", id: 4, status: "closed" },
+        { title: "title title3", due_date: "2025-10-15", priority: "medium", id: 5, status: "open" },
+        { 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" }
+    ];
+
+    // 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">
             {/* Navigation Rail - Material Design 3 */}
@@ -41,43 +103,43 @@ 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">
-                        {/* Filled Card */}
-                        <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>
-
-                        {/* Elevated Card */}
-                        <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>
-
-                        {/* Outlined Card */}
-                        <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 - takes 3/4 of remaining height */}
                     <div className="dashboard-surface-container">
-                        <h2 className="dashboard-surface-title">Surface Container</h2>
+                        <div className="dashboard-week-grid border-1">
-                        <p className="dashboard-surface-text">
+                            {daysOfWeek.map((day, index) => {
-                            Material Design 3 emphasizes larger border radius (rounded-3xl) and layered surfaces.
+                                const isToday = day.fullDate.toDateString() === today.toDateString();
-                        </p>
+
+                                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>
 
-                    {/* Spacer - takes 1/4 of remaining height */}
                     <div className="dashboard-spacer"></div>
                 </div>
             </main>

taskncoffee-app/src/pages/dashboard.css

@@ -134,6 +134,126 @@
 
 /* Spacer */
 .dashboard-spacer {
+    flex: 0.5;
+}
+
+/* Weekly View */
+.dashboard-week-grid {
+    display: flex;
+    gap: 1rem;
+    height: 100%;
+    overflow-x: auto;
+    padding: 0.6rem;
+}
+
+.dashboard-day-column {
+    flex: 1;
+    min-width: 180px;
+    display: flex;
+    flex-direction: column;
+    background: var(--color-background);
+    border-radius: 1rem;
+    padding: 1rem;
+    transition: all 0.3s ease;
+}
+
+.dashboard-day-column.today {
+    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+    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: 0 0 0.25rem 0;
+}
+
+.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;
+    flex-direction: column;
+    gap: 0.5rem;
+    overflow-y: auto;
+}
+
+.dashboard-task-card {
+    background: var(--color-card);
+    padding: 0.75rem;
+    border-radius: 0.5rem;
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    font-size: 0.875rem;
+    transition: transform 0.2s;
+}
+
+.dashboard-task-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+}
+
+.dashboard-task-card.completed {
+    opacity: 0.6;
+    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 {
+    color: var(--color-muted-foreground);
+    font-size: 0.875rem;
+    text-align: center;
+    padding: 2rem 0;
+    font-style: italic;
+}
+