Version 3

assets/css/dark-mode.css

@@ -1,6 +1,6 @@
 body.dark-mode {
-    background-color: #121212;
+    background-color: #2c2c2c; /* Dark grey background */
-    color: #e0e0e0;
+    color: #ffffff; /* White text */
 }
 
 body.dark-mode .header {
@@ -8,53 +8,47 @@ body.dark-mode .header {
     border-bottom: 1px solid #333;
 }
 
-body.dark-mode .card {
+/* Make header link white */
-    background-color: #1e1e1e;
+body.dark-mode .header a, body.dark-mode .header a:hover, body.dark-mode a.text-dark, body.dark-mode a.text-dark:hover {
-    border: 1px solid #333;
+    color: #ffffff !important;
 }
 
-body.dark-mode .modal-content {
-    background-color: #1e1e1e;
-    border: 1px solid #333;
-}
 
+body.dark-mode .card,
+body.dark-mode .modal-content,
 body.dark-mode .footer {
-    background-color: #1e1e1e;
+    background-color: #3a3a3a; /* Lighter grey for cards */
-    border-top: 1px solid #333;
+    border: 1px solid #444;
 }
 
 body.dark-mode .table {
-    background-color: #1e1e1e;
+    background-color: #3a3a3a; /* Lighter grey for tables */
-    color: #e0e0e0;
+    color: #ffffff;
 }
 
 body.dark-mode .table-light {
-    background-color: #333;
+    background-color: #4a4a4a; /* Slightly lighter grey for table header */
-    color: #e0e0e0;
+    color: #ffffff;
 }
 
 body.dark-mode .nav-tabs .nav-link {
-    color: #e0e0e0;
+    color: #ffffff;
-    border: 1px solid #333;
+    border: 1px solid #444;
 }
 
 body.dark-mode .nav-tabs .nav-link.active {
-    background-color: #333;
+    background-color: #4a4a4a;
-    border-color: #333;
+    border-color: #4a4a4a;
-}
-
-body.dark-mode .form-control {
-    background-color: #333;
-    color: #e0e0e0;
-    border: 1px solid #555;
 }
 
+body.dark-mode .form-control,
 body.dark-mode .form-select {
-    background-color: #333;
+    background-color: #4a4a4a;
-    color: #e0e0e0;
+    color: #ffffff;
-    border: 1px solid #555;
+    border: 1px solid #666;
 }
 
+/* Keep button colors for visibility */
 body.dark-mode .btn-primary {
     background-color: #0d6efd;
     border-color: #0d6efd;
@@ -71,8 +65,8 @@ body.dark-mode .btn-outline-primary:hover {
 }
 
 body.dark-mode .btn-outline-secondary {
-    color: #6c757d;
+    color: #8e959c;
-    border-color: #6c757d;
+    border-color: #8e959c;
 }
 
 body.dark-mode .btn-outline-secondary:hover {
@@ -91,10 +85,15 @@ body.dark-mode .btn-outline-info:hover {
 }
 
 body.dark-mode .text-muted {
-    color: #aaa !important;
+    color: #ccc !important;
 }
 
 body.dark-mode .badge.bg-info {
     background-color: #0dcaf0 !important;
     color: #000 !important;
 }
+
+/* Override for table header links */
+body.dark-mode .table-light a {
+    color: #ffffff !important;
+}

delete_grievance.php

@@ -0,0 +1,31 @@
+<?php
+require_once 'db/config.php';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['grievance_id'])) {
+    $grievance_id = $_POST['grievance_id'];
+
+    try {
+        $pdo = db();
+        
+        // Also delete associated updates
+        $stmt = $pdo->prepare("DELETE FROM grievance_updates WHERE grievance_id = ?");
+        $stmt->execute([$grievance_id]);
+
+        $stmt = $pdo->prepare("DELETE FROM grievances WHERE id = ?");
+        $stmt->execute([$grievance_id]);
+
+        header("Location: index.php");
+        exit();
+    } catch (PDOException $e) {
+        // Handle database errors
+        error_log("Database error: " . $e->getMessage());
+        // You might want to show an error message to the user
+        header("Location: index.php?error=deletion_failed");
+        exit();
+    }
+} else {
+    // Redirect if accessed directly or without a grievance_id
+    header("Location: index.php");
+    exit();
+}
+?>

footer.php

@@ -12,21 +12,29 @@
             const darkModeToggle = document.getElementById('darkModeToggle');
             const body = document.body;
 
-            // Check for saved dark mode preference
+            // Function to apply dark mode based on toggle state
-            if (localStorage.getItem('darkMode') === 'enabled') {
+            function applyDarkMode() {
-                body.classList.add('dark-mode');
+                if (darkModeToggle.checked) {
-                darkModeToggle.checked = true;
-            }
-
-            darkModeToggle.addEventListener('change', function () {
-                if (this.checked) {
                     body.classList.add('dark-mode');
                     localStorage.setItem('darkMode', 'enabled');
                 } else {
                     body.classList.remove('dark-mode');
                     localStorage.setItem('darkMode', 'disabled');
                 }
-            });
+            }
+
+            // Check for saved dark mode preference and set toggle accordingly
+            if (localStorage.getItem('darkMode') === 'enabled') {
+                darkModeToggle.checked = true;
+            } else if (localStorage.getItem('darkMode') === 'disabled') {
+                darkModeToggle.checked = false;
+            }
+
+            // Apply dark mode on initial load
+            applyDarkMode();
+
+            // Listener for toggle changes
+            darkModeToggle.addEventListener('change', applyDarkMode);
 
             var editGrievanceModal = document.getElementById('editGrievanceModal');
             if (editGrievanceModal) {
@@ -61,6 +69,16 @@
                     }
                 });
             }
