create-ej-app 26.0.0 → 27.0.0

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

@@ -7,16 +7,11 @@ type OrganizationContextType = {
   name: string
   role: string
   memberId: string
-  userId: string
 }
 
-const OrganizationContext = createContext<OrganizationContextType>({
-  id: '',
-  name: '',
-  role: 'member',
-  memberId: '',
-  userId: ''
-})
+// 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,
@@ -28,12 +23,13 @@ export const OrganizationContextProvider = ({
   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 a OrganizationContextProvider'
+      'useOrganizationContext must be used within an OrganizationContextProvider'
     )
   }
 

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

@@ -1,9 +1,10 @@
 'use client'
 
-import { Building2, ChevronsUpDown, PlusCircle } from 'lucide-react'
+import { Building2, ChevronsUpDown, LogOut, PlusCircle } from 'lucide-react'
 import Image from 'next/image'
 import { useParams, useRouter } from 'next/navigation'
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
+import { ConfirmDialog } from '~/components/confirm-dialog'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -17,7 +18,15 @@ import {
   SidebarMenuButton,
   SidebarMenuItem
 } from '~/components/ui/sidebar'
-import type { UserOrganization } from '~/lib/app-navigation'
+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,
@@ -61,7 +70,7 @@ function OrganizationLogo({
 export function OrganizationSwitcher({
   organizations
 }: {
-  organizations: UserOrganization[]
+  organizations: SwitcherOrganization[]
 }) {
   const router = useRouter()
   const params = useParams()
@@ -72,6 +81,31 @@ export function OrganizationSwitcher({
     [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>
@@ -82,13 +116,13 @@ export function OrganizationSwitcher({
               className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
             >
               <OrganizationLogo
-                logo={activeOrg?.logo ?? null}
+                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'}
+                  {activeOrg?.name ?? 'Select Organization'}
                 </span>
                 {activeOrg ? (
                   <span className="text-muted-foreground truncate text-xs capitalize">
@@ -115,7 +149,11 @@ export function OrganizationSwitcher({
                 className="gap-2 p-2"
               >
                 <div className="flex size-6 items-center justify-center overflow-hidden rounded-sm border">
-                  <OrganizationLogo logo={org.logo} name={org.name} size="sm" />
+                  <OrganizationLogo
+                    logo={org.logoUrl}
+                    name={org.name}
+                    size="sm"
+                  />
                 </div>
                 <span className="truncate">{org.name}</span>
               </DropdownMenuItem>
@@ -129,12 +167,34 @@ export function OrganizationSwitcher({
                 <PlusCircle className="size-4" />
               </div>
               <div className="text-muted-foreground font-medium">
-                Create organization
+                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

@@ -1,52 +1,64 @@
-import { cookies } from 'next/headers'
+import type { Metadata } from 'next'
+import { cookies, headers } from 'next/headers'
 import { redirect } from 'next/navigation'
-import { NuqsAdapter } from 'nuqs/adapters/react'
-import { ImpersonationBanner } from '~/components/impersonation-banner'
+import { NuqsAdapter } from 'nuqs/adapters/next/app'
+import { ErrorDisplay } from '~/components/error'
 import { SidebarInset, SidebarProvider } from '~/components/ui/sidebar'
-import { TooltipProvider } from '~/components/ui/tooltip'
 import { getAuthSession } from '~/lib/auth'
-import { getUserOrganizationsCached } from '~/lib/organization-access'
+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 default async function Layout({
+export const metadata: Metadata = {
+  robots: privatePageRobots
+}
+
+export default async function AppLayout({
   children
-}: Readonly<{
+}: {
   children: React.ReactNode
-}>) {
+}) {
   const authSession = await getAuthSession()
 
   if (!authSession) {
-    return redirect('/login')
+    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'
 
-  const organizations = await getUserOrganizationsCached()
-
   return (
-    <TooltipProvider>
-      <NuqsAdapter>
-        <SidebarProvider defaultOpen={defaultOpen}>
-          <AppSidebar organizations={organizations} />
-          <SidebarInset>
-            {authSession.session.impersonatedBy ? (
-              <ImpersonationBanner />
-            ) : null}
-            <AppHeader
-              user={{
-                name: authSession.user.name,
-                email: authSession.user.email,
-                image: authSession.user.image
-              }}
-              organizations={organizations}
-            />
-            <div className="flex flex-1 flex-col gap-4 p-4">{children}</div>
-          </SidebarInset>
-        </SidebarProvider>
-      </NuqsAdapter>
-    </TooltipProvider>
+    <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

@@ -2,126 +2,114 @@
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Loader2 } from 'lucide-react'
+import { useRouter } from 'next/navigation'
 import { useState } from 'react'
-import { useForm } from 'react-hook-form'
+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,
-  FieldContent,
   FieldDescription,
   FieldError,
-  FieldTitle
+  FieldLabel
 } from '~/components/ui/field'
 import { Input } from '~/components/ui/input'
 import { organization } from '~/lib/auth-client'
-import { toastErrorMessage, toastSuccessMessage } from '~/lib/toast-message'
-import { stringValidation } from '~/lib/validations'
+import { toastActionError, toastSuccessMessage } from '~/lib/toast-message'
+import { slugifyName } from '~/lib/validations'
 
-const slugify = (value: string) =>
-  value
-    .toLowerCase()
-    .trim()
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '')
-
-const schema = z.object({
-  name: stringValidation,
-  slug: z
-    .string()
-    .trim()
-    .min(1, 'Slug is required')
-    .max(255)
-    .regex(
-      /^[a-z0-9]+(?:-[a-z0-9]+)*$/,
-      'Use lowercase letters, numbers and hyphens only'
-    )
-})
-
-type Form = z.infer<typeof schema>
+type Form = z.infer<typeof organizationDetailsSchema>
 
 export function CreateOrganizationForm() {
-  const [submitting, setSubmitting] = useState(false)
+  const router = useRouter()
+  const [slugEdited, setSlugEdited] = useState(false)
 
-  const {
-    register,
-    handleSubmit,
-    setValue,
-    formState: { errors }
-  } = useForm<Form>({
-    resolver: zodResolver(schema),
+  const form = useForm<Form>({
+    resolver: zodResolver(organizationDetailsSchema),
     defaultValues: { name: '', slug: '' }
   })
 
-  const [slugEdited, setSlugEdited] = useState(false)
-
   async function onSubmit(values: Form) {
-    setSubmitting(true)
-
-    const { data, error } = await organization.create({
-      name: values.name,
-      slug: values.slug
-    })
+    const { data, error } = await organization.create(values)
 
     if (error || !data) {
-      toastErrorMessage(error?.message ?? 'Failed to create organization')
-      setSubmitting(false)
+      toastActionError(error, 'The organization was not created. Try again.')
       return
     }
 
     toastSuccessMessage(`${data.name} created`)
-    window.location.assign(`/app/${data.id}/dashboard`)
+    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={handleSubmit(onSubmit)} className="flex flex-col gap-6">
-      <Field orientation="vertical">
-        <FieldContent>
-          <FieldTitle className="text-foreground mb-1.5 text-[13px] font-semibold">
-            Organization name
-          </FieldTitle>
-          <Input
-            autoFocus
-            placeholder="Acme Inc."
-            {...register('name', {
-              onChange: e => {
+    <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) {
-                  setValue('slug', slugify(e.target.value), {
-                    shouldValidate: true
+                  form.setValue('slug', slugifyName(event.target.value), {
+                    shouldValidate: form.formState.isSubmitted
                   })
                 }
-              }
-            })}
-            aria-invalid={!!errors.name}
-          />
-          <FieldError errors={[errors.name]} className="mt-1.5 text-[13px]" />
-        </FieldContent>
-      </Field>
+              }}
+            />
+            <FieldError
+              errors={fieldState.error ? [fieldState.error] : undefined}
+            />
+          </Field>
+        )}
+      />
 
-      <Field orientation="vertical">
-        <FieldContent>
-          <FieldTitle className="text-foreground mb-1.5 text-[13px] font-semibold">
-            Slug
-          </FieldTitle>
-          <Input
-            placeholder="acme-inc"
-            {...register('slug', {
-              onChange: () => setSlugEdited(true)
-            })}
-            aria-invalid={!!errors.slug}
-          />
-          <FieldDescription className="mt-1.5 text-[13px]">
-            A unique identifier used in links. Lowercase letters, numbers and
-            hyphens.
-          </FieldDescription>
-          <FieldError errors={[errors.slug]} className="mt-1.5 text-[13px]" />
-        </FieldContent>
-      </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={submitting}>
-          {submitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-          Create organization
+        <Button type="submit" disabled={isSubmitting}>
+          {isSubmitting && <Loader2 className="animate-spin" />}
+          Create Organization
         </Button>
       </div>
     </form>

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

@@ -1,17 +1,17 @@
 import { ArrowLeft } from 'lucide-react'
 import Link from 'next/link'
 import { Button } from '~/components/ui/button'
-import { getUserOrganizationsCached } from '~/lib/organization-access'
+import { getOrganizationsCached } from '../../actions/organizations'
 import { CreateOrganizationForm } from './_components/create-organization-form'
 
-export default async function Page() {
-  const organizations = await getUserOrganizationsCached()
+export default async function OnboardingPage() {
+  const organizations = (await getOrganizationsCached())?.data ?? []
   const isFirstOrg = organizations.length === 0
 
   return (
     <div className="mx-auto flex w-full max-w-xl flex-col gap-8 px-2 py-8">
       <div className="flex flex-col gap-2">
-        {!isFirstOrg ? (
+        {isFirstOrg ? null : (
           <Button
             asChild
             variant="ghost"
@@ -19,20 +19,18 @@ export default async function Page() {
             className="text-muted-foreground -ml-2 w-fit"
           >
             <Link href="/app">
-              <ArrowLeft className="mr-2 size-4" />
-              Back to organizations
+              <ArrowLeft />
+              Back to Organizations
             </Link>
           </Button>
-        ) : null}
+        )}
         <h1 className="text-3xl font-bold tracking-tight">
-          {isFirstOrg
-            ? 'Create your organization'
-            : 'Create a new organization'}
+          {isFirstOrg ? 'Create Your Organization' : 'Create an Organization'}
         </h1>
         <p className="text-muted-foreground">
           {isFirstOrg
-            ? 'Set up an organization to get started. You can invite teammates afterwards.'
-            : 'Spin up another workspace. You can switch between organizations at any time.'}
+            ? 'Set up an organization to get started. You can invite teammates next.'
+            : 'Each organization has its own members, settings, and billing.'}
         </p>
       </div>