@xk2800/nextjs-template 0.5.3

package/components/auth/twoFactorVerifyForm.tsx

@@ -0,0 +1,100 @@
+'use client'
+
+import React, { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { Button } from '../ui/button'
+import { Input } from '../ui/input'
+import { Label } from '../ui/label'
+import { Checkbox } from '../ui/checkbox'
+import { authClient } from '../../lib/auth-client'
+import { toast } from 'sonner'
+
+type Props = {
+  callbackUrl: string
+}
+
+// Second-factor challenge, shown after a correct password when the account
+// has TOTP enabled. `signIn.email` returns `twoFactorRedirect: true` instead
+// of a session and sets a short-lived cookie; verifying here finalizes it.
+const TwoFactorVerifyForm = ({ callbackUrl }: Props) => {
+  const router = useRouter()
+  const [mode, setMode] = useState<'totp' | 'backup'>('totp')
+  const [code, setCode] = useState('')
+  const [trustDevice, setTrustDevice] = useState(false)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    const trimmed = code.trim()
+    if (!trimmed) return
+
+    setIsSubmitting(true)
+    try {
+      const { error } =
+        mode === 'totp'
+          ? await authClient.twoFactor.verifyTotp({ code: trimmed, trustDevice })
+          : await authClient.twoFactor.verifyBackupCode({ code: trimmed, trustDevice })
+
+      if (error) {
+        toast.error(error.message || 'Invalid code')
+        return
+      }
+      router.push(callbackUrl)
+      router.refresh()
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'Failed to verify code')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <div>
+      <h1 className="text-3xl font-bold tracking-tight">Two-factor authentication</h1>
+      <p className="mt-2 text-sm text-muted-foreground">
+        {mode === 'totp'
+          ? 'Enter the 6-digit code from your authenticator app.'
+          : 'Enter one of your backup codes.'}
+      </p>
+
+      <form onSubmit={handleSubmit} className="mt-8 flex flex-col gap-4">
+        <div className="flex flex-col gap-2">
+          <Label htmlFor="code">{mode === 'totp' ? 'Authenticator code' : 'Backup code'}</Label>
+          <Input
+            id="code"
+            inputMode={mode === 'totp' ? 'numeric' : 'text'}
+            autoComplete="one-time-code"
+            autoFocus
+            value={code}
+            onChange={(e) => setCode(e.target.value)}
+          />
+        </div>
+
+        <label className="flex items-center gap-2 text-sm text-muted-foreground">
+          <Checkbox
+            checked={trustDevice}
+            onCheckedChange={(v) => setTrustDevice(v === true)}
+          />
+          Trust this device for 30 days
+        </label>
+
+        <Button type="submit" className="w-full" disabled={isSubmitting}>
+          {isSubmitting ? 'Verifying...' : 'Verify'}
+        </Button>
+      </form>
+
+      <button
+        type="button"
+        onClick={() => {
+          setMode((m) => (m === 'totp' ? 'backup' : 'totp'))
+          setCode('')
+        }}
+        className="mt-6 text-sm text-muted-foreground underline underline-offset-4 hover:text-foreground"
+      >
+        {mode === 'totp' ? 'Use a backup code instead' : 'Use your authenticator app instead'}
+      </button>
+    </div>
+  )
+}
+
+export default TwoFactorVerifyForm

package/components/dashboard/accountDetailsCard.tsx

@@ -0,0 +1,58 @@
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card"
+import { Badge } from "../ui/badge"
+import { Separator } from "../ui/separator"
+import { formatDate } from "../../lib/formatters"
+import VerifyEmailButton from "./verifyEmailButton"
+
+type User = {
+  id: string
+  name: string
+  email: string
+  emailVerified: boolean
+  role: string | null | undefined
+  createdAt: Date
+  updatedAt: Date
+}
+
+export default function AccountDetailsCard({ user }: { user: User }) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Account Details</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div>
+          <p className="text-sm font-medium text-gray-600">Role</p>
+          <p className="text-base capitalize">{user.role || 'user'}</p>
+        </div>
+
+        <Separator />
+
+        <div>
+          <p className="text-sm font-medium text-gray-600">Email Status</p>
+          <div className="flex items-center gap-2 mt-1 flex-wrap">
+            <p className="text-base">{user.email}</p>
+            <Badge variant={user.emailVerified ? 'default' : 'destructive'}>
+              {user.emailVerified ? 'Verified' : 'Unverified'}
+            </Badge>
+            {!user.emailVerified && <VerifyEmailButton email={user.email} />}
+          </div>
+        </div>
+
+        <Separator />
+
+        <div>
+          <p className="text-sm font-medium text-gray-600">Member Since</p>
+          <p className="text-base">{formatDate(user.createdAt)}</p>
+        </div>
+
+        <Separator />
+
+        <div>
+          <p className="text-sm font-medium text-gray-600">Last Updated</p>
+          <p className="text-base">{formatDate(user.updatedAt)}</p>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/components/dashboard/activityLogsCard.tsx

