260218:1712 20260218 TASK-BEFE-001n

2026-02-18 17:12:11 +07:00
parent 01ce68acda
commit b84284f8a9
54 changed files with 1307 additions and 339 deletions
--- a/frontend/app/(admin)/admin/monitoring/sessions/page.tsx
+++ b/frontend/app/(admin)/admin/monitoring/sessions/page.tsx
@@ -0,0 +1,119 @@
+'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>
+  );
+}