create-ej-app 24.0.0 → 26.0.0

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>
+      }
+    />
+  )
+}

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

@@ -0,0 +1,57 @@
+import { cookies } from 'next/headers'
+import { notFound, redirect } from 'next/navigation'
+import { NuqsAdapter } from 'nuqs/adapters/react'
+import { ImpersonationBanner } from '~/components/impersonation-banner'
+import { SidebarInset, SidebarProvider } from '~/components/ui/sidebar'
+import { TooltipProvider } from '~/components/ui/tooltip'
+import { getAuthSession } from '~/lib/auth'
+import { siteConfig } from '~/lib/siteConfig'
+import { AdminHeader } from './_components/admin-header'
+import { AdminSidebar } from './_components/admin-sidebar'
+
+export default async function Layout({
+  children
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  const authSession = await getAuthSession()
+
+  if (!authSession) {
+    return notFound()
+  }
+
+  if (!authSession.isAdmin) {
+    return redirect('/app')
+  }
+
+  const cookieStore = await cookies()
+  const sidebarStateCookie = cookieStore.get('sidebar_state')?.value
+  const defaultOpen = sidebarStateCookie !== 'false'
+
+  return (
+    <TooltipProvider>
+      <NuqsAdapter>
+        <SidebarProvider defaultOpen={defaultOpen}>
+          <AdminSidebar
+            companyName={siteConfig.name}
+            isSuperAdmin={authSession.isSuperAdmin}
+          />
+          <SidebarInset>
+            {authSession.session.impersonatedBy ? (
+              <ImpersonationBanner />
+            ) : null}
+            <AdminHeader
+              user={{
+                name: authSession.user.name,
+                email: authSession.user.email,
+                image: authSession.user.image
+              }}
+              isSuperAdmin={authSession.isSuperAdmin}
+            />
+            <div className="flex flex-1 flex-col gap-4 p-4">{children}</div>
+          </SidebarInset>
+        </SidebarProvider>
+      </NuqsAdapter>
+    </TooltipProvider>
+  )
+}

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

@@ -0,0 +1,3 @@
+export default async function AdminPage() {
+  return <div>Hello Admin</div>
+}

package/template/saas-starter/src/app/(admin)/admin/settings/users/_components/create-user-dialog.tsx

@@ -0,0 +1,183 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useQueryClient } from '@tanstack/react-query'
+import { Loader2 } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { Controller, useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { Button } from '~/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from '~/components/ui/dialog'
+import {
+  Field,
+  FieldContent,
+  FieldError,
+  FieldTitle
+} from '~/components/ui/field'
+import { Input } from '~/components/ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '~/components/ui/select'
+import { admin } from '~/lib/auth-client'
+import { toastErrorMessage, toastSuccessMessage } from '~/lib/toast-message'
+import { emailValidation, stringValidation } from '~/lib/validations'
+
+const schema = z.object({
+  name: stringValidation,
+  email: emailValidation,
+  role: z.enum(['user', 'admin', 'superadmin'])
+})
+
+type Form = z.infer<typeof schema>
+
+interface CreateUserDialogProps {
+  children: React.ReactNode
+}
+
+export function CreateUserDialog({ children }: CreateUserDialogProps) {
+  const queryClient = useQueryClient()
+  const [open, setOpen] = useState(false)
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    control,
+    formState: { errors, isSubmitting }
+  } = useForm<Form>({
+    resolver: zodResolver(schema),
+    defaultValues: { name: '', email: '', role: 'user' }
+  })
+
+  useEffect(() => {
+    if (open) reset({ name: '', email: '', role: 'user' })
+  }, [open, reset])
+
+  async function onSubmit(values: Form) {
+    const { error } = await admin.createUser({
+      name: values.name,
+      email: values.email,
+      role: values.role as any,
+      data: {}
+    })
+
+    if (error) {
+      toastErrorMessage(error.message ?? 'Failed to create user')
+      return
+    }
+
+    toastSuccessMessage(`Account created for ${values.email}`)
+    setOpen(false)
+    queryClient.invalidateQueries({ queryKey: ['admin-users'] })
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Create user</DialogTitle>
+          <DialogDescription>
+            Create a new account. The user will sign in via magic link.
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4 py-1">
+          <Field orientation="vertical">
+            <FieldContent>
+              <FieldTitle className="text-foreground mb-1.5 text-[13px] font-semibold">
+                Name
+              </FieldTitle>
+              <Input
+                autoFocus
+                placeholder="Jane Doe"
+                {...register('name')}
+                aria-invalid={!!errors.name}
+              />
+              <FieldError
+                errors={[errors.name]}
+                className="mt-1.5 text-[13px]"
+              />
+            </FieldContent>
+          </Field>
+
+          <Field orientation="vertical">
+            <FieldContent>
+              <FieldTitle className="text-foreground mb-1.5 text-[13px] font-semibold">
+                Email
+              </FieldTitle>
+              <Input
+                type="email"
+                placeholder="jane@example.com"
+                autoComplete="off"
+                {...register('email')}
+                aria-invalid={!!errors.email}
+              />
+              <FieldError
+                errors={[errors.email]}
+                className="mt-1.5 text-[13px]"
+              />
+            </FieldContent>
+          </Field>
+
+          <Field orientation="vertical">
+            <FieldContent>
+              <FieldTitle className="text-foreground mb-1.5 text-[13px] font-semibold">
+                Role
+              </FieldTitle>
+              <Controller
+                control={control}
+                name="role"
+                render={({ field }) => (
+                  <Select value={field.value} onValueChange={field.onChange}>
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="Select role" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="user">User</SelectItem>
+                      <SelectItem value="admin">Admin</SelectItem>
+                      <SelectItem value="superadmin">Superadmin</SelectItem>
+                    </SelectContent>
+                  </Select>
+                )}
+              />
+              <FieldError
+                errors={[errors.role]}
+                className="mt-1.5 text-[13px]"
+              />
+            </FieldContent>
+          </Field>
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setOpen(false)}
+              disabled={isSubmitting}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isSubmitting}>
+              {isSubmitting && (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              )}
+              Create account
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/template/saas-starter/src/app/(admin)/admin/settings/users/_components/edit-name-dialog.tsx

