create-ej-app 26.0.0 → 27.0.0

package/template/saas-starter/src/app/(app)/app/[orgId]/settings/layout.tsx

@@ -0,0 +1,24 @@
+import { notFound } from 'next/navigation'
+import { getOrganizationCached } from '~/app/(app)/actions/organizations'
+import { isManagerRole } from '~/lib/rbac'
+
+/**
+ * Settings are for owners and admins. Every action behind these pages checks
+ * the role again; this guard only keeps members off pages they cannot use.
+ */
+export default async function SettingsLayout({
+  children,
+  params
+}: {
+  children: React.ReactNode
+  params: Promise<{ orgId: string }>
+}) {
+  const { orgId } = await params
+  const org = (await getOrganizationCached(orgId))?.data
+
+  if (!org || !isManagerRole(org.role)) {
+    return notFound()
+  }
+
+  return <>{children}</>
+}

package/template/saas-starter/src/app/(app)/app/[orgId]/settings/members/_components/invite-member-dialog.tsx

@@ -30,13 +30,14 @@ import {
   SelectValue
 } from '~/components/ui/select'
 import { organization } from '~/lib/auth-client'
-import { toastErrorMessage, toastSuccessMessage } from '~/lib/toast-message'
+import { ASSIGNABLE_ROLES, ROLE_DESCRIPTIONS } from '~/lib/rbac'
+import { toastActionError, toastSuccessMessage } from '~/lib/toast-message'
 import { emailValidation } from '~/lib/validations'
 import { useOrganizationContext } from '../../../../_components/organization-context'
 
 const schema = z.object({
   email: emailValidation,
-  role: z.enum(['admin', 'member'])
+  role: z.enum(ASSIGNABLE_ROLES)
 })
 
 type Form = z.infer<typeof schema>
@@ -62,6 +63,7 @@ export function InviteMemberDialog({
     defaultValues: { email: '', role: 'member' }
   })
 
+  // Seed once per open; see "Client data and forms" in AGENTS.md.
   useEffect(() => {
     if (open) reset({ email: '', role: 'member' })
   }, [open, reset])
@@ -74,7 +76,7 @@ export function InviteMemberDialog({
     })
 
     if (error) {
-      toastErrorMessage(error.message ?? 'Failed to send invitation')
+      toastActionError(error, 'The invitation was not sent. Try again.')
       return
     }
 
