create-ej-app 26.0.0 → 27.0.0

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

@@ -0,0 +1,183 @@
+'use server'
+
+import {
+  and,
+  asc,
+  count,
+  desc,
+  eq,
+  ilike,
+  inArray,
+  isNotNull,
+  or
+} from 'drizzle-orm'
+import { z } from 'zod'
+import { SortOrderEnum } from '~/components/data-table/enum'
+import { db } from '~/db'
+import { usersTable } from '~/db/schema'
+import { getPaginationSchema, getSortSchema } from '~/lib/actions'
+import { MAX_FILTER_VALUES } from '~/lib/constants'
+import { AppError, AppErrorCode, rethrowUniqueViolation } from '~/lib/errors'
+import { superAdminActionClient, withWideEvent } from '~/lib/safe-action'
+import { likeContains } from '~/lib/search'
+import { optionalStringValidation, stringValidation } from '~/lib/validations'
+import {
+  createUserSchema,
+  updateUserSchema
+} from '../admin/settings/users/validation'
+
+const EMAIL_TAKEN = 'Another account already uses this email address.'
+
+export const getUsers = superAdminActionClient
+  .inputSchema(
+    z.object({
+      ...getPaginationSchema(),
+      ...getSortSchema(['name', 'email', 'createdAt']),
+      search: optionalStringValidation,
+      filters: z
+        .object({
+          role: z.array(z.string()).max(MAX_FILTER_VALUES).optional(),
+          banned: z.array(z.boolean()).max(MAX_FILTER_VALUES).optional()
+        })
+        .optional()
+    })
+  )
+  .action(
+    withWideEvent(
+      'getUsers',
+      async ({
+        parsedInput: { page, limit, sortBy, sortOrder, search, filters }
+      }) => {
+        const where = and(
+          search
+            ? or(
+                ilike(usersTable.name, likeContains(search)),
+                ilike(usersTable.email, likeContains(search))
+              )
+            : undefined,
+          filters?.role?.length
+            ? inArray(usersTable.role, filters.role)
+            : undefined,
+          filters?.banned?.length
+            ? inArray(usersTable.banned, filters.banned)
+            : undefined
+        )
+
+        const [results, total] = await Promise.all([
+          db.query.usersTable.findMany({
+            where,
+            limit,
+            offset: (page - 1) * limit,
+            orderBy: [
+              sortOrder === SortOrderEnum.ASC
+                ? asc(usersTable[sortBy || 'createdAt'])
+                : desc(usersTable[sortBy || 'createdAt'])
+            ]
+          }),
+          db.select({ count: count() }).from(usersTable).where(where)
+        ])
+
+        return [results, total[0]?.count || 0] as const
+      }
+    )
+  )
+
+export const getDistinctRoles = superAdminActionClient
+  .inputSchema(
+    z.object({
+      search: optionalStringValidation,
+      ...getPaginationSchema(20)
+    })
+  )
+  .action(
+    withWideEvent(
+      'getDistinctRoles',
+      async ({ parsedInput: { search, limit } }) => {
+        const where = and(
+          isNotNull(usersTable.role),
+          search ? ilike(usersTable.role, likeContains(search)) : undefined
+        )
+
+        const rows = await db
+          .selectDistinct({ role: usersTable.role })
+          .from(usersTable)
+          .where(where)
+          .orderBy(asc(usersTable.role))
+          .limit(limit)
+
+        return rows
+          .filter(r => r.role !== null)
+          .map(r => ({
+            value: r.role!,
+            label: r.role!.charAt(0).toUpperCase() + r.role!.slice(1)
+          }))
+      }
+    )
+  )
+
+export const getUserById = superAdminActionClient
+  .inputSchema(z.object({ userId: stringValidation }))
+  .action(
+    withWideEvent('getUserById', async ({ parsedInput: { userId } }) => {
+      const user = await db.query.usersTable.findFirst({
+        where: eq(usersTable.id, userId),
+        columns: { id: true, name: true, email: true, role: true }
+      })
+
+      if (!user) {
+        throw new AppError(AppErrorCode.NOT_FOUND, 'User not found.')
+      }
+
+      return user
+    })
+  )
+
+/** Creates an account that signs in by magic link or OAuth with this email. */
+export const createUser = superAdminActionClient
+  .inputSchema(createUserSchema)
+  .action(
+    withWideEvent('createUser', async ({ parsedInput }) => {
+      const [created] = await db
+        .insert(usersTable)
+        .values({
+          name: parsedInput.name,
+          email: parsedInput.email,
+          role: parsedInput.role
+        })
+        .returning()
+        .catch(error => rethrowUniqueViolation(error, EMAIL_TAKEN))
+
+      return created
+    })
+  )
+
+export const updateUser = superAdminActionClient
+  .inputSchema(updateUserSchema)
+  .action(
+    withWideEvent('updateUser', async ({ parsedInput, ctx }) => {
+      // Demoting yourself would lock you out of this page with no way back.
+      if (parsedInput.id === ctx.user.id && parsedInput.role !== 'superadmin') {
+        throw new AppError(
+          AppErrorCode.BAD_REQUEST,
+          'You cannot remove your own superadmin role. Ask another superadmin to change it.'
+        )
+      }
+
+      const [updated] = await db
+        .update(usersTable)
+        .set({
+          name: parsedInput.name,
+          email: parsedInput.email,
+          role: parsedInput.role
+        })
+        .where(eq(usersTable.id, parsedInput.id))
+        .returning()
+        .catch(error => rethrowUniqueViolation(error, EMAIL_TAKEN))
+
+      if (!updated) {
+        throw new AppError(AppErrorCode.NOT_FOUND, 'User not found.')
+      }
+
+      return updated
+    })
+  )

