ok

src/Dashboard.js

@@ -19,8 +19,7 @@ const Dashboard = () => {
     totalChats: 0,
     userMessages: 0,
     botMessages: 0,
-  mostDiscussedTopics: '-',
-});
+  });
 
 
   const [isDragging, setIsDragging] = useState(false);
@@ -38,17 +37,22 @@ const Dashboard = () => {
       try {
         const response = await fetch('https://bot.kediritechnopark.com/webhook/master-agent/dashboard');
         const data = await response.json();
+        setDiscussedTopics(data[0].result.topics)
+        console.log(data[0].result.topics[0].topic)
 
-        setRawData(data);
-
-        // Hitung statistik
-        let totalSessions = new Set(); // unik session_id
+        const graphObj = data[0].result.graph;
+        const rawDataArray = Object.entries(graphObj).map(([hour, sesi]) => ({
+          hour,
+          sesi,
+        }));
+        setRawData(rawDataArray);
+        let totalSessions = new Set();
         let userMessages = 0;
         let botMessages = 0;
 
-        data.forEach(({ sesi }) => {
-          Object.entries(sesi).forEach(([channel, messages]) => {
-            messages.forEach((msg) => {
+        rawDataArray.forEach(({ sesi }) => {
+          Object.values(sesi).forEach(messages => {
+            messages.forEach(msg => {
               totalSessions.add(msg.session_id);
               if (msg.message.type === 'human') userMessages++;
               if (msg.message.type === 'ai') botMessages++;
@@ -56,11 +60,11 @@ const Dashboard = () => {
           });
         });
 
+
         setStats({
           totalChats: totalSessions.size,
           userMessages,
           botMessages,
-          mostDiscussedTopics: '-', // placeholder, bisa ditambah nanti
         });
 
       } catch (error) {
@@ -80,7 +84,7 @@ const Dashboard = () => {
   };
 
 
-useEffect(() => {
+  useEffect(() => {
     if (!rawData.length) return;
 
     const ctx = chartRef.current?.getContext('2d');
@@ -103,19 +107,14 @@ useEffect(() => {
     };
 
     const prefixes = Object.keys(prefixLabelMap);
+    const hours = rawData.map(d => d.hour).sort((a, b) => parseFloat(a) - parseFloat(b));
 
-  // Ambil semua grub (jam)
-  const hours = rawData.map(d => d.grub).sort((a, b) => parseFloat(a) - parseFloat(b));
-
-  // Inisialisasi data per platform
     const counts = {};
     prefixes.forEach(prefix => {
       counts[prefix] = hours.map(() => 0);
     });
 
-  // Hitung jumlah pesan berdasarkan panjang array per grub & prefix
-  rawData.forEach((entry, index) => {
-    const sesi = entry.sesi || {};
+    rawData.forEach(({ sesi }, index) => {
       prefixes.forEach(prefix => {
         if (Array.isArray(sesi[prefix])) {
           counts[prefix][index] = sesi[prefix].length;
@@ -123,6 +122,7 @@ useEffect(() => {
       });
     });
 
+
     const datasets = prefixes.map(prefix => ({
       label: prefixLabelMap[prefix],
       data: counts[prefix],
@@ -163,7 +163,7 @@ useEffect(() => {
         },
       },
     });
-}, [rawData]);
+  }, [rawData]);
 
   return (
     <div className={styles.dashboardContainer}>
@@ -189,7 +189,7 @@ useEffect(() => {
           <p>Respons Bot</p>
         </div>
         <div className={styles.statCard} onClick={openTopicsModal}>
-          <h2 style={{ fontSize: '17px' }}>{stats.mostDiscussedTopics}</h2>
+          <h2 style={{ fontSize: '17px' }}>{discussedTopics[0]?.topic}</h2>
           <p>Paling sering ditanyakan</p>
         </div>
       </div>
@@ -228,7 +228,7 @@ useEffect(() => {
               <div className={styles.fileInfo}>
                 <strong>{selectedFile.name}</strong>
               </div>
-          <div className={styles.fileInfoClose} onClick={()=>setSelectedFile(null)}>
+              <div className={styles.fileInfoClose} onClick={() => setSelectedFile(null)}>
                 X
               </div>
             </>

src/DiscussedTopics.js

@@ -8,7 +8,7 @@ const DiscussedTopics = ({ topics }) => {
       <h2>Topik yang Sering Ditanyakan</h2>
       <ul>
         {topics.map((topic, idx) => (
-          <li key={idx}><strong>{topic.topic}</strong> - {topic.question_count} pertanyaan</li>
+          <li key={idx}><strong>{topic.topic}</strong> - {topic.count} kali</li>
         ))}
       </ul>
     </div>