| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>JJAA ERP System - PT Juang Jaya Abadi Alam</title> |
| <link rel="stylesheet" href="style.css"> |
| </head> |
| <body> |
| |
| <header class="header"> |
| <div class="header-left"> |
| <button class="menu-toggle" id="menuToggle"> |
| <span>☰</span> |
| </button> |
| <div class="logo"> |
| <a href="#" class="logo-link" data-module="dashboard"> |
| <img src="download-2.png" alt="PT Juang Jaya Abadi Alam Logo" class="jjaa-logo" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';"> |
| <span style="display:none; font-size: 18px; font-weight: 600; color: var(--color-text);">PT JJAA</span> |
| </a> |
| </div> |
| </div> |
| <div class="header-center"> |
| <div class="search-box"> |
| <input type="text" placeholder="Search anything..." id="globalSearch"> |
| <span class="search-icon">🔍</span> |
| </div> |
| </div> |
| <div class="header-right"> |
| <div class="location-selector"> |
| <select id="locationFilter"> |
| <option value="all">All Locations</option> |
| <option value="lampung">Lampung Selatan (HQ)</option> |
| <option value="medan">Medan (Branch)</option> |
| <option value="jakarta">Jakarta (Sales Office)</option> |
| </select> |
| </div> |
| <div class="notifications"> |
| <button class="notification-btn"> |
| <span>🔔</span> |
| <span class="badge">8</span> |
| </button> |
| </div> |
| <div class="user-profile"> |
| <button class="profile-btn"> |
| <span class="avatar">👤</span> |
| <span class="user-name">Admin</span> |
| <span class="dropdown-arrow">▼</span> |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <aside class="sidebar" id="sidebar"> |
| <nav class="sidebar-nav"> |
| <a href="#" class="nav-item active" data-module="dashboard"> |
| <span class="nav-icon">🏠</span> |
| <span class="nav-text">Dashboard</span> |
| </a> |
| <a href="#" class="nav-item" data-module="finance"> |
| <span class="nav-icon">💰</span> |
| <span class="nav-text">Finance & Accounting</span> |
| </a> |
| <a href="#" class="nav-item" data-module="inventory"> |
| <span class="nav-icon">📦</span> |
| <span class="nav-text">Inventory Management</span> |
| </a> |
| <a href="#" class="nav-item" data-module="warehouse"> |
| <span class="nav-icon">🏭</span> |
| <span class="nav-text">Warehouse Management</span> |
| </a> |
| <a href="#" class="nav-item" data-module="procurement"> |
| <span class="nav-icon">🛒</span> |
| <span class="nav-text">Procurement & PPIC</span> |
| </a> |
| <a href="#" class="nav-item" data-module="hr"> |
| <span class="nav-icon">👥</span> |
| <span class="nav-text">Human Resources</span> |
| </a> |
| <a href="#" class="nav-item" data-module="crm"> |
| <span class="nav-icon">🤝</span> |
| <span class="nav-text">Customer Relationship</span> |
| </a> |
| <a href="#" class="nav-item" data-module="scm"> |
| <span class="nav-icon">🚚</span> |
| <span class="nav-text">Supply Chain Management</span> |
| </a> |
| <a href="#" class="nav-item" data-module="feedlot"> |
| <span class="nav-icon">🐄</span> |
| <span class="nav-text">Feedlot Operations</span> |
| </a> |
| <a href="#" class="nav-item" data-module="bi"> |
| <span class="nav-icon">📊</span> |
| <span class="nav-text">Business Intelligence</span> |
| </a> |
| </nav> |
| <div class="sidebar-footer"> |
| <div class="system-status"> |
| <span class="status-indicator">●</span> |
| <span>System Online</span> |
| </div> |
| <div class="last-sync"> |
| Last sync: <span id="lastSync">Just now</span> |
| </div> |
| </div> |
| </aside> |
|
|
| |
| <main class="main-content" id="mainContent"> |
| |
| </main> |
|
|
| |
| <div class="modal" id="modal"> |
| <div class="modal-content"> |
| <div class="modal-header"> |
| <h3 id="modalTitle">Modal Title</h3> |
| <button class="modal-close" id="modalClose">×</button> |
| </div> |
| <div class="modal-body" id="modalBody"> |
| |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="toast" id="toast"> |
| <span id="toastMessage"></span> |
| </div> |
|
|
| |
| <div class="chatbot-widget" id="chatbotWidget"> |
| <div class="chatbot-header"> |
| <div class="chatbot-header-left"> |
| <span class="chatbot-icon">🤖</span> |
| <div> |
| <div class="chatbot-title">JJAA AI Assistant</div> |
| <div class="chatbot-status">Online • On-Premise</div> |
| </div> |
| </div> |
| <div class="chatbot-header-actions"> |
| <button class="chatbot-action-btn" id="chatClearBtn" title="Clear conversation"> |
| <span>🗑️</span> |
| </button> |
| <button class="chatbot-action-btn" id="chatMinimizeBtn" title="Minimize"> |
| <span>−</span> |
| </button> |
| <button class="chatbot-action-btn" id="chatCloseBtn" title="Close"> |
| <span>×</span> |
| </button> |
| </div> |
| </div> |
| |
| <div class="chatbot-body" id="chatbotBody"> |
| <div class="chatbot-welcome"> |
| <div class="welcome-icon">🤖</div> |
| <h3>Selamat datang di JJAA AI Assistant</h3> |
| <p>Saya dapat membantu Anda dengan:</p> |
| <div class="quick-actions"> |
| <button class="quick-action-btn" data-action="dashboard">📊 Dashboard Summary</button> |
| <button class="quick-action-btn" data-action="inventory">📦 Inventory Status</button> |
| <button class="quick-action-btn" data-action="health">🚨 Health Alerts</button> |
| <button class="quick-action-btn" data-action="financial">💰 Financial Summary</button> |
| </div> |
| <div class="suggested-questions"> |
| <p><strong>Contoh pertanyaan:</strong></p> |
| <button class="suggestion-btn">Berapa total sapi di semua lokasi?</button> |
| <button class="suggestion-btn">Sapi mana yang sakit minggu ini?</button> |
| <button class="suggestion-btn">Status PO pending apa saja?</button> |
| <button class="suggestion-btn">Stok jagung berapa?</button> |
| <button class="suggestion-btn">Total revenue bulan ini?</button> |
| </div> |
| </div> |
| <div class="chatbot-messages" id="chatbotMessages"></div> |
| </div> |
| |
| <div class="chatbot-footer"> |
| <div class="chatbot-input-wrapper"> |
| <input type="text" class="chatbot-input" id="chatbotInput" placeholder="Tanya sesuatu... (ID/EN)" autocomplete="off"> |
| <button class="chatbot-send-btn" id="chatbotSendBtn"> |
| <span>➤</span> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <button class="chatbot-toggle" id="chatbotToggle"> |
| <span class="chat-icon">💬</span> |
| <span class="notification-badge" id="chatNotificationBadge">1</span> |
| </button> |
|
|
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <script src="app.js"></script> |
| </body> |
| </html> |
