Hugging Face's logo

Spaces:
alterzick
/
v3
Running

App Files Community
v3 / index.html
alterzick's picture
alterzick
Add 3 files
2e7cf5e verified
raw
history blame contribute delete
44.7 kB
<!DOCTYPE html>
<html lang="id">
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <title>Analisis Akar Masalah Profesional</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet" />
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 <style>
 body {
 font-family: 'Inter', sans-serif;
 background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
 }
 .sidebar {
 transition: all 0.3s ease;
 }
 .main-content {
 transition: margin-left 0.3s ease;
 }
 .chart-container {
 background: white;
 border-radius: 12px;
 padding: 20px;
 box-shadow: 0 10px 30px rgba(0,0,0,0.08);
 }
 .step-indicator {
 width: 30px;
 height: 30px;
 background: #3B82F6;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 color: white;
 font-weight: bold;
 font-size: 0.875rem;
 }
 .step-indicator.green {
 background: #10B981;
 }
 .step-indicator.orange {
 background: #F59E0B;
 }
 .step-indicator.purple {
 background: #8B5CF6;
 }
 .method-option {
 transition: all 0.2s ease;
 }
 .method-option:hover {
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(0,0,0,0.15);
 }
 .modal {
 display: none;
 position: fixed;
 z-index: 1000;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 overflow: auto;
 background-color: rgba(0,0,0,0.5);
 backdrop-filter: blur(5px);
 }
 .modal-content {
 animation: modalFadeIn 0.3s ease-out;
 }
 @keyframes modalFadeIn {
 from {
 opacity: 0;
 transform: translateY(-30px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
 }
 .stat-card {
 transition: all 0.3s ease;
 }
 .stat-card:hover {
 transform: translateY(-5px);
 }
 </style>
</head>
<body class="bg-gray-50 min-h-screen">
 <div class="flex">
 <!-- Sidebar -->
 <div class="sidebar w-64 bg-gradient-to-b from-blue-900 to-blue-700 text-white fixed h-full z-10">
 <div class="p-6">
 <h1 class="text-2xl font-bold mb-8 flex items-center">
 <i class="fas fa-screwdriver-wrench mr-2"></i>
 Analisis RCA
 </h1>
 <nav class="space-y-2">
 <a href="#" class="flex items-center p-3 rounded-lg bg-blue-600 shadow-md transition-all duration-300" onclick="showSection('dashboard')">
 <i class="fas fa-tachometer-alt mr-3"></i> Dashboard
 </a>
 <a href="#" class="flex items-center p-3 rounded-lg hover:bg-blue-600 transition-all duration-300" onclick="showSection('input')">
 <i class="fas fa-plus-circle mr-3"></i> Input Masalah
 </a>
 <a href="#" class="flex items-center p-3 rounded-lg hover:bg-blue-600 transition-all duration-300" onclick="showSection('record')">
 <i class="fas fa-clipboard-list mr-3"></i> Rekam Data
 </a>
 <a href="#" class="flex items-center p-3 rounded-lg hover:bg-blue-600 transition-all duration-300" onclick="showSection('history')">
 <i class="fas fa-history mr-3"></i> Riwayat
 </a>
 <a href="#" class="flex items-center p-3 rounded-lg hover:bg-blue-600 transition-all duration-300" onclick="showSection('report')">
 <i class="fas fa-flag mr-3"></i> Laporan
 </a>
 </nav>
 </div>
 </div>
<!-- Main Content -->
 <div class="main-content ml-64 flex-1">
 <!-- Header -->
 <header class="bg-white shadow-sm p-4 flex justify-between items-center">
 <div class="flex items-center">
 <button onclick="toggleSidebar()" class="text-gray-600 mr-4 md:hidden">
 <i class="fas fa-bars text-xl"></i>
 </button>
 <h2 class="text-xl font-semibold text-gray-800" id="page-title">Dashboard</h2>
 </div>
 <div class="flex items-center space-x-4">
 <div class="relative">
 <input type="text" placeholder="Cari..." class="bg-gray-100 rounded-full py-2 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-blue-500 w-60 transition-all duration-300" />
 <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
 </div>
 <div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white text-sm font-bold">
 A
 </div>
 </div>
 </header>
<!-- Dashboard Section -->
 <section id="dashboard" class="p-6">
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
 <!-- Stats Cards -->
 <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow stat-card">
 <div class="flex items-center">
 <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4">
 <i class="fas fa-exclamation-triangle text-xl"></i>
 </div>
 <div>
 <p class="text-sm text-gray-600">Masalah Terbuka</p>
 <p class="text-2xl font-bold text-gray-800">12</p>
 </div>
 </div>
 </div>
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow stat-card">
 <div class="flex items-center">
 <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4">
 <i class="fas fa-check-circle text-xl"></i>
 </div>
 <div>
 <p class="text-sm text-gray-600">Masalah Selesai</p>
 <p class="text-2xl font-bold text-gray-800">47</p>
 </div>
 </div>
 </div>
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow stat-card">
 <div class="flex items-center">
 <div class="p-3 rounded-full bg-orange-100 text-orange-600 mr-4">
 <i class="fas fa-chart-line text-xl"></i>
 </div>
 <div>
 <p class="text-sm text-gray-600">Rata2 Waktu</p>
 <p class="text-2xl font-bold text-gray-800">5.2 <span class="text-xs">hari</span></p>
 </div>
 </div>
 </div>
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow stat-card">
 <div class="flex items-center">
 <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4">
 <i class="fas fa-users text-xl"></i>
 </div>
 <div>
 <p class="text-sm text-gray-600">Analisis Aktif</p>
 <p class="text-2xl font-bold text-gray-800">8</p>
 </div>
 </div>
 </div>
 </div>
<!-- Charts -->
 <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
 <div class="chart-container">
 <h3 class="text-lg font-semibold mb-4">Distribusi Metode Analisis</h3>
 <canvas id="methodChart" height="300"></canvas>
 </div>
<div class="chart-container">
 <h3 class="text-lg font-semibold mb-4">Tren Masalah Bulanan</h3>
 <canvas id="trendChart" height="300"></canvas>
 </div>
 </div>
<!-- Recent Problems -->
 <div class="bg-white rounded-xl shadow-md p-6">
 <div class="flex justify-between items-center mb-6">
 <h3 class="text-lg font-semibold">Masalah Terbaru</h3>
 <button class="text-blue-600 hover:text-blue-800 text-sm font-medium transition-colors">Lihat Semua</button>
 </div>
 <div class="overflow-x-auto">
 <table class="w-full">
 <thead>
 <tr class="text-left text-gray-500 text-sm">
 <th class="pb-4 font-medium">No. Masalah</th>
 <th class="pb-4 font-medium">Masalah</th>
 <th class="pb-4 font-medium">Metode</th>
 <th class="pb-4 font-medium">Status</th>
 <th class="pb-4 font-medium">Tanggal</th>
 </tr>
 </thead>
 <tbody>
 <tr class="border-t border-gray-100">
 <td class="py-4">RCA-001</td>
 <td>Mesin produksi mati mendadak</td>
 <td>5 Why</td>
 <td><span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs font-medium">Dalam Proses</span></td>
 <td>12 Jun 2023</td>
 </tr>
 <tr class="border-t border-gray-100">
 <td class="py-4">RCA-002</td>
 <td>Kualitas produk menurun</td>
 <td>Fishbone</td>
 <td><span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium">Selesai</span></td>
 <td>10 Jun 2023</td>
 </tr>
 <tr class="border-t border-gray-100">
 <td class="py-4">RCA-003</td>
 <td>Delay pengiriman</td>
 <td>Pareto</td>
 <td><span class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-xs font-medium">Baru</span></td>
 <td>08 Jun 2023</td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>
 </section>
<!-- Input Section -->
 <section id="input" class="p-6 hidden">
 <div class="bg-white rounded-xl shadow-md p-6">
 <h2 class="text-xl font-semibold mb-6 flex items-center">
 <i class="fas fa-plus-circle mr-2 text-blue-600"></i> Input Masalah Baru
 </h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
 <!-- Problem Details -->
 <div>
 <h3 class="text-lg font-medium mb-4 border-b pb-2">Detail Masalah</h3>
 <form id="problemForm">
 <div class="space-y-4">
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">No. Referensi</label>
 <input type="text" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200" placeholder="contoh: PR-001" required />
 </div>
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Judul Masalah</label>
 <input type="text" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200" placeholder="Deskripsi singkat masalah" required />
 </div>
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Deskripsi Lengkap</label>
 <textarea class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 h-32" placeholder="Jelaskan masalah secara detail..."></textarea>
 </div>
 <div class="grid grid-cols-2 gap-4">
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Tanggal Kejadian</label>
 <input type="date" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200" required />
 </div>
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Prioritas</label>
 <select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200">
 <option>Rendah</option>
 <option>Sedang</option>
 <option>Tinggi</option>
 <option>Kritis</option>
 </select>
 </div>
 </div>
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Departemen</label>
 <select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200">
 <option>Produksi</option>
 <option>Quality Control</option>
 <option>Serikat Pekerja</option>
 <option>Logistik</option>
 <option>IT</option>
 </select>
 </div>
 </div>
 </form>
 </div>
<!-- Analysis Method Selection -->
 <div>
 <h3 class="text-lg font-medium mb-4 border-b pb-2">Metode Analisis</h3>
 <div class="space-y-3">
 <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer method-option" data-method="5-why">
 <div class="flex items-start">
 <div class="step-indicator mr-3">1</div>
 <div class="flex-1">
 <h4 class="font-medium text-gray-800">5 Why (Lima Mengapa)</h4>
 <p class="text-sm text-gray-600 mt-1">Teknik bertanya berulang untuk mencari akar penyebab dengan menanyakan "mengapa" sebanyak 5 kali.</p>
 </div>
 </div>
 </div>
<div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer method-option" data-method="fishbone">
 <div class="flex items-start">
 <div class="step-indicator green mr-3">2</div>
 <div class="flex-1">
 <h4 class="font-medium text-gray-800">Fishbone (Diagram Tulang Ikan)</h4>
 <p class="text-sm text-gray-600 mt-1">Diagram klasifikasi penyebab masalah ke dalam kategori seperti manusia, mesin, material, dll.</p>
 </div>
 </div>
 </div>
<div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer method-option" data-method="pareto">
 <div class="flex items-start">
 <div class="step-indicator orange mr-3">3</div>
 <div class="flex-1">
 <h4 class="font-medium text-gray-800">Pareto Analysis</h4>
 <p class="text-sm text-gray-600 mt-1">Prinsip 80/20 untuk mengidentifikasi 20% penyebab yang menyebabkan 80% masalah.</p>
 </div>
 </div>
 </div>
<div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer method-option" data-method="fault-tree">
 <div class="flex items-start">
 <div class="step-indicator purple mr-3">4</div>
 <div class="flex-1">
 <h4 class="font-medium text-gray-800">Fault Tree Analysis</h4>
 <p class="text-sm text-gray-600 mt-1">Analisis berbasis logika untuk menentukan penyebab kegagalan sistem secara hierarkis.</p>
 </div>
 </div>
 </div>
 </div>
<div class="mt-6 pt-6 border-t">
 <button class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition-colors font-medium flex items-center justify-center">
 <i class="fas fa-paper-plane mr-2"></i> Mulai Analisis
 </button>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Record Section -->
 <section id="record" class="p-6 hidden">
 <div class="bg-white rounded-xl shadow-md p-6">
 <div class="flex justify-between items-center mb-6">
 <h2 class="text-xl font-semibold">Rekam Data Analisis</h2>
 <div class="flex space-x-3">
 <select id="filterMethod" class="p-2 border border-gray-300 rounded-lg text-sm">
 <option value="">Semua Metode</option>
 <option value="5-why">5 Why</option>
 <option value="fishbone">Fishbone</option>
 <option value="pareto">Pareto</option>
 <option value="fault-tree">Fault Tree</option>
 </select>
 <input type="text" id="filterNo" placeholder="No. Ref" class="p-2 border border-gray-300 rounded-lg text-sm w-32" />
 </div>
 </div>
<!-- 5-Why Method Recording -->
 <div id="method-5-why" class="hidden">
 <div class="border-l-4 border-blue-500 pl-6 mb-6">
 <h3 class="text-lg font-medium text-blue-800 mb-4">Metode 5 Why - Lima Mengapa</h3>
 <p class="text-gray-600 mb-6">Metode ini menyelesaikan masalah dengan terus-menerus menanyakan "Mengapa?" hingga mencapai akar penyebab.</p>
<div class="space-y-4">
 <div class="bg-blue-50 p-4 rounded-lg">
 <label class="block text-sm font-medium text-gray-700 mb-2">Mengapa 1: Apa yang terjadi?</label>
 <input type="text" class="w-full p-3 border border-gray-300 rounded-lg transition-all duration-200" placeholder="Contoh: Mesin berhenti bekerja" />
 </div>
 <div class="bg-blue-50 p-4 rounded-lg">
 <label class="block text-sm font-medium text-gray-700 mb-2">Mengapa 2: Mengapa kondisi tersebut terjadi?</label>
 <input type="text" class="w-full p-3 border border-gray-300 rounded-lg transition-all duration-200" placeholder="Contoh: Karena motor listrik rusak" />
 </div>
 <div class="bg-blue-50 p-4 rounded-lg">
 <label class="block text-sm font-medium text-gray-700 mb-2">Mengapa 3: Mengapa komponen tersebut gagal?</label>
 <input type="text" class="w-full p-3 border border-gray-300 rounded-lg transition-all duration-200" placeholder="Contoh: Karena kelebihan beban" />
 </div>
 <div class="bg-blue-50 p-4 rounded-lg">
 <label class="block text-sm font-medium text-gray-700 mb-2">Mengapa 4: Mengapa terjadi kelebihan beban?</label>
 <input type="text" class="w-full p-3 border border-gray-300 rounded-lg transition-all duration-200" placeholder="Contoh: Karena pelumasan tidak memadai" />
 </div>
 <div class="bg-blue-50 p-4 rounded-lg">
 <label class="block text-sm font-medium text-gray-700 mb-2">Mengapa 5: Mengapa pelumas tidak memadai?</label>
 <input type="text" class="w-full p-3 border border-gray-300 rounded-lg transition-all duration-200" placeholder="Contoh: Karena jadwal perawatan tidak diikuti" />
 </div>
 </div>
<div class="mt-6 bg-green-50 p-4 rounded-lg">
 <h4 class="font-medium text-green-800 mb-2">Akar Penyebab (Root Cause)</h4>
 <textarea class="w-full p-3 border border-gray-300 rounded-lg transition-all duration-200 h-20" placeholder="Kesimpulan akar penyebab dari 5 pertanyaan mengapa..."></textarea>
 </div>
<div class="mt-6 bg-yellow-50 p-4 rounded-lg">
 <h4 class="font-medium text-yellow-800 mb-2">Tindakan Korektif & Pencegahan</h4>
 <textarea class="w-full p-3 border border-gray-300 rounded-lg transition-all duration-200 h-20" placeholder="Langkah-langkah yang akan diambil untuk memperbaiki masalah dan mencegah terulang..."></textarea>
 </div>
<div class="mt-6 flex justify-end">
 <button class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors">
 Simpan Analisis
 </button>
 </div>
 </div>
 </div>
<!-- Fishbone Method Recording -->
 <div id="method-fishbone" class="hidden">
 <div class="border-l-4 border-green-500 pl-6 mb-6">
 <h3 class="text-lg font-medium text-green-800 mb-4">Metode Fishbone - Diagram Tulang Ikan</h3>
 <p class="text-gray-600 mb-6">Metode ini mengklasifikasikan penyebab masalah ke dalam beberapa kategori utama.</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 <div class="bg-green-50 p-4 rounded-lg">
 <h4 class="font-medium text-green-800 mb-3 flex items-center">
 <i class="fas fa-user mr-2"></i> Manusia (Man)
 </h4>
 <textarea class="w-full p-3 border border-gray-300 rounded-lg transition-all duration-200 h-32" placeholder="Faktor-faktor terkait SDM: pelatihan, motivasi, keterampilan, dll..."></textarea>
 </div>
<div class="bg-green-50 p-4 rounded-lg">
 <h4 class="font-medium text-green-800 mb-3 flex items-center">
 <i class="fas fa-cogs mr-2"></i> Mesin (Machine)
 </h4>
 <textarea class="w-full p-3 border border-gray-300 rounded-lg transition-all duration-200 h-32" placeholder="Faktor-faktor terkait peralatan: perawatan, usia, desain, dll..."></textarea>
 </div>
<div class="bg-green-50 p-4 rounded-lg">
 <h4 class="font-medium text-green-800 mb-3 flex items-center">
 <i class="fas fa-box mr-2"></i> Material (Material)
 </h4>
 <textarea class="w-full p-3 border border-gray-300 rounded-lg transition-all duration-200 h-32" placeholder="Faktor-faktor terkait bahan: kualitas, supplier, spesifikasi, dll..."></textarea>
 </div>
<div class="bg-green-50 p-4 rounded-lg">
 <h4 class="font-medium text-green-800 mb-3 flex items-center">
 <i class="fas fa-thermometer-half mr-2"></i> Metode (Method)
 </h4>
 <textarea class="w-full p-3 border border-gray-300 rounded-lg transition-all duration-200 h-32" placeholder="Faktor-faktor terkait proses: prosedur, standar, dokumentasi, dll..."></textarea>
 </div>
<div class="bg-green-50 p-4 rounded-lg">
 <h4 class="font-medium text-green-800 mb-3 flex items-center">
 <i class="fas fa-warehouse mr-2"></i> Lingkungan (Environment)
 </h4>
 <textarea class="w-full p-3 border border-gray-300 rounded-lg transition-all duration-200 h-32" placeholder="Faktor-faktor terkait lingkungan: suhu, kebersihan, pencahayaan, kebisingan, dll..."></textarea>
 </div>
<div class="bg-green-50 p-4 rounded-lg">
 <h4 class="font-medium text-green-800 mb-3 flex items-center">
 <i class="fas fa-clock mr-2"></i> Pengukuran (Measurement)
 </h4>
 <textarea class="w-full p-3 border border-gray-300 rounded-lg transition-all duration-200 h-32" placeholder="Faktor-faktor terkait pengukuran: akurasi, kalibrasi, metode pengujian, dll..."></textarea>
 </div>
 </div>
<div class="mt-6 bg-green-50 p-4 rounded-lg">
 <h4 class="font-medium text-green-800 mb-2">Akar Penyebab Utama</h4>
 <textarea class="w-full p-3 border border-gray-300 rounded-lg transition-all duration-200 h-20" placeholder="Identifikasi akar penyebab utama berdasarkan analisis fishbone..."></textarea>
 </div>
<div class="mt-6 bg-yellow-50 p-4 rounded-lg">
 <h4 class="font-medium text-yellow-800 mb-2">Rencana Tindakan</h4>
 <textarea class="w-full p-3 border border-gray-300 rounded-lg transition-all duration-200 h-20" placeholder="Langkah-langkah perbaikan dan pencegahan..."></textarea>
 </div>
<div class="mt-6 flex justify-end">
 <button class="bg-green-600 text-white px-6 py-2 rounded-lg hover:bg-green-700 transition-colors">
 Simpan Analisis
 </button>
 </div>
 </div>
 </div>
<!-- Default Message -->
 <div id="method-default" class="text-center py-12 text-gray-500">
 <i class="fas fa-chart-network text-6xl mb-4 opacity-30"></i>
 <h3 class="text-xl font-medium mb-2">Pilih Metode Analisis</h3>
 <p>Pilih metode analisis dari sidebar atau daftar masalah untuk memulai rekaman data.</p>
 </div>
 </div>
 </section>
<!-- History Section -->
 <section id="history" class="p-6 hidden">
 <div class="bg-white rounded-xl shadow-md p-6">
 <div class="flex justify-between items-center mb-6">
 <h2 class="text-xl font-semibold">Riwayat Analisis</h2>
 <div class="flex space-x-3">
 <select id="historyMethodFilter" class="p-2 border border-gray-300 rounded-lg text-sm">
 <option value="">Semua Metode</option>
 <option value="5-why">5 Why</option>
 <option value="fishbone">Fishbone</option>
 <option value="pareto">Pareto</option>
 <option value="fault-tree">Fault Tree</option>
 </select>
 <select id="historyStatusFilter" class="p-2 border border-gray-300 rounded-lg text-sm">
 <option value="">Semua Status</option>
 <option value="baru">Baru</option>
 <option value="dalam-proses">Dalam Proses</option>
 <option value="selesai">Selesai</option>
 </select>
 <input type="text" id="historyNoFilter" placeholder="No. Ref" class="p-2 border border-gray-300 rounded-lg text-sm w-32" />
 </div>
 </div>
<div class="overflow-x-auto">
 <table class="w-full">
 <thead>
 <tr class="text-left text-gray-500 text-sm border-b">
 <th class="pb-3 font-medium">No. Masalah</th>
 <th class="pb-3 font-medium">Masalah</th>
 <th class="pb-3 font-medium">Metode</th>
 <th class="pb-3 font-medium">Status</th>
 <th class="pb-3 font-medium">Tanggal</th>
 <th class="pb-3 font-medium">Dibuat Oleh</th>
 <th class="pb-3 font-medium">Aksi</th>
 </tr>
 </thead>
 <tbody id="historyTableBody">
 <!-- History records will be dynamically inserted here -->
 <tr class="border-t border-gray-100">
 <td class="py-4">RCA-001</td>
 <td>Mesin produksi mati mendadak</td>
 <td>5 Why</td>
 <td><span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs font-medium">Dalam Proses</span></td>
 <td>12 Jun 2023</td>
 <td>Budi Santoso</td>
 <td>
 <button class="text-blue-600 hover:text-blue-800 text-sm transition-colors" onclick="viewDetails('RCA-001')">Lihat</button>
 </td>
 </tr>
 <tr class="border-t border-gray-100">
 <td class="py-4">RCA-002</td>
 <td>Kualitas produk menurun</td>
 <td>Fishbone</td>
 <td><span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium">Selesai</span></td>
 <td>10 Jun 2023</td>
 <td>Dewi Lestari</td>
 <td>
 <button class="text-blue-600 hover:text-blue-800 text-sm transition-colors" onclick="viewDetails('RCA-002')">Lihat</button>
 </td>
 </tr>
 <tr class="border-t border-gray-100">
 <td class="py-4">RCA-003</td>
 <td>Delay pengiriman</td>
 <td>Pareto</td>
 <td><span class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-xs font-medium">Baru</span></td>
 <td>08 Jun 2023</td>
 <td>Agus Makmur</td>
 <td>
 <button class="text-blue-600 hover:text-blue-800 text-sm transition-colors" onclick="viewDetails('RCA-003')">Lihat</button>
 </td>
 </tr>
 <tr class="border-t border-gray-100">
 <td class="py-4">RCA-004</td>
 <td>Kesalahan data input</td>
 <td>5 Why</td>
 <td><span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium">Selesai</span></td>
 <td>05 Jun 2023</td>
 <td>Siti Nurhaliza</td>
 <td>
 <button class="text-blue-600 hover:text-blue-800 text-sm transition-colors" onclick="viewDetails('RCA-004')">Lihat</button>
 </td>
 </tr>
 <tr class="border-t border-gray-100">
 <td class="py-4">RCA-005</td>
 <td>Kebisingan mesin meningkat</td>
 <td>Fishbone</td>
 <td><span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs font-medium">Dalam Proses</span></td>
 <td>03 Jun 2023</td>
 <td>Rudi Hartono</td>
 <td>
 <button class="text-blue-600 hover:text-blue-800 text-sm transition-colors" onclick="viewDetails('RCA-005')">Lihat</button>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>
 </section>
<!-- Report Section -->
 <section id="report" class="p-6 hidden">
 <div class="bg-white rounded-xl shadow-md p-6">
 <h2 class="text-xl font-semibold mb-6">Laporan Analisis RCA</h2>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
 <div class="lg:col-span-2">
 <div class="chart-container h-80">
 <h3 class="text-lg font-semibold mb-4">Distribusi Status Masalah</h3>
 <canvas id="statusChart" class="w-full"></canvas>
 </div>
 </div>
 <div>
 <div class="bg-gradient-to-br from-blue-500 to-blue-700 text-white p-6 rounded-xl h-full">
 <h3 class="text-lg font-semibold mb-6 flex items-center">
 <i class="fas fa-chart-bar mr-2"></i> Ringkasan
 </h3>
 <div class="space-y-4">
 <div class="flex justify-between">
 <span>Total Analisis</span>
 <span class="font-bold">59</span>
 </div>
 <div class="flex justify-between">
 <span>Selesai</span>
 <span class="font-bold">47</span>
 </div>
 <div class="flex justify-between">
 <span>Dalam Proses</span>
 <span class="font-bold">10</span>
 </div>
 <div class="flex justify-between">
 <span>Baru</span>
 <span class="font-bold">2</span>
 </div>
 <div class="pt-4 border-t border-blue-400">
 <div class="flex justify-between font-bold">
 <span>Tingkat Penyelesaian</span>
 <span>79%</span>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
 <div class="chart-container">
 <h3 class="text-lg font-semibold mb-4">Analisis Berdasarkan Departemen</h3>
 <canvas id="departmentChart" height="300"></canvas>
 </div>
 <div class="chart-container">
 <h3 class="text-lg font-semibold mb-4">Metode yang Paling Sering Digunakan</h3>
 <canvas id="popularMethodChart" height="300"></canvas>
 </div>
 </div>
<div class="bg-gray-50 p-6 rounded-xl">
 <div class="flex justify-between items-center mb-6">
 <h3 class="text-lg font-semibold">Eksport Laporan</h3>
 <div class="flex space-x-3">
 <button class="bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center hover:bg-blue-700 transition-colors">
 <i class="fas fa-file-pdf mr-2"></i> PDF
 </button>
 <button class="bg-green-600 text-white px-4 py-2 rounded-lg flex items-center hover:bg-green-700 transition-colors">
 <i class="fas fa-file-excel mr-2"></i> Excel
 </button>
 <button class="bg-gray-600 text-white px-4 py-2 rounded-lg flex items-center hover:bg-gray-700 transition-colors">
 <i class="fas fa-print mr-2"></i> Print
 </button>
 </div>
 </div>
 </div>
 </div>
 </section>
 </div>
 </div>
<!-- Modal Detail -->
 <div id="detailModal" class="modal">
 <div class="modal-content bg-white rounded-lg shadow-lg max-w-4xl w-full m-4 md:m-auto mt-10 md:mt-20">
 <div class="p-6">
 <div class="flex justify-between items-center mb-6">
 <h2 class="text-xl font-semibold">Detail Analisis RCA-001</h2>
 <button onclick="closeModal()" class="text-gray-500 hover:text-gray-700 text-2xl">&times;</button>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
 <div>
 <h3 class="font-medium text-gray-700 mb-2">Informasi Masalah</h3>
 <p><span class="font-medium">Judul:</span> Mesin produksi mati mendadak</p>
 <p><span class="font-medium">Deskripsi:</span> Mesin utama di lini produksi 2 berhenti secara tiba-tiba selama jam kerja, menyebabkan delay produksi selama 3 jam.</p>
 <p><span class="font-medium">Tanggal Kejadian:</span> 12 Jun 2023</p>
 <p><span class="font-medium">Departemen:</span> Produksi</p>
 <p><span class="font-medium">Prioritas:</span> <span class="px-2 py-1 bg-orange-100 text-orange-800 rounded text-xs">Tinggi</span></p>
 </div>
 <div>
 <h3 class="font-medium text-gray-700 mb-2">Informasi Analisis</h3>
 <p><span class="font-medium">Metode:</span> 5 Why</p>
 <p><span class="font-medium">Status:</span> <span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded text-xs">Dalam Proses</span></p>
 <p><span class="font-medium">Dibuat Oleh:</span> Budi Santoso</p>
 <p><span class="font-medium">Diperbarui:</span> 13 Jun 2023</p>
 <p><span class="font-medium">Waktu Analisis:</span> 2.5 hari</p>
 </div>
 </div>
<div class="bg-blue-50 p-4 rounded-lg mb-6">
 <h3 class="font-medium text-blue-800 mb-3">Analisis 5 Why</h3>
 <div class="space-y-3 text-sm">
 <p><span class="font-medium">Mengapa 1:</span> Mesin berhenti bekerja</p>
 <p><span class="font-medium">Mengapa 2:</span> Motor listrik mengalami overheating</p>
 <p><span class="font-medium">Mengapa 3:</span> Sistem pendingin tidak berfungsi dengan baik</p>
 <p><span class="font-medium">Mengapa 4:</span> Pompa cairan pendingin bocor</p>
 <p><span class="font-medium">Mengapa 5:</span> Gasket pompa telah aus dan tidak diganti secara teratur</p>
 </div>
<div class="mt-4 p-3 bg-white rounded text-sm">
 <p><span class="font-medium text-green-700">Root Cause:</span> Tidak adanya jadwal perawatan preventif yang konsisten untuk sistem pendingin mesin.</p>
 </div>
 </div>
<div class="flex justify-end">
 <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
 Cetak Detail
 </button>
 </div>
 </div>
 </div>
 </div>
<script>
 // Initialize charts
 document.addEventListener('DOMContentLoaded', function() {
 // Method Chart
 new Chart(document.getElementById('methodChart'), {
 type: 'doughnut',
 data: {
 labels: ['5 Why', 'Fishbone', 'Pareto', 'Fault Tree'],
 datasets: [{
 data: [35, 28, 15, 8],
 backgroundColor: ['#3B82F6', '#10B981', '#F59E0B', '#8B5CF6'],
 borderWidth: 0
 }]
 },
 options: {
 responsive: true,
 plugins: {
 legend: {
 position: 'bottom'
 }
 }
 }
 });
 // Trend Chart
 new Chart(document.getElementById('trendChart'), {
 type: 'line',
 data: {
 labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun'],
 datasets: [{
 label: 'Jumlah Masalah',
 data: [15, 12, 18, 14, 16, 12],
 borderColor: '#3B82F6',
 backgroundColor: 'rgba(59, 130, 246, 0.1)',
 tension: 0.4,
 fill: true
 }]
 },
 options: {
 responsive: true,
 plugins: {
 legend: {
 display: false
 }
 },
 scales: {
 y: {
 beginAtZero: true,
 ticks: {
 stepSize: 5
 }
 }
 }
 }
 });
 // Status Chart
 new Chart(document.getElementById('statusChart'), {
 type: 'bar',
 data: {
 labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun'],
 datasets: [
 {
 label: 'Selesai',
 data: [6, 8, 7, 9, 8, 9],
 backgroundColor: '#10B981'
 },
 {
 label: 'Dalam Proses',
 data: [3, 2, 3, 2, 4, 3],
 backgroundColor: '#F59E0B'
 },
 {
 label: 'Baru',
 data: [1, 1, 0, 1, 0, 0],
 backgroundColor: '#EF4444'
 }
 ]
 },
 options: {
 responsive: true,
 plugins: {
 legend: {
 position: 'top'
 }
 },
 scales: {
 x: {
 grid: {
 display: false
 }
 }
 }
 }
 });
 // Department Chart
 new Chart(document.getElementById('departmentChart'), {
 type: 'pie',
 data: {
 labels: ['Produksi', 'Quality Control', 'Logistik', 'IT', 'HR'],
 datasets: [{
 data: [42, 15, 8, 6, 3],
 backgroundColor: ['#3B82F6', '#10B981', '#F59E0B', '#8B5CF6', '#EC4899'],
 borderWidth: 0
 }]
 },
 options: {
 responsive: true,
 plugins: {
 legend: {
 position: 'right'
 }
 }
 }
 });
 // Popular Method Chart
 new Chart(document.getElementById('popularMethodChart'), {
 type: 'bar',
 data: {
 labels: ['5 Why', 'Fishbone', 'Pareto', 'Fault Tree'],
 datasets: [{
 data: [35, 28, 15, 8],
 backgroundColor: '#3B82F6'
 }]
 },
 options: {
 responsive: true,
 indexAxis: 'y',
 plugins: {
 legend: {
 display: false
 }
 },
 scales: {
 x: {
 beginAtZero: true,
 ticks: {
 stepSize: 10
 }
 }
 }
 }
 });
 // Initialize method selection
 document.querySelectorAll('.method-option').forEach(option => {
 option.addEventListener('click', function() {
 document.querySelectorAll('.method-option').forEach(el => {
 el.classList.remove('ring-2', 'ring-blue-300', 'bg-blue-50');
 });
 this.classList.add('ring-2', 'ring-blue-300', 'bg-blue-50');
 });
 });
 // Initialize record method selection
 document.getElementById('filterMethod').addEventListener('change', function() {
 // Hide all method recording forms
 document.querySelectorAll('#record [id^="method-"]').forEach(el => {
 el.classList.add('hidden');
 });
// Show the selected method
 if (this.value) {
 document.getElementById(`method-${this.value}`).classList.remove('hidden');
 } else {
 document.getElementById('method-default').classList.remove('hidden');
 }
 });
// Show default record view
 document.getElementById('method-default').classList.remove('hidden');
 });
 // Toggle sidebar on mobile
 function toggleSidebar() {
 const sidebar = document.querySelector('.sidebar');
 const mainContent = document.querySelector('.main-content');
if (window.innerWidth < 768) {
 if (sidebar.classList.contains('hidden')) {
 sidebar.classList.remove('hidden');
 mainContent.classList.remove('ml-0');
 mainContent.classList.add('ml-64');
 } else {
 sidebar.classList.add('hidden');
 mainContent.classList.add('ml-0');
 mainContent.classList.remove('ml-64');
 }
 }
 }
 // Show section
 function showSection(sectionId) {
 // Update page title
 const titles = {
 'dashboard': 'Dashboard',
 'input': 'Input Masalah',
 'record': 'Rekam Data',
 'history': 'Riwayat',
 'report': 'Laporan'
 };
document.getElementById('page-title').textContent = titles[sectionId];
// Hide all sections
 document.querySelectorAll('section').forEach(section => {
 section.classList.add('hidden');
 });
// Show selected section
 document.getElementById(sectionId).classList.remove('hidden');
// On mobile, hide sidebar after clicking
 if (window.innerWidth < 768) {
 document.querySelector('.sidebar').classList.add('hidden');
 document.querySelector('.main-content').classList.add('ml-0');
 document.querySelector('.main-content').classList.remove('ml-64');
 }
 }
 // View details modal
 function viewDetails(id) {
 document.getElementById('detailModal').style.display = 'flex';
 document.querySelector('#detailModal h2').textContent = `Detail Analisis ${id}`;
 }
 function closeModal() {
 document.getElementById('detailModal').style.display = 'none';
 }
 // Close modal when clicking outside
 window.onclick = function(event) {
 const modal = document.getElementById('detailModal');
 if (event.target == modal) {
 modal.style.display = 'none';
 }
 }
 // Filter history table
 document.querySelectorAll('#history select, #history input').forEach(el => {
 el.addEventListener('input', function() {
 // In a real app, this would filter the history table
 console.log('Filtering with:', this.id, this.value);
 });
 });
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-qwensite.hf.space/logo.svg" alt="qwensite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-qwensite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >QwenSite</a> - 🧬 <a href="https://enzostvs-qwensite.hf.space?remix=alterzick/v3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>