Version 3

assets/css/custom.css

@@ -0,0 +1,21 @@
+body {
+    
+}
+
+.header {
+    background: linear-gradient(to right, #007bff, #0056b3);
+    color: white;
+    padding: 4rem 0;
+    text-align: center;
+}
+
+.header h1 {
+    text-shadow: none;
+}
+
+
+.footer {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+}

assets/css/dark-mode.css

@@ -0,0 +1,99 @@
+body.dark-mode {
+    background-color: #2c2c2c; /* Dark grey background */
+    color: #ffffff; /* White text */
+}
+
+body.dark-mode .header {
+    background: #1e1e1e;
+    border-bottom: 1px solid #333;
+}
+
+/* Make header link white */
+body.dark-mode .header a, body.dark-mode .header a:hover, body.dark-mode a.text-dark, body.dark-mode a.text-dark:hover {
+    color: #ffffff !important;
+}
+
+
+body.dark-mode .card,
+body.dark-mode .modal-content,
+body.dark-mode .footer {
+    background-color: #3a3a3a; /* Lighter grey for cards */
+    border: 1px solid #444;
+}
+
+body.dark-mode .table {
+    background-color: #3a3a3a; /* Lighter grey for tables */
+    color: #ffffff;
+}
+
+body.dark-mode .table-light {
+    background-color: #4a4a4a; /* Slightly lighter grey for table header */
+    color: #ffffff;
+}
+
+body.dark-mode .nav-tabs .nav-link {
+    color: #ffffff;
+    border: 1px solid #444;
+}
+
+body.dark-mode .nav-tabs .nav-link.active {
+    background-color: #4a4a4a;
+    border-color: #4a4a4a;
+}
+
+body.dark-mode .form-control,
+body.dark-mode .form-select {
+    background-color: #4a4a4a;
+    color: #ffffff;
+    border: 1px solid #666;
+}
+
+/* Keep button colors for visibility */
+body.dark-mode .btn-primary {
+    background-color: #0d6efd;
+    border-color: #0d6efd;
+}
+
+body.dark-mode .btn-outline-primary {
+    color: #0d6efd;
+    border-color: #0d6efd;
+}
+
+body.dark-mode .btn-outline-primary:hover {
+    background-color: #0d6efd;
+    color: #fff;
+}
+
+body.dark-mode .btn-outline-secondary {
+    color: #8e959c;
+    border-color: #8e959c;
+}
+
+body.dark-mode .btn-outline-secondary:hover {
+    background-color: #6c757d;
+    color: #fff;
+}
+
+body.dark-mode .btn-outline-info {
+    color: #0dcaf0;
+    border-color: #0dcaf0;
+}
+
+body.dark-mode .btn-outline-info:hover {
+    background-color: #0dcaf0;
+    color: #000;
+}
+
+body.dark-mode .text-muted {
+    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;
+}

assets/css/status-colors.css

@@ -0,0 +1,13 @@
+
+.status-pending-submission { background-color: #f2f2f2 !important; color: black !important; }
+.status-fwd { background-color: #f2f2f2 !important; color: black !important; }
+.status-1st-step { background-color: #add8e6 !important; color: black !important; }
+.status-1st-step-pending { background-color: #ffdde1 !important; color: black !important; }
+.status-2nd-step { background-color: #ffdab9 !important; color: black !important; }
+.status-2nd-step-pending { background-color: #ffcccb !important; color: black !important; }
+.status-settled { background-color: #90ee90 !important; color: black !important; }
+.status-withdrawn { background-color: #ffffe0 !important; color: black !important; }
+.status-system-board { background-color: #fffff0 !important; color: black !important; }
+.status-arbitration { background-color: #f4a0a0 !important; color: black !important; }
+.status-med-arb { background-color: #f4a0a0 !important; color: black !important; }
+.status-withdrawn-resigned { background-color: #ffffe0 !important; color: black !important; }

assets/js/main.js

@@ -0,0 +1 @@
+// Custom JavaScript will go here

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

@@ -0,0 +1,85 @@
+    <footer class="footer mt-auto py-3 bg-light">
+        <div class="container text-center">
+            <span class="text-muted">Built with <a href="https://flatlogic.com" target="_blank">Flatlogic</a></span>
+        </div>
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            const darkModeToggle = document.getElementById('darkModeToggle');
+            const body = document.body;
+
+            // Function to apply dark mode based on toggle state
+            function applyDarkMode() {
+                if (darkModeToggle.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) {
+                editGrievanceModal.addEventListener('show.bs.modal', function (event) {
+                    var button = event.relatedTarget;
+                    var id = button.getAttribute('data-id');
+                    var grievantName = button.getAttribute('data-grievant-name');
+                    var discipline = button.getAttribute('data-discipline');
+                    var subject = button.getAttribute('data-subject');
+                    var status = button.getAttribute('data-status');
+                    var unionRepresentative = button.getAttribute('data-union-representative');
+                    var category = button.getAttribute('data-category');
+                    var caseNumber = button.getAttribute('data-case-number');
+
+                    var modal = this;
+                    modal.querySelector('#edit_grievance_id').value = id;
+                    modal.querySelector('#edit_grievant_name').value = grievantName;
+                    modal.querySelector('#edit_discipline').value = discipline;
+                    modal.querySelector('#edit_subject').value = subject;
+                    modal.querySelector('#edit_status').value = status;
+                    modal.querySelector('#edit_union_representative').value = unionRepresentative;
+
+                    var caseNumberWrapper = modal.querySelector('#edit_case_number_wrapper');
+                    var caseNumberInput = modal.querySelector('#edit_case_number');
+
+                    if (category === 'FWD to Office' || category === 'Terminations') {
+                        caseNumberWrapper.style.display = 'block';
+                        caseNumberInput.value = caseNumber;
+                    } else {
+                        caseNumberWrapper.style.display = 'none';
+                        caseNumberInput.value = '';
+                    }
+                });
+            }
+
+            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>
+</html>

header.php

@@ -0,0 +1,225 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TWU Local 555 BNA Ramp Grievance Tracker</title>
+    <meta name="description" content="A tool for TWU Local 555 to track ramp grievances at BNA.">
+    <meta name="keywords" content="grievance tracker, union grievance, ramp grievance, TWU Local 555, BNA, employee relations, dispute resolution, union representative, workplace issues, Built with Flatlogic Generator">
+    <meta property="og:title" content="TWU Local 555 BNA Ramp Grievance Tracker">
+    <meta property="og:description" content="A tool for TWU Local 555 to track ramp grievances at BNA.">
+    <meta property="og:image" content="">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:image" content="">
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
+    <link rel="stylesheet" href="assets/css/status-colors.css?v=<?php echo time(); ?>">
+    <link rel="stylesheet" href="assets/css/dark-mode.css?v=<?php echo time(); ?>">
+</head>
+<body>
+    <?php
+    require_once 'db/config.php';
+
+    $message = '';
+    $page = isset($_GET['page']) ? htmlspecialchars($_GET['page']) : 'Local Grievances';
+    $categories = ['Local Grievances', 'FWD to Office', 'Terminations'];
+
+    $status_options = [];
+    if ($page === 'Local Grievances') {
+        $status_options = ['Pending Submission', '1st Step', '1st Step Pending', '2nd Step', '2nd Step Pending', 'Settled', 'Withdrawn'];
+    } elseif ($page === 'FWD to Office') {
+        $status_options = ['FWD', 'System Board', 'Arbitration', 'MED/ARB', 'Settled', 'Withdrawn'];
+    } elseif ($page === 'Terminations') {
+        $status_options = ['FWD', 'System Board', 'Arbitration', 'Settled', 'Withdrawn/Resigned'];
+    }
+
+    try {
+        $pdo = db();
+        $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
+
+        $pdotest = $pdo->query('SHOW TABLES');
+        if ($pdotest->rowCount() == 0) {
+            $pdo->exec("CREATE TABLE IF NOT EXISTS grievances (
+                id INT AUTO_INCREMENT PRIMARY KEY,
+                grievant_name VARCHAR(255) NOT NULL,
+                discipline VARCHAR(255) NOT NULL,
+                subject VARCHAR(255) NOT NULL,
+                status VARCHAR(100) NOT NULL,
+                last_updated TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+                union_representative VARCHAR(255) NOT NULL,
+                category VARCHAR(255) NOT NULL DEFAULT 'Local Grievances'
+            );");
+        }
+
+        // Check if 'category' column exists and add it if it doesn't
+        $stmt = $pdo->query("SHOW COLUMNS FROM grievances LIKE 'category'");
+        if ($stmt->rowCount() == 0) {
+            $pdo->exec("ALTER TABLE grievances ADD COLUMN category VARCHAR(255) NOT NULL DEFAULT 'Local Grievances'");
+        }
+
+        // Check if 'case_number' column exists and add it if it doesn't
+        $stmt = $pdo->query("SHOW COLUMNS FROM grievances LIKE 'case_number'");
+        if ($stmt->rowCount() == 0) {
+            $pdo->exec("ALTER TABLE grievances ADD COLUMN case_number VARCHAR(255) NULL");
+        }
+
+        $pdo->exec("CREATE TABLE IF NOT EXISTS grievance_updates (
+            id INT AUTO_INCREMENT PRIMARY KEY,
+            grievance_id INT NOT NULL,
+            update_text TEXT NOT NULL,
+            representative_name VARCHAR(255) NOT NULL,
+            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+            FOREIGN KEY (grievance_id) REFERENCES grievances(id) ON DELETE CASCADE
+        );");
+
+    } catch (PDOException $e) {
+        $message = '<div class="alert alert-danger" role="alert">Database error: ' . $e->getMessage() . '</div>';
+    }
+
+    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+        if (isset($_POST['add_grievance'])) {
+            $grievant_name = trim($_POST['grievant_name']);
+            $discipline = trim($_POST['discipline']);
+            $subject = trim($_POST['subject']);
+            $status = trim($_POST['status']);
+            $union_representative = trim($_POST['union_representative']);
+            $category = trim($_POST['category']);
+
+            if (!empty($grievant_name) && !empty($discipline) && !empty($subject) && !empty($status) && !empty($union_representative) && !empty($category)) {
+                try {
+                    $stmt = $pdo->prepare("INSERT INTO grievances (grievant_name, discipline, subject, status, union_representative, category) VALUES (?, ?, ?, ?, ?, ?)");
+                    $stmt->execute([$grievant_name, $discipline, $subject, $status, $union_representative, $category]);
+                    $message = '<div class="alert alert-success" role="alert">Grievance added successfully!</div>';
+                } catch (PDOException $e) {
+                    $message = '<div class="alert alert-danger" role="alert">Error adding grievance: ' . $e->getMessage() . '</div>';
+                }
+            } else {
+                $message = '<div class="alert alert-warning" role="alert">Please fill out all fields.</div>';
+            }
+        } elseif (isset($_POST['move_grievance'])) {
+            $grievance_id = $_POST['grievance_id'];
+            $new_category = $_POST['new_category'];
+
+            if (!empty($grievance_id) && !empty($new_category) && in_array($new_category, $categories)) {
+                try {
+                    $stmt = $pdo->prepare("UPDATE grievances SET category = ? WHERE id = ?");
+                    $stmt->execute([$new_category, $grievance_id]);
+                    $message = '<div class="alert alert-success" role="alert">Grievance moved successfully!</div>';
+                } catch (PDOException $e) {
+                    $message = '<div class="alert alert-danger" role="alert">Error moving grievance: ' . $e->getMessage() . '</div>';
+                }
+            } else {
+                $message = '<div class="alert alert-warning" role="alert">Invalid move operation.</div>';
+            }
+        } elseif (isset($_POST['edit_grievance'])) {
+            $grievance_id = $_POST['grievance_id'];
+            $grievant_name = trim($_POST['grievant_name']);
+            $discipline = trim($_POST['discipline']);
+            $subject = trim($_POST['subject']);
+            $status = trim($_POST['status']);
+            $union_representative = trim($_POST['union_representative']);
+            $case_number = isset($_POST['case_number']) ? trim($_POST['case_number']) : null;
+
+            if (!empty($grievance_id) && !empty($grievant_name) && !empty($discipline) && !empty($subject) && !empty($status) && !empty($union_representative)) {
+                try {
+                    // Check category to decide if case_number should be updated
+                    $stmt_cat = $pdo->prepare("SELECT category FROM grievances WHERE id = ?");
+                    $stmt_cat->execute([$grievance_id]);
+                    $grievance_category = $stmt_cat->fetchColumn();
+
+                    $sql = "UPDATE grievances SET grievant_name = ?, discipline = ?, subject = ?, status = ?, union_representative = ?";
+                    $params = [$grievant_name, $discipline, $subject, $status, $union_representative];
+
+                    if (($grievance_category === 'FWD to Office' || $grievance_category === 'Terminations')) {
+                        $sql .= ", case_number = ?";
+                        $params[] = $case_number;
+                    }
+                    
+                    $sql .= " WHERE id = ?";
+                    $params[] = $grievance_id;
+
+                    $stmt = $pdo->prepare($sql);
+                    $stmt->execute($params);
+                    $message = '<div class="alert alert-success" role="alert">Grievance updated successfully!</div>';
+                } catch (PDOException $e) {
+                    $message = '<div class="alert alert-danger" role="alert">Error updating grievance: ' . $e->getMessage() . '</div>';
+                }
+            } else {
+                $message = '<div class="alert alert-warning" role="alert">Please fill out all fields.</div>';
+            }
+        } elseif (isset($_POST['add_grievance_update'])) {
+            $grievance_id = $_POST['grievance_id'];
+            $update_text = trim($_POST['update_text']);
+            $representative_name = trim($_POST['representative_name']);
+
+            if (!empty($grievance_id) && !empty($update_text) && !empty($representative_name)) {
+                try {
+                    $stmt = $pdo->prepare("INSERT INTO grievance_updates (grievance_id, update_text, representative_name) VALUES (?, ?, ?)");
+                    $stmt->execute([$grievance_id, $update_text, $representative_name]);
+                    $message = '<div class="alert alert-success" role="alert">Update added successfully!</div>';
+                } catch (PDOException $e) {
+                    $message = '<div class="alert alert-danger" role="alert">Error adding update: ' . $e->getMessage() . '</div>';
+                }
+            } else {
+                $message = '<div class="alert alert-warning" role="alert">Please fill out all fields for the update.</div>';
+            }
+        }
+    }
+
+    $sort_column = $_GET['sort'] ?? 'last_updated';
+    $sort_order = $_GET['order'] ?? 'desc';
+    
+    // The 'timeframes' column in the UI is a date input, not a database field.
+    // Sorting by 'timeframes' will sort by 'last_updated' as a sensible default.
+    $valid_columns = ['last_updated', 'status', 'timeframes'];
+    if (!in_array($sort_column, $valid_columns)) {
+        $sort_column = 'last_updated';
+    }
+
+    $order_by_column = ($sort_column === 'timeframes') ? 'last_updated' : $sort_column;
+    $direction = ($sort_order === 'asc' ? 'ASC' : 'DESC');
+
+    if ($order_by_column === 'status') {
+        $order_clause = "ORDER BY CASE status
+            WHEN 'Pending Submission' THEN 1
+            WHEN '1st Step' THEN 2
+            WHEN '1st Step Pending' THEN 3
+            WHEN '2nd Step' THEN 4
+            WHEN '2nd Step Pending' THEN 5
+            WHEN 'Settled' THEN 6
+            WHEN 'Withdrawn' THEN 7
+            ELSE 8
+        END " . $direction;
+    } else {
+        $order_clause = "ORDER BY " . $order_by_column . " " . $direction;
+    }
+
+    try {
+        $stmt = $pdo->prepare("SELECT * FROM grievances WHERE category = ? $order_clause");
+        $stmt->execute([$page]);
+        $grievances = $stmt->fetchAll(PDO::FETCH_ASSOC);
+    } catch (PDOException $e) {
+        $grievances = [];
+        $message .= '<div class="alert alert-danger" role="alert">Error fetching grievances: ' . $e->getMessage() . '</div>';
+    }
+    ?>
+
+    <header class="header">
+        <div class="container">
+            <div class="d-flex justify-content-between align-items-center">
+                <div>
+                    <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" checked>
+                    <label class="form-check-label" for="darkModeToggle">Dark Mode</label>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <main class="container mt-5">
+        <?php echo $message; ?>

index.php

@@ -1,150 +1,286 @@
-<?php
-declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
+<?php require_once 'header.php'; 
+
+function get_status_class($status) {
+    $status_class = 'status-' . strtolower(str_replace(' ', '-', str_replace('/', '-', $status)));
+    return $status_class;
+}
 
-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
 ?>
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>New Style</title>
+
+<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>
+                    </li>
+                <?php endforeach; ?>
+                <li class="nav-item">
+                    <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
+                </button>
+            </div>
+
+            <div class="card shadow-sm">
+                <div class="card-body">
+                    <h2 class="card-title"><?php echo htmlspecialchars($page); ?></h2>
+                    <div class="table-responsive">
+                        <table class="table table-hover">
+                            <thead class="table-light">
+                                <tr>
+                                    <th>Grievant Name</th>
+                                    <th>Discipline</th>
+                                    <th>Subject</th>
+                                    <?php if ($page === 'FWD to Office' || $page === 'Terminations'): ?>
+                                    <th>Case Number</th>
+                                    <?php endif; ?>
+                                    <?php if ($page === 'Local Grievances'): ?>
+                                    <th><a href="index.php?page=<?php echo urlencode($page); ?>&sort=timeframes&order=<?php echo ($sort_column === 'timeframes' && $sort_order === 'asc') ? 'desc' : 'asc'; ?>">Timeframes</a></th>
+                                    <?php endif; ?>
+                                    <th><a href="index.php?page=<?php echo urlencode($page); ?>&sort=status&order=<?php echo ($sort_column === 'status' && $sort_order === 'asc') ? 'desc' : 'asc'; ?>">Status</a></th>
+                                    <th><a href="index.php?page=<?php echo urlencode($page); ?>&sort=last_updated&order=<?php echo ($sort_column === 'last_updated' && $sort_order === 'asc') ? 'desc' : 'asc'; ?>">Last Updated</a></th>
+                                    <th>Union Representative</th>
+                                    <th>Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <?php if (empty($grievances)): ?>
+                                    <tr>
+                                        <td colspan="8" class="text-center">No grievances found in this category.</td>
+                                    </tr>
+                                <?php else: ?>
+                                    <?php foreach ($grievances as $grievance): ?>
+                                        <tr>
+                                            <td><?php echo htmlspecialchars($grievance['grievant_name']); ?></td>
+                                            <td><?php echo htmlspecialchars($grievance['discipline']); ?></td>
+                                            <td><?php echo htmlspecialchars($grievance['subject']); ?></td>
+                                            <?php if ($page === 'FWD to Office' || $page === 'Terminations'): ?>
+                                            <td><?php echo htmlspecialchars($grievance['case_number'] ?? ''); ?></td>
+                                            <?php endif; ?>
+                                            <?php if ($page === 'Local Grievances'): ?>
+                                            <td><input type="date" class="form-control"></td>
+                                            <?php endif; ?>
+                                            <td><span class="badge <?php echo get_status_class(htmlspecialchars($grievance['status'])); ?>"><?php echo htmlspecialchars($grievance['status']); ?></span></td>
+                                            <td><?php echo date("m/d/Y h:i A", strtotime($grievance['last_updated'])); ?></td>
+                                            <td><?php echo htmlspecialchars($grievance['union_representative']); ?></td>
+                                            <td class="d-flex gap-2">
+                                                <form action="index.php?page=<?php echo urlencode($page); ?>" method="post" class="d-flex">
+                                                    <input type="hidden" name="move_grievance" value="1">
+                                                    <input type="hidden" name="grievance_id" value="<?php echo $grievance['id']; ?>">
+                                                    <select name="new_category" class="form-select form-select-sm me-2">
+                                                        <option selected disabled>Move to...</option>
                                                         <?php
-// Read project preview data from environment
-$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
-$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
+                                                        foreach ($categories as $category) {
+                                                            if ($category !== $grievance['category']) {
+                                                                echo '<option value="' . htmlspecialchars($category) . '">' . htmlspecialchars($category) . '</option>';
+                                                            }
+                                                        }
                                                         ?>
-<?php if ($projectDescription): ?>
-  <!-- Meta description -->
-  <meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
-  <!-- Open Graph meta tags -->
-  <meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-  <!-- Twitter meta tags -->
-  <meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
+                                                    </select>
+                                                    <button type="submit" class="btn btn-sm btn-outline-secondary">Move</button>
+                                                </form>
+                                                <button type="button" class="btn btn-sm btn-outline-primary edit-btn"
+                                                    data-bs-toggle="modal"
+                                                    data-bs-target="#editGrievanceModal"
+                                                    data-id="<?php echo $grievance['id']; ?>"
+                                                    data-grievant-name="<?php echo htmlspecialchars($grievance['grievant_name']); ?>"
+                                                    data-discipline="<?php echo htmlspecialchars($grievance['discipline']); ?>"
+                                                    data-subject="<?php echo htmlspecialchars($grievance['subject']); ?>"
+                                                    data-status="<?php echo htmlspecialchars($grievance['status']); ?>"
+                                                    data-union-representative="<?php echo htmlspecialchars($grievance['union_representative']); ?>"
+                                                    data-category="<?php echo htmlspecialchars($grievance['category']); ?>"
+                                                    data-case-number="<?php echo htmlspecialchars($grievance['case_number'] ?? ''); ?>">
+                                                    Edit
+                                                </button>
+                                                <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']; ?>">
+                                            <td colspan="8">
+                                                <div class="updates-container p-3">
+                                                    <h5>Updates</h5>
+                                                    <?php
+                                                    $update_stmt = $pdo->prepare("SELECT * FROM grievance_updates WHERE grievance_id = ? ORDER BY created_at DESC");
+                                                    $update_stmt->execute([$grievance['id']]);
+                                                    $updates = $update_stmt->fetchAll(PDO::FETCH_ASSOC);
+                                                    ?>
+                                                    <?php if (empty($updates)): ?>
+                                                        <p>No updates for this grievance yet.</p>
+                                                    <?php else: ?>
+                                                        <ul class="list-group mb-3">
+                                                            <?php foreach ($updates as $update): ?>
+                                                                <li class="list-group-item">
+                                                                    <p class="mb-1"><?php echo htmlspecialchars($update['update_text']); ?></p>
+                                                                    <small class="text-muted">By <?php echo htmlspecialchars($update['representative_name']); ?> on <?php echo date("m/d/Y h:i A", strtotime($update['created_at'])); ?></small>
+                                                                </li>
+                                                            <?php endforeach; ?>
+                                                        </ul>
                                                     <?php endif; ?>
-<?php if ($projectImageUrl): ?>
-  <!-- Open Graph image -->
-  <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-  <!-- Twitter image -->
-  <meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
+
+                                                    <form action="index.php?page=<?php echo urlencode($page); ?>" method="post">
+                                                        <input type="hidden" name="add_grievance_update" value="1">
+                                                        <input type="hidden" name="grievance_id" value="<?php echo $grievance['id']; ?>">
+                                                        <div class="mb-3">
+                                                            <label for="update_text_<?php echo $grievance['id']; ?>" class="form-label">Add Update</label>
+                                                            <textarea class="form-control" id="update_text_<?php echo $grievance['id']; ?>" name="update_text" rows="3" required></textarea>
+                                                        </div>
+                                                        <div class="mb-3">
+                                                            <label for="representative_name_<?php echo $grievance['id']; ?>" class="form-label">Your Name (Union Representative)</label>
+                                                            <input type="text" class="form-control" id="representative_name_<?php echo $grievance['id']; ?>" name="representative_name" required>
+                                                        </div>
+                                                        <button type="submit" class="btn btn-primary">Submit Update</button>
+                                                    </form>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    <?php endforeach; ?>
                                 <?php endif; ?>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
-  <style>
-    :root {
-      --bg-color-start: #6a11cb;
-      --bg-color-end: #2575fc;
-      --text-color: #ffffff;
-      --card-bg-color: rgba(255, 255, 255, 0.01);
-      --card-border-color: rgba(255, 255, 255, 0.1);
-    }
-    body {
-      margin: 0;
-      font-family: 'Inter', sans-serif;
-      background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-      color: var(--text-color);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-      text-align: center;
-      overflow: hidden;
-      position: relative;
-    }
-    body::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
-      animation: bg-pan 20s linear infinite;
-      z-index: -1;
-    }
-    @keyframes bg-pan {
-      0% { background-position: 0% 0%; }
-      100% { background-position: 100% 100%; }
-    }
-    main {
-      padding: 2rem;
-    }
-    .card {
-      background: var(--card-bg-color);
-      border: 1px solid var(--card-border-color);
-      border-radius: 16px;
-      padding: 2rem;
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
-    }
-    .loader {
-      margin: 1.25rem auto 1.25rem;
-      width: 48px;
-      height: 48px;
-      border: 3px solid rgba(255, 255, 255, 0.25);
-      border-top-color: #fff;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      from { transform: rotate(0deg); }
-      to   { transform: rotate(360deg); }
-    }
-    .hint {
-      opacity: 0.9;
-    }
-    .sr-only {
-      position: absolute;
-      width: 1px; height: 1px;
-      padding: 0; margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap; border: 0;
-    }
-    h1 {
-      font-size: 3rem;
-      font-weight: 700;
-      margin: 0 0 1rem;
-      letter-spacing: -1px;
-    }
-    p {
-      margin: 0.5rem 0;
-      font-size: 1.1rem;
-    }
-    code {
-      background: rgba(0,0,0,0.2);
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    }
-    footer {
-      position: absolute;
-      bottom: 1rem;
-      font-size: 0.8rem;
-      opacity: 0.7;
-    }
-  </style>
-</head>
-<body>
-  <main>
-    <div class="card">
-      <h1>Analyzing your requirements and generating your website…</h1>
-      <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
-        <span class="sr-only">Loading…</span>
+                            </tbody>
+                        </table>
                     </div>
-      <p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
-      <p class="hint">This page will update automatically as the plan is implemented.</p>
-      <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
                 </div>
+            </div>
+        </div>
+    </div>
+</div>
+
     </main>
-  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
-  </footer>
-</body>
-</html>
+
+    <!-- Add Grievance Modal -->
+    <div class="modal fade" id="addGrievanceModal" tabindex="-1" aria-labelledby="addGrievanceModalLabel" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="addGrievanceModalLabel">Add New Grievance</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <form action="index.php?page=<?php echo urlencode($page); ?>" method="post" id="addGrievanceForm">
+                        <input type="hidden" name="add_grievance" value="1">
+                        <input type="hidden" name="category" value="<?php echo htmlspecialchars($page); ?>">
+                        <div class="mb-3">
+                            <label for="grievant_name" class="form-label">Grievant Name</label>
+                            <input type="text" class="form-control" id="grievant_name" name="grievant_name" required>
+                        </div>
+                        <div class="mb-3">
+                            <label for="discipline" class="form-label">Discipline</label>
+                            <input type="text" class="form-control" id="discipline" name="discipline" required>
+                        </div>
+                        <div class="mb-3">
+                            <label for="subject" class="form-label">Subject</label>
+                            <input type="text" class="form-control" id="subject" name="subject" required>
+                        </div>
+                        <div class="mb-3">
+                            <label for="status" class="form-label">Status</label>
+                            <select class="form-select" id="status" name="status" required>
+                                <?php
+                                foreach ($status_options as $option) {
+                                    echo '<option value="' . htmlspecialchars($option) . '">' . htmlspecialchars($option) . '</option>';
+                                }
+                                ?>
+                            </select>
+                        </div>
+                        <div class="mb-3">
+                            <label for="union_representative" class="form-label">Union Representative</label>
+                            <input type="text" class.form-control" id="union_representative" name="union_representative" required>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                    <button type="submit" class="btn btn-primary" form="addGrievanceForm">Save Grievance</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Edit Grievance Modal -->
+    <div class="modal fade" id="editGrievanceModal" tabindex="-1" aria-labelledby="editGrievanceModalLabel" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="editGrievanceModalLabel">Edit Grievance</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <form action="index.php?page=<?php echo urlencode($page); ?>" method="post" id="editGrievanceForm">
+                        <input type="hidden" name="edit_grievance" value="1">
+                        <input type="hidden" name="grievance_id" id="edit_grievance_id">
+                        <div class="mb-3">
+                            <label for="edit_grievant_name" class="form-label">Grievant Name</label>
+                            <input type="text" class="form-control" id="edit_grievant_name" name="grievant_name" required>
+                        </div>
+                        <div class="mb-3">
+                            <label for="edit_discipline" class="form-label">Discipline</label>
+                            <input type="text" class="form-control" id="edit_discipline" name="discipline" required>
+                        </div>
+                        <div class="mb-3">
+                            <label for="edit_subject" class="form-label">Subject</label>
+                            <input type="text" class="form-control" id="edit_subject" name="subject" required>
+                        </div>
+                        <div class="mb-3">
+                            <label for="edit_status" class="form-label">Status</label>
+                            <select class="form-select" id="edit_status" name="status" required>
+                                <?php
+                                foreach ($status_options as $option) {
+                                    echo '<option value="' . htmlspecialchars($option) . '">' . htmlspecialchars($option) . '</option>';
+                                }
+                                ?>
+                            </select>
+                        </div>
+                        <div class="mb-3">
+                            <label for="edit_union_representative" class="form-label">Union Representative</label>
+                            <input type="text" class="form-control" id="edit_union_representative" name="union_representative" required>
+                        </div>
+                        <div class="mb-3" id="edit_case_number_wrapper" style="display: none;">
+                            <label for="edit_case_number" class="form-label">Case Number</label>
+                            <input type="text" class="form-control" id="edit_case_number" name="case_number">
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                    <button type="submit" class="btn btn-primary" form="editGrievanceForm">Save Changes</button>
+                </div>
+            </div>
+        </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'; ?>

statistics.php

@@ -0,0 +1,232 @@
+<?php
+require_once 'header.php';
+
+try {
+    $pdo = db();
+    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
+
+    // Fetch data for Discipline
+    $discipline_stmt = $pdo->query("SELECT discipline, COUNT(*) as count FROM grievances GROUP BY discipline");
+    $discipline_data = $discipline_stmt->fetchAll(PDO::FETCH_ASSOC);
+
+    // Fetch data for Subject
+    $subject_stmt = $pdo->query("SELECT subject, COUNT(*) as count FROM grievances GROUP BY subject");
+    $subject_data = $subject_stmt->fetchAll(PDO::FETCH_ASSOC);
+
+    // Fetch data for Grievances per Quarter
+    $quarter_stmt = $pdo->query("SELECT QUARTER(last_updated) as quarter, COUNT(*) as count FROM grievances GROUP BY QUARTER(last_updated)");
+    $quarter_data = $quarter_stmt->fetchAll(PDO::FETCH_ASSOC);
+
+} catch (PDOException $e) {
+    echo '<div class="alert alert-danger">Database error: ' . $e->getMessage() . '</div>';
+    exit;
+}
+
+$discipline_labels = [];
+$discipline_values = [];
+foreach ($discipline_data as $data) {
+    $discipline_labels[] = $data['discipline'];
+    $discipline_values[] = $data['count'];
+}
+
+$subject_labels = [];
+$subject_values = [];
+foreach ($subject_data as $data) {
+    $subject_labels[] = $data['subject'];
+    $subject_values[] = $data['count'];
+}
+
+$quarter_labels = [];
+$quarter_values = [];
+foreach ($quarter_data as $data) {
+    $quarter_labels[] = 'Q' . $data['quarter'];
+    $quarter_values[] = $data['count'];
+}
+?>
+
+<div class="container mt-5">
+    <h2 class="text-center mb-4">Grievance Statistics</h2>
+    <div class="row">
+        <div class="col-md-4">
+            <h4 class="text-center">Discipline</h4>
+            <canvas id="disciplineChart"></canvas>
+        </div>
+        <div class="col-md-4">
+            <h4 class="text-center">Subject</h4>
+            <canvas id="subjectChart"></canvas>
+        </div>
+        <div class="col-md-4">
+            <h4 class="text-center">Grievances per Quarter</h4>
+            <canvas id="quarterChart"></canvas>
+        </div>
+    </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function () {
+    // Discipline Chart
+    var disciplineCtx = document.getElementById('disciplineChart').getContext('2d');
+    var disciplineChart = new Chart(disciplineCtx, {
+        type: 'pie',
+        data: {
+            labels: <?php echo json_encode($discipline_labels); ?>,
+            datasets: [{
+                label: 'Discipline',
+                data: <?php echo json_encode($discipline_values); ?>,
+                backgroundColor: [
+                    'rgba(255, 99, 132, 0.7)',
+                    'rgba(54, 162, 235, 0.7)',
+                    'rgba(255, 206, 86, 0.7)',
+                    'rgba(75, 192, 192, 0.7)',
+                    'rgba(153, 102, 255, 0.7)',
+                    'rgba(255, 159, 64, 0.7)'
+                ],
+                borderColor: [
+                    'rgba(255, 99, 132, 1)',
+                    'rgba(54, 162, 235, 1)',
+                    'rgba(255, 206, 86, 1)',
+                    'rgba(75, 192, 192, 1)',
+                    'rgba(153, 102, 255, 1)',
+                    'rgba(255, 159, 64, 1)'
+                ],
+                borderWidth: 1
+            }]
+        },
+        options: {
+            responsive: true,
+            plugins: {
+                legend: {
+                    position: 'top',
+                },
+                tooltip: {
+                    callbacks: {
+                        label: function(context) {
+                            let label = context.label || '';
+                            if (label) {
+                                label += ': ';
+                            }
+                            if (context.parsed !== null) {
+                                label += context.parsed;
+                                const total = context.chart.data.datasets[0].data.reduce((a, b) => a + b, 0);
+                                const percentage = (context.parsed / total * 100).toFixed(2) + '%';
+                                label += ' (' + percentage + ')';
+                            }
+                            return label;
+                        }
+                    }
+                }
+            }
+        }
+    });
+
+    // Subject Chart
+    var subjectCtx = document.getElementById('subjectChart').getContext('2d');
+    var subjectChart = new Chart(subjectCtx, {
+        type: 'pie',
+        data: {
+            labels: <?php echo json_encode($subject_labels); ?>,
+            datasets: [{
+                label: 'Subject',
+                data: <?php echo json_encode($subject_values); ?>,
+                backgroundColor: [
+                    'rgba(255, 99, 132, 0.7)',
+                    'rgba(54, 162, 235, 0.7)',
+                    'rgba(255, 206, 86, 0.7)',
+                    'rgba(75, 192, 192, 0.7)',
+                    'rgba(153, 102, 255, 0.7)',
+                    'rgba(255, 159, 64, 0.7)'
+                ],
+                borderColor: [
+                    'rgba(255, 99, 132, 1)',
+                    'rgba(54, 162, 235, 1)',
+                    'rgba(255, 206, 86, 1)',
+                    'rgba(75, 192, 192, 1)',
+                    'rgba(153, 102, 255, 1)',
+                    'rgba(255, 159, 64, 1)'
+                ],
+                borderWidth: 1
+            }]
+        },
+        options: {
+            responsive: true,
+            plugins: {
+                legend: {
+                    position: 'top',
+                },
+                tooltip: {
+                    callbacks: {
+                        label: function(context) {
+                            let label = context.label || '';
+                            if (label) {
+                                label += ': ';
+                            }
+                            if (context.parsed !== null) {
+                                label += context.parsed;
+                                const total = context.chart.data.datasets[0].data.reduce((a, b) => a + b, 0);
+                                const percentage = (context.parsed / total * 100).toFixed(2) + '%';
+                                label += ' (' + percentage + ')';
+                            }
+                            return label;
+                        }
+                    }
+                }
+            }
+        }
+    });
+
+    // Quarter Chart
+    var quarterCtx = document.getElementById('quarterChart').getContext('2d');
+    var quarterChart = new Chart(quarterCtx, {
+        type: 'pie',
+        data: {
+            labels: <?php echo json_encode($quarter_labels); ?>,
+            datasets: [{
+                label: 'Grievances per Quarter',
+                data: <?php echo json_encode($quarter_values); ?>,
+                backgroundColor: [
+                    'rgba(255, 99, 132, 0.7)',
+                    'rgba(54, 162, 235, 0.7)',
+                    'rgba(255, 206, 86, 0.7)',
+                    'rgba(75, 192, 192, 0.7)'
+                ],
+                borderColor: [
+                    'rgba(255, 99, 132, 1)',
+                    'rgba(54, 162, 235, 1)',
+                    'rgba(255, 206, 86, 1)',
+                    'rgba(75, 192, 192, 1)'
+                ],
+                borderWidth: 1
+            }]
+        },
+        options: {
+            responsive: true,
+            plugins: {
+                legend: {
+                    position: 'top',
+                },
+                tooltip: {
+                    callbacks: {
+                        label: function(context) {
+                            let label = context.label || '';
+                            if (label) {
+                                label += ': ';
+                            }
+                            if (context.parsed !== null) {
+                                label += context.parsed;
+                                const total = context.chart.data.datasets[0].data.reduce((a, b) => a + b, 0);
+                                const percentage = (context.parsed / total * 100).toFixed(2) + '%';
+                                label += ' (' + percentage + ')';
+                            }
+                            return label;
+                        }
+                    }
+                }
+            }
+        }
+    });
+});
+</script>
+
+<?php
+require_once 'footer.php';
+?>