@xk2800/nextjs-template 0.5.3

package/components/dashboard/admin/adminActivityLogsTable.tsx

@@ -0,0 +1,319 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../../ui/card'
+import { Button } from '../../ui/button'
+import { Input } from '../../ui/input'
+import { Label } from '../../ui/label'
+import { Badge } from '../../ui/badge'
+import { Skeleton } from '../../ui/skeleton'
+import { DataTable, DataTablePagination, type Column } from '../../ui/data-table'
+import { toast } from 'sonner'
+import { formatDateTime } from '@xk2800/nextjs-template/lib/formatters'
+import { Download } from 'lucide-react'
+
+interface ActivityLog {
+  id: string
+  action: string
+  description: string
+  ipAddress: string | null
+  userAgent: string | null
+  metadata: string | null
+  createdAt: Date | string
+  userId: string
+  userName: string | null
+  userEmail: string | null
+}
+
+interface PaginationData {
+  page: number
+  limit: number
+  total: number
+  pages: number
+}
+
+const actionOptions = [
+  { value: '', label: 'All actions' },
+  { value: 'login', label: 'Login' },
+  { value: 'logout', label: 'Logout' },
+  { value: 'login_failed', label: 'Login failed' },
+  { value: 'password_changed', label: 'Password changed' },
+  { value: 'email_changed', label: 'Email changed' },
+  { value: 'profile_updated', label: 'Profile updated' },
+  { value: 'session_revoked', label: 'Session revoked' },
+  { value: 'user_deleted', label: 'User deleted' },
+  { value: 'user_banned', label: 'User banned' },
+  { value: 'user_unbanned', label: 'User unbanned' },
+  { value: 'role_changed', label: 'Role changed' },
+  { value: 'impersonation_started', label: 'Impersonation started' },
+  { value: 'impersonation_stopped', label: 'Impersonation stopped' },
+  { value: 'settings_changed', label: 'Settings changed' },
+]
+
+const actionBadgeVariant: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
+  login: 'default',
+  logout: 'secondary',
+  login_failed: 'destructive',
+  password_changed: 'default',
+  email_changed: 'default',
+  profile_updated: 'secondary',
+  session_revoked: 'destructive',
+  user_deleted: 'destructive',
+  user_banned: 'destructive',
+  user_unbanned: 'default',
+  role_changed: 'default',
+  impersonation_started: 'destructive',
+  impersonation_stopped: 'secondary',
+  settings_changed: 'default',
+}
+
+interface AdminActivityLogsTableProps {
+  initialLogs: ActivityLog[]
+  initialPagination: PaginationData
+}
+
+const columns: Column<ActivityLog>[] = [
+  {
+    name: 'action',
+    title: 'Action',
+    sticky: true,
+    renderer: (log) => (
+      <Badge variant={actionBadgeVariant[log.action] || 'outline'}>
+        {log.action.replace(/_/g, ' ')}
+      </Badge>
+    ),
+  },
+  {
+    name: 'user',
+    title: 'User',
+    renderer: (log) => (
+      <div className="text-sm">
+        <div className="font-medium">{log.userName || 'N/A'}</div>
+        <div className="text-xs text-gray-500">{log.userEmail}</div>
+      </div>
+    ),
+  },
+  {
+    name: 'description',
+    title: 'Description',
+    renderer: (log) => (
+      <span className="text-sm max-w-xs truncate block">{log.description}</span>
+    ),
+  },
+  {
+    name: 'ipAddress',
+    title: 'IP Address',
+    renderer: (log) => <span className="text-sm font-mono">{log.ipAddress || 'N/A'}</span>,
+  },
+  {
+    name: 'createdAt',
+    title: 'Time',
+    renderer: (log) => (
+      <span className="text-sm text-gray-600 dark:text-gray-400">
+        {formatDateTime(log.createdAt)}
+      </span>
+    ),
+  },
+]
+
+export default function AdminActivityLogsTable({ initialLogs, initialPagination }: AdminActivityLogsTableProps) {
+  const [logs, setLogs] = useState<ActivityLog[]>(initialLogs)
+  const [loading, setLoading] = useState(false)
+  const [search, setSearch] = useState('')
+  const [action, setAction] = useState('')
+  const [dateFrom, setDateFrom] = useState('')
+  const [dateTo, setDateTo] = useState('')
+  const [page, setPage] = useState(1)
+  const [pagination, setPagination] = useState<PaginationData | null>(initialPagination)
+  const [isExporting, setIsExporting] = useState(false)
+
+  const requestId = useRef(0)
+
+  const fetchLogs = async (pageNum: number) => {
+    const currentRequest = ++requestId.current
+    setLoading(true)
+    try {
+      const params = new URLSearchParams({
+        page: pageNum.toString(),
+        limit: '20',
+        search,
+        action,
+        ...(dateFrom && { dateFrom }),
+        ...(dateTo && { dateTo }),
+      })
+      const response = await fetch(`/api/admin/activity-logs?${params}`)
+      if (!response.ok) throw new Error('Failed to fetch activity logs')
+      const data = await response.json()
+      if (currentRequest !== requestId.current) return
+      setLogs(data.logs)
+      setPagination(data.pagination)
+    } catch (error) {
+      if (currentRequest !== requestId.current) return
+      toast.error('Failed to load activity logs')
+      console.error(error)
+    } finally {
+      if (currentRequest === requestId.current) setLoading(false)
+    }
+  }
+
+  const isFirstRender = useRef(true)
+
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false
+      return
+    }
+    const timer = setTimeout(() => {
+      fetchLogs(1)
+      setPage(1)
+    }, 300)
+    return () => clearTimeout(timer)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [search, action, dateFrom, dateTo])
+
+  const resetFilters = () => {
+    setSearch('')
+    setAction('')
+    setDateFrom('')
+    setDateTo('')
+  }
+
+  const handleExport = async () => {
+    setIsExporting(true)
+    try {
+      const params = new URLSearchParams({
+        search,
+        action,
+        ...(dateFrom && { dateFrom }),
+        ...(dateTo && { dateTo }),
+      })
+      const response = await fetch(`/api/admin/activity-logs/export?${params}`)
+      if (!response.ok) throw new Error('Failed to export activity logs')
+      const blob = await response.blob()
+      const url = URL.createObjectURL(blob)
+      const link = document.createElement('a')
+      link.href = url
+      link.download = `activity-logs-${new Date().toISOString().slice(0, 10)}.csv`
+      document.body.appendChild(link)
+      link.click()
+      link.remove()
+      URL.revokeObjectURL(url)
+    } catch (error) {
+      toast.error('Failed to export activity logs')
+      console.error(error)
+    } finally {
+      setIsExporting(false)
+    }
+  }
+
+  return (
+    <>
+      <Card>
+        <CardHeader>
+          <CardTitle>Filters</CardTitle>
+          <CardDescription>Search and narrow down activity events</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 items-end">
+            <div className="space-y-2 lg:col-span-2">
+              <Label htmlFor="search">User</Label>
+              <Input
+                id="search"
+                placeholder="Search by name or email..."
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="action">Action</Label>
+              <select
+                id="action"
+                value={action}
+                onChange={(e) => setAction(e.target.value)}
+                className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] dark:bg-input/30"
+              >
+                {actionOptions.map((opt) => (
+                  <option key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="dateFrom">From</Label>
+              <Input
+                id="dateFrom"
+                type="date"
+                value={dateFrom}
+                onChange={(e) => setDateFrom(e.target.value)}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="dateTo">To</Label>
+              <Input
+                id="dateTo"
+                type="date"
+                value={dateTo}
+                onChange={(e) => setDateTo(e.target.value)}
+              />
+            </div>
+          </div>
+
+          {(search || action || dateFrom || dateTo) && (
+            <Button variant="ghost" size="sm" className="mt-4" onClick={resetFilters}>
+              Clear filters
+            </Button>
+          )}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="flex flex-row items-start justify-between gap-4">
+          <div>
+            <CardTitle>Events</CardTitle>
+            <CardDescription>
+              {pagination ? `Showing ${logs.length} of ${pagination.total} events` : 'Loading...'}
+            </CardDescription>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleExport}
+            disabled={isExporting || logs.length === 0}
+          >
+            <Download />
+            {isExporting ? 'Exporting...' : 'Export CSV'}
+          </Button>
+        </CardHeader>
+        <CardContent>
+          {loading ? (
+            <div className="space-y-4">
+              {[...Array(5)].map((_, i) => (
+                <Skeleton key={i} className="h-16 w-full" />
+              ))}
+            </div>
+          ) : logs.length === 0 ? (
+            <p className="text-center text-gray-500 py-8">No activity logs found</p>
+          ) : (
+            <DataTable columns={columns} data={logs} getRowId={(log) => log.id} pageSize={false} />
+          )}
+
+          {pagination && (
+            <DataTablePagination
+              page={page}
+              pages={pagination.pages}
+              onPageChange={(p) => {
+                setPage(p)
+                fetchLogs(p)
+              }}
+              className="mt-6 pt-6"
+            />
+          )}
+        </CardContent>
+      </Card>
+    </>
+  )
+}

