create-ej-app 25.0.0 → 27.0.0

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

@@ -0,0 +1,31 @@
+'use client'
+
+import { DashboardHeader } from '~/components/dashboard-header'
+import { AppSearch } from './app-search'
+import { FeedbackDialog } from './feedback-dialog'
+
+export function AppHeader({
+  user,
+  organizations,
+  isSuperAdmin,
+  isImpersonating
+}: {
+  user: {
+    name?: string | null
+    email?: string | null
+    image?: string | null
+  }
+  organizations: { id: string; role: string }[]
+  isSuperAdmin: boolean
+  isImpersonating: boolean
+}) {
+  return (
+    <DashboardHeader
+      user={user}
+      isSuperAdmin={isSuperAdmin}
+      isImpersonating={isImpersonating}
+      search={<AppSearch organizations={organizations} />}
+      actions={<FeedbackDialog />}
+    />
+  )
+}

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

@@ -0,0 +1,26 @@
+'use client'
+
+import { useParams } from 'next/navigation'
+import { NavigationSearch } from '~/components/navigation-search'
+import { getAppNavigation } from '~/lib/app-navigation'
+
+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 this organization's pages and settings."
+    />
+  )
+}

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

@@ -0,0 +1,30 @@
+'use client'
+
+import { useParams } from 'next/navigation'
+import { NavigationSidebar } from '~/components/navigation-sidebar'
+import { getAppNavigation } from '~/lib/app-navigation'
+import {
+  OrganizationSwitcher,
+  type SwitcherOrganization
+} from './organization-switcher'
+
+export function AppSidebar({
+  organizations
+}: {
+  organizations: (SwitcherOrganization & { 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 (
+    <NavigationSidebar
+      groups={getAppNavigation(orgId, role)}
+      header={<OrganizationSwitcher organizations={organizations} />}
+    />
+  )
+}

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

@@ -0,0 +1,108 @@
+'use client'
+
+import { MessageCircle, Star } from 'lucide-react'
+import { useAction } from 'next-safe-action/hooks'
+import { useParams } from 'next/navigation'
+import { useState } from 'react'
+import { Button } from '~/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from '~/components/ui/dialog'
+import { Textarea } from '~/components/ui/textarea'
+import { toastActionError, toastSuccessMessage } from '~/lib/toast-message'
+import { createFeedbackAction } from '../../actions/feedbacks'
+
+export function FeedbackDialog() {
+  const params = useParams()
+  const organizationId =
+    typeof params?.orgId === 'string' ? params.orgId : undefined
+  const [open, setOpen] = useState(false)
+  const [rating, setRating] = useState(5)
+  const [comment, setComment] = useState('')
+
+  const { execute, isExecuting } = useAction(createFeedbackAction, {
+    onSuccess: () => {
+      toastSuccessMessage('Thanks for the feedback')
+      setOpen(false)
+      setRating(5)
+      setComment('')
+    },
+    onError: ({ error }) => {
+      toastActionError(error, 'Your feedback was not sent. Try again.')
+    }
+  })
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className={organizationId ? 'inline-flex' : 'hidden'}
+          aria-label="Share feedback"
+        >
+          <MessageCircle className="size-4" aria-hidden="true" />
+          <span className="hidden sm:inline">Feedback</span>
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Share Feedback</DialogTitle>
+          <DialogDescription>
+            Tell us what works well and what should improve.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="flex gap-1">
+            {Array.from({ length: 5 }, (_, index) => {
+              const value = index + 1
+              return (
+                <Button
+                  key={value}
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => setRating(value)}
+                  aria-label={`${value} star rating`}
+                >
+                  <Star
+                    className={`h-5 w-5 ${
+                      value <= rating
+                        ? 'fill-warning text-warning'
+                        : 'text-muted-foreground'
+                    }`}
+                  />
+                </Button>
+              )
+            })}
+          </div>
+
+          <Textarea
+            value={comment}
+            onChange={event => setComment(event.target.value)}
+            placeholder="Write your feedback…"
+            className="min-h-32"
+          />
+        </div>
+
+        <DialogFooter>
+          <Button
+            onClick={() =>
+              organizationId && execute({ organizationId, rating, comment })
+            }
+            disabled={isExecuting || !comment.trim()}
+          >
+            Submit Feedback
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,37 @@
+'use client'
+
+import { createContext, useContext } from 'react'
+
+type OrganizationContextType = {
+  id: string
+  name: string
+  role: string
+  memberId: string
+}
+
+// No default: a component rendered outside the provider is a bug, and the
+// hook throws rather than passing off an empty organization as real.
+const OrganizationContext = createContext<OrganizationContextType | null>(null)
+
+export const OrganizationContextProvider = ({
+  children,
+  value
+}: {
+  children: React.ReactNode
+  value: OrganizationContextType
+}) => {
+  return <OrganizationContext value={value}>{children}</OrganizationContext>
+}
+
+/** The organization in the current `/app/[orgId]` route. */
+export const useOrganizationContext = () => {
+  const context = useContext(OrganizationContext)
+
+  if (!context) {
+    throw new Error(
+      'useOrganizationContext must be used within an OrganizationContextProvider'
+    )
+  }
+
+  return context
+}

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

@@ -0,0 +1,200 @@
+'use client'
+
+import { Building2, ChevronsUpDown, LogOut, PlusCircle } from 'lucide-react'
+import Image from 'next/image'
+import { useParams, useRouter } from 'next/navigation'
+import { useMemo, useState } from 'react'
+import { ConfirmDialog } from '~/components/confirm-dialog'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '~/components/ui/dropdown-menu'
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem
+} from '~/components/ui/sidebar'
+import { organization } from '~/lib/auth-client'
+import { toastActionError, toastSuccessMessage } from '~/lib/toast-message'
+
+export type SwitcherOrganization = {
+  id: string
+  name: string
+  role: string
+  logoUrl: string | null
+}
+
+function OrganizationLogo({
+  logo,
+  name,
+  size
+}: {
+  logo: string | null
+  name: string
+  size: 'sm' | 'lg'
+}) {
+  if (logo) {
+    return (
+      <div
+        className={
+          size === 'lg'
+            ? 'relative aspect-square size-8 shrink-0 overflow-hidden rounded-lg'
+            : 'relative size-full overflow-hidden rounded-sm'
+        }
+      >
+        <Image
+          src={logo}
+          alt={name}
+          fill
+          sizes={size === 'lg' ? '32px' : '24px'}
+          className="object-cover"
+          unoptimized={logo.startsWith('data:')}
+        />
+      </div>
+    )
+  }
+
+  return size === 'lg' ? (
+    <div className="bg-primary text-primary-foreground flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg">
+      <Building2 className="size-4" />
+    </div>
+  ) : (
+    <Building2 className="size-4 shrink-0" />
+  )
+}
+
+export function OrganizationSwitcher({
+  organizations
+}: {
+  organizations: SwitcherOrganization[]
+}) {
+  const router = useRouter()
+  const params = useParams()
+  const activeOrgId = params?.orgId as string | undefined
+
+  const activeOrg = useMemo(
+    () => organizations.find(o => o.id === activeOrgId) ?? organizations[0],
+    [organizations, activeOrgId]
+  )
+
+  // Managers leave from Settings; members cannot open Settings, so they get
+  // the option here.
+  const canLeaveHere = activeOrgId !== undefined && activeOrg?.role === 'member'
+  const [confirmLeave, setConfirmLeave] = useState(false)
+  const [isLeaving, setIsLeaving] = useState(false)
+
+  async function leaveOrganization() {
+    if (!activeOrg) return
+    setIsLeaving(true)
+    const { error } = await organization.leave({
+      organizationId: activeOrg.id
+    })
+    setIsLeaving(false)
+
+    if (error) {
+      toastActionError(error, 'You are still a member. Try again.')
+      return
+    }
+
+    setConfirmLeave(false)
+    toastSuccessMessage(`You left ${activeOrg.name}`)
+    router.push('/app')
+    router.refresh()
+  }
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <OrganizationLogo
+                logo={activeOrg?.logoUrl ?? null}
+                name={activeOrg?.name ?? ''}
+                size="lg"
+              />
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-medium">
+                  {activeOrg?.name ?? 'Select Organization'}
+                </span>
+                {activeOrg ? (
+                  <span className="text-muted-foreground truncate text-xs capitalize">
+                    {activeOrg.role}
+                  </span>
+                ) : null}
+              </div>
+              <ChevronsUpDown className="ml-auto size-4 shrink-0" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            align="start"
+            side="bottom"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-muted-foreground text-xs">
+              Organizations
+            </DropdownMenuLabel>
+            {organizations.map(org => (
+              <DropdownMenuItem
+                key={org.id}
+                onClick={() => router.push(`/app/${org.id}/dashboard`)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center overflow-hidden rounded-sm border">
+                  <OrganizationLogo
+                    logo={org.logoUrl}
+                    name={org.name}
+                    size="sm"
+                  />
+                </div>
+                <span className="truncate">{org.name}</span>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              className="gap-2 p-2"
+              onClick={() => router.push('/app/onboarding')}
+            >
+              <div className="bg-background text-muted-foreground flex size-6 items-center justify-center rounded-md border">
+                <PlusCircle className="size-4" />
+              </div>
+              <div className="text-muted-foreground font-medium">
+                Create Organization
+              </div>
+            </DropdownMenuItem>
+            {canLeaveHere ? (
+              <DropdownMenuItem
+                variant="destructive"
+                className="gap-2 p-2"
+                onClick={() => setConfirmLeave(true)}
+              >
+                <div className="flex size-6 items-center justify-center rounded-md border">
+                  <LogOut className="size-4" />
+                </div>
+                <div className="font-medium">Leave Organization</div>
+              </DropdownMenuItem>
+            ) : null}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+
+      <ConfirmDialog
+        open={confirmLeave}
+        onOpenChange={setConfirmLeave}
+        title="Leave Organization"
+        description={`You lose access to ${activeOrg?.name ?? 'this organization'}. An owner or admin must invite you to return.`}
+        confirmLabel="Leave Organization"
+        pending={isLeaving}
+        onConfirm={leaveOrganization}
+      />
+    </SidebarMenu>
+  )
+}

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

@@ -0,0 +1,64 @@
+import type { Metadata } from 'next'
+import { cookies, headers } from 'next/headers'
+import { redirect } from 'next/navigation'
+import { NuqsAdapter } from 'nuqs/adapters/next/app'
+import { ErrorDisplay } from '~/components/error'
+import { SidebarInset, SidebarProvider } from '~/components/ui/sidebar'
+import { getAuthSession } from '~/lib/auth'
+import { sanitizeCallbackUrl } from '~/lib/callback-url'
+import { privatePageRobots } from '~/lib/seo'
+import { getOrganizationsCached } from '../actions/organizations'
+import { AppHeader } from './_components/app-header'
+import { AppSidebar } from './_components/app-sidebar'
+
+export const metadata: Metadata = {
+  robots: privatePageRobots
+}
+
+export default async function AppLayout({
+  children
+}: {
+  children: React.ReactNode
+}) {
+  const authSession = await getAuthSession()
+
+  if (!authSession) {
+    const headerStore = await headers()
+    const callbackUrl =
+      sanitizeCallbackUrl(headerStore.get('x-pathname') ?? undefined) ?? '/app'
+    redirect(`/login?callbackUrl=${encodeURIComponent(callbackUrl)}`)
+  }
+
+  const organizations = await getOrganizationsCached()
+
+  if (!organizations?.data) {
+    return (
+      <ErrorDisplay
+        title="Organizations Failed to Load"
+        message="Refresh the page to try again."
+        link={{ href: '/app', text: 'Retry' }}
+      />
+    )
+  }
+
+  const cookieStore = await cookies()
+  const sidebarStateCookie = cookieStore.get('sidebar_state')?.value
+  const defaultOpen = sidebarStateCookie !== 'false'
+
+  return (
+    <NuqsAdapter>
+      <SidebarProvider defaultOpen={defaultOpen}>
+        <AppSidebar organizations={organizations.data} />
+        <SidebarInset>
+          <AppHeader
+            user={authSession.user}
+            organizations={organizations.data}
+            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/saas-starter/src/app/(app)/app/onboarding/_components/create-organization-form.tsx

@@ -0,0 +1,117 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Loader2 } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+import { Controller, useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { organizationDetailsSchema } from '~/app/(app)/actions/organizations.validation'
+import { Button } from '~/components/ui/button'
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel
+} from '~/components/ui/field'
+import { Input } from '~/components/ui/input'
+import { organization } from '~/lib/auth-client'
+import { toastActionError, toastSuccessMessage } from '~/lib/toast-message'
+import { slugifyName } from '~/lib/validations'
+
+type Form = z.infer<typeof organizationDetailsSchema>
+
+export function CreateOrganizationForm() {
+  const router = useRouter()
+  const [slugEdited, setSlugEdited] = useState(false)
+
+  const form = useForm<Form>({
+    resolver: zodResolver(organizationDetailsSchema),
+    defaultValues: { name: '', slug: '' }
+  })
+
+  async function onSubmit(values: Form) {
+    const { data, error } = await organization.create(values)
+
+    if (error || !data) {
+      toastActionError(error, 'The organization was not created. Try again.')
+      return
+    }
+
+    toastSuccessMessage(`${data.name} created`)
+    router.push(`/app/${data.id}/dashboard`)
+    // Re-render the app layout so the sidebar lists the new organization.
+    router.refresh()
+  }
+
+  const isSubmitting = form.formState.isSubmitting
+
+  return (
+    <form
+      onSubmit={form.handleSubmit(onSubmit)}
+      className="flex flex-col gap-6"
+    >
+      <Controller
+        control={form.control}
+        name="name"
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <FieldLabel htmlFor={field.name}>Organization name</FieldLabel>
+            <Input
+              id={field.name}
+              autoFocus
+              placeholder="Acme Inc."
+              aria-invalid={fieldState.invalid}
+              {...field}
+              onChange={event => {
+                field.onChange(event)
+                if (!slugEdited) {
+                  form.setValue('slug', slugifyName(event.target.value), {
+                    shouldValidate: form.formState.isSubmitted
+                  })
+                }
+              }}
+            />
+            <FieldError
+              errors={fieldState.error ? [fieldState.error] : undefined}
+            />
+          </Field>
+        )}
+      />
+
+      <Controller
+        control={form.control}
+        name="slug"
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <FieldLabel htmlFor={field.name}>Slug</FieldLabel>
+            <Input
+              id={field.name}
+              placeholder="acme-inc"
+              aria-invalid={fieldState.invalid}
+              {...field}
+              onChange={event => {
+                setSlugEdited(true)
+                field.onChange(event)
+              }}
+            />
+            <FieldDescription>
+              Identifies the organization in links. Use lowercase letters,
+              numbers, and hyphens.
+            </FieldDescription>
+            <FieldError
+              errors={fieldState.error ? [fieldState.error] : undefined}
+            />
+          </Field>
+        )}
+      />
+
+      <div>
+        <Button type="submit" disabled={isSubmitting}>
+          {isSubmitting && <Loader2 className="animate-spin" />}
+          Create Organization
+        </Button>
+      </div>
+    </form>
+  )
+}