+ {/* Header */}
+
+
+
+
+
Security Center
+
+ Monitor login activity and suspicious behaviour
+
+
+
+
+
+
+ {/* Stats cards */}
+ {stats && (
+
+ }
+ label="Total Logins"
+ value={stats.total_logins}
+ />
+ }
+ label="Unique IPs"
+ value={stats.unique_ips}
+ />
+ }
+ label="Unique Devices"
+ value={stats.unique_devices}
+ />
+ }
+ label="Suspicious Events"
+ value={stats.suspicious_count}
+ highlight={stats.suspicious_count > 0}
+ />
+
+ )}
+
+ {stats?.last_anomaly && (
+
+
+
+ Last suspicious login detected at{' '}
+ {formatDate(stats.last_anomaly)}. Review your login
+ history below.
+
+
+ )}
+
+ {/* Login history */}
+
+
+
+ Recent Login Activity
+
+ {history.length === 0 ? (
+
No login events recorded yet.
+ ) : (
+
+
+
+
+ | Date & Time |
+ IP Address |
+ Status |
+ Risk |
+ Details |
+
+
+
+ {history.map((evt) => {
+ const { label, color } = riskLabel(evt.anomaly_score);
+ return (
+ 0
+ ? 'bg-orange-50/40 hover:bg-orange-50/60'
+ : 'hover:bg-muted/30'
+ }
+ >
+ |
+ {formatDate(evt.created_at)}
+ |
+
+ {evt.ip_address || '—'}
+ |
+
+ {evt.success ? (
+
+
+ Success
+
+ ) : (
+
+
+ Failed
+
+ )}
+ |
+ {label} |
+
+ {evt.anomaly_reasons || '—'}
+ |
+
+ );
+ })}
+
+
+
+ )}
+
+
+ );
+}
+
+function StatCard({
+ icon,
+ label,
+ value,
+ highlight = false,
+}: {
+ icon: React.ReactNode;
+ label: string;
+ value: number;
+ highlight?: boolean;
+}) {
+ return (
+