Feat(Chore): Implemented Audit-Logs, Department, Principal.
This commit is contained in:
+120
-139
@@ -1,104 +1,53 @@
|
||||
import { useState } from "react";
|
||||
import { LogIn, LogOut, Key, Fingerprint, Smartphone, AlertTriangle, CheckCircle, MapPin } from "lucide-react";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { useState, useEffect } from "react";
|
||||
import { LogIn, LogOut, Key, Fingerprint, Smartphone, AlertTriangle, Loader2, RefreshCw } from "lucide-react";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { api, AuditLogEntry } from "@/lib/api";
|
||||
|
||||
const activityEvents = [
|
||||
{
|
||||
id: "1",
|
||||
type: "login_success",
|
||||
method: "password",
|
||||
timestamp: "2024-01-15T10:30:00Z",
|
||||
location: "San Francisco, CA",
|
||||
device: "Chrome on macOS",
|
||||
ip: "192.168.1.1",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
type: "login_success",
|
||||
method: "passkey",
|
||||
timestamp: "2024-01-14T15:45:00Z",
|
||||
location: "San Francisco, CA",
|
||||
device: "Safari on iOS",
|
||||
ip: "192.168.1.2",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
type: "login_failed",
|
||||
method: "password",
|
||||
timestamp: "2024-01-14T12:00:00Z",
|
||||
location: "Unknown",
|
||||
device: "Firefox on Windows",
|
||||
ip: "10.0.0.5",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
type: "mfa_enabled",
|
||||
method: "totp",
|
||||
timestamp: "2024-01-13T09:00:00Z",
|
||||
location: "San Francisco, CA",
|
||||
device: "Chrome on macOS",
|
||||
ip: "192.168.1.1",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
type: "passkey_added",
|
||||
method: "passkey",
|
||||
timestamp: "2024-01-12T14:30:00Z",
|
||||
location: "San Francisco, CA",
|
||||
device: "Safari on macOS",
|
||||
ip: "192.168.1.1",
|
||||
},
|
||||
];
|
||||
|
||||
const getEventIcon = (type: string, method: string) => {
|
||||
switch (type) {
|
||||
case "login_success":
|
||||
return method === "passkey" ? (
|
||||
<Fingerprint className="w-4 h-4" />
|
||||
) : (
|
||||
<LogIn className="w-4 h-4" />
|
||||
);
|
||||
case "login_failed":
|
||||
return <AlertTriangle className="w-4 h-4" />;
|
||||
case "mfa_enabled":
|
||||
return <Smartphone className="w-4 h-4" />;
|
||||
case "passkey_added":
|
||||
return <Fingerprint className="w-4 h-4" />;
|
||||
case "logout":
|
||||
return <LogOut className="w-4 h-4" />;
|
||||
default:
|
||||
return <Key className="w-4 h-4" />;
|
||||
// Map audit log action strings to display info
|
||||
const getEventDisplay = (action: string) => {
|
||||
const a = action.toLowerCase();
|
||||
if (a.includes("login") && a.includes("fail")) {
|
||||
return { icon: <AlertTriangle className="w-4 h-4" />, title: "Failed login attempt", failed: true };
|
||||
}
|
||||
};
|
||||
|
||||
const getEventTitle = (type: string, method: string) => {
|
||||
switch (type) {
|
||||
case "login_success":
|
||||
return `Signed in with ${method}`;
|
||||
case "login_failed":
|
||||
return "Failed login attempt";
|
||||
case "mfa_enabled":
|
||||
return "Two-factor authentication enabled";
|
||||
case "passkey_added":
|
||||
return "Passkey added";
|
||||
case "logout":
|
||||
return "Signed out";
|
||||
default:
|
||||
return "Security event";
|
||||
if (a.includes("login") || a.includes("authenticate")) {
|
||||
return { icon: <LogIn className="w-4 h-4" />, title: "Signed in", failed: false };
|
||||
}
|
||||
};
|
||||
|
||||
const getEventStatus = (type: string) => {
|
||||
if (type === "login_failed") {
|
||||
return { variant: "destructive" as const, label: "Failed" };
|
||||
if (a.includes("logout") || a.includes("sign_out")) {
|
||||
return { icon: <LogOut className="w-4 h-4" />, title: "Signed out", failed: false };
|
||||
}
|
||||
return { variant: "default" as const, label: "Success" };
|
||||
if (a.includes("passkey") || a.includes("webauthn")) {
|
||||
return { icon: <Fingerprint className="w-4 h-4" />, title: "Passkey event", failed: false };
|
||||
}
|
||||
if (a.includes("mfa") || a.includes("totp") || a.includes("2fa")) {
|
||||
return { icon: <Smartphone className="w-4 h-4" />, title: "MFA event", failed: false };
|
||||
}
|
||||
if (a.includes("ssh")) {
|
||||
return { icon: <Key className="w-4 h-4" />, title: "SSH key event", failed: false };
|
||||
}
|
||||
return { icon: <Key className="w-4 h-4" />, title: action.replace(/_/g, " "), failed: !action.includes("success") && a.includes("fail") };
|
||||
};
|
||||
|
||||
export default function ActivityPage() {
|
||||
const [filter, setFilter] = useState("all");
|
||||
const [events, setEvents] = useState<AuditLogEntry[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const loadEvents = () => {
|
||||
setIsLoading(true);
|
||||
setError("");
|
||||
api.users.auditLogs({ per_page: "50" })
|
||||
.then((data) => {
|
||||
setEvents(data.audit_logs ?? []);
|
||||
})
|
||||
.catch(() => setError("Failed to load activity. Please try again."))
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
useEffect(() => { loadEvents(); }, []);
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
@@ -110,6 +59,16 @@ export default function ActivityPage() {
|
||||
}).format(date);
|
||||
};
|
||||
|
||||
const filteredEvents = events.filter((e) => {
|
||||
if (filter === "all") return true;
|
||||
const a = e.action.toLowerCase();
|
||||
if (filter === "logins")
|
||||
return a.includes("session_create") || a.includes("session_revoke") || a.includes("external_auth") || a.includes("login") || a.includes("logout");
|
||||
if (filter === "security")
|
||||
return a.includes("mfa") || a.includes("passkey") || a.includes("ssh") || a.includes("totp") || a.includes("password") || a.includes("webauthn");
|
||||
return true;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
@@ -119,62 +78,84 @@ export default function ActivityPage() {
|
||||
Your recent account activity and security events
|
||||
</p>
|
||||
</div>
|
||||
<Select value={filter} onValueChange={setFilter}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder="Filter events" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All events</SelectItem>
|
||||
<SelectItem value="logins">Logins only</SelectItem>
|
||||
<SelectItem value="security">Security changes</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<div className="flex items-center gap-2">
|
||||
<Select value={filter} onValueChange={setFilter}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder="Filter events" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All events</SelectItem>
|
||||
<SelectItem value="logins">Logins only</SelectItem>
|
||||
<SelectItem value="security">Security changes</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button variant="outline" size="icon" onClick={loadEvents} disabled={isLoading}>
|
||||
<RefreshCw className={`w-4 h-4 ${isLoading ? "animate-spin" : ""}`} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<div className="divide-y">
|
||||
{activityEvents.map((event) => {
|
||||
const status = getEventStatus(event.type);
|
||||
return (
|
||||
<div key={event.id} className="p-4 flex items-start gap-4">
|
||||
<div
|
||||
className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${
|
||||
event.type === "login_failed"
|
||||
? "bg-destructive/10 text-destructive"
|
||||
: "bg-accent/10 text-accent"
|
||||
}`}
|
||||
>
|
||||
{getEventIcon(event.type, event.method)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<p className="font-medium text-foreground">
|
||||
{getEventTitle(event.type, event.method)}
|
||||
</p>
|
||||
{event.type === "login_failed" && (
|
||||
<Badge variant="destructive" className="text-xs">
|
||||
Failed
|
||||
</Badge>
|
||||
)}
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
<AlertTriangle className="w-8 h-8 mx-auto mb-2 text-destructive" />
|
||||
<p>{error}</p>
|
||||
</div>
|
||||
) : filteredEvents.length === 0 ? (
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
<p>No activity events found.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y">
|
||||
{filteredEvents.map((event) => {
|
||||
const display = getEventDisplay(event.action);
|
||||
return (
|
||||
<div key={event.id} className="p-4 flex items-start gap-4">
|
||||
<div
|
||||
className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${
|
||||
display.failed || !event.success
|
||||
? "bg-destructive/10 text-destructive"
|
||||
: "bg-accent/10 text-accent"
|
||||
}`}
|
||||
>
|
||||
{display.icon}
|
||||
</div>
|
||||
<div className="mt-1 text-sm text-muted-foreground space-y-0.5">
|
||||
<p>{event.device}</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin className="w-3 h-3" />
|
||||
<span>{event.location}</span>
|
||||
<span className="text-muted-foreground/50">•</span>
|
||||
<span className="font-mono text-xs">{event.ip}</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<p className="font-medium text-foreground capitalize">
|
||||
{display.title}
|
||||
</p>
|
||||
{(!event.success || display.failed) && (
|
||||
<Badge variant="destructive" className="text-xs">
|
||||
Failed
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-1 text-sm text-muted-foreground space-y-0.5">
|
||||
{event.description && <p>{event.description}</p>}
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{event.ip_address && (
|
||||
<span className="font-mono text-xs">{event.ip_address}</span>
|
||||
)}
|
||||
{event.user_agent && (
|
||||
<span className="truncate max-w-[200px]">{event.user_agent}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground whitespace-nowrap">
|
||||
{formatDate(event.created_at)}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground whitespace-nowrap">
|
||||
{formatDate(event.timestamp)}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user