Added: favicon, Dashboard, Habits list, some styles, dashboard redirect

TODO.md

@@ -6,6 +6,13 @@
 - [ ] edit user data - change password, mail...
 
 ## Core of the app
-- [ ] Habits list
+- [ ] header and navbar
+- [ ] dashboard
+  - [x] css
+  - [ ] its just plain
+  - [ ] graphs
+- [x] Habits list
+  - [ ] css
 - [ ] Habits create
+  - [ ] validate cron input
 - [ ] Habits track

app/controllers/DashboardController.php

@@ -0,0 +1,16 @@
+<?php
+class DashboardController extends Controller {
+    public function index() {
+        $habit = new Habit();
+        $habits = $habit->getHabitsByUser($_SESSION['user']['id']);
+
+        $this->view('dashboard/index', [
+            'title' => 'Dashboard',
+            'habits' => $habits,
+        ]);
+    }
+
+    public function reroute(){
+        $this->redirect('/dashboard');
+    }
+}

app/controllers/HabitController.php

@@ -2,7 +2,9 @@
 
 class HabitController extends Controller {
     public function index() {
-        // Display the list of habits (to be implemented later)
+        $habit = new Habit();
+        $habits = $habit->getHabitsByUser($_SESSION['user']['id']);
+        $this->view('habits/index', ['title' => 'Habits', 'habits' => $habits]);
     }
 
     public function create() {
@@ -17,15 +19,12 @@ class HabitController extends Controller {
             }
 
             if ($frequency === 'Custom') {
-                var_dump($_POST);
                 $daysOfWeek = $_POST['days_of_week'] ?? [];
                 $daysOfMonth = $_POST['days_of_month'] ?? '*';
                 $months = $_POST['months'] ?? '*';
 
                 // Combine into crontab-like string
                 $customFrequency = implode(',', $daysOfWeek) . " $daysOfMonth $months";
-                var_dump($customFrequency);
-
             }
 
             $habit = new Habit();
@@ -38,7 +37,7 @@ class HabitController extends Controller {
             ]);
 
             if ($result) {
-                //$this->redirect('/habits');
+                $this->redirect('/habits');
             } else {
                 $this->view('habits/create', ['error' => 'Failed to create habit.']);
             }

app/models/Habit.php

@@ -29,4 +29,18 @@ class Habit {
             return false;
         }
     }
+
+    public function getHabitsByUser($userId) {
+        $stmt = $this->db->prepare("SELECT id, title, frequency, custom_frequency, reward_points, created_at FROM habits WHERE user_id = ?");
+        $stmt->bind_param("i", $userId);
+        $stmt->execute();
+        $result = $stmt->get_result();
+
+        $habits = [];
+        while ($row = $result->fetch_assoc()) {
+            $habits[] = $row;
+        }
+        
+        return $habits;
+    }
 }

app/views/auth/signin.php

@@ -1,5 +1,6 @@
 <link rel="stylesheet" href="/css/login.css">
-<section class="signin">
+<link rel="stylesheet" href="/css/form.css">
+<section class="form signin">
     <div class="header-form">
         <img src="/img/logo.jpg" alt="Habit Tracker Logo">
         <h1>Sign in to Habit Tracker</h1>

app/views/auth/signup.php

@@ -1,5 +1,6 @@
 <link rel="stylesheet" href="/css/login.css">
-<section class="signin">
+<link rel="stylesheet" href="/css/form.css">
+<section class="form signup">
     <div class="header-form">
         <img src="/img/logo.jpg" alt="Habit Tracker Logo">
         <h1>Sign up to Habit Tracker</h1>

app/views/dashboard/index.php

@@ -1,3 +1,44 @@
-<h1>Welcome <?= $_SESSION['user']['username']?>!</h1>
+<link rel="stylesheet" href="/css/dashboard.css">
 
-<a href="/habits/create">Create new Habit</a>
+<section class="dashboard">
+    <h1>Welcome, <?= htmlspecialchars($_SESSION['user']['username']) ?>!</h1>
+    <a href="/habits/create" class="btn-primary">Create new habit!</a>
+    <div class="card-wrapper">
+        <section class="card upcoming">
+            <h2>Upcoming</h2>
+            <div class="habit">
+                <b>Habit Title</b>
+                <p>Frequency</p>
+                <p>Reward points</p>
+            </div>
+        </section>
+
+        <section class="card recent">
+            <h2>Recent</h2>
+            <div class="habit">
+                <b>Habit Title</b>
+                <p>Frequency</p>
+                <p>Reward points</p>
+            </div>
+        </section>
+
+        <section class="card missed">
+            <h2>Missed</h2>
+            <div class="habit">
+                <b>Habit Title</b>
+                <p>Frequency</p>
+                <p>Reward points</p>
+            </div>
+        </section>
+
+        <section class="card history-graph">
+            <h2>Graph of History</h2>
+        </section>
+
+        <section class="card streak">
+            <h2>Streak</h2>
+            <p>You're current streak is 123 days</p>
+            <p>Good job!</p>
+        </section>
+    </div>
+</section>

