create-ej-app 25.0.0 → 27.0.0

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

@@ -0,0 +1,40 @@
+import { ArrowLeft } from 'lucide-react'
+import Link from 'next/link'
+import { Button } from '~/components/ui/button'
+import { getOrganizationsCached } from '../../actions/organizations'
+import { CreateOrganizationForm } from './_components/create-organization-form'
+
+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 ? null : (
+          <Button
+            asChild
+            variant="ghost"
+            size="sm"
+            className="text-muted-foreground -ml-2 w-fit"
+          >
+            <Link href="/app">
+              <ArrowLeft />
+              Back to Organizations
+            </Link>
+          </Button>
+        )}
+        <h1 className="text-3xl font-bold tracking-tight">
+          {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 next.'
+            : 'Each organization has its own members, settings, and billing.'}
+        </p>
+      </div>
+
+      <CreateOrganizationForm />
+    </div>
+  )
+}

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

@@ -0,0 +1,76 @@
+import { Building2, Plus } from 'lucide-react'
+import Image from 'next/image'
+import Link from 'next/link'
+import { redirect } from 'next/navigation'
+import { Card, CardHeader, CardTitle } from '~/components/ui/card'
+import { siteConfig } from '~/lib/siteConfig'
+import { getOrganizationsCached } from '../actions/organizations'
+
+export default async function AppPage() {
+  const organizations = (await getOrganizationsCached())?.data ?? []
+
+  if (organizations.length === 0) {
+    return redirect('/app/onboarding')
+  }
+
+  return (
+    <div className="mx-auto flex w-full max-w-4xl flex-col gap-8 px-4 py-12">
+      <div className="flex flex-col gap-2">
+        <h1 className="text-4xl font-bold tracking-tight">
+          Welcome to {siteConfig.name}
+        </h1>
+        <p className="text-muted-foreground text-lg">
+          Choose an organization to open, or create a new one.
+        </p>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {organizations.map(org => (
+          <Link
+            key={org.id}
+            href={`/app/${org.id}/dashboard`}
+            className="group"
+          >
+            <Card className="hover:border-primary h-full cursor-pointer transition-all duration-200 hover:shadow-md">
+              <CardHeader className="flex flex-row items-center gap-4">
+                {org.logoUrl ? (
+                  <div className="relative size-10 shrink-0 overflow-hidden rounded-lg">
+                    <Image
+                      src={org.logoUrl}
+                      alt={org.name}
+                      fill
+                      sizes="40px"
+                      className="object-cover"
+                      unoptimized={org.logoUrl.startsWith('data:')}
+                    />
+                  </div>
+                ) : (
+                  <div className="bg-primary/10 text-primary group-hover:bg-primary group-hover:text-primary-foreground flex size-10 shrink-0 items-center justify-center rounded-lg transition-colors">
+                    <Building2 className="size-5" />
+                  </div>
+                )}
+                <div className="min-w-0 flex-1">
+                  <CardTitle className="truncate text-lg">{org.name}</CardTitle>
+                  <p className="text-muted-foreground truncate text-xs capitalize">
+                    {org.role}
+                  </p>
+                </div>
+              </CardHeader>
+            </Card>
+          </Link>
+        ))}
+
+        <Link href="/app/onboarding">
+          <Card className="hover:border-primary hover:bg-muted/50 flex h-full cursor-pointer flex-col items-center justify-center border-dashed py-8 transition-all">
+            <div className="bg-muted mb-2 flex size-10 items-center justify-center rounded-full">
+              <Plus className="size-5" />
+            </div>
+            <div className="text-muted-foreground font-semibold">
+              Create Organization
+            </div>
+          </Card>
+        </Link>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,64 @@
+import { ArrowLeft } from 'lucide-react'
+import type { Metadata } from 'next'
+import { headers } from 'next/headers'
+import Link from 'next/link'
+import { redirect } from 'next/navigation'
+import { NuqsAdapter } from 'nuqs/adapters/next/app'
+import { Logo } from '~/components/logo'
+import { SiteFooter } from '~/components/site-footer'
+import { Button } from '~/components/ui/button'
+import { UserMenu } from '~/components/user-menu'
+import { getAuthSession } from '~/lib/auth'
+import { sanitizeCallbackUrl } from '~/lib/callback-url'
+import { privatePageRobots } from '~/lib/seo'
+import { siteConfig } from '~/lib/siteConfig'
+
+export const metadata: Metadata = {
+  robots: privatePageRobots
+}
+
+export default async function AccountLayout({
+  children
+}: {
+  children: React.ReactNode
+}) {
+  const authSession = await getAuthSession()
+
+  if (!authSession) {
+    const headerStore = await headers()
+    const callbackUrl =
+      sanitizeCallbackUrl(headerStore.get('x-pathname') ?? undefined) ??
+      '/profile'
+    redirect(`/login?callbackUrl=${encodeURIComponent(callbackUrl)}`)
+  }
+
+  return (
+    <NuqsAdapter>
+      <div className="flex min-h-screen flex-col">
+        <header className="bg-background sticky top-0 z-50 flex h-14 shrink-0 items-center gap-2 border-b px-4">
+          <Link href="/" className="flex shrink-0 items-center">
+            <Logo size={32} priority className="text-lg" />
+          </Link>
+
+          <div className="flex flex-1 items-center justify-end gap-2">
+            <Button asChild variant="ghost" size="sm">
+              <Link href="/app">
+                <ArrowLeft className="size-4" />
+                Back to App
+              </Link>
+            </Button>
+            <UserMenu
+              user={authSession.user}
+              isSuperAdmin={authSession.isSuperAdmin}
+              isImpersonating={!!authSession.session.impersonatedBy}
+            />
+          </div>
+        </header>
+
+        <main className="flex-1">{children}</main>
+
+        <SiteFooter name={siteConfig.name} />
+      </div>
+    </NuqsAdapter>
+  )
+}

package/template/saas-starter/src/app/(auth)/(account)/profile/page.tsx

@@ -0,0 +1,16 @@
+import { UserCog } from 'lucide-react'
+import { PageHeading } from '~/components/page-heading'
+import { ProfileForm } from './profile-form'
+
+export default function ProfilePage() {
+  return (
+    <div className="mx-auto w-full max-w-3xl space-y-6 p-4 sm:p-6">
+      <PageHeading
+        title="Your Profile"
+        description="Update your name and review your account details."
+        icon={UserCog}
+      />
+      <ProfileForm />
+    </div>
+  )
+}

package/template/saas-starter/src/app/(auth)/(account)/profile/profile-form.tsx

@@ -0,0 +1,247 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Mail, ShieldCheck } from 'lucide-react'
+import Link from 'next/link'
+import { Controller, useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { Avatar, AvatarFallback, AvatarImage } from '~/components/ui/avatar'
+import { Badge } from '~/components/ui/badge'
+import { Button } from '~/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from '~/components/ui/card'
+import { Field, FieldError, FieldLabel } from '~/components/ui/field'
+import { Input } from '~/components/ui/input'
+import { Skeleton } from '~/components/ui/skeleton'
+import { updateUser, useSession } from '~/lib/auth-client'
+import {
+  toastActionError,
+  toastErrorMessage,
+  toastSuccessMessage
+} from '~/lib/toast-message'
+import { stringValidation } from '~/lib/validations'
+
+const profileFormSchema = z.object({
+  name: stringValidation
+})
+
+type ProfileFormValues = z.infer<typeof profileFormSchema>
+
+export function ProfileForm() {
+  const { data: session, isPending, refetch } = useSession()
+
+  if (isPending) {
+    return <ProfileFormSkeleton />
+  }
+
+  if (!session?.user) {
+    return (
+      <Card>
+        <CardContent className="py-8 text-center">
+          <p className="text-muted-foreground text-sm">
+            You are not signed in.
+          </p>
+          <Button asChild className="mt-4">
+            <Link href="/login?callbackUrl=/profile">Sign In</Link>
+          </Button>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  return <ProfileFormInner user={session.user} onUpdated={refetch} />
+}
+
+function ProfileFormInner({
+  user,
+  onUpdated
+}: {
+  user: {
+    name: string
+    email: string
+    image?: string | null
+    emailVerified?: boolean
+    role?: string | null
+  }
+  onUpdated: () => Promise<void>
+}) {
+  const form = useForm<ProfileFormValues>({
+    resolver: zodResolver(profileFormSchema),
+    defaultValues: {
+      name: user.name ?? ''
+    }
+  })
+
+  const isSubmitting = form.formState.isSubmitting
+  const isDirty = form.formState.isDirty
+
+  const initials =
+    user.name
+      ?.split(' ')
+      .slice(0, 2)
+      .map(part => part[0])
+      .join('')
+      .toUpperCase() || 'NA'
+
+  async function onSubmit(values: ProfileFormValues) {
+    if (values.name.trim() === user.name) return
+
+    try {
+      const res = await updateUser({ name: values.name.trim() })
+      if (res?.error) throw res.error
+      await onUpdated()
+      form.reset({ name: values.name.trim() })
+      toastSuccessMessage('Profile updated')
+    } catch (err) {
+      console.error('Failed to update profile:', err)
+      if (
+        typeof err === 'object' &&
+        err &&
+        'message' in err &&
+        typeof err.message === 'string'
+      )
+        toastActionError(err)
+      else toastErrorMessage('Your profile was not saved. Try again.')
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Account</CardTitle>
+          <CardDescription>
+            Details from your account. Only your name can change here.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="flex items-center gap-4">
+            <Avatar className="size-16">
+              <AvatarFallback className="text-foreground text-lg">
+                {initials}
+              </AvatarFallback>
+              {user.image ? (
+                <AvatarImage src={user.image} alt={user.name} />
+              ) : null}
+            </Avatar>
+            <div className="space-y-1">
+              <p className="text-base font-medium">{user.name}</p>
+              <div className="flex flex-wrap items-center gap-2">
+                {user.emailVerified ? (
+                  <Badge variant="success" className="gap-1">
+                    <ShieldCheck className="size-3" />
+                    Email verified
+                  </Badge>
+                ) : null}
+                {user.role ? (
+                  <Badge variant="outline" className="capitalize">
+                    {user.role}
+                  </Badge>
+                ) : null}
+              </div>
+            </div>
+          </div>
+
+          <DetailRow icon={Mail} label="Email" value={user.email} />
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Edit Profile</CardTitle>
+          <CardDescription>Update your display name.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+            <Controller
+              control={form.control}
+              name="name"
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor={field.name}>Name</FieldLabel>
+                  <Input
+                    id={field.name}
+                    placeholder="Your full name"
+                    autoComplete="name"
+                    aria-invalid={fieldState.invalid}
+                    {...field}
+                  />
+                  <FieldError
+                    errors={fieldState.error ? [fieldState.error] : undefined}
+                  />
+                </Field>
+              )}
+            />
+
+            <div className="flex justify-end">
+              <Button type="submit" disabled={isSubmitting || !isDirty}>
+                {isSubmitting ? 'Saving…' : 'Save'}
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+function DetailRow({
+  icon: Icon,
+  label,
+  value
+}: {
+  icon: React.FC<{ className?: string }>
+  label: string
+  value: string
+}) {
+  return (
+    <div className="flex items-start gap-3 rounded-lg border p-3">
+      <div className="bg-primary/10 text-primary flex h-9 w-9 shrink-0 items-center justify-center rounded-md">
+        <Icon className="size-4" />
+      </div>
+      <div className="min-w-0 space-y-0.5">
+        <p className="text-muted-foreground text-xs tracking-wide uppercase">
+          {label}
+        </p>
+        <p className="text-sm wrap-break-word">{value}</p>
+      </div>
+    </div>
+  )
+}
+
+function ProfileFormSkeleton() {
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-5 w-32" />
+          <Skeleton className="mt-2 h-4 w-64" />
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="flex items-center gap-4">
+            <Skeleton className="size-16 rounded-full" />
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-40" />
+              <Skeleton className="h-4 w-24" />
+            </div>
+          </div>
+          <Skeleton className="h-16 w-full" />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-5 w-32" />
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <Skeleton className="h-10 w-full" />
+          <Skeleton className="h-10 w-32 self-end" />
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

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

@@ -0,0 +1,19 @@
+import { SupportTicketConversation } from '~/components/support/support-ticket-conversation'
+
+export default async function AccountSupportTicketPage({
+  params
+}: {
+  params: Promise<{ ticketId: string }>
+}) {
+  const { ticketId } = await params
+
+  return (
+    <div className="mx-auto w-full max-w-5xl p-4 sm:p-6">
+      <SupportTicketConversation
+        mode="app"
+        ticketId={ticketId}
+        backHref="/support"
+      />
+    </div>
+  )
+}

package/template/saas-starter/src/app/(auth)/(account)/support/page.tsx

@@ -0,0 +1,9 @@
+import { SupportTicketsTable } from '~/components/support/support-tickets-table'
+
+export default function AccountSupportPage() {
+  return (
+    <div className="mx-auto w-full max-w-5xl p-4 sm:p-6">
+      <SupportTicketsTable mode="account" basePath="/support" />
+    </div>
+  )
+}

package/template/saas-starter/src/app/(auth)/login/email-login-form.tsx

@@ -0,0 +1,131 @@
+/**
+ * Email-based login form with magic link
+ *
+ * Sends a passwordless authentication link to the user's email.
+ * Shows success message after link is sent.
+ */
+
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Mail } from 'lucide-react'
+import { useState } from 'react'
+import { Controller, useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { Button } from '~/components/ui/button'
+import { Field, FieldError, FieldLabel } from '~/components/ui/field'
+import { Input } from '~/components/ui/input'
+import { signIn } from '~/lib/auth-client'
+import {
+  toastActionError,
+  toastErrorMessage,
+  toastSuccessMessage
+} from '~/lib/toast-message'
+import { emailValidation } from '~/lib/validations'
+
+/**
+ * Email login form schema
+ * Validates email format
+ */
+const emailLoginFormSchema = z.object({
+  email: emailValidation
+})
+
+/**
+ * Email Login Form Component
+ *
+ * Allows users to sign in via magic link sent to their email.
+ * Shows confirmation message after sending the link.
+ *
+ * **States:**
+ * - Form: Ready for email input
+ * - Submitted: Shows confirmation after sending link
+ *
+ * @returns {JSX.Element} Email input form or confirmation message
+ */
+export const EmailLoginForm = ({
+  callbackUrl
+}: {
+  callbackUrl?: string | null
+}) => {
+  const form = useForm<z.infer<typeof emailLoginFormSchema>>({
+    resolver: zodResolver(emailLoginFormSchema),
+    defaultValues: {
+      email: ''
+    }
+  })
+
+  const [isLoading, setIsLoading] = useState(false)
+  const [isSent, setIsSent] = useState('')
+
+  async function onSubmit(values: z.infer<typeof emailLoginFormSchema>) {
+    const email = values.email
+
+    if (!email) return
+
+    setIsLoading(true)
+    try {
+      const res = await signIn.magicLink({
+        email,
+        name: '',
+        callbackURL: callbackUrl || '/login'
+      })
+      if (res?.error) throw res.error
+      setIsSent(email)
+      toastSuccessMessage('Magic link sent. Check your email.')
+    } catch (err) {
+      console.error('Error sending magic link:', err)
+      if (
+        typeof err === 'object' &&
+        err &&
+        'message' in err &&
+        typeof err.message === 'string'
+      )
+        toastActionError(err)
+      else toastErrorMessage('The magic link was not sent. Try again.')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  if (isSent) {
+    return (
+      <div className="rounded-lg border p-4 text-center">
+        <Mail className="text-primary mx-auto mb-2 size-6" />
+        <h3 className="mb-1 text-sm font-medium">Check Your Email</h3>
+        <p className="text-muted-foreground text-xs">
+          We&apos;ve sent a magic link to <strong>{isSent}</strong>
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+      <Controller
+        control={form.control}
+        name="email"
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <FieldLabel htmlFor={field.name}>Email</FieldLabel>
+            <Input
+              id={field.name}
+              placeholder="name@example.com"
+              autoCapitalize="off"
+              autoComplete="email"
+              autoFocus
+              aria-invalid={fieldState.invalid}
+              {...field}
+            />
+            <FieldError
+              errors={fieldState.error ? [fieldState.error] : undefined}
+            />
+          </Field>
+        )}
+      />
+      <Button type="submit" className="w-full" disabled={isLoading}>
+        {isLoading ? 'Sending…' : 'Send Magic Link'}
+      </Button>
+    </form>
+  )
+}