create-ej-app 25.0.0 → 26.0.0

package/cli.js

@@ -65,6 +65,10 @@ program.action(async () => {
                     name: 'nextjs',
                     message: 'Full Stack setup with Next 16, Better Auth, shadcn and Drizzle'
                 },
+                {
+                    name: 'saas-starter',
+                    message: 'SaaS Starter with Stripe, Next 16, Better Auth, shadcn and Drizzle'
+                },
                 {
                     name: 'api',
                     message: 'API Server setup with Elysia, Drizzle, Typescript'

package/cli.ts

@@ -78,6 +78,11 @@ program.action(async () => {
           message:
             'Full Stack setup with Next 16, Better Auth, shadcn and Drizzle'
         },
+        {
+          name: 'saas-starter',
+          message:
+            'SaaS Starter with Stripe, Next 16, Better Auth, shadcn and Drizzle'
+        },
         {
           name: 'api',
           message: 'API Server setup with Elysia, Drizzle, Typescript'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-ej-app",
-  "version": "25.0.0",
+  "version": "26.0.0",
   "description": "Bootstrap a next.js app with my preferred setup",
   "main": "cli.js",
   "type": "module",
@@ -36,7 +36,7 @@
     "enquirer": "^2.4.1"
   },
   "devDependencies": {
-    "@types/node": "^25.9.2",
+    "@types/node": "^25.9.3",
     "typescript": "^6.0.3"
   }
 }

package/template/api/package.json

@@ -22,10 +22,10 @@
   },
   "devDependencies": {
     "@types/bun": "1.3.14",
-    "@typescript/native-preview": "7.0.0-dev.20260607.1",
+    "@typescript/native-preview": "7.0.0-dev.20260614.1",
     "drizzle-kit": "0.31.10",
     "postgres": "3.4.9",
-    "prettier": "3.8.3",
+    "prettier": "3.8.4",
     "prettier-plugin-organize-imports": "4.3.0"
   }
 }

package/template/nextjs/gitignore

@@ -3,5 +3,6 @@ node_modules
 out
 build
 next-env.d.ts
+.swc
 .DS_Store
 .env

package/template/nextjs/package.json

