ok

src/ChatBot.js

@@ -103,6 +103,17 @@ const ChatBot = ({ existingConversation, readOnly, hh }) => {
       console.error('Fetch error:', error);
     }
   };
+function formatBoldText(text) {
+  const parts = text.split(/(\*\*[^\*]+\*\*)/g);
+
+  return parts.map((part, index) => {
+    if (part.startsWith('**') && part.endsWith('**')) {
+      return <strong key={index}>{part.slice(2, -2)}</strong>;
+    } else {
+      return <span key={index}>{part}</span>;
+    }
+  });
+}
 
   return (
     <div className={styles.chatContainer} >
@@ -130,16 +141,12 @@ const ChatBot = ({ existingConversation, readOnly, hh }) => {
   ? msg.text
   : (() => {
       try {
-                    let cleanText = msg.text.replace(/`/g, '');  // Remove backticks
-                    cleanText = cleanText.substring(4);  // Remove first 4 characters
-                    let parsedObj = JSON.parse(cleanText);
-
-                    return parsedObj.jawaban;
+        return formatBoldText(msg.text);    // Apply formatting here
       } catch (e) {
-                    return msg.text;  // Return an empty string if there is an error
+        return msg.text;
       }
-
     })()}
+
               {msg.quickReplies && (
                 <div className={styles.quickReplies}>
                   {msg.quickReplies.map((reply, i) => (

src/Dashboard.js

@@ -145,7 +145,7 @@ const Dashboard = () => {
           setCheckOnce(true);
           if (subscription === null) {
             // Not subscribed yet — show modal asking user to subscribe
-            setModalContent(<NotificationPrompt onAllow={subscribeUser} onDismiss={()=>setModalContent('')} />);
+            setModalContent(<NotificationPrompt onAllow={subscribeUser} onDismiss={() => setModalContent('')} />);
           } else {
             // Already subscribed
             setModalContent('')
@@ -228,17 +228,17 @@ const Dashboard = () => {
     };
 
     const prefixes = Object.keys(prefixLabelMap);
-const parsedHours = rawData.map(d => new Date(d.hour));
-parsedHours.sort((a, b) => a - b);
+    const parsedHours = rawData.map(d => new Date(d.hour));
+    parsedHours.sort((a, b) => a - b);
 
-// Extract only the date (no timezone shifting)
-const getDateStr = date => date.getFullYear() + '-' + (date.getMonth() + 1).toString().padStart(2, '0') + '-' + date.getDate().toString().padStart(2, '0');
+    // Extract only the date (no timezone shifting)
+    const getDateStr = date => date.getFullYear() + '-' + (date.getMonth() + 1).toString().padStart(2, '0') + '-' + date.getDate().toString().padStart(2, '0');
 
 
-const hours = parsedHours.map((date, index) => {
+    const hours = parsedHours.map((date, index) => {
       const timeStr = date.getHours().toString().padStart(2, '0') + ':' + date.getMinutes().toString().padStart(2, '0');
-  return index === parsedHours.length - 1 ? 'Sekarang' : timeStr;
-});
+      return index === parsedHours.length - 1 ? 'Now' : timeStr;
+    });
 
     const counts = {};
     prefixes.forEach(prefix => {
@@ -329,26 +329,26 @@ const hours = parsedHours.map((date, index) => {
       </div>
 
       <div className={styles.statsGrid}>
-        <div className={styles.statCard} onClick={openConversationsModal}>
+        <div className={styles.statCard}>
           <h2>{stats.totalChats}</h2>
-          <p>Total Percakapan selama 24 jam</p>
+          <p>TOTAL USER PER DAY</p>
         </div>
         <div className={styles.statCard}>
           <h2>{stats.botMessages}</h2>
-          <p>Respons Bot</p>
+          <p>AI RESPONSE</p>
         </div>
-        <div className={styles.statCard} onClick={()=>setModalContent(<FollowUps data={followUps} />)}>
+        <div className={styles.statCard} onClick={() => setModalContent(<FollowUps data={followUps} />)}>
           <h2>{followUps.length}</h2>
-          <p>Follow up</p>
+          <p>BOOKING REQUEST</p>
         </div>
         <div className={styles.statCard} onClick={openTopicsModal}>
           <h2 style={{ fontSize: '17px' }}>{discussedTopics[0]?.topic}</h2>
-          <p>Paling sering ditanyakan</p>
+          <p>Top topic</p>
         </div>
       </div>
 
       <div className={styles.chartSection}>
-        <h2 className={styles.chartTitle}>Grafik Interaksi</h2>
+        <h2 className={styles.chartTitle}>Interactions</h2>
         <canvas ref={chartRef}></canvas>
       </div>
 
@@ -371,9 +371,9 @@ const hours = parsedHours.map((date, index) => {
           }}
         >
           <p className={styles.desktopText}>
-            Seret file ke sini, atau <span className={styles.uploadLink}>Klik untuk unggah</span>
+            Drop file here, or <span className={styles.uploadLink}>Click to upload</span>
           </p>
-          <p className={styles.mobileText}>Klik untuk unggah</p>
+          <p className={styles.mobileText}>Click to upload</p>
 
           {selectedFile && (
             <>

src/Dashboard.module.css

@@ -55,11 +55,17 @@
   margin-top: 20px;
 }
 
+.statsGrid p {
+  text-transform: uppercase;
+}
 .statCard {
   background: #ece5dd;
   border-radius: 10px;
   padding: 20px;
   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
 }
 
 .statCard h2 {
@@ -200,8 +206,8 @@ position: absolute;
   position: relative;
   display: inline-block;
   position: absolute;
-  top: 10px;
-  right: 10px;
+    bottom: 5px;
+    right: 5px;
 }
 
 .dropdownToggle {

src/DiscussedTopics.js

@@ -5,10 +5,10 @@ import React from 'react';
 const DiscussedTopics = ({ topics }) => {
   return (
     <div>
-      <h2>Topik yang Sering Ditanyakan</h2>
+      <h2>Top Topic</h2>
       <ul>
         {topics.map((topic, idx) => (
-          <li key={idx}><strong>{topic.topic}</strong> - {topic.count} kali</li>
+          <li key={idx}><strong>{topic.topic}</strong> - {topic.count} x</li>
         ))}
       </ul>
     </div>

src/FollowUps.js

@@ -4,7 +4,6 @@ import styles from './FollowUps.module.css';
 const FollowUps = ({ data }) => {
   return (
     <div className={styles.container}>
-      <h2 className={styles.title}>User yang tertarik</h2>
       <div className={styles.grid}>
         {data.map(user => (
           <div key={user.id} className={styles.card}>

src/FollowUps.module.css

@@ -1,5 +1,4 @@
 .container {
-  padding: 24px;
   background-color: #f7f9fa;
   font-family: 'Amazon Ember', sans-serif;
 }

src/ProfileTab.js

@@ -1,43 +1,41 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { FaPen } from 'react-icons/fa';
-import styles from './ProfileTab.module.css';
 import { useNavigate } from 'react-router-dom';
+import styles from './ProfileTab.module.css';
 
 const ProfileTab = () => {
     const menuRef = useRef(null);
     const navigate = useNavigate();
     const [isEditing, setIsEditing] = useState(false);
     const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const [profile, setProfile] = useState({});
+    const [profileTemp, setProfileTemp] = useState({});
+
+    const licenses = [
+        { id: 1, type: "Current Subscription", number: "DRML-2025-AI001", validUntil: "June 30 2025" },
+    ];
 
-    // Close dropdown if click outside
     useEffect(() => {
         const handleClickOutside = (event) => {
             if (menuRef.current && !menuRef.current.contains(event.target)) {
                 setIsMenuOpen(false);
             }
         };
-
         document.addEventListener('mousedown', handleClickOutside);
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
+        return () => document.removeEventListener('mousedown', handleClickOutside);
     }, []);
 
     const handleLogout = () => {
         localStorage.removeItem('token');
         localStorage.removeItem('user');
 
-        navigator.serviceWorker.ready.then(function (registration) {
-            registration.pushManager.getSubscription().then(function (subscription) {
+        navigator.serviceWorker.ready.then((registration) => {
+            registration.pushManager.getSubscription().then((subscription) => {
                 if (subscription) {
-                    subscription.unsubscribe().then(function (successful) {
-                        console.log('Push subscription unsubscribed on logout:', successful);
-                        // Optional: also notify backend to clear the token
+                    subscription.unsubscribe().then((successful) => {
+                        console.log('Unsubscribed from push notifications:', successful);
                         fetch('/api/clear-subscription', {
                             method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json',
-                            },
+                            headers: { 'Content-Type': 'application/json' },
                             body: JSON.stringify({ endpoint: subscription.endpoint }),
                         });
                     });
@@ -71,50 +69,56 @@ const ProfileTab = () => {
                 }
 
                 const data = await response.json();
-        console.log(data);
-
                 setProfile(data.profile_data);
+                setProfileTemp(data.profile_data);
             } catch (error) {
-        console.error('Error:', error);
+                console.error('Fetch error:', error);
                 navigate('/login');
             }
         };
 
-    fetchData(); // Jalankan langsung saat komponen di-mount
-
+        fetchData();
     }, [navigate]);
 
-    const [profile, setProfile] = useState({});
-
-    const licenses = [
-        { id: 1, type: "AI Bot License", number: "DL-2025-AI001", validUntil: "2026-12-31" },
-        { id: 2, type: "Clinic Data Access", number: "DL-2025-CL002", validUntil: "2026-06-30" }
-    ];
-
     const handleChange = (e) => {
         const { name, value } = e.target;
-        setProfile((prev) => ({ ...prev, [name]: value }));
+        setProfile(prev => ({ ...prev, [name]: value }));
     };
+
     const handleSave = async () => {
         try {
             const token = localStorage.getItem('token');
 
+            if (profile.newPassword && profile.newPassword !== profile.confirmPassword) {
+                alert('Password dan konfirmasi tidak sama.');
+                return;
+            }
+
+            const payload = { ...profile };
+            if (!payload.newPassword) {
+                delete payload.newPassword;
+                delete payload.confirmPassword;
+            } else {
+                payload.password = payload.newPassword;
+                delete payload.newPassword;
+                delete payload.confirmPassword;
+            }
+
             const response = await fetch('https://bot.kediritechnopark.com/webhook/profile', {
                 method: 'PUT',
                 headers: {
                     'Content-Type': 'application/json',
                     'Authorization': `Bearer ${token}`,
                 },
-                body: JSON.stringify(profile),
+                body: JSON.stringify(payload),
             });
 
             if (!response.ok) throw new Error('Gagal menyimpan profil');
 
             const result = await response.json();
-            console.log('Profil berhasil diperbarui:', result);
 
             setIsEditing(false);
-            alert('Profil berhasil disimpan!');
+            alert('Profile saved!');
         } catch (error) {
             console.error('Error saat menyimpan profil:', error);
             alert('Terjadi kesalahan saat menyimpan profil.');
@@ -123,8 +127,7 @@ const ProfileTab = () => {
 
     return (
         <div className={styles.dashboardContainer}>
-            <div className={styles.profileHeader}>
-                <h2>Profil Perusahaan</h2>
+            <div className={styles.dashboardHeader}>
                 <div className={styles.dropdownContainer} ref={menuRef}>
                     <button
                         onClick={() => setIsMenuOpen(!isMenuOpen)}
@@ -138,25 +141,19 @@ const ProfileTab = () => {
                             <button onClick={() => navigate('/dashboard')} className={styles.dropdownItem}>
                                 Dashboard
                             </button>
-
-                            <button onClick={() => navigate('/reset-password')} className={styles.dropdownItem}>
-                                Reset Password
-                            </button>
-
-                            <button onClick={() => { setIsEditing(!isEditing); setIsMenuOpen(false) }} className={styles.dropdownItem}>
-                                {isEditing ? 'Batal Edit' : 'Edit'}
-                            </button>
-
                             <button onClick={handleLogout} className={styles.dropdownItem}>
                                 Logout
                             </button>
                         </div>
                     )}
                 </div>
+                <img src={profile?.image || '/no-brand.jpg'} alt="Bot Avatar" />
+                <div>
+                    <h1 className={styles.h1}>Dermalounge AI Admin Profile</h1>
+                </div>
             </div>
 
             <div className={styles.profileSection}>
-                <img src={profile.image} alt="Company Logo" className={styles.companyImage} />
                 <div className={styles.profileDetails}>
                     {["name", "company", "address", "email", "phone"].map((field) => (
                         <div key={field} className={styles.profileInputGroup}>
@@ -164,35 +161,75 @@ const ProfileTab = () => {
                             <input
                                 type="text"
                                 name={field}
-                                value={profile[field]}
+                                value={profile && profile[field] != null ? profile[field] : ''}
                                 onChange={handleChange}
                                 className={`${styles.editableInput} ${!isEditing ? styles.readOnly : ''}`}
                                 readOnly={!isEditing}
                             />
-
                         </div>
                     ))}
-                    {isEditing &&
-                        <div className={styles.licenseCard} style={{ marginTop: '20px', padding: '10px 16px' }} onClick={handleSave}
+
+                    {isEditing && (
+                        <>
+                            <div className={styles.profileInputGroup}>
+                                <label><strong>Old Password:</strong></label>
+                                <input
+                                    type="password"
+                                    name="newPassword"
+                                    onChange={handleChange}
+                                    className={styles.editableInput}
+                                />
+                            </div>
+                            <div className={styles.profileInputGroup}>
+                                <label><strong>New Password:</strong></label>
+                                <input
+                                    type="password"
+                                    name="confirmPassword"
+                                    onChange={handleChange}
+                                    className={styles.editableInput}
+                                />
+                            </div>
+                        </>
+                    )}
+
+                    {!isEditing &&
+                        <div className={styles.licenseCard} style={{ marginTop: '20px', padding: '10px 16px' }} onClick={() => setIsEditing(true)}
                         >
-                            Simpan
+                            Edit
+                        </div>
+                    }
+                    {isEditing &&
+
+                        <div style={{ marginTop: '20px', display: 'flex', gap: '10px' }}>
+                            {/* <div className={styles.licenseCard} style={{ flex: 1, padding: '10px 16px' }} onClick={() => {
+                                        setIsEditing(false);
+                                        setProfile(profileTemp);
+                                    }}>
+                                Batal
+                            </div> */}
+                            <div className={styles.licenseCard} style={{ flex: 1, padding: '10px 16px' }} onClick={handleSave}>
+                                Save
+                            </div>
                         </div>
                     }
                 </div>
             </div>
 
             <div className={styles.licenseSection}>
-                <h2>License</h2>
                 <div className={styles.licenseCards}>
                     {licenses.map((item) => (
                         <div className={styles.licenseCard} key={item.id}>
                             <p><strong>{item.type}</strong></p>
-                            <p>No: {item.number}</p>
-                            <p>Berlaku sampai: {item.validUntil}</p>
+                            <p>{item.number}</p>
+                            <p><strong>Free License </strong>Valid until: {item.validUntil}</p>
                         </div>
                     ))}
                 </div>
             </div>
+
+            <div className={styles.footer}>
+                &copy; 2025 Kediri Technopark
+            </div>
         </div>
     );
 };

src/ProfileTab.module.css

@@ -1,40 +1,31 @@
-/* Container */
+/* Container Utama */
 .dashboardContainer {
-    width: 100%;
+  max-width: 900px;
+  margin: 30px auto;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
   padding: 20px;
-  max-width: 1200px;
-  margin: 0 auto;
-  box-sizing: border-box;
 }
 
-/* Header */
-.profileHeader {
+.dashboardHeader {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  flex-wrap: wrap;
-  margin-bottom: 20px;
-  gap: 12px;
-}
-
-.editButton {
-  background-color: #075e54;
+  gap: 15px;
+  background: #075e54;
   color: white;
-  padding: 6px 12px;
-  font-size: 12px;
-  border: none;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
+  padding: 20px;
+  border-radius: 10px 10px 0 0;
+  position: relative;
 }
 
-.editButton:hover {
-  background-color: #0f9b8a;
+.dashboardHeader img {
+  width: 75px;
+  height: 75px;
+  border-radius: 50%;
 }
 
+
 /* Profile Section */
 .profileSection {
   display: flex;
@@ -43,6 +34,7 @@
   gap: 20px;
   flex-wrap: wrap;
   margin-bottom: 30px;
+  margin-top: 20px;
 }
 
 .companyImage {
@@ -80,64 +72,42 @@
   color: white;
   padding: 16px;
   border-radius: 12px;
-  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   font-size: 14px;
 }
 
-/* ====================
-   Responsive Breakpoints
-==================== */
-
-/* Tablet (768px – 1023px) */
-@media screen and (max-width: 1023px) {
-  .profileSection {
-    flex-direction: row;
-    justify-content: flex-start;
-  }
-
-  .profileDetails {
-    min-width: 100%;
-  }
-
-  .licenseCards {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-/* Mobile (≤ 767px) */
-@media screen and (max-width: 767px) {
-  .profileHeader {
+.profileHeader {
   flex-direction: column;
   align-items: flex-start;
-  }
+}
 
-  .editButton {
+.editButton {
   align-self: flex-end;
-  }
+}
 
-  .profileSection {
+.profileSection {
   flex-direction: column;
   align-items: center;
   text-align: center;
-  }
+}
 
-  .companyImage {
+.companyImage {
   margin-bottom: 12px;
-  }
+}
 
-  .profileDetails {
+.profileDetails {
   text-align: left;
   width: 100%;
-  }
-
-  .licenseCards {
-    grid-template-columns: 1fr;
-  }
-
-  .licenseCard {
-    font-size: 13px;
-  }
 }
+
+.licenseCards {
+  grid-template-columns: 1fr;
+}
+
+.licenseCard {
+  font-size: 13px;
+}
+
 .profileInputGroup {
   display: flex;
   align-items: center;
@@ -147,7 +117,8 @@
 }
 
 .profileInputGroup label {
-  min-width: 100px; /* atau sesuai label terpanjang */
+  min-width: 110px;
+  /* atau sesuai label terpanjang */
   font-size: 14px;
 }
 
@@ -162,7 +133,8 @@
 
   width: auto;
   max-width: 100%;
-  flex: 1; /* biar input bisa melar jika ruang tersedia */
+  flex: 1;
+  /* biar input bisa melar jika ruang tersedia */
 }
 
 /* Saat tidak dalam mode editing */
@@ -173,18 +145,17 @@
   color: #000;
 }
 
-
 .dropdownContainer {
   position: relative;
   display: inline-block;
   position: absolute;
-  top: 37px;
-  right: 10px;
+    bottom: 5px;
+    right: 5px;
 }
 
 .dropdownToggle {
-  color: #ffff;
-  background-color: #255e54;
+  background-color: #ffff;
+  color: #255e54;
   padding: 8px 12px;
   border: none;
   border-radius: 4px;
@@ -216,3 +187,62 @@
   background-color: #f0f0f0;
 }
 
+
+/* Input Profil */
+.profileForm {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 20px 0;
+}
+
+.editableInput {
+  font-size: 14px;
+  padding: 8px 12px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  background-color: #f9f9f9;
+  color: #333;
+  transition: border-color 0.3s;
+  flex: 1;
+}
+
+.readOnly {
+  border-color: transparent;
+  background-color: transparent;
+  pointer-events: none;
+  color: #000;
+}
+
+/* Footer (optional) */
+.footer {
+  text-align: center;
+  margin-top: 30px;
+  font-size: 13px;
+  color: #777;
+}
+
+
+/* Mobile styles */
+@media (max-width: 768px) {
+.h1 {
+  color: white;
+  font-size: 23px;
+}
+.dashboardContainer {
+  max-width: 900px;
+  margin: 30px auto;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: none;
+  padding: 20px;
+}
+
+  .desktopText {
+    display: none;
+  }
+
+  .mobileText {
+    display: block;
+  }
+}