212 lines
10 KiB
PHP
212 lines
10 KiB
PHP
<?php
|
|
require_once 'auth_helper.php';
|
|
require_login();
|
|
$user = get_user();
|
|
|
|
$pdo = db();
|
|
$electionId = get_active_election_id();
|
|
$election = get_active_election();
|
|
|
|
// Fetch officers assigned to this election grouped by role
|
|
$query = "SELECT u.* FROM users u
|
|
JOIN election_assignments ea ON u.id = ea.user_id
|
|
WHERE ea.election_id = ? AND u.deleted_at IS NULL";
|
|
|
|
$stmt = $pdo->prepare($query . " AND u.role = 'Admin' ORDER BY u.name");
|
|
$stmt->execute([$electionId]);
|
|
$admins = $stmt->fetchAll();
|
|
|
|
$stmt = $pdo->prepare($query . " AND u.role = 'Adviser' ORDER BY u.name");
|
|
$stmt->execute([$electionId]);
|
|
$advisers = $stmt->fetchAll();
|
|
|
|
$stmt = $pdo->prepare($query . " AND u.role = 'Officer' ORDER BY u.name");
|
|
$stmt->execute([$electionId]);
|
|
$officers = $stmt->fetchAll();
|
|
|
|
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Online Election System for Senior High School';
|
|
?>
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Officer Management | <?= htmlspecialchars($projectDescription) ?></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;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/dashboard.css?v=<?= time() ?>">
|
|
<link rel="stylesheet" href="assets/css/officers_management.css?v=<?= time() ?>">
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
</head>
|
|
<body class="dashboard-body">
|
|
|
|
<?php require_once 'includes/sidebar.php'; ?>
|
|
|
|
<!-- Main Content -->
|
|
<div class="main-wrapper">
|
|
<header class="top-header">
|
|
<div class="search-bar">
|
|
<i data-lucide="search" style="width: 16px; color: #94a3b8;"></i>
|
|
<input type="text" placeholder="Search officers...">
|
|
</div>
|
|
|
|
<div class="user-profile">
|
|
<div class="user-info">
|
|
<div class="user-name"><?= htmlspecialchars($user['name'] ?? 'System Administrator') ?></div>
|
|
<div class="user-role"><?= htmlspecialchars($user['role'] ?? 'Admin') ?></div>
|
|
</div>
|
|
<div class="user-avatar">
|
|
<?= strtoupper(substr($user['name'] ?? 'S', 0, 1)) ?>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="dashboard-content animate-fade-in">
|
|
<div class="dashboard-header">
|
|
<div style="display: flex; align-items: center; gap: 16px;">
|
|
<div class="header-icon-container">
|
|
<i data-lucide="shield-check" style="width: 24px; color: #4f46e5;"></i>
|
|
</div>
|
|
<div>
|
|
<h1 style="margin: 0; font-size: 1.5rem; color: #1e293b;">Officer Management</h1>
|
|
<p style="margin: 4px 0 0 0; color: #64748b; font-size: 0.875rem;">Personnel for <?= htmlspecialchars($election['title'] ?? 'Selected Election') ?></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Register New Officer Form -->
|
|
<section class="registration-section animate-stagger">
|
|
<div class="registration-header">
|
|
<i data-lucide="plus-circle" style="width: 20px; color: #2563eb;"></i>
|
|
Assign New Officer to Election
|
|
</div>
|
|
<form class="registration-form">
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>Full Name</label>
|
|
<input type="text" placeholder="Enter name">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Email</label>
|
|
<input type="email" placeholder="email@school.edu">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Role</label>
|
|
<select>
|
|
<option value="Admin">Admin</option>
|
|
<option value="Adviser">Adviser</option>
|
|
<option value="Officer">Officer</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top: 20px; display: flex; justify-content: flex-end;">
|
|
<button type="button" class="btn-save-officer">
|
|
<i data-lucide="save" style="width: 18px;"></i>
|
|
ASSIGN TO ELECTION
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<!-- Officer Categories Grid -->
|
|
<div class="officer-management-grid animate-fade-in">
|
|
<!-- Admins -->
|
|
<div class="officer-category-card">
|
|
<div class="category-header">
|
|
<div class="category-title">
|
|
<i data-lucide="user-cog" style="width: 18px; color: #4f46e5;"></i>
|
|
Admins
|
|
</div>
|
|
<span class="active-count"><?= count($admins) ?> ACTIVE</span>
|
|
</div>
|
|
<div class="officer-list">
|
|
<?php foreach ($admins as $o): ?>
|
|
<div class="officer-item">
|
|
<div class="officer-main-info">
|
|
<div class="officer-avatar"><?= strtoupper(substr($o['name'], 0, 1)) ?></div>
|
|
<div class="officer-details">
|
|
<span class="officer-name"><?= htmlspecialchars($o['name']) ?></span>
|
|
<span class="officer-meta"><?= htmlspecialchars($o['student_id']) ?> | <?= htmlspecialchars($o['email']) ?></span>
|
|
</div>
|
|
</div>
|
|
<div class="officer-actions">
|
|
<button title="Edit"><i data-lucide="edit-3" style="width: 16px;"></i></button>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
<?php if (empty($admins)): ?>
|
|
<div class="empty-state">No admins assigned.</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- COMEA Advisers -->
|
|
<div class="officer-category-card">
|
|
<div class="category-header">
|
|
<div class="category-title">
|
|
<i data-lucide="user-check" style="width: 18px; color: #f97316;"></i>
|
|
Advisers
|
|
</div>
|
|
<span class="active-count" style="background: #fff7ed; color: #ea580c;"><?= count($advisers) ?> ACTIVE</span>
|
|
</div>
|
|
<div class="officer-list">
|
|
<?php foreach ($advisers as $o): ?>
|
|
<div class="officer-item">
|
|
<div class="officer-main-info">
|
|
<div class="officer-avatar" style="background: #eff6ff; color: #2563eb;"><?= strtoupper(substr($o['name'], 0, 1)) ?></div>
|
|
<div class="officer-details">
|
|
<span class="officer-name"><?= htmlspecialchars($o['name']) ?></span>
|
|
<span class="officer-meta"><?= htmlspecialchars($o['student_id']) ?> | <?= htmlspecialchars($o['email']) ?></span>
|
|
</div>
|
|
</div>
|
|
<div class="officer-actions">
|
|
<button title="Edit"><i data-lucide="edit-3" style="width: 16px;"></i></button>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
<?php if (empty($advisers)): ?>
|
|
<div class="empty-state">No advisers assigned.</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- COMEA Officers -->
|
|
<div class="officer-category-card">
|
|
<div class="category-header">
|
|
<div class="category-title">
|
|
<i data-lucide="users" style="width: 18px; color: #10b981;"></i>
|
|
COMEA Officers
|
|
</div>
|
|
<span class="active-count" style="background: #f0fdf4; color: #16a34a;"><?= count($officers) ?> ACTIVE</span>
|
|
</div>
|
|
<div class="officer-list">
|
|
<?php foreach ($officers as $o): ?>
|
|
<div class="officer-item">
|
|
<div class="officer-main-info">
|
|
<div class="officer-avatar" style="background: #ecfdf5; color: #059669;"><?= strtoupper(substr($o['name'], 0, 1)) ?></div>
|
|
<div class="officer-details">
|
|
<span class="officer-name"><?= htmlspecialchars($o['name']) ?></span>
|
|
<span class="officer-meta"><?= htmlspecialchars($o['student_id']) ?> | <?= htmlspecialchars($o['email']) ?></span>
|
|
</div>
|
|
</div>
|
|
<div class="officer-actions">
|
|
<button title="Edit"><i data-lucide="edit-3" style="width: 16px;"></i></button>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
<?php if (empty($officers)): ?>
|
|
<div class="empty-state">No officers assigned.</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
</script>
|
|
</body>
|
|
</html>
|