@xk2800/nextjs-template 0.5.3

package/components/dashboard/admin/systemSettingsSkeleton.tsx

@@ -0,0 +1,29 @@
+import { Card, CardContent, CardHeader } from "../../ui/card"
+import { Skeleton } from "../../ui/skeleton"
+
+export default function SystemSettingsSkeleton() {
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-6 w-40" />
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {[...Array(4)].map((_, i) => (
+            <Skeleton key={i} className="h-10 w-full" />
+          ))}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-6 w-40" />
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <Skeleton className="h-10 w-full" />
+          <Skeleton className="h-20 w-full" />
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/components/dashboard/admin/usersSection.tsx

@@ -0,0 +1,13 @@
+import { getUsersFiltered } from "@xk2800/nextjs-template/users/queries"
+import AdminUsersTable from "./adminUsersTable"
+
+export default async function UsersSection() {
+  const { users, total, page, limit, pages } = await getUsersFiltered({ page: 1, limit: 10 })
+
+  return (
+    <AdminUsersTable
+      initialUsers={users}
+      initialPagination={{ page, limit, total, pages }}
+    />
+  )
+}

package/components/dashboard/adminSection.tsx

@@ -0,0 +1,31 @@
+import Link from "next/link"
+import { ShieldCheck, LayoutDashboard } from "lucide-react"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../ui/card"
+import { Button } from "../ui/button"
+
+export default function AdminSection() {
+  return (
+    <Card className="border-amber-200 bg-amber-50/60 dark:border-amber-900/40 dark:bg-amber-500/[0.04]">
+      <CardHeader>
+        <div className="flex items-center gap-2">
+          <CardTitle>Admin panel</CardTitle>
+          <span className="inline-flex items-center gap-1 rounded-full border border-amber-300 bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-900 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-400">
+            <ShieldCheck className="size-3" />
+            Admin only
+          </span>
+        </div>
+        <CardDescription>
+          System stats, user management, and audit logs
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Link href="/dashboard/admin">
+          <Button className="w-full">
+            <LayoutDashboard />
+            Open admin dashboard
+          </Button>
+        </Link>
+      </CardContent>
+    </Card>
+  )
+}

package/components/dashboard/appSidebar.tsx

@@ -0,0 +1,170 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import {
+  LayoutDashboard,
+  Settings,
+  ShieldCheck,
+  Users,
+  ScrollText,
+  SlidersHorizontal,
+  Table,
+  LogOut,
+} from "lucide-react"
+
+import { authClient } from "@/lib/auth-client"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+
+export interface AppSidebarUser {
+  name: string
+  email: string
+  image?: string | null
+}
+
+export interface AppSidebarProps {
+  user: AppSidebarUser
+  isAdmin: boolean
+  brandName?: React.ReactNode
+  brandHref?: string
+}
+
+const workspaceLinks = [
+  { href: "/dashboard", label: "Overview", icon: LayoutDashboard },
+  { href: "/dashboard/data-table", label: "DataTable", icon: Table },
+  { href: "/dashboard/settings", label: "Settings", icon: Settings },
+]
+
+const adminLinks = [
+  { href: "/dashboard/admin", label: "Admin home", icon: ShieldCheck },
+  { href: "/dashboard/admin/users", label: "Users", icon: Users },
+  { href: "/dashboard/admin/activity-logs", label: "Audit logs", icon: ScrollText },
+  { href: "/dashboard/admin/settings", label: "System settings", icon: SlidersHorizontal },
+]
+
+function initials(name: string) {
+  return name
+    .split(" ")
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase())
+    .join("")
+}
+
+export default function AppSidebar({
+  user,
+  isAdmin,
+  brandName = "Template",
+  brandHref = "/",
+}: AppSidebarProps) {
+  const pathname = usePathname()
+
+  const handleSignOut = async () => {
+    await authClient.signOut({
+      fetchOptions: {
+        onSuccess: () => {
+          window.location.href = "/"
+        },
+      },
+    })
+  }
+
+  return (
+    <Sidebar collapsible="icon">
+      <SidebarHeader>
+        <Link
+          href={brandHref}
+          className="flex items-center gap-2 px-2 py-1.5 group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:justify-center"
+        >
+          <div className="flex size-6 shrink-0 items-center justify-center rounded-md bg-sidebar-primary-foreground" />
+          <span className="text-base font-semibold group-data-[collapsible=icon]:hidden">
+            {brandName}
+          </span>
+        </Link>
+      </SidebarHeader>
+
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Workspace</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {workspaceLinks.map((link) => (
+                <SidebarMenuItem key={link.href}>
+                  <SidebarMenuButton
+                    asChild
+                    isActive={pathname === link.href}
+                    tooltip={link.label}
+                  >
+                    <Link href={link.href}>
+                      <link.icon />
+                      <span>{link.label}</span>
+                    </Link>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        {isAdmin && (
+          <SidebarGroup>
+            <SidebarGroupLabel>Administration</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {adminLinks.map((link) => (
+                  <SidebarMenuItem key={link.href}>
+                    <SidebarMenuButton
+                      asChild
+                      isActive={pathname === link.href}
+                      tooltip={link.label}
+                    >
+                      <Link href={link.href}>
+                        <link.icon />
+                        <span>{link.label}</span>
+                      </Link>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        )}
+      </SidebarContent>
+
+      <SidebarFooter>
+        <div className="flex items-center gap-2 px-2 py-1.5 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0">
+          <Avatar className="size-8 shrink-0">
+            <AvatarImage src={user.image ?? undefined} alt={user.name} />
+            <AvatarFallback>{initials(user.name)}</AvatarFallback>
+          </Avatar>
+          <div className="flex min-w-0 flex-1 flex-col group-data-[collapsible=icon]:hidden">
+            <span className="truncate text-sm font-medium">{user.name}</span>
+            <span className="truncate text-xs text-muted-foreground">{user.email}</span>
+          </div>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            onClick={handleSignOut}
+            aria-label="Log out"
+            className="group-data-[collapsible=icon]:hidden"
+          >
+            <LogOut />
+          </Button>
+        </div>
+      </SidebarFooter>
+    </Sidebar>
+  )
+}

package/components/dashboard/dashboardHeader.tsx

@@ -0,0 +1,85 @@
+import Link from "next/link"
+import LogoutButtons from "../auth/logoutButtons"
+
+export interface DashboardNavLink {
+  href: string
+  label: string
+  active?: boolean
+}
+
+export interface DashboardHeaderProps {
+  /**
+   * Omit on screens with no session (e.g. a public/marketing page) — the
+   * user name and LogoutButtons are only rendered when this is provided.
+   */
+  userName?: string
+  /**
+   * Plain text (default: "Template") or any node — e.g. an `<img>`/`<Image>`
+   * logo, an inline SVG, or a logo+text combo. Rendered inside a `<Link>`,
+   * so avoid nesting another interactive/anchor element inside it.
+   */
+  brandName?: React.ReactNode
+  brandHref?: string
+  navLinks?: DashboardNavLink[]
+  /**
+   * Rendered before the user name — e.g. pass `<ThemeToggle />` if your
+   * project uses next-themes. Omitted by default so DashboardHeader has no
+   * hard dependency on next-themes (it's an optional peer of the package).
+   */
+  actions?: React.ReactNode
+}
+
+const defaultNavLinks: DashboardNavLink[] = [
+  { href: "/dashboard", label: "Dashboard", active: true },
+  { href: "/dashboard/settings", label: "Settings" },
+  { href: "/", label: "Home" },
+]
+
+export default function DashboardHeader({
+  userName,
+  brandName = "Template",
+  brandHref = "/",
+  navLinks = defaultNavLinks,
+  actions,
+}: DashboardHeaderProps) {
+  return (
+    <header className="bg-white dark:bg-gray-900 border-b dark:border-gray-800">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-8">
+            <Link href={brandHref} className="text-xl font-bold">
+              {brandName}
+            </Link>
+            <nav className="hidden md:flex items-center gap-6">
+              {navLinks.map((link) => (
+                <Link
+                  key={link.href}
+                  href={link.href}
+                  className={
+                    link.active
+                      ? "text-sm font-medium text-gray-900 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-400 transition"
+                      : "text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition"
+                  }
+                >
+                  {link.label}
+                </Link>
+              ))}
+            </nav>
+          </div>
+
+          <div className="flex items-center gap-4">
+            {actions}
+            {userName && (
+              <>
+                <span className="text-sm text-gray-600 dark:text-gray-400">
+                  {userName}
+                </span>
+                <LogoutButtons />
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </header>
+  )
+}

package/components/dashboard/heartbeat.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import { useEffect } from 'react'
+
+const HEARTBEAT_INTERVAL_MS = 30_000
+
+// Renders nothing — just keeps `users.lastActiveAt` fresh while an
+// authenticated user has a dashboard tab open, so admins can see who's
+// currently online (see ONLINE_THRESHOLD_MS in adminUsersPage).
+export default function Heartbeat() {
+  useEffect(() => {
+    const ping = () => {
+      fetch('/api/heartbeat', { method: 'POST' }).catch(() => {})
+    }
+
+    ping()
+    const interval = setInterval(ping, HEARTBEAT_INTERVAL_MS)
+    return () => clearInterval(interval)
+  }, [])
+
+  return null
+}

package/components/dashboard/impersonationBanner.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { toast } from 'sonner'
+import { authClient, useSession } from '../../lib/auth-client'
+import { Button } from '../ui/button'
+
+// Shown app-wide (see app/dashboard/layout.tsx) while the current session is
+// an admin impersonating another user, so it's impossible to forget you're
+// not looking at your own account.
+export default function ImpersonationBanner() {
+  const { data: session } = useSession()
+  const router = useRouter()
+  const [isStopping, setIsStopping] = useState(false)
+
+  if (!session?.session.impersonatedBy) return null
+
+  const handleStop = async () => {
+    setIsStopping(true)
+    try {
+      const { error } = await authClient.admin.stopImpersonating()
+      if (error) throw new Error(error.message)
+      router.push('/dashboard/admin/users')
+      router.refresh()
+    } catch (error) {
+      toast.error('Failed to stop impersonating')
+      console.error(error)
+    } finally {
+      setIsStopping(false)
+    }
+  }
+
+  return (
+    <div className="sticky top-0 z-50 flex items-center justify-center gap-3 bg-amber-500 px-4 py-2 text-sm font-medium text-amber-950">
+      <span>
+        You&apos;re viewing as <strong>{session.user.name || session.user.email}</strong>
+      </span>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={handleStop}
+        disabled={isStopping}
+        className="h-7 border-amber-950/30 bg-transparent text-amber-950 hover:bg-amber-950/10"
+      >
+        {isStopping ? 'Stopping...' : 'Stop impersonating'}
+      </Button>
+    </div>
+  )
+}

package/components/dashboard/passkeysCard.tsx

@@ -0,0 +1,187 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import { toast } from 'sonner'
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../ui/card'
+import { Button } from '../ui/button'
+import { Input } from '../ui/input'
+import { Skeleton } from '../ui/skeleton'
+import { DataTable, type Column } from '../ui/data-table'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '../ui/alert-dialog'
+import { formatDateTime } from '../../lib/formatters'
+import { authClient } from '../../lib/auth-client'
+
+type Passkey = {
+  id: string
+  name?: string | null
+  deviceType?: string | null
+  createdAt?: Date | string | null
+}
+
+const columns: Column<Passkey>[] = [
+  { name: 'name', title: 'Name', sticky: true, renderer: (pk) => pk.name || 'Passkey' },
+  {
+    name: 'deviceType',
+    title: 'Type',
+    renderer: (pk) => (
+      <span className="text-sm text-muted-foreground">{pk.deviceType || '—'}</span>
+    ),
+  },
+  {
+    name: 'createdAt',
+    title: 'Added',
+    renderer: (pk) => (
+      <span className="text-sm">{pk.createdAt ? formatDateTime(pk.createdAt) : '—'}</span>
+    ),
+  },
+]
+
+export default function PasskeysCard() {
+  const [passkeys, setPasskeys] = useState<Passkey[] | null>(null)
+  const [name, setName] = useState('')
+  const [adding, setAdding] = useState(false)
+  const [toDelete, setToDelete] = useState<Passkey | null>(null)
+  const [deleting, setDeleting] = useState(false)
+
+  const load = useCallback(async () => {
+    const { data, error } = await authClient.passkey.listUserPasskeys()
+    if (error) {
+      toast.error(error.message || 'Could not load passkeys')
+      setPasskeys([])
+      return
+    }
+    setPasskeys((data ?? []) as Passkey[])
+  }, [])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  const addPasskey = async () => {
+    setAdding(true)
+    try {
+      const res = await authClient.passkey.addPasskey({ name: name.trim() || undefined })
+      if (res?.error) {
+        toast.error(res.error.message || 'Could not register passkey')
+        return
+      }
+      toast.success('Passkey registered')
+      setName('')
+      await load()
+    } catch (err) {
+      // User cancelled the browser prompt, or no authenticator available.
+      toast.error(err instanceof Error ? err.message : 'Passkey registration cancelled')
+    } finally {
+      setAdding(false)
+    }
+  }
+
+  const deletePasskey = async (id: string) => {
+    setDeleting(true)
+    try {
+      const { error } = await authClient.passkey.deletePasskey({ id })
+      if (error) {
+        toast.error(error.message || 'Could not remove passkey')
+        return
+      }
+      toast.success('Passkey removed')
+      setToDelete(null)
+      await load()
+    } finally {
+      setDeleting(false)
+    }
+  }
+
+  return (
+    <>
+      <Card>
+        <CardHeader>
+          <CardTitle>Passkeys</CardTitle>
+          <CardDescription>
+            Sign in without a password using Touch ID, Windows Hello, or a
+            hardware security key.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex flex-wrap items-end gap-2">
+            <div className="flex flex-col gap-1">
+              <label htmlFor="passkey-name" className="text-sm font-medium">
+                Name (optional)
+              </label>
+              <Input
+                id="passkey-name"
+                placeholder="e.g. MacBook Touch ID"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className="w-64 max-w-full"
+              />
+            </div>
+            <Button onClick={addPasskey} disabled={adding}>
+              {adding ? 'Waiting for device...' : 'Add a passkey'}
+            </Button>
+          </div>
+
+          {passkeys === null ? (
+            <Skeleton className="h-20 w-full" />
+          ) : passkeys.length === 0 ? (
+            <p className="py-6 text-center text-sm text-muted-foreground">
+              No passkeys registered yet.
+            </p>
+          ) : (
+            <DataTable
+              columns={[
+                ...columns,
+                {
+                  name: 'actions',
+                  title: 'Actions',
+                  renderer: (pk) => (
+                    <Button
+                      variant="destructive"
+                      size="sm"
+                      onClick={() => setToDelete(pk)}
+                    >
+                      Remove
+                    </Button>
+                  ),
+                },
+              ]}
+              data={passkeys}
+              getRowId={(pk) => pk.id}
+            />
+          )}
+        </CardContent>
+      </Card>
+
+      <AlertDialog open={!!toDelete} onOpenChange={() => setToDelete(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Remove this passkey?</AlertDialogTitle>
+            <AlertDialogDescription>
+              You won&apos;t be able to sign in with{' '}
+              {toDelete?.name ? `"${toDelete.name}"` : 'this passkey'} anymore.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => toDelete && deletePasskey(toDelete.id)}
+              disabled={deleting}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {deleting ? 'Removing...' : 'Remove'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
+}

package/components/dashboard/profileCard.tsx

@@ -0,0 +1,42 @@
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card"
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar"
+import { Badge } from "../ui/badge"
+import { getUserInitials } from "../../lib/formatters"
+
+type User = {
+  id: string
+  name: string
+  email: string
+  image?: string | null
+  role: string | null | undefined
+}
+
+export default function ProfileCard({ user, isAdmin }: { user: User; isAdmin: boolean }) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Profile</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="flex items-center gap-4">
+          <Avatar className="h-20 w-20">
+            <AvatarImage src={user.image || undefined} alt={user.name} />
+            <AvatarFallback className="text-2xl">
+              {getUserInitials(user.name)}
+            </AvatarFallback>
+          </Avatar>
+
+          <div className="flex-1">
+            <div className="flex items-center gap-2 mb-1">
+              <h3 className="text-xl font-semibold">{user.name}</h3>
+              <Badge variant={isAdmin ? 'default' : 'secondary'}>
+                {user.role}
+              </Badge>
+            </div>
+            <p className="text-sm text-gray-600">{user.email}</p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/components/dashboard/sectionErrorFallback.tsx

@@ -0,0 +1,18 @@
+import { AlertTriangle } from "lucide-react"
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card"
+
+export default function SectionErrorFallback({ title }: { title: string }) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 py-4">
+          <AlertTriangle className="size-4 text-destructive shrink-0" />
+          Something went wrong loading this section. Try refreshing the page.
+        </p>
+      </CardContent>
+    </Card>
+  )
+}