<!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 Suite</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<!-- Top Header Bar -->
<header class="top-header">
<div class="header-left">
<div class="logo">
<i class="fas fa-cogs"></i>
<span>CMMS Pro</span>
</div>
</div>
<div class="header-center">
<h2>Manufacturing Operations</h2>
<p>Real-time Production Monitoring</p>
</div>
<div class="header-right">
<div class="status-indicator">
<span class="status-dot online"></span>
<span>System Online</span>
</div>
<div class="sync-info">
<i class="fas fa-sync"></i>
<span>Last sync: 30 seconds ago</span>
</div>
<div class="search-box">
<input type="text" placeholder="Search equipment, work orders, technicians...">
<i class="fas fa-search"></i>
</div>
<div class="uptime-badge">
<i class="fas fa-bolt"></i>
<span>94.2% Uptime</span>
</div>
<div class="notifications">
<i class="fas fa-bell"></i>
<span class="notification-count">1</span>
</div>
<div class="settings">
<i class="fas fa-cog"></i>
</div>
<div class="user-profile">
<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>
</header>
<div class="main-container">
<!-- Sidebar Navigation -->
<aside class="sidebar">
<div class="sidebar-header">
<h3>MAIN NAVIGATION</h3>
</div>
<!-- Quick Stats -->
<div class="quick-stats">
<div class="stat-item">
<span class="stat-label">Active Alerts</span>
<span class="stat-value">3</span>
</div>
<div class="stat-item">
<span class="stat-label">Uptime</span>
<span class="stat-value">94.2%</span>
</div>
<div class="stat-item">
<span class="stat-label">Efficiency</span>
<span class="stat-value">87%</span>
</div>
</div>
<!-- Navigation Menu -->
<nav class="nav-menu">
<div class="nav-item active">
<i class="fas fa-th"></i>
<span>Dashboard</span>
<span class="nav-label">Overview & Analytics</span>
<i class="fas fa-chevron-right"></i>
</div>
<div class="nav-item">
<i class="fas fa-tools"></i>
<span>Equipment</span>
<span class="nav-label">Asset Management</span>
<span class="soon-badge">Soon</span>
<i class="fas fa-chevron-right"></i>
</div>
<div class="nav-item">
<i class="fas fa-list-check"></i>
<span>Work Orders</span>
<span class="nav-label">Task Management</span>
<i class="fas fa-chevron-right"></i>
</div>
<div class="nav-item">
<i class="fas fa-calendar"></i>
<span>Maintenance</span>
<span class="nav-label">Schedule Planning & Scheduling</span>
<span class="soon-badge">Soon</span>
<i class="fas fa-chevron-right"></i>
</div>
<div class="nav-item">
<i class="fas fa-boxes"></i>
<span>Inventory</span>
<span class="nav-label">Parts & Supplies</span>
<i class="fas fa-chevron-right"></i>
</div>
<div class="nav-item">
<i class="fas fa-folder"></i>
<span>Repair Dossiers</span>
<span class="nav-label">Repair Records</span>
<i class="fas fa-chevron-right"></i>
</div>
</nav>
<!-- System Status -->
<div class="system-status">
<h4>System Status</h4>
<div class="status-item">
<i class="fas fa-shield"></i>
<span>Security</span>
<span class="status-badge active">Active</span>
</div>
<div class="status-item">
<i class="fas fa-chart-line"></i>
<span>Performance</span>
<span class="status-badge optimal">Optimal</span>
</div>
<div class="status-item">
<i class="fas fa-exclamation-circle"></i>
<span>Alerts</span>
<span class="status-badge alert">3 Active</span>
</div>
<div class="system-health">
<i class="fas fa-heart"></i>
<span>Healthy</span>
</div>
</div>
<!-- User Profile in Sidebar -->
<div class="sidebar-user">
<div class="user-avatar-large">JD</div>
<span>John Doe</span>
<span class="user-role-small">Maintenance Manager</span>
<i class="fas fa-chevron-right"></i>
</div>
</aside>
<!-- Main Content Area -->
<main class="main-content">
<!-- Dashboard Header -->
<div class="dashboard-header">
<div class="header-title">
<h1>Dashboard Overview</h1>
<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-check"></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-file-pdf"></i> Generate Report
</button>
</div>
</div>
<!-- KPI Cards Section -->
<div class="kpi-cards">
<!-- Equipment Uptime Card -->
<div class="kpi-card uptime-card">
<div class="card-header">
<h3>Equipment Uptime</h3>
<i class="fas fa-info-circle"></i>
</div>
<div class="card-body">
<div class="kpi-value">94.2%</div>
<p class="kpi-description">Overall equipment effectiveness</p>
<div class="comparison">
<span class="change positive">+2.1%</span>
<span class="period">vs last week</span>
</div>
</div>
<div class="performance-bar">
<div class="bar-fill" style="width: 94.2%"></div>
</div>
<div class="card-footer">
<span class="performance-label">Performance</span>
<span class="performance-status excellent">
<i class="fas fa-star"></i> Excellent
</span>
</div>
<div class="card-icon">
<i class="fas fa-arrow-up"></i>
</div>
</div>
<!-- Active Work Orders Card -->
<div class="kpi-card orders-card">
<div class="card-header">
<h3>Active Work Orders</h3>
<i class="fas fa-info-circle"></i>
</div>
<div class="card-body">
<div class="kpi-value">23</div>
<p class="kpi-description">Currently in progress</p>
<div class="comparison">
<span class="change negative">-5</span>
<span class="period">vs last week</span>
</div>
</div>
<div class="performance-bar">
<div class="bar-fill" style="width: 76%"></div>
</div>
<div class="card-footer">
<span class="performance-label">Performance</span>
<span class="performance-status good">
<i class="fas fa-check-circle"></i> Good
</span>
</div>
<div class="card-icon">
<i class="fas fa-tasks"></i>
</div>
</div>
<!-- Overdue Tasks Card -->
<div class="kpi-card overdue-card">
<div class="card-header">
<h3>Overdue Tasks</h3>
<i class="fas fa-info-circle"></i>
</div>
<div class="card-body">
<div class="kpi-value">7</div>
<p class="kpi-description">Require immediate attention</p>
<div class="comparison">
<span class="change negative">+2</span>
<span class="period">vs last week</span>
</div>
</div>
<div class="performance-bar">
<div class="bar-fill" style="width: 58%"></div>
</div>
<div class="card-footer">
<span class="performance-label">Performance</span>
<span class="performance-status warning">
<i class="fas fa-exclamation"></i> Needs Attention
</span>
</div>
<div class="card-icon">
<i class="fas fa-clock"></i>
</div>
</div>
<!-- Critical Alerts Card -->
<div class="kpi-card alerts-card">
<div class="card-header">
<h3>Critical Alerts</h3>
<i class="fas fa-info-circle"></i>
</div>
<div class="card-body">
<div class="kpi-value">3</div>
<p class="kpi-description">High priority issues</p>
<div class="comparison">
<span class="change negative">-1</span>
<span class="period">vs last week</span>
</div>
</div>
<div class="performance-bar">
<div class="bar-fill" style="width: 30%"></div>
</div>
<div class="card-footer">
<span class="performance-label">Performance</span>
<span class="performance-status critical">
<i class="fas fa-exclamation-triangle"></i> Critical
</span>
</div>
<div class="card-icon">
<i class="fas fa-bell"></i>
</div>
</div>
</div>
<!-- Content Grid -->
<div class="content-grid">
<!-- Equipment Status Section -->
<section class="equipment-section">
<div class="section-header">
<h2>
<i class="fas fa-power-off"></i> Equipment Status
</h2>
<p>Real-time monitoring of all manufacturing equipment</p>
</div>
<!-- Equipment Summary -->
<div class="equipment-summary">
<div class="search-filter">
<input type="text" placeholder="Search equipment...">
<i class="fas fa-search"></i>
</div>
<div class="filter-button">
<span>All Equipment (6)</span>
<i class="fas fa-filter"></i>
</div>
<div class="more-options">
<i class="fas fa-ellipsis-v"></i>
</div>
</div>
<!-- Equipment Status Boxes -->
<div class="equipment-status-boxes">
<div class="status-box operational">
<div class="status-number">6</div>
<div class="status-label">Total</div>
</div>
<div class="status-box operational">
<div class="status-number">3</div>
<div class="status-label">Operational</div>
</div>
<div class="status-box maintenance">
<div class="status-number">2</div>
<div class="status-label">Maintenance</div>
</div>
<div class="status-box offline">
<div class="status-number">1</div>
<div class="status-label">Offline</div>
</div>
</div>
<!-- Equipment Cards -->
<div class="equipment-cards">
<!-- CNC Machine #1 -->
<div class="equipment-card operational">
<div class="equipment-status-badge">
<i class="fas fa-check-circle"></i> Operational
</div>
<div class="equipment-image">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'%3E%3Crect fill='%23333' width='300' height='200'/%3E%3Ctext x='50%25' y='50%25' font-size='24' fill='%23999' text-anchor='middle' dy='.3em'%3ECNC Machine%3C/text%3E%3C/svg%3E" alt="CNC Machine #1">
</div>
<div class="equipment-info">
<h3>CNC Machine #1</h3>
</div>
</div>
<!-- Hydraulic Press #2 -->
<div class="equipment-card maintenance">
<div class="equipment-status-badge maintenance">
<i class="fas fa-wrench"></i> Maintenance
</div>
<div class="equipment-image">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'%3E%3Crect fill='%23444' width='300' height='200'/%3E%3Ctext x='50%25' y='50%25' font-size='24' fill='%23999' text-anchor='middle' dy='.3em'%3EHydraulic Press%3C/text%3E%3C/svg%3E" alt="Hydraulic Press #2">
</div>
<div class="equipment-info">
<h3>Hydraulic Press #2</h3>
</div>
</div>
<!-- Conveyor System #1 -->
<div class="equipment-card operational">
<div class="equipment-status-badge">
<i class="fas fa-check-circle"></i> Operational
</div>
<div class="equipment-image">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'%3E%3Crect fill='%23333' width='300' height='200'/%3E%3Ctext x='50%25' y='50%25' font-size='24' fill='%23999' text-anchor='middle' dy='.3em'%3EConveyor System%3C/text%3E%3C/svg%3E" alt="Conveyor System #1">
</div>
<div class="equipment-info">
<h3>Conveyor System #1</h3>
</div>
</div>
</div>
</section>
<!-- System Alerts Section -->
<section class="alerts-section">
<div class="section-header">
<h2>
<i class="fas fa-bell"></i> System Alerts
</h2>
<p>Recent alerts and notifications</p>
</div>
<div class="alerts-header">
<div class="alerts-title"></div>
<div class="alerts-more">
<i class="fas fa-ellipsis-v"></i>
</div>
</div>
<!-- Alert Items -->
<div class="alerts-list">
<!-- Alert 1: Pressure Drop -->
<div class="alert-item active">
<div class="alert-icon">
<i class="fas fa-exclamation-circle"></i>
</div>
<div class="alert-content">
<h4>Hydraulic Press #2 Pressure Drop</h4>
<p>Pressure has dropped below safe operating levels</p>
<span class="equipment-ref">Hydraulic Press #2</span>
</div>
<div class="alert-status">
<span class="status-badge active">Active</span>
<span class="alert-time">2 minutes ago</span>
</div>
</div>
<!-- Alert 2: Scheduled Maintenance -->
<div class="alert-item active">
<div class="alert-icon">
<i class="fas fa-calendar-check"></i>
</div>
<div class="alert-content">
<h4>Scheduled Maintenance Due</h4>
<p>CNC Machine #1 maintenance is due in 2 days</p>
<span class="equipment-ref">CNC Machine #1</span>
</div>
<div class="alert-status">
<span class="status-badge active">Active</span>
<span class="alert-time">15 minutes ago</span>
</div>
</div>
<!-- Alert 3: Software Update -->
<div class="alert-item active">
<div class="alert-icon">
<i class="fas fa-download"></i>
</div>
<div class="alert-content">
<h4>Software Update Available</h4>
<p>New firmware version available for Welding Robot #3</p>
<span class="equipment-ref">Welding Robot #3</span>
</div>
<div class="alert-status">
<span class="status-badge active">Active</span>
<span class="alert-time">1 hour ago</span>
</div>
</div>
</div>
</section>
</div>
</main>
</div>
<script src="js/main.js"></script>
</body>
</html>