package/template/nextjs/src/app/(admin)/admin/_components/admin-header.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import { FC } from 'react'
+import { DashboardHeader } from '~/components/dashboard-header'
+import { AdminSearch } from './admin-search'
+
+export const AdminHeader: FC<{
+  user: {
+    name?: string | null
+    email?: string | null
+    image?: string | null
+  }
+  isSuperAdmin: boolean
+  isImpersonating: boolean
+}> = ({ user, isSuperAdmin, isImpersonating }) => {
+  return (
+    <DashboardHeader
+      user={user}
+      isSuperAdmin={isSuperAdmin}
+      isImpersonating={isImpersonating}
+      search={<AdminSearch isSuperAdmin={isSuperAdmin} />}
+    />
+  )
+}

package/template/nextjs/src/app/(admin)/admin/_components/admin-search.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+import { FC } from 'react'
+import { NavigationSearch } from '~/components/navigation-search'
+import { getAdminNavigation } from '~/lib/admin-navigation'
+
+export const AdminSearch: FC<{ isSuperAdmin: boolean }> = ({
+  isSuperAdmin
+}) => {
+  return (
+    <NavigationSearch
+      groups={getAdminNavigation(isSuperAdmin)}
+      dialogDescription="Search across all admin pages and settings."
+    />
+  )
+}

package/template/nextjs/src/app/(admin)/admin/_components/admin-sidebar.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import Link from 'next/link'
+import { FC } from 'react'
+import { Logo } from '~/components/logo'
+import { NavigationSidebar } from '~/components/navigation-sidebar'
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem
+} from '~/components/ui/sidebar'
+import { getAdminNavigation } from '~/lib/admin-navigation'
+import { siteConfig } from '~/lib/siteConfig'
+
+export const AdminSidebar: FC<{
+  isSuperAdmin: boolean
+}> = ({ isSuperAdmin }) => {
+  return (
+    <NavigationSidebar
+      groups={getAdminNavigation(isSuperAdmin)}
+      header={
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild tooltip={siteConfig.name}>
+              <Link href="/admin">
+                <Logo size={32} showName={false} />
+                <div className="grid min-w-0 flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
+                  <span className="truncate font-medium">
+                    {siteConfig.name}
+                  </span>
+                  <span className="text-muted-foreground truncate text-xs">
+                    Admin Panel
+                  </span>
+                </div>
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      }
+    />
+  )
+}

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