@@ -0,0 +1,141 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../ui/card'
+import { Badge } from '../ui/badge'
+import { Skeleton } from '../ui/skeleton'
+import { DataTable, type Column } from '../ui/data-table'
+import { formatDateTime, actionBadgeVariant } from '../../lib/formatters'
+
+interface ActivityLog {
+  id: string
+  action: string
+  description: string
+  ipAddress: string | null
+  userAgent: string | null
+  deviceLabel?: string
+  location?: string
+  createdAt: Date | string
+  userId: string
+  userName?: string | null
+  userEmail?: string | null
+}
+
+interface ActivityLogsCardProps {
+  isAdmin?: boolean
+  initialLogs?: ActivityLog[]
+}
+
+const baseColumns: Column<ActivityLog>[] = [
+  {
+    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) => <span className="text-sm max-w-xs truncate block">{log.description}</span>,
+  },
+  {
+    name: 'deviceLabel',
+    title: 'Device',
+    renderer: (log) => <span className="text-sm">{log.deviceLabel || 'N/A'}</span>,
+  },
+  {
+    name: 'location',
+    title: 'Location',
+    renderer: (log) => <span className="text-sm">{log.location || 'N/A'}</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>
+    ),
+  },
+]
+
+const userColumn: Column<ActivityLog> = {
+  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>
+  ),
+}
+
+export default function ActivityLogsCard({ isAdmin = false, initialLogs = [] }: ActivityLogsCardProps) {
+  const [logs, setLogs] = useState<ActivityLog[]>(initialLogs)
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    const fetchLogs = async () => {
+      try {
+        const params = new URLSearchParams({
+          limit: '20',
+          offset: '0',
+        })
+        const response = await fetch(`/api/activity-logs?${params}`)
+        if (!response.ok) throw new Error('Failed to fetch logs')
+        const data = await response.json()
+        setLogs(data.logs)
+      } catch (error) {
+        console.error('Failed to fetch activity logs:', error)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchLogs()
+    // Refresh logs every 30 seconds
+    const interval = setInterval(fetchLogs, 30000)
+    return () => clearInterval(interval)
+  }, [])
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Activity Logs</CardTitle>
+        <CardDescription>
+          {isAdmin ? 'Recent activity from all users' : 'Your recent activity'}
+        </CardDescription>
+      </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={
+              isAdmin
+                ? [baseColumns[0], userColumn, ...baseColumns.slice(1)]
+                : baseColumns
+            }
+            data={logs}
+            getRowId={(log) => log.id}
+          />
+        )}
+      </CardContent>
+    </Card>
+  )
+}

package/components/dashboard/activityLogsCardSkeleton.tsx

@@ -0,0 +1,20 @@
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../ui/card"
+import { Skeleton } from "../ui/skeleton"
+
+export default function ActivityLogsCardSkeleton() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Activity Logs</CardTitle>
+        <CardDescription>Loading...</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          {[...Array(5)].map((_, i) => (
+            <Skeleton key={i} className="h-16 w-full" />
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/components/dashboard/activityLogsSection.tsx

@@ -0,0 +1,16 @@
+import { getUserActivityLogs, getAllActivityLogs } from "@xk2800/nextjs-template/activity/queries"
+import ActivityLogsCard from "./activityLogsCard"
+
+export default async function ActivityLogsSection({
+  userId,
+  isAdmin,
+}: {
+  userId: string
+  isAdmin: boolean
+}) {
+  const logs = isAdmin
+    ? await getAllActivityLogs(20, 0)
+    : await getUserActivityLogs(userId, 20)
+
+  return <ActivityLogsCard initialLogs={logs} isAdmin={isAdmin} />
+}

package/components/dashboard/admin/activityLogsSection.tsx

@@ -0,0 +1,13 @@
+import { getActivityLogsFiltered } from "@xk2800/nextjs-template/activity/queries"
+import AdminActivityLogsTable from "./adminActivityLogsTable"
+
+export default async function ActivityLogsSection() {
+  const { logs, total, page, limit, pages } = await getActivityLogsFiltered({ page: 1, limit: 20 })
+
+  return (
+    <AdminActivityLogsTable
+      initialLogs={logs}
+      initialPagination={{ page, limit, total, pages }}
+    />
+  )
+}

package/components/dashboard/admin/adminActivityLogsSkeleton.tsx

@@ -0,0 +1,34 @@
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../../ui/card"
+import { Skeleton } from "../../ui/skeleton"
+
+export default function AdminActivityLogsSkeleton() {
+  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">
+            {[...Array(5)].map((_, i) => (
+              <Skeleton key={i} className="h-9 w-full" />
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Events</CardTitle>
+          <CardDescription>Loading...</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {[...Array(5)].map((_, i) => (
+            <Skeleton key={i} className="h-16 w-full" />
+          ))}
+        </CardContent>
+      </Card>
+    </>
+  )
+}