Emmanuel Rizky
158b6d0886
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.
271 lines
20 KiB
Markdown
271 lines
20 KiB
Markdown
<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>
|