120 lines
4.1 KiB
TypeScript
120 lines
4.1 KiB
TypeScript
'use client';
|
|
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { sessionService } from '@/lib/services/session.service';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
|
import { toast } from 'sonner';
|
|
import { Loader2, Trash2, Monitor, Smartphone } from 'lucide-react';
|
|
import { format } from 'date-fns';
|
|
|
|
export default function SessionManagementPage() {
|
|
const queryClient = useQueryClient();
|
|
|
|
const {
|
|
data: sessions,
|
|
isLoading,
|
|
error,
|
|
} = useQuery({
|
|
queryKey: ['sessions'],
|
|
queryFn: sessionService.getActiveSessions,
|
|
});
|
|
|
|
const revokeMutation = useMutation({
|
|
mutationFn: sessionService.revokeSession,
|
|
onSuccess: () => {
|
|
toast.success('Session revoked successfully');
|
|
queryClient.invalidateQueries({ queryKey: ['sessions'] });
|
|
},
|
|
onError: (error) => {
|
|
toast.error('Failed to revoke session');
|
|
console.error(error);
|
|
},
|
|
});
|
|
|
|
const handleRevoke = (id: number) => {
|
|
if (confirm('Are you sure you want to revoke this session?')) {
|
|
revokeMutation.mutate(id);
|
|
}
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex h-[400px] w-full items-center justify-center">
|
|
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return <div className="p-8 text-center text-red-500">Failed to load sessions. Please try again.</div>;
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6 p-6">
|
|
<div className="flex flex-col gap-2">
|
|
<h1 className="text-2xl font-bold tracking-tight">Active Sessions</h1>
|
|
<p className="text-sm text-muted-foreground">Monitor and manage active user sessions across all devices.</p>
|
|
</div>
|
|
|
|
<div className="rounded-md border bg-card">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>User</TableHead>
|
|
<TableHead>Device Info</TableHead>
|
|
<TableHead>Last Active</TableHead>
|
|
<TableHead className="text-right">Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{sessions?.map((session: any) => (
|
|
<TableRow key={session.id}>
|
|
<TableCell>
|
|
<div className="flex flex-col">
|
|
<span className="font-medium">{session.user.username}</span>
|
|
<span className="text-xs text-muted-foreground">
|
|
{session.user.firstName} {session.user.lastName}
|
|
</span>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex flex-col gap-1">
|
|
<div className="flex items-center gap-2 text-sm">
|
|
<Monitor className="h-3 w-3" />
|
|
{session.deviceName || 'Unknown Device'}
|
|
</div>
|
|
<span className="text-xs text-muted-foreground">{session.ipAddress || 'Unknown IP'}</span>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-sm">
|
|
{session.lastActive ? format(new Date(session.lastActive), 'PP pp') : '-'}
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<Button
|
|
variant="destructive"
|
|
size="sm"
|
|
className="h-8"
|
|
onClick={() => handleRevoke(Number(session.id))}
|
|
disabled={revokeMutation.isPending}
|
|
>
|
|
<Trash2 className="mr-2 h-3.5 w-3.5" />
|
|
Revoke
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
{(!sessions || sessions.length === 0) && (
|
|
<TableRow>
|
|
<TableCell colSpan={4} className="h-24 text-center text-muted-foreground">
|
|
No active sessions found.
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|