@@ -23,53 +23,53 @@
   "dependencies": {
     "@ejekanshjain/simple-email-validator": "1.0.4",
     "@hookform/resolvers": "5.4.0",
-    "@next/third-parties": "16.2.7",
+    "@next/third-parties": "16.2.9",
     "@opentelemetry/api": "1.9.1",
-    "@opentelemetry/sdk-trace-base": "2.7.1",
+    "@opentelemetry/sdk-trace-base": "2.8.0",
     "@paralleldrive/cuid2": "3.3.0",
     "@react-email/render": "2.0.8",
     "@t3-oss/env-nextjs": "0.13.11",
     "@tanstack/react-query": "5.101.0",
-    "@vercel/otel": "2.1.2",
-    "better-auth": "1.6.14",
+    "@vercel/otel": "2.1.3",
+    "better-auth": "1.6.18",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "drizzle-orm": "0.45.2",
-    "lucide-react": "1.17.0",
-    "next": "16.2.7",
-    "next-safe-action": "8.5.3",
+    "lucide-react": "1.18.0",
+    "next": "16.2.9",
+    "next-safe-action": "8.5.4",
     "next-themes": "^0.4.6",
     "nextjs-toploader": "3.9.17",
-    "nodemailer": "8.0.10",
+    "nodemailer": "9.0.0",
     "postgres": "3.4.9",
     "radix-ui": "1.5.0",
     "react": "19.2.7",
     "react-dom": "19.2.7",
-    "react-hook-form": "7.78.0",
+    "react-hook-form": "7.79.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "3.6.0",
     "tw-animate-css": "1.4.0",
-    "workflow": "4.3.1",
+    "workflow": "4.4.0",
     "zod": "4.4.3"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "16.2.7",
+    "@next/bundle-analyzer": "16.2.9",
     "@react-email/preview-server": "5.2.10",
-    "@tailwindcss/postcss": "4.3.0",
+    "@tailwindcss/postcss": "4.3.1",
     "@types/bun": "1.3.14",
-    "@types/nodemailer": "8.0.0",
+    "@types/nodemailer": "8.0.1",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
-    "@typescript/native-preview": "7.0.0-dev.20260607.1",
+    "@typescript/native-preview": "7.0.0-dev.20260614.1",
     "babel-plugin-react-compiler": "1.0.0",
     "drizzle-kit": "0.31.10",
     "eslint": "9.39.4",
-    "eslint-config-next": "16.2.7",
-    "prettier": "3.8.3",
+    "eslint-config-next": "16.2.9",
+    "prettier": "3.8.4",
     "prettier-plugin-organize-imports": "4.3.0",
     "prettier-plugin-tailwindcss": "0.8.0",
-    "react-email": "6.5.0",
-    "tailwindcss": "4.3.0",
+    "react-email": "6.6.0",
+    "tailwindcss": "4.3.1",
     "typescript": "6.0.3"
   },
   "trustedDependencies": [

package/template/saas-starter/.dockerignore

@@ -0,0 +1,7 @@
+node_modules
+.next
+out
+build
+next-env.d.ts
+.DS_Store
+.env

package/template/saas-starter/.env.example

@@ -0,0 +1,25 @@
+APP_ENV="production"
+DATABASE_URL="postgresql://postgres:postgres@localhost:5432/postgres"
+BETTER_AUTH_URL="http://localhost:3000"
+BETTER_AUTH_SECRET="secret"
+BETTER_AUTH_GITHUB_ID="github_id"
+BETTER_AUTH_GITHUB_SECRET="github_secret"
+BETTER_AUTH_GOOGLE_ID="google_id"
+BETTER_AUTH_GOOGLE_SECRET="google_secret"
+EMAIL_SERVER_USER="username"
+EMAIL_SERVER_PASSWORD="password"
+EMAIL_SERVER_HOST="smtp.example.com"
+EMAIL_SERVER_PORT="465"
+EMAIL_FROM="no-reply@example.com"
+STRIPE_SECRET_KEY="sk_test_xxxxxxxxxx"
+STRIPE_WEBHOOK_SECRET="whsec_xxxxxxxxxx"
+STRIPE_PRICE_PRO_MONTHLY="price_xxxxxxxxxx"
+STRIPE_PRICE_PRO_ANNUAL="price_xxxxxxxxxx"
+STRIPE_PRICE_ULTIMATE_MONTHLY="price_xxxxxxxxxx"
+STRIPE_PRICE_ULTIMATE_ANNUAL="price_xxxxxxxxxx"
+STRIPE_PORTAL_CONFIGURATION_ID="bpc_xxxxxxxxxx"
+R2_ACCOUNT_ID=""
+R2_ACCESS_KEY_ID=""
+R2_SECRET_ACCESS_KEY=""
+R2_BUCKET_NAME=""
+R2_PUBLIC_URL=""

package/template/saas-starter/.vscode/extensions.json

@@ -0,0 +1,11 @@
+{
+  "recommendations": [
+    "bradlc.vscode-tailwindcss",
+    "dbaeumer.vscode-eslint",
+    "eamodio.gitlens",
+    "esbenp.prettier-vscode",
+    "TypeScriptTeam.native-preview",
+    "usernamehw.errorlens",
+    "YoavBls.pretty-ts-errors"
+  ]
+}

package/template/saas-starter/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "js/ts.experimental.useTsgo": true
+}

package/template/saas-starter/Dockerfile

@@ -0,0 +1,15 @@
+FROM oven/bun:latest
+
+WORKDIR /app
+
+COPY package.json bun.lock ./
+
+RUN bun install --frozen-lockfile
+
+COPY . .
+
+COPY .env.example .env
+
+RUN bun run build
+
+ENTRYPOINT ["bun", "start"]

package/template/saas-starter/README.md

@@ -0,0 +1,3 @@
+# my-project
+
+A Legendary Project

package/template/saas-starter/components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-vega",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "~/components",
+    "utils": "~/lib/cn",
+    "ui": "~/components/ui",
+    "lib": "~/lib",
+    "hooks": "~/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

package/template/saas-starter/drizzle.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'drizzle-kit'
+import { env } from '~/env'
+
+export default defineConfig({
+  schema: './src/db/schema.ts',
+  dialect: 'postgresql',
+  dbCredentials: {
+    url: env.DATABASE_URL
+  }
+})

