tasks

taskncoffee-app/src/pages/Dashboard.jsx

@@ -12,6 +12,25 @@ 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: [] }
+    ];
+
+    const today = new Date().getDay();
+
     return (
         <div className="dashboard-container">
             {/* Navigation Rail - Material Design 3 */}
@@ -43,8 +62,7 @@ export default function Dashboard() {
                     </h1>
 
                     {/* Material Design 3 Cards Grid */}
-                    <div className="dashboard-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">
@@ -52,7 +70,6 @@ export default function Dashboard() {
                             </p>
                         </div>
 
-                        {/* Elevated Card */}
                         <div className="dashboard-card-elevated">
                             <h3 className="dashboard-card-title">Elevated Card</h3>
                             <p className="dashboard-card-text">
@@ -60,24 +77,42 @@ export default function Dashboard() {
                             </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>
+                    </div> */}
 
-                    {/* Surface Container - takes 3/4 of remaining height */}
+                    {/* Surface Container - Weekly View */}
                     <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.
+                                <div
-                        </p>
+                                    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>
+                                        )}
+                                    </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,85 @@
 
 /* Spacer */
 .dashboard-spacer {
-    flex: 1;
+    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-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);
+}
+
+.dashboard-day-column.today .dashboard-day-title {
+    color: var(--color-primary);
+}
+
+.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-title {
+    margin: 0;
+    font-size: 0.875rem;
+    color: var(--color-foreground);
+}
+
+.dashboard-no-tasks {
+    color: var(--color-muted-foreground);
+    font-size: 0.875rem;
+    text-align: center;
+    padding: 2rem 0;
+    font-style: italic;
 }