From 6712c189c088941a81335bd00632cdffa21811ef Mon Sep 17 00:00:00 2001 From: IluaAir Date: Wed, 15 Oct 2025 20:04:34 +0300 Subject: [PATCH] Enhance dashboard layout and styles with task grouping and priority indicators --- taskncoffee-app/src/pages/Dashboard.jsx | 153 ++++++++++++++---------- taskncoffee-app/src/pages/dashboard.css | 49 +++++++- 2 files changed, 135 insertions(+), 67 deletions(-) diff --git a/taskncoffee-app/src/pages/Dashboard.jsx b/taskncoffee-app/src/pages/Dashboard.jsx index eb3251e..436bb0f 100644 --- a/taskncoffee-app/src/pages/Dashboard.jsx +++ b/taskncoffee-app/src/pages/Dashboard.jsx @@ -12,24 +12,67 @@ const menuItems = [ ]; export default function Dashboard() { - const daysOfWeek = [ - { - name: 'Monday', - tasks: [ - { id: 1, title: 'Task 1 super task enable', completed: false }, - { id: 2, title: 'Task 2', completed: false }, - { id: 3, title: 'Task 3', completed: true } - ] - }, - { name: 'Tuesday', tasks: [] }, - { name: 'Wednesday', tasks: [] }, - { name: 'Thursday', tasks: [] }, - { name: 'Friday', tasks: [] }, - { name: 'Saturday', tasks: [] }, - { name: 'Sunday', tasks: [] } + // 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" } ]; - 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 (
@@ -60,56 +103,40 @@ export default function Dashboard() { Task& Coffee - - {/* Material Design 3 Cards Grid */} - {/*
-
-

Filled Card

-

- Material Design 3 filled container with large rounded corners. -

-
- -
-

Elevated Card

-

- Elevated surface with prominent shadow for hierarchy. -

-
- -
-

Outlined Card

-

- Outlined container with subtle border emphasis. -

-
-
*/} - - {/* Surface Container - Weekly View */}
- {daysOfWeek.map((day, index) => ( -
-

{day.name}

-
- {day.tasks.length > 0 ? ( - day.tasks.map((task) => ( -
-

{task.title}

-
- )) - ) : ( -

No tasks

- )} + {daysOfWeek.map((day, index) => { + const isToday = day.fullDate.toDateString() === today.toDateString(); + + return ( +
+
+

{day.name}

+

{day.month} {day.date}

+
+
+ {day.tasks.length > 0 ? ( + day.tasks.map((task) => ( +
+
+ +

{task.title}

+
+
+ )) + ) : ( +

No tasks

+ )} +
-
- ))} + ); + })}
diff --git a/taskncoffee-app/src/pages/dashboard.css b/taskncoffee-app/src/pages/dashboard.css index 7b8a6d7..d45fa92 100644 --- a/taskncoffee-app/src/pages/dashboard.css +++ b/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; - text-align: center; - padding-bottom: 0.5rem; - border-bottom: 1px solid var(--color-border); + 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; @@ -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 {