package/template/saas-starter/eslint.config.mjs

@@ -0,0 +1,23 @@
+// @ts-ignore
+import nextVitals from 'eslint-config-next/core-web-vitals'
+// import nextTs from 'eslint-config-next/typescript'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  // ...nextTs,
+  globalIgnores([
+    'node_modules/**',
+    '.next/**',
+    'out/**',
+    'build/**',
+    'next-env.d.ts'
+  ]),
+  {
+    rules: {
+      'react/no-unescaped-entities': 'off'
+    }
+  }
+])
+
+export default eslintConfig

package/template/saas-starter/gitignore

@@ -0,0 +1,9 @@
+node_modules
+.next
+out
+build
+next-env.d.ts
+.swc
+.DS_Store
+.env
+stripe.txt

package/template/saas-starter/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/template/saas-starter/next.config.ts

@@ -0,0 +1,14 @@
+import bundleAnalyzer from '@next/bundle-analyzer'
+import type { NextConfig } from 'next'
+import { withWorkflow } from 'workflow/next'
+import { env } from '~/env'
+
+const nextConfig: NextConfig = {
+  reactCompiler: true
+}
+
+const withBundleAnalyzer = bundleAnalyzer({
+  enabled: env.ANALYZE === 'true'
+})
+
+export default withWorkflow(withBundleAnalyzer(nextConfig))

package/template/saas-starter/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "my-project",
+  "description": "A Legendary Project",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "email:dev": "email dev --dir src/emails",
+    "email:test": "bun ./src/scripts/test-mail.ts",
+    "workflow:inspect": "workflow inspect runs --web",
+    "build": "bun --bun next build",
+    "build:docker": "docker build -t my-app .",
+    "analyze": "ANALYZE=true bun --bun next build --webpack",
+    "start": "bun --bun next start",
+    "lint": "eslint",
+    "type-check": "tsgo --incremental false",
+    "format": "prettier --write \"./src/**/*.{js,cjs,mjs,jsx,ts,tsx}\"",
+    "db:push": "drizzle-kit push",
+    "db:seed": "bun ./src/scripts/seed.ts",
+    "db:reset": "bun ./src/scripts/reset-db.ts",
+    "db:studio": "drizzle-kit studio",
+    "gen:auth": "bunx @better-auth/cli generate",
+    "stripe:setup": "bun ./src/scripts/setup-stripe-plans.ts",
+    "stripe:dev": "stripe listen --forward-to localhost:3000/api/webhooks/stripe"
+  },
+  "dependencies": {
+    "@aws-sdk/client-s3": "3.1068.0",
+    "@aws-sdk/s3-request-presigner": "3.1068.0",
+    "@ejekanshjain/simple-email-validator": "1.0.4",
+    "@hookform/resolvers": "5.4.0",
+    "@next/third-parties": "16.2.9",
+    "@opentelemetry/api": "1.9.1",
+    "@opentelemetry/sdk-trace-base": "2.8.0",
+    "@paralleldrive/cuid2": "3.3.0",
+    "@react-email/render": "2.0.8",
+    "@t3-oss/env-nextjs": "0.13.11",
+    "@tanstack/react-query": "5.101.0",
+    "@tanstack/react-table": "8.21.3",
+    "@vercel/otel": "2.1.3",
+    "better-auth": "1.6.18",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "cmdk": "1.1.1",
+    "drizzle-orm": "0.45.2",
+    "lucide-react": "1.18.0",
+    "next": "16.2.9",
+    "next-safe-action": "8.5.4",
+    "next-themes": "0.4.6",
+    "nextjs-toploader": "3.9.17",
+    "nodemailer": "9.0.0",
+    "nuqs": "2.8.9",
+    "postgres": "3.4.9",
+    "radix-ui": "1.5.0",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "react-hook-form": "7.79.0",
+    "sonner": "2.0.7",
+    "stripe": "22.2.1",
+    "tailwind-merge": "3.6.0",
+    "tw-animate-css": "1.4.0",
+    "workflow": "4.4.0",
+    "zod": "4.4.3"
+  },
+  "devDependencies": {
+    "@next/bundle-analyzer": "16.2.9",
+    "@react-email/preview-server": "5.2.10",
+    "@tailwindcss/postcss": "4.3.1",
+    "@types/bun": "1.3.14",
+    "@types/nodemailer": "8.0.1",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "@typescript/native-preview": "7.0.0-dev.20260614.1",
+    "babel-plugin-react-compiler": "1.0.0",
+    "drizzle-kit": "0.31.10",
+    "eslint": "9.39.4",
+    "eslint-config-next": "16.2.9",
+    "prettier": "3.8.4",
+    "prettier-plugin-organize-imports": "4.3.0",
+    "prettier-plugin-tailwindcss": "0.8.0",
+    "react-email": "6.6.0",
+    "tailwindcss": "4.3.1",
+    "typescript": "6.0.3"
+  },
+  "trustedDependencies": [
+    "@nestjs/core",
+    "@swc/core",
+    "cbor-extract",
+    "esbuild",
+    "sharp",
+    "unrs-resolver"
+  ]
+}