@@ -0,0 +1,53 @@
+import type { Metadata } from 'next'
+import { cookies } from 'next/headers'
+import { notFound, redirect } from 'next/navigation'
+import { NuqsAdapter } from 'nuqs/adapters/next/app'
+import { AdminHeader } from '~/app/(admin)/admin/_components/admin-header'
+import { AdminSidebar } from '~/app/(admin)/admin/_components/admin-sidebar'
+import { SidebarInset, SidebarProvider } from '~/components/ui/sidebar'
+import { getAuthSession } from '~/lib/auth'
+import { privatePageRobots } from '~/lib/seo'
+
+export const metadata: Metadata = {
+  robots: privatePageRobots
+}
+
+export default async function Layout({
+  children
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  const authSession = await getAuthSession()
+
+  if (!authSession) {
+    return notFound()
+  }
+
+  if (!authSession.isAdmin) {
+    return redirect('/app')
+  }
+
+  const cookieStore = await cookies()
+  const sidebarStateCookie = cookieStore.get('sidebar_state')?.value
+  const defaultOpen = sidebarStateCookie !== 'false'
+
+  return (
+    <NuqsAdapter>
+      <SidebarProvider defaultOpen={defaultOpen}>
+        <AdminSidebar isSuperAdmin={authSession.isSuperAdmin} />
+        <SidebarInset>
+          <AdminHeader
+            user={{
+              name: authSession.user?.name,
+              email: authSession.user?.email,
+              image: authSession.user?.image
+            }}
+            isSuperAdmin={authSession.isSuperAdmin}
+            isImpersonating={!!authSession.session.impersonatedBy}
+          />
+          <div className="flex flex-1 flex-col gap-4 p-4">{children}</div>
+        </SidebarInset>
+      </SidebarProvider>
+    </NuqsAdapter>
+  )
+}

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

@@ -1,3 +1,12 @@
-export default async function AdminPage() {
-  return <div>Hello Admin</div>
+import { LayoutDashboard } from 'lucide-react'
+import { PageHeading } from '~/components/page-heading'
+
+export default function AdminPage() {
+  return (
+    <PageHeading
+      title="Dashboard"
+      description="Add the pages your team uses to run the product here."
+      icon={LayoutDashboard}
+    />
+  )
 }

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

@@ -0,0 +1,24 @@
+import { redirect } from 'next/navigation'
+import { getAuthSession } from '~/lib/auth'
+
+/**
+ * Route guard for the admin Settings section.
+ *
+ * The parent admin layout already restricts access to `admin` and
+ * `superadmin`. This layout further narrows `/admin/settings/*` (user & role
+ * management and impersonation) to `superadmin` only. `admin` users are
+ * redirected back to the dashboard.
+ */
+export default async function SettingsLayout({
+  children
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  const authSession = await getAuthSession()
+
+  if (!authSession?.isSuperAdmin) {
+    return redirect('/admin')
+  }
+
+  return <>{children}</>
+}

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

@@ -0,0 +1,43 @@
+import { Users } from 'lucide-react'
+import { notFound } from 'next/navigation'
+import { getUserById } from '~/app/(admin)/actions/users'
+import { PageHeading } from '~/components/page-heading'
+import { UserForm } from '../user-form'
+
+interface PageProps {
+  params: Promise<{
+    userId: string
+  }>
+}
+
+export default async function AdminUserEditPage({
+  params: nextParams
+}: PageProps) {
+  const params = await nextParams
+  const result = await getUserById({ userId: params.userId })
+
+  if (!result?.data) {
+    return notFound()
+  }
+
+  const user = result.data
+
+  return (
+    <div className="space-y-6">
+      <PageHeading
+        title="Edit User"
+        description="Change the user's name, email, and role."
+        icon={Users}
+      />
+      <UserForm
+        mode="edit"
+        initialData={{
+          id: user.id,
+          name: user.name,
+          email: user.email,
+          role: user.role
+        }}
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,16 @@
+import { Users } from 'lucide-react'
+import { PageHeading } from '~/components/page-heading'
+import { UserForm } from '../user-form'
+
+export default function AdminUserCreatePage() {
+  return (
+    <div className="space-y-6">
+      <PageHeading
+        title="Create User"
+        description="Create a new user and assign a role."
+        icon={Users}
+      />
+      <UserForm mode="create" />
+    </div>
+  )
+}