package/components/dashboard/admin/adminStatsGrid.tsx

@@ -0,0 +1,30 @@
+import { Users, UserPlus, Activity, Ban } from "lucide-react"
+import { getAdminDashboardStats } from "@xk2800/nextjs-template/admin/queries"
+import { Card, CardContent } from "../../ui/card"
+
+const STAT_CONFIG = [
+  { key: "totalUsers", label: "Total users", icon: Users },
+  { key: "newSignupsThisWeek", label: "New signups this week", icon: UserPlus },
+  { key: "activeSessions", label: "Active sessions", icon: Activity },
+  { key: "bannedCount", label: "Banned users", icon: Ban },
+] as const
+
+export default async function AdminStatsGrid() {
+  const stats = await getAdminDashboardStats()
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+      {STAT_CONFIG.map(({ key, label, icon: Icon }) => (
+        <Card key={key}>
+          <CardContent>
+            <div className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground">
+              <Icon className="size-3.5" />
+              {label}
+            </div>
+            <p className="text-3xl font-bold mt-2 text-foreground">{stats[key]}</p>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  )
+}

package/components/dashboard/admin/adminStatsGridSkeleton.tsx

@@ -0,0 +1,16 @@
+import { Card, CardContent } from "../../ui/card"
+import { Skeleton } from "../../ui/skeleton"
+
+export default function AdminStatsGridSkeleton() {
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+      {[...Array(4)].map((_, i) => (
+        <Card key={i}>
+          <CardContent>
+            <Skeleton className="h-20" />
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  )
+}

package/components/dashboard/admin/adminUserActivityLogCard.tsx

@@ -0,0 +1,53 @@
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../../ui/card"
+import { parseUserAgent, lookupGeoLocation, formatDeviceInfo, formatLocation } from "../../../lib/request-info"
+import AdminUserActivityLogTable from "./adminUserActivityLogTable"
+
+interface ActivityLog {
+  id: string
+  action: string
+  description: string
+  ipAddress: string | null
+  userAgent: string | null
+  metadata: string | null
+  createdAt: Date
+}
+
+function getReferrerUrl(metadata: string | null): string | null {
+  if (!metadata) return null
+
+  try {
+    const parsed = JSON.parse(metadata)
+    return typeof parsed.referrerUrl === 'string' ? parsed.referrerUrl : null
+  } catch {
+    return null
+  }
+}
+
+export default function AdminUserActivityLogCard({ logs }: { logs: ActivityLog[] }) {
+  const rows = logs.map((log) => ({
+    id: log.id,
+    action: log.action,
+    description: log.description,
+    referrerUrl: getReferrerUrl(log.metadata),
+    device: formatDeviceInfo(parseUserAgent(log.userAgent)),
+    location: formatLocation(lookupGeoLocation(log.ipAddress)),
+    ipAddress: log.ipAddress,
+    createdAt: log.createdAt,
+  }))
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Activity Log</CardTitle>
+        <CardDescription>Recent activity for this user</CardDescription>
+      </CardHeader>
+      <CardContent>
+        {logs.length === 0 ? (
+          <p className="text-center text-gray-500 py-8">No activity logs found</p>
+        ) : (
+          <AdminUserActivityLogTable rows={rows} />
+        )}
+      </CardContent>
+    </Card>
+  )
+}

package/components/dashboard/admin/adminUserActivityLogTable.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import { Badge } from "../../ui/badge"
+import { DataTable, type Column } from "../../ui/data-table"
+import { formatDateTime, actionBadgeVariant } from "../../../lib/formatters"
+
+export type ActivityLogRow = {
+  id: string
+  action: string
+  description: string
+  referrerUrl: string | null
+  device: string
+  location: string
+  ipAddress: string | null
+  createdAt: Date
+}
+
+const columns: Column<ActivityLogRow>[] = [
+  {
+    name: 'action',
+    title: 'Action',
+    sticky: true,
+    renderer: (log) => (
+      <Badge variant={actionBadgeVariant[log.action] || 'outline'}>
+        {log.action.replace(/_/g, ' ')}
+      </Badge>
+    ),
+  },
+  {
+    name: 'description',
+    title: 'Description',
+    renderer: (log) => (
+      <div className="text-sm max-w-xs">
+        <div className="truncate">{log.description}</div>
+        {log.referrerUrl && (
+          <div className="text-xs text-gray-500 truncate">via {log.referrerUrl}</div>
+        )}
+      </div>
+    ),
+  },
+  {
+    name: 'device',
+    title: 'Device',
+    renderer: (log) => <span className="text-sm">{log.device}</span>,
+  },
+  {
+    name: 'location',
+    title: 'Location',
+    renderer: (log) => <span className="text-sm">{log.location}</span>,
+  },
+  {
+    name: 'ipAddress',
+    title: 'IP Address',
+    renderer: (log) => <span className="text-sm font-mono">{log.ipAddress || 'N/A'}</span>,
+  },
+  {
+    name: 'createdAt',
+    title: 'Time',
+    renderer: (log) => (
+      <span className="text-sm text-gray-600 dark:text-gray-400">
+        {formatDateTime(log.createdAt)}
+      </span>
+    ),
+  },
+]
+
+export default function AdminUserActivityLogTable({ rows }: { rows: ActivityLogRow[] }) {
+  return <DataTable columns={columns} data={rows} getRowId={(log) => log.id} />
+}

package/components/dashboard/admin/adminUserLoginInfoCard.tsx

@@ -0,0 +1,50 @@
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../../ui/card"
+import { formatDeviceInfo, formatLocation, type DeviceType } from "../../../lib/request-info"
+import AdminUserLoginInfoTable from "./adminUserLoginInfoTable"
+
+interface LoginEvent {
+  id: string
+  description: string
+  referrerUrl: string | null
+  os: string | null
+  browser: string | null
+  deviceType: string | null
+  country: string | null
+  city: string | null
+  ipAddress: string | null
+  createdAt: Date
+}
+
+export default function AdminUserLoginInfoCard({ logins }: { logins: LoginEvent[] }) {
+  const rows = logins.map((login) => ({
+    id: login.id,
+    isRegistration: login.description.toLowerCase().includes('registered'),
+    device: formatDeviceInfo({
+      os: login.os,
+      browser: login.browser,
+      deviceType: (login.deviceType as DeviceType) || 'desktop',
+    }),
+    location: formatLocation({ country: login.country, city: login.city }),
+    referrerUrl: login.referrerUrl,
+    ipAddress: login.ipAddress,
+    createdAt: login.createdAt,
+  }))
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Registration & Login Info</CardTitle>
+        <CardDescription>
+          Referrer, device, and location captured for each sign-in
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        {logins.length === 0 ? (
+          <p className="text-center text-gray-500 py-8">No login history found</p>
+        ) : (
+          <AdminUserLoginInfoTable rows={rows} />
+        )}
+      </CardContent>
+    </Card>
+  )
+}

package/components/dashboard/admin/adminUserLoginInfoTable.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import { Badge } from "../../ui/badge"
+import { DataTable, type Column } from "../../ui/data-table"
+import { formatDateTime } from "../../../lib/formatters"
+
+export type LoginInfoRow = {
+  id: string
+  isRegistration: boolean
+  device: string
+  location: string
+  referrerUrl: string | null
+  ipAddress: string | null
+  createdAt: Date
+}
+
+const columns: Column<LoginInfoRow>[] = [
+  {
+    name: 'event',
+    title: 'Event',
+    sticky: true,
+    renderer: (login) => (
+      <Badge variant={login.isRegistration ? 'default' : 'outline'}>
+        {login.isRegistration ? 'Registered' : 'Login'}
+      </Badge>
+    ),
+  },
+  {
+    name: 'device',
+    title: 'Device',
+    renderer: (login) => <span className="text-sm">{login.device}</span>,
+  },
+  {
+    name: 'location',
+    title: 'Location',
+    renderer: (login) => <span className="text-sm">{login.location}</span>,
+  },
+  {
+    name: 'referrerUrl',
+    title: 'Landing URL',
+    renderer: (login) => (
+      <span className="text-sm max-w-xs truncate block">{login.referrerUrl || 'N/A'}</span>
+    ),
+  },
+  {
+    name: 'ipAddress',
+    title: 'IP Address',
+    renderer: (login) => <span className="text-sm font-mono">{login.ipAddress || 'N/A'}</span>,
+  },
+  {
+    name: 'createdAt',
+    title: 'Time',
+    renderer: (login) => (
+      <span className="text-sm text-gray-600 dark:text-gray-400">
+        {formatDateTime(login.createdAt)}
+      </span>
+    ),
+  },
+]
+
+export default function AdminUserLoginInfoTable({ rows }: { rows: LoginInfoRow[] }) {
+  return <DataTable columns={columns} data={rows} getRowId={(login) => login.id} />
+}