0.2

assets/css/custom.css

@@ -0,0 +1,16 @@
+
+body {
+    background-color: #F3F4F6;
+    font-family: 'Inter', sans-serif;
+}
+
+.hero {
+    background: linear-gradient(to right, #3B82F6, #60A5FA);
+    color: white;
+}
+
+.card {
+    background-color: #FFFFFF;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+}

assets/js/main.js

@@ -0,0 +1,67 @@
+
+document.addEventListener('DOMContentLoaded', function () {
+    const addVisitorBtn = document.getElementById('add-visitor');
+    const visitorsContainer = document.getElementById('visitors-container');
+
+    function updateVisitorIndices() {
+        const visitorGroups = visitorsContainer.querySelectorAll('.visitor-group');
+        visitorGroups.forEach((group, index) => {
+            const visitorIndex = index + 1;
+            group.querySelector('h3').textContent = `Visitor ${visitorIndex}`;
+            group.querySelectorAll('[id^="visitor_"]').forEach(input => {
+                const oldId = input.id;
+                const newId = oldId.replace(/_\d+$/, `_${visitorIndex}`);
+                input.id = newId;
+                const label = document.querySelector(`[for="${oldId}"]`);
+                if (label) {
+                    label.htmlFor = newId;
+                }
+            });
+            group.querySelectorAll('[name^="visitors["]').forEach(input => {
+                input.name = input.name.replace(/\[\d+\]/, `[${visitorIndex}]`);
+            });
+        });
+    }
+
+    addVisitorBtn.addEventListener('click', function () {
+        const visitorCount = visitorsContainer.querySelectorAll('.visitor-group').length + 1;
+        const visitorTemplate = `
+            <div class="visitor-group border-t mt-4 pt-4">
+                <div class="flex justify-between items-center">
+                    <h3 class="text-lg font-semibold">Visitor ${visitorCount}</h3>
+                    <button type="button" class="text-red-500 hover:text-red-700 delete-visitor">Delete</button>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-2">
+                    <div>
+                        <label for="visitor_full_name_${visitorCount}" class="block text-sm font-medium text-gray-700">Full Name</label>
+                        <input type="text" id="visitor_full_name_${visitorCount}" name="visitors[${visitorCount}][full_name]" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
+                    </div>
+                    <div>
+                        <label for="visitor_id_or_passport_${visitorCount}" class="block text-sm font-medium text-gray-700">National ID or Passport Number</label>
+                        <input type="text" id="visitor_id_or_passport_${visitorCount}" name="visitors[${visitorCount}][id_or_passport]" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
+                    </div>
+                    <div>
+                        <label for="visitor_id_image_${visitorCount}" class="block text-sm font-medium text-gray-700">Scanned ID/Passport Image</label>
+                        <input type="file" id="visitor_id_image_${visitorCount}" name="visitors[${visitorCount}][id_image]" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 focus:outline-none" required>
+                    </div>
+                    <div>
+                        <label for="visitor_mobile_phone_${visitorCount}" class="block text-sm font-medium text-gray-700">Mobile Phone Number</label>
+                        <input type="text" id="visitor_mobile_phone_${visitorCount}" name="visitors[${visitorCount}][mobile_phone]" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
+                    </div>
+                    <div class="md:col-span-2">
+                        <label for="visitor_mailing_address_${visitorCount}" class="block text-sm font-medium text-gray-700">Mailing Address</label>
+                        <textarea id="visitor_mailing_address_${visitorCount}" name="visitors[${visitorCount}][mailing_address]" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required></textarea>
+                    </div>
+                </div>
+            </div>
+        `;
+        visitorsContainer.insertAdjacentHTML('beforeend', visitorTemplate);
+    });
+
+    visitorsContainer.addEventListener('click', function(e) {
+        if (e.target.classList.contains('delete-visitor')) {
+            e.target.closest('.visitor-group').remove();
+            updateVisitorIndices();
+        }
+    });
+});

auth.php

@@ -0,0 +1,17 @@
+<?php
+session_start();
+
+function require_login($required_role = null) {
+    if (!isset($_SESSION['user_id'])) {
+        // User is not logged in
+        header('Location: login.php');
+        exit();
+    }
+
+    if ($required_role && (!isset($_SESSION['role']) || $_SESSION['role'] !== $required_role)) {
+        // User does not have the required role
+        // You can redirect to an unauthorized page or the login page
+        header('Location: login.php?error=You are not authorized to view this page.');
+        exit();
+    }
+}

dashboard.php

@@ -0,0 +1,138 @@
+<?php
+require_once 'auth.php';
+require_login('secretariat');
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Secretariat Dashboard</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/custom.css">
+</head>
+<body class="bg-gray-100">
+
+    <nav class="bg-white shadow-md">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
+                <div class="flex">
+                    <div class="flex-shrink-0 flex items-center">
+                        <a href="index.php" class="text-2xl font-bold text-blue-600">SecurePort</a>
+                    </div>
+                    <div class="hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8">
+                        <a href="dashboard.php" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium" aria-current="page">Dashboard</a>
+                    </div>
+                </div>
+                <div class="flex items-center">
+                    <?php if (isset($_SESSION['user_id'])):
+                        require_once 'auth.php';
+
+                        ?>
+                        <span class="mr-4">Welcome, <?php echo htmlspecialchars($_SESSION['username']); ?>!</span>
+                        <a href="logout.php" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Logout</a>
+                    <?php else: ?>
+                        <a href="login.php" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Login</a>
+                    <?php endif; ?>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <main class="container mx-auto px-6 py-8">
+        <h1 class="text-3xl font-bold text-gray-800 mb-6">Secretariat Dashboard</h1>
+
+        <!-- Filter and Search Form -->
+        <div class="mb-6">
+            <form action="dashboard.php" method="GET" class="bg-white shadow-md rounded-lg p-4 flex items-center space-x-4">
+                <div class="flex-grow">
+                    <label for="search" class="sr-only">Search</label>
+                    <input type="text" name="search" id="search" placeholder="Search by name or email..."
+                           class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                           value="<?php echo isset($_GET['search']) ? htmlspecialchars($_GET['search']) : ''; ?>">
+                </div>
+                <div>
+                    <label for="status" class="sr-only">Status</label>
+                    <select name="status" id="status"
+                            class="rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
+                        <option value="">All Statuses</option>
+                        <option value="Pending" <?php echo (isset($_GET['status']) && $_GET['status'] === 'Pending') ? 'selected' : ''; ?>>Pending</option>
+                        <option value="Approved" <?php echo (isset($_GET['status']) && $_GET['status'] === 'Approved') ? 'selected' : ''; ?>>Approved</option>
+                        <option value="Rejected" <?php echo (isset($_GET['status']) && $_GET['status'] === 'Rejected') ? 'selected' : ''; ?>>Rejected</option>
+                    </select>
+                </div>
+                <div>
+                    <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">Filter</button>
+                </div>
+            </form>
+        </div>
+
+        <div class="bg-white shadow-md rounded-lg overflow-hidden">
+            <table class="min-w-full bg-white">
+                <thead class="bg-gray-800 text-white">
+                    <tr>
+                        <th class="w-1/6 text-left py-3 px-4 uppercase font-semibold text-sm">Submission ID</th>
+                        <th class="w-1/6 text-left py-3 px-4 uppercase font-semibold text-sm">Applicant Name</th>
+                        <th class="w-1/4 text-left py-3 px-4 uppercase font-semibold text-sm">Email</th>
+                        <th class="w-1/6 text-left py-3 px-4 uppercase font-semibold text-sm">Submission Date</th>
+                        <th class="w-1/6 text-left py-3 px-4 uppercase font-semibold text-sm">Status</th>
+                        <th class="text-left py-3 px-4 uppercase font-semibold text-sm">Actions</th>
+                    </tr>
+                </thead>
+                <tbody class="text-gray-700">
+                    <?php
+                    require_once 'db/config.php';
+                    $pdo = db();
+
+                    // Base query
+                    $sql = "SELECT id, full_name, email, created_at, status FROM submissions";
+                    $params = [];
+                    $where_clauses = [];
+
+                    // Search filter
+                    if (!empty($_GET['search'])) {
+                        $search_term = '%' . $_GET['search'] . '%';
+                        $where_clauses[] = "(full_name LIKE ? OR email LIKE ?)";
+                        $params[] = $search_term;
+                        $params[] = $search_term;
+                    }
+
+                    // Status filter
+                    if (!empty($_GET['status'])) {
+                        $where_clauses[] = "status = ?";
+                        $params[] = $_GET['status'];
+                    }
+
+                    if (!empty($where_clauses)) {
+                        $sql .= " WHERE " . implode(' AND ', $where_clauses);
+                    }
+
+                    $sql .= " ORDER BY created_at DESC";
+
+                    $stmt = $pdo->prepare($sql);
+                    $stmt->execute($params);
+
+                    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
+                        echo "<tr>";
+                        echo "<td class='text-left py-3 px-4'>" . htmlspecialchars($row['id']) . "</td>";
+                        echo "<td class='text-left py-3 px-4'>" . htmlspecialchars($row['full_name']) . "</td>";
+                        echo "<td class='text-left py-3 px-4'>" . htmlspecialchars($row['email']) . "</td>";
+                        echo "<td class='text-left py-3 px-4'>" . htmlspecialchars($row['created_at']) . "</td>";
+                        $status_class = 'bg-yellow-200 text-yellow-800';
+                        if ($row['status'] === 'Approved') {
+                            $status_class = 'bg-green-200 text-green-800';
+                        } elseif ($row['status'] === 'Rejected') {
+                            $status_class = 'bg-red-200 text-red-800';
+                        }
+                        echo "<td class='text-left py-3 px-4'><span class='" . $status_class . " py-1 px-3 rounded-full text-xs'>" . htmlspecialchars($row['status']) . "</span></td>";
+                        echo "<td class='text-left py-3 px-4'><a href='view_submission.php?id=" . $row['id'] . "' class='text-blue-500 hover:text-blue-700'>View Details</a></td>";
+                        echo "</tr>";
+                    }
+                    ?>
+                </tbody>
+            </table>
+        </div>
+    </main>
+
+</body>
+</html>

db/config.php

@@ -15,3 +15,12 @@ function db() {
   }
   return $pdo;
 }
