admin/38458-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Autosave: 20260219-223447

Browse Source
This commit is contained in:
Flatlogic Bot 2026-02-19 22:34:47 +00:00
parent de7fb6343d
commit 971fbf8bc4
9 changed files with 213 additions and 196 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
assets/css/candidate_management.css
View File

@ -16,8 +16,8 @@
}
.candidate-stat-card {
background: #ffffff;
border: 1px solid #f3f4f6;
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 24px;
}
@ -25,7 +25,7 @@
.candidate-stat-label {
font-size: 0.7rem;
font-weight: 700;
color: #64748b;
color: var(--text-muted);
margin-bottom: 16px;
letter-spacing: 0.05em;
text-transform: uppercase;
@ -46,8 +46,8 @@
}
.distribution-card {
background: #ffffff;
border: 1px solid #f3f4f6;
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 24px;
}
@ -77,7 +77,7 @@
.distribution-count {
font-weight: 700;
color: #1e293b;
color: var(--text-main);
}
/* Filter Bar */
@ -86,8 +86,8 @@
display: flex;
gap: 16px;
align-items: flex-end;
background: #ffffff;
border-bottom: 1px solid #f3f4f6;
background: var(--surface-color);
border-bottom: 1px solid var(--border-color);
}
.filter-group {
@ -128,12 +128,12 @@
.filter-group select {
padding: 10px 12px;
border: 1px solid #e2e8f0;
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 0.875rem;
outline: none;
background: #ffffff;
color: #4b5563;
background: var(--surface-color);
color: var(--text-main);
}
/* Candidates Table */
@ -147,17 +147,17 @@
text-align: left;
font-size: 0.7rem;
font-weight: 700;
color: #64748b;
background: #f9fafb;
border-bottom: 1px solid #f3f4f6;
color: var(--text-muted);
background: var(--table-header-bg);
border-bottom: 1px solid var(--border-color);
text-transform: uppercase;
}
.candidates-table td {
padding: 16px 24px;
border-bottom: 1px solid #f3f4f6;
border-bottom: 1px solid var(--border-color);
font-size: 0.875rem;
color: #1e293b;
color: var(--text-main);
}
.candidate-info {
@ -186,12 +186,12 @@
.candidate-name {
font-weight: 600;
color: #1e293b;
color: var(--text-main);
}
.candidate-sub {
font-size: 0.75rem;
color: #64748b;
color: var(--text-muted);
}
.position-badge {

27
assets/css/officers_management.css
View File

@ -8,16 +8,16 @@
}
.officer-category-card {
background: white;
background: var(--surface-color);
border-radius: 12px;
border: 1px solid #f3f4f6;
border: 1px solid var(--border-color);
display: flex;
flex-direction: column;
}
.category-header {
padding: 16px 20px;
border-bottom: 1px solid #f3f4f6;
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
@ -28,7 +28,7 @@
align-items: center;
gap: 10px;
font-weight: 600;
color: #1e293b;
color: var(--text-main);
font-size: 0.9375rem;
}
@ -56,7 +56,7 @@
}
.officer-item:hover {
background-color: #f8fafc;
background-color: var(--surface-hover);
}
.officer-main-info {
@ -86,12 +86,12 @@
.officer-name {
font-size: 0.875rem;
font-weight: 500;
color: #1e293b;
color: var(--text-main);
}
.officer-meta {
font-size: 0.75rem;
color: #64748b;
color: var(--text-muted);
}
.officer-actions {
@ -123,9 +123,9 @@
/* Registration Form Section */
.registration-section {
background: white;
background: var(--surface-color);
border-radius: 12px;
border: 1px solid #f3f4f6;
border: 1px solid var(--border-color);
padding: 24px;
margin-bottom: 24px;
}
@ -135,7 +135,7 @@
align-items: center;
gap: 10px;
margin-bottom: 20px;
color: #1e293b;
color: var(--text-main);
font-weight: 600;
}
@ -155,16 +155,17 @@
.form-group label {
font-size: 0.75rem;
font-weight: 700;
color: #1e293b;
color: var(--text-main);
text-transform: uppercase;
}
.form-group input, .form-group select {
padding: 10px 14px;
border: 1px solid #e2e8f0;
background: var(--bg-color);
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 0.875rem;
color: #1e293b;
color: var(--text-main);
outline: none;
transition: border-color 0.2s;
}

4
assets/css/style.css
View File

@ -3,9 +3,11 @@
--accent-color: #2563eb;
--bg-color: #f8fafc;
--surface-color: #ffffff;
--surface-hover: #f8fafc;
--border-color: #e2e8f0;
--text-main: #1e293b;
--text-muted: #64748b;
--table-header-bg: #f9fafb;
--radius: 6px;
}
@ -161,9 +163,11 @@ body {
body.dark-theme {
--bg-color: #0f172a;
--surface-color: #1e293b;
--surface-hover: #334155;
--border-color: #334155;
--text-main: #f1f5f9;
--text-muted: #94a3b8;
--table-header-bg: #334155;
}
body.dark-theme .navbar {

47
assets/css/voter_management.css
View File

@ -16,8 +16,8 @@
}
.voter-stat-card {
background: #ffffff;
border: 1px solid #f3f4f6;
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 24px;
}
@ -25,7 +25,7 @@
.voter-stat-label {
font-size: 0.7rem;
font-weight: 700;
color: #64748b;
color: var(--text-muted);
margin-bottom: 16px;
letter-spacing: 0.05em;
}
@ -44,8 +44,8 @@
}
.distribution-card {
background: #ffffff;
border: 1px solid #f3f4f6;
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 24px;
}
@ -75,7 +75,7 @@
.distribution-count {
font-weight: 700;
color: #1e293b;
color: var(--text-main);
}
/* Action Buttons */
@ -112,8 +112,8 @@
display: flex;
gap: 16px;
align-items: flex-end;
background: #ffffff;
border-bottom: 1px solid #f3f4f6;
background: var(--surface-color);
border-bottom: 1px solid var(--border-color);
}
.filter-group {
@ -153,12 +153,12 @@
.filter-group select {
padding: 10px 12px;
border: 1px solid #e2e8f0;
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 0.875rem;
outline: none;
background: #ffffff;
color: #4b5563;
background: var(--surface-color);
color: var(--text-main);
}
/* Voters Table */
@ -172,16 +172,16 @@
text-align: left;
font-size: 0.7rem;
font-weight: 700;
color: #64748b;
background: #f9fafb;
border-bottom: 1px solid #f3f4f6;
color: var(--text-muted);
background: var(--table-header-bg);
border-bottom: 1px solid var(--border-color);
}
.voters-table td {
padding: 16px 24px;
border-bottom: 1px solid #f3f4f6;
border-bottom: 1px solid var(--border-color);
font-size: 0.875rem;
color: #1e293b;
color: var(--text-main);
}
.status-indicator {
@ -240,7 +240,8 @@
}
.modal-content {
background: white;
background: var(--surface-color);
color: var(--text-main);
padding: 32px;
border-radius: 16px;
width: 100%;
@ -248,6 +249,12 @@
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
.modal-header h2 {
font-size: 1.25rem;
color: var(--text-main);
margin: 0;
}
.modal-header {
display: flex;
justify-content: space-between;
@ -285,12 +292,14 @@
.form-group label {
font-size: 0.75rem;
font-weight: 600;
color: #64748b;
color: var(--text-muted);
}
.form-group input, .form-group select {
padding: 10px 12px;
border: 1px solid #e2e8f0;
background: var(--bg-color);
color: var(--text-main);
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 0.875rem;
outline: none;

42
candidate_management.php
View File

@ -118,18 +118,18 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Online Election System
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
border: 1px solid #e2e8f0;
background: white;
color: #1e293b;
border: 1px solid var(--border-color);
background: var(--surface-color);
color: var(--text-main);
}
.btn-manage:hover {
background: #f8fafc;
border-color: #cbd5e1;
background: var(--surface-hover);
border-color: var(--border-color);
}
.btn-manage.primary {
background: #4f46e5;
background: var(--accent-color);
color: white;
border-color: #4f46e5;
border-color: var(--accent-color);
}
.btn-manage.primary:hover {
background: #4338ca;
@ -138,13 +138,13 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Online Election System
display: none;
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.5);
z-index: 1000;
align-items: center;
justify-content: center;
}
.modal-content {
background: white;
background: var(--surface-color);
color: var(--text-main);
padding: 32px;
border-radius: 16px;
width: 100%;
@ -157,14 +157,16 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Online Election System
align-items: center;
margin-bottom: 24px;
}
.modal-header h2 { margin: 0; font-size: 1.25rem; color: #1e293b; }
.modal-header h2 { margin: 0; font-size: 1.25rem; color: var(--text-main); }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: #64748b; margin-bottom: 6px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea {
width: 100%;
padding: 10px;
background: var(--bg-color);
color: var(--text-main);
border-radius: 8px;
border: 1px solid #e2e8f0;
border: 1px solid var(--border-color);
font-size: 14px;
}
.modal-footer {
@ -190,8 +192,8 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Online Election System
<i data-lucide="user-square-2" style="width: 24px; color: #4f46e5;"></i>
</div>
<div>
<h1 style="margin: 0; font-size: 1.5rem; color: #1e293b;">Candidate Management</h1>
<p style="margin: 4px 0 0 0; color: #64748b; font-size: 0.875rem;">Managing <?= htmlspecialchars($election['title']) ?></p>
<h1 style="margin: 0; font-size: 1.5rem; color: var(--text-main);">Candidate Management</h1>
<p style="margin: 4px 0 0 0; color: var(--text-muted); font-size: 0.875rem;">Managing <?= htmlspecialchars($election['title']) ?></p>
</div>
</div>
<div>
@ -236,12 +238,12 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Online Election System
<div class="distribution-list">
<?php foreach ($posStats as $stat): ?>
<div class="distribution-item">
<span><?= htmlspecialchars($stat['name']) ?></span>
<span style="color: var(--text-muted);"><?= htmlspecialchars($stat['name']) ?></span>
<span class="distribution-count"><?= $stat['count'] ?></span>
</div>
<?php endforeach; ?>
<?php if (empty($posStats)): ?>
<div style="padding: 12px; color: #94a3b8; font-size: 0.875rem; text-align: center;">No positions defined.</div>
<div style="padding: 12px; color: var(--text-muted); font-size: 0.875rem; text-align: center;">No positions defined.</div>
<?php endif; ?>
</div>
</div>
@ -250,19 +252,19 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Online Election System
<div class="distribution-list">
<?php foreach ($partyStats as $stat): ?>
<div class="distribution-item">
<span><?= htmlspecialchars($stat['party_name'] ?: 'Independent') ?></span>
<span style="color: var(--text-muted);"><?= htmlspecialchars($stat['party_name'] ?: 'Independent') ?></span>
<span class="distribution-count"><?= $stat['count'] ?></span>
</div>
<?php endforeach; ?>
<?php if (empty($partyStats)): ?>
<div style="padding: 12px; color: #94a3b8; font-size: 0.875rem; text-align: center;">No parties defined.</div>
<div style="padding: 12px; color: var(--text-muted); font-size: 0.875rem; text-align: center;">No parties defined.</div>
<?php endif; ?>
</div>
</div>
</div>
<!-- Filters & Table Section -->
<div class="content-section animate-fade-in" style="background: white; border-radius: 12px; border: 1px solid #f3f4f6; overflow: hidden;">
<div class="content-section animate-fade-in" style="background: var(--surface-color); border-radius: 12px; border: 1px solid var(--border-color); overflow: hidden;">
<form method="GET" class="filter-bar">
<div class="filter-group" style="flex: 2;">
<label>SEARCH</label>
@ -354,7 +356,7 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Online Election System
<input type="hidden" name="id" id="edit_cand_id">
<div class="form-group">
<label>Candidate Name</label>
<input type="text" id="edit_cand_name" disabled style="background: #f1f5f9;">
<input type="text" id="edit_cand_name" disabled style="background: var(--bg-color); color: var(--text-muted);">
</div>
<div class="form-group">
<label>Position</label>

41
check_sync.php Normal file
View File

@ -0,0 +1,41 @@
<?php
require_once __DIR__ . '/db/config.php';
$supabasePass = 'gA82h8K80T5QUAwi';
$supabaseHost = "aws-1-ap-southeast-1.pooler.supabase.com";
$supabaseUser = "postgres.siqeqnizegizxemrfgkf";
$supabaseDb = "postgres";
$supabasePort = "6543";
try {
echo "Connecting to local MariaDB...\n";
$localPdo = db();
echo "Connecting to Supabase PostgreSQL...\n";
$dsn = "pgsql:host=$supabaseHost;port=$supabasePort;dbname=$supabaseDb";
$supabasePdo = new PDO($dsn, $supabaseUser, $supabasePass, [
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
]);
$tables = ["users", "elections", "positions", "election_assignments", "parties", "candidates", "votes", "audit_logs"];
echo "\nComparison Table:\n";
echo str_pad("Table", 25) . " | " . str_pad("Local", 10) . " | " . str_pad("Supabase", 10) . "\n";
echo str_repeat("-", 50) . "\n";
foreach ($tables as $table) {
$localCount = $localPdo->query("SELECT COUNT(*) FROM $table")->fetchColumn();
// For Supabase, check if table exists first
try {
$supabaseCount = $supabasePdo->query("SELECT COUNT(*) FROM $table")->fetchColumn();
} catch (Exception $e) {
$supabaseCount = "N/A (Error)";
}
echo str_pad($table, 25) . " | " . str_pad($localCount, 10) . " | " . str_pad($supabaseCount, 10) . "\n";
}
} catch (Exception $e) {
echo "Error: " . $e->getMessage() . "\n";
}

44
db/config.php
View File

@ -5,57 +5,17 @@ define('DB_NAME', 'app_38458');
define('DB_USER', 'app_38458');
define('DB_PASS', 'c217529c-a428-4a97-8f31-773c420377a7');
// Supabase Configuration - Provide your project URL and Service Role Key
define('SUPABASE_URL', getenv('SUPABASE_URL') ?: 'https://siqeqnizegizxemrfgkf.supabase.co');
define('SUPABASE_SERVICE_ROLE_KEY', getenv('SUPABASE_SERVICE_ROLE_KEY') ?: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InNpcWVxbml6ZWdpenhlbXJmZ2tmIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImlhdCI6MTc3MDEyMjgzMywiZXhwIjoyMDg1Njk4ODMzfQ.8K66Y3hSfSq5mRDeU8YT6pH9tqPVngxA9dEwCgQUCl0');
define('SUPABASE_DB_PASS', getenv('SUPABASE_DB_PASS') ?: 'gA82h8K80T5QUAwi'); // Set your DB password here for PostgreSQL migration
function db() {
static $pdo;
if (!$pdo) {
$useSupabase = defined('SUPABASE_DB_PASS') && !empty(SUPABASE_DB_PASS);
if ($useSupabase && extension_loaded('pdo_pgsql')) {
// Use Supabase PostgreSQL
$host = 'aws-1-ap-southeast-1.pooler.supabase.com';
$port = '6543';
$dbname = 'postgres';
$user = 'postgres.siqeqnizegizxemrfgkf';
$pass = SUPABASE_DB_PASS;
try {
$pdo = new PDO("pgsql:host=$host;port=$port;dbname=$dbname", $user, $pass, [
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
PDO::ATTR_TIMEOUT => 5, // Short timeout for faster fallback
]);
return $pdo;
} catch (PDOException $pgException) {
// Keep the error to report it if the fallback also fails
}
}
// Fallback to local MariaDB/MySQL
// Local MariaDB/MySQL
try {
$pdo = new PDO('mysql:host='.DB_HOST.';dbname='.DB_NAME.';charset=utf8mb4', DB_USER, DB_PASS, [
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
]);
} catch (PDOException $mysqlException) {
if (!extension_loaded('pdo_pgsql')) {
die("Connection failed: The 'pdo_pgsql' extension is not enabled in your PHP configuration, and the local MySQL connection also failed.<br>MySQL Error: " . $mysqlException->getMessage());
}
$errorMsg = "<h3>Database Connection Failed</h3>";
if (isset($pgException)) {
$errorMsg .= "<strong>PostgreSQL (Supabase) Error:</strong> " . $pgException->getMessage() . "<br><br>";
}
$errorMsg .= "<strong>Local MySQL Error:</strong> " . $mysqlException->getMessage() . "<br><br>";
$errorMsg .= "<strong>Possible Solutions:</strong><br>";
$errorMsg .= "1. <strong>Supabase:</strong> Ensure your firewall/ISP allows outgoing connections on <strong>port 6543</strong>. Try disabling your antivirus temporarily.<br>";
$errorMsg .= "2. <strong>Local MySQL:</strong> If you want to use local MySQL, update <code>DB_USER</code> and <code>DB_PASS</code> in <code>db/config.php</code> to match your XAMPP settings (usually 'root' and empty password).<br>";
$errorMsg .= "3. <strong>Verify extension:</strong> Make sure <code>extension=pdo_pgsql</code> is uncommented in <code>php.ini</code> AND you have restarted Apache.<br>";
die($errorMsg);
die("Connection failed: " . $mysqlException->getMessage());
}
}
return $pdo;

36
officers_management.php
View File

@ -54,8 +54,8 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Online Election System
<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>
<h1 style="margin: 0; font-size: 1.5rem; color: var(--text-main);">Officer Management</h1>
<p style="margin: 4px 0 0 0; color: var(--text-muted); font-size: 0.875rem;">Personnel for <?= htmlspecialchars($election['title'] ?? 'Selected Election') ?></p>
</div>
</div>
</div>
@ -202,37 +202,37 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Online Election System
</div>
<!-- Edit Officer Modal -->
<div id="editOfficerModal" class="modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1000; align-items:center; justify-content:center;">
<div class="modal-content" style="background:white; padding:32px; border-radius:16px; width:100%; max-width:500px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);">
<div class="modal-header" style="display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;">
<h2 style="margin:0; font-size:1.25rem; color:#1e293b;">Edit Officer</h2>
<button onclick="closeModal('editOfficerModal')" style="border:none; background:none; cursor:pointer;"><i data-lucide="x"></i></button>
<div id="editOfficerModal" class="modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:1000; align-items:center; justify-content:center;">
<div class="modal-content">
<div class="modal-header">
<h2 style="margin:0; font-size:1.25rem;">Edit Officer</h2>
<button onclick="closeModal('editOfficerModal')" style="border:none; background:none; cursor:pointer; color: var(--text-muted);"><i data-lucide="x"></i></button>
</div>
<form action="api/update_officer.php" method="POST">
<input type="hidden" name="id" id="edit_officer_id">
<div class="form-group" style="margin-bottom:16px;">
<label style="display:block; font-size:12px; font-weight:600; color:#64748b; margin-bottom:6px;">FULL NAME</label>
<input type="text" name="name" id="edit_officer_name" required style="width:100%; padding:10px; border-radius:8px; border:1px solid #e2e8f0;">
<label>FULL NAME</label>
<input type="text" name="name" id="edit_officer_name" required>
</div>
<div class="form-group" style="margin-bottom:16px;">
<label style="display:block; font-size:12px; font-weight:600; color:#64748b; margin-bottom:6px;">EMAIL ADDRESS</label>
<input type="email" name="email" id="edit_officer_email" required style="width:100%; padding:10px; border-radius:8px; border:1px solid #e2e8f0;">
<label>EMAIL ADDRESS</label>
<input type="email" name="email" id="edit_officer_email" required>
</div>
<div class="form-group" style="margin-bottom:16px;">
<label style="display:block; font-size:12px; font-weight:600; color:#64748b; margin-bottom:6px;">ROLE</label>
<select name="role" id="edit_officer_role" required style="width:100%; padding:10px; border-radius:8px; border:1px solid #e2e8f0;">
<label>ROLE</label>
<select name="role" id="edit_officer_role" required>
<option value="Admin">Admin</option>
<option value="Adviser">Adviser</option>
<option value="Officer">Officer</option>
</select>
</div>
<div class="form-group" style="margin-bottom:24px;">
<label style="display:block; font-size:12px; font-weight:600; color:#64748b; margin-bottom:6px;">NEW PASSWORD (OPTIONAL)</label>
<input type="password" name="password" placeholder="Leave blank to keep current" style="width:100%; padding:10px; border-radius:8px; border:1px solid #e2e8f0;">
<label>NEW PASSWORD (OPTIONAL)</label>
<input type="password" name="password" placeholder="Leave blank to keep current">
</div>
<div style="display:flex; justify-content:flex-end; gap:12px;">
<button type="button" onclick="closeModal('editOfficerModal')" style="padding:10px 20px; border-radius:8px; border:1px solid #e2e8f0; background:white; cursor:pointer;">Cancel</button>
<button type="submit" style="padding:10px 24px; border-radius:8px; border:none; background:#4f46e5; color:white; cursor:pointer; font-weight:600;">Update Officer</button>
<div class="modal-footer">
<button type="button" onclick="closeModal('editOfficerModal')" class="btn-cancel">Cancel</button>
<button type="submit" class="btn-submit" style="background: var(--accent-color); color: white;">Update Officer</button>
</div>
</form>
</div>

132
voter_management.php
View File

@ -116,8 +116,8 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Online Election System
<i data-lucide="users" style="width: 24px; color: #4f46e5;"></i>
</div>
<div>
<h1 style="margin: 0; font-size: 1.5rem; color: #1e293b;">Voters List</h1>
<p style="margin: 4px 0 0 0; color: #64748b; font-size: 0.875rem;">Managing voters for <?= htmlspecialchars($election['title'] ?? 'Selected Election') ?></p>
<h1 style="margin: 0; font-size: 1.5rem; color: var(--text-main);">Voters List</h1>
<p style="margin: 4px 0 0 0; color: var(--text-muted); font-size: 0.875rem;">Managing voters for <?= htmlspecialchars($election['title'] ?? 'Selected Election') ?></p>
</div>
</div>
</div>
@ -126,11 +126,11 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Online Election System
<div class="voter-stats-grid animate-stagger">
<div class="voter-stat-card">
<div class="voter-stat-label">TOTAL VOTERS</div>
<div class="voter-stat-value" style="color: #2563eb;"><?= number_format($totalVoters) ?></div>
<div class="voter-stat-value" style="color: var(--accent-color);"><?= number_format($totalVoters) ?></div>
</div>
<div class="voter-stat-card">
<div class="voter-stat-label">VOTERS WHO VOTED</div>
<div class="voter-stat-value" style="color: #64748b;"><?= number_format($votedCount) ?></div>
<div class="voter-stat-value" style="color: var(--text-muted);"><?= number_format($votedCount) ?></div>
</div>
<div class="voter-stat-card">
<div class="voter-stat-label" style="color: #ef4444;">VOTERS WHO HAVEN'T VOTED</div>
@ -225,35 +225,35 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Online Election System
</div>
<!-- Modals -->
<div id="addVoterModal" class="modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1000; align-items:center; justify-content:center;">
<div class="modal-content" style="background:white; padding:32px; border-radius:16px; width:100%; max-width:500px;">
<div class="modal-header" style="display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;">
<h2 style="margin:0; font-size:1.25rem;">Register New Voter</h2>
<button onclick="closeModal('addVoterModal')" style="border:none; background:none; cursor:pointer;"><i data-lucide="x"></i></button>
<div id="addVoterModal" class="modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:1000; align-items:center; justify-content:center;">
<div class="modal-content">
<div class="modal-header">
<h2>Register New Voter</h2>
<button onclick="closeModal('addVoterModal')" style="border:none; background:none; cursor:pointer; color: var(--text-muted);"><i data-lucide="x"></i></button>
</div>
<form action="api/add_voter.php" method="POST">
<input type="hidden" name="election_id" value="<?= $electionId ?>">
<div class="form-group" style="margin-bottom:16px;">
<label style="display:block; font-size:12px; font-weight:600; color:#64748b; margin-bottom:6px;">FULL NAME</label>
<input type="text" name="name" placeholder="Enter student's full name" required style="width:100%; padding:10px; border-radius:8px; border:1px solid #e2e8f0;">
<label>FULL NAME</label>
<input type="text" name="name" placeholder="Enter student's full name" required>
</div>
<div class="form-group" style="margin-bottom:16px;">
<label style="display:block; font-size:12px; font-weight:600; color:#64748b; margin-bottom:6px;">STUDENT ID</label>
<input type="text" name="student_id" placeholder="XX-XXXX" required style="width:100%; padding:10px; border-radius:8px; border:1px solid #e2e8f0;">
<label>STUDENT ID</label>
<input type="text" name="student_id" placeholder="XX-XXXX" required>
</div>
<div class="form-group" style="margin-bottom:16px;">
<label style="display:block; font-size:12px; font-weight:600; color:#64748b; margin-bottom:6px;">EMAIL ADDRESS</label>
<input type="email" name="email" placeholder="student@school.edu" required style="width:100%; padding:10px; border-radius:8px; border:1px solid #e2e8f0;">
<label>EMAIL ADDRESS</label>
<input type="email" name="email" placeholder="student@school.edu" required>
</div>
<div class="form-group" style="margin-bottom:16px;">
<label style="display:block; font-size:12px; font-weight:600; color:#64748b; margin-bottom:6px;">PASSWORD</label>
<input type="text" name="password" value="iloilohns" required style="width:100%; padding:10px; border-radius:8px; border:1px solid #e2e8f0;">
<small style="color: #64748b; font-size: 11px;">Default is iloilohns</small>
<label>PASSWORD</label>
<input type="text" name="password" value="iloilohns" required>
<small style="color: var(--text-muted); font-size: 11px;">Default is iloilohns</small>
</div>
<div style="display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-bottom:24px;">
<div class="form-group">
<label style="display:block; font-size:12px; font-weight:600; color:#64748b; margin-bottom:6px;">TRACK</label>
<select name="track" required style="width:100%; padding:10px; border-radius:8px; border:1px solid #e2e8f0;">
<label>TRACK</label>
<select name="track" required>
<option value="STEM">STEM</option>
<option value="ABM">ABM</option>
<option value="HUMSS">HUMSS</option>
@ -262,53 +262,53 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Online Election System
</select>
</div>
<div class="form-group">
<label style="display:block; font-size:12px; font-weight:600; color:#64748b; margin-bottom:6px;">GRADE LEVEL</label>
<select name="grade_level" required style="width:100%; padding:10px; border-radius:8px; border:1px solid #e2e8f0;">
<label>GRADE LEVEL</label>
<select name="grade_level" required>
<option value="11">Grade 11</option>
<option value="12">Grade 12</option>
</select>
</div>
</div>
<div class="form-group" style="margin-bottom:24px;">
<label style="display:block; font-size:12px; font-weight:600; color:#64748b; margin-bottom:6px;">SECTION</label>
<input type="text" name="section" placeholder="Enter section (e.g. Einstein, Newton)" required style="width:100%; padding:10px; border-radius:8px; border:1px solid #e2e8f0;">
<label>SECTION</label>
<input type="text" name="section" placeholder="Enter section (e.g. Einstein, Newton)" required>
</div>
<div class="modal-footer" style="display:flex; justify-content:flex-end; gap:12px;">
<button type="button" onclick="closeModal('addVoterModal')" class="btn-cancel" style="padding:10px 20px; border-radius:8px; border:1px solid #e2e8f0; background:white; cursor:pointer;">Cancel</button>
<button type="submit" class="btn-action btn-add" style="padding:10px 24px; border-radius:8px; border:none; background:#4f46e5; color:white; cursor:pointer; font-weight:600;">Register Voter</button>
<div class="modal-footer">
<button type="button" onclick="closeModal('addVoterModal')" class="btn-cancel">Cancel</button>
<button type="submit" class="btn-action btn-add">Register Voter</button>
</div>
</form>
</div>
</div>
<div id="editVoterModal" class="modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1000; align-items:center; justify-content:center;">
<div class="modal-content" style="background:white; padding:32px; border-radius:16px; width:100%; max-width:500px;">
<div class="modal-header" style="display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;">
<h2 style="margin:0; font-size:1.25rem;">Edit Voter</h2>
<button onclick="closeModal('editVoterModal')" style="border:none; background:none; cursor:pointer;"><i data-lucide="x"></i></button>
<div id="editVoterModal" class="modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:1000; align-items:center; justify-content:center;">
<div class="modal-content">
<div class="modal-header">
<h2>Edit Voter</h2>
<button onclick="closeModal('editVoterModal')" style="border:none; background:none; cursor:pointer; color: var(--text-muted);"><i data-lucide="x"></i></button>
</div>
<form action="api/update_voter.php" method="POST">
<input type="hidden" name="id" id="edit_voter_id">
<div class="form-group" style="margin-bottom:16px;">
<label style="display:block; font-size:12px; font-weight:600; color:#64748b; margin-bottom:6px;">FULL NAME</label>
<input type="text" name="name" id="edit_voter_name" placeholder="Enter student's full name" required style="width:100%; padding:10px; border-radius:8px; border:1px solid #e2e8f0;">
<label>FULL NAME</label>
<input type="text" name="name" id="edit_voter_name" placeholder="Enter student's full name" required>
</div>
<div class="form-group" style="margin-bottom:16px;">
<label style="display:block; font-size:12px; font-weight:600; color:#64748b; margin-bottom:6px;">STUDENT ID</label>
<input type="text" name="student_id" id="edit_voter_student_id" placeholder="XX-XXXX" required style="width:100%; padding:10px; border-radius:8px; border:1px solid #e2e8f0;">
<label>STUDENT ID</label>
<input type="text" name="student_id" id="edit_voter_student_id" placeholder="XX-XXXX" required>
</div>
<div class="form-group" style="margin-bottom:16px;">
<label style="display:block; font-size:12px; font-weight:600; color:#64748b; margin-bottom:6px;">EMAIL ADDRESS</label>
<input type="email" name="email" id="edit_voter_email" placeholder="student@school.edu" required style="width:100%; padding:10px; border-radius:8px; border:1px solid #e2e8f0;">
<label>EMAIL ADDRESS</label>
<input type="email" name="email" id="edit_voter_email" placeholder="student@school.edu" required>
</div>
<div class="form-group" style="margin-bottom:16px;">
<label style="display:block; font-size:12px; font-weight:600; color:#64748b; margin-bottom:6px;">NEW PASSWORD (OPTIONAL)</label>
<input type="password" name="password" placeholder="Leave blank to keep current" style="width:100%; padding:10px; border-radius:8px; border:1px solid #e2e8f0;">
<label>NEW PASSWORD (OPTIONAL)</label>
<input type="password" name="password" placeholder="Leave blank to keep current">
</div>
<div style="display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-bottom:24px;">
<div class="form-group">
<label style="display:block; font-size:12px; font-weight:600; color:#64748b; margin-bottom:6px;">TRACK</label>
<select name="track" id="edit_voter_track" required style="width:100%; padding:10px; border-radius:8px; border:1px solid #e2e8f0;">
<label>TRACK</label>
<select name="track" id="edit_voter_track" required>
<option value="STEM">STEM</option>
<option value="ABM">ABM</option>
<option value="HUMSS">HUMSS</option>
@ -317,55 +317,55 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Online Election System
</select>
</div>
<div class="form-group">
<label style="display:block; font-size:12px; font-weight:600; color:#64748b; margin-bottom:6px;">GRADE LEVEL</label>
<select name="grade_level" id="edit_voter_grade_level" required style="width:100%; padding:10px; border-radius:8px; border:1px solid #e2e8f0;">
<label>GRADE LEVEL</label>
<select name="grade_level" id="edit_voter_grade_level" required>
<option value="11">Grade 11</option>
<option value="12">Grade 12</option>
</select>
</div>
</div>
<div class="form-group" style="margin-bottom:24px;">
<label style="display:block; font-size:12px; font-weight:600; color:#64748b; margin-bottom:6px;">SECTION</label>
<input type="text" name="section" id="edit_voter_section" placeholder="Enter section" required style="width:100%; padding:10px; border-radius:8px; border:1px solid #e2e8f0;">
<label>SECTION</label>
<input type="text" name="section" id="edit_voter_section" placeholder="Enter section" required>
</div>
<div class="modal-footer" style="display:flex; justify-content:flex-end; gap:12px;">
<button type="button" onclick="closeModal('editVoterModal')" class="btn-cancel" style="padding:10px 20px; border-radius:8px; border:1px solid #e2e8f0; background:white; cursor:pointer;">Cancel</button>
<button type="submit" class="btn-action btn-add" style="padding:10px 24px; border-radius:8px; border:none; background:#4f46e5; color:white; cursor:pointer; font-weight:600;">Update Voter</button>
<div class="modal-footer">
<button type="button" onclick="closeModal('editVoterModal')" class="btn-cancel">Cancel</button>
<button type="submit" class="btn-action btn-add">Update Voter</button>
</div>
</form>
</div>
</div>
<div id="importModal" class="modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1000; align-items:center; justify-content:center;">
<div class="modal-content" style="background:white; padding:32px; border-radius:16px; width:100%; max-width:500px;">
<div class="modal-header" style="display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;">
<h2 style="margin:0; font-size:1.25rem;">Import Voters from CSV</h2>
<button onclick="closeModal('importModal')" style="border:none; background:none; cursor:pointer;"><i data-lucide="x"></i></button>
<div id="importModal" class="modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:1000; align-items:center; justify-content:center;">
<div class="modal-content">
<div class="modal-header">
<h2>Import Voters from CSV</h2>
<button onclick="closeModal('importModal')" style="border:none; background:none; cursor:pointer; color: var(--text-muted);"><i data-lucide="x"></i></button>
</div>
<form action="api/import_voters.php" method="POST" enctype="multipart/form-data">
<input type="hidden" name="election_id" value="<?= $electionId ?>">
<div class="form-group" style="margin-bottom:24px;">
<label style="display:block; font-size:12px; font-weight:600; color:#64748b; margin-bottom:12px;">SELECT CSV FILE</label>
<div style="border: 2px dashed #e2e8f0; padding: 32px; border-radius: 12px; text-align: center; cursor: pointer;" onclick="document.getElementById('csvFile').click()">
<i data-lucide="upload-cloud" style="width: 32px; height: 32px; color: #94a3b8; margin-bottom: 12px;"></i>
<p style="margin: 0; font-size: 0.875rem; color: #64748b;">Click to upload or drag and drop</p>
<p style="margin: 4px 0 0 0; font-size: 0.75rem; color: #94a3b8;">CSV files only (Max 5MB)</p>
<label>SELECT CSV FILE</label>
<div style="border: 2px dashed var(--border-color); padding: 32px; border-radius: 12px; text-align: center; cursor: pointer;" onclick="document.getElementById('csvFile').click()">
<i data-lucide="upload-cloud" style="width: 32px; height: 32px; color: var(--text-muted); margin-bottom: 12px;"></i>
<p style="margin: 0; font-size: 0.875rem; color: var(--text-muted);">Click to upload or drag and drop</p>
<p style="margin: 4px 0 0 0; font-size: 0.75rem; color: var(--text-muted);">CSV files only (Max 5MB)</p>
<input type="file" id="csvFile" name="csv_file" accept=".csv" style="display: none;" onchange="updateFileName(this)">
<div id="fileName" style="margin-top: 12px; font-weight: 500; color: #4f46e5; font-size: 0.875rem;"></div>
<div id="fileName" style="margin-top: 12px; font-weight: 500; color: var(--accent-color); font-size: 0.875rem;"></div>
</div>
</div>
<div style="background: #f8fafc; padding: 16px; border-radius: 8px; margin-bottom: 24px;">
<p style="margin: 0 0 8px 0; font-size: 0.75rem; font-weight: 600; color: #64748b;">CSV FORMAT REQUIREMENTS:</p>
<p style="margin: 0; font-size: 0.75rem; color: #64748b; line-height: 1.5;">
<div style="background: var(--bg-color); padding: 16px; border-radius: 8px; margin-bottom: 24px;">
<p style="margin: 0 0 8px 0; font-size: 0.75rem; font-weight: 600; color: var(--text-muted);">CSV FORMAT REQUIREMENTS:</p>
<p style="margin: 0; font-size: 0.75rem; color: var(--text-muted); line-height: 1.5;">
Columns: <code>student_id, name, email, track, grade_level, section</code><br>
Example: <code>20-1234, John Doe, john@example.com, STEM, 12, Einstein</code>
</p>
</div>
<div class="modal-footer" style="display:flex; justify-content:flex-end; gap:12px;">
<button type="button" onclick="closeModal('importModal')" class="btn-cancel" style="padding:10px 20px; border-radius:8px; border:1px solid #e2e8f0; background:white; cursor:pointer;">Cancel</button>
<button type="submit" class="btn-action btn-add" style="padding: 10px 24px; border-radius:8px; border:none; background:#4f46e5; color:white; cursor:pointer; font-weight:600;">Start Import</button>
<div class="modal-footer">
<button type="button" onclick="closeModal('importModal')" class="btn-cancel">Cancel</button>
<button type="submit" class="btn-action btn-add">Start Import</button>
</div>
</form>
</div>