<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CMMS Pro - Manufacturing Operations</title>
<link rel="stylesheet" href="style.css">
<!-- Font Awesome สำหรับไอคอน (ถ้าต้องการใช้) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Google Fonts สำหรับฟอนต์ (ถ้าต้องการใช้) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- Sidebar -->
<aside class="sidebar">
<div class="sidebar-header">
<div class="logo">
<!-- อาจจะเป็นรูปภาพโลโก้ หรือ icon -->
<i class="fas fa-industry"></i>
</div>
<div class="platform-name">
<p>CMMS Pro</p>
<small>Manufacturing Suite</small>
</div>
</div>
<div class="sidebar-summary">
<div class="summary-item red">
<span>3</span>
<small>Active Alerts</small>
</div>
<div class="summary-item green">
<span>94.2%</span>
<small>Uptime</small>
</div>
<div class="summary-item blue">
<span>87%</span>
<small>Efficiency</small>
</div>
</div>
<nav class="main-navigation">
<h5>MAIN NAVIGATION</h5>
<ul>
<li class="nav-item active">
<a href="#"><i class="fas fa-tachometer-alt"></i> Dashboard</a>
<small>Overview & Analytics</small>
</li>
<li class="nav-item">
<a href="#"><i class="fas fa-cogs"></i> Equipment</a>
<small>Asset Management</small>
<span class="status-tag">Soon</span>
</li>
<li class="nav-item">
<a href="#"><i class="fas fa-clipboard-list"></i> Work Orders</a>
<small>Task Management</small>
</li>
<li class="nav-item">
<a href="#"><i class="fas fa-calendar-alt"></i> Maintenance</a>
<small>Schedule</small>
<span class="status-tag">Soon</span>
</li>
<li class="nav-item">
<a href="#"><i class="fas fa-boxes"></i> Inventory</a>
<small>Parts & Supplies</small>
</li>
<li class="nav-item">
<a href="#"><i class="fas fa-tools"></i> Repair Dossiers</a>
</li>
</ul>
</nav>
<div class="system-status">
<h5>SYSTEM STATUS</h5>
<ul>
<li><i class="fas fa-circle green-dot"></i> Healthy</li>
<li><i class="fas fa-circle blue-dot"></i> Active</li>
<li><i class="fas fa-circle orange-dot"></i> Optimal</li>
<li><i class="fas fa-circle red-dot"></i> 4 Alerts</li>
</ul>
</div>
<div class="sidebar-user-info">
<div class="user-avatar">JD</div>
<div class="user-details">
<p>John Doe</p>
<small>Maintenance Manager</small>
</div>
</div>
</aside>
<!-- Main Content -->
<main class="main-content">
<!-- Topbar -->
<header class="topbar">
<div class="topbar-left">
<h1>Manufacturing Operations</h1>
<p class="subtitle">Real-time Production Monitoring</p>
<span class="system-status-indicator online"><i class="fas fa-circle"></i> System Online</span>
<span class="last-sync"><i class="fas fa-sync-alt"></i> Last sync: 30 seconds ago</span>
</div>
<div class="topbar-right">
<div class="search-box">
<i class="fas fa-search"></i>
<input type="text" placeholder="Search equipment, work orders, technicians...">
</div>
<span class="uptime"><i class="fas fa-chevron-up"></i> 94.2% Uptime</span>
<div class="icon-group">
<i class="fas fa-bell"></i>
<span class="badge">1</span>
<i class="fas fa-th"></i>
<i class="fas fa-ellipsis-v"></i>
</div>
<div class="user-profile">
<div class="user-avatar">JD</div>
<div class="user-details">
<p>John Doe</p>
<small>Maintenance Manager</small>
</div>
</div>
</div>
</header>
<!-- Dashboard Overview -->
<section class="dashboard-overview">
<div class="action-buttons">
<button class="btn btn-primary"><i class="fas fa-plus"></i> New Work Order</button>
<button class="btn btn-secondary"><i class="fas fa-calendar-alt"></i> Schedule Maintenance</button>
<button class="btn btn-secondary"><i class="fas fa-boxes"></i> Inventory Check</button>
<button class="btn btn-secondary"><i class="fas fa-file-alt"></i> Generate Report</button>
</div>
<div class="metric-cards">
<div class="card metric-card blue">
<h5>Equipment Uptime <i class="fas fa-info-circle"></i></h5>
<div class="card-content">
<span class="main-value">94.2%</span>
<i class="fas fa-chart-line chart-icon"></i>
</div>
<p class="sub-text"><span class="green-text"><i class="fas fa-caret-up"></i> 2.1%</span> vs last week</p>
<div class="progress-bar-label">
<span class="label">Performance</span>
<span class="status green-bg">Excellent</span>
</div>
</div>
<div class="card metric-card purple">
<h5>Active Work Orders <i class="fas fa-plus-circle"></i></h5>
<div class="card-content">
<span class="main-value">23</span>
<i class="fas fa-clipboard-list chart-icon"></i>
</div>
<p class="sub-text">Currently in progress</p>
<div class="progress-bar-label">
<span class="label">Performance</span>
<span class="status blue-bg">Good</span>
</div>
</div>
<div class="card metric-card orange">
<h5>Overdue Tasks <i class="fas fa-exclamation-triangle"></i></h5>
<div class="card-content">
<span class="main-value">7</span>
<i class="fas fa-clock chart-icon"></i>
</div>
<p class="sub-text">Require immediate attention</p>
<div class="progress-bar-label">
<span class="label">Performance</span>
<span class="status orange-bg">Needs Attention</span>
</div>
</div>
<div class="card metric-card red">
<h5>Critical Alerts <i class="fas fa-bell"></i></h5>
<div class="card-content">
<span class="main-value">3</span>
<i class="fas fa-exclamation-circle chart-icon"></i>
</div>
<p class="sub-text">High priority issues</p>
<div class="progress-bar-label">
<span class="label">Performance</span>
<span class="status red-bg">Critical</span>
</div>
</div>
</div>
<div class="dashboard-sections">
<!-- Equipment Status Section -->
<div class="card equipment-status">
<div class="card-header">
<h3><i class="fas fa-desktop"></i> Equipment Status</h3>
<p>Real-time monitoring of all manufacturing equipment</p>
<div class="search-and-filter">
<div class="search-box-small">
<i class="fas fa-search"></i>
<input type="text" placeholder="Search equipment...">
</div>
<div class="filter-dropdown">
<span>All Equipment (6)</span>
<i class="fas fa-caret-down"></i>
</div>
<i class="fas fa-ellipsis-v"></i>
</div>
</div>
<div class="status-summary">
<div class="status-item total">
<span>6</span>
<small>Total</small>
</div>
<div class="status-item operational">
<span>3</span>
<small>Operational</small>
</div>
<div class="status-item maintenance">
<span>2</span>
<small>Maintenance</small>
</div>
<div class="status-item offline">
<span>1</span>
<small>Offline</small>
</div>
</div>
<div class="equipment-list">
<div class="equipment-card">
<img src="https://via.placeholder.com/100x80?text=CNC+M1" alt="CNC Machine #1">
<div class="equipment-details">
<p>CNC Machine #1</p>
<span class="status-tag green-bg">Operational</span>
</div>
</div>
<div class="equipment-card">
<img src="https://via.placeholder.com/100x80?text=Hydraulic+P2" alt="Hydraulic Press #2">
<div class="equipment-details">
<p>Hydraulic Press #2</p>
<span class="status-tag orange-bg">Maintenance</span>
</div>
</div>
<div class="equipment-card">
<img src="https://via.placeholder.com/100x80?text=Conveyor+S1" alt="Conveyor System #1">
<div class="equipment-details">
<p>Conveyor System #1</p>
<span class="status-tag green-bg">Operational</span>
</div>
</div>
<!-- เพิ่มอุปกรณ์อื่นๆ ที่นี่ -->
</div>
</div>
<!-- System Alerts Section -->
<div class="card system-alerts">
<div class="card-header">
<h3>System Alerts</h3>
<p>Recent alerts and notifications</p>
<i class="fas fa-ellipsis-v"></i>
</div>
<div class="alert-list">
<div class="alert-item">
<i class="fas fa-exclamation-triangle red-text"></i>
<div class="alert-details">
<p>Hydraulic Press #2 Pressure Drop</p>
<small>Pressure has dropped below safe operating levels</small>
<small>Hydraulic Press #2</small>
</div>
<span class="status-tag red-bg">Active</span>
<small class="time-ago">2 minutes ago</small>
</div>
<div class="alert-item">
<i class="fas fa-calendar-check orange-text"></i>
<div class="alert-details">
<p>Scheduled Maintenance Due</p>
<small>CNC Machine #1 maintenance is due in 2 days</small>
<small>CNC Machine #1</small>
</div>
<span class="status-tag orange-bg">Active</span>
<small class="time-ago">15 minutes ago</small>
</div>
<div class="alert-item">
<i class="fas fa-sync-alt blue-text"></i>
<div class="alert-details">
<p>Software Update Available</p>
<small>New firmware version available for Welding Robot #3</small>
<small>Welding Robot #3</small>
</div>
<span class="status-tag blue-bg">Active</span>
<small class="time-ago">1 hour ago</small>
</div>
</div>
</div>
</div>
</section>
</main>
</div>
</body>
</html>