- Edit src/App.js and save to reload.
-
+
+
+
+
);
}
diff --git a/src/ChatBot.js b/src/ChatBot.js
new file mode 100644
index 0000000..f70f64e
--- /dev/null
+++ b/src/ChatBot.js
@@ -0,0 +1,152 @@
+import React, { useState } from 'react';
+import styles from './ChatBot.module.css';
+
+const ChatBot = () => {
+ const [messages, setMessages] = useState([
+ {
+ sender: 'bot',
+ text: 'Halo 👋 Saya Kloowear AI! Ada yang bisa saya bantu?',
+ time: getTime(),
+ quickReplies: [
+ 'Saya ingin beli gelang custom',
+ 'Ada katalog produk terbaru?',
+ 'Gelang cocok untuk hadiah?',
+ ],
+ },
+ ]);
+ const [input, setInput] = useState('');
+ const [isLoading, setIsLoading] = useState(false);
+
+ const sendMessage = async (textOverride = null) => {
+ const message = textOverride || input.trim();
+ if (message === '') return;
+
+ // Show user's message immediately
+ const newMessages = [
+ { sender: 'user', text: message, time: getTime() },
+ ...messages,
+ ];
+ setMessages(newMessages);
+ setInput('');
+ setIsLoading(true);
+
+ try {
+ // Send to backend
+ const response = await fetch('https://n8n.kediritechnopark.my.id/webhook/master-agent/ask' , {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ pertanyaan: newMessages }),
+ });
+
+ if (!response.ok) throw new Error('Network response was not ok');
+
+ const data = await response.json();
+ console.log(data)
+ // Assuming your backend sends back something like: { answer: "text" }
+ // Adjust this according to your actual response shape
+ const botAnswer = data[0].output || 'Maaf, saya tidak mengerti.';
+
+ // Add bot's reply
+ setMessages(prev => [
+ { sender: 'bot', text: botAnswer, time: getTime() },
+ ...prev,
+ ]);
+ } catch (error) {
+ setMessages(prev => [
+ {
+ sender: 'bot',
+ text: 'Maaf, terjadi kesalahan pada server. Silakan coba lagi nanti.',
+ time: getTime(),
+ },
+ ...prev,
+ ]);
+ console.error('Fetch error:', error);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ return (
+
+
+ );
+};
+
+function getTime() {
+ const now = new Date();
+ return now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+}
+
+export default ChatBot;
diff --git a/src/ChatBot.module.css b/src/ChatBot.module.css
new file mode 100644
index 0000000..8409aaf
--- /dev/null
+++ b/src/ChatBot.module.css
@@ -0,0 +1,134 @@
+.chatContainer {
+ max-width: 500px;
+ background: #fff;
+ border-radius: 10px;
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+ display: flex;
+ flex-direction: column;
+ height: 71vh;
+ overflow: hidden;
+}
+
+.chatHeader {
+ background: #075e54;
+ color: #fff;
+ padding: 15px;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ border-top-left-radius: 10px;
+ border-top-right-radius: 10px;
+}
+
+.chatHeader img {
+ width: 45px;
+ height: 45px;
+ border-radius: 50%;
+}
+
+.chatBody {
+ flex: 1;
+ overflow-y: auto;
+ padding: 15px;
+ background: #ece5dd;
+ display: flex;
+ flex-direction: column-reverse;
+}
+
+.messageRow {
+ display: flex;
+ margin-bottom: 12px;
+ align-items: flex-end;
+}
+
+.bot {
+ justify-content: flex-start;
+}
+
+.user {
+ justify-content: flex-end;
+}
+
+.message {
+ max-width: 70%;
+ padding: 12px 16px;
+ border-radius: 15px;
+ font-size: 14px;
+ position: relative;
+ line-height: 1.4;
+}
+
+.message.bot {
+ background: #ffffff;
+ border: 1px solid #ccc;
+}
+
+.message.user {
+ background: #dcf8c6;
+}
+
+.timestamp {
+ font-size: 10px;
+ color: #555;
+ margin-top: 4px;
+ text-align: right;
+}
+
+.avatar {
+ width: 36px;
+ height: 36px;
+ border-radius: 50%;
+ margin: 0 8px;
+}
+
+.chatInput {
+ display: flex;
+ padding: 10px;
+ border-top: 1px solid #ddd;
+ background: #f0f0f0;
+}
+
+.chatInput input {
+ flex: 1;
+ padding: 10px;
+ border-radius: 20px;
+ border: 1px solid #ccc;
+ font-size: 14px;
+}
+
+.chatInput button {
+ background: #075e54;
+ color: #fff;
+ border: none;
+ border-radius: 20px;
+ padding: 0 20px;
+ margin-left: 10px;
+ cursor: pointer;
+}
+
+.chatInput button:hover {
+ background: #0b7366;
+}
+
+.quickReplies {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ margin: 10px 0 0;
+}
+
+.quickReply {
+ background: #fff;
+ border: 1px solid #ccc;
+ padding: 8px 14px;
+ border-radius: 20px;
+ font-size: 13px;
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+
+.quickReply:hover {
+ background: #075e54;
+ color: white;
+ border-color: #075e54;
+}
diff --git a/src/Dashboard.js b/src/Dashboard.js
new file mode 100644
index 0000000..48aadd7
--- /dev/null
+++ b/src/Dashboard.js
@@ -0,0 +1,91 @@
+import React, { useEffect, useRef } from 'react';
+import styles from './Dashboard.module.css';
+import { Chart, LineElement, PointElement, LineController, CategoryScale, LinearScale, Title, Tooltip, Legend } from 'chart.js';
+
+Chart.register(LineElement, PointElement, LineController, CategoryScale, LinearScale, Title, Tooltip, Legend);
+
+const Dashboard = () => {
+ const chartRef = useRef(null);
+ const chartInstanceRef = useRef(null);
+
+ useEffect(() => {
+ const stats = {
+ totalChats: 120,
+ userMessages: 210,
+ botMessages: 220,
+ activeNow: 5,
+ };
+
+ // Inject stats manually
+ document.getElementById("totalChats").textContent = stats.totalChats;
+ document.getElementById("userMessages").textContent = stats.userMessages;
+ document.getElementById("botMessages").textContent = stats.botMessages;
+ document.getElementById("activeNow").textContent = stats.activeNow;
+
+ // Get canvas from ref
+ const ctx = chartRef.current.getContext("2d");
+
+ if (chartInstanceRef.current) {
+ chartInstanceRef.current.destroy();
+ }
+
+ chartInstanceRef.current = new Chart(ctx, {
+ type: 'line',
+ data: {
+ labels: ["08:00", "10:00", "12:00", "14:00", "16:00", "18:00"],
+ datasets: [{
+ label: "Pesan Masuk",
+ data: [10, 25, 45, 30, 50, 60],
+ borderColor: "#075e54",
+ backgroundColor: "rgba(7, 94, 84, 0.2)",
+ fill: true,
+ tension: 0.3,
+ }]
+ },
+ options: {
+ responsive: true,
+ plugins: {
+ legend: {
+ display: true,
+ position: 'bottom'
+ }
+ },
+ scales: {
+ y: {
+ beginAtZero: true
+ }
+ }
+ }
+ });
+ }, []);
+
+ return (
+
+ 
+ Kloowear AI Assistant
+
+
+
+ Kloowear AI Assistant
+
+
+ {isLoading && (
+
+
+
+
+
+ )}
+ {messages.map((msg, index) => (
+
+
+ Mengetik...
+
+
+ {msg.sender === 'bot' && (
+
+ )}
+ 
+ )}
+
+ ))}
+
+ )}
+
+ {msg.text}
+
+ {msg.sender === 'user' && (
+ {msg.time}
+ {msg.quickReplies && (
+
+ {msg.quickReplies.map((reply, i) => (
+
+ )}
+ sendMessage(reply)}
+ >
+ {reply}
+
+ ))}
+
+ )}
+
+ setInput(e.target.value)}
+ onKeyDown={(e) => e.key === 'Enter' && sendMessage()}
+ disabled={isLoading}
+ />
+
+
+
+
+ );
+};
+
+export default Dashboard;
diff --git a/src/Dashboard.module.css b/src/Dashboard.module.css
new file mode 100644
index 0000000..92f45c7
--- /dev/null
+++ b/src/Dashboard.module.css
@@ -0,0 +1,64 @@
+.dashboardContainer {
+ max-width: 900px;
+ margin: 30px auto;
+ background: #fff;
+ border-radius: 10px;
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+ padding: 20px;
+}
+
+.dashboardHeader {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+ background: #075e54;
+ color: white;
+ padding: 20px;
+ border-radius: 10px 10px 0 0;
+}
+
+.dashboardHeader img {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+}
+
+.statsGrid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 20px;
+ margin-top: 20px;
+}
+
+.statCard {
+ background: #ece5dd;
+ border-radius: 10px;
+ padding: 20px;
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
+}
+
+.statCard h2 {
+ margin: 0;
+ font-size: 28px;
+ color: #075e54;
+}
+
+.statCard p {
+ margin: 5px 0 0;
+ font-size: 14px;
+}
+
+.chartSection {
+ margin-top: 30px;
+}
+
+.chartTitle {
+ color: #075e54;
+}
+
+.footer {
+ text-align: center;
+ margin-top: 30px;
+ font-size: 13px;
+ color: #777;
+}
diff --git a/src/TenantDashboard.js b/src/TenantDashboard.js
new file mode 100644
index 0000000..45f31d6
--- /dev/null
+++ b/src/TenantDashboard.js
@@ -0,0 +1,91 @@
+import React, { useEffect, useRef } from 'react';
+import styles from './Dashboard.module.css';
+import { Chart, LineElement, PointElement, LineController, CategoryScale, LinearScale, Title, Tooltip, Legend } from 'chart.js';
+
+Chart.register(LineElement, PointElement, LineController, CategoryScale, LinearScale, Title, Tooltip, Legend);
+
+const TenantDashboard = () => {
+ const chartRef = useRef(null);
+ const chartInstanceRef = useRef(null);
+
+ useEffect(() => {
+ const stats = {
+ totalChats: 120,
+ userMessages: 210,
+ botMessages: 220,
+ activeNow: 5,
+ };
+
+ // Inject stats manually
+ document.getElementById("totalChats").textContent = stats.totalChats;
+ document.getElementById("userMessages").textContent = stats.userMessages;
+ document.getElementById("botMessages").textContent = stats.botMessages;
+ document.getElementById("activeNow").textContent = stats.activeNow;
+
+ // Get canvas from ref
+ const ctx = chartRef.current.getContext("2d");
+
+ if (chartInstanceRef.current) {
+ chartInstanceRef.current.destroy();
+ }
+
+ chartInstanceRef.current = new Chart(ctx, {
+ type: 'line',
+ data: {
+ labels: ["08:00", "10:00", "12:00", "14:00", "16:00", "18:00"],
+ datasets: [{
+ label: "Pesan Masuk",
+ data: [10, 25, 45, 30, 50, 60],
+ borderColor: "#075e54",
+ backgroundColor: "rgba(7, 94, 84, 0.2)",
+ fill: true,
+ tension: 0.3,
+ }]
+ },
+ options: {
+ responsive: true,
+ plugins: {
+ legend: {
+ display: true,
+ position: 'bottom'
+ }
+ },
+ scales: {
+ y: {
+ beginAtZero: true
+ }
+ }
+ }
+ });
+ }, []);
+
+ return (
+
+
+
+
+
+
+
+ Kloowear AI Admin Dashboard
+Statistik penggunaan chatbot secara real-time
+
+
+
+
+
+
+
+ 0
Total Percakapan Hari Ini
0
Pesan dari Pengguna
0
Respons Bot
0
Pengguna Aktif Sekarang
+
+
+ Grafik Interaksi (Simulasi)
+ +
+ © 2025 Kloowear AI - Admin Panel
+
+
+
+ );
+};
+
+export default TenantDashboard;
+
+
+
+
+
+
+ Kloowear AI Admin Dashboard
+Statistik penggunaan chatbot secara real-time
+
+
+
+
+
+
+
+ 0
Total Percakapan Hari Ini
0
Pesan dari Pengguna
0
Respons Bot
0
Pengguna Aktif Sekarang
+
+
+ Grafik Interaksi (Simulasi)
+ +
+ © 2025 Kloowear AI - Admin Panel
+
+