<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CMMS Manufacturing Platform</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">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}
.sidebar {
width: 256px;
background: white;
border-right: 1px solid #e5e7eb;
display: flex;
flex-direction: column;
height: 100vh;
position: fixed;
left: 0;
top: 0;
}
.main-content {
margin-left: 256px;
background: #f9fafb;
min-height: 100vh;
}
.nav-item {
padding: 12px;
border-radius: 8px;
margin-bottom: 4px;
cursor: pointer;
transition: all 0.2s;
}
.nav-item:hover {
background: #f3f4f6;
}
.nav-item.active {
background: #eff6ff;
color: #2563eb;
}
.kpi-card {
border-radius: 12px;
padding: 24px;
border: 1px solid;
}
.progress-bar {
width: 100%;
height: 8px;
background: rgba(0, 0, 0, 0.1);
border-radius: 9999px;
overflow: hidden;
}
.progress-fill {
height: 100%;
border-radius: 9999px;
transition: width 0.3s;
}
.equipment-card {
border-radius: 8px;
overflow: hidden;
border: 1px solid;
}
.alert-card {
padding: 16px;
border-radius: 8px;
border: 1px solid;
margin-bottom: 16px;
}
</style>
</head>
<body>
<!-- Sidebar -->
<div class="sidebar">
<!-- Logo -->
<div class="p-4 border-b border-gray-200">
<div class="flex items-center gap-2">
<div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center">
<i class="fas fa-wrench text-white text-xl"></i>
</div>
<div>
<h1 class="font-bold text-gray-900">CMMS Pro</h1>
<p class="text-xs text-gray-500">Manufacturing Suite</p>
</div>
</div>
</div>
<!-- Stats -->
<div class="p-4 grid grid-cols-3 gap-2 border-b border-gray-200">
<div class="text-center">
<div class="text-2xl font-bold text-red-500">3</div>
<div class="text-xs text-gray-500">Active Alerts</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-green-500">94.2%</div>
<div class="text-xs text-gray-500">Uptime</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-blue-500">87%</div>
<div class="text-xs text-gray-500">Efficiency</div>
</div>
</div>
<!-- Navigation -->
<div class="flex-1 overflow-y-auto p-3">
<div class="text-xs font-semibold text-gray-400 mb-2 px-2">MAIN NAVIGATION</div>
<div class="nav-item active">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<i class="fas fa-chart-line w-5"></i>
<div class="text-left">
<div class="text-sm font-medium">Dashboard</div>
<div class="text-xs text-gray-500">Overview & Analytics</div>
</div>
</div>
<i class="fas fa-chevron-right text-xs"></i>
</div>
</div>
<div class="nav-item text-gray-700">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<i class="fas fa-box w-5"></i>
<div class="text-left">
<div class="text-sm font-medium">Equipment</div>
<div class="text-xs text-gray-500">Asset Management</div>
</div>
</div>
<span class="text-xs bg-gray-200 text-gray-600 px-2 py-0.5 rounded">Soon</span>
</div>
</div>
<div class="nav-item text-gray-700">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<i class="fas fa-wrench w-5"></i>
<div class="text-left">
<div class="text-sm font-medium">Work Orders</div>
<div class="text-xs text-gray-500">Task Management</div>
</div>
</div>
<i class="fas fa-chevron-right text-xs"></i>
</div>
</div>
<div class="nav-item text-gray-700">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<i class="fas fa-calendar w-5"></i>
<div class="text-left">
<div class="text-sm font-medium">Maintenance</div>
<div class="text-xs text-gray-500">Planning & Scheduling</div>
</div>
</div>
<span class="text-xs bg-gray-200 text-gray-600 px-2 py-0.5 rounded">Soon</span>
</div>
</div>
<div class="nav-item text-gray-700">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<i class="fas fa-warehouse w-5"></i>
<div class="text-left">
<div class="text-sm font-medium">Inventory</div>
<div class="text-xs text-gray-500">Parts & Supplies</div>
</div>
</div>
<i class="fas fa-chevron-right text-xs"></i>
</div>
</div>
<div class="nav-item text-gray-700">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<i class="fas fa-file-alt w-5"></i>
<div class="text-left">
<div class="text-sm font-medium">Repair Dossiers</div>
<div class="text-xs text-gray-500">Technical Docs</div>
</div>
</div>
<i class="fas fa-chevron-right text-xs"></i>
</div>
</div>
</div>
<!-- System Status -->
<div class="p-4 border-t border-gray-200">
<div class="text-xs font-semibold text-gray-700 mb-2">System Status</div>
<div class="flex items-center justify-between text-xs mb-1">
<span class="text-gray-600 flex items-center gap-1">
<div class="w-2 h-2 bg-green-500 rounded-full"></div> Healthy
</span>
</div>
<div class="space-y-1 text-xs">
<div class="flex justify-between">
<span class="text-gray-600">Security</span>
<span class="text-green-600 font-medium">Active</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Performance</span>
<span class="text-green-600 font-medium">Optimal</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Alerts</span>
<span class="text-red-600 font-medium">3 Active</span>
</div>
</div>
</div>
<!-- User Profile -->
<div class="p-4 border-t border-gray-200">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white font-semibold">
JD
</div>
<div class="flex-1">
<div class="text-sm font-medium text-gray-900">John Doe</div>
<div class="text-xs text-gray-500">Maintenance Manager</div>
</div>
<i class="fas fa-chevron-right text-xs text-gray-400"></i>
</div>
</div>
</div>
<!-- Main Content -->
<div class="main-content">
<!-- Header -->
<div class="bg-white border-b border-gray-200 p-4">
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<div>
<h2 class="text-2xl font-bold text-gray-900">Manufacturing Operations</h2>
<p class="text-sm text-gray-500">Real-time Production Monitoring</p>
</div>
<div class="flex items-center gap-2 text-sm">
<div class="w-2 h-2 bg-green-500 rounded-full"></div>
<span class="text-gray-600">System Online</span>
</div>
<div class="text-xs text-gray-500">Last sync: 30 seconds ago</div>
</div>
<div class="flex items-center gap-3">
<div class="relative">
<i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm"></i>
<input type="text" placeholder="Search equipment, work orders, technicians..." class="pl-9 pr-4 py-2 border border-gray-300 rounded-lg text-sm" style="width: 320px;" />
</div>
<div class="text-sm font-medium text-green-600">94.2% Uptime</div>
<button class="relative p-2 hover:bg-gray-100 rounded-lg">
<i class="fas fa-bell text-gray-600"></i>
<span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
</button>
<button class="p-2 hover:bg-gray-100 rounded-lg">
<i class="fas fa-cog text-gray-600"></i>
</button>
<div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white font-semibold">
JD
</div>
</div>
</div>
</div>
<!-- Dashboard Content -->
<div class="p-6">
<div class="mb-6">
<div class="flex items-center justify-between mb-4">
<div>
<h3 class="text-xl font-bold text-gray-900">Dashboard Overview</h3>
<p class="text-sm text-gray-500">Monitor your manufacturing operations in real-time</p>
</div>
<div class="flex gap-2">
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg text-sm font-medium hover:bg-blue-600">
+ New Work Order
</button>
<button class="px-4 py-2 bg-green-500 text-white rounded-lg text-sm font-medium hover:bg-green-600">
Schedule Maintenance
</button>
<button class="px-4 py-2 bg-orange-500 text-white rounded-lg text-sm font-medium hover:bg-orange-600">
Inventory Check
</button>
<button class="px-4 py-2 bg-gray-700 text-white rounded-lg text-sm font-medium hover:bg-gray-800">
Generate Report
</button>
</div>
</div>
<!-- KPI Cards -->
<div class="grid grid-cols-4 gap-4 mb-6">
<!-- Equipment Uptime -->
<div class="kpi-card bg-gradient-to-br from-green-50 to-green-100 border-green-200">
<div class="flex items-start justify-between mb-4">
<div>
<div class="text-sm text-green-700 mb-1">Equipment Uptime 95%</div>
<div class="text-4xl font-bold text-gray-900">94.2%</div>
<div class="text-sm text-gray-600 mt-1">Overall equipment effectiveness</div>
</div>
<div class="w-12 h-12 bg-green-500 rounded-xl flex items-center justify-center">
<i class="fas fa-chart-line text-white text-xl"></i>
</div>
</div>
<div class="flex items-center gap-2 text-sm text-green-700 mb-2">
<i class="fas fa-arrow-trend-up"></i>
<span>+2.1% vs last week</span>
</div>
<div class="progress-bar bg-green-200">
<div class="progress-fill bg-green-500" style="width: 94%;"></div>
</div>
<div class="flex items-center justify-between mt-2">
<span class="text-xs text-gray-600">Performance</span>
<span class="text-xs font-medium text-green-700">Excellent</span>
</div>
</div>
<!-- Active Work Orders -->
<div class="kpi-card bg-gradient-to-br from-blue-50 to-blue-100 border-blue-200">
<div class="flex items-start justify-between mb-4">
<div>
<div class="text-sm text-blue-700 mb-1">Active Work Orders < 30</div>
<div class="text-4xl font-bold text-gray-900">23</div>
<div class="text-sm text-gray-600 mt-1">Currently in progress</div>
</div>
<div class="w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center">
<i class="fas fa-wrench text-white text-xl"></i>
</div>
</div>
<div class="flex items-center gap-2 text-sm text-blue-700 mb-2">
<i class="fas fa-arrow-trend-up"></i>
<span>-3 vs last week</span>
</div>
<div class="progress-bar bg-blue-200">
<div class="progress-fill bg-blue-500" style="width: 76%;"></div>
</div>
<div class="flex items-center justify-between mt-2">
<span class="text-xs text-gray-600">Performance</span>
<span class="text-xs font-medium text-blue-700">Good</span>
</div>
</div>
<!-- Overdue Tasks -->
<div class="kpi-card bg-gradient-to-br from-orange-50 to-orange-100 border-orange-200">
<div class="flex items-start justify-between mb-4">
<div>
<div class="text-sm text-orange-700 mb-1">Overdue Tasks < 5</div>
<div class="text-4xl font-bold text-gray-900">7</div>
<div class="text-sm text-gray-600 mt-1">Require immediate attention</div>
</div>
<div class="w-12 h-12 bg-orange-500 rounded-xl flex items-center justify-center">
<i class="fas fa-exclamation-triangle text-white text-xl"></i>
</div>
</div>
<div class="flex items-center gap-2 text-sm text-orange-700 mb-2">
<i class="fas fa-arrow-trend-up"></i>
<span>+2 vs last week</span>
</div>
<div class="progress-bar bg-orange-200">
<div class="progress-fill bg-orange-500" style="width: 70%;"></div>
</div>
<div class="flex items-center justify-between mt-2">
<span class="text-xs text-gray-600">Performance</span>
<span class="text-xs font-medium text-orange-700">Needs Attention</span>
</div>
</div>
<!-- Critical Alerts -->
<div class="kpi-card bg-gradient-to-br from-red-50 to-red-100 border-red-200">
<div class="flex items-start justify-between mb-4">
<div>
<div class="text-sm text-red-700 mb-1">Critical Alerts = 0</div>
<div class="text-4xl font-bold text-gray-900">3</div>
<div class="text-sm text-gray-600 mt-1">High priority issues</div>
</div>
<div class="w-12 h-12 bg-red-500 rounded-xl flex items-center justify-center">
<i class="fas fa-bell text-white text-xl"></i>
</div>
</div>
<div class="flex items-center gap-2 text-sm text-red-700 mb-2">
<i class="fas fa-arrow-trend-up"></i>
<span>-1 vs last week</span>
</div>
<div class="progress-bar bg-red-200">
<div class="progress-fill bg-red-500" style="width: 100%;"></div>
</div>
<div class="flex items-center justify-between mt-2">
<span class="text-xs text-gray-600">Performance</span>
<span class="text-xs font-medium text-red-700">Critical</span>
</div>
</div>
</div>
<!-- Equipment Status & Alerts -->
<div class="grid grid-cols-3 gap-6">
<!-- Equipment Status -->
<div class="col-span-2 bg-white rounded-xl border border-gray-200 p-6">
<div class="flex items-center justify-between mb-6">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center">
<i class="fas fa-chart-line text-white"></i>
</div>
<div>
<h4 class="font-bold text-gray-900">Equipment Status</h4>
<p class="text-sm text-gray-500">Real-time monitoring of all manufacturing equipment</p>
</div>
</div>
<div class="flex items-center gap-2">
<div class="relative">
<i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
<input type="text" placeholder="Search equipment..." class="pl-9 pr-4 py-1.5 border border-gray-300 rounded-lg text-sm" />
</div>
<select class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm">
<option>All Equipment (6)</option>
</select>
</div>
</div>
<!-- Status Overview -->
<div class="grid grid-cols-4 gap-3 mb-6">
<div class="text-center p-4 bg-gray-50 rounded-lg">
<div class="text-3xl font-bold text-gray-900">6</div>
<div class="text-sm text-gray-500 mt-1">Total</div>
</div>
<div class="text-center p-4 bg-green-50 rounded-lg border border-green-200">
<div class="text-3xl font-bold text-green-600">3</div>
<div class="text-sm text-green-700 mt-1">Operational</div>
</div>
<div class="text-center p-4 bg-yellow-50 rounded-lg border border-yellow-200">
<div class="text-3xl font-bold text-yellow-600">2</div>
<div class="text-sm text-yellow-700 mt-1">Maintenance</div>
</div>
<div class="text-center p-4 bg-red-50 rounded-lg border border-red-200">
<div class="text-3xl font-bold text-red-600">1</div>
<div class="text-sm text-red-700 mt-1">Offline</div>
</div>
</div>
<!-- Equipment Cards -->
<div class="grid grid-cols-3 gap-4">
<div class="equipment-card border-green-200 bg-green-50">
<div class="h-32 bg-gray-800 flex items-center justify-center">
<div class="text-gray-400 text-sm">Equipment Image</div>
</div>
<div class="p-4">
<div class="flex items-center gap-2 mb-2">
<div class="w-2 h-2 bg-green-500 rounded-full"></div>
<span class="text-xs font-medium text-green-700">Operational</span>
</div>
<h5 class="font-bold text-gray-900">CNC Machine #1</h5>
</div>
</div>
<div class="equipment-card border-yellow-200 bg-yellow-50">
<div class="h-32 bg-gray-800 flex items-center justify-center">
<div class="text-gray-400 text-sm">Equipment Image</div>
</div>
<div class="p-4">
<div class="flex items-center gap-2 mb-2">
<div class="w-2 h-2 bg-yellow-500 rounded-full"></div>
<span class="text-xs font-medium text-yellow-700">Maintenance</span>
</div>
<h5 class="font-bold text-gray-900">Hydraulic Press #2</h5>
</div>
</div>
<div class="equipment-card border-green-200 bg-green-50">
<div class="h-32 bg-gray-800 flex items-center justify-center">
<div class="text-gray-400 text-sm">Equipment Image</div>
</div>
<div class="p-4">
<div class="flex items-center gap-2 mb-2">
<div class="w-2 h-2 bg-green-500 rounded-full"></div>
<span class="text-xs font-medium text-green-700">Operational</span>
</div>
<h5 class="font-bold text-gray-900">Conveyor System #1</h5>
</div>
</div>
</div>
</div>
<!-- System Alerts -->
<div class="bg-white rounded-xl border border-gray-200 p-6">
<div class="flex items-center justify-between mb-6">
<div>
<h4 class="font-bold text-gray-900">System Alerts</h4>
<p class="text-sm text-gray-500">Recent alerts and notifications</p>
</div>
<button class="text-gray-400 hover:text-gray-600">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
<div>
<div class="alert-card bg-red-50 border-red-200">
<div class="flex items-start gap-3">
<div class="w-10 h-10 bg-red-500 rounded-lg flex items-center justify-center flex-shrink-0">
<i class="fas fa-exclamation-triangle text-white"></i>
</div>
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2 mb-1">
<h5 class="font-semibold text-gray-900 text-sm">Hydraulic Press #2 Pressure Drop</h5>
<span class="px-2 py-0.5 bg-red-500 text-white text-xs rounded-full font-medium">Active</span>
</div>
<p class="text-sm text-gray-600 mb-2">Pressure has dropped below safe operating levels</p>
<div class="flex items-center justify-between text-xs">
<span class="text-gray-500">Hydraulic Press #2</span>
<span class="text-gray-500">2 minutes ago</span>
</div>
</div>
</div>
</div>
<div class="alert-card bg-orange-50 border-orange-200">
<div class="flex items-start gap-3">
<div class="w-10 h-10 bg-orange-500 rounded-lg flex items-center justify-center flex-shrink-0">
<i class="fas fa-calendar text-white"></i>
</div>
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2 mb-1">
<h5 class="font-semibold text-gray-900 text-sm">Scheduled Maintenance Due</h5>
<span class="px-2 py-0.5 bg-orange-500 text-white text-xs rounded-full font-medium">Active</span>
</div>
<p class="text-sm text-gray-600 mb-2">CNC Machine #1 maintenance is due in 2 days</p>
<div class="flex items-center justify-between text-xs">
<span class="text-gray-500">CNC Machine #1</span>
<span class="text-gray-500">15 minutes ago</span>
</div>
</div>
</div>
</div>
<div class="alert-card bg-blue-50 border-blue-200">
<div class="flex items-start gap-3">
<div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center flex-shrink-0">
<i class="fas fa-cog text-white"></i>
</div>
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2 mb-1">
<h5 class="font-semibold text-gray-900 text-sm">Software Update Available</h5>
<span class="px-2 py-0.5 bg-blue-500 text-white text-xs rounded-full font-medium">Active</span>
</div>
<p class="text-sm text-gray-600 mb-2">New firmware version available for Welding Robot #3</p>
<div class="flex items-center justify-between text-xs">
<span class="text-gray-500">System</span>
<span class="text-gray-500">1 hour ago</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>