Enhance dashboard layout and styles with task grouping and priority indicators
This commit is contained in:
IluaAir
@@ -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 (
|
||||
<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) => (
|
||||
<div
|
||||
key={day.name}
|
||||
className={`dashboard-day-column ${index === today ? 'today' : ''} dashboard-card-filled`}
|
||||
>
|
||||
<h3 className="dashboard-day-title">{day.name}</h3>
|
||||
<div className="dashboard-tasks-container">
|
||||
{day.tasks.length > 0 ? (
|
||||
day.tasks.map((task) => (
|
||||
<div
|
||||
key={task.id}
|
||||
className={`dashboard-task-card ${task.completed ? 'completed' : ''}`}
|
||||
>
|
||||
<p className="dashboard-task-title">{task.title}</p>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p className="dashboard-no-tasks">No tasks</p>
|
||||
)}
|
||||
{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>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user