emmanuel.rizky/demo-mayagen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
158b6d0886c2adaefc768d090b9f830d909cbbf4
demo-mayagen/dashboard-page/index.html
Emmanuel Rizky 158b6d0886 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.
2025-07-17 09:18:04 +07:00

239 lines
14 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<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>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">
</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;">
<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 -->
<ul class="floating-circles">
<li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li>
</ul>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink