rama/halobestie-clone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Phase 2 scaffold: mitra online status & pairing logic

Browse Source 
Add mitra online/offline status with heartbeat-based auto-offline,
customer-mitra pairing via Valkey pub/sub blast, session management,
and control center dashboard with real-time stats.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
ramadhan sjamsani
2026-04-05 23:17:49 +08:00
parent a7a2a32d27
commit d668112edd
44 changed files with 2800 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
control_center/src/pages/mitras/MitrasPage.jsx
View File

@@ -7,6 +7,11 @@ const fetchMitras = async () => {
return res.data.data
}
const fetchOnlineMitras = async () => {
const res = await apiClient.get('/internal/mitras/online')
return res.data.data
}
const createMitra = async (data) => {
const res = await apiClient.post('/internal/mitras', data)
return res.data.data
@@ -17,12 +22,29 @@ const updateMitraStatus = async ({ id, is_active }) => {
return res.data.data
}
const fetchOnlineLogs = async (mitraId) => {
const res = await apiClient.get(`/internal/mitras/${mitraId}/online-logs`)
return res.data.data
}
export default function MitrasPage() {
const queryClient = useQueryClient()
const { data, isLoading } = useQuery({ queryKey: ['mitras'], queryFn: fetchMitras })
const { data: onlineData } = useQuery({
queryKey: ['mitras-online'],
queryFn: fetchOnlineMitras,
refetchInterval: 10000,
})
const [form, setForm] = useState({ phone: '', display_name: '' })
const [showForm, setShowForm] = useState(false)
const [logsForMitra, setLogsForMitra] = useState(null)
const { data: logsData, isLoading: logsLoading } = useQuery({
queryKey: ['mitra-online-logs', logsForMitra],
queryFn: () => fetchOnlineLogs(logsForMitra),
enabled: !!logsForMitra,
})
const createMutation = useMutation({
mutationFn: createMitra,
@@ -40,6 +62,12 @@ export default function MitrasPage() {
if (isLoading) return <div>Loading...</div>
// Build a set of online mitra IDs for quick lookup
const onlineMitraMap = new Map()
for (const m of onlineData ?? []) {
onlineMitraMap.set(m.id, m)
}
return (
<div>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
@@ -69,25 +97,69 @@ export default function MitrasPage() {
<tr>
<th style={{ textAlign: 'left', padding: 8, borderBottom: '1px solid #eee' }}>Nama</th>
<th style={{ textAlign: 'left', padding: 8, borderBottom: '1px solid #eee' }}>Nomor HP</th>
<th style={{ textAlign: 'left', padding: 8, borderBottom: '1px solid #eee' }}>Status</th>
<th style={{ textAlign: 'left', padding: 8, borderBottom: '1px solid #eee' }}>Status Akun</th>
<th style={{ textAlign: 'left', padding: 8, borderBottom: '1px solid #eee' }}>Online</th>
<th style={{ textAlign: 'left', padding: 8, borderBottom: '1px solid #eee' }}>Sesi Aktif</th>
<th style={{ padding: 8, borderBottom: '1px solid #eee' }}>Aksi</th>
</tr>
</thead>
<tbody>
{data?.items?.map((mitra) => (
<tr key={mitra.id}>
<td style={{ padding: 8 }}>{mitra.display_name}</td>
<td style={{ padding: 8 }}>{mitra.phone}</td>
<td style={{ padding: 8 }}>{mitra.is_active ? 'Aktif' : 'Nonaktif'}</td>
<td style={{ padding: 8 }}>
<button onClick={() => statusMutation.mutate({ id: mitra.id, is_active: !mitra.is_active })}>
{mitra.is_active ? 'Nonaktifkan' : 'Aktifkan'}
</button>
</td>
</tr>
))}
{data?.items?.map((mitra) => {
const onlineInfo = onlineMitraMap.get(mitra.id)
return (
<tr key={mitra.id}>
<td style={{ padding: 8 }}>{mitra.display_name}</td>
<td style={{ padding: 8 }}>{mitra.phone}</td>
<td style={{ padding: 8 }}>{mitra.is_active ? 'Aktif' : 'Nonaktif'}</td>
<td style={{ padding: 8 }}>
<span style={{ color: onlineInfo ? 'green' : 'grey' }}>
{onlineInfo ? '● Online' : '○ Offline'}
</span>
</td>
<td style={{ padding: 8 }}>{onlineInfo ? onlineInfo.active_session_count : '-'}</td>
<td style={{ padding: 8, display: 'flex', gap: 8 }}>
<button onClick={() => statusMutation.mutate({ id: mitra.id, is_active: !mitra.is_active })}>
{mitra.is_active ? 'Nonaktifkan' : 'Aktifkan'}
</button>
<button onClick={() => setLogsForMitra(logsForMitra === mitra.id ? null : mitra.id)}>
{logsForMitra === mitra.id ? 'Tutup Log' : 'Log Online'}
</button>
</td>
</tr>
)
})}
</tbody>
</table>
{logsForMitra && (
<div style={{ marginTop: 16, padding: 16, border: '1px solid #eee' }}>
<h3>Log Online/Offline</h3>
{logsLoading ? (
<p>Loading...</p>
) : (
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
<thead>
<tr>
<th style={{ textAlign: 'left', padding: 8, borderBottom: '1px solid #eee' }}>Status</th>
<th style={{ textAlign: 'left', padding: 8, borderBottom: '1px solid #eee' }}>Waktu</th>
</tr>
</thead>
<tbody>
{logsData?.items?.map((log) => (
<tr key={log.id}>
<td style={{ padding: 8 }}>
<span style={{ color: log.status === 'online' ? 'green' : 'grey' }}>
{log.status === 'online' ? '● Online' : '○ Offline'}
</span>
</td>
<td style={{ padding: 8 }}>{new Date(log.timestamp).toLocaleString('id-ID')}</td>
</tr>
))}
</tbody>
</table>
)}
</div>
)}
</div>
)
}