| .. | |||||
| dashboard.php | |||||
| index.php |
| Server IP : 122.155.15.77 / Your IP : 216.73.216.114 Web Server : Microsoft-IIS/10.0 System : Windows NT IDC-PLESK-01 10.0 build 17763 (Windows Server 2016) AMD64 User : IWPD_391(usr0000329) ( 0) PHP Version : 7.4.33 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : C:/Inetpub/vhosts/watpa.ac.th/events.watpa.ac.th/Epass/admin/ |
Upload File : |
<?php
require_once __DIR__ . '/../lib/session.php';
requireLogin(['admin']);
require "../config/db.php";
if ($role !== 'admin') {
header("Location: ../index.php");
exit;
}
/* ===== FETCH DATA ===== */
$sql = "
SELECT
s.student_class,
a.name AS activity_name,
COUNT(al.id) AS total_done
FROM activity_log al
JOIN students s ON al.user_id = s.id
JOIN activities a ON al.activity_id = a.id
GROUP BY s.student_class, a.name
ORDER BY s.student_class
";
$stmt = $pdo->query($sql);
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
/* ===== FORMAT DATA ===== */
$chartData = [];
$structure = [];
foreach ($rows as $row) {
$class = $row['student_class'];
$activity = $row['activity_name'];
$count = (int)$row['total_done'];
$chartData[$class][$activity] = $count;
if (preg_match('/(M?\d)\/(\d+)/', $class, $m)) {
$level = $m[1];
// Use a Set-style approach: only add if not already present
if (!isset($structure[$level])) {
$structure[$level] = [];
}
if (!in_array($class, $structure[$level], true)) {
$structure[$level][] = $class;
}
}
}
/* sort */
ksort($structure);
foreach ($structure as &$cls) {
// Natural sort so 1/2 < 1/10 correctly
natsort($cls);
$cls = array_values($cls);
}
unset($cls);
/* activities — deduplicated */
$activities = [];
foreach ($chartData as $acts) {
foreach ($acts as $a => $_) {
if (!in_array($a, $activities, true)) {
$activities[] = $a;
}
}
}
sort($activities);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Activity Dashboard</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root {
--primary: #0f172a;
--primary-hover: #1e293b;
--accent: #3b82f6;
--accent-hover: #2563eb;
--bg: #f8fafc;
--card-bg: #ffffff;
--border: #e2e8f0;
--text: #1e293b;
--text-muted: #64748b;
--success: #10b981;
--shadow: 0 1px 3px rgba(0,0,0,0.05);
--shadow-lg: 0 10px 40px rgba(0,0,0,0.08);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.container { max-width: 1400px; margin: 0 auto; }
/* HEADER */
.header {
background: var(--card-bg);
border-radius: 20px;
padding: 32px;
margin-bottom: 24px;
box-shadow: var(--shadow-lg);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.header h1 {
font-size: 32px;
font-weight: 800;
color: var(--primary);
margin-bottom: 8px;
letter-spacing: -0.02em;
}
.header p { color: var(--text-muted); font-size: 16px; }
/* MAIN CARD */
.card {
background: var(--card-bg);
border-radius: 20px;
padding: 32px;
box-shadow: var(--shadow-lg);
}
/* CONTROLS */
.controls { margin-bottom: 32px; }
.control-group { margin-bottom: 20px; }
.control-label {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
margin-bottom: 12px;
display: block;
}
/* LEVEL TABS */
.levels { display: flex; gap: 10px; flex-wrap: wrap; }
.levels button {
padding: 12px 24px;
border-radius: 12px;
border: 2px solid var(--border);
background: var(--bg);
cursor: pointer;
font-weight: 600;
font-size: 15px;
color: var(--text);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
font-family: inherit;
}
.levels button:hover {
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59,130,246,.15);
}
.levels button.active {
background: var(--accent);
color: white;
border-color: var(--accent);
box-shadow: 0 4px 16px rgba(59,130,246,.3);
}
/* CLASS CHIPS */
.classes {
display: flex;
gap: 8px;
flex-wrap: wrap;
min-height: 48px;
align-items: center;
}
.classes button {
padding: 10px 20px;
border-radius: 10px;
border: 2px solid var(--border);
background: white;
cursor: pointer;
font-weight: 600;
font-size: 14px;
color: var(--text);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
font-family: inherit;
}
.classes button:hover {
border-color: var(--primary);
background: var(--primary);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(15,23,42,.2);
}
.classes button.active {
background: var(--primary);
color: white;
border-color: var(--primary);
box-shadow: 0 4px 12px rgba(15,23,42,.25);
}
.empty-state {
color: var(--text-muted);
font-size: 14px;
font-style: italic;
}
/* CHART */
.chart-wrapper {
background: var(--bg);
border-radius: 16px;
padding: 24px;
margin-top: 24px;
border: 2px solid var(--border);
}
.chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.chart-title { font-size: 18px; font-weight: 700; color: var(--primary); }
.view-toggle {
display: flex;
gap: 8px;
background: white;
padding: 4px;
border-radius: 10px;
border: 2px solid var(--border);
}
.view-toggle button {
padding: 8px 16px;
border: none;
border-radius: 8px;
background: transparent;
cursor: pointer;
font-weight: 600;
font-size: 13px;
color: var(--text-muted);
transition: all 0.2s;
font-family: inherit;
}
.view-toggle button.active { background: var(--accent); color: white; }
canvas { max-height: 500px; }
/* STATS */
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.stat-card {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
padding: 20px;
border-radius: 16px;
color: white;
}
.stat-label {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.9;
margin-bottom: 8px;
}
.stat-value { font-size: 32px; font-weight: 800; line-height: 1; }
/* ANIMATIONS */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.card, .header { animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.btn-secondary {
padding: 14px 28px;
border-radius: 12px;
border: 2px solid var(--border);
background: white;
color: var(--primary);
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
}
.btn-secondary:hover {
border-color: var(--primary);
background: var(--primary);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(15,23,42,.2);
}
/* EXPORT BUTTON */
.btn-export {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: 10px;
border: none;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white;
font-weight: 700;
font-size: 14px;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
font-family: inherit;
box-shadow: 0 4px 12px rgba(16,185,129,.3);
}
.btn-export:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(16,185,129,.4);
}
.btn-export:active {
transform: translateY(0);
}
.btn-export svg {
flex-shrink: 0;
}
@media (max-width: 768px) {
body { padding: 12px; }
.header { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; }
.header h1 { font-size: 24px; }
.levels button, .classes button { font-size: 13px; padding: 10px 16px; }
.chart-header { flex-direction: column; align-items: flex-start; gap: 12px; }
}
</style>
</head>
<body>
<div class="container">
<!-- HEADER -->
<div class="header">
<div>
<h1>📊 Activity Dashboard</h1>
<p>Track student activities across all classes and levels</p>
</div>
<button class="btn-secondary" onclick="window.location.href='index.php'">
⚙️ Manage Activities
</button>
</div>
<!-- MAIN CARD -->
<div class="card">
<!-- STATS -->
<div class="stats" id="statsContainer"></div>
<!-- CONTROLS -->
<div class="controls">
<div class="control-group">
<label class="control-label">Select Level</label>
<div class="levels" id="levelTabs">
<button data-level="ALL" class="active">All Levels</button>
<?php foreach ($structure as $lvl => $cls): ?>
<button data-level="<?= htmlspecialchars($lvl) ?>">Level <?= htmlspecialchars($lvl) ?></button>
<?php endforeach; ?>
</div>
</div>
<div class="control-group">
<label class="control-label">Select Class</label>
<div class="classes" id="classChips">
<span class="empty-state">Showing all classes</span>
</div>
</div>
</div>
<!-- CHART -->
<div class="chart-wrapper">
<div class="chart-header">
<div class="chart-title" id="chartTitle">All Classes Overview</div>
<div style="display:flex;gap:12px;align-items:center;flex-wrap:wrap;">
<div class="view-toggle">
<button class="active" data-type="bar">Bar</button>
<button data-type="line">Line</button>
<button data-type="radar">Radar</button>
</div>
<button class="btn-export" id="exportBtn" onclick="exportExcel()">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="7 10 12 15 17 10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</svg>
Export Excel
</button>
</div>
</div>
<canvas id="activityChart"></canvas>
</div>
</div>
</div>
<script>
const rawData = <?= json_encode($chartData) ?>;
const activities = <?= json_encode($activities) ?>;
const structure = <?= json_encode($structure) ?>;
const ctx = document.getElementById('activityChart');
const classBox = document.getElementById('classChips');
const chartTitleEl = document.getElementById('chartTitle');
const statsContainer = document.getElementById('statsContainer');
let chart;
let currentChartType = 'bar';
/* ── current selection state ── */
let state = { level: 'ALL', cls: null };
/* ── color palette ── */
const colors = [
'#3b82f6','#8b5cf6','#ec4899','#f59e0b',
'#10b981','#06b6d4','#6366f1','#f43f5e'
];
/* ── STATS ── */
function updateStats(classes) {
let totalCount = 0;
classes.forEach(c => {
activities.forEach(act => { totalCount += (rawData[c]?.[act] ?? 0); });
});
statsContainer.innerHTML = `
<div class="stat-card">
<div class="stat-label">Total Activities</div>
<div class="stat-value">${totalCount}</div>
</div>
<div class="stat-card" style="background:linear-gradient(135deg,#10b981 0%,#059669 100%)">
<div class="stat-label">Activity Types</div>
<div class="stat-value">${activities.length}</div>
</div>
<div class="stat-card" style="background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%)">
<div class="stat-label">Classes</div>
<div class="stat-value">${classes.length}</div>
</div>`;
}
/* ── BUILD CHART ── */
function buildChart(classes, title) {
chartTitleEl.textContent = title;
const datasets = activities.map((act, idx) => ({
label: act,
data: classes.map(c => rawData[c]?.[act] ?? 0),
backgroundColor: colors[idx % colors.length] + '90',
borderColor: colors[idx % colors.length],
borderWidth: 2,
tension: 0.4,
fill: currentChartType === 'radar'
}));
if (chart) chart.destroy();
chart = new Chart(ctx, {
type: currentChartType,
data: { labels: classes, datasets },
options: {
responsive: true,
maintainAspectRatio: true,
plugins: {
legend: {
position: 'top',
labels: { padding: 16, font: { family: 'Manrope', size: 13, weight: '600' } }
},
tooltip: {
backgroundColor: 'rgba(15,23,42,.95)',
padding: 12,
titleFont: { family: 'Manrope', size: 14, weight: '700' },
bodyFont: { family: 'Manrope', size: 13 },
cornerRadius: 8
}
},
scales: currentChartType !== 'radar' ? {
y: {
beginAtZero: true,
grid: { color: '#e2e8f0' },
ticks: { font: { family: 'Manrope', size: 12 } }
},
x: {
grid: { display: false },
ticks: { font: { family: 'Manrope', size: 12, weight: '600' } }
}
} : {}
}
});
updateStats(classes);
}
/* ── helper: re-render chart from current state ── */
function renderFromState() {
if (state.cls) {
buildChart([state.cls], `${state.cls} Activity Overview`);
} else if (state.level === 'ALL') {
buildChart(Object.keys(rawData), 'All Classes Overview');
} else {
buildChart(structure[state.level] ?? [], `Level ${state.level} Overview`);
}
}
/* ── helper: render class chips for a level ── */
function renderClassChips(lvl) {
classBox.innerHTML = '';
if (lvl === 'ALL') {
classBox.innerHTML = '<span class="empty-state">Showing all classes</span>';
return;
}
const classes = structure[lvl] ?? [];
if (classes.length === 0) {
classBox.innerHTML = '<span class="empty-state">No classes found</span>';
return;
}
classes.forEach(cls => {
const btn = document.createElement('button');
btn.textContent = cls;
if (cls === state.cls) btn.classList.add('active');
btn.addEventListener('click', () => {
/* toggle: click active chip again → deselect */
if (state.cls === cls) {
state.cls = null;
btn.classList.remove('active');
} else {
state.cls = cls;
classBox.querySelectorAll('button').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
}
renderFromState();
});
classBox.appendChild(btn);
});
}
/* ── VIEW TOGGLE ── */
document.querySelectorAll('.view-toggle button').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.view-toggle button').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
currentChartType = btn.dataset.type;
renderFromState();
});
});
/* ── LEVEL CLICK ── */
document.querySelectorAll('#levelTabs button').forEach(btn => {
btn.addEventListener('click', () => {
if (state.level === btn.dataset.level) return; /* nothing to do */
document.querySelectorAll('#levelTabs button').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
state.level = btn.dataset.level;
state.cls = null; /* ← reset class selection on level change */
renderClassChips(state.level);
renderFromState();
});
});
/* ── INITIAL LOAD ── */
renderClassChips('ALL');
buildChart(Object.keys(rawData), 'All Classes Overview');
/* ── EXCEL EXPORT ── */
function exportExcel() {
/* 1. Determine which classes are currently shown */
let classes, sheetTitle;
if (state.cls) {
classes = [state.cls];
sheetTitle = state.cls;
} else if (state.level === 'ALL') {
classes = Object.keys(rawData);
sheetTitle = 'All Classes';
} else {
classes = structure[state.level] ?? [];
sheetTitle = 'Level ' + state.level;
}
const wb = XLSX.utils.book_new();
/* ── Sheet 1: Activity Summary (pivot table style) ── */
// Header row: Class | Activity1 | Activity2 | ... | Total
const summaryHeaders = ['Class', ...activities, 'Total'];
const summaryRows = [summaryHeaders];
let grandTotals = Array(activities.length).fill(0);
classes.forEach(cls => {
const row = [cls];
let rowTotal = 0;
activities.forEach((act, i) => {
const val = rawData[cls]?.[act] ?? 0;
row.push(val);
rowTotal += val;
grandTotals[i] += val;
});
row.push(rowTotal);
summaryRows.push(row);
});
// Grand total row
const grandRow = ['TOTAL', ...grandTotals, grandTotals.reduce((a,b) => a+b, 0)];
summaryRows.push(grandRow);
const wsSummary = XLSX.utils.aoa_to_sheet(summaryRows);
// Column widths
wsSummary['!cols'] = [
{ wch: 14 },
...activities.map(() => ({ wch: 16 })),
{ wch: 10 }
];
// Style header row & total row by setting bold via HTML workaround isn't available in xlsx.js
// We mark them with a note in the cell for reference
XLSX.utils.book_append_sheet(wb, wsSummary, 'Summary');
/* ── Sheet 2: Raw Detail (one row per class per activity) ── */
const detailHeaders = ['Class', 'Activity', 'Count'];
const detailRows = [detailHeaders];
classes.forEach(cls => {
activities.forEach(act => {
const val = rawData[cls]?.[act] ?? 0;
detailRows.push([cls, act, val]);
});
});
const wsDetail = XLSX.utils.aoa_to_sheet(detailRows);
wsDetail['!cols'] = [{ wch: 14 }, { wch: 24 }, { wch: 10 }];
XLSX.utils.book_append_sheet(wb, wsDetail, 'Raw Data');
/* ── Sheet 3: Per-activity totals ── */
const actTotals = [['Activity', 'Total Count', '% of Grand Total']];
const grandTotal = grandTotals.reduce((a,b) => a+b, 0);
activities.forEach((act, i) => {
const pct = grandTotal > 0 ? ((grandTotals[i] / grandTotal) * 100).toFixed(1) + '%' : '0%';
actTotals.push([act, grandTotals[i], pct]);
});
actTotals.push(['TOTAL', grandTotal, '100%']);
const wsAct = XLSX.utils.aoa_to_sheet(actTotals);
wsAct['!cols'] = [{ wch: 24 }, { wch: 14 }, { wch: 16 }];
XLSX.utils.book_append_sheet(wb, wsAct, 'By Activity');
/* ── Download ── */
const now = new Date();
const dateStr = now.toISOString().slice(0, 10);
const safeName = sheetTitle.replace(/[^a-zA-Z0-9_]/g, '_');
const filename = `activity_report_${safeName}_${dateStr}.xlsx`;
XLSX.writeFile(wb, filename);
/* visual feedback */
const btn = document.getElementById('exportBtn');
const orig = btn.innerHTML;
btn.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg> Exported!`;
btn.style.background = 'linear-gradient(135deg,#6366f1 0%,#4f46e5 100%)';
setTimeout(() => {
btn.innerHTML = orig;
btn.style.background = '';
}, 2000);
}
</script>
</body>
</html>| .. | |||||
| dashboard.php | |||||
| index.php |