create-ej-app 26.0.0 → 27.0.0

package/template/nextjs/src/app/(admin)/admin/settings/users/page.tsx

@@ -0,0 +1,377 @@
+'use client'
+
+import { useQueryClient } from '@tanstack/react-query'
+import {
+  Ban,
+  Edit,
+  MoreHorizontal,
+  Plus,
+  Trash2,
+  UserCog,
+  Users
+} from 'lucide-react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import {
+  parseAsInteger,
+  parseAsJson,
+  parseAsString,
+  useQueryStates
+} from 'nuqs'
+import { useState } from 'react'
+import { ConfirmDialog } from '~/components/confirm-dialog'
+import { DataTable, type DataTableColumnDef } from '~/components/data-table'
+import { SortOrderEnum } from '~/components/data-table/enum'
+import { DataTableFilter } from '~/components/data-table/types'
+import { PageHeading } from '~/components/page-heading'
+import { Avatar, AvatarFallback, AvatarImage } from '~/components/ui/avatar'
+import { Badge } from '~/components/ui/badge'
+import { Button } from '~/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '~/components/ui/dropdown-menu'
+import { admin, useSession } from '~/lib/auth-client'
+import { formatDate } from '~/lib/format-date'
+import { useSafeActionQuery } from '~/lib/safe-action-client'
+import {
+  toastActionError,
+  toastErrorMessage,
+  toastSuccessMessage
+} from '~/lib/toast-message'
+import { getDistinctRoles, getUsers } from '../../../actions/users'
+
+type User = {
+  id: string
+  name: string
+  email: string
+  emailVerified: boolean
+  image: string | null
+  role: string | null
+  banned: boolean | null
+  createdAt: Date
+  updatedAt: Date
+}
+
+type PendingConfirm = { kind: 'ban' | 'unban' | 'delete'; user: User }
+
+const CONFIRM_COPY = {
+  ban: {
+    title: 'Ban User',
+    description: 'They are signed out and can no longer sign in.',
+    confirmLabel: 'Ban User',
+    success: 'User banned'
+  },
+  unban: {
+    title: 'Unban User',
+    description: 'They can sign in again.',
+    confirmLabel: 'Unban User',
+    success: 'User unbanned'
+  },
+  delete: {
+    title: 'Delete User',
+    description:
+      'This permanently deletes the account and signs it out everywhere.',
+    confirmLabel: 'Delete User',
+    success: 'User deleted'
+  }
+} as const
+
+function UserActionsCell({
+  user,
+  isSelf,
+  onConfirm
+}: {
+  user: User
+  isSelf: boolean
+  onConfirm: (pending: PendingConfirm) => void
+}) {
+  const router = useRouter()
+  const [isImpersonating, setIsImpersonating] = useState(false)
+
+  const handleImpersonate = async () => {
+    setIsImpersonating(true)
+    const { error } = await admin.impersonateUser({ userId: user.id })
+    if (error) {
+      toastActionError(error, 'Impersonation did not start. Try again.')
+      setIsImpersonating(false)
+      return
+    }
+    router.push('/app')
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-8 w-8 p-0"
+          aria-label="User actions"
+        >
+          <MoreHorizontal className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem asChild>
+          <Link href={`/admin/settings/users/${user.id}`}>
+            <Edit className="mr-2 h-4 w-4" /> Edit
+          </Link>
+        </DropdownMenuItem>
+        {isSelf ? null : (
+          <>
+            <DropdownMenuItem
+              disabled={isImpersonating}
+              onClick={handleImpersonate}
+            >
+              <UserCog className="mr-2 h-4 w-4" /> Impersonate
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() =>
+                onConfirm({ kind: user.banned ? 'unban' : 'ban', user })
+              }
+            >
+              <Ban className="mr-2 h-4 w-4" />
+              {user.banned ? 'Unban User' : 'Ban User'}
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              variant="destructive"
+              onClick={() => onConfirm({ kind: 'delete', user })}
+            >
+              <Trash2 className="mr-2 h-4 w-4" />
+              Delete
+            </DropdownMenuItem>
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+const filters: DataTableFilter[] = [
+  {
+    id: 'role',
+    label: 'Role',
+    action: getDistinctRoles,
+    queryKey: 'admin-distinct-roles'
+  },
+  {
+    id: 'banned',
+    label: 'Status',
+    options: [
+      { label: 'Active', value: false },
+      { label: 'Banned', value: true }
+    ]
+  }
+]
+
+const getInitials = (name: string) =>
+  name
+    .split(' ')
+    .map(n => n[0])
+    .join('')
+    .toUpperCase()
+    .slice(0, 2)
+
+export default function UsersPage() {
+  const queryClient = useQueryClient()
+  const { data: session } = useSession()
+  const [pendingConfirm, setPendingConfirm] = useState<PendingConfirm | null>(
+    null
+  )
+  const [isConfirming, setIsConfirming] = useState(false)
+
+  const [queryState, setQueryState] = useQueryStates({
+    page: parseAsInteger.withDefault(1),
+    limit: parseAsInteger.withDefault(10),
+    sortBy: parseAsString,
+    sortOrder: parseAsString,
+    search: parseAsString,
+    filters: parseAsJson(v => v as Record<string, (string | boolean)[]>)
+  })
+
+  const params = {
+    page: queryState.page,
+    limit: queryState.limit,
+    sortBy: (queryState.sortBy ?? undefined) as
+      'name' | 'email' | 'createdAt' | undefined,
+    sortOrder: (queryState.sortOrder ?? undefined) as SortOrderEnum | undefined,
+    search: queryState.search ?? undefined,
+    filters: queryState.filters ?? undefined
+  }
+
+  const { data, isLoading } = useSafeActionQuery(
+    'admin-users',
+    getUsers,
+    params
+  )
+
+  async function runConfirmedAction({ kind, user }: PendingConfirm) {
+    setIsConfirming(true)
+    try {
+      const { error } =
+        kind === 'delete'
+          ? await admin.removeUser({ userId: user.id })
+          : kind === 'ban'
+            ? await admin.banUser({ userId: user.id })
+            : await admin.unbanUser({ userId: user.id })
+
+      if (error) {
+        toastActionError(error, 'That change was not saved. Try again.')
+        return
+      }
+
+      toastSuccessMessage(CONFIRM_COPY[kind].success)
+      setPendingConfirm(null)
+      await queryClient.invalidateQueries({ queryKey: ['admin-users'] })
+    } catch {
+      toastErrorMessage('That change was not saved. Try again.')
+    } finally {
+      setIsConfirming(false)
+    }
+  }
+
+  const columns: DataTableColumnDef<User>[] = [
+    {
+      accessorKey: 'name',
+      header: 'User',
+      enableSorting: true,
+      cell: ({ row }) => (
+        <Link
+          href={`/admin/settings/users/${row.original.id}`}
+          className="group/user-link flex items-center gap-3"
+        >
+          <Avatar className="h-8 w-8">
+            <AvatarImage src={row.original.image ?? undefined} />
+            <AvatarFallback className="text-xs">
+              {getInitials(row.original.name)}
+            </AvatarFallback>
+          </Avatar>
+          <div className="flex flex-col">
+            <span className="font-medium group-hover/user-link:underline">
+              {row.original.name}
+            </span>
+            <span className="text-muted-foreground text-xs">
+              {row.original.email}
+            </span>
+          </div>
+        </Link>
+      )
+    },
+    {
+      accessorKey: 'role',
+      header: 'Role',
+      cell: ({ row }) => (
+        <Badge variant="outline" className="capitalize">
+          {row.original.role ?? 'user'}
+        </Badge>
+      )
+    },
+    {
+      accessorKey: 'banned',
+      header: 'Status',
+      enableSorting: false,
+      cell: ({ row }) => (
+        <Badge variant={row.original.banned ? 'destructive' : 'success'}>
+          {row.original.banned ? 'Banned' : 'Active'}
+        </Badge>
+      )
+    },
+    {
+      accessorKey: 'emailVerified',
+      header: 'Verified',
+      enableSorting: false,
+      cell: ({ row }) => (
+        <Badge variant={row.original.emailVerified ? 'success' : 'secondary'}>
+          {row.original.emailVerified ? 'Verified' : 'Unverified'}
+        </Badge>
+      )
+    },
+    {
+      accessorKey: 'createdAt',
+      header: 'Joined',
+      enableSorting: true,
+      cell: ({ row }) => formatDate(row.original.createdAt, { short: true })
+    },
+    {
+      id: 'actions',
+      header: 'Actions',
+      enableSorting: false,
+      cell: ({ row }) => (
+        <UserActionsCell
+          user={row.original}
+          isSelf={row.original.id === session?.user.id}
+          onConfirm={setPendingConfirm}
+        />
+      )
+    }
+  ]
+
+  const confirmCopy = pendingConfirm ? CONFIRM_COPY[pendingConfirm.kind] : null
+
+  return (
+    <div className="space-y-6">
+      <PageHeading
+        title="Users"
+        description="Create accounts, assign roles, and ban or delete users."
+        icon={Users}
+      >
+        <Button size="lg" asChild>
+          <Link href="/admin/settings/users/new">
+            <Plus /> New User
+          </Link>
+        </Button>
+      </PageHeading>
+
+      <DataTable
+        columns={columns}
+        data={data?.[0]}
+        isLoading={isLoading}
+        totalCount={data?.[1]}
+        enableSearch
+        initialSearch={params.search}
+        searchPlaceholder="Search users…"
+        manualPagination
+        manualSorting
+        pageIndex={params.page - 1}
+        pageSize={params.limit}
+        filters={filters}
+        activeFilters={params.filters ?? {}}
+        onParamsChange={({ page, limit, sortBy, sortOrder, search, filters }) =>
+          setQueryState({
+            page,
+            limit,
+            sortBy: sortBy ?? null,
+            sortOrder: sortOrder ?? null,
+            search: search ?? null,
+            filters: filters ?? null
+          })
+        }
+      />
+
+      <ConfirmDialog
+        open={pendingConfirm !== null}
+        onOpenChange={open => {
+          if (!open) setPendingConfirm(null)
+        }}
+        title={confirmCopy?.title ?? ''}
+        description={
+          <>
+            <span className="text-foreground font-medium">
+              {pendingConfirm?.user.email}
+            </span>
+            : {confirmCopy?.description}
+          </>
+        }
+        confirmLabel={confirmCopy?.confirmLabel ?? ''}
+        destructive={pendingConfirm?.kind !== 'unban'}
+        pending={isConfirming}
+        onConfirm={() => pendingConfirm && runConfirmedAction(pendingConfirm)}
+      />
+    </div>
+  )
+}

package/template/nextjs/src/app/(admin)/admin/settings/users/user-form.tsx

@@ -0,0 +1,138 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useRouter } from 'next/navigation'
+import { useForm, useWatch } from 'react-hook-form'
+import { z } from 'zod'
+import { Button } from '~/components/ui/button'
+import {
+  Field,
+  FieldContent,
+  FieldError,
+  FieldLabel
+} from '~/components/ui/field'
+import { Input } from '~/components/ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '~/components/ui/select'
+import { useSafeActionMutation } from '~/lib/safe-action-client'
+import { toastActionError, toastSuccessMessage } from '~/lib/toast-message'
+import { createUser, updateUser } from '../../../actions/users'
+import { baseUserFormSchema, type UserRole } from './validation'
+
+type UserFormValues = z.infer<typeof baseUserFormSchema>
+
+type UserFormProps = {
+  mode: 'create' | 'edit'
+  initialData?: {
+    id: string
+    name: string
+    email: string
+    role: string | null
+  }
+}
+
+export function UserForm({ mode, initialData }: UserFormProps) {
+  const router = useRouter()
+
+  const form = useForm<UserFormValues>({
+    resolver: zodResolver(baseUserFormSchema),
+    defaultValues: {
+      name: initialData?.name ?? '',
+      email: initialData?.email ?? '',
+      role: (initialData?.role as UserRole) ?? 'user'
+    }
+  })
+
+  const mutationOptions = {
+    onSuccess: () => {
+      toastSuccessMessage(mode === 'create' ? 'User created' : 'User updated')
+      router.push('/admin/settings/users')
+    },
+    onError: (error: Error) =>
+      toastActionError(error, 'The user was not saved. Try again.')
+  }
+  const create = useSafeActionMutation(createUser, mutationOptions)
+  const update = useSafeActionMutation(updateUser, mutationOptions)
+  const isPending = create.isPending || update.isPending
+
+  const onSubmit = (values: UserFormValues) => {
+    if (mode === 'edit' && initialData) {
+      update.mutate({ id: initialData.id, ...values })
+    } else {
+      create.mutate(values)
+    }
+  }
+
+  const errors = form.formState.errors
+  const role = useWatch({ control: form.control, name: 'role' })
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+      <div className="grid gap-6 md:grid-cols-2">
+        <Field>
+          <FieldLabel>Name</FieldLabel>
+          <FieldContent>
+            <Input
+              {...form.register('name')}
+              placeholder="Full name"
+              aria-invalid={!!errors.name}
+            />
+            <FieldError errors={errors.name ? [errors.name] : []} />
+          </FieldContent>
+        </Field>
+
+        <Field>
+          <FieldLabel>Email</FieldLabel>
+          <FieldContent>
+            <Input
+              {...form.register('email')}
+              type="email"
+              placeholder="email@example.com"
+              aria-invalid={!!errors.email}
+            />
+            <FieldError errors={errors.email ? [errors.email] : []} />
+          </FieldContent>
+        </Field>
+
+        <Field>
+          <FieldLabel>Role</FieldLabel>
+          <FieldContent>
+            <Select
+              value={role}
+              onValueChange={value => form.setValue('role', value as UserRole)}
+            >
+              <SelectTrigger aria-invalid={!!errors.role} className="w-full">
+                <SelectValue placeholder="Select role" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="superadmin">Superadmin</SelectItem>
+                <SelectItem value="admin">Admin</SelectItem>
+                <SelectItem value="user">User</SelectItem>
+              </SelectContent>
+            </Select>
+            <FieldError errors={errors.role ? [errors.role] : []} />
+          </FieldContent>
+        </Field>
+      </div>
+
+      <div className="flex justify-end gap-3">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={() => router.push('/admin/settings/users')}
+          disabled={isPending}
+        >
+          Cancel
+        </Button>
+        <Button type="submit" disabled={isPending}>
+          {mode === 'create' ? 'Create User' : 'Save Changes'}
+        </Button>
+      </div>
+    </form>
+  )
+}

package/template/nextjs/src/app/(admin)/admin/settings/users/validation.ts

@@ -0,0 +1,23 @@
+import { z } from 'zod'
+import { emailValidation, stringValidation } from '~/lib/validations'
+
+/** The roles assignable to a platform user. */
+export const userRoles = ['superadmin', 'admin', 'user'] as const
+
+export type UserRole = (typeof userRoles)[number]
+
+/**
+ * Admin user form. Only superadmins reach it, and they may assign any role,
+ * including promoting a user to `superadmin`.
+ */
+export const baseUserFormSchema = z.object({
+  name: stringValidation,
+  email: emailValidation,
+  role: z.enum(userRoles)
+})
+
+export const createUserSchema = baseUserFormSchema
+
+export const updateUserSchema = baseUserFormSchema.extend({
+  id: stringValidation
+})

package/template/nextjs/src/app/(app)/app/layout.tsx

@@ -0,0 +1,44 @@
+import type { Metadata } from 'next'
+import { headers } from 'next/headers'
+import Link from 'next/link'
+import { redirect } from 'next/navigation'
+import { Logo } from '~/components/logo'
+import { UserMenu } from '~/components/user-menu'
+import { getAuthSession } from '~/lib/auth'
+import { sanitizeCallbackUrl } from '~/lib/callback-url'
+import { privatePageRobots } from '~/lib/seo'
+
+export const metadata: Metadata = {
+  robots: privatePageRobots
+}
+
+export default async function AppLayout({
+  children
+}: {
+  children: React.ReactNode
+}) {
+  const authSession = await getAuthSession()
+
+  if (!authSession) {
+    const headerStore = await headers()
+    const callbackUrl =
+      sanitizeCallbackUrl(headerStore.get('x-pathname') ?? undefined) ?? '/app'
+    redirect(`/login?callbackUrl=${encodeURIComponent(callbackUrl)}`)
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col">
+      <header className="bg-background sticky top-0 z-50 flex h-14 shrink-0 items-center justify-between gap-2 border-b px-4">
+        <Link href="/app" className="flex shrink-0 items-center">
+          <Logo size={32} priority className="text-lg" />
+        </Link>
+        <UserMenu
+          user={authSession.user}
+          isSuperAdmin={authSession.isSuperAdmin}
+          isImpersonating={!!authSession.session.impersonatedBy}
+        />
+      </header>
+      <main className="flex-1 p-4">{children}</main>
+    </div>
+  )
+}

package/template/nextjs/src/app/(app)/app/page.tsx

@@ -1,3 +1,15 @@
-export default async function Page() {
-  return <div>Hello, World!</div>
+import { LayoutGrid } from 'lucide-react'
+import { PageHeading } from '~/components/page-heading'
+import { siteConfig } from '~/lib/siteConfig'
+
+export default function AppPage() {
+  return (
+    <div className="mx-auto w-full max-w-5xl">
+      <PageHeading
+        title={`Welcome to ${siteConfig.name}`}
+        description="Build your product here."
+        icon={LayoutGrid}
+      />
+    </div>
+  )
 }

package/template/nextjs/src/app/(auth)/(account)/layout.tsx

@@ -0,0 +1,64 @@
+import { ArrowLeft } from 'lucide-react'
+import type { Metadata } from 'next'
+import { headers } from 'next/headers'
+import Link from 'next/link'
+import { redirect } from 'next/navigation'
+import { NuqsAdapter } from 'nuqs/adapters/next/app'
+import { Logo } from '~/components/logo'
+import { SiteFooter } from '~/components/site-footer'
+import { Button } from '~/components/ui/button'
+import { UserMenu } from '~/components/user-menu'
+import { getAuthSession } from '~/lib/auth'
+import { sanitizeCallbackUrl } from '~/lib/callback-url'
+import { privatePageRobots } from '~/lib/seo'
+import { siteConfig } from '~/lib/siteConfig'
+
+export const metadata: Metadata = {
+  robots: privatePageRobots
+}
+
+export default async function AccountLayout({
+  children
+}: {
+  children: React.ReactNode
+}) {
+  const authSession = await getAuthSession()
+
+  if (!authSession) {
+    const headerStore = await headers()
+    const callbackUrl =
+      sanitizeCallbackUrl(headerStore.get('x-pathname') ?? undefined) ??
+      '/profile'
+    redirect(`/login?callbackUrl=${encodeURIComponent(callbackUrl)}`)
+  }
+
+  return (
+    <NuqsAdapter>
+      <div className="flex min-h-screen flex-col">
+        <header className="bg-background sticky top-0 z-50 flex h-14 shrink-0 items-center gap-2 border-b px-4">
+          <Link href="/" className="flex shrink-0 items-center">
+            <Logo size={32} priority className="text-lg" />
+          </Link>
+
+          <div className="flex flex-1 items-center justify-end gap-2">
+            <Button asChild variant="ghost" size="sm">
+              <Link href="/app">
+                <ArrowLeft className="size-4" />
+                Back to App
+              </Link>
+            </Button>
+            <UserMenu
+              user={authSession.user}
+              isSuperAdmin={authSession.isSuperAdmin}
+              isImpersonating={!!authSession.session.impersonatedBy}
+            />
+          </div>
+        </header>
+
+        <main className="flex-1">{children}</main>
+
+        <SiteFooter name={siteConfig.name} />
+      </div>
+    </NuqsAdapter>
+  )
+}

package/template/nextjs/src/app/(auth)/(account)/profile/page.tsx

@@ -0,0 +1,16 @@
+import { UserCog } from 'lucide-react'
+import { PageHeading } from '~/components/page-heading'
+import { ProfileForm } from './profile-form'
+
+export default function ProfilePage() {
+  return (
+    <div className="mx-auto w-full max-w-3xl space-y-6 p-4 sm:p-6">
+      <PageHeading
+        title="Your Profile"
+        description="Update your name and review your account details."
+        icon={UserCog}
+      />
+      <ProfileForm />
+    </div>
+  )
+}