app/views/habits/create.php

@@ -1,5 +1,7 @@
-<section class="habit-create">
-    <h1><?= $this->get('title', 'Create Habit') ?></h1>
+<link rel="stylesheet" href="/css/form.css">
+<link rel="stylesheet" href="/css/habits_create.css">
+<section class="form habit-create">
+    <h1 class="header-form"><?= $this->get('title', 'Create Habit') ?></h1>
 
     <?php if ($this->get('error')): ?>
         <div class="error" style="color: red; margin-bottom: 1rem;">
@@ -19,29 +21,50 @@
         </select>
 
         <div id="custom-frequency" style="display: none;">
-            <label>Days of the Week:</label>
-            <input type="checkbox" name="days_of_week[]" value="1"> Monday
-            <input type="checkbox" name="days_of_week[]" value="2"> Tuesday
-            <input type="checkbox" name="days_of_week[]" value="3"> Wednesday
-            <input type="checkbox" name="days_of_week[]" value="4"> Thursday
-            <input type="checkbox" name="days_of_week[]" value="5"> Friday
-            <input type="checkbox" name="days_of_week[]" value="6"> Saturday
-            <input type="checkbox" name="days_of_week[]" value="7"> Sunday
+            <label id="lbl_dow">Days of the Week:</label>
+            <div class="dow_chb_wrapper">
+                <label for="dow_mon">Monday</label>
+                <input type="checkbox" name="days_of_week[]" id="dow_mon" value="1">
+            </div>
+            <div class="dow_chb_wrapper">
+                <label for="dow_tue">Tuesday</label>
+                <input type="checkbox" name="days_of_week[]" id="dow_tue" value="2">
+            </div>
+            <div class="dow_chb_wrapper">
+                <label for="dow_wed">Wednesday</label>
+                <input type="checkbox" name="days_of_week[]" id="dow_wed" value="3">
+            </div>
+            <div class="dow_chb_wrapper">
+                <label for="dow_thu">Thursday</label>
+                <input type="checkbox" name="days_of_week[]" id="dow_thu" value="4">
+            </div>
+            <div class="dow_chb_wrapper">
+                <label for="dow_fri">Friday</label>
+                <input type="checkbox" name="days_of_week[]" id="dow_fri" value="5">
+            </div>
+            <div class="dow_chb_wrapper">
+                <label for="dow_sat">Saturday</label>
+                <input type="checkbox" name="days_of_week[]" id="dow_sat" value="6">
+            </div>
+            <div class="dow_chb_wrapper">
+                <label for="dow_sun">Sunday</label>
+                <input type="checkbox" name="days_of_week[]" id="dow_sun" value="7">
+            </div>
 
-            <label for="days_of_month">Days of the Month:</label>
+            <label for="days_of_month" id="lbl_dom">Days of the Month:</label>
             <input type="text" name="days_of_month" id="days_of_month" placeholder="1,15 (comma-separated)">
 
             <label for="months">Months:</label>
             <input type="text" name="months" id="months" placeholder="1,7,12 (comma-separated)">
         </div>
 
-        <button type="submit">Create Habit</button>
+        <input type="submit" value="Create Habit">
     </form>
 </section>
 
 <script>
 function toggleCustomFrequency(value) {
     const customFrequencyDiv = document.getElementById('custom-frequency');
-    customFrequencyDiv.style.display = value === 'Custom' ? 'block' : 'none';
+    customFrequencyDiv.style.display = value === 'Custom' ? 'flex' : 'none';
 }
 </script>

app/views/habits/index.php

@@ -0,0 +1,35 @@
+<link rel="stylesheet" href="/css/habits_dashboard.css">
+<section class="habits">
+    <?php if (empty($this->get('habits'))): ?>
+        <p>No habits yet. <a href="/habits/create">Create your first habit</a>.</p>
+    <?php else: ?>
+        <table>
+            <thead>
+                <tr>
+                    <th>Title</th>
+                    <th>Frequency</th>
+                    <th>Custom Schedule</th>
+                    <th>Points</th>
+                    <th>Created At</th>
+                    <th>Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+                <?php foreach ($this->get('habits') as $habit): ?>
+                    <tr>
+                        <td><?= htmlspecialchars($habit['title']) ?></td>
+                        <td><?= htmlspecialchars($habit['frequency']) ?></td>
+                        <td><?= htmlspecialchars($habit['custom_frequency'] ?? 'N/A') ?></td>
+                        <td><?= htmlspecialchars($habit['reward_points']) ?></td>
+                        <td><?= htmlspecialchars($habit['created_at']) ?></td>
+                        <td>
+                            <a href="/habits/edit?id=<?= $habit['id'] ?>">Edit</a> |
+                            <a href="/habits/delete?id=<?= $habit['id'] ?>" onclick="return confirm('Are you sure you want to delete this habit?')">Delete</a>
+                        </td>
+                    </tr>
+                <?php endforeach; ?>
+            </tbody>
+        </table>
+        <a href="/habits/create">Create new habit!</a>
+    <?php endif; ?>
+</section>

