create-ej-app 26.0.0 → 27.0.0

package/template/saas-starter/src/components/route-error.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { AlertTriangle } from 'lucide-react'
+import Link from 'next/link'
+import { Button } from '~/components/ui/button'
+
+/**
+ * Shared UI for App Router error boundaries (`error.tsx`, `global-error.tsx`).
+ * Keeps recovery actions and support reference copy consistent.
+ */
+export function RouteError({
+  error,
+  onRetry,
+  homeHref = '/',
+  homeLabel = 'Go Home'
+}: {
+  error: Error & { digest?: string }
+  onRetry: () => void
+  homeHref?: string
+  homeLabel?: string
+}) {
+  return (
+    <main className="bg-background text-foreground flex min-h-screen flex-col">
+      <section className="flex min-h-[60vh] flex-col items-center justify-center px-4 py-16">
+        <div className="max-w-md text-center">
+          <AlertTriangle
+            className="text-muted-foreground/50 mx-auto size-16"
+            aria-hidden
+          />
+          <h1 className="mt-4 text-2xl font-semibold tracking-tight">
+            This Page Failed to Load
+          </h1>
+          <p className="text-muted-foreground mt-3 text-base">
+            Refresh the page or go home and try again. If it keeps happening,
+            contact support
+            {error.digest ? ' with the reference below' : ''}.
+          </p>
+          {error.digest ? (
+            <p className="text-muted-foreground mt-4 font-mono text-xs break-all">
+              Reference: {error.digest}
+            </p>
+          ) : null}
+          <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
+            <Button type="button" onClick={onRetry}>
+              Try Again
+            </Button>
+            <Button type="button" variant="outline" asChild>
+              <Link href={homeHref}>{homeLabel}</Link>
+            </Button>
+          </div>
+        </div>
+      </section>
+    </main>
+  )
+}

package/template/saas-starter/src/components/screen-size.tsx

@@ -1,7 +1,43 @@
+/**
+ * @fileoverview Screen Size Indicator (Development Tool)
+ *
+ * Displays current viewport dimensions and Tailwind breakpoint.
+ * Useful during development for responsive design debugging.
+ *
+ * **Displayed Info:**
+ * - Viewport width x height in pixels
+ * - Current Tailwind breakpoint (XS, SM, MD, LG, XL, 2XL)
+ *
+ * **Positioning:**
+ * - Fixed to bottom-right corner
+ * - Always visible overlay
+ *
+ * Render this component conditionally.
+ * only in development environment.
+ *
+ * @module components/screen-size
+ */
+
 'use client'
 
 import { FC, useEffect, useState } from 'react'
 
