<!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="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<!-- Top Header -->
<header class="top-header">
<div class="header-content">
<!-- Left Section -->
<div class="header-left">
<div class="platform-title">
<div class="logo-section">
<div class="logo">
<i class="fas fa-cog"></i>
</div>
<div class="title-text">
<h1>CMMS Manufacturing Platform</h1>
<div class="subtitle">
<span class="main-subtitle">Manufacturing Operations</span>
<span class="divider">•</span>
<span class="main-subtitle">Real-time Production Monitoring</span>
</div>
</div>
</div>
</div>
</div>
<!-- Center Section -->
<div class="header-center">
<div class="status-section">
<div class="status-item">
<span class="status-indicator online"></span>
<span class="status-text">System Online</span>
</div>
<div class="status-item">
<i class="fas fa-sync-alt"></i>
<span>Last sync: 30 seconds ago</span>
</div>
</div>
</div>
<!-- Right Section -->
<div class="header-right">
<div class="uptime-section">
<i class="fas fa-arrow-up"></i>
<span class="uptime-text">94.2% Uptime</span>
</div>
<div class="notification-section">
<i class="fas fa-bell"></i>
<span class="notification-badge">3</span>
</div>
<div class="settings-section">
<i class="fas fa-cog"></i>
</div>
<div class="user-section">
<div class="user-avatar">JD</div>
<div class="user-info">
<span class="user-name">John Doe</span>
<span class="user-role">Maintenance Manager</span>
</div>
<i class="fas fa-chevron-down"></i>
</div>
</div>
</div>
</header>
<div class="main-container">
<!-- Left Sidebar -->
<aside class="sidebar">
<div class="sidebar-header">
<div class="logo-section">
<div class="logo">
<i class="fas fa-cog"></i>
</div>
<div class="title-text">
<h3>CMMS Pro</h3>
<p>Manufacturing Suite</p>
</div>
</div>
</div>
<div class="key-metrics">
<div class="metric-card">
<i class="fas fa-exclamation-triangle"></i>
<span class="metric-value">3</span>
<span class="metric-label">Active Alerts</span>
</div>
<div class="metric-card">
<i class="fas fa-chart-line"></i>
<span class="metric-value">94.2%</span>
<span class="metric-label">Uptime</span>
</div>
<div class="metric-card">
<i class="fas fa-chart-bar"></i>
<span class="metric-value">87%</span>
<span class="metric-label">Efficiency</span>
</div>
</div>
<nav class="sidebar-nav">
<ul class="nav-list">
<li class="nav-item active">
<i class="fas fa-th-large"></i>
<div class="nav-content">
<span class="nav-title">Dashboard</span>
<span class="nav-subtitle">Overview & Analytics</span>
</div>
<i class="fas fa-chevron-right"></i>
</li>
<li class="nav-item">
<i class="fas fa-building"></i>
<div class="nav-content">
<span class="nav-title">Equipment</span>
<span class="nav-subtitle">Asset Management</span>
</div>
<span class="nav-tag">Soon</span>
<i class="fas fa-chevron-right"></i>
</li>
<li class="nav-item">
<i class="fas fa-tools"></i>
<div class="nav-content">
<span class="nav-title">Work Orders</span>
<span class="nav-subtitle">Task Management</span>
</div>
<i class="fas fa-chevron-right"></i>
</li>
<li class="nav-item">
<i class="fas fa-calendar-alt"></i>
<div class="nav-content">
<span class="nav-title">Maintenance</span>
<span class="nav-subtitle">Planning & Schedu...</span>
</div>
<span class="nav-tag">Soon</span>
<i class="fas fa-chevron-right"></i>
</li>
<li class="nav-item">
<i class="fas fa-boxes"></i>
<div class="nav-content">
<span class="nav-title">Inventory</span>
<span class="nav-subtitle">Parts & Supplies</span>
</div>
<i class="fas fa-chevron-right"></i>
</li>
<li class="nav-item">
<i class="fas fa-folder"></i>
<div class="nav-content">
<span class="nav-title">Repair Dossiers</span>
<span class="nav-subtitle">Documentation</span>
</div>
<i class="fas fa-chevron-right"></i>
</li>
</ul>
</nav>
<div class="system-status">
<h4>System Status</h4>
<div class="status-item">
<span class="status-dot green"></span>
<span>Security</span>
<span class="status-text">Healthy</span>
</div>
<div class="status-item">
<span class="status-dot green"></span>
<span>Performance</span>
<span class="status-text">Optimal</span>
</div>
<div class="status-item">
<span class="status-dot red"></span>
<span>Alerts</span>
<span class="status-text">3 Active</span>
</div>
</div>
<div class="sidebar-footer">
<div class="user-section">
<div class="user-avatar">JD</div>
<div class="user-info">
<span class="user-name">John Doe</span>
<span class="user-role">Maintenance Manager</span>
</div>
<i class="fas fa-chevron-down"></i>
</div>
</div>
</aside>
<!-- Main Content -->
<main class="main-content">
<div class="content-header">
<div class="header-info">
<h2>Dashboard Overview</h2>
<p>Monitor your manufacturing operations in real-time</p>
</div>
<div class="action-buttons">
<button class="btn btn-primary">
<i class="fas fa-plus"></i>
New Work Order
</button>
<button class="btn btn-success">
<i class="fas fa-calendar-plus"></i>
Schedule Maintenance
</button>
<button class="btn btn-warning">
<i class="fas fa-boxes"></i>
Inventory Check
</button>
<button class="btn btn-secondary">
<i class="fas fa-chart-bar"></i>
Generate Report
</button>
</div>
</div>
<!-- KPI Cards -->
<div class="kpi-section">
<div class="kpi-grid">
<div class="kpi-card">
<div class="kpi-header">
<div class="kpi-icon">
<i class="fas fa-chart-line"></i>
</div>
<div class="kpi-title">
<h3>Equipment Uptime</h3>
<span class="kpi-subtitle">@ 95%</span>
</div>
</div>
<div class="kpi-value">94.2%</div>
<div class="kpi-change positive">+2.1% vs last week</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 94.2%"></div>
</div>
<div class="performance-label">Excellent</div>
</div>
<div class="kpi-card">
<div class="kpi-header">
<div class="kpi-icon">
<i class="fas fa-tools"></i>
</div>
<div class="kpi-title">
<h3>Active Work Orders</h3>
<span class="kpi-subtitle">
< 30</span>
</div>
</div>
<div class="kpi-value">23</div>
<div class="kpi-change neutral">-5 vs last week</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 77%"></div>
</div>
<div class="performance-label">Good</div>
</div>
<div class="kpi-card">
<div class="kpi-header">
<div class="kpi-icon">
<i class="fas fa-clock"></i>
</div>
<div class="kpi-title">
<h3>Overdue Tasks</h3>
<span class="kpi-subtitle">
< 5</span>
</div>
</div>
<div class="kpi-value">7</div>
<div class="kpi-change warning">+2 vs last week</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 58%"></div>
</div>
<div class="performance-label">Needs Attention</div>
</div>
<div class="kpi-card">
<div class="kpi-header">
<div class="kpi-icon">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="kpi-title">
<h3>Critical Alerts</h3>
<span class="kpi-subtitle">0</span>
</div>
</div>
<div class="kpi-value">3</div>
<div class="kpi-change danger">-1 vs last week</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 25%"></div>
</div>
<div class="performance-label">Critical</div>
</div>
</div>
</div>
<!-- Equipment Status Section -->
<div class="equipment-section">
<div class="section-header">
<div class="section-title">
<i class="fas fa-power-off"></i>
<div>
<h3>Equipment Status</h3>
<p>Real-time monitoring of all manufacturing equipment</p>
</div>
</div>
<div class="section-controls">
<div class="search-bar">
<i class="fas fa-search"></i>
</div>
<select class="dropdown">
<option>All Equipment (6)</option>
</select>
<button class="btn-dot-menu">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
<div class="equipment-summary">
<span class="summary-item">6 Total</span>
<span class="summary-item positive">3 Operational</span>
<span class="summary-item warning">2 Maintenance</span>
<span class="summary-item danger">1 Offline</span>
</div>
<div class="equipment-grid">
<div class="equipment-card">
<div class="equipment-image">
<div class="equipment-placeholder">
<i class="fas fa-cogs"></i>
<span>CNC Machine</span>
</div>
</div>
<div class="equipment-info">
<h4>CNC Machine #1</h4>
<span class="status-tag operational">Operational</span>
</div>
</div>
<div class="equipment-card">
<div class="equipment-image">
<div class="equipment-placeholder">
<i class="fas fa-compress-arrows-alt"></i>
<span>Hydraulic Press</span>
</div>
</div>
<div class="equipment-info">
<h4>Hydraulic Press #2</h4>
<span class="status-tag maintenance">Maintenance</span>
</div>
</div>
<div class="equipment-card">
<div class="equipment-image">
<div class="equipment-placeholder">
<i class="fas fa-arrows-alt-h"></i>
<span>Conveyor System</span>
</div>
</div>
<div class="equipment-info">
<h4>Conveyor System #1</h4>
<span class="status-tag operational">Operational</span>
</div>
</div>
</div>
</div>
<!-- System Alerts Section -->
<div class="alerts-section">
<div class="section-header">
<div class="section-title">
<h3>System Alerts</h3>
<p>Recent alerts and notifications</p>
</div>
<button class="btn-dot-menu">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
<div class="alerts-list">
<div class="alert-item danger">
<div class="alert-icon">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="alert-content">
<div class="alert-main">
<span class="alert-title">Hydraulic Press #2 Pressure Drop</span>
<span class="alert-status active danger">Active</span>
</div>
<p class="alert-description">Pressure has dropped below safe operating levels</p>
<div class="alert-meta">
<span>Hydraulic Press #2</span>
<span>•</span>
<span>2 minutes ago</span>
</div>
</div>
</div>
<div class="alert-item warning">
<div class="alert-icon">
<i class="fas fa-clock"></i>
</div>
<div class="alert-content">
<div class="alert-main">
<span class="alert-title">Scheduled Maintenance Due</span>
<span class="alert-status active warning">Active</span>
</div>
<p class="alert-description">CNC Machine #1 maintenance is due in 2 days</p>
<div class="alert-meta">
<span>CNC Machine #1</span>
<span>•</span>
<span>15 minutes ago</span>
</div>
</div>
</div>
<div class="alert-item info">
<div class="alert-icon">
<i class="fas fa-info-circle"></i>
</div>
<div class="alert-content">
<div class="alert-main">
<span class="alert-title">Software Update Available</span>
<span class="alert-status active info">Active</span>
</div>
<p class="alert-description">New firmware version available for Welding Robot #3</p>
<div class="alert-meta">
<span>Welding Robot #3</span>
<span>•</span>
<span>1 hour ago</span>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>