feat(chat): Integrate chatbot API for dynamic responses

This commit replaces the static, simulated chat functionality with a live integration to a chatbot backend API.

The chat page now sends user messages to a webhook endpoint using the `fetch` API. It implements session management by generating and storing a `sessionId` in `localStorage` to maintain conversation context between requests.

Key changes:
- Implement `async` `sendMessage` function to post to the chatbot API.
- Add session ID generation and persistence.
- Dynamically render text and image responses from the API.
- Remove hardcoded example messages from the HTML.
- Update the virtual assistant's name to "Maya".
- Fix navigation links from the dashboard to the chat page.

dashboard-page/styles/main.css

@@ -18,6 +18,14 @@ body {
   padding: 0 20px; /* Tambahan padding horizontal */
 }
 
+/* Container for responsive design */
+.container {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 15px;
+}
+
 /* Universal Header (works for both desktop and mobile) */
 header {
   position: sticky;
@@ -27,18 +35,19 @@ header {
   backdrop-filter: blur(35px);
   border-radius: 0 0 20px 20px;
   margin: 0;
-  padding: 20px 25px; /* Increased vertical padding */
+  padding: 20px 25px;
   box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
-  min-height: 110px; /* Significantly taller header */
+  min-height: 110px;
   width: 100%;
   max-width: 100%;
   display: flex;
-  flex-wrap: wrap; /* Allow elements to wrap on smaller screens */
+  flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
-  gap: 15px; /* Consistent spacing between elements */
+  gap: 15px;
 }
 
+
 /* Universal Header Elements */
 .mobile-header-user-info {
   display: flex;
@@ -253,12 +262,37 @@ th:nth-child(3), td:nth-child(3) { width: 30%; }
 
 /* Responsivitas */
 @media (max-width: 768px) {
+  /* Show mobile elements, hide desktop nav */
+  .mobile-header-user-info,
+  .mobile-header-right {
+    display: flex;
+  }
+  
+  .desktop-nav {
+    display: none;
+  }
+  
+  /* Stack cards vertically on mobile */
+  #stat-cards, #secondary-stats {
+    grid-template-columns: 1fr;
+  }
+  
+  /* Adjust header layout for mobile */
+  header {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 15px;
+  }
+  
+  .mobile-header-right {
+    align-self: flex-end;
+    margin-top: -50px;
+  }
+
   body {
     padding: 0 10px;
   }
 
-/* Removed mobile-specific scaling as we now have universal styles */
-
   /* Stat Cards */
   #stat-cards, #secondary-stats {
     flex-direction: column;
@@ -285,24 +319,35 @@ th:nth-child(3), td:nth-child(3) { width: 30%; }
   }
 }
 
+@media (min-width: 769px) {
+  /* Adjust header layout for desktop */
+  header {
+    padding: 15px 25px;
+  }
+  
+  .mobile-header-user-info {
+    display: flex;
+    align-items: center;
+  }
+  
+  .mobile-header-right {
+    display: flex;
+  }
+}
+
 /* Definitive Vertical Layout */
 .controls-container,
 .card-container {
     display: block;
 }
 
-/* Definitive Horizontal Layout for Stat Cards */
+/* Responsive Layout for Cards */
 #stat-cards, #secondary-stats {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 20px;
 }
 
-#stat-cards > div, #secondary-stats > div {
-    flex: 1; /* Ensure cards share space equally */
-}
-
 /* Ensure cards within the container stack vertically */
 .card-container > div {
     margin-bottom: 20px; /* Add space between vertical cards */