package/template/saas-starter/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {}
+  }
+}
+
+export default config

package/template/saas-starter/prettier.config.mjs

@@ -0,0 +1,11 @@
+/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
+const config = {
+  plugins: ['prettier-plugin-organize-imports', 'prettier-plugin-tailwindcss'],
+  arrowParens: 'avoid',
+  trailingComma: 'none',
+  semi: false,
+  singleQuote: true,
+  tabWidth: 2
+}
+
+export default config

package/template/saas-starter/public/placeholder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>

package/template/saas-starter/src/actions/uploads.ts

@@ -0,0 +1,28 @@
+'use server'
+
+import { assertUserMembership } from '~/lib/organization-access'
+import { authActionClient } from '~/lib/safe-action'
+import { generateUploadUrl, isR2Configured } from '~/lib/storage'
+import { generateUploadUrlSchema } from './uploads.validation'
+
+export const generateUploadUrlAction = authActionClient
+  .inputSchema(generateUploadUrlSchema)
+  .action(async ({ parsedInput, ctx: { user } }) => {
+    if (!isR2Configured()) {
+      return { mode: 'base64' as const }
+    }
+
+    if (parsedInput.organizationId) {
+      await assertUserMembership(parsedInput.organizationId)
+    }
+
+    const { uploadUrl, key } = await generateUploadUrl({
+      filename: parsedInput.filename,
+      mimeType: parsedInput.mimeType,
+      size: parsedInput.size,
+      uploadedBy: user.id,
+      organizationId: parsedInput.organizationId
+    })
+
+    return { mode: 'r2' as const, uploadUrl, key }
+  })

package/template/saas-starter/src/actions/uploads.validation.ts

@@ -0,0 +1,14 @@
+import { z } from 'zod'
+import { MAX_FILE_SIZE_BYTES, MAX_FILE_SIZE_MB } from '~/lib/constants'
+import { stringValidation } from '~/lib/validations'
+
+export const generateUploadUrlSchema = z.object({
+  filename: stringValidation,
+  mimeType: stringValidation,
+  size: z
+    .number()
+    .int()
+    .positive()
+    .max(MAX_FILE_SIZE_BYTES, `File must be under ${MAX_FILE_SIZE_MB}MB`),
+  organizationId: stringValidation
+})

package/template/saas-starter/src/app/(admin)/actions/users.ts

