Add header and goal tracker to home page

src/App.jsx

@@ -10,6 +10,7 @@ import { theme } from '@utils/theme';
 
 import Home from './pages/Home';
 
+import Header from '@components/common/Header';
 import './App.css';
 
 const App = () => {
@@ -22,8 +23,24 @@ const App = () => {
           <div className="content">
             {/* Main content area where pages will render */}
             <Routes>
-              <Route path="/" element={<Home />} />
-              <Route path="/streak" element={<Streak />} />
+              <Route
+                path="/"
+                element={
+                  <>
+                    <Header />
+                    <Home />
+                  </>
+                }
+              />
+              <Route
+                path="/streak"
+                element={
+                  <>
+                    <Header />
+                    <Streak />
+                  </>
+                }
+              />
             </Routes>
           </div>
 

src/pages/Home.jsx

@@ -1,11 +1,83 @@
-import Header from '@components/common/Header';
+import GoalTracker from '@components/Home/GoalTracker';
+import { Box } from '@mui/material';
+import { useState } from 'react';
 
 const Home = () => {
+  const [goals, setGoals] = useState([
+    {
+      id: '1',
+      title: 'Improve Coding Skills',
+      expanded: true,
+      microGoals: [
+        {
+          id: '1-1',
+          title: 'Learn React',
+          expanded: true,
+          tasks: [
+            { id: '1-1-1', title: 'Complete React tutorial', completed: true },
+            { id: '1-1-2', title: 'Build a small project', completed: false },
+          ],
+        },
+        {
+          id: '1-2',
+          title: 'Master JavaScript',
+          expanded: false,
+          tasks: [
+            { id: '1-2-1', title: 'Study ES6+ features', completed: false },
+            { id: '1-2-2', title: 'Practice coding challenges', completed: false },
+          ],
+        },
+      ],
+    },
+  ]);
+
+  const handleToggleTask = (macroGoalId, microGoalId, taskId) => {
+    setGoals((prevGoals) =>
+      prevGoals.map((macroGoal) =>
+        macroGoal.id === macroGoalId
+          ? {
+              ...macroGoal,
+              microGoals: macroGoal.microGoals.map((microGoal) =>
+                microGoal.id === microGoalId
+                  ? {
+                      ...microGoal,
+                      tasks: microGoal.tasks.map((task) =>
+                        task.id === taskId ? { ...task, completed: !task.completed } : task,
+                      ),
+                    }
+                  : microGoal,
+              ),
+            }
+          : macroGoal,
+      ),
+    );
+  };
+
+  const handleToggleExpand = (goalId, goalType) => {
+    setGoals((prevGoals) =>
+      prevGoals.map((macroGoal) =>
+        goalType === 'macro' && macroGoal.id === goalId
+          ? { ...macroGoal, expanded: !macroGoal.expanded }
+          : {
+              ...macroGoal,
+              microGoals: macroGoal.microGoals.map((microGoal) =>
+                goalType === 'micro' && microGoal.id === goalId
+                  ? { ...microGoal, expanded: !microGoal.expanded }
+                  : microGoal,
+              ),
+            },
+      ),
+    );
+  };
+
   return (
-    <div>
-      <Header />
-      <h1>Home</h1>
-    </div>
+    <Box sx={{ width: '90%', margin: 'auto' }}>
+      <GoalTracker
+        macroGoals={goals}
+        onToggleTask={handleToggleTask}
+        onToggleExpand={handleToggleExpand}
+      />
+    </Box>
   );
 };