create-ej-app 25.0.0 → 26.0.0

package/template/saas-starter/src/components/data-table/types.ts

@@ -0,0 +1,75 @@
+import { ColumnDef, SortingState } from '@tanstack/react-table'
+import { SortOrderEnum } from './enum'
+
+/** A single selectable option inside a filter dropdown. */
+interface DataTableFilterOption {
+  label: string
+  value: string | boolean
+  /** Optional icon rendered next to the option label. */
+  icon?: React.ComponentType<{ className?: string }>
+}
+
+/**
+ * Describes a filter that appears in the DataTable toolbar.
+ * Filters can either be static (pre-defined `options`) or async
+ * (fetched via a server `action` on search).
+ */
+export interface DataTableFilter {
+  /** Unique key used to store the filter's selected values. */
+  id: string
+  /** Human-readable label shown in the filter dropdown trigger. */
+  label: string
+  /** Pre-defined options for static filters. Omit for async filters. */
+  options?: DataTableFilterOption[]
+  /** Server action called to fetch options dynamically (async filters). */
+  action?: any
+  /** Custom React-Query key for async filter caching. Defaults to `id`. */
+  queryKey?: string
+}
+
+/**
+ * Props accepted by the generic `DataTable` component.
+ *
+ * Supports both client-side and server-side (manual) pagination & sorting.
+ * When `manualPagination` / `manualSorting` are enabled the parent is
+ * responsible for fetching data and passing results back via `data` & `totalCount`.
+ */
+export interface DataTableProps<TData, TValue> {
+  /** Column definitions (TanStack Table). */
+  columns: ColumnDef<TData, TValue>[]
+  /** Row data to display. */
+  data?: TData[]
+  /** Show skeleton loading rows while data is being fetched. */
+  isLoading?: boolean
+  /** Render the search input in the toolbar. */
+  enableSearch?: boolean
+  /** Placeholder text for the search input. */
+  searchPlaceholder?: string
+  /** Initial value for the search input (e.g. restored from URL query params). */
+  initialSearch?: string
+  /** Total row count for server-side pagination info. */
+  totalCount?: number
+  /** Callback fired when pagination, sorting, search or filters change. */
+  onParamsChange?: (params: {
+    page: number
+    limit: number
+    sortBy?: string
+    sortOrder?: SortOrderEnum
+    search?: string
+    filters?: Record<string, (string | boolean)[]>
+  }) => void
+  /** Enable server-side pagination (parent controls data fetching). */
+  manualPagination?: boolean
+  /** Enable server-side sorting (parent controls data fetching). */
+  manualSorting?: boolean
+  /** Current 0-based page index (controlled). */
+  pageIndex?: number
+  /** Number of rows per page (controlled). */
+  pageSize?: number
+  /** Default sorting state applied on mount. */
+  initialSorting?: SortingState
+  /** Filter definitions rendered in the toolbar filter dropdown. */
+  filters?: DataTableFilter[]
+  /** Currently active filter selections keyed by filter id. */
+  activeFilters?: Record<string, (string | boolean)[]>
+}

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

@@ -0,0 +1,26 @@
+import { type LucideIcon, AlertTriangle } from 'lucide-react'
+import Link from 'next/link'
+import { FC } from 'react'
+import { Button } from '~/components/ui/button'
+
+export const ErrorDisplay: FC<{
+  title: string
+  message: string
+  icon?: LucideIcon
+  link?: {
+    href?: string
+    text?: string
+  }
+}> = ({ title, message, icon, link }) => {
+  const Icon = icon || AlertTriangle
+  return (
+    <div className="flex w-full flex-col items-center justify-center py-16">
+      <Icon className="text-muted-foreground/50 size-16" />
+      <h2 className="mt-4 text-xl font-semibold">{title}</h2>
+      <p className="text-muted-foreground mt-2">{message}</p>
+      <Button className="mt-4" asChild>
+        <Link href={link?.href || '/'}>{link?.text || 'Go Home'}</Link>
+      </Button>
+    </div>
+  )
+}

package/template/saas-starter/src/components/file-upload.tsx

