350 lines
13 KiB
PHP
350 lines
13 KiB
PHP
<?php
|
|
session_start();
|
|
require_once 'db/config.php'; // Assuming you have a db connection setup
|
|
|
|
// Check if user is admin
|
|
if (!isset($_SESSION['user']) || $_SESSION['user'] !== 'admin') {
|
|
// If not admin, redirect to login page
|
|
header('Location: login.php');
|
|
exit;
|
|
}
|
|
|
|
// Check for messages
|
|
$message = '';
|
|
if (isset($_SESSION['message'])) {
|
|
$message = $_SESSION['message'];
|
|
unset($_SESSION['message']);
|
|
}
|
|
|
|
$pdo = db();
|
|
|
|
// Pagination settings
|
|
$records_per_page = 10;
|
|
$page = isset($_GET['page']) && is_numeric($_GET['page']) ? (int)$_GET['page'] : 1;
|
|
$offset = ($page - 1) * $records_per_page;
|
|
|
|
// Get total number of records
|
|
$total_stmt = $pdo->query("SELECT COUNT(*) FROM attendees");
|
|
$total_records = $total_stmt->fetchColumn();
|
|
$total_pages = ceil($total_records / $records_per_page);
|
|
|
|
// Get records for the current page
|
|
$stmt = $pdo->prepare("SELECT id, first_name, last_name, email, created_at, how_did_you_hear, company FROM attendees ORDER BY first_name ASC, last_name ASC LIMIT :limit OFFSET :offset");
|
|
$stmt->bindValue(':limit', $records_per_page, PDO::PARAM_INT);
|
|
$stmt->bindValue(':offset', $offset, PDO::PARAM_INT);
|
|
$stmt->execute();
|
|
$attendees = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
|
|
|
// Get data for the chart
|
|
$chart_stmt = $pdo->query("SELECT DATE(created_at) as registration_day, COUNT(*) as user_count FROM attendees GROUP BY registration_day ORDER BY registration_day");
|
|
$chart_data = $chart_stmt->fetchAll(PDO::FETCH_ASSOC);
|
|
|
|
$chart_labels = json_encode(array_column($chart_data, 'registration_day'));
|
|
$chart_values = json_encode(array_column($chart_data, 'user_count'));
|
|
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Admin Dashboard</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<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;800&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<style>
|
|
:root {
|
|
--bg-start: #0b2083;
|
|
--bg-end: #1029a0;
|
|
--surface: rgba(11, 32, 131, 0.40);
|
|
--surface-soft: rgba(16, 41, 160, 0.32);
|
|
--line: rgba(221, 226, 253, 0.18);
|
|
--text-main: #f3f9ff;
|
|
--text-soft: #dde2fd;
|
|
--text-muted: #97acd0;
|
|
--accent: #2c4bd1;
|
|
--accent-strong: #1029a0;
|
|
--accent-soft: #bbc8fb;
|
|
--success: #18d1b3;
|
|
--danger: #ff6b81;
|
|
--font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
--font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
|
|
--button-shadow: 0 16px 30px rgba(11, 32, 131, 0.26);
|
|
}
|
|
body {
|
|
font-family: var(--font-body);
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
background:
|
|
radial-gradient(circle at top left, rgba(221, 226, 253, 0.22), transparent 28%),
|
|
linear-gradient(135deg, var(--bg-start) 0%, #1029a0 55%, var(--bg-end) 100%);
|
|
color: var(--text-main);
|
|
}
|
|
.admin-shell {
|
|
max-width: 1220px;
|
|
padding-top: 40px;
|
|
padding-bottom: 40px;
|
|
}
|
|
h2, h3, .h5, p, label, th, td {
|
|
color: var(--text-main);
|
|
}
|
|
h2, h3, .h5, th, .btn, .page-link {
|
|
font-family: var(--font-display);
|
|
}
|
|
h2 {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
letter-spacing: -0.03em;
|
|
margin-bottom: 0.35rem;
|
|
}
|
|
h3, .h5 {
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
p.text-muted, .text-muted {
|
|
color: var(--text-muted) !important;
|
|
}
|
|
.panel-card,
|
|
.table-shell {
|
|
background: var(--surface);
|
|
border: 1px solid var(--line);
|
|
border-radius: 22px;
|
|
box-shadow: 0 25px 60px rgba(3, 11, 25, 0.38);
|
|
backdrop-filter: blur(16px);
|
|
}
|
|
.panel-card {
|
|
margin-top: 1.5rem;
|
|
padding: 1.5rem;
|
|
}
|
|
.table-shell {
|
|
margin-top: 1rem;
|
|
padding: 0.35rem;
|
|
overflow: hidden;
|
|
}
|
|
.alert-info {
|
|
background: rgba(34, 199, 255, 0.12);
|
|
color: var(--text-main);
|
|
border: 1px solid rgba(34, 199, 255, 0.28);
|
|
}
|
|
.btn,
|
|
.page-link {
|
|
border-radius: 14px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.02em;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
|
|
}
|
|
.btn:hover,
|
|
.page-link:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
.btn-outline-primary {
|
|
color: var(--accent-soft, #bbc8fb);
|
|
border-color: rgba(34, 199, 255, 0.35);
|
|
background: rgba(221, 226, 253, 0.06);
|
|
box-shadow: none;
|
|
}
|
|
.btn-outline-primary:hover {
|
|
background: rgba(187, 200, 251, 0.18);
|
|
border-color: rgba(34, 199, 255, 0.55);
|
|
box-shadow: var(--button-shadow);
|
|
}
|
|
.btn-success,
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
|
|
border: 1px solid rgba(221, 226, 253, 0.12);
|
|
box-shadow: var(--button-shadow);
|
|
}
|
|
.btn-success:hover,
|
|
.btn-primary:hover {
|
|
background: linear-gradient(135deg, #bbc8fb 0%, #2c4bd1 100%);
|
|
box-shadow: 0 20px 34px rgba(11, 32, 131, 0.32);
|
|
}
|
|
.btn-danger {
|
|
background: linear-gradient(135deg, #ff7a8b 0%, #f04f74 100%);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
box-shadow: 0 16px 30px rgba(72, 18, 36, 0.28);
|
|
}
|
|
.table {
|
|
margin-bottom: 0;
|
|
--bs-table-bg: transparent;
|
|
--bs-table-striped-bg: rgba(221, 226, 253, 0.06);
|
|
--bs-table-striped-color: var(--text-main);
|
|
--bs-table-hover-bg: rgba(187, 200, 251, 0.12);
|
|
--bs-table-hover-color: var(--text-main);
|
|
color: var(--text-main);
|
|
}
|
|
.table thead th {
|
|
border-bottom-color: rgba(221, 226, 253, 0.18);
|
|
color: var(--accent-soft);
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
font-size: 0.78rem;
|
|
background: rgba(255, 255, 255, 0.02);
|
|
}
|
|
.table td,
|
|
.table th {
|
|
border-color: rgba(143, 232, 255, 0.08);
|
|
vertical-align: middle;
|
|
}
|
|
.page-link {
|
|
background: rgba(255, 255, 255, 0.04);
|
|
color: var(--text-main);
|
|
border-color: rgba(143, 232, 255, 0.12);
|
|
box-shadow: none;
|
|
}
|
|
.page-item.active .page-link {
|
|
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
|
|
border-color: transparent;
|
|
}
|
|
.page-link:hover {
|
|
color: var(--text-main);
|
|
background: rgba(34, 199, 255, 0.12);
|
|
border-color: rgba(34, 199, 255, 0.24);
|
|
}
|
|
canvas {
|
|
filter: drop-shadow(0 10px 25px rgba(34, 199, 255, 0.08));
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container admin-shell">
|
|
<h2>Admin Dashboard</h2>
|
|
<p>Welcome, <?php echo htmlspecialchars($_SESSION['user'] ?? 'Admin'); ?>!</p>
|
|
|
|
<?php if ($message): ?>
|
|
<div class="alert alert-info">
|
|
<?php echo htmlspecialchars($message); ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<div class="panel-card">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h3 class="h5 mb-0">Daily Registrations</h3>
|
|
<button id="downloadChartBtn" class="btn btn-sm btn-outline-primary">Save as Image</button>
|
|
</div>
|
|
<div style="max-width: 600px; margin: auto;">
|
|
<canvas id="registrationsChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h3 class="mt-4">Registered Attendees</h3>
|
|
<a href="export_csv.php" class="btn btn-success">Download CSV</a>
|
|
</div>
|
|
|
|
<div class="table-responsive table-shell">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>First Name</th>
|
|
<th>Last Name</th>
|
|
<th>Email</th>
|
|
<th>Source</th>
|
|
<th>Company</th>
|
|
<th>Registered At</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php if (empty($attendees)): ?>
|
|
<tr>
|
|
<td colspan="8" class="text-center">No attendees found.</td>
|
|
</tr>
|
|
<?php else: ?>
|
|
<?php foreach ($attendees as $attendee): ?>
|
|
<tr>
|
|
<td><?php echo htmlspecialchars($attendee['id']); ?></td>
|
|
<td><?php echo htmlspecialchars($attendee['first_name']); ?></td>
|
|
<td><?php echo htmlspecialchars($attendee['last_name']); ?></td>
|
|
<td><?php echo htmlspecialchars($attendee['email']); ?></td>
|
|
<td><?php echo htmlspecialchars($attendee['how_did_you_hear'] ?? ''); ?></td>
|
|
<td><?php echo htmlspecialchars($attendee['company'] ?? ''); ?></td>
|
|
<td><?php echo htmlspecialchars($attendee['created_at']); ?></td>
|
|
<td>
|
|
<a href="edit_attendee.php?id=<?php echo $attendee['id']; ?>" class="btn btn-sm btn-primary">Edit</a>
|
|
<form action="delete_attendee.php" method="POST" style="display: inline-block;">
|
|
<input type="hidden" name="id" value="<?php echo $attendee['id']; ?>">
|
|
<button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure?')">Delete</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
<?php endif; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<nav aria-label="Page navigation">
|
|
<ul class="pagination justify-content-center">
|
|
<?php if ($page > 1): ?>
|
|
<li class="page-item"><a class="page-link" href="?page=<?php echo $page - 1; ?>">Previous</a></li>
|
|
<?php endif; ?>
|
|
|
|
<?php for ($i = 1; $i <= $total_pages; $i++): ?>
|
|
<li class="page-item <?php if ($i == $page) echo 'active'; ?>"><a class="page-link" href="?page=<?php echo $i; ?>"><?php echo $i; ?></a></li>
|
|
<?php endfor; ?>
|
|
|
|
<?php if ($page < $total_pages): ?>
|
|
<li class="page-item"><a class="page-link" href="?page=<?php echo $page + 1; ?>">Next</a></li>
|
|
<?php endif; ?>
|
|
</ul>
|
|
</nav>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
const ctx = document.getElementById('registrationsChart');
|
|
const registrationsChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: <?php echo $chart_labels; ?>,
|
|
datasets: [{
|
|
label: 'Daily Registrations',
|
|
data: <?php echo $chart_values; ?>,
|
|
backgroundColor: 'rgba(187, 200, 251, 0.18)',
|
|
borderColor: 'rgba(34, 199, 255, 1)',
|
|
borderWidth: 2,
|
|
tension: 0.4,
|
|
fill: true
|
|
}]
|
|
},
|
|
options: {
|
|
scales: {
|
|
x: {
|
|
ticks: { color: '#dde2fd' },
|
|
grid: { color: 'rgba(143, 232, 255, 0.08)' }
|
|
},
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: { color: 'rgba(143, 232, 255, 0.08)' },
|
|
ticks: {
|
|
stepSize: 1,
|
|
color: '#dde2fd'
|
|
}
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: 'User Registrations per Day',
|
|
color: '#f3f9ff'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
document.getElementById('downloadChartBtn').addEventListener('click', function() {
|
|
const link = document.createElement('a');
|
|
link.href = registrationsChart.toBase64Image();
|
|
link.download = 'daily-registrations-chart.png';
|
|
link.click();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|