create-ej-app 25.0.0 → 27.0.0

package/template/saas-starter/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {}
+  }
+}
+
+export default config

package/template/saas-starter/prettier.config.mjs

@@ -0,0 +1,11 @@
+/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
+const config = {
+  plugins: ['prettier-plugin-organize-imports', 'prettier-plugin-tailwindcss'],
+  arrowParens: 'avoid',
+  trailingComma: 'none',
+  semi: false,
+  singleQuote: true,
+  tabWidth: 2
+}
+
+export default config

package/template/saas-starter/public/logo-dark.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="#fafafa"/>
+  <path d="M20 44V20h24v6H27v4h14v6H27v8z" fill="#171717"/>
+</svg>

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/public/placeholder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></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

@@ -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/saas-starter/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/saas-starter/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/saas-starter/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/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>
+  )
+}