merge login

src/ChatBot.js

@@ -55,7 +55,7 @@
 
       try {
         // Send to backend
-        const response = await fetch('https://bot.kediritechnopark.com/webhook/master-agent/ask', {
+        const response = await fetch('https://bot.kediritechnopark.com/webhook/master-agent/ask/dev', {
           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

@@ -1,5 +1,6 @@
 import React, { useRef, useState, useEffect } from 'react';
 import styles from './Dashboard.module.css';
+import { useNavigate } from 'react-router-dom';
 
 import Modal from './Modal';
 import Conversations from './Conversations';
@@ -21,21 +22,32 @@ const Dashboard = () => {
     botMessages: 0,
   });
 
-
   const [isDragging, setIsDragging] = useState(false);
   const [selectedFile, setSelectedFile] = useState(null);
 
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
   const handleFile = (file) => {
     if (file) {
       setSelectedFile(file);
     }
   };
 
+  useEffect(() => {
+    const token = localStorage.getItem('token');
+    setIsLoggedIn(!!token);
+  }, []);
+
+  const handleLogout = () => {
+    localStorage.removeItem('token');
+    localStorage.removeItem('user');
+    window.location.reload(); // Bisa juga: window.location.href = '/login';
+  };
 
   useEffect(() => {
     async function fetchStats() {
       try {
-        const response = await fetch('https://bot.kediritechnopark.com/webhook/master-agent/dashboard');
+        const response = await fetch('https://bot.kediritechnopark.com/webhook/master-agent/dashboard/dev');
         const data = await response.json();
         setDiscussedTopics(data[0]?.result?.topics)
 
@@ -59,7 +71,6 @@ const Dashboard = () => {
           });
         });
 
-
         setStats({
           totalChats: totalSessions.size,
           userMessages,
@@ -74,6 +85,45 @@ const Dashboard = () => {
     fetchStats();
   }, []);
 
+const navigate = useNavigate();
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const token = localStorage.getItem('token');
+
+      try {
+        const response = await fetch('https://bot.kediritechnopark.com/webhook/profile/dev', {
+          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');
+      }
+    };
+
+    fetchData();
+  }, [navigate]);
+
   const openConversationsModal = () => {
     setModalContent(<Conversations conversations={conversations} />);
   };
@@ -82,7 +132,6 @@ const Dashboard = () => {
     setModalContent(<DiscussedTopics topics={discussedTopics} />);
   };
 
-
   useEffect(() => {
     if (!rawData.length) return;
 
@@ -121,7 +170,6 @@ const Dashboard = () => {
       });
     });
 
-
     const datasets = prefixes.map(prefix => ({
       label: prefixLabelMap[prefix],
       data: counts[prefix],
@@ -167,6 +215,11 @@ const Dashboard = () => {
   return (
     <div className={styles.dashboardContainer}>
       <div className={styles.dashboardHeader}>
+        {isLoggedIn ? (
+          <button onClick={handleLogout} className={styles.logoutButton}>Logout</button>
+        ) : (
+          <a href="/login" className={styles.loginButton}>Login</a>
+        )}
         <img src="/dermalounge.jpg" alt="Bot Avatar" />
         <div>
           <h1 className={styles.h1}>Dermalounge AI Admin Dashboard</h1>
@@ -198,7 +251,6 @@ const Dashboard = () => {
         <canvas ref={chartRef}></canvas>
       </div>
 
-
       <div className={styles.chartSection}>
         <h2 className={styles.chartTitle}>Update data</h2>
 
@@ -245,7 +297,6 @@ const Dashboard = () => {
         </div>
       </div>
 
-
       <div className={styles.footer}>
         &copy; 2025 Kediri Technopark
       </div>

src/Dashboard.module.css

@@ -144,3 +144,51 @@
     display: block;
   }
 }
+
+.dashboardHeader {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 20px;
+  background-color: #075e54;
+  border-bottom: 1px solid #ddd;
+}
+
+.loginButton {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: #0b7366;
+  color: white;
+  padding: 8px 18px;
+  border-radius: 8px;
+  text-decoration: none;
+  font-weight: bold;
+  font-size: 12px;
+  transition: background-color 0.3s ease;
+  border: none;
+}
+
+.loginButton:hover {
+  background-color: #0f9b8a;
+}
+
+.logoutButton {
+position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: #ad1212;
+  color: white;
+  padding: 8px 14px;
+  border-radius: 8px;
+  text-decoration: none;
+  font-weight: bold;
+  font-size: 12px;
+  transition: background-color 0.3s ease;
+  border: none;
+}
+
+.logoutButton:hover {
+  background-color: #cb0f0f;
+}

src/Login.js

@@ -13,13 +13,47 @@ const Login = () => {
     setFormData({ ...formData, [e.target.name]: e.target.value });
   };
 
-  const handleSubmit = (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
 
-    if (formData.username === 'dermalounge' && formData.password === '1234') {
-      window.location.href = '/dashboard'; // redirect after successful login
+    try {
+      const loginResponse = await fetch('https://bot.kediritechnopark.com/webhook/login', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(formData)
+      });
+
+      const loginDataRaw = await loginResponse.json();
+      const loginData = Array.isArray(loginDataRaw) ? loginDataRaw[0] : loginDataRaw;
+
+      if (loginData?.success && loginData?.token) {
+        localStorage.setItem('token', loginData.token);
+
+        const profileResponse = await fetch('https://bot.kediritechnopark.com/webhook/profile', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${loginData.token}`
+          }
+        });
+
+        const profileDataRaw = await profileResponse.json();
+        const profileData = Array.isArray(profileDataRaw) ? profileDataRaw[0] : profileDataRaw;
+
+        if (profileData?.success) {
+          localStorage.setItem('user', JSON.stringify(profileData.user));
+          window.location.href = '/dashboard';
         } else {
-      setError('Username atau password salah');
+          setError('Token tidak valid');
+        }
+      } else {
+        setError(loginData?.message || 'Username atau password salah');
+      }
+    } catch (err) {
+      console.error('Login Error:', err);
+      setError('Gagal terhubung ke server');
     }
   };
 

src/Login.module.css

@@ -48,7 +48,7 @@
 }
 
 .button {
-  background-color: #4285F4;
+  background-color: #337f83;
   color: white;
   border: none;
   padding: 12px;
@@ -58,7 +58,7 @@
 }
 
 .button:hover {
-  background-color: #3367D6;
+  background-color: #3c9a9f;
 }
 
 .error {