@@ -88,10 +90,10 @@ export function InviteMemberDialog({
       <DialogTrigger asChild>{children}</DialogTrigger>
       <DialogContent className="sm:max-w-md">
         <DialogHeader>
-          <DialogTitle>Invite a teammate</DialogTitle>
+          <DialogTitle>Invite Member</DialogTitle>
           <DialogDescription>
-            Send an email invitation to join this organization. They&apos;ll
-            need to sign in with this email to accept.
+            We email an invitation link. They accept it by signing in with this
+            address.
           </DialogDescription>
         </DialogHeader>
 
@@ -129,12 +131,11 @@ export function InviteMemberDialog({
                       <SelectValue placeholder="Select role" />
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value="admin">
-                        Admin - manage members & settings
-                      </SelectItem>
-                      <SelectItem value="member">
-                        Member - standard access
-                      </SelectItem>
+                      {ASSIGNABLE_ROLES.map(role => (
+                        <SelectItem key={role} value={role}>
+                          {ROLE_DESCRIPTIONS[role]}
+                        </SelectItem>
+                      ))}
                     </SelectContent>
                   </Select>
                 )}
@@ -156,10 +157,8 @@ export function InviteMemberDialog({
               Cancel
             </Button>
             <Button type="submit" disabled={isSubmitting}>
-              {isSubmitting && (
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-              )}
-              Send invitation
+              {isSubmitting && <Loader2 className="animate-spin" />}
+              Send Invitation
             </Button>
           </DialogFooter>
         </form>

package/template/saas-starter/src/app/(app)/app/[orgId]/settings/members/_components/members-tabs.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import { useQueryClient } from '@tanstack/react-query'
-import { ColumnDef } from '@tanstack/react-table'
 import {
   MoreHorizontal,
   RefreshCcw,
@@ -17,7 +16,8 @@ import {
   useQueryStates
 } from 'nuqs'
 import { useState } from 'react'
-import { DataTable } from '~/components/data-table'
+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 { Avatar, AvatarFallback, AvatarImage } from '~/components/ui/avatar'
@@ -38,8 +38,9 @@ import {
 } from '~/components/ui/tooltip'
 import { organization } from '~/lib/auth-client'
 import { formatDate } from '~/lib/format-date'
+import { roleArticle, type AssignableRole } from '~/lib/rbac'
 import { useSafeActionQuery } from '~/lib/safe-action-client'
-import { toastErrorMessage, toastSuccessMessage } from '~/lib/toast-message'
+import { toastActionError, toastSuccessMessage } from '~/lib/toast-message'
 import { getInvitations, getMembers } from '../../../../../actions/members'
 import { useOrganizationContext } from '../../../../_components/organization-context'
 import { InviteMemberDialog } from './invite-member-dialog'
@@ -67,6 +68,10 @@ type Invitation = {
 const MEMBERS_QUERY_KEY = 'org-members'
 const INVITATIONS_QUERY_KEY = 'org-invitations'
 
+type PendingConfirm =
+  | { kind: 'remove'; member: Member }
+  | { kind: 'cancel'; invitation: Invitation }
+
 function roleVariant(role: string): 'default' | 'secondary' | 'outline' {
   if (role === 'owner') return 'default'
   if (role === 'admin') return 'secondary'
@@ -75,10 +80,11 @@ function roleVariant(role: string): 'default' | 'secondary' | 'outline' {
 
 function statusVariant(
   status: string
-): 'default' | 'secondary' | 'outline' | 'destructive' {
-  if (status === 'accepted') return 'default'
-  if (status === 'pending') return 'secondary'
-  return 'destructive'
+): 'success' | 'info' | 'secondary' | 'destructive' {
+  if (status === 'accepted') return 'success'
+  if (status === 'pending') return 'info'
+  if (status === 'rejected') return 'destructive'
+  return 'secondary'
 }
 
 function getInitials(name: string, email: string) {
@@ -129,6 +135,9 @@ export function MembersTabs({
   const router = useRouter()
   const queryClient = useQueryClient()
   const [busyId, setBusyId] = useState<string | null>(null)
+  const [pendingConfirm, setPendingConfirm] = useState<PendingConfirm | null>(
+    null
+  )
 
   const atMemberLimit = memberCount >= maxMembers
 
@@ -154,14 +163,9 @@ export function MembersTabs({
     page: memberQuery.mPage,
     limit: memberQuery.mLimit,
     sortBy: (memberQuery.mSortBy ?? undefined) as
-      | 'name'
-      | 'email'
-      | 'role'
-      | 'createdAt'
-      | undefined,
+      'name' | 'email' | 'role' | 'createdAt' | undefined,
     sortOrder: (memberQuery.mSortOrder ?? undefined) as
-      | SortOrderEnum
-      | undefined,
+      SortOrderEnum | undefined,
     search: memberQuery.mSearch ?? undefined,
     filters: memberQuery.mFilters ?? undefined
   }
@@ -172,7 +176,7 @@ export function MembersTabs({
     memberParams
   )
 
-  async function changeRole(member: Member, role: 'admin' | 'member') {
+  async function changeRole(member: Member, role: AssignableRole) {
     setBusyId(member.id)
     const { error } = await organization.updateMemberRole({
       organizationId: orgId,
@@ -181,15 +185,14 @@ export function MembersTabs({
     })
     setBusyId(null)
     if (error) {
-      toastErrorMessage(error.message ?? 'Failed to update role')
+      toastActionError(error, 'The role was not changed. Try again.')
       return
     }
-    toastSuccessMessage(`${member.name} is now ${role}`)
+    toastSuccessMessage(`${member.name} is now ${roleArticle(role)}`)
     invalidateMembers()
   }
 
   async function removeMember(member: Member) {
-    if (!confirm(`Remove ${member.name} from this organization?`)) return
     setBusyId(member.id)
     const { error } = await organization.removeMember({
       organizationId: orgId,
@@ -197,16 +200,17 @@ export function MembersTabs({
     })
     setBusyId(null)
     if (error) {
-      toastErrorMessage(error.message ?? 'Failed to remove member')
+      toastActionError(error, 'The member was not removed. Try again.')
       return
     }
+    setPendingConfirm(null)
     toastSuccessMessage(`${member.name} removed`)
     invalidateMembers()
     // Refresh the server component so the member-limit gate reflects the freed slot.
     router.refresh()
   }
 
-  const memberColumns: ColumnDef<Member, unknown>[] = [
+  const memberColumns: DataTableColumnDef<Member>[] = [
     {
       accessorKey: 'name',
       header: 'Member',
@@ -285,18 +289,18 @@ export function MembersTabs({
             <DropdownMenuContent align="end">
               {member.role !== 'admin' ? (
                 <DropdownMenuItem onClick={() => changeRole(member, 'admin')}>
-                  Make admin
+                  Make Admin
                 </DropdownMenuItem>
               ) : null}
               {member.role !== 'member' ? (
                 <DropdownMenuItem onClick={() => changeRole(member, 'member')}>
-                  Make member
+                  Make Member
                 </DropdownMenuItem>
               ) : null}
               <DropdownMenuSeparator />
               <DropdownMenuItem
                 variant="destructive"
-                onClick={() => removeMember(member)}
+                onClick={() => setPendingConfirm({ kind: 'remove', member })}
               >
                 <Trash2 className="mr-2 h-4 w-4" />
                 Remove
@@ -325,14 +329,9 @@ export function MembersTabs({
     page: inviteQuery.iPage,
     limit: inviteQuery.iLimit,
     sortBy: (inviteQuery.iSortBy ?? undefined) as
-      | 'email'
-      | 'status'
-      | 'createdAt'
-      | 'expiresAt'
-      | undefined,
+      'email' | 'status' | 'createdAt' | 'expiresAt' | undefined,
     sortOrder: (inviteQuery.iSortOrder ?? undefined) as
-      | SortOrderEnum
-      | undefined,
+      SortOrderEnum | undefined,
     search: inviteQuery.iSearch ?? undefined,
     filters: inviteQuery.iFilters ?? undefined
   }
@@ -353,7 +352,7 @@ export function MembersTabs({
     })
     setBusyId(null)
     if (error) {
-      toastErrorMessage(error.message ?? 'Failed to resend invitation')
+      toastActionError(error, 'The invitation was not resent. Try again.')
       return
     }
     toastSuccessMessage(`Invitation resent to ${invitation.email}`)
@@ -361,21 +360,21 @@ export function MembersTabs({
   }
 
   async function cancelInvitation(invitation: Invitation) {
-    if (!confirm(`Cancel the invitation for ${invitation.email}?`)) return
     setBusyId(invitation.id)
     const { error } = await organization.cancelInvitation({
       invitationId: invitation.id
     })
     setBusyId(null)
     if (error) {
-      toastErrorMessage(error.message ?? 'Failed to cancel invitation')
+      toastActionError(error, 'The invitation was not canceled. Try again.')
       return
     }
-    toastSuccessMessage('Invitation cancelled')
+    setPendingConfirm(null)
+    toastSuccessMessage('Invitation canceled')
     invalidateInvitations()
   }
 
-  const invitationColumns: ColumnDef<Invitation, unknown>[] = [
+  const invitationColumns: DataTableColumnDef<Invitation>[] = [
     {
       accessorKey: 'email',
       header: 'Email',
@@ -452,7 +451,9 @@ export function MembersTabs({
               <DropdownMenuSeparator />
               <DropdownMenuItem
                 variant="destructive"
-                onClick={() => cancelInvitation(invitation)}
+                onClick={() =>
+                  setPendingConfirm({ kind: 'cancel', invitation })
+                }
               >
                 <XCircle className="mr-2 h-4 w-4" />
                 Cancel
@@ -477,21 +478,21 @@ export function MembersTabs({
             <TooltipTrigger asChild>
               <span tabIndex={0}>
                 <Button size="sm" disabled>
-                  <UserPlus className="mr-2 size-4" />
-                  Invite member
+                  <UserPlus />
+                  Invite Member
                 </Button>
               </span>
             </TooltipTrigger>
             <TooltipContent>
-              Member limit reached ({memberCount}/{maxMembers}). Upgrade your
-              plan to invite more members.
+              Your plan allows {maxMembers} members and you have {memberCount}.
+              Upgrade your plan to invite more.
             </TooltipContent>
           </Tooltip>
         ) : (
           <InviteMemberDialog onInvited={invalidateInvitations}>
             <Button size="sm">
-              <UserPlus className="mr-2 size-4" />
-              Invite member
+              <UserPlus />
+              Invite Member
             </Button>
           </InviteMemberDialog>
         )}
@@ -505,7 +506,7 @@ export function MembersTabs({
           totalCount={memberData?.[1]}
           enableSearch
           initialSearch={memberParams.search}
-          searchPlaceholder="Search members..."
+          searchPlaceholder="Search members…"
           manualPagination
           manualSorting
           pageIndex={memberParams.page - 1}
@@ -540,7 +541,7 @@ export function MembersTabs({
           totalCount={inviteData?.[1]}
           enableSearch
           initialSearch={inviteParams.search}
-          searchPlaceholder="Search invitations..."
+          searchPlaceholder="Search invitations…"
           manualPagination
           manualSorting
           pageIndex={inviteParams.page - 1}
@@ -566,6 +567,38 @@ export function MembersTabs({
           }
         />
       </TabsContent>
+
+      <ConfirmDialog
+        open={pendingConfirm !== null}
+        onOpenChange={open => {
+          if (!open) setPendingConfirm(null)
+        }}
+        title={
+          pendingConfirm?.kind === 'remove'
+            ? 'Remove Member'
+            : 'Cancel Invitation'
+        }
+        description={
+          pendingConfirm?.kind === 'remove'
+            ? `${pendingConfirm.member.name} loses access to this organization.`
+            : pendingConfirm?.kind === 'cancel'
+              ? `The invitation link sent to ${pendingConfirm.invitation.email} stops working.`
+              : ''
+        }
+        confirmLabel={
+          pendingConfirm?.kind === 'remove'
+            ? 'Remove Member'
+            : 'Cancel Invitation'
+        }
+        pending={busyId !== null}
+        onConfirm={() => {
+          if (pendingConfirm?.kind === 'remove') {
+            void removeMember(pendingConfirm.member)
+          } else if (pendingConfirm?.kind === 'cancel') {
+            void cancelInvitation(pendingConfirm.invitation)
+          }
+        }}
+      />
     </Tabs>
   )
 }

package/template/saas-starter/src/app/(app)/app/[orgId]/settings/members/page.tsx

@@ -1,40 +1,33 @@
 import { Users } from 'lucide-react'
-import { redirect } from 'next/navigation'
+import { notFound } from 'next/navigation'
+import { getMemberUsage } from '~/app/(app)/actions/members'
 import { PageHeading } from '~/components/page-heading'
-import { canManageOrganization } from '~/lib/app-navigation'
-import {
-  getOrganizationMemberCount,
-  getUserMembershipCached
-} from '~/lib/organization-access'
-import { getOrganizationPlanCached } from '~/lib/organization-plan-limits'
 import { MembersTabs } from './_components/members-tabs'
 
-export default async function Page({
+export default async function MembersPage({
   params
 }: {
   params: Promise<{ orgId: string }>
 }) {
   const { orgId } = await params
+  const usage = (await getMemberUsage(orgId))?.data
 
-  const membership = await getUserMembershipCached(orgId)
-  if (!membership || !canManageOrganization(membership.role)) {
-    return redirect(`/app/${orgId}/dashboard`)
+  if (!usage) {
+    return notFound()
   }
 
-  const [memberCount, { plan }] = await Promise.all([
-    getOrganizationMemberCount(orgId),
-    getOrganizationPlanCached(orgId)
-  ])
-
   return (
     <div className="mx-auto w-full max-w-4xl space-y-6">
       <PageHeading
         title="Members"
-        description="Invite teammates, manage roles and review pending invitations."
+        description="Invite teammates, change roles, and review invitations."
         icon={Users}
       />
 
-      <MembersTabs memberCount={memberCount} maxMembers={plan.maxMembers} />
+      <MembersTabs
+        memberCount={usage.memberCount}
+        maxMembers={usage.maxMembers}
+      />
     </div>
   )
 }

package/template/saas-starter/src/app/(app)/app/[orgId]/settings/page.tsx

@@ -1,50 +1,36 @@
 import { Settings } from 'lucide-react'
-import { redirect } from 'next/navigation'
+import { notFound } from 'next/navigation'
+import {
+  getOrganizationCached,
+  getTransferTargets
+} from '~/app/(app)/actions/organizations'
 import { PageHeading } from '~/components/page-heading'
 import { Separator } from '~/components/ui/separator'
-import { canManageOrganization } from '~/lib/app-navigation'
-import {
-  getOrganizationMembers,
-  getUserMembershipCached,
-  getUserOrganizationsCached
-} from '~/lib/organization-access'
-import { resolveImageUrl } from '~/lib/storage'
 import { DangerZone } from './_components/danger-zone'
 import { GeneralSettingsForm } from './_components/general-settings-form'
 
-export default async function Page({
+export default async function GeneralSettingsPage({
   params
 }: {
   params: Promise<{ orgId: string }>
 }) {
   const { orgId } = await params
+  const org = (await getOrganizationCached(orgId))?.data
 
-  const membership = await getUserMembershipCached(orgId)
-  if (!membership || !canManageOrganization(membership.role)) {
-    return redirect(`/app/${orgId}/dashboard`)
-  }
-
-  const org = (await getUserOrganizationsCached()).find(o => o.id === orgId)
   if (!org) {
-    return redirect('/app')
+    return notFound()
   }
 
-  const members = await getOrganizationMembers(orgId)
-  const isOwner = membership.role === 'owner'
-  const transferTargets = members
-    .filter(m => m.id !== membership.id)
-    .map(m => ({
-      memberId: m.id,
-      name: m.user.name,
-      email: m.user.email,
-      role: m.role
-    }))
+  const isOwner = org.role === 'owner'
+  const transferTargets = isOwner
+    ? ((await getTransferTargets(orgId))?.data ?? [])
+    : []
 
   return (
     <div className="mx-auto w-full max-w-3xl space-y-8">
       <PageHeading
         title="General"
-        description="Manage your organization's profile and settings."
+        description="Change your organization's name, link, and logo."
         icon={Settings}
       />
 
@@ -52,8 +38,8 @@ export default async function Page({
         orgId={orgId}
         defaultName={org.name}
         defaultSlug={org.slug}
-        currentLogoUrl={resolveImageUrl(org.logo)}
         currentLogoKey={org.logo}
+        currentLogoUrl={org.logoUrl}
       />
 
       <Separator />

package/template/saas-starter/src/app/(app)/app/[orgId]/support-tickets/[ticketId]/page.tsx

@@ -0,0 +1,25 @@
+import { notFound } from 'next/navigation'
+import { getOrganizationCached } from '~/app/(app)/actions/organizations'
+import { SupportTicketConversation } from '~/components/support/support-ticket-conversation'
+import { isManagerRole } from '~/lib/rbac'
+
+export default async function OrganizationSupportTicketPage({
+  params
+}: {
+  params: Promise<{ orgId: string; ticketId: string }>
+}) {
+  const { orgId, ticketId } = await params
+  const org = (await getOrganizationCached(orgId))?.data
+
+  if (!org || !isManagerRole(org.role)) {
+    return notFound()
+  }
+
+  return (
+    <SupportTicketConversation
+      mode="app"
+      ticketId={ticketId}
+      backHref={`/app/${orgId}/support-tickets`}
+    />
+  )
+}

package/template/saas-starter/src/app/(app)/app/[orgId]/support-tickets/page.tsx

@@ -0,0 +1,25 @@
+import { notFound } from 'next/navigation'
+import { getOrganizationCached } from '~/app/(app)/actions/organizations'
+import { SupportTicketsTable } from '~/components/support/support-tickets-table'
+import { isManagerRole } from '~/lib/rbac'
+
+export default async function OrganizationSupportTicketsPage({
+  params
+}: {
+  params: Promise<{ orgId: string }>
+}) {
+  const { orgId } = await params
+  const org = (await getOrganizationCached(orgId))?.data
+
+  if (!org || !isManagerRole(org.role)) {
+    return notFound()
+  }
+
+  return (
+    <SupportTicketsTable
+      mode="app"
+      organizationId={orgId}
+      basePath={`/app/${orgId}/support-tickets`}
+    />
+  )
+}

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

@@ -1,29 +1,31 @@
 'use client'
 
-import { useParams } from 'next/navigation'
-import { FC } from 'react'
 import { DashboardHeader } from '~/components/dashboard-header'
-import type { UserOrganization } from '~/lib/app-navigation'
 import { AppSearch } from './app-search'
+import { FeedbackDialog } from './feedback-dialog'
 
-export const AppHeader: FC<{
+export function AppHeader({
+  user,
+  organizations,
+  isSuperAdmin,
+  isImpersonating
+}: {
   user: {
     name?: string | null
     email?: string | null
     image?: string | null
   }
-  organizations: UserOrganization[]
-}> = ({ user, organizations }) => {
-  const params = useParams()
-  const orgId = params?.orgId as string | undefined
-  const role = organizations.find(o => o.id === orgId)?.role
-
+  organizations: { id: string; role: string }[]
+  isSuperAdmin: boolean
+  isImpersonating: boolean
+}) {
   return (
     <DashboardHeader
       user={user}
-      search={
-        orgId && role ? <AppSearch orgId={orgId} role={role} /> : undefined
-      }
+      isSuperAdmin={isSuperAdmin}
+      isImpersonating={isImpersonating}
+      search={<AppSearch organizations={organizations} />}
+      actions={<FeedbackDialog />}
     />
   )
 }

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

@@ -1,17 +1,26 @@
 'use client'
 
-import { FC } from 'react'
+import { useParams } from 'next/navigation'
 import { NavigationSearch } from '~/components/navigation-search'
 import { getAppNavigation } from '~/lib/app-navigation'
 
-export const AppSearch: FC<{ orgId: string; role: string }> = ({
-  orgId,
-  role
-}) => {
+export function AppSearch({
+  organizations
+}: {
+  organizations: { id: string; role: string }[]
+}) {
+  const params = useParams()
+  const orgId = params?.orgId as string | undefined
+  const role = organizations.find(o => o.id === orgId)?.role
+
+  if (!orgId || !role) {
+    return null
+  }
+
   return (
     <NavigationSearch
       groups={getAppNavigation(orgId, role)}
-      dialogDescription="Search across this organization's pages and settings."
+      dialogDescription="Search this organization's pages and settings."
     />
   )
 }

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

@@ -2,13 +2,16 @@
 
 import { useParams } from 'next/navigation'
 import { NavigationSidebar } from '~/components/navigation-sidebar'
-import { getAppNavigation, type UserOrganization } from '~/lib/app-navigation'
-import { OrganizationSwitcher } from './organization-switcher'
+import { getAppNavigation } from '~/lib/app-navigation'
+import {
+  OrganizationSwitcher,
+  type SwitcherOrganization
+} from './organization-switcher'
 
 export function AppSidebar({
   organizations
 }: {
-  organizations: UserOrganization[]
+  organizations: (SwitcherOrganization & { role: string })[]
 }) {
   const params = useParams()
   const orgId = params?.orgId as string | undefined