create-ej-app 26.0.0 → 28.0.0

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

@@ -0,0 +1,161 @@
+'use client'
+
+import { MessageSquare, Star } from 'lucide-react'
+import {
+  parseAsInteger,
+  parseAsJson,
+  parseAsString,
+  useQueryStates
+} from 'nuqs'
+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 { formatDate } from '~/lib/format-date'
+import { useSafeActionQuery } from '~/lib/safe-action-client'
+import { getFeedbacks } from '../../actions/feedbacks'
+
+type Feedback = {
+  id: string
+  rating: number
+  comment: string | null
+  createdAt: Date
+  userId: string
+  organizationId: string
+  userName: string | null
+  userEmail: string | null
+  organizationName: string | null
+}
+
+const filters: DataTableFilter[] = [
+  {
+    id: 'rating',
+    label: 'Rating',
+    options: [5, 4, 3, 2, 1].map(rating => ({
+      label: rating === 1 ? '1 Star' : `${rating} Stars`,
+      value: String(rating)
+    }))
+  }
+]
+
+const columns: DataTableColumnDef<Feedback>[] = [
+  {
+    accessorKey: 'user',
+    header: 'User',
+    enableSorting: false,
+    cell: ({ row }) => (
+      <div className="flex flex-col">
+        <span className="text-sm font-medium">
+          {row.original.userName || 'Anonymous'}
+        </span>
+        <span className="text-muted-foreground text-xs">
+          {row.original.userEmail || '-'}
+        </span>
+      </div>
+    )
+  },
+  {
+    accessorKey: 'rating',
+    header: 'Rating',
+    enableSorting: true,
+    cell: ({ row }) => (
+      <div className="flex items-center gap-1">
+        <span className="font-medium">{row.original.rating}</span>
+        <Star className="fill-warning text-warning h-4 w-4" />
+      </div>
+    )
+  },
+  {
+    accessorKey: 'organization',
+    header: 'Organization',
+    enableSorting: false,
+    cell: ({ row }) => (
+      <span className="text-sm">
+        {row.original.organizationName || (
+          <span className="text-muted-foreground italic">Deleted</span>
+        )}
+      </span>
+    )
+  },
+  {
+    accessorKey: 'comment',
+    header: 'Comment',
+    enableSorting: false,
+    cell: ({ row }) => (
+      <span className="text-muted-foreground line-clamp-2 max-w-100 text-sm">
+        {row.original.comment || (
+          <span className="italic">No comment provided</span>
+        )}
+      </span>
+    )
+  },
+  {
+    accessorKey: 'createdAt',
+    header: 'Submitted On',
+    enableSorting: true,
+    cell: ({ row }) => formatDate(row.original.createdAt, { short: true })
+  }
+]
+
+export default function FeedbacksPage() {
+  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
+      'createdAt' | 'rating' | undefined,
+    sortOrder: (queryState.sortOrder ?? undefined) as SortOrderEnum | undefined,
+    search: queryState.search ?? undefined,
+    filters: queryState.filters ?? undefined
+  }
+
+  const { data, isLoading } = useSafeActionQuery(
+    'admin-feedbacks',
+    getFeedbacks,
+    params
+  )
+
+  return (
+    <div className="space-y-6">
+      <PageHeading
+        title="Feedback"
+        description="Ratings and comments sent from the app."
+        icon={MessageSquare}
+      />
+
+      <DataTable
+        columns={columns}
+        data={data?.[0]}
+        isLoading={isLoading}
+        totalCount={data?.[1]}
+        enableSearch
+        initialSearch={params.search}
+        searchPlaceholder="Search by comment or user…"
+        manualPagination
+        manualSorting
+        pageIndex={params.page - 1}
+        pageSize={params.limit}
+        filters={filters}
+        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/app/(admin)/admin/layout.tsx

@@ -1,13 +1,16 @@
+import type { Metadata } from 'next'
 import { cookies } from 'next/headers'
 import { notFound, redirect } from 'next/navigation'
-import { NuqsAdapter } from 'nuqs/adapters/react'
-import { ImpersonationBanner } from '~/components/impersonation-banner'
+import { NuqsAdapter } from 'nuqs/adapters/next/app'
+import { AdminHeader } from '~/app/(admin)/admin/_components/admin-header'
+import { AdminSidebar } from '~/app/(admin)/admin/_components/admin-sidebar'
 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'
+import { privatePageRobots } from '~/lib/seo'
+
+export const metadata: Metadata = {
+  robots: privatePageRobots
+}
 
 export default async function Layout({
   children
@@ -29,29 +32,22 @@ export default async function Layout({
   const defaultOpen = sidebarStateCookie !== 'false'
 
   return (
-    <TooltipProvider>
-      <NuqsAdapter>
-        <SidebarProvider defaultOpen={defaultOpen}>
-          <AdminSidebar
-            companyName={siteConfig.name}
+    <NuqsAdapter>
+      <SidebarProvider defaultOpen={defaultOpen}>
+        <AdminSidebar isSuperAdmin={authSession.isSuperAdmin} />
+        <SidebarInset>
+          <AdminHeader
+            user={{
+              name: authSession.user?.name,
+              email: authSession.user?.email,
+              image: authSession.user?.image
+            }}
             isSuperAdmin={authSession.isSuperAdmin}
+            isImpersonating={!!authSession.session.impersonatedBy}
           />
-          <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>
+          <div className="flex flex-1 flex-col gap-4 p-4">{children}</div>
+        </SidebarInset>
+      </SidebarProvider>
+    </NuqsAdapter>
   )
 }

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

@@ -1,3 +1,60 @@
-export default async function AdminPage() {
-  return <div>Hello Admin</div>
+import {
+  LayoutDashboard,
+  MessageCircle,
+  MessageSquare,
+  Ticket
+} from 'lucide-react'
+import Link from 'next/link'
+import { PageHeading } from '~/components/page-heading'
+import {
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from '~/components/ui/card'
+
+const SHORTCUTS = [
+  {
+    title: 'Support Tickets',
+    description: 'Answer customer tickets and update their status.',
+    href: '/admin/support-tickets',
+    icon: Ticket
+  },
+  {
+    title: 'Feedback',
+    description: 'Read ratings and comments sent from the app.',
+    href: '/admin/feedbacks',
+    icon: MessageCircle
+  },
+  {
+    title: 'Contact Leads',
+    description: 'Follow up on contact form messages.',
+    href: '/admin/contact-leads',
+    icon: MessageSquare
+  }
+]
+
+export default function AdminPage() {
+  return (
+    <div className="space-y-6">
+      <PageHeading
+        title="Dashboard"
+        description="Jump to the queues that need a reply."
+        icon={LayoutDashboard}
+      />
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {SHORTCUTS.map(item => (
+          <Link key={item.href} href={item.href} className="group">
+            <Card className="group-hover:border-primary h-full transition-colors">
+              <CardHeader>
+                <item.icon className="text-primary mb-2 size-5" />
+                <CardTitle>{item.title}</CardTitle>
+                <CardDescription>{item.description}</CardDescription>
+              </CardHeader>
+            </Card>
+          </Link>
+        ))}
+      </div>
+    </div>
+  )
 }

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

@@ -0,0 +1,24 @@
+import { redirect } from 'next/navigation'
+import { getAuthSession } from '~/lib/auth'
+
+/**
+ * Route guard for the admin Settings section.
+ *
+ * The parent admin layout already restricts access to `admin` and
+ * `superadmin`. This layout further narrows `/admin/settings/*` (user & role
+ * management and impersonation) to `superadmin` only. `admin` users are
+ * redirected back to the dashboard.
+ */
+export default async function SettingsLayout({
+  children
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  const authSession = await getAuthSession()
+
+  if (!authSession?.isSuperAdmin) {
+    return redirect('/admin')
+  }
+
+  return <>{children}</>
+}

package/template/saas-starter/src/app/(admin)/admin/settings/users/[userId]/page.tsx

@@ -0,0 +1,43 @@
+import { Users } from 'lucide-react'
+import { notFound } from 'next/navigation'
+import { getUserById } from '~/app/(admin)/actions/users'
+import { PageHeading } from '~/components/page-heading'
+import { UserForm } from '../user-form'
+
+interface PageProps {
+  params: Promise<{
+    userId: string
+  }>
+}
+
+export default async function AdminUserEditPage({
+  params: nextParams
+}: PageProps) {
+  const params = await nextParams
+  const result = await getUserById({ userId: params.userId })
+
+  if (!result?.data) {
+    return notFound()
+  }
+
+  const user = result.data
+
+  return (
+    <div className="space-y-6">
+      <PageHeading
+        title="Edit User"
+        description="Change the user's name, email, and role."
+        icon={Users}
+      />
+      <UserForm
+        mode="edit"
+        initialData={{
+          id: user.id,
+          name: user.name,
+          email: user.email,
+          role: user.role
+        }}
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,16 @@
+import { Users } from 'lucide-react'
+import { PageHeading } from '~/components/page-heading'
+import { UserForm } from '../user-form'
+
+export default function AdminUserCreatePage() {
+  return (
+    <div className="space-y-6">
+      <PageHeading
+        title="Create User"
+        description="Create a new user and assign a role."
+        icon={Users}
+      />
+      <UserForm mode="create" />
+    </div>
+  )
+}