+
+            var deleteGrievanceModal = document.getElementById('deleteGrievanceModal');
+            if (deleteGrievanceModal) {
+                deleteGrievanceModal.addEventListener('show.bs.modal', function (event) {
+                    var button = event.relatedTarget;
+                    var id = button.getAttribute('data-id');
+                    var modal = this;
+                    modal.querySelector('#delete_grievance_id').value = id;
+                });
+            }
         });
     </script>
 </body>

header.php

@@ -210,11 +210,11 @@
         <div class="container">
             <div class="d-flex justify-content-between align-items-center">
                 <div>
-                    <h1><a href="index.php" class="text-decoration-none text-dark">TWU Local 555 BNA Ramp Grievance Tracker</a></h1>
+                    <h1><a href="index.php" class="text-decoration-none">TWU Local 555 BNA Ramp Grievance Tracker</a></h1>
                     <p class="lead">A simple tool to track and manage ramp grievances.</p>
                 </div>
                 <div class="form-check form-switch">
-                    <input class="form-check-input" type="checkbox" id="darkModeToggle">
+                    <input class="form-check-input" type="checkbox" id="darkModeToggle" checked>
                     <label class="form-check-label" for="darkModeToggle">Dark Mode</label>
                 </div>
             </div>

index.php

@@ -7,7 +7,10 @@ function get_status_class($status) {
 
 ?>
 
-        <ul class="nav nav-tabs mb-3">
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-md-3">
+            <ul class="nav nav-pills flex-column">
                 <?php foreach ($categories as $category): ?>
                     <li class="nav-item">
                         <a class="nav-link <?php echo $page === $category ? 'active' : ''; ?>" href="index.php?page=<?php echo urlencode($category); ?>"><?php echo htmlspecialchars($category); ?></a>
@@ -17,7 +20,8 @@ function get_status_class($status) {
                     <a class="nav-link" href="statistics.php">Statistics</a>
                 </li>
             </ul>
-
+        </div>
+        <div class="col-md-9">
             <div class="d-flex justify-content-end mb-3">
                 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addGrievanceModal">
                     <i class="bi bi-plus-circle"></i> Add Grievance
@@ -98,6 +102,12 @@ function get_status_class($status) {
                                                 <button type="button" class="btn btn-sm btn-outline-info view-updates-btn" data-bs-toggle="collapse" data-bs-target="#updates-<?php echo $grievance['id']; ?>">
                                                     <i class="bi bi-chat-dots"></i> View Updates
                                                 </button>
+                                                <button type="button" class="btn btn-sm btn-outline-danger delete-btn"
+                                                    data-bs-toggle="modal"
+                                                    data-bs-target="#deleteGrievanceModal"
+                                                    data-id="<?php echo $grievance['id']; ?>">
+                                                    Delete
+                                                </button>
                                             </td>
                                         </tr>
                                         <tr class="collapse" id="updates-<?php echo $grievance['id']; ?>">
@@ -145,6 +155,10 @@ function get_status_class($status) {
                     </div>
                 </div>
             </div>
+        </div>
+    </div>
+</div>
+
     </main>
 
     <!-- Add Grievance Modal -->
@@ -247,4 +261,26 @@ function get_status_class($status) {
         </div>
     </div>
 
+    <!-- Delete Grievance Modal -->
+    <div class="modal fade" id="deleteGrievanceModal" tabindex="-1" aria-labelledby="deleteGrievanceModalLabel" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="deleteGrievanceModalLabel">Delete Grievance</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <p>Are you sure you want to delete this grievance?</p>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                    <form action="delete_grievance.php" method="post" id="deleteGrievanceForm">
+                        <input type="hidden" name="grievance_id" id="delete_grievance_id">
+                        <button type="submit" class="btn btn-danger">Delete</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <?php require_once 'footer.php'; ?>