feat(dashboard): Redesign and implement analytics dashboard
This commit introduces a complete overhaul of the analytics dashboard, replacing the previous simple layout with a modern, data-rich interface. The new dashboard is built using Tailwind CSS for styling and Chart.js for interactive data visualizations. It provides a more comprehensive and user-friendly view of bot analytics with key metrics, charts for user growth and satisfaction, and a detailed feedback table. Additionally, this commit fixes a mobile viewport height (`vh`) rendering issue on the chat page to prevent layout shifts on mobile browsers.
This commit is contained in:
@@ -145,6 +145,15 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
|
|
||||||
// Update avatar utama dengan inisial dari nama saat halaman dimuat
|
// Update avatar utama dengan inisial dari nama saat halaman dimuat
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
// Handle viewport height for mobile browsers
|
||||||
|
const setVh = () => {
|
||||||
|
const vh = window.innerHeight * 0.01;
|
||||||
|
document.documentElement.style.setProperty('--vh', `${vh}px`);
|
||||||
|
};
|
||||||
|
setVh();
|
||||||
|
window.addEventListener('resize', setVh);
|
||||||
|
window.addEventListener('load', setVh);
|
||||||
|
|
||||||
const userName = document.querySelector('.user-details h2').textContent;
|
const userName = document.querySelector('.user-details h2').textContent;
|
||||||
const userInitial = userName.split(' ').map(n => n[0]).join('').substring(0, 1);
|
const userInitial = userName.split(' ').map(n => n[0]).join('').substring(0, 1);
|
||||||
document.querySelector('.avatar').textContent = userInitial;
|
document.querySelector('.avatar').textContent = userInitial;
|
||||||
|
|||||||
@@ -22,7 +22,7 @@ body {
|
|||||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
height: 90vh;
|
height: calc(var(--vh, 1vh) * 90); /* Menggunakan variabel viewport height */
|
||||||
max-height: 800px;
|
max-height: 800px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@@ -1,76 +1,238 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="id">
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<link
|
||||||
<title>Dashboard</title>
|
rel="stylesheet"
|
||||||
|
as="style"
|
||||||
|
onload="this.rel='stylesheet'"
|
||||||
|
href="https://fonts.googleapis.com/css2?display=swap&family=Inter%3Awght%40400%3B500%3B700%3B900&family=Noto+Sans%3Awght%40400%3B500%3B700%3B900"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<title>BeautyBot Analytics</title>
|
||||||
|
<link rel="icon" type="image/x-icon" href="data:image/x-icon;base64," />
|
||||||
|
|
||||||
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||||
<link rel="stylesheet" href="styles/main.css">
|
<link rel="stylesheet" href="styles/main.css">
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
|
</head>
|
||||||
</head>
|
<body style="font-family: Inter, 'Noto Sans', sans-serif; display: flex; flex-direction: column; min-height: 100vh; padding: 0; background: linear-gradient(135deg, #0077b6, #023e8a) !important;">
|
||||||
<body>
|
<header>
|
||||||
|
<div class="mobile-header-user-info">
|
||||||
|
<div
|
||||||
|
class="mobile-header-avatar"
|
||||||
|
style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDdsEbNptWuGWnUFVjxjJbETG3Ux0dsBq6vJXBqGqxirKQZ5h08CrhYiwt89C2-bjXZjh3bpwhhheIQH7TY4OfQvZjIE93FvpVViGxSvYuMDJylveD2lc-daeSlCOr8t64jpRbHrEXM0JGuM-CGz99i7dCKdfgcBu7EEecYOxvaPyTNOskRBL3yUkN9tJ659LAKvkEeum2-SYZ1htR83YgVFVP-n8-XoZBoQaa5W7vOC0TZtlOldU-Cq8EkbxM_HQH3prpaomyTJdCF");'
|
||||||
|
></div>
|
||||||
|
<h2 class="mobile-header-title">BeautyBot Analytics</h2>
|
||||||
|
</div>
|
||||||
|
<div class="mobile-header-right">
|
||||||
|
<button class="mobile-header-menu-button">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256">
|
||||||
|
<path
|
||||||
|
d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu hidden">
|
||||||
|
<button class="control-button">
|
||||||
|
<span class="truncate">Ekspor Data</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="layout-content-container">
|
||||||
|
<h2 class="text-[#141414] tracking-light text-[28px] font-bold leading-tight px-4 text-left pb-3 pt-5">Chatbot Performance Overview</h2>
|
||||||
|
<div class="controls-container">
|
||||||
|
<div class="controls-inner-container">
|
||||||
|
<button
|
||||||
|
class="control-button"
|
||||||
|
>
|
||||||
|
<span class="truncate">Pilih Rentang Tanggal</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div id="stat-cards" class="card-container">
|
||||||
|
<div class="flex min-w-[158px] flex-1 flex-col gap-2 rounded-xl p-6 bg-[#ededed]">
|
||||||
|
<p class="text-[#141414] text-base font-medium leading-normal">Total Obrolan</p>
|
||||||
|
<p class="text-[#141414] tracking-light text-2xl font-bold leading-tight">1.250</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex min-w-[158px] flex-1 flex-col gap-2 rounded-xl p-6 bg-[#ededed]">
|
||||||
|
<p class="text-[#141414] text-base font-medium leading-normal">Permintaan Pemesanan</p>
|
||||||
|
<p class="text-[#141414] tracking-light text-2xl font-bold leading-tight">320</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex min-w-[158px] flex-1 flex-col gap-2 rounded-xl p-6 bg-[#ededed]">
|
||||||
|
<p class="text-[#141414] text-base font-medium leading-normal">Pemesanan Ditindaklanjuti</p>
|
||||||
|
<p class="text-[#141414] tracking-light text-2xl font-bold leading-tight">280</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="secondary-stats" class="card-container">
|
||||||
|
<div class="flex min-w-[158px] flex-1 flex-col gap-2 rounded-xl p-6 bg-[#ededed]">
|
||||||
|
<p class="text-[#141414] text-base font-medium leading-normal">Topik Trending</p>
|
||||||
|
<p class="text-[#141414] tracking-light text-2xl font-bold leading-tight">Perawatan Kulit</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex min-w-[158px] flex-1 flex-col gap-2 rounded-xl p-6 bg-[#ededed]">
|
||||||
|
<p class="text-[#141414] text-base font-medium leading-normal">Total Respons AI</p>
|
||||||
|
<p class="text-[#141414] tracking-light text-2xl font-bold leading-tight">5.800</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-[#141414] text-[22px] font-bold leading-tight tracking-[-0.015em] px-4 pb-3 pt-5">Aktivitas Obrolan</h2>
|
||||||
|
<div class="card-container">
|
||||||
|
<div class="flex min-w-72 flex-1 flex-col gap-2">
|
||||||
|
<p class="text-[#141414] text-base font-medium leading-normal">Aktivitas Obrolan Berdasarkan Saluran</p>
|
||||||
|
<p class="text-[#141414] tracking-light text-[32px] font-bold leading-tight truncate">+15%</p>
|
||||||
|
<div class="flex gap-1">
|
||||||
|
<p class="text-neutral-500 text-base font-normal leading-normal">7 Hari Terakhir</p>
|
||||||
|
<p class="text-[#078807] text-base font-medium leading-normal">+15%</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex min-h-[180px] flex-1 flex-col gap-8 py-4">
|
||||||
|
<svg width="100%" height="148" viewBox="-3 0 478 150" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
|
||||||
|
<path
|
||||||
|
d="M0 109C18.1538 109 18.1538 21 36.3077 21C54.4615 21 54.4615 41 72.6154 41C90.7692 41 90.7692 93 108.923 93C127.077 93 127.077 33 145.231 33C163.385 33 163.385 101 181.538 101C199.692 101 199.692 61 217.846 61C236 61 236 45 254.154 45C272.308 45 272.308 121 290.462 121C308.615 121 308.615 149 326.769 149C344.923 149 344.923 1 363.077 1C381.231 1 381.231 81 399.385 81C417.538 81 417.538 129 435.692 129C453.846 129 453.846 25 472 25V149H326.769H0V109Z"
|
||||||
|
fill="url(#paint0_linear_1131_5935)"
|
||||||
|
></path>
|
||||||
|
<path
|
||||||
|
d="M0 109C18.1538 109 18.1538 21 36.3077 21C54.4615 21 54.4615 41 72.6154 41C90.7692 41 90.7692 93 108.923 93C127.077 93 127.077 33 145.231 33C163.385 33 163.385 101 181.538 101C199.692 101 199.692 61 217.846 61C236 61 236 45 254.154 45C272.308 45 272.308 121 290.462 121C308.615 121 308.615 149 326.769 149C344.923 149 344.923 1 363.077 1C381.231 1 381.231 81 399.385 81C417.538 81 417.538 129 435.692 129C453.846 129 453.846 25 472 25"
|
||||||
|
stroke="#001F3F" <!-- Warna navy untuk kontras -->
|
||||||
|
stroke-width="4" <!-- Stroke sedikit lebih tebal -->
|
||||||
|
stroke-linecap="round"
|
||||||
|
></path>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="paint0_linear_1131_5935" x1="236" y1="1" x2="236" y2="149" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#ededed"></stop>
|
||||||
|
<stop offset="1" stop-color="#ededed" stop-opacity="0"></stop>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
<div class="flex justify-around">
|
||||||
|
<p class="text-neutral-500 text-[13px] font-bold leading-normal tracking-[0.015em]">Sen</p>
|
||||||
|
<p class="text-neutral-500 text-[13px] font-bold leading-normal tracking-[0.015em]">Sel</p>
|
||||||
|
<p class="text-neutral-500 text-[13px] font-bold leading-normal tracking-[0.015em]">Rab</p>
|
||||||
|
<p class="text-neutral-500 text-[13px] font-bold leading-normal tracking-[0.015em]">Kam</p>
|
||||||
|
<p class="text-neutral-500 text-[13px] font-bold leading-normal tracking-[0.015em]">Jum</p>
|
||||||
|
<p class="text-neutral-500 text-[13px] font-bold leading-normal tracking-[0.015em]">Sab</p>
|
||||||
|
<p class="text-neutral-500 text-[13px] font-bold leading-normal tracking-[0.015em]">Min</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-container">
|
||||||
|
<div class="flex min-w-72 flex-1 flex-col gap-2 rounded-xl border border-[#dbdbdb] p-6">
|
||||||
|
<p class="text-[#141414] text-base font-medium leading-normal">Aktivitas Obrolan Berdasarkan Platform</p>
|
||||||
|
<p class="text-[#141414] tracking-light text-[32px] font-bold leading-tight truncate">+15%</p>
|
||||||
|
<div class="flex gap-1">
|
||||||
|
<p class="text-neutral-500 text-base font-normal leading-normal">7 Hari Terakhir</p>
|
||||||
|
<p class="text-[#078807] text-base font-medium leading-normal">+15%</p>
|
||||||
|
</div>
|
||||||
|
<div class="compact-bar-chart">
|
||||||
|
<p class="text-neutral-500 text-[13px] font-bold leading-normal tracking-[0.015em]">Instagram</p>
|
||||||
|
<div class="bar-wrapper"><div class="bar" style="width: 10%;"></div></div>
|
||||||
|
<p class="text-neutral-500 text-[13px] font-bold leading-normal tracking-[0.015em]">Obrolan Web</p>
|
||||||
|
<div class="bar-wrapper"><div class="bar" style="width: 10%;"></div></div>
|
||||||
|
<p class="text-neutral-500 text-[13px] font-bold leading-normal tracking-[0.015em]">WhatsApp</p>
|
||||||
|
<div class="bar-wrapper"><div class="bar" style="width: 100%;"></div></div>
|
||||||
|
<p class="text-neutral-500 text-[13px] font-bold leading-normal tracking-[0.015em]">Telegram</p>
|
||||||
|
<div class="bar-wrapper"><div class="bar" style="width: 70%;"></div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-container">
|
||||||
|
</div>
|
||||||
|
<!-- Final Knowledge Base Section -->
|
||||||
|
<table class="knowledge-table">
|
||||||
|
<colgroup>
|
||||||
|
<col style="width: 50%">
|
||||||
|
<col style="width: 20%">
|
||||||
|
<col style="width: 30%">
|
||||||
|
</colgroup>
|
||||||
|
<thead>
|
||||||
|
<tr class="table-header-row">
|
||||||
|
<th colspan="3">
|
||||||
|
<div class="knowledge-header">
|
||||||
|
<h2>Knowledge Base Agent</h2>
|
||||||
|
<button class="upload-button">Unggah File Baru</button>
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>Nama File</th>
|
||||||
|
<th>Status</th>
|
||||||
|
<th>Tindakan</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Katalog Produk.pdf</td>
|
||||||
|
<td><span class="status-badge status-active">Aktif</span></td>
|
||||||
|
<td>
|
||||||
|
<div class="action-buttons">
|
||||||
|
<button class="view-button">Lihat</button>
|
||||||
|
<button class="delete-button">Hapus</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Detail Layanan.pdf</td>
|
||||||
|
<td><span class="status-badge status-active">Aktif</span></td>
|
||||||
|
<td>
|
||||||
|
<div class="action-buttons">
|
||||||
|
<button class="view-button">Lihat</button>
|
||||||
|
<button class="delete-button">Hapus</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>FAQ.pdf</td>
|
||||||
|
<td><span class="status-badge status-inactive">Tidak Aktif</span></td>
|
||||||
|
<td>
|
||||||
|
<div class="action-buttons">
|
||||||
|
<button class="view-button">Lihat</button>
|
||||||
|
<button class="delete-button">Hapus</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<h2 class="text-[#141414] text-[22px] font-bold leading-tight tracking-[-0.015em] px-4 pb-3 pt-5">Wawasan Bisnis</h2>
|
||||||
|
<p class="text-[#141414] text-base font-normal leading-normal pb-3 pt-1 px-4">
|
||||||
|
Berdasarkan data chatbot, ada tren yang mencolok dalam pertanyaan terkait perawatan kulit, yang mengindikasikan minat pelanggan yang tinggi. Permintaan pemesanan
|
||||||
|
cukup besar, dengan tingkat tindak lanjut yang baik, menunjukkan keterlibatan pelanggan yang efektif. Wawasan ini dapat menginformasikan pemasaran yang ditargetkan
|
||||||
|
dan peningkatan layanan.
|
||||||
|
</p>
|
||||||
|
<h2 class="text-[#141414] text-[22px] font-bold leading-tight tracking-[-0.015em] px-4 pb-3 pt-5">Wawasan Pemasaran</h2>
|
||||||
|
<div class="card-container">
|
||||||
|
<div class="flex min-w-[158px] flex-1 flex-col gap-2 rounded-xl p-6 bg-[#ededed]">
|
||||||
|
<p class="text-[#141414] text-base font-medium leading-normal">Rata-rata Waktu Respons AI</p>
|
||||||
|
<p class="text-[#141414] tracking-light text-2xl font-bold leading-tight">2,5 detik</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex min-w-[158px] flex-1 flex-col gap-2 rounded-xl p-6 bg-[#ededed]">
|
||||||
|
<p class="text-[#141414] text-base font-medium leading-normal">Jam Aktivitas Puncak</p>
|
||||||
|
<p class="text-[#141414] tracking-light text-2xl font-bold leading-tight">15.00 - 19.00</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex min-w-[158px] flex-1 flex-col gap-2 rounded-xl p-6 bg-[#ededed]">
|
||||||
|
<p class="text-[#141414] text-base font-medium leading-normal">Efektivitas Promosi</p>
|
||||||
|
<p class="text-[#141414] tracking-light text-2xl font-bold leading-tight">Tingkat Konversi 15%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-[#141414] text-[22px] font-bold leading-tight tracking-[-0.015em] px-4 pb-3 pt-5">Saran Konten Mingguan</h2>
|
||||||
|
<p class="text-[#141414] text-base font-normal leading-normal pb-3 pt-1 px-4">
|
||||||
|
Berdasarkan data chatbot, topik yang sedang tren minggu ini adalah 'Perawatan Kulit untuk Kulit Sensitif'. Kami sarankan untuk membuat postingan media sosial yang
|
||||||
|
menyoroti produk perawatan kulit yang lembut dan bebas pewangi, dengan ajakan bertindak 'Pesan konsultasi gratis sekarang'.
|
||||||
|
</p>
|
||||||
|
<h2 class="text-[#141414] text-[22px] font-bold leading-tight tracking-[-0.015em] px-4 pb-3 pt-5">Broadcast Promo</h2>
|
||||||
|
<div class="flex px-4 py-3 justify-start">
|
||||||
|
<button
|
||||||
|
class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-10 px-4 bg-black text-neutral-50 text-sm font-bold leading-normal tracking-[0.015em]"
|
||||||
|
>
|
||||||
|
<span class="truncate">Kirim Promo ke Semua Nomor WhatsApp</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
<!-- Floating circles background -->
|
<!-- Floating circles background -->
|
||||||
<ul class="floating-circles">
|
<ul class="floating-circles">
|
||||||
<li></li><li></li><li></li><li></li><li></li>
|
<li></li><li></li><li></li><li></li><li></li>
|
||||||
<li></li><li></li><li></li><li></li><li></li>
|
<li></li><li></li><li></li><li></li><li></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</body>
|
||||||
<!-- Sidebar -->
|
|
||||||
<aside class="sidebar">
|
|
||||||
<div class="sidebar-header">
|
|
||||||
<h2 class="logo">Dashboard</h2>
|
|
||||||
<!-- Hamburger button for mobile -->
|
|
||||||
<button class="hamburger-btn mobile-only">
|
|
||||||
<i class="bi bi-x-lg"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<nav class="sidebar-nav">
|
|
||||||
<a href="#" class="nav-item active"><i class="bi bi-house-door-fill"></i> Overview</a>
|
|
||||||
<a href="#" class="nav-item"><i class="bi bi-bar-chart-fill"></i> Analytics</a>
|
|
||||||
<a href="#" class="nav-item"><i class="bi bi-gear-fill"></i> Settings</a>
|
|
||||||
</nav>
|
|
||||||
<div class="sidebar-footer">
|
|
||||||
<a href="../login-page/index.html" class="nav-item logout-btn">
|
|
||||||
<i class="bi bi-box-arrow-left"></i> Logout
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<!-- Main Content -->
|
|
||||||
<main class="main-content">
|
|
||||||
<section class="greeting-section">
|
|
||||||
<div class="greeting-card">
|
|
||||||
<!-- Kolom kiri: Profil -->
|
|
||||||
<div class="profile-column">
|
|
||||||
<div class="profile-pic">
|
|
||||||
<img src="https://via.placeholder.com/100" alt="Profile Picture">
|
|
||||||
</div>
|
|
||||||
<div class="user-info">
|
|
||||||
<h2>Selamat Datang, John Doe</h2>
|
|
||||||
<p>john.doe@example.com</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Kolom kanan: Waktu dan Ikon -->
|
|
||||||
<div class="actions-column">
|
|
||||||
<div class="datetime-small">
|
|
||||||
<div id="date"></div>
|
|
||||||
<div id="time"></div>
|
|
||||||
</div>
|
|
||||||
<div class="icons-container">
|
|
||||||
<button class="icon-btn">
|
|
||||||
<i class="bi bi-question-circle"></i>
|
|
||||||
</button>
|
|
||||||
<button class="icon-btn">
|
|
||||||
<i class="bi bi-bell"></i>
|
|
||||||
</button>
|
|
||||||
<button class="icon-btn">
|
|
||||||
<i class="bi bi-person-circle"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
<script src="scripts/main.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1,81 +1,16 @@
|
|||||||
console.log("Dashboard script loaded");
|
// Toggle dropdown menu visibility
|
||||||
|
const menuButton = document.querySelector('.mobile-header-menu-button');
|
||||||
|
const dropdownMenu = document.querySelector('.dropdown-menu');
|
||||||
|
|
||||||
// Inisialisasi fungsi dasar
|
if (menuButton && dropdownMenu) {
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
menuButton.addEventListener('click', function() {
|
||||||
const sidebar = document.querySelector('.sidebar');
|
dropdownMenu.classList.toggle('visible');
|
||||||
const menuBtn = document.querySelector('.main-header .hamburger-btn');
|
|
||||||
const closeBtn = document.querySelector('.sidebar .hamburger-btn');
|
|
||||||
|
|
||||||
// Toggle sidebar visibility
|
|
||||||
function toggleSidebar() {
|
|
||||||
sidebar.classList.toggle('active');
|
|
||||||
document.body.classList.toggle('sidebar-active');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Event listeners for hamburger buttons
|
|
||||||
if (menuBtn) {
|
|
||||||
menuBtn.addEventListener('click', toggleSidebar);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (closeBtn) {
|
|
||||||
closeBtn.addEventListener('click', toggleSidebar);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Close sidebar when clicking outside
|
|
||||||
document.addEventListener('click', (e) => {
|
|
||||||
if (window.innerWidth > 768) return;
|
|
||||||
if (sidebar.classList.contains('active') &&
|
|
||||||
!sidebar.contains(e.target) &&
|
|
||||||
!menuBtn.contains(e.target)) {
|
|
||||||
toggleSidebar();
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Handle sidebar on mobile
|
|
||||||
if (window.innerWidth <= 768) {
|
|
||||||
sidebar.classList.add('collapsed');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Event listener untuk tombol logout
|
|
||||||
const logoutBtn = document.querySelector('.logout-btn');
|
|
||||||
if (logoutBtn) {
|
|
||||||
logoutBtn.addEventListener('click', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
// Simulasi logout
|
|
||||||
alert('Anda telah logout');
|
|
||||||
// Redirect ke halaman login
|
|
||||||
window.location.href = this.getAttribute('href');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update date and time in real-time
|
|
||||||
function updateDateTime() {
|
|
||||||
const now = new Date();
|
|
||||||
|
|
||||||
// Format date
|
|
||||||
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
|
|
||||||
const dateString = now.toLocaleDateString('id-ID', options);
|
|
||||||
|
|
||||||
// Format time
|
|
||||||
const hours = now.getHours().toString().padStart(2, '0');
|
|
||||||
const minutes = now.getMinutes().toString().padStart(2, '0');
|
|
||||||
const seconds = now.getSeconds().toString().padStart(2, '0');
|
|
||||||
const timeString = `${hours}:${minutes}:${seconds}`;
|
|
||||||
|
|
||||||
// Update DOM
|
|
||||||
document.getElementById('date').textContent = dateString;
|
|
||||||
document.getElementById('time').textContent = timeString;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initial call
|
|
||||||
updateDateTime();
|
|
||||||
|
|
||||||
// Update every second
|
|
||||||
setInterval(updateDateTime, 1000);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Fungsi untuk toggle sidebar
|
|
||||||
function toggleSidebar() {
|
|
||||||
const sidebar = document.querySelector('.sidebar');
|
|
||||||
sidebar.classList.toggle('collapsed');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Close dropdown when clicking outside
|
||||||
|
document.addEventListener('click', function(event) {
|
||||||
|
if (!event.target.closest('.mobile-header-right') && dropdownMenu) {
|
||||||
|
dropdownMenu.classList.remove('visible');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|||||||
@@ -1,8 +1,212 @@
|
|||||||
/* Floating circles background for frosted glass effect */
|
/* Reset CSS */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Struktur dasar */
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 100vh;
|
||||||
|
background: linear-gradient(135deg, #0077b6, #023e8a);
|
||||||
|
color: #ffffff; /* Warna teks putih */
|
||||||
|
text-shadow: 0 1px 3px rgba(0,0,0,0.5); /* Bayangan teks */
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
overflow-y: auto; /* Scroll di seluruh halaman */
|
||||||
|
padding: 0 20px; /* Tambahan padding horizontal */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Universal Header (works for both desktop and mobile) */
|
||||||
|
header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
backdrop-filter: blur(35px);
|
||||||
|
border-radius: 0 0 20px 20px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 20px 25px; /* Increased vertical padding */
|
||||||
|
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
|
||||||
|
min-height: 110px; /* Significantly taller header */
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap; /* Allow elements to wrap on smaller screens */
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15px; /* Consistent spacing between elements */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Universal Header Elements */
|
||||||
|
.mobile-header-user-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15px;
|
||||||
|
min-width: 50%; /* Ensure proper wrapping behavior */
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-header-title {
|
||||||
|
font-size: 28px; /* Consistent size for all devices */
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-header-icon svg {
|
||||||
|
width: 36px; /* Slightly larger for visibility */
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-header-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
right: 0;
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 10px;
|
||||||
|
z-index: 100;
|
||||||
|
min-width: 200px;
|
||||||
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu.visible {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu button {
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
padding: 10px 15px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu button:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-header-menu-button {
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
border: none;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 54px; /* Generous touch target */
|
||||||
|
min-width: 54px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-header-menu-button svg {
|
||||||
|
width: 36px; /* Consistent icon size */
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-header-avatar {
|
||||||
|
width: 54px; /* Consistent avatar size */
|
||||||
|
height: 54px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Konten kiri header */
|
||||||
|
header .user-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Konten kanan header */
|
||||||
|
header .header-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px; /* Jarak antar ikon/avatar */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Area konten tanpa scroll sendiri */
|
||||||
|
main {
|
||||||
|
flex: 1;
|
||||||
|
padding: 20px;
|
||||||
|
height: auto; /* Tinggi disesuaikan dengan konten */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Kontainer konten */
|
||||||
|
.layout-content-container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Peningkatan kontras teks */
|
||||||
|
h1, h2, h3, h4, h5, h6,
|
||||||
|
p, span, div, td, th, li {
|
||||||
|
color: #F0F8FF !important; /* AliceBlue, off-white for softer look */
|
||||||
|
text-shadow: none !important; /* Remove text shadow */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Kartu dan elemen UI */
|
||||||
|
.card, .bg-\[\#ededed\] {
|
||||||
|
background: rgba(255, 255, 255, 0.25);
|
||||||
|
backdrop-filter: blur(25px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.4);
|
||||||
|
border-radius: 16px;
|
||||||
|
margin: 15px 0;
|
||||||
|
padding: 20px;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tombol */
|
||||||
|
button {
|
||||||
|
background: rgba(0, 150, 199, 0.7);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.4);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
border-radius: 12px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
color: #000 !important;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 10px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 5px 15px rgba(0, 150, 199, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tabel */
|
||||||
|
table {
|
||||||
|
background: rgba(255, 255, 255, 0.15);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-radius: 15px;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
table-layout: fixed; /* Ensure proportional columns */
|
||||||
|
}
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
padding: 12px 15px;
|
||||||
|
color: #F0F8FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Proportional Columns */
|
||||||
|
th:nth-child(1), td:nth-child(1) { width: 50%; }
|
||||||
|
th:nth-child(2), td:nth-child(2) { width: 20%; }
|
||||||
|
th:nth-child(3), td:nth-child(3) { width: 30%; }
|
||||||
|
|
||||||
|
/* Floating circles background */
|
||||||
.floating-circles {
|
.floating-circles {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left极: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -15,407 +219,279 @@
|
|||||||
list-style: none;
|
list-style: none;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
background: rgba(72, 202, 228, 0.15);
|
background: rgba(72, 202, 228, 0.5);
|
||||||
border-radius: 50%;
|
animation: floating 25s linear infinite;
|
||||||
animation: float 25s linear infinite;
|
|
||||||
bottom: -150px;
|
bottom: -150px;
|
||||||
z-index: -1;
|
border-radius: 50%;
|
||||||
|
z-index: 1;
|
||||||
|
animation-fill-mode: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes float {
|
/* Floating animation */
|
||||||
|
@keyframes floating {
|
||||||
0% {
|
0% {
|
||||||
transform: translateY(0) rotate(0deg);
|
transform: translate(0, 0) rotate(0deg);
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
25% {
|
||||||
|
transform: translate(-50px, -250px) rotate(90deg);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translate(50px, -500px) rotate(180deg);
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: translate(-30px, -750px) rotate(270deg);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
100% {
|
100% {
|
||||||
transform: translateY(-1000px) rotate(720deg);
|
transform: translate(0, -1000px) rotate(360deg);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Configure floating circles */
|
/* Responsivitas */
|
||||||
.floating-circles li:nth-child(1) { left: 25%; width: 80px; height: 80px; animation-delay: 0s; }
|
@media (max-width: 768px) {
|
||||||
.floating-circles li:nth-child(2) { left: 10%; width: 20px; height: 20px; animation-delay: 2s; animation-duration: 12s; }
|
body {
|
||||||
.floating-circles li:nth-child(3) { left: 70%; width: 20px; height: 20px; animation-delay: 4s; }
|
padding: 0 10px;
|
||||||
.floating-circles li:nth-child(4) { left: 40%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s; }
|
}
|
||||||
.floating-circles li:nth-child(5) { left: 65%; width: 20px; height: 20极x; animation-delay: 0s; }
|
|
||||||
.floating-circles li:nth-child(6) { left: 75%; width: 110px; height: 110px; animation-delay: 3s; }
|
|
||||||
.floating-circles li:nth-child(7) { left: 35%; width: 150px; height: 150px; animation-delay: 7s; }
|
|
||||||
.floating-circles li:nth-child(8) { left: 50%; width: 25px; height: 25px; animation-delay: 15s; animation-duration: 45s; }
|
|
||||||
.floating-circles li:nth-child(9) { left: 20%; width: 15px; height: 15px; animation-delay: 2s; animation-duration: 35s; }
|
|
||||||
.floating-circles li:nth-child(10) { left: 85%; width: 150px; height: 150px; animation-delay: 0s; animation-duration: 11s; }
|
|
||||||
|
|
||||||
/* Reset CSS */
|
/* Removed mobile-specific scaling as we now have universal styles */
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Color Variables */
|
/* Stat Cards */
|
||||||
:root {
|
#stat-cards, #secondary-stats {
|
||||||
--dark-blue: #03045e;
|
|
||||||
--blue: #023e8a;
|
|
||||||
--light-blue: #0077b6;
|
|
||||||
--accent-blue: #0096c7;
|
|
||||||
--bright-blue: #48cae4;
|
|
||||||
--pale-blue: #ade8f4;
|
|
||||||
--white: #ffffff;
|
|
||||||
--light-gray: #f5f5f5;
|
|
||||||
--text-dark: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
display: flex;
|
|
||||||
min-height: 100vh;
|
|
||||||
background: linear-gradient(135deg, #0077b6, #023e8a);
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sidebar dan main content sebagai anak langsung body */
|
|
||||||
.sidebar {
|
|
||||||
width: 250px;
|
|
||||||
height: 100vh;
|
|
||||||
background: var(--white);
|
|
||||||
color: var(--dark-blue);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
transition: transform 0.3s ease;
|
gap: 15px;
|
||||||
z-index: 100;
|
}
|
||||||
border-right: 1px solid rgba(0, 0, 0, 0.1);
|
|
||||||
|
main {
|
||||||
|
padding: 10px;
|
||||||
|
height: calc(100vh - 120px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-content-container {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card, .bg-\[\#ededed\] {
|
||||||
|
padding: 15px;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 8px 15px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-content {
|
/* Definitive Vertical Layout */
|
||||||
flex: 1;
|
.controls-container,
|
||||||
display: flex;
|
.card-container {
|
||||||
flex-direction: column;
|
display: block;
|
||||||
height: 100vh;
|
}
|
||||||
overflow-y: auto;
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
/* Definitive Horizontal Layout for Stat Cards */
|
||||||
backdrop-filter: blur(20px);
|
#stat-cards, #secondary-stats {
|
||||||
}
|
|
||||||
|
|
||||||
/* Sidebar Styles */
|
|
||||||
.sidebar {
|
|
||||||
width: 250px;
|
|
||||||
background: var(--white);
|
|
||||||
color: var(--dark-blue);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
transition: width 0.3s ease, transform 0.3s ease;
|
|
||||||
z-index: 100;
|
|
||||||
border-right: 1px solid rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-header {
|
|
||||||
padding: 20px;
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: var(--dark-blue);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-nav {
|
|
||||||
flex: 1;
|
|
||||||
padding: 20px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 12px 20px;
|
|
||||||
color: var(--dark-blue);
|
|
||||||
text-decoration: none;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item i {
|
|
||||||
margin-right: 10px;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item.active {
|
|
||||||
background: var(--pale-blue);
|
|
||||||
color: var(--dark-blue);
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item:hover:not(.active) {
|
|
||||||
background-color: rgba(255, 255, 255, 0.1);
|
|
||||||
color: var(--white);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-footer {
|
|
||||||
padding: 20px;
|
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.logout-btn {
|
|
||||||
color: var(--dark-blue);
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logout-btn:hover {
|
|
||||||
color: var(--blue);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Main Content Styles */
|
|
||||||
.main-content {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow-y: auto;
|
|
||||||
background: transparent;
|
|
||||||
backdrop-filter: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.greeting-section {
|
|
||||||
padding: 20px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: flex-start; /* Pindahkan ke atas */
|
|
||||||
}
|
|
||||||
|
|
||||||
.greeting-card {
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
border-radius: 20px;
|
|
||||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
|
||||||
padding: 20px;
|
|
||||||
width: 95%;
|
|
||||||
max-width: 1000px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-column {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-pic {
|
#stat-cards > div, #secondary-stats > div {
|
||||||
width: 100px;
|
flex: 1; /* Ensure cards share space equally */
|
||||||
height: 100px;
|
|
||||||
border-radius: 50%;
|
|
||||||
overflow: hidden;
|
|
||||||
border: 3px solid white;
|
|
||||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-pic img {
|
/* Ensure cards within the container stack vertically */
|
||||||
width: 100%;
|
.card-container > div {
|
||||||
height: 100%;
|
margin-bottom: 20px; /* Add space between vertical cards */
|
||||||
object-fit: cover;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-info h2 {
|
/* Force dark text in knowledge table for readability */
|
||||||
font-size: 1.8rem;
|
.knowledge-table,
|
||||||
color: white;
|
.knowledge-table * {
|
||||||
margin-bottom: 5px;
|
color: #333333 !important;
|
||||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-info p {
|
/* Style the top buttons container */
|
||||||
font-size: 1.1rem;
|
.controls-inner-container {
|
||||||
color: var(--pale-blue);
|
|
||||||
}
|
|
||||||
|
|
||||||
.actions-column {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
justify-content: space-between;
|
||||||
align-items: flex-end;
|
gap: 20px;
|
||||||
gap: 15px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.datetime-small {
|
/* Definitive Compact Bar Chart Styling */
|
||||||
text-align: right;
|
.compact-bar-chart {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto 1fr; /* Label and bar */
|
||||||
|
gap: 0.5rem 1rem; /* Vertical and horizontal gap */
|
||||||
|
align-items: center;
|
||||||
|
padding: 1rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#date {
|
.bar-wrapper {
|
||||||
font-size: 0.9rem;
|
background-color: rgba(0, 0, 0, 0.1);
|
||||||
color: white;
|
border-radius: 4px;
|
||||||
margin-bottom: 5px;
|
height: 8px; /* Wrapper height */
|
||||||
}
|
}
|
||||||
|
|
||||||
#time {
|
.bar {
|
||||||
font-size: 1.2rem;
|
background-color: #ededed;
|
||||||
color: white;
|
height: 100%;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* RAG Section Styling */
|
||||||
|
.rag-section-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-button {
|
||||||
|
background-color: #0077b6;
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-active {
|
||||||
|
color: #28a745 !important; /* Green */
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icons-container {
|
.status-inactive {
|
||||||
|
color: #dc3545 !important; /* Red */
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-btn {
|
.view-button, .delete-button {
|
||||||
background: none;
|
padding: 2px 10px; /* Shorter buttons */
|
||||||
border: none;
|
font-size: 12px;
|
||||||
cursor: pointer;
|
min-width: 60px;
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
transition: background 0.3s ease;
|
|
||||||
color: white;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-btn:hover {
|
/* Clean RAG Section Styling */
|
||||||
background: rgba(255, 255, 255, 0.2);
|
.knowledge-table {
|
||||||
}
|
|
||||||
|
|
||||||
/* Card Grid Styles */
|
|
||||||
.card-grid {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 20px;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
border-collapse: collapse;
|
||||||
|
background: #FFFFFF; /* Solid white background */
|
||||||
.card {
|
border-radius: 15px;
|
||||||
flex: 1 1 300px;
|
|
||||||
background: var(--white);
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 20px;
|
|
||||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
z-index: 2;
|
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card i {
|
.knowledge-table th, .knowledge-table td {
|
||||||
font-size: 2.5rem;
|
padding: 12px 15px;
|
||||||
color: #0096c7;
|
text-align: left;
|
||||||
margin-bottom: 15px;
|
color: #333333; /* Dark text for contrast */
|
||||||
}
|
}
|
||||||
|
|
||||||
.card h3 {
|
.table-header-row th {
|
||||||
font-size: 1.2rem;
|
background: #f5f5f5;
|
||||||
color: #023e8a;
|
padding: 0;
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card .card-value {
|
.knowledge-header {
|
||||||
font-size: 2rem;
|
display: flex;
|
||||||
font-weight: bold;
|
justify-content: space-between;
|
||||||
color: #03045e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.placeholder-card {
|
|
||||||
background-color: var(--white);
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 30px;
|
|
||||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.placeholder-card p {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
color: var(--light-blue);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hamburger button styles */
|
|
||||||
.hamburger-btn {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: var(--dark-blue);
|
|
||||||
font-size: 1.5rem;
|
|
||||||
cursor: pointer;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-only {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive Design */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.mobile-only {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hamburger-btn {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
right: 20px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
z-index: 101;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar .hamburger-btn {
|
|
||||||
right: 15px;
|
|
||||||
top: 20px;
|
|
||||||
color: var(--dark-blue);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
position: fixed;
|
|
||||||
height: 100%;
|
|
||||||
transform: translate极(-100%);
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar.active {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo span, .nav-item span {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item {
|
|
||||||
justify-content: center;
|
|
||||||
padding: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item i {
|
|
||||||
margin-right: 0;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logout-btn span {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.greeting-card {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.actions-column {
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
padding: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.datetime-small {
|
.knowledge-header h2 {
|
||||||
text-align: center;
|
font-size: 22px;
|
||||||
width: 100%;
|
font-weight: bold;
|
||||||
}
|
color: #333333;
|
||||||
|
}
|
||||||
.icons-container {
|
|
||||||
justify-content: center;
|
.upload-button {
|
||||||
width: 100%;
|
background: #0077b6;
|
||||||
}
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.knowledge-table th {
|
||||||
|
background: #f0f0f0;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.knowledge-table tr {
|
||||||
|
border-bottom: 1px solid #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.knowledge-table tr:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rag-table tr {
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rag-table tr:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Enhanced status badges */
|
||||||
|
.status-badge {
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-active {
|
||||||
|
background-color: rgba(40, 167, 69, 0.2);
|
||||||
|
color: #28a745 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-inactive {
|
||||||
|
background-color: rgba(220, 53, 69, 0.2);
|
||||||
|
color: #dc3545 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view-button, .delete-button {
|
||||||
|
padding: 8px 16px;
|
||||||
|
font-size: 13px;
|
||||||
|
min-width: 80px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view-button:hover, .delete-button:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.view-button {
|
||||||
|
background-color: #007bff;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-button {
|
||||||
|
background-color: #dc3545;
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|||||||
270
dashboard.md
Normal file
270
dashboard.md
Normal file
@@ -0,0 +1,270 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="" />
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
as="style"
|
||||||
|
onload="this.rel='stylesheet'"
|
||||||
|
href="https://fonts.googleapis.com/css2?display=swap&family=Inter%3Awght%40400%3B500%3B700%3B900&family=Noto+Sans%3Awght%40400%3B500%3B700%3B900"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<title>Stitch Design</title>
|
||||||
|
<link rel="icon" type="image/x-icon" href="data:image/x-icon;base64," />
|
||||||
|
|
||||||
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="relative flex size-full min-h-screen flex-col bg-neutral-50 group/design-root overflow-x-hidden" style='font-family: Inter, "Noto Sans", sans-serif;'>
|
||||||
|
<div class="layout-container flex h-full grow flex-col">
|
||||||
|
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-b-[#ededed] px-10 py-3">
|
||||||
|
<div class="flex items-center gap-4 text-[#141414]">
|
||||||
|
<div class="size-4">
|
||||||
|
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path
|
||||||
|
d="M44 11.2727C44 14.0109 39.8386 16.3957 33.69 17.6364C39.8386 18.877 44 21.2618 44 24C44 26.7382 39.8386 29.123 33.69 30.3636C39.8386 31.6043 44 33.9891 44 36.7273C44 40.7439 35.0457 44 24 44C12.9543 44 4 40.7439 4 36.7273C4 33.9891 8.16144 31.6043 14.31 30.3636C8.16144 29.123 4 26.7382 4 24C4 21.2618 8.16144 18.877 14.31 17.6364C8.16144 16.3957 4 14.0109 4 11.2727C4 7.25611 12.9543 4 24 4C35.0457 4 44 7.25611 44 11.2727Z"
|
||||||
|
fill="currentColor"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-[#141414] text-lg font-bold leading-tight tracking-[-0.015em]">BeautyBot Analytics</h2>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-1 justify-end gap-8">
|
||||||
|
<button
|
||||||
|
class="flex max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-10 bg-[#ededed] text-[#141414] gap-2 text-sm font-bold leading-normal tracking-[0.015em] min-w-0 px-2.5"
|
||||||
|
>
|
||||||
|
<div class="text-[#141414]" data-icon="List" data-size="20px" data-weight="regular">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" fill="currentColor" viewBox="0 0 256 256">
|
||||||
|
<path
|
||||||
|
d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
<div
|
||||||
|
class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10"
|
||||||
|
style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDdsEbNptWuGWnUFVjxjJbETG3Ux0dsBq6vJXBqGqxirKQZ5h08CrhYiwt89C2-bjXZjh3bpwhhheIQH7TY4OfQvZjIE93FvpVViGxSvYuMDJylveD2lc-daeSlCOr8t64jpRbHrEXM0JGuM-CGz99i7dCKdfgcBu7EEecYOxvaPyTNOskRBL3yUkN9tJ659LAKvkEeum2-SYZ1htR83YgVFVP-n8-XoZBoQaa5W7vOC0TZtlOldU-Cq8EkbxM_HQH3prpaomyTJdCF");'
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="px-40 flex flex-1 justify-center py-5">
|
||||||
|
<div class="layout-content-container flex flex-col max-w-[960px] flex-1">
|
||||||
|
<h2 class="text-[#141414] tracking-light text-[28px] font-bold leading-tight px-4 text-left pb-3 pt-5">Chatbot Performance Overview</h2>
|
||||||
|
<div class="flex justify-stretch">
|
||||||
|
<div class="flex flex-1 gap-3 flex-wrap px-4 py-3 justify-between">
|
||||||
|
<button
|
||||||
|
class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-10 px-4 bg-[#ededed] text-[#141414] text-sm font-bold leading-normal tracking-[0.015em]"
|
||||||
|
>
|
||||||
|
<span class="truncate">Pilih Rentang Tanggal</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-10 px-4 bg-black text-neutral-50 text-sm font-bold leading-normal tracking-[0.015em]"
|
||||||
|
>
|
||||||
|
<span class="truncate">Ekspor Data</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-wrap gap-4 p-4">
|
||||||
|
<div class="flex min-w-[158px] flex-1 flex-col gap-2 rounded-xl p-6 bg-[#ededed]">
|
||||||
|
<p class="text-[#141414] text-base font-medium leading-normal">Total Obrolan</p>
|
||||||
|
<p class="text-[#141414] tracking-light text-2xl font-bold leading-tight">1.250</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex min-w-[158px] flex-1 flex-col gap-2 rounded-xl p-6 bg-[#ededed]">
|
||||||
|
<p class="text-[#141414] text-base font-medium leading-normal">Topik Trending</p>
|
||||||
|
<p class="text-[#141414] tracking-light text-2xl font-bold leading-tight">Perawatan Kulit</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex min-w-[158px] flex-1 flex-col gap-2 rounded-xl p-6 bg-[#ededed]">
|
||||||
|
<p class="text-[#141414] text-base font-medium leading-normal">Permintaan Pemesanan</p>
|
||||||
|
<p class="text-[#141414] tracking-light text-2xl font-bold leading-tight">320</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex min-w-[158px] flex-1 flex-col gap-2 rounded-xl p-6 bg-[#ededed]">
|
||||||
|
<p class="text-[#141414] text-base font-medium leading-normal">Pemesanan Ditindaklanjuti</p>
|
||||||
|
<p class="text-[#141414] tracking-light text-2xl font-bold leading-tight">280</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-[#141414] text-[22px] font-bold leading-tight tracking-[-0.015em] px-4 pb-3 pt-5">Aktivitas Obrolan</h2>
|
||||||
|
<div class="flex flex-wrap gap-4 px-4 py-6">
|
||||||
|
<div class="flex min-w-72 flex-1 flex-col gap-2">
|
||||||
|
<p class="text-[#141414] text-base font-medium leading-normal">Aktivitas Obrolan Berdasarkan Saluran</p>
|
||||||
|
<p class="text-[#141414] tracking-light text-[32px] font-bold leading-tight truncate">+15%</p>
|
||||||
|
<div class="flex gap-1">
|
||||||
|
<p class="text-neutral-500 text-base font-normal leading-normal">7 Hari Terakhir</p>
|
||||||
|
<p class="text-[#078807] text-base font-medium leading-normal">+15%</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex min-h-[180px] flex-1 flex-col gap-8 py-4">
|
||||||
|
<svg width="100%" height="148" viewBox="-3 0 478 150" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
|
||||||
|
<path
|
||||||
|
d="M0 109C18.1538 109 18.1538 21 36.3077 21C54.4615 21 54.4615 41 72.6154 41C90.7692 41 90.7692 93 108.923 93C127.077 93 127.077 33 145.231 33C163.385 33 163.385 101 181.538 101C199.692 101 199.692 61 217.846 61C236 61 236 45 254.154 45C272.308 45 272.308 121 290.462 121C308.615 121 308.615 149 326.769 149C344.923 149 344.923 1 363.077 1C381.231 1 381.231 81 399.385 81C417.538 81 417.538 129 435.692 129C453.846 129 453.846 25 472 25V149H326.769H0V109Z"
|
||||||
|
fill="url(#paint0_linear_1131_5935)"
|
||||||
|
></path>
|
||||||
|
<path
|
||||||
|
d="M0 109C18.1538 109 18.1538 21 36.3077 21C54.4615 21 54.4615 41 72.6154 41C90.7692 41 90.7692 93 108.923 93C127.077 93 127.077 33 145.231 33C163.385 33 163.385 101 181.538 101C199.692 101 199.692 61 217.846 61C236 61 236 45 254.154 45C272.308 45 272.308 121 290.462 121C308.615 121 308.615 149 326.769 149C344.923 149 344.923 1 363.077 1C381.231 1 381.231 81 399.385 81C417.538 81 417.538 129 435.692 129C453.846 129 453.846 25 472 25"
|
||||||
|
stroke="#737373"
|
||||||
|
stroke-width="3"
|
||||||
|
stroke-linecap="round"
|
||||||
|
></path>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="paint0_linear_1131_5935" x1="236" y1="1" x2="236" y2="149" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#ededed"></stop>
|
||||||
|
<stop offset="1" stop-color="#ededed" stop-opacity="0"></stop>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
<div class="flex justify-around">
|
||||||
|
<p class="text-neutral-500 text-[13px] font-bold leading-normal tracking-[0.015em]">Sen</p>
|
||||||
|
<p class="text-neutral-500 text-[13px] font-bold leading-normal tracking-[0.015em]">Sel</p>
|
||||||
|
<p class="text-neutral-500 text-[13px] font-bold leading-normal tracking-[0.015em]">Rab</p>
|
||||||
|
<p class="text-neutral-500 text-[13px] font-bold leading-normal tracking-[0.015em]">Kam</p>
|
||||||
|
<p class="text-neutral-500 text-[13px] font-bold leading-normal tracking-[0.015em]">Jum</p>
|
||||||
|
<p class="text-neutral-500 text-[13px] font-bold leading-normal tracking-[0.015em]">Sab</p>
|
||||||
|
<p class="text-neutral-500 text-[13px] font-bold leading-normal tracking-[0.015em]">Min</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-wrap gap-4 px-4 py-6">
|
||||||
|
<div class="flex min-w-72 flex-1 flex-col gap-2 rounded-xl border border-[#dbdbdb] p-6">
|
||||||
|
<p class="text-[#141414] text-base font-medium leading-normal">Aktivitas Obrolan Berdasarkan Platform</p>
|
||||||
|
<p class="text-[#141414] tracking-light text-[32px] font-bold leading-tight truncate">+15%</p>
|
||||||
|
<div class="flex gap-1">
|
||||||
|
<p class="text-neutral-500 text-base font-normal leading-normal">7 Hari Terakhir</p>
|
||||||
|
<p class="text-[#078807] text-base font-medium leading-normal">+15%</p>
|
||||||
|
</div>
|
||||||
|
<div class="grid min-h-[180px] gap-x-4 gap-y-6 grid-cols-[auto_1fr] items-center py-3">
|
||||||
|
<p class="text-neutral-500 text-[13px] font-bold leading-normal tracking-[0.015em]">Instagram</p>
|
||||||
|
<div class="h-full flex-1"><div class="border-neutral-500 bg-[#ededed] border-r-2 h-full" style="width: 10%;"></div></div>
|
||||||
|
<p class="text-neutral-500 text-[13px] font-bold leading-normal tracking-[0.015em]">Obrolan Web</p>
|
||||||
|
<div class="h-full flex-1"><div class="border-neutral-500 bg-[#ededed] border-r-2 h-full" style="width: 10%;"></div></div>
|
||||||
|
<p class="text-neutral-500 text-[13px] font-bold leading-normal tracking-[0.015em]">WhatsApp</p>
|
||||||
|
<div class="h-full flex-1"><div class="border-neutral-500 bg-[#ededed] border-r-2 h-full" style="width: 100%;"></div></div>
|
||||||
|
<p class="text-neutral-500 text-[13px] font-bold leading-normal tracking-[0.015em]">Telegram</p>
|
||||||
|
<div class="h-full flex-1"><div class="border-neutral-500 bg-[#ededed] border-r-2 h-full" style="width: 70%;"></div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-wrap gap-4 p-4">
|
||||||
|
<div class="flex min-w-[158px] flex-1 flex-col gap-2 rounded-xl p-6 bg-[#ededed]">
|
||||||
|
<p class="text-[#141414] text-base font-medium leading-normal">Total Respons AI</p>
|
||||||
|
<p class="text-[#141414] tracking-light text-2xl font-bold leading-tight">5.800</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-[#141414] text-[22px] font-bold leading-tight tracking-[-0.015em] px-4 pb-3 pt-5">Manajemen File RAG</h2>
|
||||||
|
<div class="px-4 py-3 @container">
|
||||||
|
<div class="flex overflow-hidden rounded-xl border border-[#dbdbdb] bg-neutral-50">
|
||||||
|
<table class="flex-1">
|
||||||
|
<thead>
|
||||||
|
<tr class="bg-neutral-50">
|
||||||
|
<th class="table-6b715932-5649-4a64-bb14-d2a7e93410d0-column-120 px-4 py-3 text-left text-[#141414] w-[400px] text-sm font-medium leading-normal">
|
||||||
|
Nama File
|
||||||
|
</th>
|
||||||
|
<th class="table-6b715932-5649-4a64-bb14-d2a7e93410d0-column-240 px-4 py-3 text-left text-[#141414] w-60 text-sm font-medium leading-normal">Status</th>
|
||||||
|
<th class="table-6b715932-5649-4a64-bb14-d2a7e93410d0-column-360 px-4 py-3 text-left text-[#141414] w-60 text-neutral-500 text-sm font-medium leading-normal">
|
||||||
|
Tindakan
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr class="border-t border-t-[#dbdbdb]">
|
||||||
|
<td class="table-6b715932-5649-4a64-bb14-d2a7e93410d0-column-120 h-[72px] px-4 py-2 w-[400px] text-[#141414] text-sm font-normal leading-normal">
|
||||||
|
Katalog Produk.pdf
|
||||||
|
</td>
|
||||||
|
<td class="table-6b715932-5649-4a64-bb14-d2a7e93410d0-column-240 h-[72px] px-4 py-2 w-60 text-sm font-normal leading-normal">
|
||||||
|
<button
|
||||||
|
class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-8 px-4 bg-[#ededed] text-[#141414] text-sm font-medium leading-normal w-full"
|
||||||
|
>
|
||||||
|
<span class="truncate">Aktif</span>
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="table-6b715932-5649-4a64-bb14-d2a7e93410d0-column-360 h-[72px] px-4 py-2 w-60 text-neutral-500 text-sm font-bold leading-normal tracking-[0.015em]"
|
||||||
|
>
|
||||||
|
Lihat, Hapus
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="border-t border-t-[#dbdbdb]">
|
||||||
|
<td class="table-6b715932-5649-4a64-bb14-d2a7e93410d0-column-120 h-[72px] px-4 py-2 w-[400px] text-[#141414] text-sm font-normal leading-normal">
|
||||||
|
Detail Layanan.pdf
|
||||||
|
</td>
|
||||||
|
<td class="table-6b715932-5649-4a64-bb14-d2a7e93410d0-column-240 h-[72px] px-4 py-2 w-60 text-sm font-normal leading-normal">
|
||||||
|
<button
|
||||||
|
class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-8 px-4 bg-[#ededed] text-[#141414] text-sm font-medium leading-normal w-full"
|
||||||
|
>
|
||||||
|
<span class="truncate">Aktif</span>
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="table-6b715932-5649-4a64-bb14-d2a7e93410d0-column-360 h-[72px] px-4 py-2 w-60 text-neutral-500 text-sm font-bold leading-normal tracking-[0.015em]"
|
||||||
|
>
|
||||||
|
Lihat, Hapus
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="border-t border-t-[#dbdbdb]">
|
||||||
|
<td class="table-6b715932-5649-4a64-bb14-d2a7e93410d0-column-120 h-[72px] px-4 py-2 w-[400px] text-[#141414] text-sm font-normal leading-normal">FAQ.pdf</td>
|
||||||
|
<td class="table-6b715932-5649-4a64-bb14-d2a7e93410d0-column-240 h-[72px] px-4 py-2 w-60 text-sm font-normal leading-normal">
|
||||||
|
<button
|
||||||
|
class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-8 px-4 bg-[#ededed] text-[#141414] text-sm font-medium leading-normal w-full"
|
||||||
|
>
|
||||||
|
<span class="truncate">Tidak Aktif</span>
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="table-6b715932-5649-4a64-bb14-d2a7e93410d0-column-360 h-[72px] px-4 py-2 w-60 text-neutral-500 text-sm font-bold leading-normal tracking-[0.015em]"
|
||||||
|
>
|
||||||
|
Lihat, Hapus
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<style>
|
||||||
|
@container(max-width:120px){.table-6b715932-5649-4a64-bb14-d2a7e93410d0-column-120{display: none;}}
|
||||||
|
@container(max-width:240px){.table-6b715932-5649-4a64-bb14-d2a7e93410d0-column-240{display: none;}}
|
||||||
|
@container(max-width:360px){.table-6b715932-5649-4a64-bb14-d2a7e93410d0-column-360{display: none;}}
|
||||||
|
</style>
|
||||||
|
</div>
|
||||||
|
<div class="flex px-4 py-3 justify-start">
|
||||||
|
<button
|
||||||
|
class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-10 px-4 bg-[#ededed] text-[#141414] text-sm font-bold leading-normal tracking-[0.015em]"
|
||||||
|
>
|
||||||
|
<span class="truncate">Unggah File Baru</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-[#141414] text-[22px] font-bold leading-tight tracking-[-0.015em] px-4 pb-3 pt-5">Wawasan Bisnis</h2>
|
||||||
|
<p class="text-[#141414] text-base font-normal leading-normal pb-3 pt-1 px-4">
|
||||||
|
Berdasarkan data chatbot, ada tren yang mencolok dalam pertanyaan terkait perawatan kulit, yang mengindikasikan minat pelanggan yang tinggi. Permintaan pemesanan
|
||||||
|
cukup besar, dengan tingkat tindak lanjut yang baik, menunjukkan keterlibatan pelanggan yang efektif. Wawasan ini dapat menginformasikan pemasaran yang ditargetkan
|
||||||
|
dan peningkatan layanan.
|
||||||
|
</p>
|
||||||
|
<h2 class="text-[#141414] text-[22px] font-bold leading-tight tracking-[-0.015em] px-4 pb-3 pt-5">Wawasan Pemasaran</h2>
|
||||||
|
<div class="flex flex-wrap gap-4 p-4">
|
||||||
|
<div class="flex min-w-[158px] flex-1 flex-col gap-2 rounded-xl p-6 bg-[#ededed]">
|
||||||
|
<p class="text-[#141414] text-base font-medium leading-normal">Rata-rata Waktu Respons AI</p>
|
||||||
|
<p class="text-[#141414] tracking-light text-2xl font-bold leading-tight">2,5 detik</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex min-w-[158px] flex-1 flex-col gap-2 rounded-xl p-6 bg-[#ededed]">
|
||||||
|
<p class="text-[#141414] text-base font-medium leading-normal">Jam Aktivitas Puncak</p>
|
||||||
|
<p class="text-[#141414] tracking-light text-2xl font-bold leading-tight">15.00 - 19.00</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex min-w-[158px] flex-1 flex-col gap-2 rounded-xl p-6 bg-[#ededed]">
|
||||||
|
<p class="text-[#141414] text-base font-medium leading-normal">Efektivitas Promosi</p>
|
||||||
|
<p class="text-[#141414] tracking-light text-2xl font-bold leading-tight">Tingkat Konversi 15%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-[#141414] text-[22px] font-bold leading-tight tracking-[-0.015em] px-4 pb-3 pt-5">Saran Konten Mingguan</h2>
|
||||||
|
<p class="text-[#141414] text-base font-normal leading-normal pb-3 pt-1 px-4">
|
||||||
|
Berdasarkan data chatbot, topik yang sedang tren minggu ini adalah 'Perawatan Kulit untuk Kulit Sensitif'. Kami sarankan untuk membuat postingan media sosial yang
|
||||||
|
menyoroti produk perawatan kulit yang lembut dan bebas pewangi, dengan ajakan bertindak 'Pesan konsultasi gratis sekarang'.
|
||||||
|
</p>
|
||||||
|
<h2 class="text-[#141414] text-[22px] font-bold leading-tight tracking-[-0.015em] px-4 pb-3 pt-5">Broadcast Promo</h2>
|
||||||
|
<div class="flex px-4 py-3 justify-start">
|
||||||
|
<button
|
||||||
|
class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-10 px-4 bg-black text-neutral-50 text-sm font-bold leading-normal tracking-[0.015em]"
|
||||||
|
>
|
||||||
|
<span class="truncate">Kirim Promo ke Semua Nomor WhatsApp</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user