ok

src/ChatBot.js

@@ -55,7 +55,7 @@
 
       try {
         // Send to backend
-        const response = await fetch('https://botdev.kediritechnopark.com/webhook/master-agent/ask', {
+        const response = await fetch('https://bot.kediritechnopark.com/webhook/master-agent/ask', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ pertanyaan: message, sessionId: JSON.parse(localStorage.getItem('session')).sessionId, lastSeen: new Date().toISOString() }),

src/Dashboard.js

@@ -15,20 +15,55 @@ const Dashboard = () => {
   const [modalContent, setModalContent] = useState(null);
   const [rawData, setRawData] = useState([]);
   
-  const stats = {
+  const [stats, setStats] = useState({
   totalChats: 0,
   userMessages: 0,
   botMessages: 0,
-    activeNow: 0,
   mostDiscussedTopics: '-',
+});
+
+
+  const [isDragging, setIsDragging] = useState(false);
+  const [selectedFile, setSelectedFile] = useState(null);
+
+  const handleFile = (file) => {
+    if (file) {
+      setSelectedFile(file);
+    }
   };
 
+
   useEffect(() => {
     async function fetchStats() {
       try {
-        const response = await fetch('https://botdev.kediritechnopark.com/webhook/master-agent/dashboard');
+        const response = await fetch('https://bot.kediritechnopark.com/webhook/master-agent/dashboard');
         const data = await response.json();
         setRawData(data)
+
+        setRawData(data);
+
+        // Hitung statistik
+        let totalSessions = new Set(); // unik session_id
+        let userMessages = 0;
+        let botMessages = 0;
+
+        data.forEach(({ sesi }) => {
+          Object.entries(sesi).forEach(([channel, messages]) => {
+            messages.forEach((msg) => {
+              totalSessions.add(msg.session_id);
+              if (msg.message.type === 'human') userMessages++;
+              if (msg.message.type === 'ai') botMessages++;
+            });
+          });
+        });
+
+        setStats({
+          totalChats: totalSessions.size,
+          userMessages,
+          botMessages,
+          mostDiscussedTopics: '-', // placeholder, bisa ditambah nanti
+        });
+
       } catch (error) {
         console.error('Failed to fetch dashboard data:', error);
       }
@@ -47,41 +82,47 @@ const Dashboard = () => {
 
 
 useEffect(() => {
+  if (!rawData.length) return;
+
   const ctx = chartRef.current?.getContext('2d');
   if (!ctx) return;
 
-    // Cleanup old chart if it exists
   if (chartInstanceRef.current) {
     chartInstanceRef.current.destroy();
   }
 
-    const prefixes = ['WEB', 'WAP', 'DME'];
   const prefixLabelMap = {
     WEB: 'Web App',
     WAP: 'WhatsApp',
-      DME: 'Direct Message',
+    DME: 'Instagram',
   };
+
   const prefixColors = {
     WEB: { border: '#4285F4', background: 'rgba(66, 133, 244, 0.2)' },
     WAP: { border: '#25D366', background: 'rgba(37, 211, 102, 0.2)' },
     DME: { border: '#AA00FF', background: 'rgba(170, 0, 255, 0.2)' },
   };
 
-    const hours = [...new Set(rawData.map(d => d.hour_group))].sort();
+  const prefixes = Object.keys(prefixLabelMap);
 
-    // Initialize zero-filled data structure
+  // Ambil semua grub (jam)
-    const counts = {
+  const hours = rawData.map(d => d.grub).sort((a, b) => parseFloat(a) - parseFloat(b));
-      WEB: hours.map(() => 0),
-      WAP: hours.map(() => 0),
-      DME: hours.map(() => 0)
-    };
 
-    rawData.forEach(({ hour_group, session_prefix, session_ids }) => {
+  // Inisialisasi data per platform
-      const hourIndex = hours.indexOf(hour_group);
+  const counts = {};
-      if (counts[session_prefix] && hourIndex !== -1) {
+  prefixes.forEach(prefix => {
-        counts[session_prefix][hourIndex] += session_ids.length;
+    counts[prefix] = hours.map(() => 0);
+  });
+
+  // Hitung jumlah pesan berdasarkan panjang array per grub & prefix
+  rawData.forEach((entry, index) => {
+    const sesi = entry.sesi || {};
+    prefixes.forEach(prefix => {
+      if (Array.isArray(sesi[prefix])) {
+        counts[prefix][index] = sesi[prefix].length;
       }
     });
+  });
 
   const datasets = prefixes.map(prefix => ({
     label: prefixLabelMap[prefix],
@@ -89,31 +130,40 @@ const Dashboard = () => {
     borderColor: prefixColors[prefix].border,
     backgroundColor: prefixColors[prefix].background,
     fill: true,
-      tension: 0.3
+    tension: 0.3,
   }));
 
   chartInstanceRef.current = new Chart(ctx, {
     type: 'line',
     data: {
       labels: hours,
-        datasets
+      datasets,
     },
     options: {
       responsive: true,
       plugins: {
         legend: {
           display: true,
-            position: 'bottom'
+          position: 'bottom',
-          }
+        },
       },
       scales: {
         y: {
-            beginAtZero: true
+          beginAtZero: true,
-          }
+          title: {
-        }
+            display: true,
-      }
+            text: 'Jumlah Pesan',
+          },
+        },
+        x: {
+          title: {
+            display: true,
+            text: 'Jam',
+          },
+        },
+      },
+    },
   });
-
 }, [rawData]);
 
   return (
@@ -150,13 +200,56 @@ const Dashboard = () => {
         <canvas ref={chartRef}></canvas>
       </div>
 
+
     <div className={styles.chartSection}>
-        <h2 className={styles.chartTitle}>Grafik request booking</h2>
+      <h2 className={styles.chartTitle}>Update data</h2>
-        <canvas></canvas>
+
+      <div
+        className={`${styles.uploadContainer} ${isDragging ? styles.dragActive : ""}`}
+        onClick={() => selectedFile ? null : document.getElementById("fileInput").click()}
+        onDragOver={(e) => {
+          e.preventDefault();
+          setIsDragging(true);
+        }}
+        onDragLeave={() => setIsDragging(false)}
+        onDrop={(e) => {
+          e.preventDefault();
+          setIsDragging(false);
+          const file = e.dataTransfer.files[0];
+          handleFile(file);
+        }}
+      >
+        <p className={styles.desktopText}>
+          Seret file ke sini, atau <span className={styles.uploadLink}>Klik untuk unggah</span>
+        </p>
+        <p className={styles.mobileText}>Klik untuk unggah</p>
+
+        {selectedFile && (
+          <>
+          <div className={styles.fileInfo}>
+            <strong>{selectedFile.name}</strong>
+          </div>
+          <div className={styles.fileInfoClose} onClick={()=>setSelectedFile(null)}>
+            X
+          </div>
+          </>
+        )}
+
+        <input
+          id="fileInput"
+          type="file"
+          style={{ display: "none" }}
+          onChange={(e) => {
+            const file = e.target.files[0];
+            handleFile(file);
+          }}
+        />
+      </div>
     </div>
 
+
       <div className={styles.footer}>
-        &copy; 2025 Kloowear AI - Admin Panel
+        &copy; 2025 Kediri Technopark
       </div>
 
       {modalContent && <Modal onClose={() => setModalContent(null)}>{modalContent}</Modal>}

src/Dashboard.module.css

@@ -3,6 +3,26 @@
   color: white;
 }
 
+.uploadContainer {
+  margin-top: 16px;
+  border: 2px dashed #ccc;
+  border-radius: 12px;
+  padding: 32px;
+  text-align: center;
+  cursor: pointer;
+  transition: border-color 0.3s;
+}
+
+.uploadContainer:hover {
+  border-color: #888;
+}
+
+.uploadLink {
+  color: #007bff;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
 .dashboardContainer {
   max-width: 900px;
   margin: 30px auto;
@@ -67,3 +87,60 @@
   font-size: 13px;
   color: #777;
 }
+
+.desktopText {
+  display: block;
+}
+
+.mobileText {
+  display: none;
+}
+
+.dragActive {
+  background-color: #e0f7fa; /* light blue or whatever color you prefer */
+  border-color: #00acc1;     /* optional: change border on drag too */
+}
+
+.fileInfo {
+  margin-top: 16px;
+  font-size: 14px;
+  color: #333;
+  background: #f1f1f1;
+  padding: 8px 12px;
+  border-radius: 8px 0 0 8px;
+  display: inline-block;
+}
+
+.fileInfoClose {
+  margin-left: 2px;
+  margin-top: 16px;
+  font-size: 14px;
+  color: #ff0000;
+  font-weight: 700;
+  background: #f1f1f1;
+  padding: 8px 12px;
+  border-radius: 0 8px 8px 0;
+  display: inline-block;
+
+}
+
+/* Mobile styles */
+@media (max-width: 768px) {
+
+.dashboardContainer {
+  max-width: 900px;
+  margin: 30px auto;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: none;
+  padding: 20px;
+}
+
+  .desktopText {
+    display: none;
+  }
+
+  .mobileText {
+    display: block;
+  }
+}