@@ -0,0 +1,97 @@
+'use server'
+
+import {
+  and,
+  asc,
+  count,
+  desc,
+  ilike,
+  inArray,
+  isNotNull,
+  or
+} from 'drizzle-orm'
+import { z } from 'zod'
+import { SortOrderEnum } from '~/components/data-table/enum'
+import { db } from '~/db'
+import { usersTable } from '~/db/schema'
+import { getPaginationSchema, getSortSchema } from '~/lib/actions'
+import { adminActionClient } from '~/lib/safe-action'
+
+export const getUsers = adminActionClient
+  .inputSchema(
+    z.object({
+      ...getPaginationSchema(),
+      ...getSortSchema(['name', 'email', 'createdAt']),
+      search: z.string().trim().optional(),
+      filters: z
+        .object({
+          role: z.array(z.string()).optional(),
+          banned: z.array(z.boolean()).optional()
+        })
+        .optional()
+    })
+  )
+  .action(
+    async ({
+      parsedInput: { page, limit, sortBy, sortOrder, search, filters }
+    }) => {
+      const where = and(
+        search
+          ? or(
+              ilike(usersTable.name, `%${search}%`),
+              ilike(usersTable.email, `%${search}%`)
+            )
+          : undefined,
+        filters?.role && filters.role.length > 0
+          ? inArray(usersTable.role, filters.role)
+          : undefined,
+        filters?.banned && filters.banned.length > 0
+          ? inArray(usersTable.banned, filters.banned)
+          : undefined
+      )
+
+      const [results, total] = await Promise.all([
+        db.query.usersTable.findMany({
+          where,
+          limit,
+          offset: (page - 1) * limit,
+          orderBy: [
+            sortOrder === SortOrderEnum.ASC
+              ? asc(usersTable[sortBy || 'createdAt'])
+              : desc(usersTable[sortBy || 'createdAt'])
+          ]
+        }),
+        db.select({ count: count() }).from(usersTable).where(where)
+      ])
+
+      return [results, total[0]?.count ?? 0] as const
+    }
+  )
+
+export const getDistinctRoles = adminActionClient
+  .inputSchema(
+    z.object({
+      search: z.string().trim().optional(),
+      ...getPaginationSchema(20)
+    })
+  )
+  .action(async ({ parsedInput: { search, limit } }) => {
+    const where = and(
+      isNotNull(usersTable.role),
+      search ? ilike(usersTable.role, `%${search}%`) : undefined
+    )
+
+    const rows = await db
+      .selectDistinct({ role: usersTable.role })
+      .from(usersTable)
+      .where(where)
+      .orderBy(asc(usersTable.role))
+      .limit(limit)
+
+    return rows
+      .filter(r => r.role !== null)
+      .map(r => ({
+        value: r.role!,
+        label: r.role!.charAt(0).toUpperCase() + r.role!.slice(1)
+      }))
+  })

package/template/saas-starter/src/app/(admin)/admin/_components/admin-header.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { FC } from 'react'
+import { DashboardHeader } from '~/components/dashboard-header'
+import { AdminSearch } from './admin-search'
+
+export const AdminHeader: FC<{
+  user: {
+    name?: string | null
+    email?: string | null
+    image?: string | null
+  }
+  isSuperAdmin: boolean
+}> = ({ user, isSuperAdmin }) => {
+  return (
+    <DashboardHeader
+      user={user}
+      search={<AdminSearch isSuperAdmin={isSuperAdmin} />}
+    />
+  )
+}

package/template/saas-starter/src/app/(admin)/admin/_components/admin-search.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+import { FC } from 'react'
+import { NavigationSearch } from '~/components/navigation-search'
+import { getAdminNavigation } from '~/lib/admin-navigation'
+
+export const AdminSearch: FC<{ isSuperAdmin: boolean }> = ({
+  isSuperAdmin
+}) => {
+  return (
+    <NavigationSearch
+      groups={getAdminNavigation(isSuperAdmin)}
+      dialogDescription="Search across all admin pages and settings."
+    />
+  )
+}

package/template/saas-starter/src/app/(admin)/admin/_components/admin-sidebar.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import { LayoutGrid } from 'lucide-react'
+import Link from 'next/link'
+import { FC } from 'react'
+import { NavigationSidebar } from '~/components/navigation-sidebar'
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem
+} from '~/components/ui/sidebar'
+import { getAdminNavigation } from '~/lib/admin-navigation'
+
+export const AdminSidebar: FC<{
+  companyName: string
+  isSuperAdmin: boolean
+}> = ({ companyName, isSuperAdmin }) => {
+  return (
+    <NavigationSidebar
+      groups={getAdminNavigation(isSuperAdmin)}
+      header={
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <Link href="/admin">
+                <div className="bg-primary text-primary-foreground flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg">
+                  <LayoutGrid className="size-4" />
+                </div>
+                <div className="flex min-w-0 flex-col gap-0.5 leading-none group-data-[collapsible=icon]:hidden">
+                  <span className="truncate font-semibold">Admin Panel</span>
+                  <span className="truncate text-xs">{companyName}</span>
+                </div>
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      }
+    />
+  )
+}