create-ej-app 26.0.0 → 28.0.0

package/template/saas-starter/src/components/support/support-tickets-table.tsx

@@ -0,0 +1,281 @@
+'use client'
+
+import { Eye, Plus, Ticket } from 'lucide-react'
+import Link from 'next/link'
+import {
+  parseAsInteger,
+  parseAsJson,
+  parseAsString,
+  useQueryStates
+} from 'nuqs'
+import {
+  getAdminSupportTicketsAction,
+  getMyAccountSupportTicketsAction,
+  getOrganizationSupportTicketsAction,
+  getSupportTicketOrganizationsAction
+} from '~/app/actions/support-tickets'
+import { DataTable, type DataTableColumnDef } from '~/components/data-table'
+import { SortOrderEnum } from '~/components/data-table/enum'
+import { DataTableFilter } from '~/components/data-table/types'
+import { PageHeading } from '~/components/page-heading'
+import { Button } from '~/components/ui/button'
+import { formatDate } from '~/lib/format-date'
+import { useSafeActionQuery } from '~/lib/safe-action-client'
+import { CreateSupportTicketDialog } from './create-support-ticket-dialog'
+import {
+  SupportPriorityBadge,
+  SupportStatusBadge,
+  supportPriorityOptions,
+  supportStatusOptions
+} from './support-ticket-shared'
+
+type SupportTicket = {
+  id: string
+  ticketNumber: string
+  subject: string
+  status: string
+  priority: string | null
+  createdAt: Date
+  resolvedAt: Date | null
+  userId: string | null
+  userName: string | null
+  userEmail: string | null
+  organizationId: string | null
+  organizationName: string | null
+}
+
+const baseFilters: DataTableFilter[] = [
+  {
+    id: 'status',
+    label: 'Status',
+    options: supportStatusOptions.map(option => ({
+      label: option.label,
+      value: option.value
+    }))
+  },
+  {
+    id: 'priority',
+    label: 'Priority',
+    options: supportPriorityOptions.map(option => ({
+      label: option.label,
+      value: option.value
+    }))
+  }
+]
+
+// Only the platform view spans organizations, so only it filters by one.
+const adminFilters: DataTableFilter[] = [
+  ...baseFilters,
+  {
+    id: 'organizationId',
+    label: 'Organization',
+    action: getSupportTicketOrganizationsAction,
+    queryKey: 'support-ticket-organizations'
+  }
+]
+
+type SupportTicketsTableProps =
+  | { mode: 'admin' | 'account'; basePath: string; organizationId?: undefined }
+  | { mode: 'app'; basePath: string; organizationId: string }
+
+const COPY = {
+  admin: {
+    title: 'Support Tickets',
+    description: 'View, respond to, and manage customer support conversations.',
+    searchPlaceholder: 'Search by ticket #, subject, user, or organization…'
+  },
+  app: {
+    title: 'Support Tickets',
+    description:
+      'Every ticket for this organization. Owners and admins can reply to all of them.',
+    searchPlaceholder: 'Search by ticket # or subject…'
+  },
+  account: {
+    title: 'Support',
+    description:
+      "Tickets about your account. To raise one about an organization, use that organization's support page.",
+    searchPlaceholder: 'Search by ticket # or subject…'
+  }
+} as const
+
+export function SupportTicketsTable({
+  mode,
+  basePath,
+  organizationId
+}: SupportTicketsTableProps) {
+  const [queryState, setQueryState] = useQueryStates({
+    page: parseAsInteger.withDefault(1),
+    limit: parseAsInteger.withDefault(10),
+    sortBy: parseAsString,
+    sortOrder: parseAsString,
+    search: parseAsString,
+    filters: parseAsJson(v => v as Record<string, (string | boolean)[]>)
+  })
+
+  const params = {
+    page: queryState.page,
+    limit: queryState.limit,
+    sortBy: (queryState.sortBy ?? undefined) as
+      | 'ticketNumber'
+      | 'subject'
+      | 'status'
+      | 'priority'
+      | 'createdAt'
+      | 'resolvedAt'
+      | undefined,
+    sortOrder: (queryState.sortOrder ?? undefined) as SortOrderEnum | undefined,
+    search: queryState.search ?? undefined,
+    filters: queryState.filters ?? undefined
+  }
+
+  const adminQuery = useSafeActionQuery(
+    'admin-support-tickets',
+    getAdminSupportTicketsAction,
+    params,
+    { enabled: mode === 'admin' }
+  )
+  const organizationQuery = useSafeActionQuery(
+    `support-tickets-${organizationId}`,
+    getOrganizationSupportTicketsAction,
+    { ...params, organizationId: organizationId! },
+    { enabled: mode === 'app' }
+  )
+  const accountQuery = useSafeActionQuery(
+    'account-support-tickets',
+    getMyAccountSupportTicketsAction,
+    params,
+    { enabled: mode === 'account' }
+  )
+  const { data, isLoading } =
+    mode === 'admin'
+      ? adminQuery
+      : mode === 'app'
+        ? organizationQuery
+        : accountQuery
+
+  const columns: DataTableColumnDef<SupportTicket>[] = [
+    {
+      accessorKey: 'ticketNumber',
+      header: 'Ticket #',
+      enableSorting: true,
+      cell: ({ row }) => (
+        <span className="font-mono text-sm">{row.original.ticketNumber}</span>
+      )
+    },
+    {
+      accessorKey: 'subject',
+      header: mode === 'account' ? 'Subject' : 'Subject & Raised by',
+      enableSorting: true,
+      cell: ({ row }) => (
+        <div className="flex flex-col">
+          <span className="line-clamp-1 text-sm font-medium">
+            {row.original.subject}
+          </span>
+          {mode === 'account' ? null : (
+            <span className="text-muted-foreground text-xs">
+              {row.original.userName ||
+                row.original.userEmail ||
+                'Removed user'}
+            </span>
+          )}
+        </div>
+      )
+    },
+    ...(mode === 'admin'
+      ? [
+          {
+            accessorKey: 'organizationName',
+            header: 'Organization',
+            enableSorting: false,
+            cell: ({ row }: { row: { original: SupportTicket } }) =>
+              row.original.organizationId ? (
+                <span className="line-clamp-1 text-sm">
+                  {row.original.organizationName || 'Unknown'}
+                </span>
+              ) : (
+                <span className="text-muted-foreground text-sm">Account</span>
+              )
+          } satisfies DataTableColumnDef<SupportTicket>
+        ]
+      : []),
+    {
+      accessorKey: 'status',
+      header: 'Status',
+      enableSorting: true,
+      cell: ({ row }) => <SupportStatusBadge status={row.original.status} />
+    },
+    {
+      accessorKey: 'priority',
+      header: 'Priority',
+      enableSorting: true,
+      cell: ({ row }) => (
+        <SupportPriorityBadge priority={row.original.priority} />
+      )
+    },
+    {
+      accessorKey: 'createdAt',
+      header: 'Created',
+      enableSorting: true,
+      cell: ({ row }) => formatDate(row.original.createdAt, { short: true })
+    },
+    {
+      id: 'actions',
+      cell: ({ row }) => (
+        <Button asChild variant="ghost" size="icon" className="h-8 w-8">
+          <Link href={`${basePath}/${row.original.id}`}>
+            <Eye className="h-4 w-4" />
+            <span className="sr-only">View ticket</span>
+          </Link>
+        </Button>
+      )
+    }
+  ]
+
+  return (
+    <div className="space-y-6">
+      <PageHeading
+        title={COPY[mode].title}
+        description={COPY[mode].description}
+        icon={Ticket}
+      >
+        {mode === 'admin' ? null : (
+          <CreateSupportTicketDialog
+            organizationId={organizationId}
+            redirectBasePath={basePath}
+          >
+            <Button size="sm">
+              <Plus className="mr-2 h-4 w-4" />
+              New Ticket
+            </Button>
+          </CreateSupportTicketDialog>
+        )}
+      </PageHeading>
+
+      <DataTable
+        columns={columns}
+        data={data?.[0]}
+        isLoading={isLoading}
+        totalCount={data?.[1]}
+        enableSearch
+        initialSearch={params.search}
+        searchPlaceholder={COPY[mode].searchPlaceholder}
+        manualPagination
+        manualSorting
+        pageIndex={params.page - 1}
+        pageSize={params.limit}
+        filters={mode === 'admin' ? adminFilters : baseFilters}
+        activeFilters={params.filters ?? {}}
+        onParamsChange={({ page, limit, sortBy, sortOrder, search, filters }) =>
+          setQueryState({
+            page,
+            limit,
+            sortBy: sortBy ?? null,
+            sortOrder: sortOrder ?? null,
+            search: search ?? null,
+            filters: filters ?? null
+          })
+        }
+      />
+    </div>
+  )
+}

