kediritechnopark/mayagen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ok

Browse Source
This commit is contained in:
everythingonblack
2025-06-12 20:52:46 +07:00
parent 0c065f7be5
commit d9cdbbcde6
2 changed files with 124 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

244
src/Dashboard.js
View File

@@ -16,11 +16,10 @@ const Dashboard = () => {
const [rawData, setRawData] = useState([]); const [rawData, setRawData] = useState([]);
const [stats, setStats] = useState({ const [stats, setStats] = useState({
totalChats: 0, totalChats: 0,
userMessages: 0, userMessages: 0,
botMessages: 0, botMessages: 0,
mostDiscussedTopics: '-', });
});
const [isDragging, setIsDragging] = useState(false); const [isDragging, setIsDragging] = useState(false);
@@ -38,17 +37,22 @@ const Dashboard = () => {
try { 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');
const data = await response.json(); const data = await response.json();
setDiscussedTopics(data[0].result.topics)
console.log(data[0].result.topics[0].topic)
setRawData(data); const graphObj = data[0].result.graph;
const rawDataArray = Object.entries(graphObj).map(([hour, sesi]) => ({
// Hitung statistik hour,
let totalSessions = new Set(); // unik session_id sesi,
}));
setRawData(rawDataArray);
let totalSessions = new Set();
let userMessages = 0; let userMessages = 0;
let botMessages = 0; let botMessages = 0;
data.forEach(({ sesi }) => { rawDataArray.forEach(({ sesi }) => {
Object.entries(sesi).forEach(([channel, messages]) => { Object.values(sesi).forEach(messages => {
messages.forEach((msg) => { messages.forEach(msg => {
totalSessions.add(msg.session_id); totalSessions.add(msg.session_id);
if (msg.message.type === 'human') userMessages++; if (msg.message.type === 'human') userMessages++;
if (msg.message.type === 'ai') botMessages++; if (msg.message.type === 'ai') botMessages++;
@@ -56,11 +60,11 @@ const Dashboard = () => {
}); });
}); });
setStats({ setStats({
totalChats: totalSessions.size, totalChats: totalSessions.size,
userMessages, userMessages,
botMessages, botMessages,
mostDiscussedTopics: '-', // placeholder, bisa ditambah nanti
}); });
} catch (error) { } catch (error) {
@@ -80,90 +84,86 @@ const Dashboard = () => {
}; };
useEffect(() => { useEffect(() => {
if (!rawData.length) return; if (!rawData.length) return;
const ctx = chartRef.current?.getContext('2d'); const ctx = chartRef.current?.getContext('2d');
if (!ctx) return; if (!ctx) return;
if (chartInstanceRef.current) { if (chartInstanceRef.current) {
chartInstanceRef.current.destroy(); chartInstanceRef.current.destroy();
} }
const prefixLabelMap = { const prefixLabelMap = {
WEB: 'Web App', WEB: 'Web App',
WAP: 'WhatsApp', WAP: 'WhatsApp',
DME: 'Instagram', DME: 'Instagram',
}; };
const prefixColors = { const prefixColors = {
WEB: { border: '#4285F4', background: 'rgba(66, 133, 244, 0.2)' }, WEB: { border: '#4285F4', background: 'rgba(66, 133, 244, 0.2)' },
WAP: { border: '#25D366', background: 'rgba(37, 211, 102, 0.2)' }, WAP: { border: '#25D366', background: 'rgba(37, 211, 102, 0.2)' },
DME: { border: '#AA00FF', background: 'rgba(170, 0, 255, 0.2)' }, DME: { border: '#AA00FF', background: 'rgba(170, 0, 255, 0.2)' },
}; };
const prefixes = Object.keys(prefixLabelMap); const prefixes = Object.keys(prefixLabelMap);
const hours = rawData.map(d => d.hour).sort((a, b) => parseFloat(a) - parseFloat(b));
// Ambil semua grub (jam) const counts = {};
const hours = rawData.map(d => d.grub).sort((a, b) => parseFloat(a) - parseFloat(b));
// Inisialisasi data per platform
const counts = {};
prefixes.forEach(prefix => {
counts[prefix] = hours.map(() => 0);
});
// Hitung jumlah pesan berdasarkan panjang array per grub & prefix
rawData.forEach((entry, index) => {
const sesi = entry.sesi || {};
prefixes.forEach(prefix => { prefixes.forEach(prefix => {
if (Array.isArray(sesi[prefix])) { counts[prefix] = hours.map(() => 0);
counts[prefix][index] = sesi[prefix].length;
}
}); });
});
const datasets = prefixes.map(prefix => ({ rawData.forEach(({ sesi }, index) => {
label: prefixLabelMap[prefix], prefixes.forEach(prefix => {
data: counts[prefix], if (Array.isArray(sesi[prefix])) {
borderColor: prefixColors[prefix].border, counts[prefix][index] = sesi[prefix].length;
backgroundColor: prefixColors[prefix].background, }
fill: true, });
tension: 0.3, });
}));
chartInstanceRef.current = new Chart(ctx, {
type: 'line', const datasets = prefixes.map(prefix => ({
data: { label: prefixLabelMap[prefix],
labels: hours, data: counts[prefix],
datasets, borderColor: prefixColors[prefix].border,
}, backgroundColor: prefixColors[prefix].background,
options: { fill: true,
responsive: true, tension: 0.3,
plugins: { }));
legend: {
display: true, chartInstanceRef.current = new Chart(ctx, {
position: 'bottom', type: 'line',
}, data: {
labels: hours,
datasets,
}, },
scales: { options: {
y: { responsive: true,
beginAtZero: true, plugins: {
title: { legend: {
display: true, display: true,
text: 'Jumlah Pesan', position: 'bottom',
}, },
}, },
x: { scales: {
title: { y: {
display: true, beginAtZero: true,
text: 'Jam', title: {
display: true,
text: 'Jumlah Pesan',
},
},
x: {
title: {
display: true,
text: 'Jam',
},
}, },
}, },
}, },
}, });
}); }, [rawData]);
}, [rawData]);
return ( return (
<div className={styles.dashboardContainer}> <div className={styles.dashboardContainer}>
@@ -189,7 +189,7 @@ useEffect(() => {
<p>Respons Bot</p> <p>Respons Bot</p>
</div> </div>
<div className={styles.statCard} onClick={openTopicsModal}> <div className={styles.statCard} onClick={openTopicsModal}>
<h2 style={{ fontSize: '17px' }}>{stats.mostDiscussedTopics}</h2> <h2 style={{ fontSize: '17px' }}>{discussedTopics[0]?.topic}</h2>
<p>Paling sering ditanyakan</p> <p>Paling sering ditanyakan</p>
</div> </div>
</div> </div>
@@ -200,51 +200,51 @@ useEffect(() => {
</div> </div>
<div className={styles.chartSection}> <div className={styles.chartSection}>
<h2 className={styles.chartTitle}>Update data</h2> <h2 className={styles.chartTitle}>Update data</h2>
<div <div
className={`${styles.uploadContainer} ${isDragging ? styles.dragActive : ""}`} className={`${styles.uploadContainer} ${isDragging ? styles.dragActive : ""}`}
onClick={() => selectedFile ? null : document.getElementById("fileInput").click()} onClick={() => selectedFile ? null : document.getElementById("fileInput").click()}
onDragOver={(e) => { onDragOver={(e) => {
e.preventDefault(); e.preventDefault();
setIsDragging(true); setIsDragging(true);
}} }}
onDragLeave={() => setIsDragging(false)} onDragLeave={() => setIsDragging(false)}
onDrop={(e) => { onDrop={(e) => {
e.preventDefault(); e.preventDefault();
setIsDragging(false); setIsDragging(false);
const file = e.dataTransfer.files[0]; const file = e.dataTransfer.files[0];
handleFile(file);
}}
>
<p className={styles.desktopText}>
Seret file ke sini, atau <span className={styles.uploadLink}>Klik untuk unggah</span>
</p>
<p className={styles.mobileText}>Klik untuk unggah</p>
{selectedFile && (
<>
<div className={styles.fileInfo}>
<strong>{selectedFile.name}</strong>
</div>
<div className={styles.fileInfoClose} onClick={()=>setSelectedFile(null)}>
X
</div>
</>
)}
<input
id="fileInput"
type="file"
style={{ display: "none" }}
onChange={(e) => {
const file = e.target.files[0];
handleFile(file); handleFile(file);
}} }}
/> >
<p className={styles.desktopText}>
Seret file ke sini, atau <span className={styles.uploadLink}>Klik untuk unggah</span>
</p>
<p className={styles.mobileText}>Klik untuk unggah</p>
{selectedFile && (
<>
<div className={styles.fileInfo}>
<strong>{selectedFile.name}</strong>
</div>
<div className={styles.fileInfoClose} onClick={() => setSelectedFile(null)}>
X
</div>
</>
)}
<input
id="fileInput"
type="file"
style={{ display: "none" }}
onChange={(e) => {
const file = e.target.files[0];
handleFile(file);
}}
/>
</div>
</div> </div>
</div>
<div className={styles.footer}> <div className={styles.footer}>

2
src/DiscussedTopics.js
View File

@@ -8,7 +8,7 @@ const DiscussedTopics = ({ topics }) => {
<h2>Topik yang Sering Ditanyakan</h2> <h2>Topik yang Sering Ditanyakan</h2>
<ul> <ul>
{topics.map((topic, idx) => ( {topics.map((topic, idx) => (
<li key={idx}><strong>{topic.topic}</strong> - {topic.question_count} pertanyaan</li> <li key={idx}><strong>{topic.topic}</strong> - {topic.count} kali</li>
))} ))}
</ul> </ul>
</div> </div>