@@ -0,0 +1,129 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useQueryClient } from '@tanstack/react-query'
+import { Loader2 } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { Button } from '~/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from '~/components/ui/dialog'
+import {
+  Field,
+  FieldContent,
+  FieldError,
+  FieldTitle
+} from '~/components/ui/field'
+import { Input } from '~/components/ui/input'
+import { admin } from '~/lib/auth-client'
+import { toastErrorMessage, toastSuccessMessage } from '~/lib/toast-message'
+import { stringValidation } from '~/lib/validations'
+
+const schema = z.object({
+  name: stringValidation
+})
+
+type Form = z.infer<typeof schema>
+
+interface EditNameDialogProps {
+  userId: string
+  currentName: string
+  children: React.ReactNode
+}
+
+export function EditNameDialog({
+  userId,
+  currentName,
+  children
+}: EditNameDialogProps) {
+  const queryClient = useQueryClient()
+  const [open, setOpen] = useState(false)
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting, isDirty }
+  } = useForm<Form>({
+    resolver: zodResolver(schema),
+    defaultValues: { name: currentName }
+  })
+
+  useEffect(() => {
+    if (open) reset({ name: currentName })
+  }, [open, currentName, reset])
+
+  async function onSubmit(values: Form) {
+    const { error } = await admin.updateUser({
+      userId,
+      data: { name: values.name }
+    })
+
+    if (error) {
+      toastErrorMessage(error.message ?? 'Failed to update name')
+      return
+    }
+
+    toastSuccessMessage('Name updated')
+    setOpen(false)
+    queryClient.invalidateQueries({ queryKey: ['admin-users'] })
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="sm:max-w-sm">
+        <DialogHeader>
+          <DialogTitle>Edit name</DialogTitle>
+          <DialogDescription>
+            Update the user&apos;s display name.
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4 py-1">
+          <Field orientation="vertical">
+            <FieldContent>
+              <FieldTitle className="text-foreground mb-1.5 text-[13px] font-semibold">
+                Name
+              </FieldTitle>
+              <Input
+                autoFocus
+                {...register('name')}
+                aria-invalid={!!errors.name}
+              />
+              <FieldError
+                errors={[errors.name]}
+                className="mt-1.5 text-[13px]"
+              />
+            </FieldContent>
+          </Field>
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setOpen(false)}
+              disabled={isSubmitting}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isSubmitting || !isDirty}>
+              {isSubmitting && (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              )}
+              Save
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}