package/template/saas-starter/src/components/theme-provider.tsx

@@ -1,8 +1,30 @@
+/**
+ * @fileoverview Theme provider for light/dark mode and theme hotkeys.
+ *
+ * Wraps the application with Next Themes provider and manages theme switching.
+ * Includes a hotkey component (D key) to toggle the theme.
+ *
+ * **Features:**
+ * - System-aware default theme preference
+ * - Light/dark/system theme options
+ * - Keyboard shortcut (D key) for theme toggle
+ * - No theme transitions on page load
+ *
+ * @module components/theme-provider
+ */
+
 'use client'
 
 import { ThemeProvider as NextThemesProvider, useTheme } from 'next-themes'
 import { FC, useEffect } from 'react'
 
+/**
+ * Determines if the target element is a text input field.
+ * Used to avoid triggering theme hotkey when typing in inputs.
+ *
+ * @param target - DOM event target to check
+ * @returns true if target is a contenteditable, input, textarea, or select element
+ */
 function isTypingTarget(target: EventTarget | null) {
   if (!(target instanceof HTMLElement)) {
     return false
@@ -16,10 +38,27 @@ function isTypingTarget(target: EventTarget | null) {
   )
 }
 
+/**
+ * Theme Hotkey Component
+ *
+ * Listens for the 'D' key and toggles between light and dark themes.
+ * Ignores hotkey when user is typing in an input field.
+ *
+ * **Behavior:**
+ * - Press 'D' anywhere to toggle light ↔ dark
+ * - No effect if typing in input, textarea, or contenteditable element
+ * - Requires modifier keys (Ctrl, Cmd, Alt) to NOT be pressed
+ *
+ * @returns {null} Does not render any elements
+ */
 function ThemeHotkey() {
   const { resolvedTheme, setTheme } = useTheme()
 
   useEffect(() => {
+    /**
+     * Handles keyboard down events for theme toggle.
+     * Checks conditions and prevents default if hotkey is triggered.
+     */
     function onKeyDown(event: KeyboardEvent) {
       if (event.defaultPrevented || event.repeat) {
         return
@@ -50,6 +89,15 @@ function ThemeHotkey() {
   return null
 }
 
+/**
+ * Theme Provider Component
+ *
+ * Wraps application with Next Themes provider and mounts theme hotkey.
+ *
+ * @param {Object} props - Component props
+ * @param {React.ReactNode} props.children - Child components to wrap
+ * @returns {JSX.Element} Provider wrapping children with theme support
+ */
 export const ThemeProvider: FC<{
   children: React.ReactNode
 }> = ({ children }) => {

package/template/saas-starter/src/components/theme-toggle.tsx

@@ -1,22 +1,75 @@
+/**
+ * @fileoverview Theme Toggle Button Component
+ *
+ * Cycles through light, dark, and system themes.
+ * Uses next-themes for theme state management.
+ *
+ * **Theme Cycle:**
+ * light → dark → system → light…
+ *
+ * **Icons:**
+ * - Sun: Light mode
+ * - Moon: Dark mode
+ * - Monitor: System preference
+ *
+ * **Hydration:**
+ * - Waits for client mount before rendering icons
+ * - Prevents hydration mismatch
+ *
+ * @module components/theme-toggle
+ */
+
 'use client'
 
-import { Moon, Sun } from 'lucide-react'
+import { Monitor, Moon, Sun } from 'lucide-react'
 import { useTheme } from 'next-themes'
-import { FC } from 'react'
+import { FC, useSyncExternalStore } from 'react'
 import { Button } from './ui/button'
 
+const emptySubscribe = () => () => {}
+
+/**
+ * Theme Toggle Button
+ *
+ * Ghost button that cycles through available themes.
+ * Shows appropriate icon for current theme state.
+ *
+ * **Behavior:**
+ * - Click cycles: light → dark → system → light
+ * - Shows nothing until mounted (prevents hydration issues)
+ *
+ * @returns {JSX.Element} Icon button for theme switching
+ */
 export const ThemeToggle: FC = () => {
   const { theme, setTheme } = useTheme()
+  // Client-only: server snapshot is false so SSR and the first client paint match.
+  const mounted = useSyncExternalStore(
+    emptySubscribe,
+    () => true,
+    () => false
+  )
+
+  const cycleTheme = () => {
+    const themes = ['light', 'dark', 'system']
+    const currentIndex = themes.indexOf(theme || 'system')
+    const nextIndex = (currentIndex + 1) % themes.length
+    setTheme(themes[nextIndex]!)
+  }
 
   return (
     <Button
       variant="ghost"
       size="icon"
+      onClick={cycleTheme}
       aria-label="Toggle theme"
-      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
     >
-      <Sun className="hidden h-5 w-5 dark:inline" />
-      <Moon className="inline h-5 w-5 dark:hidden" />
+      {!mounted ? null : (
+        <>
+          {theme === 'light' && <Sun className="size-4" />}
+          {theme === 'dark' && <Moon className="size-4" />}
+          {theme === 'system' && <Monitor className="size-4" />}
+        </>
+      )}
     </Button>
   )
 }

package/template/saas-starter/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,199 @@
+'use client'
+
+import { AlertDialog as AlertDialogPrimitive } from 'radix-ui'
+import * as React from 'react'
+
+import { Button } from '~/components/ui/button'
+import { cn } from '~/lib/cn'
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        'data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  size = 'default',
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+  size?: 'default' | 'sm'
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          'group/alert-dialog-content bg-popover text-popover-foreground ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl p-6 ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg',
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        'font-heading text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        'text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  variant = 'default',
+  size = 'default',
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
+  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Action
+        data-slot="alert-dialog-action"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  variant = 'outline',
+  size = 'default',
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
+  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Cancel
+        data-slot="alert-dialog-cancel"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger
+}

package/template/saas-starter/src/components/ui/badge.tsx

@@ -5,13 +5,18 @@ import * as React from 'react'
 import { cn } from '~/lib/cn'
 
 const badgeVariants = cva(
-  'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',
+  'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[background-color,border-color,color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',
   {
     variants: {
       variant: {
         default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
         secondary:
           'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
+        success:
+          'border-success/20 bg-success/10 text-success focus-visible:ring-success/20 [a]:hover:bg-success/20',
+        warning:
+          'border-warning/20 bg-warning/10 text-warning focus-visible:ring-warning/20 [a]:hover:bg-warning/20',
+        info: 'border-info/20 bg-info/10 text-info focus-visible:ring-info/20 [a]:hover:bg-info/20',
         destructive:
           'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
         outline:

package/template/saas-starter/src/components/ui/button.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { cva, type VariantProps } from 'class-variance-authority'
 import { Slot } from 'radix-ui'
 import * as React from 'react'

package/template/saas-starter/src/components/ui/command.tsx

@@ -32,7 +32,7 @@ function Command({
 
 function CommandDialog({
   title = 'Command Palette',
-  description = 'Search for a command to run...',
+  description = 'Search for a command to run…',
   children,
   className,
   showCloseButton = false,