+/**
+ * Screen Size Indicator Component
+ *
+ * Fixed position badge showing viewport dimensions and breakpoint.
+ * Updates on window resize.
+ *
+ * **Breakpoint Display:**
+ * - XS: < 640px (default, no sm: prefix)
+ * - SM: 640px - 767px
+ * - MD: 768px - 1023px
+ * - LG: 1024px - 1279px
+ * - XL: 1280px - 1535px
+ * - 2XL: ≥ 1536px
+ *
+ * @returns {JSX.Element} Fixed position size indicator
+ */
 export const ScreenSize: FC = () => {
   const [dimensions, setDimensions] = useState({ width: 0, height: 0 })
 

package/template/saas-starter/src/components/site-footer.tsx

@@ -1,13 +1,29 @@
+/**
+ * @fileoverview Site Footer Component
+ *
+ * Global footer displayed on all pages.
+ * Contains copyright notice and links to legal pages.
+ *
+ * @module components/site-footer
+ */
+
 import Link from 'next/link'
-import { siteConfig } from '~/lib/siteConfig'
 
-export const SiteFooter = () => {
+/**
+ * Site Footer Component
+ *
+ * Displays copyright and legal navigation links.
+ *
+ * @param {Object} props - Component props
+ * @param {string} props.name - Company name for copyright
+ * @returns {JSX.Element} Footer element with copyright and links
+ */
+export const SiteFooter = ({ name }: { name: string }) => {
   return (
     <footer className="border-t">
       <div className="text-muted-foreground container flex flex-col items-center justify-between gap-4 py-6 text-sm sm:flex-row">
         <p>
-          &copy; {new Date().getUTCFullYear()} {siteConfig.name}. All rights
-          reserved.
+          &copy; {new Date().getUTCFullYear()} {name}. All rights reserved.
         </p>
         <div className="flex gap-4">
           <Link href="/terms" className="hover:text-foreground">

package/template/saas-starter/src/components/support/create-support-ticket-dialog.tsx

@@ -0,0 +1,122 @@
+'use client'
+
+import { useAction } from 'next-safe-action/hooks'
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+import { createSupportTicketAction } from '~/app/actions/support-tickets'
+import { Button } from '~/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from '~/components/ui/dialog'
+import { Input } from '~/components/ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '~/components/ui/select'
+import { Textarea } from '~/components/ui/textarea'
+import { toastActionError, toastSuccessMessage } from '~/lib/toast-message'
+import {
+  supportPriorityOptions,
+  type SupportTicketPriority
+} from './support-ticket-shared'
+
+export function CreateSupportTicketDialog({
+  children,
+  organizationId,
+  redirectBasePath
+}: {
+  children: React.ReactNode
+  /** Omit to raise an account ticket rather than an organization one. */
+  organizationId?: string
+  redirectBasePath: string
+}) {
+  const router = useRouter()
+  const [open, setOpen] = useState(false)
+  const [subject, setSubject] = useState('')
+  const [priority, setPriority] = useState<SupportTicketPriority>('medium')
+  const [message, setMessage] = useState('')
+
+  const { execute, isExecuting } = useAction(createSupportTicketAction, {
+    onSuccess: ({ data }) => {
+      toastSuccessMessage('Support ticket created')
+      setOpen(false)
+      setSubject('')
+      setMessage('')
+      if (data?.id) {
+        router.push(`${redirectBasePath}/${data.id}`)
+      } else {
+        router.refresh()
+      }
+    },
+    onError: ({ error }) => {
+      toastActionError(error, 'The support ticket was not created. Try again.')
+    }
+  })
+
+  const handleSubmit = () => {
+    execute({
+      organizationId: organizationId ?? null,
+      subject,
+      priority,
+      message
+    })
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>New Support Ticket</DialogTitle>
+          <DialogDescription>
+            Describe the problem, including what you expected and what happened.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <Input
+            value={subject}
+            onChange={event => setSubject(event.target.value)}
+            placeholder="Subject"
+          />
+          <Select
+            value={priority}
+            onValueChange={value => setPriority(value as SupportTicketPriority)}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder="Priority" />
+            </SelectTrigger>
+            <SelectContent>
+              {supportPriorityOptions.map(option => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Textarea
+            value={message}
+            onChange={event => setMessage(event.target.value)}
+            placeholder="What can we help with?"
+            className="min-h-32"
+          />
+        </div>
+
+        <DialogFooter>
+          <Button onClick={handleSubmit} disabled={isExecuting}>
+            Create ticket
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/template/saas-starter/src/components/support/support-ticket-conversation.tsx

@@ -0,0 +1,236 @@
+'use client'
+
+import { ArrowLeft, Loader2, Send } from 'lucide-react'
+import Link from 'next/link'
+import { useState } from 'react'
+import {
+  addSupportTicketMessageAction,
+  getSupportTicketDetailsAction,
+  updateSupportTicketStatusAction
+} from '~/app/actions/support-tickets'
+import { Button } from '~/components/ui/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '~/components/ui/select'
+import { Textarea } from '~/components/ui/textarea'
+import { formatDate } from '~/lib/format-date'
+import {
+  useSafeActionMutation,
+  useSafeActionQuery
+} from '~/lib/safe-action-client'
+import { toastActionError, toastSuccessMessage } from '~/lib/toast-message'
+import {
+  SupportPriorityBadge,
+  SupportStatusBadge,
+  formatSupportLabel,
+  supportStatusOptions,
+  type SupportTicketStatus
+} from './support-ticket-shared'
+
+export function SupportTicketConversation({
+  ticketId,
+  backHref,
+  mode
+}: {
+  ticketId: string
+  backHref: string
+  /** `admin` answers as the support team and can change the status. */
+  mode: 'app' | 'admin'
+}) {
+  const [message, setMessage] = useState('')
+  const { data, isLoading, refetch } = useSafeActionQuery(
+    `support-ticket-${ticketId}`,
+    getSupportTicketDetailsAction,
+    { ticketId }
+  )
+
+  const addMessage = useSafeActionMutation(addSupportTicketMessageAction, {
+    onSuccess: () => {
+      setMessage('')
+      void refetch()
+      toastSuccessMessage('Message sent')
+    },
+    onError: error =>
+      toastActionError(error, 'Your message was not sent. Try again.')
+  })
+
+  const updateStatus = useSafeActionMutation(updateSupportTicketStatusAction, {
+    onSuccess: () => {
+      void refetch()
+      toastSuccessMessage('Ticket status updated')
+    },
+    onError: error =>
+      toastActionError(error, 'The status was not changed. Try again.')
+  })
+
+  if (isLoading) {
+    return (
+      <div className="flex h-[60vh] items-center justify-center">
+        <Loader2 className="text-primary h-8 w-8 animate-spin" />
+      </div>
+    )
+  }
+
+  if (!data) return null
+
+  const customerReplyDisabled =
+    mode === 'app' && ['closed', 'resolved'].includes(data.ticket.status)
+  const replyDisabled =
+    customerReplyDisabled || addMessage.isPending || !message.trim()
+
+  return (
+    <div className="space-y-5">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="space-y-3">
+          <Button asChild variant="ghost" size="sm" className="-ml-2">
+            <Link href={backHref}>
+              <ArrowLeft className="mr-2 h-4 w-4" />
+              Back
+            </Link>
+          </Button>
+          <div>
+            <div className="text-muted-foreground font-mono text-sm">
+              {data.ticket.ticketNumber}
+            </div>
+            <h1 className="text-2xl font-bold tracking-tight">
+              {data.ticket.subject}
+            </h1>
+            <div className="mt-2 flex flex-wrap items-center gap-2">
+              <SupportStatusBadge status={data.ticket.status} />
+              <SupportPriorityBadge priority={data.ticket.priority} />
+              <span className="text-muted-foreground text-sm">
+                Created {formatDate(data.ticket.createdAt, { short: true })}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {mode === 'admin' ? (
+          <div className="min-w-52">
+            <Select
+              value={data.ticket.status}
+              onValueChange={value =>
+                updateStatus.mutate({
+                  ticketId,
+                  status: value as SupportTicketStatus
+                })
+              }
+              disabled={updateStatus.isPending}
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Update status" />
+              </SelectTrigger>
+              <SelectContent>
+                {supportStatusOptions.map(option => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        ) : null}
+      </div>
+
+      <div className="grid gap-5 lg:grid-cols-[1fr_280px]">
+        <section className="border-border bg-card overflow-hidden rounded-lg border shadow-sm">
+          <div className="border-border bg-muted/30 border-b px-5 py-3">
+            <h2 className="font-semibold">Conversation</h2>
+          </div>
+          <div className="space-y-4 p-5">
+            {data.messages.map(item => {
+              const mine = mode === 'admin' ? item.isAdmin : !item.isAdmin
+              return (
+                <div
+                  key={item.id}
+                  className={`flex ${mine ? 'justify-end' : 'justify-start'}`}
+                >
+                  <div
+                    className={`max-w-[82%] rounded-lg border px-4 py-3 ${
+                      mine
+                        ? 'bg-primary text-primary-foreground border-primary'
+                        : 'bg-background'
+                    }`}
+                  >
+                    <div className="mb-1 text-xs opacity-75">
+                      {item.isAdmin
+                        ? 'Support Team'
+                        : item.userName || item.userEmail || 'Customer'}{' '}
+                      ·{' '}
+                      {formatDate(item.createdAt, { short: true, time: true })}
+                    </div>
+                    <p className="text-sm leading-relaxed whitespace-pre-wrap">
+                      {item.message}
+                    </p>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+          <div className="border-border bg-muted/20 space-y-3 border-t p-5">
+            <Textarea
+              value={message}
+              disabled={customerReplyDisabled || addMessage.isPending}
+              onChange={event => setMessage(event.target.value)}
+              placeholder={
+                customerReplyDisabled
+                  ? 'This ticket is resolved or closed. Open a new one to follow up.'
+                  : 'Write a reply…'
+              }
+              className="min-h-28"
+            />
+            <div className="flex justify-end">
+              <Button
+                disabled={replyDisabled}
+                onClick={() =>
+                  addMessage.mutate({
+                    ticketId,
+                    message,
+                    asSupport: mode === 'admin'
+                  })
+                }
+              >
+                <Send className="mr-2 h-4 w-4" />
+                Send message
+              </Button>
+            </div>
+          </div>
+        </section>
+
+        <aside className="border-border bg-card h-fit rounded-lg border p-5 shadow-sm">
+          <h2 className="font-semibold">Ticket Details</h2>
+          <dl className="mt-4 space-y-3 text-sm">
+            <div>
+              <dt className="text-muted-foreground">Status</dt>
+              <dd>{formatSupportLabel(data.ticket.status)}</dd>
+            </div>
+            <div>
+              <dt className="text-muted-foreground">Priority</dt>
+              <dd>{formatSupportLabel(data.ticket.priority)}</dd>
+            </div>
+            <div>
+              <dt className="text-muted-foreground">Organization</dt>
+              <dd>{data.ticket.organizationName || '-'}</dd>
+            </div>
+            <div>
+              <dt className="text-muted-foreground">Raised by</dt>
+              <dd>{data.ticket.userName || data.ticket.userEmail || '-'}</dd>
+            </div>
+            <div>
+              <dt className="text-muted-foreground">Resolved</dt>
+              <dd>
+                {data.ticket.resolvedAt
+                  ? formatDate(data.ticket.resolvedAt, { short: true })
+                  : '-'}
+              </dd>
+            </div>
+          </dl>
+        </aside>
+      </div>
+    </div>
+  )
+}

package/template/saas-starter/src/components/support/support-ticket-shared.tsx

@@ -0,0 +1,58 @@
+import { Badge } from '~/components/ui/badge'
+
+export const supportStatusOptions = [
+  { label: 'Open', value: 'open' },
+  { label: 'In Progress', value: 'in_progress' },
+  { label: 'Waiting on Customer', value: 'waiting_customer' },
+  { label: 'Resolved', value: 'resolved' },
+  { label: 'Closed', value: 'closed' }
+] as const
+
+export const supportPriorityOptions = [
+  { label: 'Low', value: 'low' },
+  { label: 'Medium', value: 'medium' },
+  { label: 'High', value: 'high' },
+  { label: 'Urgent', value: 'urgent' }
+] as const
+
+export type SupportTicketStatus = (typeof supportStatusOptions)[number]['value']
+export type SupportTicketPriority =
+  (typeof supportPriorityOptions)[number]['value']
+
+export function formatSupportLabel(value: string | null) {
+  if (!value) return '-'
+  return value.replaceAll('_', ' ').replace(/\b\w/g, char => char.toUpperCase())
+}
+
+export function SupportStatusBadge({ status }: { status: string }) {
+  const variantMap = {
+    open: 'info',
+    in_progress: 'info',
+    waiting_customer: 'warning',
+    resolved: 'success',
+    closed: 'secondary'
+  } as const
+
+  const variant = variantMap[status as keyof typeof variantMap] ?? 'secondary'
+
+  return <Badge variant={variant}>{formatSupportLabel(status)}</Badge>
+}
+
+export function SupportPriorityBadge({
+  priority
+}: {
+  priority: string | null
+}) {
+  if (!priority) return <span className="text-muted-foreground">-</span>
+
+  const variantMap = {
+    low: 'outline',
+    medium: 'secondary',
+    high: 'warning',
+    urgent: 'destructive'
+  } as const
+
+  const variant = variantMap[priority as keyof typeof variantMap] ?? 'secondary'
+
+  return <Badge variant={variant}>{formatSupportLabel(priority)}</Badge>
+}