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.

chat-page/script.js

@@ -145,6 +145,15 @@ document.addEventListener('DOMContentLoaded', () => {
     
 // Update avatar utama dengan inisial dari nama saat halaman dimuat
 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 userInitial = userName.split(' ').map(n => n[0]).join('').substring(0, 1);
     document.querySelector('.avatar').textContent = userInitial;

chat-page/style.css

@@ -22,7 +22,7 @@ body {
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
     width: 100%;
     max-width: 800px;
-    height: 90vh;
+    height: calc(var(--vh, 1vh) * 90); /* Menggunakan variabel viewport height */
     max-height: 800px;
     display: flex;
     flex-direction: column;