+
+function run_migrations() {
+    $pdo = db();
+    $migrations = glob(__DIR__ . '/migrations/*.sql');
+    foreach ($migrations as $migration) {
+        $sql = file_get_contents($migration);
+        $pdo->exec($sql);
+    }
+}

db/migrations/001_create_tables.sql

@@ -0,0 +1,29 @@
+CREATE TABLE IF NOT EXISTS submissions (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    full_name VARCHAR(255) NOT NULL,
+    id_or_passport VARCHAR(255) NOT NULL,
+    id_image_path VARCHAR(255) NOT NULL,
+    gender VARCHAR(50) NOT NULL,
+    birth_date DATE NOT NULL,
+    mobile_phone VARCHAR(50) NOT NULL,
+    mailing_address TEXT NOT NULL,
+    start_visit_date DATE NOT NULL,
+    end_visit_date DATE NOT NULL,
+    purpose_of_visit TEXT NOT NULL,
+    visit_category VARCHAR(255) NOT NULL,
+    visit_location_lat VARCHAR(255) NOT NULL,
+    visit_location_lon VARCHAR(255) NOT NULL,
+    official_letter_path VARCHAR(255),
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE TABLE IF NOT EXISTS visitors (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    submission_id INT NOT NULL,
+    full_name VARCHAR(255) NOT NULL,
+    id_or_passport VARCHAR(255) NOT NULL,
+    id_image_path VARCHAR(255) NOT NULL,
+    mobile_phone VARCHAR(50) NOT NULL,
+    mailing_address TEXT NOT NULL,
+    FOREIGN KEY (submission_id) REFERENCES submissions(id) ON DELETE CASCADE
+);

db/migrations/002_create_users_table.sql

@@ -0,0 +1,14 @@
+CREATE TABLE IF NOT EXISTS `users` (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `username` varchar(255) NOT NULL,
+  `password` varchar(255) NOT NULL,
+  `role` varchar(50) NOT NULL,
+  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  PRIMARY KEY (`id`),
+  UNIQUE KEY `username` (`username`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+-- Insert a default admin user with a hashed password
+-- The password is '''password'''
+INSERT INTO `users` (`username`, `password`, `role`) VALUES
+('''secretariat''', '''$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi''', '''secretariat''');

db/migrations/003_add_department_users.sql

@@ -0,0 +1,7 @@
+-- Add new roles for the vetting departments
+-- For now, we are adding only identity_verification. We can add more roles later.
+
+-- Insert a default user for the Identity Verification department
+-- The password is '''password'''
+INSERT INTO `users` (`username`, `password`, `role`) VALUES
+('''identity_verifier''', '''$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi''', '''identity_verification''');

db/migrations/004_add_vetting_status_to_submissions.sql

@@ -0,0 +1,6 @@
+ALTER TABLE `submissions`
+ADD COLUMN `identity_status` VARCHAR(20) NOT NULL DEFAULT 'Pending' AFTER `status`,
+ADD COLUMN `passport_status` VARCHAR(20) NOT NULL DEFAULT 'Pending' AFTER `identity_status`,
+ADD COLUMN `criminal_record_status` VARCHAR(20) NOT NULL DEFAULT 'Pending' AFTER `passport_status`,
+ADD COLUMN `maritime_status` VARCHAR(20) NOT NULL DEFAULT 'Pending' AFTER `criminal_record_status`,
+ADD COLUMN `maritime_criminal_status` VARCHAR(20) NOT NULL DEFAULT 'Pending' AFTER `maritime_status`;

identity_dashboard.php

@@ -0,0 +1,87 @@
+<?php
+require_once 'auth.php';
+require_login('identity_verification');
+
+require_once 'db/config.php';
+$pdo = db();
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Identity Verification Dashboard</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/custom.css">
+</head>
+<body class="bg-gray-100">
+
+    <nav class="bg-white shadow-md">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
+                <div class="flex">
+                    <div class="flex-shrink-0 flex items-center">
+                        <a href="#" class="text-2xl font-bold text-blue-600">SecurePort (Identity Vetting)</a>
+                    </div>
+                </div>
+                <div class="flex items-center">
+                    <span class="mr-4">Welcome, <?php echo htmlspecialchars($_SESSION['username']); ?>!</span>
+                    <a href="logout.php" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Logout</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <main class="container mx-auto px-6 py-8">
+        <h1 class="text-3xl font-bold text-gray-800 mb-6">Identity Verification Dashboard</h1>
+
+        <div class="bg-white shadow-md rounded-lg overflow-hidden">
+            <table class="min-w-full bg-white">
+                <thead class="bg-gray-800 text-white">
+                    <tr>
+                        <th class="w-1/6 text-left py-3 px-4 uppercase font-semibold text-sm">Submission ID</th>
+                        <th class="w-1/4 text-left py-3 px-4 uppercase font-semibold text-sm">Applicant Name</th>
+                        <th class="w-1/4 text-left py-3 px-4 uppercase font-semibold text-sm">ID/Passport #</th>
+                        <th class="w-1/6 text-left py-3 px-4 uppercase font-semibold text-sm">ID Scan</th>
+                        <th class="w-1/6 text-left py-3 px-4 uppercase font-semibold text-sm">Status</th>
+                        <th class="text-left py-3 px-4 uppercase font-semibold text-sm">Actions</th>
+                    </tr>
+                </thead>
+                <tbody class="text-gray-700">
+                    <?php
+                    $stmt = $pdo->query("SELECT id, full_name, id_or_passport, id_scan, identity_status FROM submissions ORDER BY created_at DESC");
+                    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
+                        echo "<tr>";
+                        echo "<td class='text-left py-3 px-4'>" . htmlspecialchars($row['id']) . "</td>";
+                        echo "<td class='text-left py-3 px-4'>" . htmlspecialchars($row['full_name']) . "</td>";
+                        echo "<td class='text-left py-3 px-4'>" . htmlspecialchars($row['id_or_passport']) . "</td>";
+                        echo "<td class='text-left py-3 px-4'><a href='uploads/" . htmlspecialchars($row['id_scan']) . "' target='_blank' class='text-blue-500 hover:text-blue-700'>View Scan</a></td>";
+                        
+                        $status_class = 'bg-yellow-200 text-yellow-800';
+                        if ($row['identity_status'] === 'Approved') {
+                            $status_class = 'bg-green-200 text-green-800';
+                        } elseif ($row['identity_status'] === 'Rejected') {
+                            $status_class = 'bg-red-200 text-red-800';
+                        }
+                        echo "<td class='text-left py-3 px-4'><span class='" . $status_class . " py-1 px-3 rounded-full text-xs'>" . htmlspecialchars($row['identity_status']) . "</span></td>";
+                        
+                        echo "<td class='text-left py-3 px-4'>";
+                        if ($row['identity_status'] === 'Pending') {
+                            echo "<form action='update_vetting_status.php' method='POST' class='flex space-x-2'>";
+                            echo "<input type='hidden' name='submission_id' value='" . $row['id'] . "'>";
+                            echo "<input type='hidden' name='department' value='identity'>";
+                            echo "<button type='submit' name='status' value='Approved' class='px-2 py-1 bg-green-500 text-white rounded-md text-xs hover:bg-green-600'>Approve</button>";
+                            echo "<button type='submit' name='status' value='Rejected' class='px-2 py-1 bg-red-500 text-white rounded-md text-xs hover:bg-red-600'>Reject</button>";
+                            echo "</form>";
+                        }
+                        echo "</td>";
+                        echo "</tr>";
+                    }
+                    ?>
+                </tbody>
+            </table>
+        </div>
+    </main>
+
+</body>
+</html>

index.php

@@ -1,131 +1,194 @@
 <?php
-declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
-
-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
+session_start();
 ?>
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>New Style</title>
-  <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>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Security Clearance Application</title>
+    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/custom.css">
+    <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">
 </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>
-      </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>
+
+    <nav class="bg-white shadow-md">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
+                <div class="flex">
+                    <div class="flex-shrink-0 flex items-center">
+                        <a href="index.php" class="text-2xl font-bold text-blue-600">SecurePort</a>
+                    </div>
+                    <div class="hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8">
+                        <?php if (isset($_SESSION['role']) && $_SESSION['role'] === 'secretariat'): ?>
+                            <a href="dashboard.php" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dashboard</a>
+                        <?php elseif (isset($_SESSION['role']) && $_SESSION['role'] === 'identity_verification'): ?>
+                            <a href="identity_dashboard.php" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Vetting Dashboard</a>
+                        <?php endif; ?>
+                    </div>
+                </div>
+                <div class="flex items-center">
+                    <?php if (isset($_SESSION['user_id'])):
+                        ?>
+                        <span class="mr-4">Welcome, <?php echo htmlspecialchars($_SESSION['username']); ?>!</span>
+                        <a href="logout.php" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Logout</a>
+                    <?php else: ?>
+                        <a href="login.php" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Login</a>
+                    <?php endif; ?>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <div class="hero py-16 bg-gray-200">
+        <div class="container mx-auto text-center">
+            <h1 class="text-4xl font-bold">Security Clearance Application</h1>
+            <p class="mt-4 text-lg">Republic of Indonesia</p>
+        </div>
     </div>
-  </main>
-  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
-  </footer>
+
+    <div class="container mx-auto py-12">
+        <div class="card p-8 max-w-4xl mx-auto">
+
+            <?php if (isset($_GET['success']) && $_GET['success'] === 'true'): ?>
+                <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">
+                    <strong class="font-bold">Success!</strong>
+                    <span class="block sm:inline">Your application has been submitted.</span>
+                </div>
+            <?php elseif (isset($_GET['success']) && $_GET['success'] === 'false'): ?>
+                <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
+                    <strong class="font-bold">Error!</strong>
+                    <span class="block sm:inline">There was a problem with your submission. Please try again.</span>
+                </div>
+            <?php endif; ?>
+
+            <form action="submit.php" method="POST" enctype="multipart/form-data" class="mt-8 space-y-6">
+
+                <!-- Applicant Information -->
+                <div>
+                    <h2 class="text-2xl font-bold">Applicant Information</h2>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
+                        <div>
+                            <label for="full_name" class="block text-sm font-medium text-gray-700">Full Name</label>
+                            <input type="text" id="full_name" name="full_name" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
+                        </div>
+                        <div>
+                            <label for="id_or_passport" class="block text-sm font-medium text-gray-700">National ID or Passport Number</label>
+                            <input type="text" id="id_or_passport" name="id_or_passport" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
+                        </div>
+                        <div>
+                            <label for="id_image" class="block text-sm font-medium text-gray-700">Scanned ID/Passport Image</label>
+                            <input type="file" id="id_image" name="id_image" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 focus:outline-none" required>
+                        </div>
+                        <div>
+                            <label for="gender" class="block text-sm font-medium text-gray-700">Gender</label>
+                            <select id="gender" name="gender" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
+                                <option>Male</option>
+                                <option>Female</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label for="birth_date" class="block text-sm font-medium text-gray-700">Birth Date</label>
+                            <input type="date" id="birth_date" name="birth_date" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
+                        </div>
+                        <div>
+                            <label for="mobile_phone" class="block text-sm font-medium text-gray-700">Mobile Phone Number</label>
+                            <input type="text" id="mobile_phone" name="mobile_phone" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
+                        </div>
+                        <div class="md:col-span-2">
+                            <label for="mailing_address" class="block text-sm font-medium text-gray-700">Mailing Address</label>
+                            <textarea id="mailing_address" name="mailing_address" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required></textarea>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Visit Details -->
+                <div class="pt-6">
+                    <h2 class="text-2xl font-bold">Visit Details</h2>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
+                        <div>
+                            <label for="start_visit_date" class="block text-sm font-medium text-gray-700">Start Visit Date</label>
+                            <input type="date" id="start_visit_date" name="start_visit_date" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
+                        </div>
+                        <div>
+                            <label for="end_visit_date" class="block text-sm font-medium text-gray-700">End Visit Date</label>
+                            <input type="date" id="end_visit_date" name="end_visit_date" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
+                        </div>
+                        <div class="md:col-span-2">
+                            <label for="purpose_of_visit" class="block text-sm font-medium text-gray-700">Purpose of Visit</label>
+                            <textarea id="purpose_of_visit" name="purpose_of_visit" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required></textarea>
+                        </div>
+                        <div>
+                            <label for="visit_category" class="block text-sm font-medium text-gray-700">Visit Category</label>
+                            <select id="visit_category" name="visit_category" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
+                                <option>Official Visit</option>
+                                <option>Recreational Visit</option>
+                                <option>Maintenance</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label for="official_letter" class="block text-sm font-medium text-gray-700">Official Letter/Memo (if applicable)</label>
+                            <input type="file" id="official_letter" name="official_letter" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 focus:outline-none">
+                        </div>
+                        <div>
+                            <label for="visit_location_lat" class="block text-sm font-medium text-gray-700">Visit Location (Latitude)</label>
+                            <input type="text" id="visit_location_lat" name="visit_location_lat" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
+                        </div>
+                        <div>
+                            <label for="visit_location_lon" class="block text-sm font-medium text-gray-700">Visit Location (Longitude)</label>
+                            <input type="text" id="visit_location_lon" name="visit_location_lon" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Visitor Details -->
+                <div class="pt-6">
+                    <h2 class="text-2xl font-bold">Visitor Details</h2>
+                    <div id="visitors-container">
+                        <div class="visitor-group">
+                            <div class="flex justify-between items-center">
+                                <h3 class="text-lg font-semibold">Visitor 1</h3>
+                                <button type="button" class="text-red-500 hover:text-red-700 delete-visitor">Delete</button>
+                            </div>
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-2">
+                                <div>
+                                    <label for="visitor_full_name_1" class="block text-sm font-medium text-gray-700">Full Name</label>
+                                    <input type="text" id="visitor_full_name_1" name="visitors[1][full_name]" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
+                                </div>
+                                <div>
+                                    <label for="visitor_id_or_passport_1" class="block text-sm font-medium text-gray-700">National ID or Passport Number</label>
+                                    <input type="text" id="visitor_id_or_passport_1" name="visitors[1][id_or_passport]" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
+                                </div>
+                                <div>
+                                    <label for="visitor_id_image_1" class="block text-sm font-medium text-gray-700">Scanned ID/Passport Image</label>
+                                    <input type="file" id="visitor_id_image_1" name="visitors[1][id_image]" class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 focus:outline-none" required>
+                                </div>
+                                <div>
+                                    <label for="visitor_mobile_phone_1" class="block text-sm font-medium text-gray-700">Mobile Phone Number</label>
+                                    <input type="text" id="visitor_mobile_phone_1" name="visitors[1][mobile_phone]" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
+                                </div>
+                                <div class="md:col-span-2">
+                                    <label for="visitor_mailing_address_1" class="block text-sm font-medium text-gray-700">Mailing Address</label>
+                                    <textarea id="visitor_mailing_address_1" name="visitors[1][mailing_address]" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required></textarea>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <button type="button" id="add-visitor" class="mt-4 px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300">Add Another Visitor</button>
+                </div>
+
+                <div class="pt-6">
+                    <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                        Submit Application
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <script src="assets/js/main.js"></script>
 </body>
 </html>

login.php

@@ -0,0 +1,63 @@
+<?php
+session_start();
+if (isset($_SESSION['user_id'])) {
+    header('Location: dashboard.php');
+    exit();
+}
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login - Security Clearance Application</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/custom.css">
+</head>
+<body class="bg-gray-100">
+
+    <nav class="bg-white shadow-md">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
+                <div class="flex">
+                    <div class="flex-shrink-0 flex items-center">
+                        <a href="index.php" class="text-2xl font-bold text-blue-600">SecurePort</a>
+                    </div>
+                </div>
+                <div class="flex items-center">
+                    <a href="login.php" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Login</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <div class="container mx-auto px-4 py-8">
+        <div class="max-w-md mx-auto bg-white rounded-lg shadow-md overflow-hidden">
+            <div class="px-6 py-8">
+                <h2 class="text-2xl font-bold text-center text-gray-800 mb-6">Secretariat Login</h2>
+                <?php if (isset($_GET['error'])): ?>
+                    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert">
+                        <span class="block sm:inline"><?php echo htmlspecialchars($_GET['error']); ?></span>
+                    </div>
+                <?php endif; ?>
+                <form action="login_process.php" method="POST">
+                    <div class="mb-4">
+                        <label for="username" class="block text-gray-700 text-sm font-bold mb-2">Username</label>
+                        <input type="text" name="username" id="username" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
+                    </div>
+                    <div class="mb-6">
+                        <label for="password" class="block text-gray-700 text-sm font-bold mb-2">Password</label>
+                        <input type="password" name="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" required>
+                    </div>
+                    <div class="flex items-center justify-between">
+                        <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
+                            Sign In
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+</body>
+</html>

login_process.php

@@ -0,0 +1,41 @@
+<?php
+session_start();
+require_once 'db/config.php';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $username = $_POST['username'];
+    $password = $_POST['password'];
+
+    if (empty($username) || empty($password)) {
+        header('Location: login.php?error=Username and password are required');
+        exit();
+    }
+
+    try {
+        $pdo = db();
+        $stmt = $pdo->prepare("SELECT * FROM users WHERE username = ?");
+        $stmt->execute([$username]);
+        $user = $stmt->fetch();
+
+        if ($user && password_verify($password, $user['password'])) {
+            // Password is correct, start session
+            $_SESSION['user_id'] = $user['id'];
+            $_SESSION['username'] = $user['username'];
+            $_SESSION['role'] = $user['role'];
+
+            header('Location: dashboard.php');
+            exit();
+        } else {
+            // Invalid credentials
+            header('Location: login.php?error=Invalid username or password');
+            exit();
+        }
+    } catch (PDOException $e) {
+        // die("Database error: " . $e->getMessage());
+        header('Location: login.php?error=A database error occurred.');
+        exit();
+    }
+} else {
+    header('Location: login.php');
+    exit();
+}

logout.php

@@ -0,0 +1,6 @@
+<?php
+session_start();
+session_unset();
+session_destroy();
+header('Location: login.php');
+exit();

submit.php

@@ -0,0 +1,69 @@
+<?php
+require_once __DIR__ . '/db/config.php';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    try {
+        run_migrations();
+        $pdo = db();
+
+        // Handle file uploads
+        $id_image_path = 'uploads/' . basename($_FILES['id_image']['name']);
+        move_uploaded_file($_FILES['id_image']['tmp_name'], $id_image_path);
+
+        $official_letter_path = null;
+        if (isset($_FILES['official_letter']) && $_FILES['official_letter']['error'] === UPLOAD_ERR_OK) {
+            $official_letter_path = 'uploads/' . basename($_FILES['official_letter']['name']);
+            move_uploaded_file($_FILES['official_letter']['tmp_name'], $official_letter_path);
+        }
+
+        // Insert into submissions table
+        $stmt = $pdo->prepare("
+            INSERT INTO submissions (full_name, id_or_passport, id_image_path, gender, birth_date, mobile_phone, mailing_address, start_visit_date, end_visit_date, purpose_of_visit, visit_category, visit_location_lat, visit_location_lon, official_letter_path)
+            VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+        ");
+        $stmt->execute([
+            $_POST['full_name'],
+            $_POST['id_or_passport'],
+            $id_image_path,
+            $_POST['gender'],
+            $_POST['birth_date'],
+            $_POST['mobile_phone'],
+            $_POST['mailing_address'],
+            $_POST['start_visit_date'],
+            $_POST['end_visit_date'],
+            $_POST['purpose_of_visit'],
+            $_POST['visit_category'],
+            $_POST['visit_location_lat'],
+            $_POST['visit_location_lon'],
+            $official_letter_path
+        ]);
+
+        $submission_id = $pdo->lastInsertId();
+
+        // Insert into visitors table
+        if (isset($_POST['visitors'])) {
+            foreach ($_POST['visitors'] as $visitor) {
+                $visitor_id_image_path = 'uploads/' . basename($visitor['id_image']['name']);
+                move_uploaded_file($visitor['id_image']['tmp_name'], $visitor_id_image_path);
+
+                $stmt = $pdo->prepare("
+                    INSERT INTO visitors (submission_id, full_name, id_or_passport, id_image_path, mobile_phone, mailing_address)
+                    VALUES (?, ?, ?, ?, ?, ?)
+                ");
+                $stmt->execute([
+                    $submission_id,
+                    $visitor['full_name'],
+                    $visitor['id_or_passport'],
+                    $visitor_id_image_path,
+                    $visitor['mobile_phone'],
+                    $visitor['mailing_address']
+                ]);
+            }
+        }
+
+        header('Location: /?success=true');
+    } catch (Exception $e) {
+        error_log($e->getMessage());
+        header('Location: /?success=false');
+    }
+}

update_status.php

@@ -0,0 +1,34 @@
+<?php
+require_once 'auth.php';
+require_login('secretariat');
+require_once 'db/config.php';
+require_once 'mail/MailService.php';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $submission_id = $_POST['submission_id'] ?? null;
+    $status = $_POST['status'] ?? null;
+
+    if ($submission_id && $status) {
+        $pdo = db();
+        $stmt = $pdo->prepare("UPDATE submissions SET status = ? WHERE id = ?");
+        $stmt->execute([$status, $submission_id]);
+
+        // Fetch applicant email
+        $stmt = $pdo->prepare("SELECT email, full_name FROM submissions WHERE id = ?");
+        $stmt->execute([$submission_id]);
+        $submission = $stmt->fetch(PDO::FETCH_ASSOC);
+
+        if ($submission) {
+            $to = $submission['email'];
+            $subject = "Your Security Clearance Application Status";
+            $body = "<p>Dear " . htmlspecialchars($submission['full_name']) . ",</p>";
+            $body .= "<p>Your application for security clearance has been <strong>" . htmlspecialchars($status) . "</strong>.</p>";
+            $body .= "<p>Thank you.</p>";
+
+            MailService::sendMail($to, $subject, $body, strip_tags($body));
+        }
+    }
+}
+
+header("Location: dashboard.php");
+exit;

update_vetting_status.php

@@ -0,0 +1,41 @@
+<?php
+require_once 'auth.php';
+require_login(); // User must be logged in
+
+require_once 'db/config.php';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $submission_id = $_POST['submission_id'] ?? null;
+    $department = $_POST['department'] ?? null;
+    $status = $_POST['status'] ?? null;
+
+    $allowed_departments = [
+        'identity',
+        'passport',
+        'criminal_record',
+        'maritime',
+        'maritime_criminal'
+    ];
+
+    if ($submission_id && $department && $status && in_array($department, $allowed_departments)) {
+        $status_column = $department . '_status';
+
+        $pdo = db();
+        $stmt = $pdo->prepare("UPDATE submissions SET {$status_column} = ? WHERE id = ?");
+        $stmt->execute([$status, $submission_id]);
+    }
+}
+
+// Redirect back to the appropriate dashboard
+$role = $_SESSION['role'] ?? '';
+$redirect_url = 'login.php'; // Default redirect
+
+if ($role === 'secretariat') {
+    $redirect_url = 'dashboard.php';
+} elseif ($role === 'identity_verification') {
+    $redirect_url = 'identity_dashboard.php';
+}
+// Add more else-if for other department roles here in the future
+
+header("Location: " . $redirect_url);
+exit;

