ypratama/Deep-Package-Inspection
2
0 Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: user profile and layout modifications

Browse Source
This commit is contained in:
vanne committed 2026-07-02 11:02:33 +07:00
1 parent 6501bb4275
commit f94cefb349
37 files changed
+483 -89795
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/(dashboard)/page.tsx
+2
View File
@@ -30,6 +30,8 @@ export default function SummaryPage() {
return countries.data.map((row) => ({
countryCode: row.country_code,
value: row.download + row.upload,
download: row.download,
upload: row.upload,
label: row.country_name,
}));
}, [countries.data]);
src/app/favicon.ico
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 25 KiB

src/app/globals.css
+85 -13
View File
@@ -451,26 +451,26 @@ body::after {
opacity: 1;
}
/* Ambient Gradients for Cards & Sidebars */
/* Ambient Colors for Cards & Sidebars */
:root {
--ambient-card-bg: linear-gradient(135deg, rgba(30, 58, 138, 0.1) 0%, rgba(15, 23, 42, 0.5) 100%);
--ambient-sidebar-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.85) 0%, rgba(2, 6, 23, 0.95) 100%);
--ambient-card-bg: rgba(24, 24, 27, 0.7);
--ambient-sidebar-bg: rgba(9, 9, 11, 0.95);
}
.light {
--ambient-card-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 245, 249, 0.65) 100%);
--ambient-sidebar-bg: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(241, 245, 249, 0.9) 100%);
--ambient-card-bg: rgba(255, 255, 255, 0.9);
--ambient-sidebar-bg: rgba(255, 255, 255, 1);
}
.bg-card {
background-image: var(--ambient-card-bg) !important;
background-color: transparent !important;
background-color: var(--ambient-card-bg) !important;
background-image: none !important;
backdrop-filter: blur(12px);
}
.bg-sidebar {
background-image: var(--ambient-sidebar-bg) !important;
background-color: transparent !important;
background-color: var(--ambient-sidebar-bg) !important;
background-image: none !important;
backdrop-filter: blur(16px);
}
@@ -478,14 +478,86 @@ body::after {
*,
*::before,
*::after {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, background-image;
transition-timing-function: ease-in-out;
transition-duration: 150ms;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, box-shadow, opacity, transform !important;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
transition-duration: 300ms !important;
}
canvas {
transition: none !important;
}
/* View Transitions API (For perfect whole-screen crossfade including WebGL/Canvas) */
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 150ms;
animation-duration: 300ms;
animation-timing-function: ease-in-out;
}
/* ── Custom Scrollbar for Fixed Modals ── */
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: var(--muted);
border-radius: 10px;
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.1);
}
.light .custom-scrollbar::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.1);
}
/* ── Modal Animations (0.5s) ── */
@keyframes modalFadeIn {
from {
opacity: 0;
transform: scale(0.95) translateY(10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
@keyframes modalFadeOut {
from {
opacity: 1;
transform: scale(1) translateY(0);
}
to {
opacity: 0;
transform: scale(0.95) translateY(10px);
}
}
@keyframes overlayFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes overlayFadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
.animate-modal-in {
animation: modalFadeIn 500ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.animate-modal-out {
animation: modalFadeOut 500ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.animate-overlay-in {
animation: overlayFadeIn 500ms ease-out forwards;
}
.animate-overlay-out {
animation: overlayFadeOut 500ms ease-in forwards;
}
src/app/layout.tsx
+3
View File
@@ -10,6 +10,9 @@ const inter = Inter({
export const metadata: Metadata = {
title: "BackOne - Deep Package Inspection",
description: "BackOne by PT. Data Bisnis Solusi - Network Intelligence Dashboard",
icons: {
icon: "/backone-logo.png",
},
};
export default function RootLayout({
src/components/ui/AgentDetailModal.tsx
+80 -72
View File
@@ -26,7 +26,7 @@ function severityStyle(sev: string | null) {
case "high": return { badge: "bg-orange-500/15 text-orange-400 ring-orange-500/30", dot: "bg-orange-400" };
case "warning": return { badge: "bg-yellow-500/15 text-yellow-400 ring-yellow-500/30", dot: "bg-yellow-400" };
case "info": return { badge: "bg-blue-500/15 text-blue-400 ring-blue-500/30", dot: "bg-blue-400" };
default: return { badge: "bg-slate-500/15 text-slate-400 ring-slate-500/30", dot: "bg-slate-400" };
default: return { badge: "bg-slate-500/15 text-muted-foreground ring-slate-500/30", dot: "bg-slate-400" };
}
}
@@ -38,19 +38,19 @@ function riskStyle(level: string | null) {
case "medium": return { badge: "bg-yellow-500/15 text-yellow-400 ring-yellow-500/30", dot: "bg-yellow-400" };
case "aman":
case "low": return { badge: "bg-green-500/15 text-green-400 ring-green-500/30", dot: "bg-green-400" };
default: return { badge: "bg-slate-500/15 text-slate-400 ring-slate-500/30", dot: "bg-slate-400" };
default: return { badge: "bg-slate-500/15 text-muted-foreground ring-slate-500/30", dot: "bg-slate-400" };
}
}
// ── Shared table wrapper ────────────────────────────────────────────────────
function TableWrap({ children, head }: { children: React.ReactNode; head: string[] }) {
return (
<div className="overflow-x-auto rounded-xl border border-white/5">
<div className="overflow-x-auto rounded-xl border border-border/50">
<table className="w-full text-xs">
<thead>
<tr className="border-b border-white/10 bg-white/[0.02]">
<tr className="border-b border-border bg-muted/50">
{head.map((h) => (
<th key={h} className="px-3 py-2 text-left font-medium text-slate-400 whitespace-nowrap">{h}</th>
<th key={h} className="px-3 py-2 text-left font-medium text-muted-foreground whitespace-nowrap">{h}</th>
))}
</tr>
</thead>
@@ -61,7 +61,7 @@ function TableWrap({ children, head }: { children: React.ReactNode; head: string
}
function EmptyState({ msg }: { msg: string }) {
return <p className="text-slate-500 text-sm text-center py-10">{msg}</p>;
return <p className="text-muted-foreground text-sm text-center py-10">{msg}</p>;
}
// ── Main component ──────────────────────────────────────────────────────────
@@ -71,6 +71,14 @@ export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
const [error, setError] = useState<string | null>(null);
const [activeTab, setActiveTab] = useState<Tab>("devices");
const [selectedDevice, setSelectedDevice] = useState<{ ip: string; label: string | null; mac: string | null } | null>(null);
const [isClosing, setIsClosing] = useState(false);
const handleClose = () => {
setIsClosing(true);
setTimeout(() => {
onClose();
}, 480);
};
useEffect(() => {
setIsLoading(true);
@@ -100,49 +108,49 @@ export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
return (
<>
<div className="fixed inset-0 z-50 flex items-center justify-center p-4" onClick={onClose}>
<div className="absolute inset-0 bg-black/70 backdrop-blur-sm" />
<div className="fixed inset-0 z-50 flex items-center justify-center p-4" onClick={handleClose}>
<div className={`absolute inset-0 bg-black/40 dark:bg-black/75 backdrop-blur-sm ${isClosing ? 'animate-overlay-out' : 'animate-overlay-in'}`} />
<div
className="relative bg-[#0d1117] border border-white/10 rounded-2xl w-full max-w-5xl max-h-[92vh] flex flex-col shadow-2xl shadow-black/60 animate-slide-up"
className={`relative bg-card border border-border rounded-2xl w-full max-w-5xl h-[85vh] flex flex-col shadow-2xl shadow-black/60 ${isClosing ? 'animate-modal-out' : 'animate-modal-in'}`}
onClick={(e) => e.stopPropagation()}
>
{/* ── Header ── */}
<div className="flex items-center justify-between px-6 py-4 border-b border-white/10 bg-gradient-to-r from-blue-900/30 to-purple-900/20 rounded-t-2xl flex-shrink-0">
<div className="flex items-center justify-between px-6 py-4 border-b border-border bg-gradient-to-r from-blue-900/30 to-purple-900/20 rounded-t-2xl flex-shrink-0">
<div className="flex items-center gap-3">
<div className="p-2 bg-blue-500/20 rounded-lg ring-1 ring-blue-500/30">
<Server className="w-5 h-5 text-blue-400" />
</div>
<div>
<h3 className="text-lg font-bold text-white">{agentLabel}</h3>
<p className="text-xs text-slate-400 font-mono">{agentUuid}</p>
<h3 className="text-lg font-bold text-card-foreground">{agentLabel}</h3>
<p className="text-xs text-muted-foreground font-mono">{agentUuid}</p>
</div>
</div>
<button onClick={onClose} className="p-2 text-slate-400 hover:text-white hover:bg-white/10 rounded-lg transition-all">
<button onClick={handleClose} className="p-2 text-muted-foreground hover:text-card-foreground hover:bg-secondary rounded-lg transition-all">
<X className="w-5 h-5" />
</button>
</div>
{/* ── Body ── */}
<div className="flex-1 overflow-y-auto min-h-0">
<div className="flex-1 overflow-y-auto min-h-0 custom-scrollbar">
{isLoading ? (
<div className="flex flex-col items-center justify-center py-20 gap-3">
<Loader2 className="w-8 h-8 animate-spin text-blue-400" />
<p className="text-slate-400 text-sm">Loading agent data…</p>
<p className="text-muted-foreground text-sm">Loading agent data…</p>
</div>
) : error ? (
<div className="p-6 text-center text-red-400 text-sm">{error}</div>
) : data ? (
<>
{/* ── KPI row ── */}
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3 px-6 py-4 border-b border-white/5 flex-shrink-0">
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3 px-6 py-4 border-b border-border/50 flex-shrink-0">
{[
{ label: "Devices", value: data.devices.length, color: "text-white" },
{ label: "Flows", value: data.summary?.active_flows ?? data.flows.length, color: "text-white" },
{ label: "Devices", value: data.devices.length, color: "text-card-foreground" },
{ label: "Flows", value: data.summary?.active_flows ?? data.flows.length, color: "text-card-foreground" },
{ 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) => (
<div key={kpi.label} className="bg-white/5 rounded-xl p-3 border border-white/5">
<p className="text-xs text-slate-400 mb-1">{kpi.label}</p>
<div key={kpi.label} className="bg-secondary rounded-xl p-3 border border-border/50">
<p className="text-xs text-muted-foreground mb-1">{kpi.label}</p>
<p className={`text-xl font-bold ${kpi.color}`}>{kpi.value}</p>
</div>
))}
@@ -157,7 +165,7 @@ export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
)}
{/* ── Tabs ── */}
<div className="flex gap-1 px-6 py-3 border-b border-white/5 flex-shrink-0 flex-wrap">
<div className="flex gap-1 px-6 py-3 border-b border-border/50 flex-shrink-0 flex-wrap">
{tabs.map((tab) => (
<button
key={tab.key}
@@ -165,7 +173,7 @@ export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
activeTab === tab.key
? "bg-blue-500/20 text-blue-300 ring-1 ring-blue-500/40"
: "text-slate-400 hover:text-white hover:bg-white/5"
: "text-muted-foreground hover:text-card-foreground hover:bg-secondary"
}`}
>
{tab.icon}
@@ -192,15 +200,15 @@ export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
<button
key={i}
onClick={() => setSelectedDevice({ ip: d.ip_address || "", label: d.device_label, mac: d.mac_address })}
className="w-full text-left p-3 bg-white/[0.03] hover:bg-white/[0.07] hover:border-cyan-500/30 border border-white/5 rounded-xl transition-all group cursor-pointer"
className="w-full text-left p-3 bg-white/[0.03] hover:bg-white/[0.07] hover:border-cyan-500/30 border border-border/50 rounded-xl transition-all group cursor-pointer"
>
<div className="flex items-center gap-3">
<div className="flex-shrink-0 p-2 bg-slate-800/60 group-hover:bg-cyan-500/10 rounded-lg transition-colors">
<Monitor className="w-4 h-4 text-slate-400 group-hover:text-cyan-400 transition-colors" />
<Monitor className="w-4 h-4 text-muted-foreground group-hover:text-cyan-400 transition-colors" />
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 flex-wrap">
<p className="font-medium text-white text-sm truncate group-hover:text-cyan-300 transition-colors">{d.device_label || d.ip_address || "Unknown"}</p>
<p className="font-medium text-card-foreground text-sm truncate group-hover:text-cyan-300 transition-colors">{d.device_label || d.ip_address || "Unknown"}</p>
{d.risk_level && (
<span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold ring-1 ${rc.badge}`}>
<span className={`w-1.5 h-1.5 rounded-full ${rc.dot}`} />
@@ -214,17 +222,17 @@ export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
)}
</div>
<div className="flex items-center gap-3 mt-0.5 flex-wrap">
<p className="text-xs text-slate-400 font-mono">{d.ip_address}</p>
{d.mac_address && <p className="text-xs text-slate-500 font-mono">{d.mac_address}</p>}
<p className="text-xs text-muted-foreground font-mono">{d.ip_address}</p>
{d.mac_address && <p className="text-xs text-muted-foreground font-mono">{d.mac_address}</p>}
{d.os_label && <p className="text-xs text-blue-400">{d.os_label}</p>}
{d.manufacturer && <p className="text-xs text-slate-500">{d.manufacturer}</p>}
{d.manufacturer && <p className="text-xs text-muted-foreground">{d.manufacturer}</p>}
</div>
</div>
<div className="text-right flex-shrink-0 space-y-0.5">
<p className="text-xs text-cyan-400">↓ {fmtBytes(d.download ?? 0)}</p>
<p className="text-xs text-green-400">↑ {fmtBytes(d.upload ?? 0)}</p>
{d.encrypted_pct !== null && (
<p className="text-xs text-slate-500">🔒 {d.encrypted_pct}%</p>
<p className="text-xs text-muted-foreground">🔒 {d.encrypted_pct}%</p>
)}
<ChevronRight className="w-4 h-4 text-slate-600 group-hover:text-cyan-400 ml-auto transition-colors" />
</div>
@@ -246,7 +254,7 @@ export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
<td className="px-3 py-2 whitespace-nowrap">
<div className="flex flex-col gap-0.5">
<span className="font-mono text-xs text-slate-300">
{f.dst_ip || "—"}{f.dst_port ? <span className="text-slate-500">:{f.dst_port}</span> : ""}
{f.dst_ip || "—"}{f.dst_port ? <span className="text-muted-foreground">:{f.dst_port}</span> : ""}
</span>
{f.dst_ip && <IpDetails ip={f.dst_ip} />}
</div>
@@ -257,16 +265,16 @@ export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
{f.app_label || "—"}
</span>
{f.domain && (
<span className="text-[10px] text-slate-500 italic truncate" title={f.domain}>
<span className="text-[10px] text-muted-foreground italic truncate" title={f.domain}>
{f.domain}
</span>
)}
</div>
</td>
<td className="px-3 py-2 text-xs text-slate-400">{f.protocol || "—"}</td>
<td className="px-3 py-2 text-xs text-muted-foreground">{f.protocol || "—"}</td>
<td className="px-3 py-2 text-right text-xs text-cyan-400 whitespace-nowrap">{fmtBytes(f.download)}</td>
<td className="px-3 py-2 text-right text-xs text-green-400 whitespace-nowrap">{fmtBytes(f.upload)}</td>
<td className="px-3 py-2 text-xs text-slate-500 whitespace-nowrap">{f.last_seen?.slice(0, 16) || "—"}</td>
<td className="px-3 py-2 text-xs text-muted-foreground whitespace-nowrap">{f.last_seen?.slice(0, 16) || "—"}</td>
</tr>
))}
</TableWrap>
@@ -282,21 +290,21 @@ export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
const maxTotal = Math.max(...data.top_apps.map(x => (x.download ?? 0) + (x.upload ?? 0)), 1);
const pct = (total / maxTotal) * 100;
return (
<div key={i} className="p-3 bg-white/[0.03] hover:bg-white/[0.06] border border-white/5 rounded-xl transition-colors">
<div key={i} className="p-3 bg-white/[0.03] hover:bg-white/[0.06] border border-border/50 rounded-xl transition-colors">
<div className="flex items-center gap-3 mb-2">
{a.favicon
? <img src={a.favicon} alt={a.app_label} className="w-5 h-5 rounded bg-white p-0.5 flex-shrink-0" />
: <div className="w-5 h-5 rounded bg-slate-700 flex-shrink-0" />
}
<span className="font-medium text-white text-sm flex-1">{a.app_label}</span>
{a.category && <span className="text-xs text-slate-400 bg-white/5 px-2 py-0.5 rounded">{a.category}</span>}
<span className="text-xs font-mono text-white">{fmtBytes(total)}</span>
<span className="font-medium text-card-foreground text-sm flex-1">{a.app_label}</span>
{a.category && <span className="text-xs text-muted-foreground bg-secondary px-2 py-0.5 rounded">{a.category}</span>}
<span className="text-xs font-mono text-card-foreground">{fmtBytes(total)}</span>
</div>
<div className="flex gap-3 text-xs text-slate-400 mb-2">
<div className="flex gap-3 text-xs text-muted-foreground mb-2">
<span className="text-cyan-400">↓ {fmtBytes(a.download ?? 0)}</span>
<span className="text-green-400">↑ {fmtBytes(a.upload ?? 0)}</span>
</div>
<div className="h-1 bg-white/5 rounded-full overflow-hidden">
<div className="h-1 bg-secondary rounded-full overflow-hidden">
<div className="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all" style={{ width: `${pct}%` }} />
</div>
</div>
@@ -311,9 +319,9 @@ export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
<div className="space-y-6">
{/* Encryption Audit */}
<section>
<h4 className="flex items-center gap-2 text-sm font-semibold text-white mb-3">
<h4 className="flex items-center gap-2 text-sm font-semibold text-card-foreground mb-3">
<Lock className="w-4 h-4 text-blue-400" /> Encryption Audit
<span className="ml-auto text-xs text-slate-500">{data.security?.encryption_audit.length ?? 0} devices</span>
<span className="ml-auto text-xs text-muted-foreground">{data.security?.encryption_audit.length ?? 0} devices</span>
</h4>
{(data.security?.encryption_audit.length ?? 0) === 0 ? <EmptyState msg="No encryption audit data for this agent." /> : (
<TableWrap head={["IP Address", "Device", "Encrypted %", "Risk", "Enc Bytes", "Unenc Bytes"]}>
@@ -328,7 +336,7 @@ export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
<div className="w-16 h-1.5 bg-white/10 rounded-full overflow-hidden">
<div className="h-full bg-blue-500 rounded-full" style={{ width: `${r.encrypted_pct ?? 0}%` }} />
</div>
<span className="text-white">{r.encrypted_pct ?? 0}%</span>
<span className="text-card-foreground">{r.encrypted_pct ?? 0}%</span>
</div>
</td>
<td className="px-3 py-2">
@@ -348,9 +356,9 @@ export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
{/* Insecure Protocols */}
<section>
<h4 className="flex items-center gap-2 text-sm font-semibold text-white mb-3">
<h4 className="flex items-center gap-2 text-sm font-semibold text-card-foreground mb-3">
<Unlock className="w-4 h-4 text-orange-400" /> Insecure Protocols
<span className="ml-auto text-xs text-slate-500">{data.security?.insecure_protocols.length ?? 0} records</span>
<span className="ml-auto text-xs text-muted-foreground">{data.security?.insecure_protocols.length ?? 0} records</span>
</h4>
{(data.security?.insecure_protocols.length ?? 0) === 0 ? <EmptyState msg="No insecure protocols detected for this agent." /> : (
<TableWrap head={["IP", "Protocol", "Risk", "App", "Dst IP:Port", "↓", "↑"]}>
@@ -369,7 +377,7 @@ export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
<td className="px-3 py-2 text-xs text-purple-300 truncate max-w-[100px]">{r.app_label || "—"}</td>
<td className="px-3 py-2 whitespace-nowrap">
<div className="flex flex-col gap-0.5">
<span className="font-mono text-xs text-slate-400">
<span className="font-mono text-xs text-muted-foreground">
{r.dst_ip ? `${r.dst_ip}:${r.dst_port ?? "?"}` : "—"}
</span>
{r.dst_ip && <IpDetails ip={r.dst_ip} />}
@@ -389,7 +397,7 @@ export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
<section>
<h4 className="flex items-center gap-2 text-sm font-semibold text-red-400 mb-3">
<AlertTriangle className="w-4 h-4" /> Unencrypted Passwords Detected!
<span className="ml-auto text-xs text-slate-500">{data.security!.unencrypted_passwords.length} records</span>
<span className="ml-auto text-xs text-muted-foreground">{data.security!.unencrypted_passwords.length} records</span>
</h4>
<TableWrap head={["IP", "Dst IP:Port", "Protocol", "Username", "Severity"]}>
{data.security!.unencrypted_passwords.map((r, i) => {
@@ -399,7 +407,7 @@ export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
<td className="px-3 py-2 font-mono text-xs text-blue-400">{r.ip_address || "—"}</td>
<td className="px-3 py-2 whitespace-nowrap">
<div className="flex flex-col gap-0.5">
<span className="font-mono text-xs text-slate-400">
<span className="font-mono text-xs text-muted-foreground">
{r.dst_ip ? `${r.dst_ip}:${r.dst_port ?? "?"}` : "—"}
</span>
{r.dst_ip && <IpDetails ip={r.dst_ip} />}
@@ -423,9 +431,9 @@ export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
{/* IP Reputation */}
{(data.security?.ip_reputation.length ?? 0) > 0 && (
<section>
<h4 className="flex items-center gap-2 text-sm font-semibold text-white mb-3">
<h4 className="flex items-center gap-2 text-sm font-semibold text-card-foreground mb-3">
<Eye className="w-4 h-4 text-purple-400" /> IP Reputation
<span className="ml-auto text-xs text-slate-500">{data.security!.ip_reputation.length} records</span>
<span className="ml-auto text-xs text-muted-foreground">{data.security!.ip_reputation.length} records</span>
</h4>
<TableWrap head={["Remote IP", "Local IP", "Reputation", "Score", "Country", "Blacklisted"]}>
{data.security!.ip_reputation.map((r, i) => (
@@ -434,7 +442,7 @@ export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
<td className="px-3 py-2 font-mono text-xs text-blue-400">{r.local_ip || "—"}</td>
<td className="px-3 py-2 text-xs text-slate-300">{r.reputation || "—"}</td>
<td className="px-3 py-2 text-xs text-yellow-400">{r.score ?? "—"}</td>
<td className="px-3 py-2 text-xs text-slate-400">{r.country || "—"}</td>
<td className="px-3 py-2 text-xs text-muted-foreground">{r.country || "—"}</td>
<td className="px-3 py-2 text-xs">
{r.blacklisted
? <span className="text-red-400 font-semibold">⛔ Yes</span>
@@ -451,9 +459,9 @@ export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{/* Tor */}
<section>
<h4 className="flex items-center gap-2 text-sm font-semibold text-white mb-3">
<h4 className="flex items-center gap-2 text-sm font-semibold text-card-foreground mb-3">
<Router className="w-4 h-4 text-red-400" /> Tor Detections
<span className="ml-auto text-xs text-slate-500">{data.security?.tor_detections.length ?? 0}</span>
<span className="ml-auto text-xs text-muted-foreground">{data.security?.tor_detections.length ?? 0}</span>
</h4>
{(data.security?.tor_detections.length ?? 0) === 0
? <EmptyState msg="No Tor usage detected." />
@@ -461,9 +469,9 @@ export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
<div key={i} className="p-2 bg-red-500/5 border border-red-500/20 rounded-lg text-xs">
<div className="flex justify-between">
<span className="font-mono text-blue-400">{r.ip_address || "—"}</span>
<span className="text-slate-400">{r.country || "—"}</span>
<span className="text-muted-foreground">{r.country || "—"}</span>
</div>
<div className="text-slate-500 mt-0.5">Exit: {r.exit_node || "—"}</div>
<div className="text-muted-foreground mt-0.5">Exit: {r.exit_node || "—"}</div>
</div>
))}</div>
}
@@ -471,9 +479,9 @@ export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
{/* VPN */}
<section>
<h4 className="flex items-center gap-2 text-sm font-semibold text-white mb-3">
<h4 className="flex items-center gap-2 text-sm font-semibold text-card-foreground mb-3">
<Shield className="w-4 h-4 text-blue-400" /> VPN Detections
<span className="ml-auto text-xs text-slate-500">{data.security?.vpn_detections.length ?? 0}</span>
<span className="ml-auto text-xs text-muted-foreground">{data.security?.vpn_detections.length ?? 0}</span>
</h4>
{(data.security?.vpn_detections.length ?? 0) === 0
? <EmptyState msg="No VPN usage detected." />
@@ -483,11 +491,11 @@ export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
<span className="font-mono text-blue-400">{r.ip_address || "—"}</span>
<span className="text-purple-400">{r.vpn_type || "—"}</span>
</div>
<div className="text-slate-500 mt-0.5 flex flex-col gap-0.5">
<div className="text-muted-foreground mt-0.5 flex flex-col gap-0.5">
<span>Remote: {r.remote_ip || "—"} • {r.country || "—"}</span>
{r.remote_ip && <IpDetails ip={r.remote_ip} />}
</div>
{r.confidence && <div className="text-slate-500">Confidence: {(r.confidence * 100).toFixed(0)}%</div>}
{r.confidence && <div className="text-muted-foreground">Confidence: {(r.confidence * 100).toFixed(0)}%</div>}
</div>
))}</div>
}
@@ -497,9 +505,9 @@ export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
{/* Server Discovery */}
{(data.server_discovery?.length ?? 0) > 0 && (
<section>
<h4 className="flex items-center gap-2 text-sm font-semibold text-white mb-3">
<h4 className="flex items-center gap-2 text-sm font-semibold text-card-foreground mb-3">
<Server className="w-4 h-4 text-cyan-400" /> Servers Discovered
<span className="ml-auto text-xs text-slate-500">{data.server_discovery!.length} records</span>
<span className="ml-auto text-xs text-muted-foreground">{data.server_discovery!.length} records</span>
</h4>
<TableWrap head={["IP", "Hostname", "Server Type", "Port", "Protocol", "OS"]}>
{data.server_discovery!.map((r, i) => (
@@ -512,9 +520,9 @@ export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
</td>
<td className="px-3 py-2 text-xs text-slate-300 truncate max-w-[120px]">{r.hostname || "—"}</td>
<td className="px-3 py-2 text-xs text-cyan-400">{r.server_type || "—"}</td>
<td className="px-3 py-2 text-xs text-slate-400">{r.port ?? "—"}</td>
<td className="px-3 py-2 text-xs text-muted-foreground">{r.port ?? "—"}</td>
<td className="px-3 py-2 text-xs text-purple-300">{r.protocol || "—"}</td>
<td className="px-3 py-2 text-xs text-slate-500">{r.os_label || "—"}</td>
<td className="px-3 py-2 text-xs text-muted-foreground">{r.os_label || "—"}</td>
</tr>
))}
</TableWrap>
@@ -533,7 +541,7 @@ export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
<div key={i} className={`p-3 border rounded-xl text-xs transition-colors ${
(ev.severity || "").toLowerCase() === "critical" ? "bg-red-500/5 border-red-500/20 hover:bg-red-500/10" :
(ev.severity || "").toLowerCase() === "high" ? "bg-orange-500/5 border-orange-500/20 hover:bg-orange-500/10" :
"bg-white/[0.03] border-white/5 hover:bg-white/[0.06]"
"bg-white/[0.03] border-border/50 hover:bg-white/[0.06]"
}`}>
<div className="flex items-start gap-3">
<span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs ring-1 flex-shrink-0 ${sc.badge}`}>
@@ -542,11 +550,11 @@ export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
</span>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 flex-wrap mb-1">
<span className="font-semibold text-white">{ev.event_type || "Unknown"}</span>
<span className="font-semibold text-card-foreground">{ev.event_type || "Unknown"}</span>
<span className="font-mono text-blue-400">{ev.ip_address || "—"}</span>
{ev.mac_address && <span className="font-mono text-slate-500">{ev.mac_address}</span>}
{ev.mac_address && <span className="font-mono text-muted-foreground">{ev.mac_address}</span>}
</div>
{ev.description && <p className="text-slate-400 leading-relaxed">{ev.description}</p>}
{ev.description && <p className="text-muted-foreground leading-relaxed">{ev.description}</p>}
</div>
<span className="text-slate-600 flex-shrink-0 whitespace-nowrap">{ev.event_at?.slice(0, 16) || "—"}</span>
</div>
@@ -565,23 +573,23 @@ export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
const maxTotal = Math.max(...data.mac_bandwidth.map(x => x.total ?? 0), 1);
const pct = ((m.total ?? 0) / maxTotal) * 100;
return (
<div key={i} className="p-3 bg-white/[0.03] hover:bg-white/[0.06] border border-white/5 rounded-xl transition-colors">
<div key={i} className="p-3 bg-white/[0.03] hover:bg-white/[0.06] border border-border/50 rounded-xl transition-colors">
<div className="flex items-center gap-3 mb-2">
<Wifi className="w-4 h-4 text-slate-400 flex-shrink-0" />
<Wifi className="w-4 h-4 text-muted-foreground flex-shrink-0" />
<div className="flex-1 min-w-0">
<p className="font-mono text-xs text-slate-200">{m.mac_address}</p>
<p className="text-xs text-slate-500">{m.manufacturer || "Unknown Manufacturer"}</p>
<p className="text-xs text-muted-foreground">{m.manufacturer || "Unknown Manufacturer"}</p>
</div>
<div className="text-right flex-shrink-0">
<p className="text-xs text-white font-medium">{fmtBytes(m.total ?? 0)}</p>
<p className="text-xs text-slate-500">Total</p>
<p className="text-xs text-card-foreground font-medium">{fmtBytes(m.total ?? 0)}</p>
<p className="text-xs text-muted-foreground">Total</p>
</div>
</div>
<div className="flex gap-4 text-xs mb-2">
<span className="text-cyan-400">↓ {fmtBytes(m.download ?? 0)}</span>
<span className="text-green-400">↑ {fmtBytes(m.upload ?? 0)}</span>
</div>
<div className="h-1 bg-white/5 rounded-full overflow-hidden">
<div className="h-1 bg-secondary rounded-full overflow-hidden">
<div className="h-full bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full" style={{ width: `${pct}%` }} />
</div>
</div>
src/components/ui/AppDetailModal.tsx
+36 -28
View File
@@ -16,6 +16,14 @@ export function AppDetailModal({ appLabel, favicon, category, onClose }: Props)
const [data, setData] = useState<AppDetails | null>(null);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [isClosing, setIsClosing] = useState(false);
const handleClose = () => {
setIsClosing(true);
setTimeout(() => {
onClose();
}, 480);
};
useEffect(() => {
setIsLoading(true);
@@ -27,14 +35,14 @@ export function AppDetailModal({ appLabel, favicon, category, onClose }: Props)
}, [appLabel]);
return (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4" onClick={onClose}>
<div className="absolute inset-0 bg-black/70 backdrop-blur-sm" />
<div className="fixed inset-0 z-50 flex items-center justify-center p-4" onClick={handleClose}>
<div className={`absolute inset-0 bg-black/40 dark:bg-black/75 backdrop-blur-sm ${isClosing ? 'animate-overlay-out' : 'animate-overlay-in'}`} />
<div
className="relative bg-[#0d1117] border border-white/10 rounded-2xl w-full max-w-2xl max-h-[85vh] flex flex-col shadow-2xl shadow-black/60 animate-slide-up"
className={`relative bg-card border border-border rounded-2xl w-full max-w-2xl h-[85vh] flex flex-col shadow-2xl shadow-black/60 ${isClosing ? 'animate-modal-out' : 'animate-modal-in'}`}
onClick={(e) => e.stopPropagation()}
>
{/* Header */}
<div className="flex items-center justify-between px-6 py-4 border-b border-white/10 bg-gradient-to-r from-green-900/30 to-emerald-900/20 rounded-t-2xl">
<div className="flex items-center justify-between px-6 py-4 border-b border-border bg-gradient-to-r from-green-900/30 to-emerald-900/20 rounded-t-2xl">
<div className="flex items-center gap-3">
<div className="p-2 bg-green-500/20 rounded-lg ring-1 ring-green-500/30">
{favicon ? (
@@ -44,24 +52,24 @@ export function AppDetailModal({ appLabel, favicon, category, onClose }: Props)
)}
</div>
<div>
<h3 className="text-lg font-bold text-white">{appLabel}</h3>
{category && <p className="text-xs text-slate-400">{category}</p>}
<h3 className="text-lg font-bold text-card-foreground">{appLabel}</h3>
{category && <p className="text-xs text-muted-foreground">{category}</p>}
</div>
</div>
<button
onClick={onClose}
className="p-2 text-slate-400 hover:text-white hover:bg-white/10 rounded-lg transition-all"
onClick={handleClose}
className="p-2 text-muted-foreground hover:text-card-foreground hover:bg-secondary rounded-lg transition-all flex-shrink-0"
>
<X className="w-5 h-5" />
</button>
</div>
{/* Body */}
<div className="flex-1 overflow-y-auto">
<div className="flex-1 overflow-y-auto custom-scrollbar">
{isLoading ? (
<div className="flex flex-col items-center justify-center py-20 gap-3">
<Loader2 className="w-8 h-8 animate-spin text-green-400" />
<p className="text-slate-400 text-sm">Loading application data...</p>
<p className="text-muted-foreground text-sm">Loading application data...</p>
</div>
) : error ? (
<div className="p-6 text-center text-red-400 text-sm">{error}</div>
@@ -69,13 +77,13 @@ export function AppDetailModal({ appLabel, favicon, category, onClose }: Props)
<div className="p-6 space-y-6">
{/* Total Summary */}
<div className="grid grid-cols-2 gap-3 p-4 bg-white/[0.03] border border-white/5 rounded-xl">
<div className="grid grid-cols-2 gap-3 p-4 bg-white/[0.03] border border-border/50 rounded-xl">
<div className="text-center">
<p className="text-xs text-slate-500">Total Download</p>
<p className="text-xs text-muted-foreground">Total Download</p>
<p className="text-xl font-bold text-cyan-400">{fmtBytes(data.total_download ?? 0)}</p>
</div>
<div className="text-center">
<p className="text-xs text-slate-500">Total Upload</p>
<p className="text-xs text-muted-foreground">Total Upload</p>
<p className="text-xl font-bold text-green-400">{fmtBytes(data.total_upload ?? 0)}</p>
</div>
</div>
@@ -87,20 +95,20 @@ export function AppDetailModal({ appLabel, favicon, category, onClose }: Props)
Usage per Agent
</h4>
{data.agent_scorecard.length === 0 ? (
<p className="text-slate-500 text-sm text-center py-4">No traffic from known agents for this app yet.</p>
<p className="text-muted-foreground text-sm text-center py-4">No traffic from known agents for this app yet.</p>
) : (
<div className="space-y-2">
{data.agent_scorecard.map((a, i) => {
const maxDl = Math.max(...data.agent_scorecard.map(x => x.download), 1);
const pct = (a.download / maxDl) * 100;
return (
<div key={i} className="p-3 bg-white/[0.03] border border-white/5 rounded-lg">
<div key={i} className="p-3 bg-white/[0.03] border border-border/50 rounded-lg">
<div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-2">
<div className="w-2 h-2 rounded-full bg-blue-400" />
<span className="text-sm font-medium text-white">{a.agent_label}</span>
<span className="text-sm font-medium text-card-foreground">{a.agent_label}</span>
{a.agent_uuid && (
<span className="text-xs font-mono text-slate-500">{a.agent_uuid}</span>
<span className="text-xs font-mono text-muted-foreground">{a.agent_uuid}</span>
)}
</div>
<div className="flex items-center gap-3 text-xs font-mono">
@@ -108,7 +116,7 @@ export function AppDetailModal({ appLabel, favicon, category, onClose }: Props)
<span className="text-green-400">↑ {fmtBytes(a.upload ?? 0)}</span>
</div>
</div>
<div className="h-1.5 bg-white/5 rounded-full overflow-hidden">
<div className="h-1.5 bg-secondary rounded-full overflow-hidden">
<div
className="h-full bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full transition-all"
style={{ width: `${pct}%` }}
@@ -133,17 +141,17 @@ export function AppDetailModal({ appLabel, favicon, category, onClose }: Props)
)}
</h4>
{data.top_ips.length === 0 ? (
<p className="text-slate-500 text-sm text-center py-4">No device data available.</p>
<p className="text-muted-foreground text-sm text-center py-4">No device data available.</p>
) : (
<div className="overflow-x-auto">
<table className="w-full text-sm">
<thead>
<tr className="text-left border-b border-white/10">
<th className="pb-2 text-xs font-medium text-slate-400">#</th>
<th className="pb-2 text-xs font-medium text-slate-400">IP Address</th>
<th className="pb-2 text-xs font-medium text-slate-400 text-right">Download</th>
<th className="pb-2 text-xs font-medium text-slate-400 text-right">Upload</th>
<th className="pb-2 text-xs font-medium text-slate-400">Usage</th>
<tr className="text-left border-b border-border">
<th className="pb-2 text-xs font-medium text-muted-foreground">#</th>
<th className="pb-2 text-xs font-medium text-muted-foreground">IP Address</th>
<th className="pb-2 text-xs font-medium text-muted-foreground text-right">Download</th>
<th className="pb-2 text-xs font-medium text-muted-foreground text-right">Upload</th>
<th className="pb-2 text-xs font-medium text-muted-foreground">Usage</th>
</tr>
</thead>
<tbody className="divide-y divide-white/5">
@@ -152,7 +160,7 @@ export function AppDetailModal({ appLabel, favicon, category, onClose }: Props)
const pct = (ip.download / maxDl) * 100;
return (
<tr key={i} className="hover:bg-white/[0.03] transition-colors">
<td className="py-2 pr-4 text-xs text-slate-500">{i + 1}</td>
<td className="py-2 pr-4 text-xs text-muted-foreground">{i + 1}</td>
<td className="py-2 pr-4 font-mono text-xs">
<div className="flex items-center gap-1.5 flex-wrap">
<span className={ip.blacklisted ? "text-red-400" : "text-blue-400"}>{ip.ip_address || "-"}</span>
@@ -160,14 +168,14 @@ export function AppDetailModal({ appLabel, favicon, category, onClose }: Props)
<span className="text-xs text-red-300 bg-red-500/10 px-1.5 py-0.5 rounded-full ring-1 ring-red-500/30">🚫</span>
)}
{!ip.blacklisted && ip.reputation && ip.reputation !== "Unknown" && (
<span className="text-xs text-slate-400 bg-white/5 px-1.5 py-0.5 rounded">{ip.reputation}</span>
<span className="text-xs text-muted-foreground bg-secondary px-1.5 py-0.5 rounded">{ip.reputation}</span>
)}
</div>
</td>
<td className="py-2 pr-4 text-right text-xs text-cyan-400">{fmtBytes(ip.download)}</td>
<td className="py-2 pr-4 text-right text-xs text-green-400">{fmtBytes(ip.upload ?? 0)}</td>
<td className="py-2 w-32">
<div className="h-1.5 bg-white/5 rounded-full overflow-hidden">
<div className="h-1.5 bg-secondary rounded-full overflow-hidden">
<div
className={`h-full rounded-full ${ip.blacklisted ? "bg-red-500" : "bg-gradient-to-r from-cyan-500 to-green-500"}`}
style={{ width: `${pct}%` }}
src/components/ui/DeviceDetailModal.tsx
+82 -74
View File
@@ -75,7 +75,7 @@ function sevStyle(sev: string | null) {
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";
default: return "bg-slate-700/40 text-muted-foreground";
}
}
@@ -87,17 +87,17 @@ function riskStyle(lvl: string | null) {
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" };
default: return { bar: "bg-slate-500", badge: "bg-slate-700/40 text-muted-foreground" };
}
}
function TableWrap({ head, children }: { head: string[]; children: React.ReactNode }) {
return (
<div className="overflow-x-auto rounded-xl border border-white/5">
<div className="overflow-x-auto rounded-xl border border-border/50">
<table className="w-full text-xs">
<thead>
<tr className="border-b border-white/10 bg-white/[0.02]">
{head.map((h) => <th key={h} className="px-3 py-2 text-left font-medium text-slate-400 whitespace-nowrap">{h}</th>)}
<tr className="border-b border-border bg-muted/50">
{head.map((h) => <th key={h} className="px-3 py-2 text-left font-medium text-muted-foreground whitespace-nowrap">{h}</th>)}
</tr>
</thead>
<tbody className="divide-y divide-white/5">{children}</tbody>
@@ -107,7 +107,7 @@ function TableWrap({ head, children }: { head: string[]; children: React.ReactNo
}
function Empty({ msg }: { msg: string }) {
return <p className="text-slate-500 text-sm text-center py-10">{msg}</p>;
return <p className="text-muted-foreground text-sm text-center py-10">{msg}</p>;
}
// ── Main component ────────────────────────────────────────────────────────────
@@ -116,6 +116,14 @@ export function DeviceDetailModal({ ip, deviceLabel, macAddress, onClose }: Prop
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [activeTab, setActiveTab] = useState<Tab>("info");
const [isClosing, setIsClosing] = useState(false);
const handleClose = () => {
setIsClosing(true);
setTimeout(() => {
onClose();
}, 480);
};
useEffect(() => {
setIsLoading(true);
@@ -146,61 +154,61 @@ export function DeviceDetailModal({ ip, deviceLabel, macAddress, onClose }: Prop
];
return (
<div className="fixed inset-0 z-[60] flex items-center justify-center p-4" onClick={onClose}>
<div className="absolute inset-0 bg-black/75 backdrop-blur-sm" />
<div className="fixed inset-0 z-[60] flex items-center justify-center p-4" onClick={handleClose}>
<div className={`absolute inset-0 bg-black/40 dark:bg-black/75 backdrop-blur-sm ${isClosing ? 'animate-overlay-out' : 'animate-overlay-in'}`} />
<div
className="relative bg-[#0b0f16] border border-white/10 rounded-2xl w-full max-w-4xl max-h-[92vh] flex flex-col shadow-2xl shadow-black/70 animate-slide-up"
className={`relative bg-card border border-border rounded-2xl w-full max-w-4xl h-[85vh] flex flex-col shadow-2xl shadow-black/70 ${isClosing ? 'animate-modal-out' : 'animate-modal-in'}`}
onClick={(e) => e.stopPropagation()}
>
{/* ── Header ── */}
<div className="flex items-center justify-between px-6 py-4 border-b border-white/10 bg-gradient-to-r from-cyan-900/30 to-teal-900/20 rounded-t-2xl flex-shrink-0">
<div className="flex items-center justify-between px-6 py-4 border-b border-border bg-gradient-to-r from-cyan-900/30 to-teal-900/20 rounded-t-2xl flex-shrink-0">
<div className="flex items-center gap-3">
<div className="p-2 bg-cyan-500/20 rounded-lg ring-1 ring-cyan-500/30">
<Monitor className="w-5 h-5 text-cyan-400" />
</div>
<div>
<h3 className="text-base font-bold text-white leading-tight">
<h3 className="text-base font-bold text-card-foreground leading-tight">
{di?.device_label || deviceLabel || ip}
</h3>
<div className="flex items-center gap-3 mt-0.5 flex-wrap">
<span className="text-xs text-cyan-400 font-mono">{ip}</span>
{(di?.mac_address || macAddress) && (
<span className="text-xs text-slate-500 font-mono">{di?.mac_address || macAddress}</span>
<span className="text-xs text-muted-foreground font-mono">{di?.mac_address || macAddress}</span>
)}
{di?.os_label && (
<span className="text-xs text-blue-400 bg-blue-500/10 px-2 py-0.5 rounded">{di.os_label}</span>
)}
{di?.device_type && (
<span className="text-xs text-slate-400 bg-white/5 px-2 py-0.5 rounded">{di.device_type}</span>
<span className="text-xs text-muted-foreground bg-secondary px-2 py-0.5 rounded">{di.device_type}</span>
)}
</div>
</div>
</div>
<button onClick={onClose} className="p-2 text-slate-400 hover:text-white hover:bg-white/10 rounded-lg transition-all flex-shrink-0">
<button onClick={handleClose} className="p-2 text-muted-foreground hover:text-card-foreground hover:bg-secondary rounded-lg transition-all flex-shrink-0">
<X className="w-5 h-5" />
</button>
</div>
{/* ── Body ── */}
<div className="flex-1 overflow-y-auto min-h-0">
<div className="flex-1 overflow-y-auto min-h-0 custom-scrollbar">
{isLoading ? (
<div className="flex flex-col items-center justify-center py-20 gap-3">
<Loader2 className="w-8 h-8 animate-spin text-cyan-400" />
<p className="text-slate-400 text-sm">Loading device data…</p>
<p className="text-muted-foreground text-sm">Loading device data…</p>
</div>
) : error ? (
<div className="p-6 text-center text-red-400 text-sm">{error}</div>
) : data ? (
<>
{/* ── KPI bar ── */}
<div className="grid grid-cols-3 gap-3 px-6 py-3 border-b border-white/5 bg-white/[0.01] flex-shrink-0">
<div className="grid grid-cols-3 gap-3 px-6 py-3 border-b border-border/50 bg-muted/30 flex-shrink-0">
{[
{ 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" },
{ label: "Total Flows",value: data.flow_count, color: "text-card-foreground" },
].map(k => (
<div key={k.label} className="text-center">
<p className="text-[10px] text-slate-500 uppercase tracking-wider mb-0.5">{k.label}</p>
<p className="text-[10px] text-muted-foreground uppercase tracking-wider mb-0.5">{k.label}</p>
<p className={`text-xl font-bold ${k.color}`}>{k.value}</p>
</div>
))}
@@ -216,18 +224,18 @@ export function DeviceDetailModal({ ip, deviceLabel, macAddress, onClose }: Prop
{/* ── MAC bandwidth strip ── */}
{data.mac_bandwidth && (
<div className="mx-6 mt-2 flex items-center gap-3 px-3 py-2 bg-white/[0.02] border border-white/5 rounded-lg text-xs">
<Wifi className="w-4 h-4 text-slate-400 flex-shrink-0" />
<span className="text-slate-400 font-mono">{data.mac_bandwidth.mac_address}</span>
<span className="text-slate-500">{data.mac_bandwidth.manufacturer || "Unknown"}</span>
<div className="mx-6 mt-2 flex items-center gap-3 px-3 py-2 bg-muted/50 border border-border/50 rounded-lg text-xs">
<Wifi className="w-4 h-4 text-muted-foreground flex-shrink-0" />
<span className="text-muted-foreground font-mono">{data.mac_bandwidth.mac_address}</span>
<span className="text-muted-foreground">{data.mac_bandwidth.manufacturer || "Unknown"}</span>
<span className="ml-auto text-cyan-400">↓ {fmtBytes(data.mac_bandwidth.download)}</span>
<span className="text-green-400">↑ {fmtBytes(data.mac_bandwidth.upload)}</span>
<span className="text-slate-400 font-medium">Total: {fmtBytes(data.mac_bandwidth.total)}</span>
<span className="text-muted-foreground font-medium">Total: {fmtBytes(data.mac_bandwidth.total)}</span>
</div>
)}
{/* ── Tabs ── */}
<div className="flex gap-1 px-6 py-3 border-b border-white/5 flex-shrink-0 flex-wrap">
<div className="flex gap-1 px-6 py-3 border-b border-border/50 flex-shrink-0 flex-wrap">
{tabs.map((tab) => (
<button
key={tab.key}
@@ -235,7 +243,7 @@ export function DeviceDetailModal({ ip, deviceLabel, macAddress, onClose }: Prop
className={`relative flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
activeTab === tab.key
? "bg-cyan-500/20 text-cyan-300 ring-1 ring-cyan-500/40"
: "text-slate-400 hover:text-white hover:bg-white/5"
: "text-muted-foreground hover:text-card-foreground hover:bg-secondary"
}`}
>
{tab.icon}
@@ -259,8 +267,8 @@ export function DeviceDetailModal({ ip, deviceLabel, macAddress, onClose }: Prop
{activeTab === "info" && (
<div className="space-y-4">
{/* Device identity card */}
<div className="p-4 bg-white/[0.02] border border-white/5 rounded-xl space-y-3">
<p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Informasi Device</p>
<div className="p-4 bg-muted/50 border border-border/50 rounded-xl space-y-3">
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Informasi Device</p>
<div className="grid grid-cols-2 gap-3 text-sm">
{[
{ label: "Label", value: di?.device_label },
@@ -272,8 +280,8 @@ export function DeviceDetailModal({ ip, deviceLabel, macAddress, onClose }: Prop
{ label: "Is New", value: di?.is_new === 1 ? "Perangkat Baru ✨" : di?.is_new === 0 ? "Dikenal" : null },
].filter(f => f.value).map(f => (
<div key={f.label} className="flex flex-col gap-0.5">
<span className="text-xs text-slate-500">{f.label}</span>
<span className="text-xs font-medium text-white font-mono">{String(f.value)}</span>
<span className="text-xs text-muted-foreground">{f.label}</span>
<span className="text-xs font-medium text-card-foreground font-mono">{String(f.value)}</span>
</div>
))}
</div>
@@ -282,22 +290,22 @@ export function DeviceDetailModal({ ip, deviceLabel, macAddress, onClose }: Prop
{/* Top domains */}
{data.top_domains.length > 0 && (
<div>
<p className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Top Domains Diakses</p>
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">Top Domains Diakses</p>
<div className="space-y-1.5">
{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 (
<div key={i} className="flex items-center gap-3 p-2 bg-white/[0.02] rounded-lg">
<div key={i} className="flex items-center gap-3 p-2 bg-muted/50 rounded-lg">
<div className="flex-1 min-w-0">
<p className="text-xs text-slate-200 truncate font-mono">{d.domain}</p>
<div className="h-1 bg-white/5 rounded-full mt-1 overflow-hidden">
<div className="h-1 bg-secondary rounded-full mt-1 overflow-hidden">
<div className="h-full bg-gradient-to-r from-teal-500 to-cyan-500 rounded-full" style={{ width: `${pct}%` }} />
</div>
</div>
<div className="flex-shrink-0 text-right">
<p className="text-xs text-cyan-400">{fmtBytes(d.download)}</p>
<p className="text-[10px] text-slate-500">{d.flow_count} flows</p>
<p className="text-[10px] text-muted-foreground">{d.flow_count} flows</p>
</div>
</div>
);
@@ -320,19 +328,19 @@ export function DeviceDetailModal({ ip, deviceLabel, macAddress, onClose }: Prop
<span className="font-mono text-xs text-blue-400 block">{f.dst_ip || "—"}</span>
{f.dst_ip && <IpDetails ip={f.dst_ip} />}
</td>
<td className="px-3 py-2 text-xs text-slate-400">{f.dst_port ?? "—"}</td>
<td className="px-3 py-2 text-xs text-muted-foreground">{f.dst_port ?? "—"}</td>
<td className="px-3 py-2 max-w-[180px]">
<span className="text-xs text-teal-300 font-mono truncate block" title={exp.main}>
{exp.main}
</span>
{exp.sub && (
<span className="text-[10px] text-slate-500 block italic">{exp.sub}</span>
<span className="text-[10px] text-muted-foreground block italic">{exp.sub}</span>
)}
</td>
<td className="px-3 py-2 text-xs text-slate-400">{f.protocol || "—"}</td>
<td className="px-3 py-2 text-xs text-muted-foreground">{f.protocol || "—"}</td>
<td className="px-3 py-2 text-right text-xs text-cyan-400 whitespace-nowrap">{fmtBytes(f.download)}</td>
<td className="px-3 py-2 text-right text-xs text-green-400 whitespace-nowrap">{fmtBytes(f.upload)}</td>
<td className="px-3 py-2 text-xs text-slate-500 whitespace-nowrap">{f.last_seen?.slice(0, 16) || "—"}</td>
<td className="px-3 py-2 text-xs text-muted-foreground whitespace-nowrap">{f.last_seen?.slice(0, 16) || "—"}</td>
</tr>
);
})}
@@ -347,15 +355,15 @@ export function DeviceDetailModal({ ip, deviceLabel, macAddress, onClose }: Prop
: (
<div className="space-y-2">
{/* Legend */}
<div className="flex items-center gap-3 pb-1 mb-1 border-b border-white/5 flex-wrap">
<span className="flex items-center gap-1.5 text-[10px] text-slate-400">
<div className="flex items-center gap-3 pb-1 mb-1 border-b border-border/50 flex-wrap">
<span className="flex items-center gap-1.5 text-[10px] text-muted-foreground">
<Globe className="w-3 h-3 text-teal-400" /> Domain / Website
</span>
<span className="flex items-center gap-1.5 text-[10px] text-slate-400">
<span className="flex items-center gap-1.5 text-[10px] text-muted-foreground">
<Shield className="w-3 h-3 text-blue-400" /> Protokol
</span>
<span className="flex items-center gap-1.5 text-[10px] text-slate-400">
<Link className="w-3 h-3 text-slate-500" /> Port
<span className="flex items-center gap-1.5 text-[10px] text-muted-foreground">
<Link className="w-3 h-3 text-muted-foreground" /> Port
</span>
</div>
@@ -372,10 +380,10 @@ export function DeviceDetailModal({ ip, deviceLabel, macAddress, onClose }: Prop
: isProtocol ? 'from-blue-500 to-indigo-500'
: 'from-slate-600 to-slate-500';
const iconBg = isDomain ? 'bg-teal-500/15' : isProtocol ? 'bg-blue-500/15' : 'bg-slate-700/40';
const iconColor = isDomain ? 'text-teal-400' : isProtocol ? 'text-blue-400' : 'text-slate-500';
const iconColor = isDomain ? 'text-teal-400' : isProtocol ? 'text-blue-400' : 'text-muted-foreground';
return (
<div key={i} className="p-3 bg-white/[0.03] hover:bg-white/[0.06] border border-white/5 rounded-xl transition-colors">
<div key={i} className="p-3 bg-white/[0.03] hover:bg-white/[0.06] border border-border/50 rounded-xl transition-colors">
<div className="flex items-start gap-3 mb-1.5">
{/* Icon */}
<div className={`w-7 h-7 rounded-lg flex-shrink-0 flex items-center justify-center ${iconBg}`}>
@@ -391,7 +399,7 @@ export function DeviceDetailModal({ ip, deviceLabel, macAddress, onClose }: Prop
<div className="flex items-center gap-2 flex-wrap">
{/* Main label: domain name or protocol */}
<span className={`font-medium text-sm truncate max-w-[200px] ${
isDomain ? 'text-teal-200 font-mono' : isProtocol ? 'text-blue-200' : 'text-slate-400'
isDomain ? 'text-teal-200 font-mono' : isProtocol ? 'text-blue-200' : 'text-muted-foreground'
}`}>
{a.label}
</span>
@@ -412,8 +420,8 @@ export function DeviceDetailModal({ ip, deviceLabel, macAddress, onClose }: Prop
{/* Stats */}
<div className="text-right flex-shrink-0">
<p className="text-xs font-mono text-white">{fmtBytes(total)}</p>
<p className="text-[10px] text-slate-500">{a.flow_count} flows</p>
<p className="text-xs font-mono text-card-foreground">{fmtBytes(total)}</p>
<p className="text-[10px] text-muted-foreground">{a.flow_count} flows</p>
</div>
</div>
@@ -424,7 +432,7 @@ export function DeviceDetailModal({ ip, deviceLabel, macAddress, onClose }: Prop
</div>
{/* Progress bar */}
<div className="h-1 bg-white/5 rounded-full overflow-hidden ml-10">
<div className="h-1 bg-secondary rounded-full overflow-hidden ml-10">
<div
className={`h-full bg-gradient-to-r ${barColor} rounded-full transition-all`}
style={{ width: `${pct}%` }}
@@ -445,9 +453,9 @@ export function DeviceDetailModal({ ip, deviceLabel, macAddress, onClose }: Prop
const { bar, badge } = riskStyle(enc.risk_level);
return (
<div className="space-y-4">
<div className="p-5 bg-white/[0.02] border border-white/5 rounded-xl">
<div className="p-5 bg-muted/50 border border-border/50 rounded-xl">
<div className="flex items-center justify-between mb-4">
<p className="text-sm font-semibold text-white">Status Enkripsi Traffic</p>
<p className="text-sm font-semibold text-card-foreground">Status Enkripsi Traffic</p>
<span className={`px-3 py-1 rounded-full text-xs font-semibold ${badge}`}>
{enc.risk_level || "Unknown"}
</span>
@@ -465,32 +473,32 @@ export function DeviceDetailModal({ ip, deviceLabel, macAddress, onClose }: Prop
/>
</svg>
<div className="absolute inset-0 flex items-center justify-center">
<span className="text-xl font-bold text-white">{pct}%</span>
<span className="text-xl font-bold text-card-foreground">{pct}%</span>
</div>
</div>
<div className="flex-1 space-y-2">
<div>
<div className="flex justify-between text-xs mb-1">
<span className="text-slate-400">Terenkripsi</span>
<span className="text-muted-foreground">Terenkripsi</span>
<span className="text-green-400">{fmtBytes(enc.encrypted_bytes ?? 0)}</span>
</div>
<div className="h-2 bg-white/5 rounded-full overflow-hidden">
<div className="h-2 bg-secondary rounded-full overflow-hidden">
<div className="h-full bg-green-500 rounded-full transition-all" style={{ width: `${pct}%` }} />
</div>
</div>
<div>
<div className="flex justify-between text-xs mb-1">
<span className="text-slate-400">Tidak Terenkripsi</span>
<span className="text-muted-foreground">Tidak Terenkripsi</span>
<span className="text-red-400">{fmtBytes(enc.unencrypted_bytes ?? 0)}</span>
</div>
<div className="h-2 bg-white/5 rounded-full overflow-hidden">
<div className="h-2 bg-secondary rounded-full overflow-hidden">
<div className="h-full bg-red-500 rounded-full transition-all" style={{ width: `${100 - pct}%` }} />
</div>
</div>
</div>
</div>
<div className="text-xs text-slate-500 text-right">
<div className="text-xs text-muted-foreground text-right">
Total: {fmtBytes(enc.total_bytes ?? 0)}
</div>
</div>
@@ -525,9 +533,9 @@ export function DeviceDetailModal({ ip, deviceLabel, macAddress, onClose }: Prop
</span>
</td>
<td className="px-3 py-2 text-xs text-slate-300 font-mono truncate max-w-[140px]">{s.hostname || "—"}</td>
<td className="px-3 py-2 text-xs text-slate-400">{s.port ?? "—"}</td>
<td className="px-3 py-2 text-xs text-muted-foreground">{s.port ?? "—"}</td>
<td className="px-3 py-2 text-xs text-purple-300">{s.protocol || "—"}</td>
<td className="px-3 py-2 text-xs text-slate-500">{s.os_label || "—"}</td>
<td className="px-3 py-2 text-xs text-muted-foreground">{s.os_label || "—"}</td>
<td className="px-3 py-2 text-right text-xs text-cyan-400">{fmtBytes(s.download)}</td>
<td className="px-3 py-2 text-right text-xs text-green-400">{fmtBytes(s.upload)}</td>
</tr>
@@ -541,7 +549,7 @@ export function DeviceDetailModal({ ip, deviceLabel, macAddress, onClose }: Prop
data.unencrypted_passwords.length === 0
? <div className="text-center py-10">
<p className="text-green-400 text-2xl mb-2">✅</p>
<p className="text-slate-400 text-sm">Tidak ada password cleartext yang terdeteksi.</p>
<p className="text-muted-foreground text-sm">Tidak ada password cleartext yang terdeteksi.</p>
</div>
: (
<div className="space-y-3">
@@ -558,7 +566,7 @@ export function DeviceDetailModal({ ip, deviceLabel, macAddress, onClose }: Prop
{p.dst_ip && <IpDetails ip={p.dst_ip} />}
</div>
</td>
<td className="px-3 py-2 text-xs text-slate-400">{p.dst_port ?? "—"}</td>
<td className="px-3 py-2 text-xs text-muted-foreground">{p.dst_port ?? "—"}</td>
<td className="px-3 py-2 text-xs text-slate-300">{p.protocol || "—"}</td>
<td className="px-3 py-2 text-xs text-yellow-300 font-mono">{p.username || "—"}</td>
<td className="px-3 py-2">
@@ -588,7 +596,7 @@ export function DeviceDetailModal({ ip, deviceLabel, macAddress, onClose }: Prop
</td>
<td className="px-3 py-2 text-xs text-slate-300">{r.reputation || "—"}</td>
<td className="px-3 py-2 text-xs text-yellow-400">{r.score ?? "—"}</td>
<td className="px-3 py-2 text-xs text-slate-400">{r.country || "—"}</td>
<td className="px-3 py-2 text-xs text-muted-foreground">{r.country || "—"}</td>
<td className="px-3 py-2 text-xs text-purple-300 truncate max-w-[80px]">{r.app_label || "—"}</td>
<td className="px-3 py-2 text-xs">
{r.blacklisted
@@ -607,27 +615,27 @@ export function DeviceDetailModal({ ip, deviceLabel, macAddress, onClose }: Prop
<div className="space-y-6">
{/* VPN */}
<section>
<h4 className="flex items-center gap-2 text-sm font-semibold text-white mb-3">
<h4 className="flex items-center gap-2 text-sm font-semibold text-card-foreground mb-3">
<Shield className="w-4 h-4 text-blue-400" /> Deteksi VPN
<span className="ml-auto text-xs text-slate-500">{data.vpn_detections.length} records</span>
<span className="ml-auto text-xs text-muted-foreground">{data.vpn_detections.length} records</span>
</h4>
{data.vpn_detections.length === 0 ? (
<p className="text-slate-500 text-xs">Tidak ada penggunaan VPN yang terdeteksi.</p>
<p className="text-muted-foreground text-xs">Tidak ada penggunaan VPN yang terdeteksi.</p>
) : (
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
{data.vpn_detections.map((v, i) => (
<div key={i} className="p-3 bg-blue-500/5 border border-blue-500/15 rounded-xl text-xs space-y-1">
<div className="flex justify-between">
<span className="text-blue-400 font-medium">{v.vpn_type || "Unknown VPN"}</span>
<span className="text-slate-500">{v.country || "—"}</span>
<span className="text-muted-foreground">{v.country || "—"}</span>
</div>
{v.remote_ip && (
<div className="text-slate-400 font-mono flex flex-col gap-0.5 mt-0.5">
<div className="text-muted-foreground font-mono flex flex-col gap-0.5 mt-0.5">
<span>→ {v.remote_ip}</span>
<IpDetails ip={v.remote_ip} />
</div>
)}
<div className="flex gap-2 text-slate-500">
<div className="flex gap-2 text-muted-foreground">
<span>{v.protocol || "—"}</span>
{v.confidence !== null && v.confidence !== undefined && (
<span className="ml-auto text-purple-400">
@@ -643,27 +651,27 @@ export function DeviceDetailModal({ ip, deviceLabel, macAddress, onClose }: Prop
{/* Events */}
<section>
<h4 className="flex items-center gap-2 text-sm font-semibold text-white mb-3">
<h4 className="flex items-center gap-2 text-sm font-semibold text-card-foreground mb-3">
<Bell className="w-4 h-4 text-yellow-400" /> Security Events
<span className="ml-auto text-xs text-slate-500">{data.events.length} records</span>
<span className="ml-auto text-xs text-muted-foreground">{data.events.length} records</span>
</h4>
{data.events.length === 0 ? (
<p className="text-slate-500 text-xs">Tidak ada security events untuk device ini.</p>
<p className="text-muted-foreground text-xs">Tidak ada security events untuk device ini.</p>
) : (
<div className="space-y-2">
{data.events.map((ev, i) => (
<div key={i} className={`p-3 rounded-xl border text-xs ${
(ev.severity || "").toLowerCase() === "critical" ? "bg-red-500/5 border-red-500/20" :
(ev.severity || "").toLowerCase() === "high" ? "bg-orange-500/5 border-orange-500/15" :
"bg-white/[0.02] border-white/5"
"bg-muted/50 border-border/50"
}`}>
<div className="flex items-start gap-2">
<span className={`flex-shrink-0 px-2 py-0.5 rounded-full text-[10px] font-semibold ${sevStyle(ev.severity)}`}>
{ev.severity || "Info"}
</span>
<div className="flex-1 min-w-0">
<p className="font-medium text-white">{ev.event_type || "Unknown"}</p>
{ev.description && <p className="text-slate-400 mt-0.5 leading-relaxed">{ev.description}</p>}
<p className="font-medium text-card-foreground">{ev.event_type || "Unknown"}</p>
{ev.description && <p className="text-muted-foreground mt-0.5 leading-relaxed">{ev.description}</p>}
</div>
<span className="text-slate-600 flex-shrink-0">{ev.event_at?.slice(0, 16) || "—"}</span>
</div>
src/components/ui/GlobeMap.tsx
+139 -88
View File
@@ -2,8 +2,9 @@
import React, { useEffect, useState, useRef, useMemo } from 'react';
import dynamic from 'next/dynamic';
import { fmtBytes } from '@/lib/utils';
import { useTheme } from "next-themes";
import * as THREE from 'three';
import { fmtBytes } from "@/lib/utils";
// Dynamically import Globe to avoid SSR issues
const Globe = dynamic(() => import('react-globe.gl'), { ssr: false });
@@ -49,6 +50,8 @@ interface GlobeMapProps {
data: {
countryCode: string;
value: number;
upload?: number;
download?: number;
label: string;
}[];
}
@@ -57,48 +60,12 @@ export const GlobeMap = ({ data }: GlobeMapProps) => {
const globeRef = useRef<any>(null);
const [dimensions, setDimensions] = useState({ width: 800, height: 500 });
const [countries, setCountries] = useState<any>(null);
const [userInteracting, setUserInteracting] = useState(false);
const containerRef = useRef<HTMLDivElement>(null);
const { theme } = useTheme();
const isLight = theme === 'light';
// Generate a beautiful, ultra-fresh gradient blue texture for the Light Mode ocean
const lightGlobeTexture = useMemo(() => {
if (typeof window === 'undefined') return '';
const canvas = document.createElement('canvas');
canvas.width = 1024;
canvas.height = 512;
const ctx = canvas.getContext('2d');
if (ctx) {
const gradient = ctx.createLinearGradient(0, 0, 0, 512);
gradient.addColorStop(0, '#bae6fd'); // sky-200 (light bright blue at the top)
gradient.addColorStop(0.5, '#38bdf8'); // sky-400 (vibrant blue equator)
gradient.addColorStop(1, '#0284c7'); // sky-600 (deeper rich blue at the bottom)
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 1024, 512);
}
return canvas.toDataURL('image/png');
}, []);
// Generate a sleek, deep gradient dark texture for the Dark Mode ocean
const darkGlobeTexture = useMemo(() => {
if (typeof window === 'undefined') return '';
const canvas = document.createElement('canvas');
canvas.width = 1024;
canvas.height = 512;
const ctx = canvas.getContext('2d');
if (ctx) {
const gradient = ctx.createLinearGradient(0, 0, 0, 512);
gradient.addColorStop(0, '#0f172a'); // slate-900
gradient.addColorStop(0.5, '#020617'); // slate-950 (deepest dark blue/black)
gradient.addColorStop(1, '#000000'); // black
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 1024, 512);
}
return canvas.toDataURL('image/png');
}, []);
useEffect(() => {
// Handle resizing
const updateDimensions = () => {
if (containerRef.current) {
setDimensions({
@@ -111,7 +78,6 @@ export const GlobeMap = ({ data }: GlobeMapProps) => {
updateDimensions();
window.addEventListener('resize', updateDimensions);
// Fetch high-res vector polygons for both themes' continents
fetch('https://unpkg.com/globe.gl/example/datasets/ne_110m_admin_0_countries.geojson')
.then(res => res.json())
.then(setCountries)
@@ -120,27 +86,24 @@ export const GlobeMap = ({ data }: GlobeMapProps) => {
return () => window.removeEventListener('resize', updateDimensions);
}, []);
// Setup Initial Controls & Position
useEffect(() => {
// Auto-rotate and controls configuration
// Since Globe is dynamically imported, we must wait until the ref is actually populated.
let checkInterval = setInterval(() => {
if (globeRef.current && globeRef.current.controls) {
clearInterval(checkInterval);
const controls = globeRef.current.controls();
controls.autoRotate = true;
controls.autoRotateSpeed = 1.2; // Adjusted auto-rotate speed to 1.5
// Enable inertia/damping for smooth deceleration after dragging
controls.enableDamping = true;
controls.dampingFactor = 0.035;
// Adjust the manual rotation sensitivity
controls.dampingFactor = 0.05;
controls.rotateSpeed = 0.8;
controls.minPolarAngle = Math.PI / 4;
controls.maxPolarAngle = Math.PI * 3/4;
controls.minDistance = 140; // Zoom in limit
controls.maxDistance = 350; // Zoom out limit
// Remove boundaries to allow 360 degree rotation in all directions (as much as OrbitControls allows)
controls.minPolarAngle = 0; // The top pole (North)
controls.maxPolarAngle = Math.PI; // The bottom pole (South)
// Listen for interactions to pause auto-rotate smoothly
controls.addEventListener('start', () => setUserInteracting(true));
controls.addEventListener('end', () => setUserInteracting(false));
// Focus on Southeast Asia initially
globeRef.current.pointOfView({ lat: ORIGIN_LAT, lng: ORIGIN_LNG, altitude: 1.8 }, 2000);
@@ -150,6 +113,47 @@ export const GlobeMap = ({ data }: GlobeMapProps) => {
return () => clearInterval(checkInterval);
}, []);
// Manage Auto Rotate based on Interaction
useEffect(() => {
if (globeRef.current && globeRef.current.controls) {
const controls = globeRef.current.controls();
controls.autoRotate = !userInteracting;
controls.autoRotateSpeed = 1.0;
}
}, [userInteracting]);
// Create a custom material that we can mutate safely
const customGlobeMaterial = useMemo(() => {
const mat = new THREE.MeshPhongMaterial();
mat.color.set('#020617'); // Default to dark mode
return mat;
}, []);
// Smooth Material Color Interpolation for Theme Switching
useEffect(() => {
// Target ocean colors
const targetColor = new THREE.Color(isLight ? '#e0f2fe' : '#020617');
let frameId: number;
const lerpColor = () => {
customGlobeMaterial.color.lerp(targetColor, 0.08); // Smooth interpolation step
const rDiff = Math.abs(customGlobeMaterial.color.r - targetColor.r);
const gDiff = Math.abs(customGlobeMaterial.color.g - targetColor.g);
const bDiff = Math.abs(customGlobeMaterial.color.b - targetColor.b);
if (rDiff + gDiff + bDiff > 0.01) {
frameId = requestAnimationFrame(lerpColor);
} else {
customGlobeMaterial.color.copy(targetColor);
}
};
lerpColor();
return () => cancelAnimationFrame(frameId);
}, [isLight, customGlobeMaterial]);
// Prepare Data Memos
const arcsData = useMemo(() => {
return data
.filter(d => d.countryCode !== "ID" && COUNTRY_COORDS[d.countryCode])
@@ -160,59 +164,87 @@ export const GlobeMap = ({ data }: GlobeMapProps) => {
startLng: ORIGIN_LNG,
endLat: lat,
endLng: lng,
color: ['#0ea5e9', '#38bdf8'],
color: isLight ? ['#38bdf8', '#0284c7'] : ['#0ea5e9', '#38bdf8'],
name: d.label,
value: d.value
value: d.value,
upload: d.upload || 0,
download: d.download || 0
};
});
}, [data]);
}, [data, isLight]);
const pointsData = useMemo(() => {
const points = arcsData.map(arc => ({
lat: arc.endLat,
lng: arc.endLng,
size: 0.1,
color: '#38bdf8',
color: isLight ? '#0284c7' : '#38bdf8',
name: arc.name,
value: arc.value
value: arc.value,
upload: arc.upload,
download: arc.download,
isOrigin: false
}));
// Add origin point
points.push({
lat: ORIGIN_LAT,
lng: ORIGIN_LNG,
size: 0.2,
color: '#f43f5e',
name: 'Indonesia (Origin)',
value: 0
value: 0,
upload: 0,
download: 0,
isOrigin: true
});
return points;
}, [arcsData, isLight]);
// Extract All Labels + Origin to display statically
const labelsData = useMemo(() => {
const staticLabels = arcsData.map(arc => ({
lat: arc.endLat,
lng: arc.endLng,
name: arc.name,
color: isLight ? '#0f172a' : '#f8fafc'
}));
// Add origin
staticLabels.push({
lat: ORIGIN_LAT,
lng: ORIGIN_LNG,
name: 'Indonesia',
color: isLight ? '#e11d48' : '#fda4af'
});
return staticLabels;
}, [arcsData, isLight]);
return (
<div
ref={containerRef}
className="relative w-full h-[500px] rounded-xl overflow-visible bg-transparent cursor-move flex items-center justify-center transition-all duration-500"
onMouseEnter={() => setUserInteracting(true)}
onMouseLeave={() => setUserInteracting(false)}
>
<Globe
ref={globeRef}
width={dimensions.width}
height={dimensions.height}
globeMaterial={customGlobeMaterial}
backgroundColor="rgba(0,0,0,0)"
showGraticules={true}
globeImageUrl={isLight ? lightGlobeTexture : darkGlobeTexture}
showAtmosphere={true}
atmosphereColor={isLight ? "#0ea5e9" : "#1e40af"}
atmosphereColor={isLight ? "#38bdf8" : "#1e40af"}
atmosphereAltitude={isLight ? 0.15 : 0.25}
// Polygons Configuration for Unified Vector Designs
// Polygons Configuration
polygonsData={countries ? countries.features : []}
polygonAltitude={0.015}
polygonCapColor={() => isLight ? '#4ade80' : '#0f172a'} // Fresh green for light, dark slate for dark
polygonSideColor={() => isLight ? '#22c55e' : '#020617'} // Depth colors
polygonStrokeColor={() => isLight ? '#bbf7d0' : '#0284c7'} // Crisp bright borders for light, neon blue for dark
polygonCapColor={() => isLight ? '#4ade80' : '#0f172a'}
polygonSideColor={() => isLight ? '#22c55e' : '#020617'}
polygonStrokeColor={() => isLight ? '#ffffff' : '#0ea5e9'}
// Arcs configuration
arcsData={arcsData}
@@ -225,7 +257,21 @@ export const GlobeMap = ({ data }: GlobeMapProps) => {
arcDashGap={0.2}
arcDashAnimateTime={2000}
arcAltitude={0.3}
arcStroke={0.7}
arcStroke={isLight ? 0.8 : 0.6}
arcLabel={(d: any) => `
<div style="background: rgba(0,0,0,0.85); color: white; padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; min-width: 180px; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
<div style="font-weight: 600; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 6px; margin-bottom: 6px;">Flow to ${d.name}</div>
<div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
<span style="color: #9ca3af;">Total Traffic:</span> <span>${fmtBytes(d.value)}</span>
</div>
<div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
<span style="color: #38bdf8;">Download:</span> <span>${fmtBytes(d.download)}</span>
</div>
<div style="display: flex; justify-content: space-between;">
<span style="color: #4ade80;">Upload:</span> <span>${fmtBytes(d.upload)}</span>
</div>
</div>
`}
// Points configuration
pointsData={pointsData}
@@ -235,37 +281,42 @@ export const GlobeMap = ({ data }: GlobeMapProps) => {
pointAltitude={0.01}
pointRadius="size"
pointsMerge={true}
pointLabel={(d: any) => `
<div style="background: rgba(0,0,0,0.85); color: white; padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; min-width: ${d.value > 0 ? '180px' : 'auto'}; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
<div style="font-weight: 600; font-size: 14px; ${d.value > 0 ? 'border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 6px; margin-bottom: 6px;' : ''}">${d.name}</div>
${d.value > 0 ? `
<div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
<span style="color: #9ca3af;">Total Traffic:</span> <span>${fmtBytes(d.value)}</span>
</div>
<div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
<span style="color: #38bdf8;">Download:</span> <span>${fmtBytes(d.download)}</span>
</div>
<div style="display: flex; justify-content: space-between;">
<span style="color: #4ade80;">Upload:</span> <span>${fmtBytes(d.upload)}</span>
</div>
` : ''}
</div>
`}
// Rings configuration (Ping effect for points)
ringsData={pointsData}
ringLat="lat"
ringLng="lng"
ringColor="color"
ringMaxRadius={(d: any) => d.name === 'Indonesia (Origin)' ? 3 : 1.5}
ringMaxRadius={(d: any) => d.isOrigin ? 3 : 1.5}
ringPropagationSpeed={3}
ringRepeatPeriod={1000}
// HTML Labels configuration for better readability with text-shadow
htmlElementsData={pointsData}
htmlLat="lat"
htmlLng="lng"
htmlAltitude={0.03}
htmlElement={(d: any) => {
const el = document.createElement('div');
el.innerHTML = d.name;
el.style.color = isLight ? '#0f172a' : '#f8fafc';
el.style.fontSize = '12px';
el.style.fontWeight = '700';
el.style.fontFamily = 'Inter, sans-serif';
// Creates a thick outline effect so text doesn't blend into arcs/continents
el.style.textShadow = isLight
? '0 0 4px #ffffff, 0 0 6px #ffffff, 0 0 8px #ffffff'
: '0 0 4px #000000, 0 0 6px #000000, 0 0 8px #000000';
el.style.pointerEvents = 'none';
el.style.whiteSpace = 'nowrap';
el.style.transform = 'translate(-50%, -100%)'; // shift slightly up
return el;
}}
// Labels Configuration (All Destinations + Origin)
labelsData={labelsData}
labelLat="lat"
labelLng="lng"
labelText="name"
labelSize={1.4}
labelDotRadius={0.2}
labelColor="color"
labelResolution={5}
labelAltitude={0.03}
/>
</div>
);
src/components/ui/LineMap.tsx
-146
View File
@@ -1,146 +0,0 @@
"use client";
import React, { memo, useState, useEffect } from "react";
import {
ComposableMap,
Geographies,
Geography,
Sphere,
Graticule,
ZoomableGroup,
Line,
Marker
} from "react-simple-maps";
import { fmtBytes } from "@/lib/utils";
const geoUrl = "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json";
const COUNTRY_COORDS: Record<string, [number, number]> = {
"ID": [113.9213, -0.7893],
"US": [-95.7129, 37.0902],
"HK": [114.1095, 22.3964],
"SG": [103.8198, 1.3521],
"JP": [138.2529, 36.2048],
"SC": [55.4920, -4.6796],
"GB": [-3.4360, 55.3781],
"IT": [12.5674, 41.8719],
"CN": [104.1954, 35.8617],
"KR": [127.7669, 35.9078],
"CA": [-106.3468, 56.1304],
"LU": [6.1296, 49.8153],
"NL": [5.2913, 52.1326],
"TR": [35.2433, 38.9637],
"UA": [31.1656, 48.3794]
};
interface LineMapProps {
data: {
countryCode: string;
value: number;
label: string;
}[];
}
const LineMapComponent = ({ data }: LineMapProps) => {
const [tooltipContent, setTooltipContent] = useState("");
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
if (!mounted) return null;
// Origin point: Indonesia (Jakarta)
const origin: [number, number] = [106.8456, -6.2088];
return (
<div className="relative w-full aspect-[2/1] bg-secondary/20 rounded-xl overflow-hidden border border-border/50 backdrop-blur-sm">
<div className="absolute top-4 left-4 z-10 flex flex-col gap-1 pointer-events-none bg-card/80 p-3 rounded-lg border border-border/50 backdrop-blur-md">
<div className="text-sm font-medium text-white flex items-center gap-2">
Global Connections
</div>
</div>
{/* Tooltip Overlay */}
{tooltipContent && (
<div className="absolute bottom-4 left-4 z-10 bg-card/90 backdrop-blur-md border border-border/50 px-4 py-2.5 rounded-lg shadow-lg pointer-events-none animate-fade-in">
<div className="text-sm font-semibold text-white">{tooltipContent.split(':')[0]}</div>
<div className="text-xs text-sky-400 mt-1 font-medium">{tooltipContent.split(':')[1]}</div>
</div>
)}
<ComposableMap
projection="geoMercator"
projectionConfig={{
scale: 130,
center: [0, 30]
}}
width={800}
height={400}
className="w-full h-full"
>
<ZoomableGroup zoom={1} maxZoom={4} translateExtent={[[-100, -100], [900, 500]]}>
<Sphere stroke="rgba(255,255,255,0.05)" strokeWidth={0.5} id="sphere" fill="transparent" />
<Graticule stroke="rgba(255,255,255,0.05)" strokeWidth={0.5} />
<Geographies geography={geoUrl}>
{({ geographies }) =>
geographies.map((geo) => (
<Geography
key={geo.rsmKey}
geography={geo}
fill="#1e293b"
stroke="rgba(255,255,255,0.1)"
strokeWidth={0.5}
style={{
default: { outline: "none" },
hover: { outline: "none", fill: "#1e293b" },
pressed: { outline: "none" }
}}
/>
))
}
</Geographies>
{data.map((d, i) => {
if (d.countryCode === "ID") return null;
const dest = COUNTRY_COORDS[d.countryCode];
if (!dest) return null;
return (
<g key={i}>
<Line
from={origin}
to={dest}
stroke="#38bdf8"
strokeWidth={1.5}
strokeLinecap="round"
style={{ opacity: 0.6 }}
/>
<Marker coordinates={dest}>
<circle
r={3}
fill="#38bdf8"
onMouseEnter={() => setTooltipContent(`${d.label}: ${fmtBytes(d.value)}`)}
onMouseLeave={() => setTooltipContent("")}
className="cursor-pointer hover:fill-blue-500 transition-colors"
/>
</Marker>
</g>
);
})}
{/* Origin Marker */}
<Marker coordinates={origin}>
<circle r={4} fill="#f43f5e" />
<circle r={8} fill="#f43f5e" opacity={0.3} className="animate-ping" />
</Marker>
</ZoomableGroup>
</ComposableMap>
</div>
);
};
export const LineMap = memo(LineMapComponent);
src/components/ui/Modal.tsx
+26 -7
View File
@@ -15,39 +15,58 @@ interface ModalProps {
export function Modal({ isOpen, onClose, title, children, className }: ModalProps) {
const [isMounted, setIsMounted] = useState(false);
const [isClosing, setIsClosing] = useState(false);
const [visible, setVisible] = useState(false);
useEffect(() => {
setIsMounted(true);
}, []);
useEffect(() => {
if (isOpen) {
setVisible(true);
setIsClosing(false);
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "unset";
if (visible) {
setIsClosing(true);
const timer = setTimeout(() => {
setVisible(false);
setIsClosing(false);
document.body.style.overflow = "unset";
}, 480);
return () => clearTimeout(timer);
}
}
}, [isOpen, visible]);
useEffect(() => {
return () => {
document.body.style.overflow = "unset";
};
}, [isOpen]);
}, []);
if (!isMounted || !isOpen) return null;
if (!isMounted || !visible) return null;
return createPortal(
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-0">
{/* Backdrop */}
<div
className="fixed inset-0 bg-black/60 backdrop-blur-sm transition-opacity"
className={`fixed inset-0 bg-black/40 dark:bg-black/75 backdrop-blur-sm ${isClosing ? 'animate-overlay-out' : 'animate-overlay-in'}`}
onClick={onClose}
/>
{/* Dialog */}
<div className={cn(
"relative z-50 w-full max-w-md transform overflow-hidden rounded-xl border border-border bg-card shadow-2xl transition-all sm:my-8",
"relative z-50 w-full max-w-md transform overflow-hidden rounded-xl border border-border bg-card shadow-2xl sm:my-8",
isClosing ? 'animate-modal-out' : 'animate-modal-in',
className
)}>
<div className="flex items-center justify-between border-b border-border px-6 py-4">
<h3 className="text-lg font-semibold text-white tracking-tight">{title}</h3>
<h3 className="text-lg font-semibold text-foreground tracking-tight">{title}</h3>
<button
onClick={onClose}
className="rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-primary/50"
className="rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground transition-colors focus:outline-none focus:ring-2 focus:ring-primary/50"
>
<span className="sr-only">Close</span>
<X className="h-5 w-5" />