@@ -0,0 +1,215 @@
+'use client'
+
+import { File, FileText, Loader2, Music, Upload, Video, X } from 'lucide-react'
+import Image from 'next/image'
+import { useRef, useState } from 'react'
+import { toast } from 'sonner'
+import { generateUploadUrlAction } from '~/actions/uploads'
+import { Button } from '~/components/ui/button'
+import { cn } from '~/lib/cn'
+import { MAX_FILE_SIZE_BYTES, MAX_FILE_SIZE_MB } from '~/lib/constants'
+
+type PreviewState =
+  | { kind: 'image'; url: string }
+  | { kind: 'file'; name: string; mimeType: string }
+  | null
+
+function getInitialPreview(currentUrl?: string | null): PreviewState {
+  if (!currentUrl) return null
+  return { kind: 'image', url: currentUrl }
+}
+
+function FileTypeIcon({ mimeType }: { mimeType: string }) {
+  if (mimeType.startsWith('video/'))
+    return <Video className="text-muted-foreground h-8 w-8" />
+  if (mimeType.startsWith('audio/'))
+    return <Music className="text-muted-foreground h-8 w-8" />
+  if (mimeType === 'application/pdf' || mimeType.includes('text'))
+    return <FileText className="text-muted-foreground h-8 w-8" />
+  return <File className="text-muted-foreground h-8 w-8" />
+}
+
+type Props = {
+  /** MIME type filter passed to the file input, e.g. `"image/*"` or `"image/*,application/pdf"`. */
+  accept: string
+  /** Scopes the upload to a organization for cleanup tracking. */
+  organizationId: string
+  /**
+   * Called with the R2 object key (prod) or base64 data URL (dev mode) once
+   * the upload finishes. Called with `null` when the user clears the value.
+   */
+  onClientUploadFinish: (key: string | null) => void
+  /**
+   * Pre-resolved URL for the current value - pass the output of
+   * `resolveImageUrl` from the parent server component so the preview renders
+   * correctly for existing R2 keys.
+   */
+  currentUrl?: string | null
+  className?: string
+  /** Passed to next/image `sizes` - should match the rendered widget width. */
+  sizes?: string
+}
+
+export function FileUpload({
+  accept,
+  organizationId,
+  onClientUploadFinish,
+  currentUrl,
+  className,
+  sizes = '128px'
+}: Props) {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [preview, setPreview] = useState<PreviewState>(
+    getInitialPreview(currentUrl)
+  )
+  const [isUploading, setIsUploading] = useState(false)
+
+  const handleFile = async (file: File) => {
+    if (file.size > MAX_FILE_SIZE_BYTES) {
+      toast.error(`File must be under ${MAX_FILE_SIZE_MB}MB`)
+      return
+    }
+
+    setIsUploading(true)
+
+    if (file.type.startsWith('image/')) {
+      setPreview({ kind: 'image', url: URL.createObjectURL(file) })
+    } else {
+      setPreview({ kind: 'file', name: file.name, mimeType: file.type })
+    }
+
+    const result = await generateUploadUrlAction({
+      filename: file.name,
+      mimeType: file.type,
+      size: file.size,
+      organizationId
+    })
+
+    if (!result?.data) {
+      toast.error('Failed to prepare upload. Please try again.')
+      setPreview(getInitialPreview(currentUrl))
+      setIsUploading(false)
+      return
+    }
+
+    const { data } = result
+
+    if (data.mode === 'r2') {
+      try {
+        const res = await fetch(data.uploadUrl, {
+          method: 'PUT',
+          body: file,
+          headers: { 'Content-Type': file.type }
+        })
+        if (!res.ok) throw new Error(`R2 upload failed: ${res.status}`)
+        onClientUploadFinish(data.key)
+      } catch {
+        toast.error('Upload failed. Please try again.')
+        setPreview(getInitialPreview(currentUrl))
+      }
+    } else {
+      const reader = new FileReader()
+      reader.onload = e => {
+        const base64 = e.target?.result as string
+        if (file.type.startsWith('image/')) {
+          setPreview({ kind: 'image', url: base64 })
+        }
+        onClientUploadFinish(base64)
+      }
+      reader.onerror = () => {
+        toast.error('Failed to read file. Please try again.')
+        setPreview(getInitialPreview(currentUrl))
+      }
+      reader.readAsDataURL(file)
+    }
+
+    setIsUploading(false)
+  }
+
+  const handleClear = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setPreview(null)
+    onClientUploadFinish(null)
+    if (inputRef.current) inputRef.current.value = ''
+  }
+
+  return (
+    <div className={cn('relative', className)}>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        className="hidden"
+        onChange={e => {
+          const file = e.target.files?.[0]
+          if (file) handleFile(file)
+          e.target.value = ''
+        }}
+      />
+
+      <button
+        type="button"
+        onClick={() => !isUploading && inputRef.current?.click()}
+        disabled={isUploading}
+        className={cn(
+          'border-border bg-muted/30 hover:bg-muted/50 relative flex aspect-square w-full cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 border-dashed transition-colors',
+          isUploading && 'cursor-not-allowed'
+        )}
+      >
+        {preview?.kind === 'image' && (
+          <Image
+            src={preview.url}
+            alt="Upload preview"
+            fill
+            sizes={sizes}
+            className="object-contain"
+            unoptimized={
+              preview.url.startsWith('data:') || preview.url.startsWith('blob:')
+            }
+          />
+        )}
+
+        {preview?.kind === 'file' && (
+          <div className="flex flex-col items-center gap-2 px-4">
+            <FileTypeIcon mimeType={preview.mimeType} />
+            <span className="text-muted-foreground max-w-full truncate text-xs">
+              {preview.name}
+            </span>
+          </div>
+        )}
+
+        {!preview && (
+          <div className="flex flex-col items-center gap-2">
+            <div className="bg-muted rounded-md p-2">
+              <Upload className="text-muted-foreground h-5 w-5" />
+            </div>
+            <span className="text-muted-foreground text-xs font-medium">
+              Click to upload
+            </span>
+            <span className="text-muted-foreground/60 text-[11px]">
+              Max {MAX_FILE_SIZE_MB}MB
+            </span>
+          </div>
+        )}
+
+        {isUploading && (
+          <div className="bg-background/70 absolute inset-0 flex items-center justify-center backdrop-blur-sm">
+            <Loader2 className="text-primary h-6 w-6 animate-spin" />
+          </div>
+        )}
+      </button>
+
+      {preview && !isUploading && (
+        <Button
+          type="button"
+          variant="destructive"
+          size="icon"
+          className="absolute -top-2 -right-2 h-6 w-6 rounded-full shadow-sm"
+          onClick={handleClear}
+        >
+          <X className="h-3 w-3" />
+        </Button>
+      )}
+    </div>
+  )
+}

