ok

src/App.js

@@ -1,14 +1,14 @@
 import React, { useState, useEffect } from 'react';
-import { BrowserRouter, Routes, Route, useParams } from 'react-router-dom';
+import { BrowserRouter, Routes, Route, Navigate, useParams } from 'react-router-dom';
 import axios from 'axios';
+
 import Dashboard from './Dashboard';
 import TenantDashboard from './TenantDashboard';
 import ChatBot from './ChatBot';
-
-import './App.css';
 import Login from './Login';
 
-function App() {
+import './App.css';
+
 function ChatBotWrapper() {
   const { agentId } = useParams();
   const [agentDetails, setAgentDetails] = useState(null);
@@ -33,18 +33,27 @@ function App() {
     fetchAgent();
   }, [agentId]);
 
-  // if (loading) return <div>Loading...</div>;
-  // if (!agentDetails) return <div>No agent found</div>;
-
   return <ChatBot agentId={agentId} />;
 }
+
+// ✅ Komponen proteksi route
+const ProtectedRoute = ({ element }) => {
+  const token = localStorage.getItem('token');
+  return token ? element : <Navigate to="/login" />;
+};
+
+function App() {
   return (
     <div className='App'>
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<ChatBotWrapper />} />
-        <Route path="/dashboard" element={<Dashboard />} />
           <Route path="/login" element={<Login />} />
+          {/* ✅ Route /dashboard diproteksi */}
+          <Route
+            path="/dashboard"
+            element={<ProtectedRoute element={<Dashboard />} />}
+          />
         </Routes>
       </BrowserRouter>
     </div>

src/ChatBot.js

@@ -114,7 +114,6 @@ let parsedObj = JSON.parse(cleanText);
 
 return parsedObj.jawaban;
 } catch (e) {
-  console.error("JSON parsing error:", e);  // Log error parsing if it occurs
   return msg.text;  // Return an empty string if there is an error
 }
 

src/Dashboard.js

@@ -15,6 +15,7 @@ const Dashboard = () => {
   const [discussedTopics, setDiscussedTopics] = useState([]);
   const [modalContent, setModalContent] = useState(null);
   const [rawData, setRawData] = useState([]);
+  const [loading, setLoading] = useState(true); // ⬅️ Tambahkan state loading
 
   const [stats, setStats] = useState({
     totalChats: 0,
@@ -24,9 +25,10 @@ const Dashboard = () => {
 
   const [isDragging, setIsDragging] = useState(false);
   const [selectedFile, setSelectedFile] = useState(null);
-
   const [isLoggedIn, setIsLoggedIn] = useState(false);
 
+  const navigate = useNavigate();
+
   const handleFile = (file) => {
     if (file) {
       setSelectedFile(file);
@@ -41,17 +43,37 @@ const Dashboard = () => {
   const handleLogout = () => {
     localStorage.removeItem('token');
     localStorage.removeItem('user');
-    window.location.reload(); // Bisa juga: window.location.href = '/login';
+    window.location.reload();
   };
 
   useEffect(() => {
-    async function fetchStats() {
+    const fetchData = async () => {
-      try {
+      const token = localStorage.getItem('token');
-        const response = await fetch('https://bot.kediritechnopark.com/webhook/master-agent/dashboard');
-        const data = await response.json();
-        setDiscussedTopics(data[0]?.result?.topics)
 
-        const graphObj = data[0].result.graph;
+      try {
+        const response = await fetch('https://bot.kediritechnopark.com/webhook/profile', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${token}`,
+          },
+        });
+
+        if (response.status === 401 || response.status === 403) {
+          localStorage.removeItem('token');
+          navigate('/login');
+          return;
+        }
+
+        if (!response.ok) {
+          throw new Error('Fetch gagal dengan status: ' + response.status);
+        }
+
+        const data = await response.json();
+        console.log(data);
+        setDiscussedTopics(data?.result?.topics)
+
+        const graphObj = data.result.graph;
         const rawDataArray = Object.entries(graphObj).map(([hour, sesi]) => ({
           hour,
           sesi,
@@ -77,46 +99,9 @@ const Dashboard = () => {
           botMessages,
         });
         
-      } catch (error) {
+        setLoading(false); // ⬅️ Setelah berhasil, hilangkan loading
-        console.error('Failed to fetch dashboard data:', error);
-      }
-    }
-
-    fetchStats();
-  }, []);
-
-const navigate = useNavigate();
-
-  useEffect(() => {
-    const fetchData = async () => {
-      const token = localStorage.getItem('token');
-
-      try {
-        const response = await fetch('https://bot.kediritechnopark.com/webhook/profile', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${token}`,
-          },
-        });
-
-        if (response.status === 401 || response.status === 403) {
-          // Token tidak valid atau tidak punya akses, redirect ke login
-          localStorage.removeItem('token'); // Hapus token agar bersih
-          navigate('/login');
-          return;
-        }
-
-        if (!response.ok) {
-          throw new Error('Fetch gagal dengan status: ' + response.status);
-        }
-
-        const data = await response.json();
-        console.log(data);
-        // lanjutkan penggunaan data
       } catch (error) {
         console.error('Error:', error);
-        // Bisa juga redirect ke login kalau error tertentu
         navigate('/login');
       }
     };
@@ -212,6 +197,11 @@ const navigate = useNavigate();
     });
   }, [rawData]);
 
+  // ⬇️ Jika masih loading, tampilkan full white screen
+  if (loading) {
+    return <div style={{ backgroundColor: 'white', width: '100vw', height: '100vh' }} />;
+  }
+
   return (
     <div className={styles.dashboardContainer}>
       <div className={styles.dashboardHeader}>