app/views/layouts/base.php

@@ -6,6 +6,7 @@
     <link rel="stylesheet" href="/css/main.css">
     <link rel="stylesheet" href="/css/global.css">
     <link rel="stylesheet" href="/css/vars.css">
+    <link rel="icon" type="image/x-icon" href="/img/favicon.ico">
   </head>
   <body>
     <header>

public/css/dashboard.css

@@ -0,0 +1,22 @@
+.dashboard {
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  align-items: center;
+}
+
+.card-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: center;
+  margin-top: 2rem;
+}
+
+.card {
+  background-color: var(--clr-secondary);
+  border-radius: var(--border-radious);
+  border: var(--borderWidth-thin) solid var(--clr-border);
+  min-width: 17rem;
+  padding: 1rem;
+}

public/css/form.css

@@ -1,4 +1,4 @@
-.signin {
+.form {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -10,19 +10,17 @@ body {
   background-color: var(--clr-secondary);
 }
 
-.signin .header-form {
+.form .header-form {
   display: flex;
   align-items: center;
   flex-direction: column;
-  margin-bottom: 2rem;
 }
 
-.signin .header-form img {
+.form .header-form img {
   height: 5rem;
-  margin-bottom: 2rem;
 }
 
-.signin form {
+.form form {
   display: flex;
   flex-direction: column;
   padding: 1rem;
@@ -32,7 +30,8 @@ body {
   border: var(--borderWidth-thin) solid var(--clr-border);
 }
 
-.signin form input {
+.form form input,
+select {
   background-color: var(--clr-secondary);
   caret-color: white;
   color: white;
@@ -42,12 +41,12 @@ body {
   width: 15rem;
 }
 
-.signin form input[type="submit"] {
+.form form input[type="submit"] {
   background-color: var(--clr-green);
   color: white;
 }
 
-.signin .error {
+.form .error {
   width: 17rem;
   padding: 1rem;
   background-color: var(--clr-danger-muted);
@@ -57,6 +56,6 @@ body {
   color: white;
 }
 
-.signin small.error {
+.form small.error {
   width: 15rem;
 }

public/css/global.css

@@ -3,18 +3,30 @@
 body {
   font-family: "Open Sans", serif;
   background-color: var(--clr-primary);
+  color: white;
+  font-size: 14px;
 }
 
-a,
-p,
-label,
-h1 {
+a {
   color: white;
 }
 
-a,
-p,
-label,
-div {
-  font-size: 14px;
+h1 {
+  margin-top: .5rem;
+  margin-bottom: 1rem;
+}
+
+.btn-primary,
+.btn-danger {
+  background-color: var(--clr-green);
+  padding: .5rem;
+  text-decoration: none;
+  cursor: pointer;
+  border-radius: var(--border-radious);
+  border: var(--borderWidth-thin) solid var(--clr-border);
+}
+
+.btn-danger {
+  background-color: var(--clr-danger-muted) !important;
+  border: var(--borderWidth-thin) solid var(--clr-border-danger);
 }

public/css/habits_create.css

@@ -0,0 +1,21 @@
+.form form .dow_chb_wrapper input[type="checkbox"] {
+  width: 1rem;
+}
+
+.form form .dow_chb_wrapper {
+  display: flex;
+  justify-content: space-between;
+}
+
+#lbl_dow {
+  margin-bottom: .5rem;
+}
+
+#lbl_dom {
+  margin-top: .5rem;
+}
+
+#custom-frequency {
+  flex-direction: column;
+  justify-content: space-between;
+}

public/css/habits_dashboard.css

@@ -0,0 +1,26 @@
+.habits h1 {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+}
+
+.habits table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 1rem;
+}
+
+.habits table th,
+.habits table td {
+  border: 1px solid #ccc;
+  padding: 8px;
+  text-align: left;
+}
+
+.habits a {
+  color: #007bff;
+  text-decoration: none;
+}
+
+.habits a:hover {
+  text-decoration: underline;
+}

public/index.php

@@ -24,8 +24,11 @@ require_once models . 'Habit.php';
 
 // Initialize router
 $router = new Router();
+if(!$_SESSION['user']) {
     $router->add('/', 'HomeController@index');
-$router->add('/home', 'HomeController@home');
+} else {
+    $router->add('/', 'DashboardController@reroute', ['RequireAuth']);
+}
 
 // auth routes
 $router->group('/auth', [], function ($router) {
@@ -35,7 +38,7 @@ $router->group('/auth', [], function ($router) {
 });
 
 // dashboard route
-$router->add('/dashboard', 'HomeController@dashboard', ['RequireAuth']);
+$router->add('/dashboard', 'DashboardController@index', ['RequireAuth']);
 
 // habits routes
 $router->group('/habits', ['RequireAuth'], function ($router) {