create-ej-app 26.0.0 → 27.0.0

package/template/saas-starter/public/logo.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="14" fill="#171717"/>
+  <path d="M20 44V20h24v6H27v4h14v6H27v8z" fill="#fafafa"/>
+</svg>

package/template/saas-starter/src/app/(admin)/actions/contact-leads.ts

@@ -0,0 +1,51 @@
+'use server'
+
+import { asc, count, desc, ilike, or } from 'drizzle-orm'
+import { z } from 'zod'
+import { SortOrderEnum } from '~/components/data-table/enum'
+import { db } from '~/db'
+import { contactLeadsTable } from '~/db/schema'
+import { getPaginationSchema, getSortSchema } from '~/lib/actions'
+import { adminActionClient, withWideEvent } from '~/lib/safe-action'
+import { likeContains } from '~/lib/search'
+import { optionalStringValidation } from '~/lib/validations'
+
+export const getContactLeads = adminActionClient
+  .inputSchema(
+    z.object({
+      ...getPaginationSchema(),
+      ...getSortSchema(['createdAt', 'name', 'email']),
+      search: optionalStringValidation
+    })
+  )
+  .action(
+    withWideEvent(
+      'getContactLeads',
+      async ({ parsedInput: { page, limit, sortBy, sortOrder, search } }) => {
+        const where = search
+          ? or(
+              ilike(contactLeadsTable.name, likeContains(search)),
+              ilike(contactLeadsTable.email, likeContains(search)),
+              ilike(contactLeadsTable.subject, likeContains(search)),
+              ilike(contactLeadsTable.message, likeContains(search))
+            )
+          : undefined
+
+        const [results, total] = await Promise.all([
+          db.query.contactLeadsTable.findMany({
+            where,
+            limit,
+            offset: (page - 1) * limit,
+            orderBy: [
+              sortOrder === SortOrderEnum.ASC
+                ? asc(contactLeadsTable[sortBy || 'createdAt'])
+                : desc(contactLeadsTable[sortBy || 'createdAt'])
+            ]
+          }),
+          db.select({ count: count() }).from(contactLeadsTable).where(where)
+        ])
+
+        return [results, total[0]?.count || 0] as const
+      }
+    )
+  )

package/template/saas-starter/src/app/(admin)/actions/feedbacks.ts

@@ -0,0 +1,91 @@
+'use server'
+
+import { and, asc, count, desc, eq, ilike, inArray, or } from 'drizzle-orm'
+import { z } from 'zod'
+import { SortOrderEnum } from '~/components/data-table/enum'
+import { db } from '~/db'
+import { feedbacksTable, organizationsTable, usersTable } from '~/db/schema'
+import { getPaginationSchema, getSortSchema } from '~/lib/actions'
+import { MAX_FILTER_VALUES, MAX_RATING, MIN_RATING } from '~/lib/constants'
+import { adminActionClient, withWideEvent } from '~/lib/safe-action'
+import { likeContains } from '~/lib/search'
+import { optionalStringValidation } from '~/lib/validations'
+
+export const getFeedbacks = adminActionClient
+  .inputSchema(
+    z.object({
+      ...getPaginationSchema(),
+      ...getSortSchema(['createdAt', 'rating']),
+      search: optionalStringValidation,
+      filters: z
+        .object({
+          rating: z
+            .array(z.coerce.number().int().min(MIN_RATING).max(MAX_RATING))
+            .max(MAX_FILTER_VALUES)
+            .optional()
+        })
+        .optional()
+    })
+  )
+  .action(
+    withWideEvent(
+      'getFeedbacks',
+      async ({
+        parsedInput: { page, limit, sortBy, sortOrder, search, filters }
+      }) => {
+        const where = and(
+          search
+            ? or(
+                ilike(feedbacksTable.comment, likeContains(search)),
+                ilike(usersTable.email, likeContains(search)),
+                ilike(usersTable.name, likeContains(search)),
+                ilike(organizationsTable.name, likeContains(search))
+              )
+            : undefined,
+          filters?.rating?.length
+            ? inArray(feedbacksTable.rating, filters.rating)
+            : undefined
+        )
+
+        const [results, total] = await Promise.all([
+          db
+            .select({
+              id: feedbacksTable.id,
+              rating: feedbacksTable.rating,
+              comment: feedbacksTable.comment,
+              createdAt: feedbacksTable.createdAt,
+              userId: feedbacksTable.userId,
+              organizationId: feedbacksTable.organizationId,
+              userEmail: usersTable.email,
+              userName: usersTable.name,
+              organizationName: organizationsTable.name
+            })
+            .from(feedbacksTable)
+            .leftJoin(usersTable, eq(feedbacksTable.userId, usersTable.id))
+            .leftJoin(
+              organizationsTable,
+              eq(feedbacksTable.organizationId, organizationsTable.id)
+            )
+            .where(where)
+            .limit(limit)
+            .offset((page - 1) * limit)
+            .orderBy(
+              sortOrder === SortOrderEnum.ASC
+                ? asc(feedbacksTable[sortBy || 'createdAt'])
+                : desc(feedbacksTable[sortBy || 'createdAt'])
+            ),
+          db
+            .select({ count: count() })
+            .from(feedbacksTable)
+            .leftJoin(usersTable, eq(feedbacksTable.userId, usersTable.id))
+            .leftJoin(
+              organizationsTable,
+              eq(feedbacksTable.organizationId, organizationsTable.id)
+            )
+            .where(where)
+        ])
+
+        return [results, total[0]?.count || 0] as const
+      }
+    )
+  )

