<!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 - Dashboard</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="app-container">
<aside class="sidebar">
<div class="logo-area">
<i class="fas fa-tools"></i>
<span>CMMS Pro</span>
</div>
<div class="summary-card">
<div class="stat-item">
<span class="value critical">3</span>
<span class="label">Active Alerts</span>
</div>
<div class="stat-item">
<span class="value uptime">94.2%</span>
<span class="label">Uptime</span>
</div>
<div class="stat-item">
<span class="value efficiency">87%</span>
<span class="label">Efficiency</span>
</div>
</div>
<p class="nav-heading">MAIN NAVIGATION</p>
<nav class="main-nav">
<a href="#" class="nav-item active">
<i class="fas fa-tachometer-alt"></i> Dashboard <span class="badge active">Active</span>
</a>
<a href="#" class="nav-item">
<i class="fas fa-boxes"></i> Equipment <span class="label-soon">Soon</span>
</a>
<a href="#" class="nav-item">
<i class="fas fa-clipboard-list"></i> Work Orders
</a>
<a href="#" class="nav-item">
<i class="fas fa-calendar-alt"></i> Maintenance <span class="label-soon">Soon</span>
</a>
<a href="#" class="nav-item">
<i class="fas fa-warehouse"></i> Inventory
</a>
<a href="#" class="nav-item">
<i class="fas fa-scroll"></i> Repair Dossiers
</a>
</nav>
<p class="nav-heading system-status-heading">System Status</p>
<div class="system-status">
<div class="status-line"><i class="fas fa-shield-alt"></i> Security <span class="status-badge healthy">Healthy</span></div>
<div class="status-line"><i class="fas fa-cogs"></i> Performance <span class="status-badge optimal">Optimal</span></div>
<div class="status-line"><i class="fas fa-exclamation-triangle"></i> Alerts <span class="status-badge critical">3 Active</span></div>
</div>
<div class="user-profile-sidebar">
<div class="avatar-sm">JD</div>
<div class="user-info">
<div class="name">John Doe</div>
<div class="role">Maintenance Manager</div>
</div>
</div>
</aside>
<main class="main-content">
<header class="top-bar">
<div class="title-section">
<h2>Manufacturing Operations</h2>
<p>Real-time Production Monitoring</p>
</div>
<div class="status-bar">
<span class="system-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 class="search-box">
<i class="fas fa-search"></i>
<input type="text" placeholder="Search equipment, work orders, technicians...">
<i class="fas fa-times-circle clear-search"></i>
</div>
<div class="uptime-stat">
<i class="fas fa-arrow-up"></i> 94.2% Uptime
</div>
<div class="header-icons">
<i class="fas fa-bell"></i>
<i class="fas fa-cog"></i>
</div>
<div class="user-profile-header">
<div class="avatar-sm">JD</div>
<div class="user-name-role">
<div class="name">John Doe</div>
<div class="role">Maintenance Manager</div>
</div>
</div>
</div>
</header>
<section class="dashboard-overview-section">
<h3>Dashboard Overview</h3>
<div class="action-buttons">
<button class="btn primary"><i class="fas fa-plus"></i> New Work Order</button>
<button class="btn secondary"><i class="fas fa-calendar-alt"></i> Schedule Maintenance</button>
<button class="btn secondary"><i class="fas fa-boxes"></i> Inventory Check</button>
<button class="btn secondary"><i class="fas fa-file-alt"></i> Generate Report</button>
</div>
<div class="kpi-cards-grid">
<div class="kpi-card green-kpi">
<div class="kpi-header">Equipment Uptime <i class="fas fa-chart-line"></i> 91%</div>
<div class="kpi-value-main">
94.2%
<div class="kpi-trend green-trend">
<i class="fas fa-arrow-up"></i> +2.1% <small>vs last week</small>
</div>
</div>
<div class="kpi-footer">Performance | Excellent</div>
</div>
<div class="kpi-card blue-kpi">
<div class="kpi-header">Active Work Orders <i class="fas fa-wrench"></i> +30</div>
<div class="kpi-value-main">
23
<div class="kpi-trend blue-trend">
<i class="fas fa-arrow-down"></i> -5 <small>vs last week</small>
</div>
</div>
<div class="kpi-footer">Performance | Good</div>
</div>
<div class="kpi-card yellow-kpi">
<div class="kpi-header">Overdue Tasks <i class="fas fa-clock"></i> +5</div>
<div class="kpi-value-main">
7
<div class="kpi-trend yellow-trend">
<i class="fas fa-arrow-up"></i> +2 <small>vs last week</small>
</div>
</div>
<div class="kpi-footer">Performance | Needs Attention</div>
<div class="warning-text">Require immediate attention</div>
</div>
<div class="kpi-card red-kpi">
<div class="kpi-header">Critical Alerts <i class="fas fa-exclamation-triangle"></i> 0</div>
<div class="kpi-value-main">
3
<div class="kpi-trend red-trend">
<i class="fas fa-arrow-down"></i> -1 <small>vs last week</small>
</div>
</div>
<div class="kpi-footer">Performance | Critical</div>
<div class="warning-text">High priority issues</div>
</div>
</div>
<div class="lower-sections-grid">
<div class="section-card equipment-status">
<div class="section-header">
<i class="fas fa-cogs"></i> Equipment Status
<p>Real-time monitoring of all manufacturing equipment</p>
</div>
<div class="status-search-bar">
<i class="fas fa-search"></i>
<input type="text" placeholder="Search equipment...">
<span class="all-equipment-dropdown">All Equipment (6) <i class="fas fa-chevron-down"></i></span>
</div>
<div class="equipment-summary-stats">
<div class="stat-box total">
<h2>6</h2>
<p>Total</p>
</div>
<div class="stat-box operational">
<h2>3</h2>
<p>Operational</p>
</div>
<div class="stat-box maintenance">
<h2>2</h2>
<p>Maintenance</p>
</div>
<div class="stat-box offline">
<h2>1</h2>
<p>Offline</p>
</div>
</div>
<div class="equipment-cards-list">
<div class="eq-card operational-border">
<div class="eq-status operational-bg">Operational</div>
<img src="" alt="CNC Machine #1">
<h3>CNC Machine #1</h3>
</div>
<div class="eq-card maintenance-border">
<div class="eq-status maintenance-bg">Maintenance</div>
<img src="" alt="Hydraulic Press #2">
<h3>Hydraulic Press #2</h3>
</div>
<div class="eq-card operational-border">
<div class="eq-status operational-bg">Operational</div>
<img src="" alt="Conveyor System #1">
<h3>Conveyor System #1</h3>
</div>
</div>
</div>
<div class="section-card system-alerts">
<div class="section-header">
<i class="fas fa-bell"></i> System Alerts
<p>Recent alerts and notifications</p>
</div>
<div class="alert-list">
<div class="alert-item red-alert">
<i class="fas fa-exclamation-triangle"></i>
<div class="alert-content">
<h4>Hydraulic Press #2 Pressure Drop <span class="badge active-badge">Active</span></h4>
<p>Pressure has dropped below safe operating levels</p>
<small>Hydraulic Press #2 · 2 minutes ago</small>
</div>
</div>
<div class="alert-item yellow-alert">
<i class="fas fa-clock"></i>
<div class="alert-content">
<h4>Scheduled Maintenance Due <span class="badge active-badge">Active</span></h4>
<p>CNC Machine #1 maintenance is due in 2 days</p>
<small>CNC Machine #1 · 15 minutes ago</small>
</div>
</div>
<div class="alert-item blue-alert">
<i class="fas fa-download"></i>
<div class="alert-content">
<h4>Software Update Available <span class="badge active-badge">Active</span></h4>
<p>New firmware version available for Welding Robot #3</p>
<small>Welding Robot #3 · 1 hour ago</small>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
</div>
</body>
</html>