ok

src/App.css

@@ -1,5 +1,4 @@
 .App {
-  height: 100vh;
   display: flex;
   align-items: end;
   justify-content: center;

src/ChatBot.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import styles from './ChatBot.module.css';
 
-const ChatBot = () => {
+const ChatBot = ({existingConversation, readOnly, hh}) => {
   const [messages, setMessages] = useState([
     {
       sender: 'bot',
@@ -14,9 +14,15 @@ const ChatBot = () => {
       ],
     },
   ]);
+
   const [input, setInput] = useState('');
   const [isLoading, setIsLoading] = useState(false);
+useEffect(()=>{
 
+  if (existingConversation && existingConversation.length > 0) {
+    setMessages(existingConversation);
+  }
+}, [existingConversation])
   useEffect(() => {
     if (!localStorage.getItem('session')) {
       function generateUUID() {
@@ -46,7 +52,7 @@ const ChatBot = () => {
 
     setMessages(newMessages);
     setInput('');
-    setIsLoading(true);
+setTimeout(() => setIsLoading(true), 1000);
 
     try {
       // Send to backend
@@ -85,7 +91,7 @@ const ChatBot = () => {
   };
 
   return (
-    <div className={styles.chatContainer}>
+    <div className={styles.chatContainer} style={{height: hh || '100vh'}}>
       <div className={styles.chatHeader}>
         <img src="https://i.ibb.co/YXxXr72/bot-avatar.png" alt="Bot Avatar" />
         <strong>Kloowear AI Assistant</strong>
@@ -145,7 +151,7 @@ const ChatBot = () => {
         ))}
       </div>
 
-      <div className={styles.chatInput}>
+      <div className={styles.chatInput} style={{visibility: readOnly? 'hidden': 'visible', marginTop: readOnly? '-59px' : '0px'}}>
         <input
           type="text"
           placeholder="Ketik pesan..."

src/ChatBot.module.css

@@ -5,8 +5,8 @@
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
   display: flex;
   flex-direction: column;
-  height: 71vh;
+  height: 100vh;
-  overflow: hidden;
+  overflow: auto;
 }
 
 .chatHeader {

src/Conversations.js

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import ChatBot from './ChatBot'; // Adjust path if needed
+
+const modalStyle = {
+  position: 'fixed',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  background: '#fff',
+  padding: '5px',
+  zIndex: 1000,
+  borderRadius: '12px',
+  maxHeight: '70%',
+  overflowY: 'auto',
+};
+
+const overlayStyle = {
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  backgroundColor: 'rgba(0, 0, 0, 0.4)',
+  zIndex: 999,
+};
+
+const boxStyle = {
+  backgroundColor: '#f0f0f0',
+  padding: '16px 20px',
+  margin: '12px 0',
+  borderRadius: '12px',
+  cursor: 'pointer',
+  fontWeight: 'bold',
+};
+
+const Conversations = ({ conversations }) => {
+  const [selectedConv, setSelectedConv] = useState(null);
+
+  const closeModal = () => setSelectedConv(null);
+
+  return (
+    <div>
+      <h2>Daftar Percakapan</h2>
+      {conversations.map((conv, idx) => (
+        <div
+          key={idx}
+          style={boxStyle}
+          onClick={() => {console.log(conv);setSelectedConv(conv.messages);}}
+        >
+          Conversation #{idx + 1}
+        </div>
+      ))}
+
+      {selectedConv && (
+        <>
+          <div style={overlayStyle} onClick={closeModal} />
+          <div style={modalStyle}>
+            <ChatBot existingConversation={selectedConv} readOnly={true} hh={'60vh'}/>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default Conversations;

src/Dashboard.js

@@ -1,30 +1,81 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styles from './Dashboard.module.css';
 import { Chart, LineElement, PointElement, LineController, CategoryScale, LinearScale, Title, Tooltip, Legend } from 'chart.js';
 
+import Modal from './Modal';
+import Conversations from './Conversations';
+import DiscussedTopics from './DiscussedTopics';
+
 Chart.register(LineElement, PointElement, LineController, CategoryScale, LinearScale, Title, Tooltip, Legend);
 
 const Dashboard = () => {
   const chartRef = useRef(null);
   const chartInstanceRef = useRef(null);
 
+  const [stats, setStats] = useState({
+    totalChats: 0,
+    userMessages: 0,
+    botMessages: 0,
+    activeNow: 0,
+    mostDiscussedTopics: '',
+  });
+
+  const [conversations, setConversations] = useState([]);
+  const [discussedTopics, setDiscussedTopics] = useState([]);
+  const [modalContent, setModalContent] = useState(null);
+
   useEffect(() => {
-    const stats = {
+    async function fetchStats() {
-      totalChats: 120,
+      try {
-      userMessages: 210,
+        const response = await fetch('https://n8n.kediritechnopark.my.id/webhook/master-agent/dashboard');
-      botMessages: 220,
+        const data = await response.json();
-      activeNow: 5,
+
-    };
+        if (data.length === 0) return;
+
+        const parsedResult = JSON.parse(data[0].result);
+        const conversationsData = parsedResult.conversations || [];
+        const discussedTopicsData = parsedResult.discussed_topics || [];
+
+        setConversations(conversationsData);
+        setDiscussedTopics(discussedTopicsData);
+
+        const totalChats = conversationsData.length;
+        let userMessages = 0;
+        let botMessages = 0;
+
+        conversationsData.forEach(conv => {
+          conv.messages.forEach(msg => {
+            if (msg.sender === 'user') userMessages++;
+            if (msg.sender === 'bot') botMessages++;
+          });
+        });
+
+        const activeNow = 5; // Contoh dummy
+        discussedTopicsData.sort((a, b) => b.question_count - a.question_count);
+        const mostDiscussedTopics = discussedTopicsData[0]?.topic || '-';
+
+        setStats({ totalChats, userMessages, botMessages, activeNow, mostDiscussedTopics });
+
+        const labels = ["08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00", "24:00", "02:00", "04:00", "06:00"];
+        const hourMap = { 8: 0, 10: 1, 12: 2, 14: 3, 16: 4, 18: 5, 20: 6, 22: 7, 0: 8, 2: 9, 4: 10, 6: 11 };
+        const dataChart = new Array(labels.length).fill(0);
+
+        // Hitung berdasarkan jam dari conversation.createdAt
+          console.log(conversationsData)
+        conversationsData.forEach(conv => {
+          console.log(conv)
+          if (conv.createdAt) {
+            const date = new Date(conv.createdAt.replace(' ', 'T'));
+            const hour = date.getHours();
+            if (hourMap.hasOwnProperty(hour)) {
+              const idx = hourMap[hour];
+              dataChart[idx]++;
+            }
+          }
+        });
 
-    // Inject stats manually
-    document.getElementById("totalChats").textContent = stats.totalChats;
-    document.getElementById("userMessages").textContent = stats.userMessages;
-    document.getElementById("botMessages").textContent = stats.botMessages;
-    document.getElementById("activeNow").textContent = stats.activeNow;
 
-    // Get canvas from ref
         const ctx = chartRef.current.getContext("2d");
-
         if (chartInstanceRef.current) {
           chartInstanceRef.current.destroy();
         }
@@ -32,10 +83,10 @@ const Dashboard = () => {
         chartInstanceRef.current = new Chart(ctx, {
           type: 'line',
           data: {
-        labels: ["08:00", "10:00", "12:00", "14:00", "16:00", "18:00"],
+            labels,
             datasets: [{
-          label: "Pesan Masuk",
+              label: "Pesan Masuk per Jam",
-          data: [10, 25, 45, 30, 50, 60],
+              data: dataChart,
               borderColor: "#075e54",
               backgroundColor: "rgba(7, 94, 84, 0.2)",
               fill: true,
@@ -57,8 +108,23 @@ const Dashboard = () => {
             }
           }
         });
+
+      } catch (error) {
+        console.error('Failed to fetch dashboard data:', error);
+      }
+    }
+
+    fetchStats();
   }, []);
 
+  const openConversationsModal = () => {
+    setModalContent(<Conversations conversations={conversations} />);
+  };
+
+  const openTopicsModal = () => {
+    setModalContent(<DiscussedTopics topics={discussedTopics} />);
+  };
+
   return (
     <div className={styles.dashboardContainer}>
       <div className={styles.dashboardHeader}>
@@ -70,10 +136,22 @@ const Dashboard = () => {
       </div>
 
       <div className={styles.statsGrid}>
-        <div className={styles.statCard}><h2 id="totalChats">0</h2><p>Total Percakapan Hari Ini</p></div>
+        <div className={styles.statCard} onClick={openConversationsModal}>
-        <div className={styles.statCard}><h2 id="userMessages">0</h2><p>Pesan dari Pengguna</p></div>
+          <h2>{stats.totalChats}</h2>
-        <div className={styles.statCard}><h2 id="botMessages">0</h2><p>Respons Bot</p></div>
+          <p>Total Percakapan Hari Ini</p>
-        <div className={styles.statCard}><h2 id="activeNow">0</h2><p>Pengguna Aktif Sekarang</p></div>
+        </div>
+        <div className={styles.statCard}>
+          <h2>{stats.userMessages}</h2>
+          <p>Pesan dari Pengguna</p>
+        </div>
+        <div className={styles.statCard}>
+          <h2>{stats.botMessages}</h2>
+          <p>Respons Bot</p>
+        </div>
+        <div className={styles.statCard} onClick={openTopicsModal}>
+          <h2 style={{ fontSize: '17px' }}>{stats.mostDiscussedTopics}</h2>
+          <p>Paling sering ditanyakan</p>
+        </div>
       </div>
 
       <div className={styles.chartSection}>
@@ -84,6 +162,8 @@ const Dashboard = () => {
       <div className={styles.footer}>
         &copy; 2025 Kloowear AI - Admin Panel
       </div>
+
+      {modalContent && <Modal onClose={() => setModalContent(null)}>{modalContent}</Modal>}
     </div>
   );
 };

src/DiscussedTopics.js

@@ -0,0 +1,18 @@
+
+// DiscussedTopics.js
+import React from 'react';
+
+const DiscussedTopics = ({ topics }) => {
+  return (
+    <div>
+      <h2>Topik yang Sering Ditanyakan</h2>
+      <ul>
+        {topics.map((topic, idx) => (
+          <li key={idx}><strong>{topic.topic}</strong> - {topic.question_count} pertanyaan</li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default DiscussedTopics;

src/Modal.js

@@ -0,0 +1,24 @@
+// Modal.js
+import React, {useEffect} from 'react';
+import styles from './Modal.module.css';
+
+const Modal = ({ onClose, children }) => {
+  const stopPropagation = (e) => e.stopPropagation();
+useEffect(() =>{
+        document.body.style.overflow = 'hidden';
+
+}, [])
+const handleClose = () => {
+        document.body.style.overflow = 'auto';
+        onClose();
+}
+  return (
+    <div className={styles.overlay} onClick={handleClose}>
+      <div className={styles.modal} onClick={stopPropagation}>
+        <div className={styles.modalContent}>{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;

src/Modal.module.css

@@ -0,0 +1,40 @@
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal {
+  background: white;
+  border-radius: 10px;
+  max-width: 700px;
+  width: 70%;
+  max-height: 80vh;
+  overflow-y: auto;
+  padding: 20px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+  position: relative;
+}
+
+.modalContent {
+  padding-top: 10px;
+}
+
+.closeButton {
+  position: absolute;
+  top: 10px;
+  right: 15px;
+  background: transparent;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  color: #075e54;
+}