package/template/saas-starter/src/app/(admin)/actions/users.ts

@@ -5,6 +5,7 @@ import {
   asc,
   count,
   desc,
+  eq,
   ilike,
   inArray,
   isNotNull,
@@ -15,83 +16,168 @@ import { SortOrderEnum } from '~/components/data-table/enum'
 import { db } from '~/db'
 import { usersTable } from '~/db/schema'
 import { getPaginationSchema, getSortSchema } from '~/lib/actions'
-import { adminActionClient } from '~/lib/safe-action'
+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 = adminActionClient
+export const getUsers = superAdminActionClient
   .inputSchema(
     z.object({
       ...getPaginationSchema(),
       ...getSortSchema(['name', 'email', 'createdAt']),
-      search: z.string().trim().optional(),
+      search: optionalStringValidation,
       filters: z
         .object({
-          role: z.array(z.string()).optional(),
-          banned: z.array(z.boolean()).optional()
+          role: z.array(z.string()).max(MAX_FILTER_VALUES).optional(),
+          banned: z.array(z.boolean()).max(MAX_FILTER_VALUES).optional()
         })
         .optional()
     })
   )
   .action(
-    async ({
-      parsedInput: { page, limit, sortBy, sortOrder, search, filters }
-    }) => {
-      const where = and(
-        search
-          ? or(
-              ilike(usersTable.name, `%${search}%`),
-              ilike(usersTable.email, `%${search}%`)
-            )
-          : undefined,
-        filters?.role && filters.role.length > 0
-          ? inArray(usersTable.role, filters.role)
-          : undefined,
-        filters?.banned && filters.banned.length > 0
-          ? 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
-    }
+    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 = adminActionClient
+export const getDistinctRoles = superAdminActionClient
   .inputSchema(
     z.object({
-      search: z.string().trim().optional(),
+      search: optionalStringValidation,
       ...getPaginationSchema(20)
     })
   )
-  .action(async ({ parsedInput: { search, limit } }) => {
-    const where = and(
-      isNotNull(usersTable.role),
-      search ? ilike(usersTable.role, `%${search}%`) : undefined
+  .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
+    })
+  )
 
-    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 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/saas-starter/src/app/(admin)/admin/_components/admin-header.tsx

@@ -11,10 +11,13 @@ export const AdminHeader: FC<{
     image?: string | null
   }
   isSuperAdmin: boolean
-}> = ({ user, isSuperAdmin }) => {
+  isImpersonating: boolean
+}> = ({ user, isSuperAdmin, isImpersonating }) => {
   return (
     <DashboardHeader
       user={user}
+      isSuperAdmin={isSuperAdmin}
+      isImpersonating={isImpersonating}
       search={<AdminSearch isSuperAdmin={isSuperAdmin} />}
     />
   )

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

@@ -1,8 +1,8 @@
 'use client'
 
-import { LayoutGrid } from 'lucide-react'
 import Link from 'next/link'
 import { FC } from 'react'
+import { Logo } from '~/components/logo'
 import { NavigationSidebar } from '~/components/navigation-sidebar'
 import {
   SidebarMenu,
@@ -10,25 +10,27 @@ import {
   SidebarMenuItem
 } from '~/components/ui/sidebar'
 import { getAdminNavigation } from '~/lib/admin-navigation'
+import { siteConfig } from '~/lib/siteConfig'
 
 export const AdminSidebar: FC<{
-  companyName: string
   isSuperAdmin: boolean
-}> = ({ companyName, isSuperAdmin }) => {
+}> = ({ isSuperAdmin }) => {
   return (
     <NavigationSidebar
       groups={getAdminNavigation(isSuperAdmin)}
       header={
         <SidebarMenu>
           <SidebarMenuItem>
-            <SidebarMenuButton size="lg" asChild>
+            <SidebarMenuButton size="lg" asChild tooltip={siteConfig.name}>
               <Link href="/admin">
-                <div className="bg-primary text-primary-foreground flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg">
-                  <LayoutGrid className="size-4" />
-                </div>
-                <div className="flex min-w-0 flex-col gap-0.5 leading-none group-data-[collapsible=icon]:hidden">
-                  <span className="truncate font-semibold">Admin Panel</span>
-                  <span className="truncate text-xs">{companyName}</span>
+                <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>

package/template/saas-starter/src/app/(admin)/admin/contact-leads/page.tsx

@@ -0,0 +1,123 @@
+'use client'
+
+import { MessageSquare } from 'lucide-react'
+import { parseAsInteger, parseAsString, useQueryStates } from 'nuqs'
+import { DataTable, type DataTableColumnDef } from '~/components/data-table'
+import { SortOrderEnum } from '~/components/data-table/enum'
+import { PageHeading } from '~/components/page-heading'
+import { formatDate } from '~/lib/format-date'
+import { useSafeActionQuery } from '~/lib/safe-action-client'
+import { getContactLeads } from '../../actions/contact-leads'
+
+type ContactLead = {
+  id: string
+  name: string
+  email: string
+  phone: string | null
+  subject: string
+  message: string
+  createdAt: Date
+}
+
+const columns: DataTableColumnDef<ContactLead>[] = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    enableSorting: true,
+    cell: ({ row }) => (
+      <div className="flex flex-col">
+        <span className="text-sm font-medium">{row.original.name}</span>
+        <span className="text-muted-foreground text-xs">
+          {row.original.email}
+        </span>
+        {row.original.phone && (
+          <span className="text-muted-foreground text-xs">
+            {row.original.phone}
+          </span>
+        )}
+      </div>
+    )
+  },
+  {
+    accessorKey: 'subject',
+    header: 'Subject',
+    enableSorting: false,
+    cell: ({ row }) => (
+      <span className="text-sm font-medium">{row.original.subject}</span>
+    )
+  },
+  {
+    accessorKey: 'message',
+    header: 'Message',
+    enableSorting: false,
+    cell: ({ row }) => (
+      <span className="text-muted-foreground line-clamp-2 max-w-100 text-sm">
+        {row.original.message}
+      </span>
+    )
+  },
+  {
+    accessorKey: 'createdAt',
+    header: 'Submitted On',
+    enableSorting: true,
+    cell: ({ row }) => formatDate(row.original.createdAt, { short: true })
+  }
+]
+
+export default function ContactLeadsPage() {
+  const [queryState, setQueryState] = useQueryStates({
+    page: parseAsInteger.withDefault(1),
+    limit: parseAsInteger.withDefault(10),
+    sortBy: parseAsString,
+    sortOrder: parseAsString,
+    search: parseAsString
+  })
+
+  const params = {
+    page: queryState.page,
+    limit: queryState.limit,
+    sortBy: (queryState.sortBy ?? undefined) as
+      'createdAt' | 'name' | 'email' | undefined,
+    sortOrder: (queryState.sortOrder ?? undefined) as SortOrderEnum | undefined,
+    search: queryState.search ?? undefined
+  }
+
+  const { data, isLoading } = useSafeActionQuery(
+    'admin-contact-leads',
+    getContactLeads,
+    params
+  )
+
+  return (
+    <div className="space-y-6">
+      <PageHeading
+        title="Contact Leads"
+        description="View contact form submissions."
+        icon={MessageSquare}
+      />
+
+      <DataTable
+        columns={columns}
+        data={data?.[0]}
+        isLoading={isLoading}
+        totalCount={data?.[1]}
+        enableSearch
+        initialSearch={params.search}
+        searchPlaceholder="Search by name, email, subject, or message…"
+        manualPagination
+        manualSorting
+        pageIndex={params.page - 1}
+        pageSize={params.limit}
+        onParamsChange={({ page, limit, sortBy, sortOrder, search }) =>
+          setQueryState({
+            page,
+            limit,
+            sortBy: sortBy ?? null,
+            sortOrder: sortOrder ?? null,
+            search: search ?? null
+          })
+        }
+      />
+    </div>
+  )
+}