package/template/saas-starter/src/components/impersonation-banner.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import { UserX } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import { FC, useState } from 'react'
+import { Button } from '~/components/ui/button'
+import { admin } from '~/lib/auth-client'
+
+export const ImpersonationBanner: FC = () => {
+  const router = useRouter()
+  const [isStopping, setIsStopping] = useState(false)
+
+  const handleStopImpersonation = async () => {
+    try {
+      setIsStopping(true)
+      await admin.stopImpersonating()
+      router.refresh()
+    } catch (error) {
+      console.error('Failed to stop impersonation:', error)
+      setIsStopping(false)
+    }
+  }
+
+  return (
+    <div className="bg-primary text-primary-foreground w-full border-b text-sm">
+      <div className="container flex min-h-10 items-center justify-between gap-4 py-2">
+        <div className="flex items-center gap-2">
+          <UserX className="size-4" />
+          <span className="font-medium">Impersonating User</span>
+        </div>
+        <div className="flex items-center gap-3">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleStopImpersonation}
+            disabled={isStopping}
+          >
+            {isStopping ? 'Stopping...' : 'Stop Impersonation'}
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/template/saas-starter/src/components/loader.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import NextTopLoader from 'nextjs-toploader'
+
+import { FC } from 'react'
+
+export const Loader: FC = () => {
+  return (
+    <NextTopLoader
+      color="#777777"
+      initialPosition={0.08}
+      crawlSpeed={200}
+      height={3}
+      crawl={true}
+      showSpinner={true}
+      easing="ease"
+      speed={200}
+      shadow={`0 0 10px '#777777',0 0 5px '#777777'`}
+      template='<div class="bar" role="bar"><div class="peg"></div></div> 
+  <div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
+      zIndex={10000}
+      showAtBottom={false}
+    />
+  )
+}

package/template/saas-starter/src/components/navigation-search.tsx

@@ -0,0 +1,140 @@
+'use client'
+
+import { Search } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import {
+  SidebarNavGroup,
+  SidebarNavItem,
+  SidebarNavSubItem
+} from '~/components/navigation-sidebar'
+import { Button } from '~/components/ui/button'
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator
+} from '~/components/ui/command'
+
+type NavigationSearchProps = {
+  groups: SidebarNavGroup[]
+  dialogDescription: string
+  emptyMessage?: string
+  buttonLabel?: string
+  buttonClassName?: string
+}
+
+export function NavigationSearch({
+  groups,
+  dialogDescription,
+  emptyMessage = 'No results found.',
+  buttonLabel = 'Search...',
+  buttonClassName = 'text-muted-foreground relative h-9 w-36 justify-start rounded-md text-sm sm:w-64 sm:pr-12'
+}: NavigationSearchProps) {
+  const router = useRouter()
+  const [searchOpen, setSearchOpen] = useState(false)
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault()
+        setSearchOpen(true)
+      }
+    }
+
+    document.addEventListener('keydown', onKeyDown)
+    return () => document.removeEventListener('keydown', onKeyDown)
+  }, [])
+
+  const navigate = useCallback(
+    (url: string) => {
+      setSearchOpen(false)
+      router.push(url)
+    },
+    [router]
+  )
+
+  const hasGroups = groups.length > 0
+
+  const normalizedGroups = useMemo(
+    () =>
+      groups.map(group => ({
+        label: group.label,
+        items: group.items.flatMap((item: SidebarNavItem) => {
+          if (item.items?.length) {
+            return item.items.map((subItem: SidebarNavSubItem) => ({
+              key: subItem.url,
+              label: `${item.title} › ${subItem.title}`,
+              value: `${group.label} ${item.title} ${subItem.title}`,
+              url: subItem.url,
+              icon: item.icon
+            }))
+          }
+
+          return [
+            {
+              key: item.url,
+              label: item.title,
+              value: `${group.label} ${item.title}`,
+              url: item.url,
+              icon: item.icon
+            }
+          ]
+        })
+      })),
+    [groups]
+  )
+
+  return (
+    <>
+      <Button
+        variant="outline"
+        className={buttonClassName}
+        onClick={() => setSearchOpen(true)}
+        disabled={!hasGroups}
+      >
+        <Search className="mr-2 size-4" />
+        <span>{buttonLabel}</span>
+        <kbd className="bg-muted pointer-events-none absolute top-[50%] right-1.5 hidden h-5 -translate-y-1/2 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
+          <span className="text-xs">⌘</span>K
+        </kbd>
+      </Button>
+
+      <CommandDialog
+        open={searchOpen}
+        onOpenChange={setSearchOpen}
+        title="Search"
+        description={dialogDescription}
+      >
+        <Command>
+          <CommandInput placeholder="Type to search..." />
+          <CommandList>
+            <CommandEmpty>{emptyMessage}</CommandEmpty>
+
+            {normalizedGroups.map((group, groupIndex) => (
+              <div key={group.label}>
+                {groupIndex > 0 ? <CommandSeparator /> : null}
+                <CommandGroup heading={group.label}>
+                  {group.items.map(item => (
+                    <CommandItem
+                      key={item.key}
+                      value={item.value}
+                      onSelect={() => navigate(item.url)}
+                    >
+                      {item.icon ? <item.icon className="mr-2 size-4" /> : null}
+                      <span>{item.label}</span>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </div>
+            ))}
+          </CommandList>
+        </Command>
+      </CommandDialog>
+    </>
+  )
+}