ok
This commit is contained in:
everythingonblack
184
src/Dashboard.js
184
src/Dashboard.js
@@ -1,114 +1,34 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import React, { useRef, useState, useEffect } from 'react';
|
||||
import styles from './Dashboard.module.css';
|
||||
import { Chart, LineElement, PointElement, LineController, CategoryScale, LinearScale, Title, Tooltip, Legend } from 'chart.js';
|
||||
|
||||
import Modal from './Modal';
|
||||
import Conversations from './Conversations';
|
||||
import DiscussedTopics from './DiscussedTopics';
|
||||
|
||||
Chart.register(LineElement, PointElement, LineController, CategoryScale, LinearScale, Title, Tooltip, Legend);
|
||||
import Chart from 'chart.js/auto';
|
||||
|
||||
const Dashboard = () => {
|
||||
const chartRef = useRef(null);
|
||||
const chartInstanceRef = useRef(null);
|
||||
const [conversations, setConversations] = useState([]);
|
||||
const [discussedTopics, setDiscussedTopics] = useState([]);
|
||||
const [modalContent, setModalContent] = useState(null);
|
||||
const [rawData, setRawData] = useState([]);
|
||||
|
||||
const [stats, setStats] = useState({
|
||||
const stats = {
|
||||
totalChats: 0,
|
||||
userMessages: 0,
|
||||
botMessages: 0,
|
||||
activeNow: 0,
|
||||
mostDiscussedTopics: '',
|
||||
});
|
||||
|
||||
const [conversations, setConversations] = useState([]);
|
||||
const [discussedTopics, setDiscussedTopics] = useState([]);
|
||||
const [modalContent, setModalContent] = useState(null);
|
||||
mostDiscussedTopics: '-',
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchStats() {
|
||||
try {
|
||||
const response = await fetch('https://n8n.kediritechnopark.my.id/webhook/master-agent/dashboard');
|
||||
const response = await fetch('https://botdev.kediritechnopark.com/webhook/master-agent/dashboard');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.length === 0) return;
|
||||
|
||||
const parsedResult = JSON.parse(data[0].result);
|
||||
const conversationsData = parsedResult.conversations || [];
|
||||
const discussedTopicsData = parsedResult.discussed_topics || [];
|
||||
|
||||
setConversations(conversationsData);
|
||||
setDiscussedTopics(discussedTopicsData);
|
||||
|
||||
const totalChats = conversationsData.length;
|
||||
let userMessages = 0;
|
||||
let botMessages = 0;
|
||||
|
||||
conversationsData.forEach(conv => {
|
||||
conv.messages.forEach(msg => {
|
||||
if (msg.sender === 'user') userMessages++;
|
||||
if (msg.sender === 'bot') botMessages++;
|
||||
});
|
||||
});
|
||||
|
||||
const activeNow = 5; // Contoh dummy
|
||||
discussedTopicsData.sort((a, b) => b.question_count - a.question_count);
|
||||
const mostDiscussedTopics = discussedTopicsData[0]?.topic || '-';
|
||||
|
||||
setStats({ totalChats, userMessages, botMessages, activeNow, mostDiscussedTopics });
|
||||
|
||||
const labels = ["08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00", "24:00", "02:00", "04:00", "06:00"];
|
||||
const hourMap = { 8: 0, 10: 1, 12: 2, 14: 3, 16: 4, 18: 5, 20: 6, 22: 7, 0: 8, 2: 9, 4: 10, 6: 11 };
|
||||
const dataChart = new Array(labels.length).fill(0);
|
||||
|
||||
// Hitung berdasarkan jam dari conversation.createdAt
|
||||
console.log(conversationsData)
|
||||
conversationsData.forEach(conv => {
|
||||
console.log(conv)
|
||||
if (conv.createdAt) {
|
||||
const date = new Date(conv.createdAt.replace(' ', 'T'));
|
||||
const hour = date.getHours();
|
||||
if (hourMap.hasOwnProperty(hour)) {
|
||||
const idx = hourMap[hour];
|
||||
dataChart[idx]++;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const ctx = chartRef.current.getContext("2d");
|
||||
if (chartInstanceRef.current) {
|
||||
chartInstanceRef.current.destroy();
|
||||
}
|
||||
|
||||
chartInstanceRef.current = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels,
|
||||
datasets: [{
|
||||
label: "Pesan Masuk per Jam",
|
||||
data: dataChart,
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
setRawData(data)
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch dashboard data:', error);
|
||||
}
|
||||
@@ -125,12 +45,83 @@ const Dashboard = () => {
|
||||
setModalContent(<DiscussedTopics topics={discussedTopics} />);
|
||||
};
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
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',
|
||||
};
|
||||
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();
|
||||
|
||||
// Initialize zero-filled data structure
|
||||
const counts = {
|
||||
WEB: hours.map(() => 0),
|
||||
WAP: hours.map(() => 0),
|
||||
DME: hours.map(() => 0)
|
||||
};
|
||||
|
||||
rawData.forEach(({ hour_group, session_prefix, session_ids }) => {
|
||||
const hourIndex = hours.indexOf(hour_group);
|
||||
if (counts[session_prefix] && hourIndex !== -1) {
|
||||
counts[session_prefix][hourIndex] += session_ids.length;
|
||||
}
|
||||
});
|
||||
|
||||
const datasets = prefixes.map(prefix => ({
|
||||
label: prefixLabelMap[prefix],
|
||||
data: counts[prefix],
|
||||
borderColor: prefixColors[prefix].border,
|
||||
backgroundColor: prefixColors[prefix].background,
|
||||
fill: true,
|
||||
tension: 0.3
|
||||
}));
|
||||
|
||||
chartInstanceRef.current = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: hours,
|
||||
datasets
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: true,
|
||||
position: 'bottom'
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}, [rawData]);
|
||||
|
||||
return (
|
||||
<div className={styles.dashboardContainer}>
|
||||
<div className={styles.dashboardHeader}>
|
||||
<img src="/dermalounge.jpg" alt="Bot Avatar" />
|
||||
<div>
|
||||
<h1>Dermalounge AI Admin Dashboard</h1>
|
||||
<h1 className={styles.h1}>Dermalounge AI Admin Dashboard</h1>
|
||||
<p>Statistik penggunaan chatbot secara real-time</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -155,14 +146,15 @@ const Dashboard = () => {
|
||||
</div>
|
||||
|
||||
<div className={styles.chartSection}>
|
||||
<h2 className={styles.chartTitle}>Grafik Interaksi (Simulasi)</h2>
|
||||
<h2 className={styles.chartTitle}>Grafik Interaksi</h2>
|
||||
<canvas ref={chartRef}></canvas>
|
||||
</div>
|
||||
|
||||
<div className={styles.footer}>
|
||||
UNTUK MENAMBAHKAN LAYANAN, KUNJUNGI <a href="https://drive.kediritechnopark.com">LINK INI</a>
|
||||
dengan username: dermalounge, password: 1234
|
||||
<div className={styles.chartSection}>
|
||||
<h2 className={styles.chartTitle}>Grafik request booking</h2>
|
||||
<canvas></canvas>
|
||||
</div>
|
||||
|
||||
<div className={styles.footer}>
|
||||
© 2025 Kloowear AI - Admin Panel
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user