Auth Session Manager

1"use client";
2 
3import {
4  AlertTriangle,
5  Globe,
6  Loader2,
7  LogOut,
8  Monitor,
9  Smartphone,
10  Tablet,
11} from "lucide-react";
12import { useCallback, useState } from "react";
13import { cn } from "@/lib/utils";
14import {
15  AlertDialog,
16  AlertDialogAction,
17  AlertDialogCancel,
18  AlertDialogContent,
19  AlertDialogDescription,
20  AlertDialogFooter,
21  AlertDialogHeader,
22  AlertDialogTitle,
23  AlertDialogTrigger,
24} from "@/registry/new-york/ui/alert-dialog";
25import { Badge } from "@/registry/new-york/ui/badge";
26import { Button } from "@/registry/new-york/ui/button";
27import {
28  Card,
29  CardContent,
30  CardDescription,
31  CardHeader,
32  CardTitle,
33} from "@/registry/new-york/ui/card";
34import { Separator } from "@/registry/new-york/ui/separator";
35 
36export type DeviceType = "desktop" | "mobile" | "tablet" | "unknown";
37 
38export interface Session {
39  id: string;
40  deviceName: string;
41  deviceType: DeviceType;
42  browser?: string;
43  os?: string;
44  ipAddress?: string;
45  location?: string;
46  lastActive: Date;
47  isCurrent: boolean;
48}
49 
50export interface AuthSessionManagerProps {
51  sessions?: Session[];
52  onRevoke?: (sessionId: string) => void;
53  onRevokeAll?: () => void;
54  className?: string;
55  isLoading?: boolean;
56  errors?: {
57    general?: string;
58  };
59}
60 
61const DEVICE_ICONS: Record<
62  DeviceType,
63  React.ComponentType<{ className?: string }>
64> = {
65  desktop: Monitor,
66  mobile: Smartphone,
67  tablet: Tablet,
68  unknown: Globe,
69};
70 
71function formatDate(date: Date): string {
72  const year = date.getFullYear();
73  const month = date.toLocaleString("en-US", { month: "short" });
74  const day = date.getDate();
75  return `${month} ${day}, ${year}`;
76}
77 
78function formatLastActive(date: Date): string {
79  const now = new Date();
80  const diff = now.getTime() - date.getTime();
81  const minutes = Math.floor(diff / 60_000);
82  const hours = Math.floor(diff / 3_600_000);
83  const days = Math.floor(diff / 86_400_000);
84 
85  if (minutes < 1) return "Just now";
86  if (minutes < 60) return `${minutes}m ago`;
87  if (hours < 24) return `${hours}h ago`;
88  if (days === 1) return "Yesterday";
89  if (days < 7) return `${days}d ago`;
90  return formatDate(date);
91}
92 
93interface ErrorAlertProps {
94  message: string;
95}
96 
97function ErrorAlert({ message }: ErrorAlertProps) {
98  return (
99    <div
100      aria-live="polite"
101      className="flex items-start gap-2 rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-destructive text-sm"
102      role="alert"
103    >
104// … truncated