e.stopPropagation()}
>
- {/* Header */}
-
+ {/* ── Header ── */}
+
{agentUuid}
+ {/* ── Body ── */}
+
{isLoading ? (
Loading agent data...
+Loading agent data…
{error}
) : data ? (
<>
- {/* KPI Summary row */}
-
-
-
- Devices
-{data.devices.length}
-
-
- Active Flows
-{data.summary?.active_flows ?? data.flows.length}
-
-
- Total Download
-{fmtBytes(data.summary?.bandwidth_down ?? 0)}
-
-
+ {/* ── KPI row ── */}
+ Total Upload
-{fmtBytes(data.summary?.bandwidth_up ?? 0)}
-
+ {[
+ { label: "Devices", value: data.devices.length, color: "text-white" },
+ { label: "Flows", value: data.summary?.active_flows ?? data.flows.length, color: "text-white" },
+ { label: "Download", value: fmtBytes(data.summary?.bandwidth_down ?? 0), color: "text-cyan-400" },
+ { label: "Upload", value: fmtBytes(data.summary?.bandwidth_up ?? 0), color: "text-green-400" },
+ ].map((kpi) => (
+
- {/* Tabs */}
-
+
+ ))}
{kpi.label}
+{kpi.value}
+
+ {/* ── Security alert strip ── */}
+ {secCount > 0 && (
+
+
+ )}
+
+ {/* ── Tabs ── */}
+
{tabs.map((tab) => (
- {/* Tab content */}
-
+ {/* ── Tab content ── */}
+
+
+ {/* DEVICES */}
{activeTab === "devices" && (
-
- {data.devices.length === 0 ? (
-
No devices found for this agent.
- ) : ( - data.devices.map((d, i) => { - const riskCfg = d.risk_level === "Rawan" || d.risk_level === "Critical" - ? { color: "text-red-400", bg: "bg-red-500/10 ring-red-500/30", dot: "bg-red-400", label: d.risk_level } - : d.risk_level === "Sedang" || d.risk_level === "Medium" - ? { color: "text-yellow-400", bg: "bg-yellow-500/10 ring-yellow-500/30", dot: "bg-yellow-400", label: d.risk_level } - : d.risk_level === "Aman" || d.risk_level === "Low" - ? { color: "text-green-400", bg: "bg-green-500/10 ring-green-500/30", dot: "bg-green-400", label: d.risk_level } - : null; + data.devices.length === 0 ?
+ {data.devices.map((d, i) => {
+ const rc = riskStyle(d.risk_level);
return (
-
+ {data.flows.map((f, i) => (
+
+ {f.src_ip || "—"}
+
+ {f.dst_ip || "—"}{f.dst_port ? :{f.dst_port} : ""}
+
+ {f.app_label || f.domain || "—"}
+ {f.protocol || "—"}
+ {fmtBytes(f.download)}
+ {fmtBytes(f.upload)}
+ {f.last_seen?.slice(0, 16) || "—"}
+
+ ))}
+
+ )
)}
+ {/* TOP APPS */}
{activeTab === "apps" && (
- setSelectedDevice(null)}
+ />
+ )}
+
);
}
diff --git a/src/components/ui/DeviceDetailModal.tsx b/src/components/ui/DeviceDetailModal.tsx
index f015c38..bdb7273 100644
--- a/src/components/ui/DeviceDetailModal.tsx
+++ b/src/components/ui/DeviceDetailModal.tsx
@@ -1,24 +1,73 @@
"use client";
import { useState, useEffect } from "react";
-import { fetchDeviceDetails, DeviceDetails } from "@/lib/api";
+import {
+ fetchDeviceDetails, DeviceDetails,
+} from "@/lib/api";
import { fmtBytes } from "@/lib/utils";
-import { Loader2, X, Monitor, Globe, Activity } from "lucide-react";
+import {
+ Loader2, X, Monitor, Globe, Activity, Lock, Server,
+ AlertTriangle, Eye, Shield, Bell, Wifi, Unlock, Router,
+ Link
+} from "lucide-react";
interface Props {
- ip: string;
+ ip : string;
deviceLabel?: string | null;
- macAddress?: string | null;
- onClose: () => void;
+ macAddress? : string | null;
+ onClose : () => void;
}
-type Tab = "apps" | "flows";
+type Tab = "info" | "flows" | "apps" | "encryption" | "servers" | "passwords" | "reputation" | "vpn_events";
+// ── helpers ───────────────────────────────────────────────────────────────────
+function sevStyle(sev: string | null) {
+ switch ((sev || "").toLowerCase()) {
+ case "critical": return "bg-red-500/15 text-red-400 ring-1 ring-red-500/30";
+ case "high": return "bg-orange-500/15 text-orange-400 ring-1 ring-orange-500/30";
+ case "warning": return "bg-yellow-500/15 text-yellow-400 ring-1 ring-yellow-500/30";
+ case "info": return "bg-blue-500/15 text-blue-400 ring-1 ring-blue-500/30";
+ default: return "bg-slate-700/40 text-slate-400";
+ }
+}
+
+function riskStyle(lvl: string | null) {
+ switch ((lvl || "").toLowerCase()) {
+ case "critical":
+ case "rawan": return { bar: "bg-red-500", badge: "bg-red-500/15 text-red-400 ring-1 ring-red-500/30" };
+ case "medium":
+ case "sedang": return { bar: "bg-yellow-500", badge: "bg-yellow-500/15 text-yellow-400 ring-1 ring-yellow-500/30" };
+ case "low":
+ case "aman": return { bar: "bg-green-500", badge: "bg-green-500/15 text-green-400 ring-1 ring-green-500/30" };
+ default: return { bar: "bg-slate-500", badge: "bg-slate-700/40 text-slate-400" };
+ }
+}
+
+function TableWrap({ head, children }: { head: string[]; children: React.ReactNode }) {
+ return (
+ (null);
+ const [data, setData] = useState(null);
const [isLoading, setIsLoading] = useState(true);
- const [error, setError] = useState(null);
- const [activeTab, setActiveTab] = useState("apps");
+ const [error, setError] = useState(null);
+ const [activeTab, setActiveTab] = useState("info");
useEffect(() => {
setIsLoading(true);
@@ -29,141 +78,113 @@ export function DeviceDetailModal({ ip, deviceLabel, macAddress, onClose }: Prop
.finally(() => setIsLoading(false));
}, [ip]);
- const tabs: { key: Tab; label: string; icon: React.ReactNode; count?: number }[] = [
- { key: "apps", label: "Applications", icon:
+
+ )
)}
+ {/* FLOWS */}
{activeTab === "flows" && (
-
- {data.flows.length === 0 ? (
-
-
-
- )}
-
+ data.flows.length === 0 ? No flows found for this agent.
- ) : ( -| Source IP | -Destination | -App / Domain | -Protocol | -Download | -Upload | -
|---|---|---|---|---|---|
| {f.src_ip || "-"} | -- {f.dst_ip || "-"} - {f.dst_port ? :{f.dst_port} : ""} - | -- {f.app_label || f.domain || "-"} - | -{f.protocol || "-"} | -{fmtBytes(f.download)} | -{fmtBytes(f.upload)} | -
- {data.top_apps.length === 0 ? (
-
+ {selectedDevice && selectedDevice.ip && (
+ No application data for this agent.
- ) : ( - data.top_apps.map((a, i) => { - const total = a.download + a.upload; - const maxTotal = Math.max(...data.top_apps.map(x => x.download + x.upload), 1); - const pct = (total / maxTotal) * 100; + data.top_apps.length === 0 ?
+ {data.top_apps.map((a, i) => {
+ const total = (a.download ?? 0) + (a.upload ?? 0);
+ const maxTotal = Math.max(...data.top_apps.map(x => (x.download ?? 0) + (x.upload ?? 0)), 1);
+ const pct = (total / maxTotal) * 100;
return (
-
+
- {a.favicon ? (
- 
- ) : (
-
- )}
+ {a.favicon
+ ?
+ :
+ }
{a.app_label}
{a.category && {a.category}}
{fmtBytes(total)}
-
- ↓ {fmtBytes(a.download)}
- ↑ {fmtBytes(a.upload)}
+
+ )
+ )}
+
+ {/* SECURITY */}
+ {activeTab === "security" && (
+
+ ↓ {fmtBytes(a.download ?? 0)}
+ ↑ {fmtBytes(a.upload ?? 0)}
-
-
+
);
- })
+ })}
+
+
+ {/* Encryption Audit */}
+
+
+
+ {(data.security?.encryption_audit.length ?? 0) === 0 ?
+ {data.security!.encryption_audit.map((r, i) => {
+ const rc = riskStyle(r.risk_level);
+ return (
+
+ {r.ip_address || "—"}
+ {r.device_label || "—"}
+
+
+
+
+
+ {r.risk_level || "—"}
+
+
+ {fmtBytes(r.encrypted ?? 0)}
+ {fmtBytes(r.unencrypted ?? 0)}
+
+ );
+ })}
+
+ )}
+
+
+ {/* Insecure Protocols */}
+
+
+
+ {(data.security?.insecure_protocols.length ?? 0) === 0 ?
+ {data.security!.insecure_protocols.map((r, i) => {
+ const sc = severityStyle(r.risk);
+ return (
+
+ {r.ip_address || "—"}
+ {r.protocol || "—"}
+
+
+
+ {r.risk || "—"}
+
+
+ {r.app_label || "—"}
+ {r.dst_ip ? `${r.dst_ip}:${r.dst_port ?? "?"}` : "—"}
+ {fmtBytes(r.download)}
+ {fmtBytes(r.upload)}
+
+ );
+ })}
+
+ )}
+
+
+ {/* Unencrypted Passwords */}
+ {(data.security?.unencrypted_passwords.length ?? 0) > 0 && (
+
+
+
+
+ {data.security!.unencrypted_passwords.map((r, i) => {
+ const sc = severityStyle(r.severity);
+ return (
+
+ {r.ip_address || "—"}
+ {r.dst_ip ? `${r.dst_ip}:${r.dst_port ?? "?"}` : "—"}
+ {r.protocol || "—"}
+ {r.username || "—"}
+
+
+
+ {r.severity || "—"}
+
+
+
+ );
+ })}
+
+
+ )}
+
+ {/* IP Reputation */}
+ {(data.security?.ip_reputation.length ?? 0) > 0 && (
+
+
+
+
+ {data.security!.ip_reputation.map((r, i) => (
+
+ {r.ip_address || "—"}
+ {r.local_ip || "—"}
+ {r.reputation || "—"}
+ {r.score ?? "—"}
+ {r.country || "—"}
+
+ {r.blacklisted
+ ? ⛔ Yes
+ : ✓ No
+ }
+
+
+ ))}
+
+
+ )}
+
+ {/* Tor & VPN side-by-side */}
+
+
+
+
+ {data.server_discovery!.map((r, i) => (
+
+ {r.ip_address || "—"}
+ {r.hostname || "—"}
+ {r.server_type || "—"}
+ {r.port ?? "—"}
+ {r.protocol || "—"}
+ {r.os_label || "—"}
+
+ ))}
+
+
)}
)}
+
+ {/* EVENTS */}
+ {activeTab === "events" && (
+ data.events.length === 0 ?
+
+ {(data.security?.encryption_audit.length ?? 0) === 0 ?
+
+
+
+
+ {r.encrypted_pct ?? 0}%
+
+
+ {(data.security?.insecure_protocols.length ?? 0) === 0 ?
+
+
+
+
+ {/* Tor */}
+
+
+
+ {(data.security?.tor_detections.length ?? 0) === 0
+ ?
+
+ {/* VPN */}
+
+
+
+ {(data.security?.vpn_detections.length ?? 0) === 0
+ ?
+
+
+ {/* Server Discovery */}
+ {(data.server_discovery?.length ?? 0) > 0 && (
+
+
+ {(data.security?.tor_detections.length ?? 0) === 0
+ ? {data.security!.tor_detections.map((r, i) => (
+
+ }
+
+
+ ))}
+ {r.ip_address || "—"}
+ {r.country || "—"}
+
+ Exit: {r.exit_node || "—"}
+
+
+ {(data.security?.vpn_detections.length ?? 0) === 0
+ ? {data.security!.vpn_detections.map((r, i) => (
+
+ }
+
+
+ ))}
+ {r.ip_address || "—"}
+ {r.vpn_type || "—"}
+
+ Remote: {r.remote_ip || "—"} • {r.country || "—"}
+ {r.confidence && Confidence: {(r.confidence * 100).toFixed(0)}%
}
+
+
+
+ {data.events.map((ev, i) => {
+ const sc = severityStyle(ev.severity);
+ return (
+
+ )
+ )}
+
+ {/* MAC BANDWIDTH */}
+ {activeTab === "mac" && (
+ data.mac_bandwidth.length === 0 ?
+
+ );
+ })}
+
+
+
+ {ev.severity || "—"}
+
+
+
+
+ {ev.event_at?.slice(0, 16) || "—"}
+
+ {ev.event_type || "Unknown"}
+ {ev.ip_address || "—"}
+ {ev.mac_address && {ev.mac_address}}
+
+ {ev.description && {ev.description}
} +
+ {data.mac_bandwidth.map((m, i) => {
+ const maxTotal = Math.max(...data.mac_bandwidth.map(x => x.total ?? 0), 1);
+ const pct = ((m.total ?? 0) / maxTotal) * 100;
+ return (
+
+ )
+ )}
+
+
+ );
+ })}
+
+
+
+
+ {m.mac_address}
+{m.manufacturer || "Unknown Manufacturer"}
+
+
+ {fmtBytes(m.total ?? 0)}
+Total
+
+ ↓ {fmtBytes(m.download ?? 0)}
+ ↑ {fmtBytes(m.upload ?? 0)}
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function Empty({ msg }: { msg: string }) {
+ return | {h} | )} +
|---|
{msg}
; +} + +// ── Main component ──────────────────────────────────────────────────────────── export function DeviceDetailModal({ ip, deviceLabel, macAddress, onClose }: Props) { - const [data, setData] = useState
-
+
+
e.stopPropagation()}
>
- {/* Header */}
-
+ {/* ── Header ── */}
+
-
- {deviceLabel || ip}
-
-
{ip}
- {macAddress &&{macAddress}
} ++ {di?.device_label || deviceLabel || ip} +
+
+ {ip}
+ {(di?.mac_address || macAddress) && (
+ {di?.mac_address || macAddress}
+ )}
+ {di?.os_label && (
+ {di.os_label}
+ )}
+ {di?.device_type && (
+ {di.device_type}
+ )}
+ {/* ── Body ── */}
+
{isLoading ? (
Loading device data...
+Loading device data…
{error}
) : data ? (
<>
- {/* KPI Summary */}
-
-
-
- Total Download
-{fmtBytes(data.total_download ?? 0)}
-
-
- Total Upload
-{fmtBytes(data.total_upload ?? 0)}
-
-
+ {/* ── KPI bar ── */}
+ Total Flows
-{data.flow_count ?? data.flows.length}
-
+ {[
+ { label: "Download", value: fmtBytes(data.total_download), color: "text-cyan-400" },
+ { label: "Upload", value: fmtBytes(data.total_upload), color: "text-green-400" },
+ { label: "Total Flows",value: data.flow_count, color: "text-white" },
+ ].map(k => (
+
- {/* Security Info Panel */}
- {data.security_info && (data.security_info.risk_level || data.security_info.os_label || data.security_info.device_type || data.security_info.insecure_protocols.length > 0 || data.security_info.blacklisted) && (() => {
- const si = data.security_info!;
- const riskColor = si.risk_level === "Rawan" || si.risk_level === "Critical" ? "text-red-400 bg-red-500/10 ring-red-500/30"
- : si.risk_level === "Sedang" || si.risk_level === "Medium" ? "text-yellow-400 bg-yellow-500/10 ring-yellow-500/30"
- : "text-green-400 bg-green-500/10 ring-green-500/30";
- const encPct = si.encrypted_pct ?? 0;
- return (
-
+
+ ))}
{k.label}
+{k.value}
+
-
Security Info
+ {/* ── Alert strip ── */} + {alertCount > 0 && ( +
+
+ )}
- {/* Row 1: Device Identity */}
- {(si.device_type || si.os_label || si.manufacturer) && (
-
- {si.device_type && {si.device_type}}
- {si.os_label && {si.os_label}}
- {si.manufacturer && {si.manufacturer}}
-
- )}
+ {/* ── MAC bandwidth strip ── */}
+ {data.mac_bandwidth && (
+
+
+ )}
- {/* Row 2: Encryption bar */}
- {si.encrypted_pct !== null && (
-
-
- );
- })()}
-
- {/* Tabs */}
-
- Enkripsi Traffic
-
-
-
- {si.risk_level}
-
- {encPct}%
-
-
-
- )}
-
- {/* Row 3: Warnings */}
- = 80 ? "bg-green-500" : encPct >= 50 ? "bg-yellow-500" : "bg-red-500"}`}
- style={{ width: `${encPct}%` }}
- />
-
-
- Terenkripsi: {fmtBytes(si.encrypted_bytes ?? 0)}
- Tidak: {fmtBytes(si.unencrypted_bytes ?? 0)}
-
-
- {si.insecure_protocols.length > 0 && si.insecure_protocols.map((p, i) => (
-
- ⚠ {p.protocol} ({p.risk})
-
- ))}
- {si.blacklisted && (
-
- 🚫 Blacklisted
-
- )}
- {si.reputation && si.reputation !== "Unknown" && !si.blacklisted && (
-
- Reputasi: {si.reputation}
-
- )}
-
-
+ {/* ── Tabs ── */}
+
{tabs.map((tab) => (
))}
-
- {activeTab === "apps" && (
-
- {data.top_apps.length === 0 ? (
-
No application data for this device. It may not have active flows yet.
- ) : ( - data.top_apps.map((a, i) => { - const total = a.download + a.upload; - const maxTotal = Math.max(...data.top_apps.map(x => x.download + x.upload), 1); - const pct = (total / maxTotal) * 100; - return ( -
-
- {a.favicon ? (
-
- ) : (
-
- )}
- {a.app_label}
- {a.category && (
- {a.category}
- )}
- {fmtBytes(total)}
-
-
- ↓ {fmtBytes(a.download)}
- ↑ {fmtBytes(a.upload)}
-
-
-
-
+ {/* ── Tab content ── */}
+
+
+ {/* ══ INFO ══ */}
+ {activeTab === "info" && (
+
+ {data.ip_reputation.map((r, i) => (
+
+ {r.remote_ip || "—"}
+ {r.reputation || "—"}
+ {r.score ?? "—"}
+ {r.country || "—"}
+ {r.app_label || "—"}
+
+ {r.blacklisted
+ ? ⛔ Yes
+ : ✓ No}
+
+ {fmtBytes(r.download)}
+
+ ))}
+
+ )
+ )}
+
+ {/* ══ VPN & EVENTS ══ */}
+ {activeTab === "vpn_events" && (
+
) : null}
diff --git a/src/lib/api.ts b/src/lib/api.ts
index a310d52..c31f254 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -505,6 +505,122 @@ export interface AgentSummary {
bandwidth_up: number;
}
+export interface AgentEncryptionItem {
+ ip_address: string | null;
+ mac_address: string | null;
+ device_label: string | null;
+ encrypted_pct: number | null;
+ unencrypted: number | null;
+ encrypted: number | null;
+ total: number | null;
+ risk_level: string | null;
+ detected_at: string | null;
+}
+
+export interface AgentInsecureProtocolItem {
+ ip_address: string | null;
+ mac_address: string | null;
+ protocol: string | null;
+ risk: string | null;
+ app_label: string | null;
+ dst_ip: string | null;
+ dst_port: number | null;
+ download: number;
+ upload: number;
+ detected_at: string | null;
+}
+
+export interface AgentUnencryptedPwdItem {
+ ip_address: string | null;
+ mac_address: string | null;
+ dst_ip: string | null;
+ dst_port: number | null;
+ protocol: string | null;
+ username: string | null;
+ severity: string | null;
+ download: number;
+ upload: number;
+ detected_at: string | null;
+}
+
+export interface AgentIpReputationItem {
+ ip_address: string | null;
+ local_ip: string | null;
+ mac_address: string | null;
+ reputation: string | null;
+ score: number | null;
+ country: string | null;
+ app_label: string | null;
+ blacklisted: number | boolean;
+ download: number;
+ upload: number;
+ detected_at: string | null;
+}
+
+export interface AgentTorItem {
+ ip_address: string | null;
+ mac_address: string | null;
+ exit_node: string | null;
+ circuit_id: string | null;
+ country: string | null;
+ download: number;
+ upload: number;
+ detected_at: string | null;
+}
+
+export interface AgentVpnItem {
+ ip_address: string | null;
+ mac_address: string | null;
+ vpn_type: string | null;
+ remote_ip: string | null;
+ protocol: string | null;
+ country: string | null;
+ confidence: number | null;
+ download: number;
+ upload: number;
+ detected_at: string | null;
+}
+
+export interface AgentSecurity {
+ encryption_audit: AgentEncryptionItem[];
+ insecure_protocols: AgentInsecureProtocolItem[];
+ unencrypted_passwords: AgentUnencryptedPwdItem[];
+ ip_reputation: AgentIpReputationItem[];
+ tor_detections: AgentTorItem[];
+ vpn_detections: AgentVpnItem[];
+}
+
+export interface AgentEventItem {
+ event_id: string | null;
+ event_type: string | null;
+ severity: string | null;
+ ip_address: string | null;
+ mac_address: string | null;
+ description: string | null;
+ event_at: string | null;
+}
+
+export interface AgentMacBandwidthItem {
+ mac_address: string;
+ manufacturer: string | null;
+ download: number;
+ upload: number;
+ total: number;
+}
+
+export interface AgentServerDiscoveryItem {
+ ip_address: string | null;
+ mac_address: string | null;
+ server_type: string | null;
+ hostname: string | null;
+ port: number | null;
+ protocol: string | null;
+ os_label: string | null;
+ download: number;
+ upload: number;
+ detected_at: string | null;
+}
+
export interface AgentDetails {
agent_uuid: string;
agent_label: string;
@@ -512,6 +628,10 @@ export interface AgentDetails {
devices: AgentDeviceItem[];
flows: AgentFlowItem[];
top_apps: AgentAppItem[];
+ security: AgentSecurity | null;
+ events: AgentEventItem[];
+ mac_bandwidth: AgentMacBandwidthItem[];
+ server_discovery: AgentServerDiscoveryItem[];
}
export interface DeviceFlowItem {
@@ -540,16 +660,121 @@ export interface SecurityInfo {
blacklisted: boolean;
}
-export interface DeviceDetails {
- ip: string;
- total_download: number;
- total_upload: number;
- flow_count: number;
- top_apps: AgentAppItem[];
- flows: DeviceFlowItem[];
- security_info: SecurityInfo | null;
+export interface DeviceInfo {
+ device_label : string | null;
+ device_type : string | null;
+ os_label : string | null;
+ manufacturer : string | null;
+ mac_address : string | null;
+ is_new : number | null;
}
+export interface DeviceAppItem {
+ label : string; // domain name OR protocol name
+ sub_label : string | null; // protocol when label is domain; null otherwise
+ type : 'domain' | 'protocol' | 'port';
+ download : number;
+ upload : number;
+ flow_count : number;
+}
+
+export interface DeviceDomainItem {
+ domain : string;
+ download : number;
+ upload : number;
+ flow_count : number;
+}
+
+export interface DeviceEncryption {
+ encrypted_pct : number | null;
+ encrypted_bytes : number | null;
+ unencrypted_bytes: number | null;
+ total_bytes : number | null;
+ risk_level : string | null;
+}
+
+export interface DeviceServerItem {
+ server_type : string | null;
+ hostname : string | null;
+ port : number | null;
+ protocol : string | null;
+ os_label : string | null;
+ download : number;
+ upload : number;
+ detected_at : string | null;
+}
+
+export interface DevicePwdItem {
+ dst_ip : string | null;
+ dst_port : number | null;
+ protocol : string | null;
+ username : string | null;
+ severity : string | null;
+ download : number;
+ upload : number;
+ detected_at : string | null;
+}
+
+export interface DeviceReputationItem {
+ remote_ip : string | null;
+ local_ip : string | null;
+ reputation : string | null;
+ score : number | null;
+ country : string | null;
+ app_label : string | null;
+ blacklisted : boolean;
+ download : number;
+ upload : number;
+}
+
+export interface DeviceVpnItem {
+ vpn_type : string | null;
+ remote_ip : string | null;
+ protocol : string | null;
+ country : string | null;
+ confidence : number | null;
+ download : number;
+ upload : number;
+ detected_at : string | null;
+}
+
+export interface DeviceEventItem {
+ event_type : string | null;
+ severity : string | null;
+ ip_address : string | null;
+ mac_address : string | null;
+ description : string | null;
+ event_at : string | null;
+}
+
+export interface DeviceMacBandwidth {
+ mac_address : string;
+ manufacturer : string | null;
+ download : number;
+ upload : number;
+ total : number;
+}
+
+export interface DeviceDetails {
+ ip : string;
+ mac_address : string | null;
+ total_download : number;
+ total_upload : number;
+ flow_count : number;
+ device_info : DeviceInfo;
+ top_apps : DeviceAppItem[];
+ top_domains : DeviceDomainItem[];
+ flows : DeviceFlowItem[];
+ encryption : DeviceEncryption | null;
+ server_discovery : DeviceServerItem[];
+ unencrypted_passwords: DevicePwdItem[];
+ ip_reputation : DeviceReputationItem[];
+ vpn_detections : DeviceVpnItem[];
+ events : DeviceEventItem[];
+ mac_bandwidth : DeviceMacBandwidth | null;
+}
+
+
export interface AppAgentItem {
agent_uuid: string | null;
agent_label: string;
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 8b6cf74..736d3b7 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -5,9 +5,10 @@ export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
-export function fmtBytes(bytes?: number) {
- if (!bytes || bytes === 0) return '0 B';
- const units = ['B', 'KB', 'MB', 'GB', 'TB'];
- const i = Math.floor(Math.log(bytes) / Math.log(1024));
+export function fmtBytes(bytes?: number | null) {
+ if (bytes == null || bytes === 0 || isNaN(bytes)) return '0 B';
+ const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB'];
+ const i = Math.min(Math.floor(Math.log(Math.abs(bytes)) / Math.log(1024)), units.length - 1);
+ if (i < 0) return '0 B';
return (bytes / Math.pow(1024, i)).toFixed(2) + ' ' + units[i];
}
+ {/* Device identity card */}
+
)}
+ {/* ══ FLOWS ══ */}
{activeTab === "flows" && (
-
+
+
+ {/* Top domains */}
+ {data.top_domains.length > 0 && (
+ Informasi Device
+
+ {[
+ { label: "Label", value: di?.device_label },
+ { label: "Tipe", value: di?.device_type },
+ { label: "OS", value: di?.os_label },
+ { label: "Manufacturer", value: di?.manufacturer },
+ { label: "IP Address", value: ip },
+ { label: "MAC Address", value: di?.mac_address || macAddress },
+ { label: "Is New", value: di?.is_new === 1 ? "Perangkat Baru ✨" : di?.is_new === 0 ? "Dikenal" : null },
+ ].filter(f => f.value).map(f => (
+
+
+ {f.label}
+ {String(f.value)}
- );
- })
+ ))}
+
+
)}
Top Domains Diakses
+
+ {data.top_domains.map((d, i) => {
+ const maxDl = Math.max(...data.top_domains.map(x => x.download), 1);
+ const pct = (d.download / maxDl) * 100;
+ return (
+
+
+
+ );
+ })}
+
+
+ {d.domain}
+
+
+
+
+
+ {fmtBytes(d.download)}
+{d.flow_count} flows
+
- {data.flows.length === 0 ? (
-
-
-
- )}
+
+
+ )
+ )}
+
+ {/* ══ REPUTATION ══ */}
+ {activeTab === "reputation" && (
+ data.ip_reputation.length === 0 ? No active flows for this device.
- ) : ( -| Destination IP | -Port | -App / Domain | -Protocol | -Download | -Upload | -||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| {f.dst_ip || "—"} | +{f.dst_port ?? "—"} | ++ {f.domain ? ( + /* Domain name takes priority — shown in teal monospace */ + + {f.domain} + + ) : f.app_label && !f.app_label.startsWith('Port ') ? ( + /* Named protocol — purple */ + {f.app_label} + ) : f.app_label ? ( + /* Port-only entry — muted */ + {f.app_label} + ) : ( + — + )} + {/* Show app_label as secondary if domain is set */} + {f.domain && f.app_label && ( + {f.app_label} + )} + | +{f.protocol || "—"} | +{fmtBytes(f.download)} | +{fmtBytes(f.upload)} | +{f.last_seen?.slice(0, 16) || "—"} | +|||||
| + + {s.server_type || "—"} + + | +{s.hostname || "—"} | +{s.port ?? "—"} | +{s.protocol || "—"} | +{s.os_label || "—"} | +{fmtBytes(s.download)} | +{fmtBytes(s.upload)} | +|||||
| {f.dst_ip || "-"} | -{f.dst_port ?? "-"} | -- {(f as any).app_label || (f as any).domain || "-"} + | {p.dst_ip || "—"} | +{p.dst_port ?? "—"} | +{p.protocol || "—"} | +{p.username || "—"} | ++ + {p.severity || "—"} + | -{f.protocol || "-"} | -{fmtBytes(f.download)} | -{fmtBytes(f.upload)} | +{fmtBytes(p.download)} |
+ {/* VPN */}
+
+
+
+ {data.vpn_detections.length === 0 ? (
+
+
+ {/* Events */}
+
+
+
+ {data.events.length === 0 ? (
+
)}
+
+
+ {data.vpn_detections.length === 0 ? (
+ Tidak ada penggunaan VPN yang terdeteksi.
+ ) : ( +
+ {data.vpn_detections.map((v, i) => (
+
+ )}
+
+
+ ))}
+
+ {v.vpn_type || "Unknown VPN"}
+ {v.country || "—"}
+
+ {v.remote_ip && → {v.remote_ip}
} +
+ {v.protocol || "—"}
+ {v.confidence !== null && v.confidence !== undefined && (
+
+ Conf: {((v.confidence) * 100).toFixed(0)}%
+
+ )}
+
+
+
+ {data.events.length === 0 ? (
+ Tidak ada security events untuk device ini.
+ ) : ( +
+ {data.events.map((ev, i) => (
+
+ )}
+
+
+ ))}
+
+
+ {ev.severity || "Info"}
+
+
+
+
+ {ev.event_at?.slice(0, 16) || "—"}
+ {ev.event_type || "Unknown"}
+ {ev.description &&{ev.description}
} +