<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard - Performance Evaluation</title>
<link rel="stylesheet" href="assets/style.css">
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@400;600&display=swap" rel="stylesheet">
<script defer src="assets/dashboard.js"></script>
</head>
<body>
<div class="login-container" id="login-container">
<form class="login-form" id="login-form">
<h2>เข้าสู่ระบบ</h2>
<label for="username">ชื่อผู้ใช้</label>
<input type="text" id="username" name="username" required>
<label for="password">รหัสผ่าน</label>
<input type="password" id="password" name="password" required>
<button type="submit">เข้าสู่ระบบ</button>
</form>
</div>
<div class="dashboard" id="dashboard" style="display:none;">
<aside class="sidebar">
<div class="sidebar-logo">PE</div>
<nav>
<ul>
<li><span class="icon">🏠</span> <span class="label">หน้าหลัก</span></li>
<li><span class="icon">👤</span> <span class="label">โปรไฟล์</span></li>
<li><span class="icon">📊</span> <span class="label">สถิติ</span></li>
<li><span class="icon">⚙️</span> <span class="label">ตั้งค่า</span></li>
</ul>
</nav>
</aside>
<div class="main-content">
<header class="topbar">
<div class="topbar-title">ระบบประเมินผลการปฏิบัติงาน</div>
<div class="topbar-user">สวัสดี, <span id="user-name">Admin</span></div>
</header>
<section class="cards">
<div class="card">
<h3>จำนวนผู้ใช้งาน</h3>
<p id="user-count">120</p>
</div>
<div class="card">
<h3>ประเมินผลล่าสุด</h3>
<p id="last-eval">24 ก.ค. 2568</p>
</div>
<div class="card">
<h3>คะแนนเฉลี่ย</h3>
<p id="avg-score">87.5</p>
</div>
</section>
<section class="charts">
<div class="chart-card">
<h4>กราฟคะแนนรายเดือน</h4>
<canvas id="chart1"></canvas>
</div>
<div class="chart-card">
<h4>กราฟการประเมินแยกแผนก</h4>
<canvas id="chart2"></canvas>
</div>
</section>
<section class="user-table-section">
<h4>ข้อมูลผู้ใช้งาน</h4>
<div class="table-responsive">
<table class="user-table">
<thead>
<tr>
<th>ชื่อ-นามสกุล</th>
<th>ตำแหน่ง</th>
<th>แผนก</th>
<th>คะแนนล่าสุด</th>
<th>สถานะ</th>
</tr>
</thead>
<tbody id="user-table-body">
<!-- Data will be injected by JS -->
</tbody>
</table>
</div>
</section>
</div>
</div>
</body>
</html>