|
|
<!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> |
