create-ej-app 26.0.0 → 28.0.0

package/template/saas-starter/src/components/user-menu.tsx

@@ -1,20 +1,31 @@
 'use client'
 
-import { LogOut, UserCog } from 'lucide-react'
+import {
+  House,
+  LayoutGrid,
+  LogOut,
+  ShieldCheck,
+  Ticket,
+  UserCog,
+  UserX
+} from 'lucide-react'
 import Link from 'next/link'
-import { useRouter } from 'next/navigation'
+import { usePathname, useRouter } from 'next/navigation'
+import { useState } from 'react'
 import { ThemeToggle } from '~/components/theme-toggle'
 import { Avatar, AvatarFallback, AvatarImage } from '~/components/ui/avatar'
 import { Button } from '~/components/ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger
 } from '~/components/ui/dropdown-menu'
-import { signOut } from '~/lib/auth-client'
+import { admin, signOut } from '~/lib/auth-client'
+import { cn } from '~/lib/cn'
 
 type UserMenuProps = {
   user: {
@@ -25,16 +36,32 @@ type UserMenuProps = {
   fallbackName?: string
   fallbackInitials?: string
   wrapperClassName?: string
+  /** Superadmins work in both panels, so they get a way to cross over. */
+  isSuperAdmin?: boolean
+  /** This session is an admin acting as someone else. */
+  isImpersonating?: boolean
 }
 
 export function UserMenu({
   user,
   fallbackName = 'Unknown',
   fallbackInitials = 'NA',
-  wrapperClassName = 'flex items-center gap-2'
+  wrapperClassName = 'flex items-center gap-2',
+  isSuperAdmin = false,
+  isImpersonating = false
 }: UserMenuProps) {
   const router = useRouter()
+  const pathname = usePathname()
+  const [isStopping, setIsStopping] = useState(false)
+
+  // One entry, pointing at the panel you are not in. Account pages sit outside
+  // both, and lead back to the admin panel.
+  const inAdminPanel = pathname?.startsWith('/admin') ?? false
+  const switchTo = inAdminPanel
+    ? { href: '/app', label: 'Switch to App', Icon: LayoutGrid }
+    : { href: '/admin', label: 'Switch to Admin', Icon: ShieldCheck }
 
+  const displayName = user.name ?? fallbackName
   const initials =
     user.name
       ?.split(' ')
@@ -42,47 +69,143 @@ export function UserMenu({
       .map(part => part[0])
       .join('') || fallbackInitials
 
+  async function stopImpersonating() {
+    setIsStopping(true)
+    try {
+      await admin.stopImpersonating()
+      // Back to the admin panel: the restored session may have no access to the
+      // organization page the impersonated user was looking at.
+      router.push('/admin')
+      router.refresh()
+    } catch {
+      setIsStopping(false)
+    }
+  }
+
   return (
     <div className={wrapperClassName}>
       <ThemeToggle />
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button variant="ghost" className="relative size-8 rounded-full">
-            <Avatar className="size-8 cursor-pointer">
+          <Button
+            variant="ghost"
+            className="relative size-8 rounded-full"
+            aria-label={
+              isImpersonating
+                ? `Account menu, impersonating ${displayName}`
+                : 'Account menu'
+            }
+          >
+            <Avatar
+              className={cn(
+                'size-8',
+                isImpersonating &&
+                  'ring-warning ring-offset-background ring-2 ring-offset-2'
+              )}
+            >
               <AvatarFallback className="text-foreground">
                 {initials}
               </AvatarFallback>
-              {user.image ? <AvatarImage src={user.image} alt="User" /> : null}
+              {user.image ? (
+                <AvatarImage src={user.image} alt={displayName} />
+              ) : null}
             </Avatar>
+            {isImpersonating ? (
+              <span className="bg-warning text-warning-foreground ring-background absolute -right-0.5 -bottom-0.5 flex size-3.5 items-center justify-center rounded-full ring-2">
+                <UserX className="size-2.5" aria-hidden="true" />
+              </span>
+            ) : null}
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-56" align="end" forceMount>
+        <DropdownMenuContent className="w-60" align="end" forceMount>
           <DropdownMenuLabel className="font-normal">
             <div className="flex flex-col space-y-1">
               <p className="text-foreground text-sm leading-none font-medium">
-                {user.name ?? fallbackName}
+                {displayName}
               </p>
               <p className="text-muted-foreground text-xs leading-none">
                 {user.email ?? ''}
               </p>
             </div>
           </DropdownMenuLabel>
+
+          {isImpersonating ? (
+            <>
+              <DropdownMenuSeparator />
+              <div className="border-warning/40 bg-warning/10 mx-1 mb-1 flex items-start gap-2 rounded-md border px-2 py-1.5">
+                <UserX
+                  className="text-warning mt-0.5 size-3.5 shrink-0"
+                  aria-hidden="true"
+                />
+                <p className="text-foreground text-xs leading-snug">
+                  You are signed in as this user. Anything you do is recorded
+                  against their account.
+                </p>
+              </div>
+              <DropdownMenuGroup>
+                <DropdownMenuItem
+                  variant="destructive"
+                  disabled={isStopping}
+                  onSelect={event => {
+                    // Hold the menu open while the session swaps back.
+                    event.preventDefault()
+                    void stopImpersonating()
+                  }}
+                >
+                  <UserX className="mr-2 size-4" />
+                  <span>{isStopping ? 'Stopping…' : 'Stop Impersonating'}</span>
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+            </>
+          ) : null}
+
+          {isSuperAdmin ? (
+            <>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuItem asChild>
+                  <Link href={switchTo.href}>
+                    <switchTo.Icon className="mr-2 size-4" />
+                    <span>{switchTo.label}</span>
+                  </Link>
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+            </>
+          ) : null}
+
           <DropdownMenuSeparator />
-          <DropdownMenuItem asChild>
-            <Link href="/profile">
-              <UserCog className="mr-2 size-4" />
-              <span>Profile</span>
-            </Link>
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            onClick={async () => {
-              await signOut()
-              router.push('/login')
-            }}
-          >
-            <LogOut className="mr-2 size-4" />
-            <span>Log out</span>
-          </DropdownMenuItem>
+          <DropdownMenuGroup>
+            <DropdownMenuItem asChild>
+              <Link href="/">
+                <House className="mr-2 size-4" />
+                <span>Home</span>
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuItem asChild>
+              <Link href="/profile">
+                <UserCog className="mr-2 size-4" />
+                <span>Profile</span>
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuItem asChild>
+              <Link href="/support">
+                <Ticket className="mr-2 size-4" />
+                <span>Support</span>
+              </Link>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem
+              onClick={async () => {
+                await signOut()
+                router.push('/login')
+              }}
+            >
+              <LogOut className="mr-2 size-4" />
+              <span>Log Out</span>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
         </DropdownMenuContent>
       </DropdownMenu>
     </div>

package/template/saas-starter/src/db/common.ts

@@ -1,17 +1,32 @@
+/**
+ * @fileoverview Reusable Drizzle column definitions shared across tables.
+ *
+ * Centralises common patterns (prefixed CUID primary keys, timestamps) so
+ * every table stays consistent.
+ */
 import { createId } from '@paralleldrive/cuid2'
 import { sql } from 'drizzle-orm'
-import { boolean, timestamp, varchar } from 'drizzle-orm/pg-core'
+import {
+  boolean,
+  check,
+  timestamp,
+  varchar,
+  type AnyPgColumn
+} from 'drizzle-orm/pg-core'
 
 export const commonFieldDefs = {
+  /** Generates a prefixed CUID2 primary key, such as `user_clx1234567890`. */
   id: (prefix: string) =>
     varchar('id')
       .primaryKey()
       .$defaultFn(() => prefix + '_' + createId()),
+  /** Nullable timezone-aware timestamp column. */
   date: (name: string) =>
     timestamp(name, {
       mode: 'date',
       withTimezone: true
     }),
+  /** Auto-populated `created_at` and `updated_at` timestamp pair. */
   dates: {
     createdAt: timestamp('created_at', {
       mode: 'date',
@@ -27,5 +42,22 @@ export const commonFieldDefs = {
       .$onUpdate(() => sql`NOW()`)
       .defaultNow()
   },
+  /** Boolean `is_active` flag, defaults to `true`. */
   isActive: boolean('is_active').notNull().default(true)
 }
+
+/**
+ * CHECK constraint holding every listed column at zero or above.
+ *
+ * Invariants belong in the database, not only in Zod: the seed script, a
+ * `psql` session, and Drizzle Studio all write around Zod. Nullable columns
+ * still pass, since a CHECK rejects only a definitively false result.
+ */
+export const nonNegativeCheck = (name: string, columns: AnyPgColumn[]) =>
+  check(
+    name,
+    sql.join(
+      columns.map(column => sql`${column} >= 0`),
+      sql` AND `
+    )
+  )

package/template/saas-starter/src/db/enums.ts

@@ -1,10 +1,19 @@
+/**
+ * @fileoverview Postgres enum definitions. Each constant maps to a
+ * `CREATE TYPE ... AS ENUM` referenced by columns in `schema.ts`.
+ *
+ * @module db/enums
+ */
 import { pgEnum } from 'drizzle-orm/pg-core'
 
+// ─── Billing ────────────────────────────────────────────────────
+
 export const organizationSubscriptionPlanEnum = pgEnum(
   'organization_subscription_plan_enum',
   ['free', 'pro', 'ultimate']
 )
 
+/** Stripe's subscription statuses, plus `free` for organizations without one. */
 export const organizationSubscriptionStatusEnum = pgEnum(
   'organization_subscription_status_enum',
   [
@@ -24,3 +33,18 @@ export const organizationSubscriptionIntervalEnum = pgEnum(
   'organization_subscription_interval_enum',
   ['month', 'year']
 )
+
+// ─── Support ────────────────────────────────────────────────────
+
+export const supportTicketStatusEnum = pgEnum('support_ticket_status_enum', [
+  'open',
+  'in_progress',
+  'waiting_customer',
+  'resolved',
+  'closed'
+])
+
+export const supportTicketPriorityEnum = pgEnum(
+  'support_ticket_priority_enum',
+  ['low', 'medium', 'high', 'urgent']
+)

package/template/saas-starter/src/db/index.ts

@@ -1,3 +1,5 @@
+import 'server-only'
+
 import { drizzle } from 'drizzle-orm/postgres-js'
 import postgres from 'postgres'
 import { env } from '~/env'
@@ -12,14 +14,21 @@ const globalForDb = globalThis as unknown as {
 }
 
 // Prefer the cached client (dev) and fall back to creating a new one.
-// `max: 1` limits the pool size, and `prepare: false` disables prepared
-// statements for compatibility with environments where prepared statements
-// can be problematic.
+// `prepare: false` disables prepared statements, which transaction-mode
+// poolers such as PgBouncer and Neon's pooler reject.
 const client =
   globalForDb.client ??
   postgres(env.DATABASE_URL, {
-    max: 1,
-    prepare: false
+    prepare: false,
+    // For neon.tech postgres db, as its serverless
+    ...(env.DATABASE_URL.includes('neon.tech')
+      ? {
+          max: 5,
+          idle_timeout: 30, // seconds an idle connection is kept before closing
+          max_lifetime: 60 * 5, // recycle a connection after 5 minutes
+          connect_timeout: 60 // seconds to wait for a connection (Neon cold start)
+        }
+      : {})
   })
 
 // Only cache the client outside production to avoid unexpected cross-request

package/template/saas-starter/src/db/relations.ts

@@ -1,11 +1,14 @@
 import { relations } from 'drizzle-orm'
 import {
   accountsTable,
+  feedbacksTable,
   invitationsTable,
   membersTable,
-  organizationsTable,
   organizationSubscriptionsTable,
+  organizationsTable,
   sessionsTable,
+  supportTicketMessagesTable,
+  supportTicketsTable,
   usersTable
 } from './schema'
 
@@ -38,7 +41,9 @@ export const organizationRelations = relations(
       references: [organizationSubscriptionsTable.organizationId]
     }),
     members: many(membersTable),
-    invitations: many(invitationsTable)
+    invitations: many(invitationsTable),
+    supportTickets: many(supportTicketsTable),
+    feedbacks: many(feedbacksTable)
   })
 )
 
@@ -58,7 +63,7 @@ export const invitationRelations = relations(invitationsTable, ({ one }) => ({
     fields: [invitationsTable.organizationId],
     references: [organizationsTable.id]
   }),
-  user: one(usersTable, {
+  inviter: one(usersTable, {
     fields: [invitationsTable.inviterId],
     references: [usersTable.id]
   })
@@ -73,3 +78,35 @@ export const organizationSubscriptionRelations = relations(
     })
   })
 )
+
+export const supportTicketRelations = relations(
+  supportTicketsTable,
+  ({ one, many }) => ({
+    organization: one(organizationsTable, {
+      fields: [supportTicketsTable.organizationId],
+      references: [organizationsTable.id]
+    }),
+    user: one(usersTable, {
+      fields: [supportTicketsTable.userId],
+      references: [usersTable.id]
+    }),
+    messages: many(supportTicketMessagesTable)
+  })
+)
+
+export const supportTicketMessageRelations = relations(
+  supportTicketMessagesTable,
+  ({ one }) => ({
+    ticket: one(supportTicketsTable, {
+      fields: [supportTicketMessagesTable.ticketId],
+      references: [supportTicketsTable.id]
+    })
+  })
+)
+
+export const feedbackRelations = relations(feedbacksTable, ({ one }) => ({
+  organization: one(organizationsTable, {
+    fields: [feedbacksTable.organizationId],
+    references: [organizationsTable.id]
+  })
+}))