<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>แดชบอร์ด | ระบบประเมินผล</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
</head>
<body>
<div class="dashboard-container">
<aside class="sidebar">
<div class="sidebar-header">
<i class="fas fa-chart-line"></i>
<h2>ประเมินผล</h2>
</div>
<nav class="sidebar-nav">
<ul>
<li class="active"><a href="#"><i class="fas fa-tachometer-alt"></i><span>แดชบอร์ด</span></a></li>
<li><a href="#"><i class="fas fa-users"></i><span>พนักงาน</span></a></li>
<li><a href="#"><i class="fas fa-file-alt"></i><span>การประเมิน</span></a></li>
<li><a href="#"><i class="fas fa-chart-bar"></i><span>รายงาน</span></a></li>
<li><a href="#"><i class="fas fa-cog"></i><span>ตั้งค่า</span></a></li>
</ul>
</nav>
<div class="sidebar-footer">
<a href="index.html"><i class="fas fa-sign-out-alt"></i><span>ออกจากระบบ</span></a>
</div>
</aside>
<div class="main-content">
<header class="top-nav">
<div class="menu-toggle">
<i class="fas fa-bars" id="menu-toggler"></i>
</div>
<div class="search-box">
<i class="fas fa-search"></i>
<input type="text" placeholder="ค้นหาพนักงาน, รายงาน...">
</div>
<div class="user-profile">
<img src="https://i.pravatar.cc/40" alt="User Avatar">
<span>สมชาย ใจดี</span>
<i class="fas fa-chevron-down"></i>
<div class="user-dropdown">
<a href="#">โปรไฟล์</a>
<a href="#">ตั้งค่า</a>
<a href="index.html">ออกจากระบบ</a>
</div>
</div>
</header>
<main>
<h1>ภาพรวมระบบ</h1>
<div class="cards-grid">
<div class="card">
<div class="card-icon blue"><i class="fas fa-users"></i></div>
<div class="card-info">
<h4>พนักงานทั้งหมด</h4>
<p>150 คน</p>
</div>
</div>
<div class="card">
<div class="card-icon green"><i class="fas fa-check-circle"></i></div>
<div class="card-info">
<h4>ประเมินแล้ว</h4>
<p>125 คน</p>
</div>
</div>
<div class="card">
<div class="card-icon orange"><i class="fas fa-clock"></i></div>
<div class="card-info">
<h4>รอการประเมิน</h4>
<p>25 คน</p>
</div>
</div>
<div class="card">
<div class="card-icon red"><i class="fas fa-exclamation-triangle"></i></div>
<div class="card-info">
<h4>ต่ำกว่าเกณฑ์</h4>
<p>8 คน</p>
</div>
</div>
</div>
<div class="charts-grid">
<div class="chart-container">
<h3>คะแนนประเมินรายแผนก</h3>
<canvas id="departmentChart"></canvas>
</div>
<div class="chart-container">
<h3>แนวโน้มผลการประเมิน (รายไตรมาส)</h3>
<canvas id="trendChart"></canvas>
</div>
</div>
<!-- ตารางตัวอย่าง -->
<div class="table-container">
<h2>รายชื่อพนักงาน</h2>
<table>
<thead>
<tr>
<th>ชื่อ</th>
<th>อีเมล</th>
<th>สถานะ</th>
</tr>
</thead>
<tbody>
<tr>
<td>สมชาย ใจดี</td>
<td>somchai@email.com</td>
<td>ใช้งาน</td>
</tr>
<tr>
<td>สมหญิง สวยงาม</td>
<td>somying@email.com</td>
<td>ระงับ</td>
</tr>
</tbody>
</table>
</div>
</main>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="script.js"></script>
</body>
</html>