<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CMMS Pro - แดชบอร์ดภาพรวม</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
}
.card-shadow {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.card-shadow-lg {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.stat-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.15);
}
.alert-item {
animation: slideIn 0.5s ease forwards;
opacity: 0;
}
@keyframes slideIn {
from {
transform: translateX(20px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.progress-ring {
transform: rotate(-90deg);
}
.nav-item {
position: relative;
transition: all 0.3s ease;
}
.nav-item::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background-color: #3B82F6;
transition: width 0.3s ease;
}
.nav-item:hover::after,
.nav-item.active::after {
width: 100%;
}
.pulse-dot {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
}
}
</style>
</head>
<body class="bg-gray-100">
<!-- Header Navigation -->
<header class="bg-white shadow-sm border-b border-gray-200">
<div class="container mx-auto px-4 py-3">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-8">
<div class="flex items-center space-x-2">
<i class="fas fa-industry text-blue-600 text-2xl"></i>
<h1 class="text-xl font-bold text-gray-800">CMMS Pro</h1>
</div>
<nav class="hidden md:flex space-x-6">
<a href="#" class="nav-item active text-gray-700 hover:text-blue-600 font-medium">แดชบอร์ด</a>
<a href="#" class="nav-item text-gray-700 hover:text-blue-600 font-medium">อุปกรณ์</a>
<a href="#" class="nav-item text-gray-700 hover:text-blue-600 font-medium">ใบสั่งงาน</a>
<a href="#" class="nav-item text-gray-700 hover:text-blue-600 font-medium">บำรุงรักษา</a>
<a href="#" class="nav-item text-gray-700 hover:text-blue-600 font-medium">รายงาน</a>
</nav>
</div>
<div class="flex items-center space-x-4">
<button class="relative p-2 text-gray-600 hover:text-gray-800">
<i class="fas fa-bell text-xl"></i>
<span class="absolute top-0 right-0 h-2 w-2 bg-red-500 rounded-full pulse-dot"></span>
</button>
<div class="flex items-center space-x-2">
<img src="https://picsum.photos/seed/user123/40/40.jpg" alt="User" class="h-8 w-8 rounded-full">
<span class="text-sm font-medium text-gray-700 hidden md:block">ผู้ดูแลระบบ</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto px-4 py-6">
<!-- Page Title and Action Buttons -->
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800 mb-4 md:mb-0">แดชบอร์ดภาพรวม</h2>
<div class="flex space-x-3">
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center space-x-2 transition-colors">
<i class="fas fa-plus"></i>
<span>ใบสั่งงานใหม่</span>
</button>
<button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg flex items-center space-x-2 transition-colors">
<i class="fas fa-calendar-alt"></i>
<span>กำหนดการบำรุงรักษา</span>
</button>
</div>
</div>
<!-- Dashboard Overview Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
<div class="stat-card bg-white rounded-lg p-6 card-shadow">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-500 text-sm mb-1">อัตราการใช้งานอุปกรณ์</p>
<p class="text-3xl font-bold text-gray-800">94.2%</p>
<p class="text-green-600 text-sm mt-2">
<i class="fas fa-arrow-up"></i> 2.5% จากเดือนที่แล้ว
</p>
</div>
<div class="bg-blue-100 p-3 rounded-lg">
<i class="fas fa-chart-line text-blue-600 text-xl"></i>
</div>
</div>
</div>
<div class="stat-card bg-white rounded-lg p-6 card-shadow">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-500 text-sm mb-1">ใบสั่งงานที่กำลังดำเนินการ</p>
<p class="text-3xl font-bold text-gray-800">23</p>
<p class="text-yellow-600 text-sm mt-2">
<i class="fas fa-clock"></i> 5 รายการใกล้กำหนด
</p>
</div>
<div class="bg-yellow-100 p-3 rounded-lg">
<i class="fas fa-tasks text-yellow-600 text-xl"></i>
</div>
</div>
</div>
<div class="stat-card bg-white rounded-lg p-6 card-shadow">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-500 text-sm mb-1">งานที่เลยกำหนด</p>
<p class="text-3xl font-bold text-gray-800">7</p>
<p class="text-red-600 text-sm mt-2">
<i class="fas fa-exclamation-triangle"></i> ต้องดำเนินการทันที
</p>
</div>
<div class="bg-red-100 p-3 rounded-lg">
<i class="fas fa-exclamation-circle text-red-600 text-xl"></i>
</div>
</div>
</div>
<div class="stat-card bg-white rounded-lg p-6 card-shadow">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-500 text-sm mb-1">การแจ้งเตือนขั้นสูง</p>
<p class="text-3xl font-bold text-gray-800">3</p>
<p class="text-orange-600 text-sm mt-2">
<i class="fas fa-bell"></i> ตรวจสอบล่าสุด 10 นาที
</p>
</div>
<div class="bg-orange-100 p-3 rounded-lg">
<i class="fas fa-bell text-orange-600 text-xl"></i>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Equipment Status -->
<div class="lg:col-span-2 bg-white rounded-lg p-6 card-shadow">
<h3 class="text-lg font-semibold text-gray-800 mb-4">สถานะอุปกรณ์</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<div class="flex justify-between items-center mb-4">
<h4 class="text-gray-700 font-medium">ภาพรวมอุปกรณ์</h4>
<span class="text-2xl font-bold text-gray-800">6</span>
</div>
<div class="space-y-3">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
<span class="text-gray-600">กำลังทำงาน</span>
</div>
<span class="font-semibold text-gray-800">3</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-3 h-3 bg-yellow-500 rounded-full mr-2"></div>
<span class="text-gray-600">กำลังบำรุงรักษา</span>
</div>
<span class="font-semibold text-gray-800">2</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-3 h-3 bg-gray-500 rounded-full mr-2"></div>
<span class="text-gray-600">ออฟไลน์</span>
</div>
<span class="font-semibold text-gray-800">1</span>
</div>
</div>
</div>
<div>
<canvas id="equipmentChart" width="200" height="200"></canvas>
</div>
</div>
<div class="mt-6">
<h4 class="text-gray-700 font-medium mb-3">รายการอุปกรณ์</h4>
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-gray-200">
<th class="text-left py-2 text-gray-600">อุปกรณ์</th>
<th class="text-left py-2 text-gray-600">สถานะ</th>
<th class="text-left py-2 text-gray-600">ประสิทธิภาพ</th>
<th class="text-left py-2 text-gray-600">การดำเนินการ</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-100">
<td class="py-3">เครื่องจักร CNC-01</td>
<td><span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">กำลังทำงาน</span></td>
<td>96%</td>
<td><button class="text-blue-600 hover:text-blue-800"><i class="fas fa-eye"></i></button></td>
</tr>
<tr class="border-b border-gray-100">
<td class="py-3">เครื่องกดไฮดรอลิก</td>
<td><span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">บำรุงรักษา</span></td>
<td>-</td>
<td><button class="text-blue-600 hover:text-blue-800"><i class="fas fa-eye"></i></button></td>
</tr>
<tr class="border-b border-gray-100">
<td class="py-3">เครื่องตัดเลเซอร์</td>
<td><span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">กำลังทำงาน</span></td>
<td>92%</td>
<td><button class="text-blue-600 hover:text-blue-800"><i class="fas fa-eye"></i></button></td>
</tr>
<tr class="border-b border-gray-100">
<td class="py-3">เครื่องขัดขัด</td>
<td><span class="px-2 py-1 bg-gray-100 text-gray-800 rounded-full text-xs">ออฟไลน์</span></td>
<td>-</td>
<td><button class="text-blue-600 hover:text-blue-800"><i class="fas fa-eye"></i></button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- System Alerts -->
<div class="bg-white rounded-lg p-6 card-shadow">
<h3 class="text-lg font-semibold text-gray-800 mb-4">การแจ้งเตือนระบบ</h3>
<div class="space-y-3">
<div class="alert-item border-l-4 border-red-500 bg-red-50 p-3 rounded" style="animation-delay: 0.1s">
<div class="flex items-start">
<i class="fas fa-exclamation-circle text-red-500 mt-1 mr-3"></i>
<div>
<p class="font-medium text-gray-800">ความดันไฮดรอลิกผิดปกติ</p>
<p class="text-sm text-gray-600 mt-1">เครื่องกดไฮดรอลิก - ความดันสูงเกินกำหนด</p>
<p class="text-xs text-gray-500 mt-1">10 นาทีที่แล้ว</p>
</div>
</div>
</div>
<div class="alert-item border-l-4 border-orange-500 bg-orange-50 p-3 rounded" style="animation-delay: 0.2s">
<div class="flex items-start">
<i class="fas fa-exclamation-triangle text-orange-500 mt-1 mr-3"></i>
<div>
<p class="font-medium text-gray-800">อุณหภูมิสูง</p>
<p class="text-sm text-gray-600 mt-1">เครื่องจักร CNC-01 - อุณหภูมิมอเตอร์สูง</p>
<p class="text-xs text-gray-500 mt-1">25 นาทีที่แล้ว</p>
</div>
</div>
</div>
<div class="alert-item border-l-4 border-yellow-500 bg-yellow-50 p-3 rounded" style="animation-delay: 0.3s">
<div class="flex items-start">
<i class="fas fa-info-circle text-yellow-500 mt-1 mr-3"></i>
<div>
<p class="font-medium text-gray-800">กำหนดการบำรุงรักษาใกล้ถึง</p>
<p class="text-sm text-gray-600 mt-1">เครื่องตัดเลเซอร์ - ต้องเปลี่ยนใบมีดในอีก 2 วัน</p>
<p class="text-xs text-gray-500 mt-1">1 ชั่วโมงที่แล้ว</p>
</div>
</div>
</div>
<div class="alert-item border-l-4 border-blue-500 bg-blue-50 p-3 rounded" style="animation-delay: 0.4s">
<div class="flex items-start">
<i class="fas fa-check-circle text-blue-500 mt-1 mr-3"></i>
<div>
<p class="font-medium text-gray-800">บำรุงรักษาเสร็จสิ้น</p>
<p class="text-sm text-gray-600 mt-1">เครื่องขัดขัด - ทำความสะอาดระบบเสร็จสิ้น</p>
<p class="text-xs text-gray-500 mt-1">2 ชั่วโมงที่แล้ว</p>
</div>
</div>
</div>
</div>
<button class="w-full mt-4 text-center text-blue-600 hover:text-blue-800 font-medium text-sm">
ดูการแจ้งเตือนทั้งหมด <i class="fas fa-arrow-right ml-1"></i>
</button>
</div>
</div>
<!-- Recent Activities -->
<div class="mt-6 bg-white rounded-lg p-6 card-shadow">
<h3 class="text-lg font-semibold text-gray-800 mb-4">กิจกรรมล่าสุด</h3>
<div class="overflow-x-auto">
<table class="w-full">
<thead>
<tr class="border-b border-gray-200">
<th class="text-left py-2 text-gray-600">เวลา</th>
<th class="text-left py-2 text-gray-600">กิจกรรม</th>
<th class="text-left py-2 text-gray-600">ผู้ดำเนินการ</th>
<th class="text-left py-2 text-gray-600">สถานะ</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-100">
<td class="py-3 text-sm">09:45</td>
<td class="py-3">สร้างใบสั่งงาน #WO-2023-0142</td>
<td class="py-3">สมชาย ใจดี</td>
<td><span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs">เปิดใหม่</span></td>
</tr>
<tr class="border-b border-gray-100">
<td class="py-3 text-sm">09:30</td>
<td class="py-3">ดำเนินการบำรุงรักษาตามกำหนดการ</td>
<td class="py-3">วิชัย รักงาน</td>
<td><span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">เสร็จสิ้น</span></td>
</tr>
<tr class="border-b border-gray-100">
<td class="py-3 text-sm">09:15</td>
<td class="py-3">อัปเดตสถานะอุปกรณ์ CNC-01</td>
<td class="py-3">ระบบอัตโนมัติ</td>
<td><span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">กำลังทำงาน</span></td>
</tr>
<tr class="border-b border-gray-100">
<td class="py-3 text-sm">08:45</td>
<td class="py-3">ปิดใบสั่งงาน #WO-2023-0141</td>
<td class="py-3">สมชาย ใจดี</td>
<td><span class="px-2 py-1 bg-gray-100 text-gray-800 rounded-full text-xs">ปิดแล้ว</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
<script>
// Equipment Status Chart
const ctx = document.getElementById('equipmentChart').getContext('2d');
const equipmentChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['กำลังทำงาน', 'กำลังบำรุงรักษา', 'ออฟไลน์'],
datasets: [{
data: [3, 2, 1],
backgroundColor: [
'#10B981',
'#F59E0B',
'#6B7280'
],
borderWidth: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom',
labels: {
padding: 15,
font: {
size: 12
}
}
}
},
cutout: '70%'
}
});
// Simulate real-time updates
setInterval(() => {
// Update a random stat
const stats = document.querySelectorAll('.stat-card p.text-3xl');
const randomStat = Math.floor(Math.random() * stats.length);
const currentValue = parseFloat(stats[randomStat].textContent);
if (randomStat === 0) { // Equipment utilization
const newValue = (Math.random() * 5 + 92).toFixed(1);
stats[randomStat].textContent = newValue + '%';
} else if (randomStat === 1) { // Active work orders
const change = Math.random() > 0.5 ? 1 : -1;
stats[randomStat].textContent = Math.max(0, currentValue + change);
}
}, 5000);
</script>
</body>
</html>