view_submission.php

@@ -0,0 +1,140 @@
+<?php
+require_once 'auth.php';
+require_login('secretariat');
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>View Submission</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/custom.css">
+</head>
+<body class="bg-gray-100">
+
+    <nav class="bg-white shadow-md">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
+                <div class="flex">
+                    <div class="flex-shrink-0 flex items-center">
+                        <a href="index.php" class="text-2xl font-bold text-blue-600">SecurePort</a>
+                    </div>
+                    <div class="hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8">
+                        <a href="dashboard.php" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dashboard</a>
+                    </div>
+                </div>
+                <div class="flex items-center">
+                    <?php if (isset($_SESSION['user_id'])):
+                        require_once 'auth.php';
+                        ?>
+                        <span class="mr-4">Welcome, <?php echo htmlspecialchars($_SESSION['username']); ?>!</span>
+                        <a href="logout.php" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Logout</a>
+                    <?php else: ?>
+                        <a href="login.php" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Login</a>
+                    <?php endif; ?>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <main class="container mx-auto px-6 py-8">
+        <?php
+        require_once 'db/config.php';
+        $pdo = db();
+        $submission_id = $_GET['id'] ?? null;
+
+        if ($submission_id) {
+            $stmt = $pdo->prepare("SELECT * FROM submissions WHERE id = ?");
+            $stmt->execute([$submission_id]);
+            $submission = $stmt->fetch(PDO::FETCH_ASSOC);
+
+            if ($submission) {
+        ?>
+                <h1 class="text-3xl font-bold text-gray-800 mb-6">Submission Details</h1>
+
+                <div class="bg-white shadow-md rounded-lg p-6 mb-6">
+                    <h2 class="text-2xl font-bold text-gray-800 mb-4">Applicant Information</h2>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div><strong>Full Name:</strong> <?php echo htmlspecialchars($submission['full_name']); ?></div>
+                        <div><strong>Email:</strong> <?php echo htmlspecialchars($submission['email']); ?></div>
+                        <div><strong>National ID/Passport:</strong> <?php echo htmlspecialchars($submission['id_or_passport']); ?></div>
+                        <div><strong>Gender:</strong> <?php echo htmlspecialchars($submission['gender']); ?></div>
+                        <div><strong>Date of Birth:</strong> <?php echo htmlspecialchars($submission['dob']); ?></div>
+                        <div><strong>Mobile Phone:</strong> <?php echo htmlspecialchars($submission['mobile_phone']); ?></div>
+                        <div class="md:col-span-2"><strong>Address:</strong> <?php echo htmlspecialchars($submission['address']); ?></div>
+                    </div>
+                </div>
+
+                <div class="bg-white shadow-md rounded-lg p-6 mb-6">
+                    <h2 class="text-2xl font-bold text-gray-800 mb-4">Visit Details</h2>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div><strong>Start Date:</strong> <?php echo htmlspecialchars($submission['start_date']); ?></div>
+                        <div><strong>End Date:</strong> <?php echo htmlspecialchars($submission['end_date']); ?></div>
+                        <div class="md:col-span-2"><strong>Purpose of Visit:</strong> <?php echo htmlspecialchars($submission['purpose_of_visit']); ?></div>
+                        <div><strong>Visit Category:</strong> <?php echo htmlspecialchars($submission['visit_category']); ?></div>
+                        <div><strong>Location:</strong> <?php echo htmlspecialchars($submission['location']); ?></div>
+                    </div>
+                </div>
+
+                <div class="bg-white shadow-md rounded-lg p-6 mb-6">
+                    <h2 class="text-2xl font-bold text-gray-800 mb-4">Uploaded Documents</h2>
+                    <div>
+                        <strong>National ID/Passport Scan:</strong>
+                        <a href="uploads/<?php echo htmlspecialchars($submission['id_scan']); ?>" target="_blank" class="text-blue-500 hover:text-blue-700">View Document</a>
+                    </div>
+                    <?php if (!empty($submission['official_letter_scan'])) : ?>
+                    <div>
+                        <strong>Official Letter/Memo:</strong>
+                        <a href="uploads/<?php echo htmlspecialchars($submission['official_letter_scan']); ?>" target="_blank" class="text-blue-500 hover:text-blue-700">View Document</a>
+                    </div>
+                    <?php endif; ?>
+                </div>
+
+                <div class="bg-white shadow-md rounded-lg p-6">
+                    <h2 class="text-2xl font-bold text-gray-800 mb-4">Visitors</h2>
+                    <?php
+                    $visitor_stmt = $pdo->prepare("SELECT * FROM visitors WHERE submission_id = ?");
+                    $visitor_stmt->execute([$submission_id]);
+                    while ($visitor = $visitor_stmt->fetch(PDO::FETCH_ASSOC)) {
+                    ?>
+                        <div class="border-b pb-4 mb-4">
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <div><strong>Full Name:</strong> <?php echo htmlspecialchars($visitor['full_name']); ?></div>
+                                <div><strong>National ID/Passport:</strong> <?php echo htmlspecialchars($visitor['id_or_passport']); ?></div>
+                                <div><strong>Mobile Phone:</strong> <?php echo htmlspecialchars($visitor['mobile_phone']); ?></div>
+                                <div><strong>Address:</strong> <?php echo htmlspecialchars($visitor['address']); ?></div>
+                                <div>
+                                    <strong>ID Scan:</strong>
+                                    <a href="uploads/<?php echo htmlspecialchars($visitor['id_scan']); ?>" target="_blank" class="text-blue-500 hover:text-blue-700">View Document</a>
+                                </div>
+                            </div>
+                        </div>
+                    <?php
+                    }
+                    ?>
+                </div>
+
+                <div class="bg-white shadow-md rounded-lg p-6 mt-6">
+                    <h2 class="text-2xl font-bold text-gray-800 mb-4">Secretariat Action</h2>
+                    <form action="update_status.php" method="POST">
+                        <input type="hidden" name="submission_id" value="<?php echo $submission['id']; ?>">
+                        <div class="flex space-x-4">
+                            <button type="submit" name="status" value="Approved" class="px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600">Approve</button>
+                            <button type="submit" name="status" value="Rejected" class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600">Reject</button>
+                        </div>
+                    </form>
+                </div>
+
+        <?php
+            } else {
+                echo "<p class='text-red-500'>Submission not found.</p>";
+            }
+        } else {
+            echo "<p class='text-red-500'>No submission ID provided.</p>";
+        }
+        ?>
+    </main>
+
+</body>
+</html>