create-nextjs-cms 0.9.22 → 0.9.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nextjs-cms",
-  "version": "0.9.22",
+  "version": "0.9.24",
   "private": false,
   "type": "module",
   "bin": {
@@ -29,8 +29,8 @@
     "tsx": "^4.20.6",
     "typescript": "^5.9.2",
     "@lzcms/eslint-config": "0.3.0",
-    "@lzcms/prettier-config": "0.1.0",
-    "@lzcms/tsconfig": "0.1.0"
+    "@lzcms/tsconfig": "0.1.0",
+    "@lzcms/prettier-config": "0.1.0"
   },
   "prettier": "@lzcms/prettier-config",
   "scripts": {

package/templates/default/app/(auth)/auth/login/LoginPage.tsx

@@ -3,7 +3,7 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useI18n } from 'nextjs-cms/translations/client'
-import InfoCard from '@/components/InfoCard'
+import InfoCard from '@/components/feedback/info-card'
 import Link from 'next/link'
 import { Switch } from '@/components/ui/switch'
 import { Label } from '@/components/ui/label'
@@ -12,7 +12,7 @@ import { MoonIcon, SunIcon } from '@radix-ui/react-icons'
 import { useTheme } from 'next-themes'
 import { login, useSession } from 'nextjs-cms/auth/react'
 import { wasLanguageChangedOnLogin } from 'nextjs-cms/translations'
-import LoginLanguageDropdown from '@/components/login-language-dropdown'
+import LoginLanguageDropdown from '@/components/i18n/login-language-dropdown'
 import { useAuthLanguage } from '../../auth-language-provider'
 
 type fromErrors = {

package/templates/default/app/(auth)/layout.tsx

@@ -3,7 +3,7 @@ import { cookies } from 'next/headers'
 import '../globals.css'
 import type { Metadata } from 'next'
 import { cn } from '@/lib/utils'
-import { ThemeProvider } from '@/components/ThemeProvider'
+import { ThemeProvider } from '@/components/layout/theme-provider'
 import Providers from '@/app/providers'
 import auth from 'nextjs-cms/auth'
 import { getCMSConfig } from 'nextjs-cms/core'

package/templates/default/app/(rootLayout)/(plugins)/[...slug]/page.tsx

@@ -1,40 +1,47 @@
-import { notFound } from 'next/navigation'
-import auth from 'nextjs-cms/auth'
-import { getAdminPrivileges } from 'nextjs-cms/api/helpers'
-import { findPluginRouteByPath, isDashboardOverridePlugin } from 'nextjs-cms/plugins/server'
-import { getPluginServerComponent } from './plugin-server-registry'
-
-export const dynamic = 'force-dynamic'
-type Params = Promise<{ slug?: string[] }>
-
-export default async function Page(props: { params: Params }) {
-    const params = await props.params
-    const slug = params.slug ?? []
-
-    const path = `/${slug.join('/')}`
-    const session = await auth()
-    if (!session?.user) {
-        notFound()
-    }
-
-    const plugin = await findPluginRouteByPath(path)
-    if (!plugin) {
-        notFound()
-    }
-
-    // Bypass privilege check for dashboard override plugin
-    const isDashboardPlugin = await isDashboardOverridePlugin(plugin.pluginName)
-    if (!isDashboardPlugin) {
-        const privilegeSet = await getAdminPrivileges(session.user.id)
-        if (!privilegeSet.has(plugin.pluginName)) {
-            notFound()
-        }
-    }
-
-    const PluginComponent = await getPluginServerComponent(plugin.pluginRegistryName, plugin.component)
-    if (!PluginComponent) {
-        notFound()
-    }
-
-    return <PluginComponent />
-}
+import { notFound } from 'next/navigation'
+import auth from 'nextjs-cms/auth'
+import { getAdminPrivileges } from 'nextjs-cms/api/server/actions'
+import { findPluginRouteByPath, isDashboardOverridePlugin, runRoutePrefetches } from 'nextjs-cms/plugins/server'
+import { api, HydrateClient } from '@/app/_trpc/server'
+import { getPluginServerComponent } from './plugin-server-registry'
+
+export const dynamic = 'force-dynamic'
+type Params = Promise<{ slug?: string[] }>
+
+export default async function Page(props: { params: Params }) {
+    const params = await props.params
+    const slug = params.slug ?? []
+
+    const path = `/${slug.join('/')}`
+    const session = await auth()
+    if (!session?.user) {
+        notFound()
+    }
+
+    const plugin = await findPluginRouteByPath(path)
+    if (!plugin) {
+        notFound()
+    }
+
+    // Bypass privilege check for dashboard override plugin
+    const isDashboardPlugin = await isDashboardOverridePlugin(plugin.pluginName)
+    if (!isDashboardPlugin) {
+        const privilegeSet = await getAdminPrivileges(session.user.id)
+        if (!privilegeSet.has(plugin.pluginName)) {
+            notFound()
+        }
+    }
+
+    const PluginComponent = await getPluginServerComponent(plugin.pluginName, plugin.component)
+    if (!PluginComponent) {
+        notFound()
+    }
+
+    await runRoutePrefetches(api, plugin)
+
+    return (
+        <HydrateClient>
+            <PluginComponent />
+        </HydrateClient>
+    )
+}

package/templates/default/app/(rootLayout)/(plugins)/[...slug]/plugin-server-registry.ts

@@ -1,22 +1,22 @@
-import dynamic from 'next/dynamic'
-
+import type { ComponentType } from 'react'
+
 export const pluginNamesMap: Record<string, string> = {
     'cpanel-dashboard': '@nextjscms/plugin-cpanel-dashboard/server',
     'cpanel-emails': '@nextjscms/plugin-cpanel-emails/server',
     'google-analytics': '@nextjscms/plugin-google-analytics/server',
     // A workaround to avoid importing error if no plugins are installed
     blank: 'nextjs-cms/plugins/blank-component',
-}
-
-export const getPluginServerComponent = async (registryName: string, componentName: string | undefined) => {
-    const pluginName = pluginNamesMap[registryName]
-    const ClientComponent = dynamic(
-        () =>
-            import(pluginName ?? 'nextjs-cms/plugins/blank-component').then((mod) =>
-                componentName ? mod[componentName] : mod.default,
-            ),
-        { ssr: true },
-    )
-
-    return ClientComponent
-}
+}
+
+export const getPluginServerComponent = async (
+    pluginName: string,
+    componentName: string | undefined,
+): Promise<ComponentType | null> => {
+    const modulePath = pluginNamesMap[pluginName] ?? pluginNamesMap.blank
+    if (!modulePath) return null
+
+    const mod = (await import(modulePath)) as Record<string, unknown>
+    const component = (componentName ? mod[componentName] : mod.default) as ComponentType | undefined
+
+    return component ?? null
+}

package/templates/default/app/(rootLayout)/admins/page.tsx

@@ -1,5 +1,5 @@
-import AdminsPage from '@/components/AdminsPage'
-import { api, HydrateClient } from 'nextjs-cms/api/trpc/server'
+import AdminsPage from '@/components/pages/admins-page'
+import { api, HydrateClient } from '@/app/_trpc/server'
 export default async function Page() {
     await api.admins.list.prefetch()
     return (

package/templates/default/app/(rootLayout)/browse/[section]/[page]/page.tsx

@@ -1,5 +1,5 @@
-import BrowsePage from '@/components/BrowsePage'
-import { api, HydrateClient } from 'nextjs-cms/api/trpc/server'
+import BrowsePage from '@/components/pages/browse-page'
+import { api, HydrateClient } from '@/app/_trpc/server'
 type Params = Promise<{ section: string; page: string }>
 type SearchParams = Promise<{ q: string | undefined }>
 export default async function Page(props: { params: Params; searchParams: SearchParams }) {

package/templates/default/app/(rootLayout)/categorized/[section]/page.tsx

@@ -1,5 +1,5 @@
-import CategorizedSectionPage from '@/components/CategorizedSectionPage'
-import { api, HydrateClient } from 'nextjs-cms/api/trpc/server'
+import CategorizedSectionPage from '@/components/pages/categorized-section-page'
+import { api, HydrateClient } from '@/app/_trpc/server'
 type Params = Promise<{ section: string }>
 
 export default async function Page(props: { params: Params }) {

package/templates/default/app/(rootLayout)/dashboard/page.tsx

@@ -1,4 +1,5 @@
-import { getDashboardOverride } from 'nextjs-cms/plugins/server'
+import { getDashboardOverride, runRoutePrefetches } from 'nextjs-cms/plugins/server'
+import { api, HydrateClient } from '@/app/_trpc/server'
 import { getPluginServerComponent } from '../(plugins)/[...slug]/plugin-server-registry'
 
 export const dynamic = 'force-dynamic'
@@ -54,10 +55,16 @@ export default async function DashboardPage() {
     }
 
     // Render the override plugin component (no privilege check for dashboard override)
-    const PluginComponent = await getPluginServerComponent(override.pluginRegistryName, override.component)
+    const PluginComponent = await getPluginServerComponent(override.pluginName, override.component)
     if (!PluginComponent) {
         return <DefaultDashboard />
     }
 
-    return <PluginComponent />
+    await runRoutePrefetches(api, override)
+
+    return (
+        <HydrateClient>
+            <PluginComponent />
+        </HydrateClient>
+    )
 }

package/templates/default/app/(rootLayout)/edit/[section]/[itemId]/page.tsx

@@ -1,5 +1,5 @@
-import ItemEditPage from '@/components/ItemEditPage'
-import { api, HydrateClient } from 'nextjs-cms/api/trpc/server'
+import ItemEditPage from '@/components/pages/item-edit-page'
+import { api, HydrateClient } from '@/app/_trpc/server'
 type Params = Promise<{ section: string; itemId: string }>
 type SearchParams = Promise<{ locale?: string }>
 

package/templates/default/app/(rootLayout)/layout.tsx

@@ -2,15 +2,15 @@ import { Inter, Cairo } from 'next/font/google'
 import '../globals.css'
 import type { Metadata } from 'next'
 import { cn } from '@/lib/utils'
-import { ThemeProvider } from '@/components/ThemeProvider'
+import { ThemeProvider } from '@/components/layout/theme-provider'
 import Providers from '@/app/providers'
 import auth from 'nextjs-cms/auth'
 import { getCMSConfig } from 'nextjs-cms/core'
 import { I18nProviderClient } from 'nextjs-cms/translations/client'
 import { resolveLanguage, RTL_LANGUAGES } from 'nextjs-cms/translations'
 import { getClientDictionaries } from 'nextjs-cms/translations/server'
-import { api, HydrateClient } from 'nextjs-cms/api/trpc/server'
-import Layout from '@/components/Layout'
+import { api, HydrateClient } from '@/app/_trpc/server'
+import Layout from '@/components/layout/layout'
 import { redirect } from 'next/navigation'
 import { DirectionProvider } from "@/components/ui/direction"
 

package/templates/default/app/(rootLayout)/loading.tsx

@@ -1,4 +1,4 @@
-import LoadingSpinners from '@/components/LoadingSpinners'
+import LoadingSpinners from '@/components/feedback/loading-spinners'
 
 export default function Loading() {
     // You can add any UI inside Loading, including a Skeleton.

package/templates/default/app/(rootLayout)/log/page.tsx

@@ -1,4 +1,4 @@
-import LogPage from '@/components/LogPage'
+import LogPage from '@/components/pages/log-page'
 
 export const dynamic = 'force-dynamic'
 

package/templates/default/app/(rootLayout)/new/[section]/page.tsx

@@ -1,5 +1,5 @@
-import NewPage from '@/components/NewPage'
-import { api, HydrateClient } from 'nextjs-cms/api/trpc/server'
+import NewPage from '@/components/pages/new-page'
+import { api, HydrateClient } from '@/app/_trpc/server'
 type Params = Promise<{ section: string }>
 
 export default async function Page(props: { params: Params }) {

package/templates/default/app/(rootLayout)/section/[section]/page.tsx

@@ -1,5 +1,5 @@
-import SectionPage from '@/components/SectionPage'
-import { api, HydrateClient } from 'nextjs-cms/api/trpc/server'
+import SectionPage from '@/components/pages/section-page'
+import { api, HydrateClient } from '@/app/_trpc/server'
 type Params = Promise<{ section: string }>
 type SearchParams = Promise<{ locale?: string }>
 

package/templates/default/app/(rootLayout)/settings/page.tsx

@@ -1,5 +1,5 @@
-import SettingsPage from '@/components/SettingsPage'
-import { api, HydrateClient } from 'nextjs-cms/api/trpc/server'
+import SettingsPage from '@/components/pages/settings-page'
+import { api, HydrateClient } from '@/app/_trpc/server'
 
 export const dynamic = 'force-dynamic'
 

package/templates/default/app/_trpc/client.tsx

@@ -0,0 +1,6 @@
+'use client'
+
+import { createNextjsCmsClient } from 'nextjs-cms/api/client'
+import type { AppRouter } from './server'
+
+export const { trpc, NextjsCmsProvider } = createNextjsCmsClient<AppRouter>()

package/templates/default/app/_trpc/server.ts

@@ -0,0 +1,9 @@
+import 'server-only'
+
+import { createTRPCRouter } from 'nextjs-cms/api/server'
+
+export const trpc = createTRPCRouter()
+
+export type AppRouter = typeof trpc.appRouter
+
+export const { api, HydrateClient } = trpc

package/templates/default/app/_trpc/types.ts

@@ -0,0 +1,6 @@
+import type { inferRouterInputs, inferRouterOutputs } from '@trpc/server'
+
+import type { AppRouter } from './server'
+
+export type RouterInputs = inferRouterInputs<AppRouter>
+export type RouterOutputs = inferRouterOutputs<AppRouter>

package/templates/default/app/api/document/route.ts

@@ -7,7 +7,7 @@ import { SectionFactory } from 'nextjs-cms/core/factories'
 import type { DocumentFieldConfigType } from 'nextjs-cms/core/fields'
 import auth from 'nextjs-cms/auth'
 import { sanitizeFileName, sanitizeFolderOrFileName } from 'nextjs-cms/utils'
-import { streamFile } from 'nextjs-cms/api/helpers'
+import { streamFile } from 'nextjs-cms/api/server/actions'
 import { getCMSConfig } from 'nextjs-cms/core/config'
 
 /**

package/templates/default/app/api/photo/route.ts

@@ -1,5 +1,5 @@
 import { NextRequest, NextResponse } from 'next/server'
-import { getPhoto } from 'nextjs-cms/api/helpers'
+import { getPhoto } from 'nextjs-cms/api/server/actions'
 
 export async function GET(request: NextRequest) {
     const searchParams = request.nextUrl.searchParams

package/templates/default/app/api/trpc/[trpc]/route.ts

@@ -1,33 +1,3 @@
-import { fetchRequestHandler } from '@trpc/server/adapters/fetch'
-import { createTRPCContext, getAppRouter } from 'nextjs-cms/api'
-import { NextRequest } from 'next/server'
-
-/**
- * This wraps the `createContext` helper and provides the required context for the tRPC API when
- * handling a HTTP request (e.g. when you make requests from Client Components).
- */
-
-const context = async (req: NextRequest) => {
-    return createTRPCContext({
-        headers: req.headers,
-    })
-}
-
-const handler = async (req: NextRequest) =>
-    fetchRequestHandler({
-        endpoint: '/api/trpc',
-        req,
-        router: await getAppRouter(),
-        createContext: () => context(req),
-        /*onError(opts) {
-            return opts.error
-        },*/
-        onError:
-            process.env.NODE_ENV === 'development'
-                ? ({ path, error }) => {
-                      console.error(`❌ tRPC failed on ${path ?? '<no-path>'}: ${error.message}`)
-                  }
-                : undefined,
-    })
-
-export { handler as GET, handler as POST }
+import { trpc } from '@/app/_trpc/server'
+
+export const { GET, POST } = trpc.handler

package/templates/default/app/api/video/route.ts

@@ -7,7 +7,7 @@ import { SectionFactory } from 'nextjs-cms/core/factories'
 import type { VideoField } from 'nextjs-cms/core/fields'
 import auth from 'nextjs-cms/auth'
 import { sanitizeFileName, sanitizeFolderOrFileName } from 'nextjs-cms/utils'
-import { streamFile } from 'nextjs-cms/api/helpers'
+import { streamFile } from 'nextjs-cms/api/server/actions'
 import { getCMSConfig } from 'nextjs-cms/core/config'
 
 /**

package/templates/default/app/providers.tsx

@@ -1,152 +1,20 @@
-'use client'
-
-import { QueryClient, QueryClientProvider, defaultShouldDehydrateQuery } from '@tanstack/react-query'
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-import { ModalProvider } from '@/context/ModalProvider'
-import { trpc } from '@/app/_trpc/client'
-import { httpBatchLink, loggerLink } from '@trpc/client'
-import SuperJSON from 'superjson'
-import { useState } from 'react'
-import { getCsrfToken, SessionProvider, refreshTokenLink } from 'nextjs-cms/auth/react'
-import { Session } from 'nextjs-cms/auth'
-
-function MakeTrpcClient() {
-    const [trpcClient] = useState(() =>
-        trpc.createClient({
-            links: [
-                /**
-                 * The refresh token link will automatically refresh the access token if it's expired.
-                 * It fetches the new access token using the refresh token by calling the `/api/auth/refresh` endpoint.
-                 */
-                refreshTokenLink(),
-                /**
-                 * The logger link will log all the operations that are being sent to the server.
-                 * @see https://trpc.io/docs/client/links/loggerLink
-                 */
-                loggerLink({
-                    enabled: (op) =>
-                        process.env.NODE_ENV === 'development' ||
-                        (op.direction === 'down' && op.result instanceof Error),
-                }),
-
-                /**
-                 * The HTTP batch link is used to send multiple operations in a single HTTP request,
-                 * but doesn't wait for all the responses of the batch to be ready,
-                 * and streams the responses as soon as any data is available.
-                 * @see https://trpc.io/docs/client/links/httpBatchStreamLink
-                 *
-                 * TODO: The stream link is somehow causing empty responses before the actual response!
-                 */
-                /*unstable_httpBatchStreamLink({
-                    transformer: superjson,
-                    url: '/api/trpc',
-                    // You can pass any HTTP headers you wish here
-                    async headers() {
-                        const headers = new Headers()
-                        headers.set('x-trpc-source', 'nextjs-react')
-                        headers.set('Authorization', `Bearer ${authStore.state.accessToken}`)
-                        return headers
-                    },
-                }),*/
-
-                /**
-                 * The HTTP batch link is used to send multiple operations in a single HTTP request.
-                 * @see https://trpc.io/docs/client/links/httpBatchLink
-                 */
-                httpBatchLink({
-                    transformer: SuperJSON,
-                    url: '/api/trpc',
-                    // You can pass any HTTP headers you wish here
-                    async headers(op) {
-                        const headers = new Headers()
-                        /**
-                         * Check if there are any mutations in the operations list
-                         */
-                        if (op.opList.some((o) => o.type === 'mutation')) {
-                            /**
-                             * Get the CSRF token, and set it in the headers
-                             */
-                            const csrfToken = await getCsrfToken()
-                            headers.set('x-csrf-token', csrfToken)
-                        }
-
-                        headers.set('x-trpc-source', 'nextjs-react')
-
-                        return headers
-                    },
-                }),
-            ],
-        }),
-    )
-
-    return trpcClient
-}
-
-function createQueryClient() {
-    return new QueryClient({
-        defaultOptions: {
-            queries: {
-                // With SSR, we usually want to set some default staleTime
-                // above 0 to avoid refetching immediately on the client
-                /**
-                 * It's better to leave the staleTime to 0 to always fetch the latest data in a cms
-                 */
-                // staleTime: 3 * 1000,
-                /**
-                 * We want to refetch on window focus in development only
-                 */
-                refetchOnWindowFocus: process.env.NODE_ENV === 'development' ? true : false,
-                retry: 1, // default: 3
-            },
-            dehydrate: {
-                serializeData: SuperJSON.serialize,
-                shouldDehydrateQuery: (query) => defaultShouldDehydrateQuery(query) || query.state.status === 'pending',
-            },
-            hydrate: {
-                deserializeData: SuperJSON.deserialize,
-            },
-        },
-    })
-}
-
-let browserQueryClient: QueryClient | undefined = undefined
-
-function getQueryClient() {
-    if (typeof window === 'undefined') {
-        // Server: always make a new query client
-        return createQueryClient()
-    } else {
-        // Browser: make a new query client if we don't already have one
-        // This is very important so we don't re-make a new client if React
-        // suspends during the initial render. This may not be needed if we
-        // have a suspense boundary BELOW the creation of the query client
-        if (!browserQueryClient) browserQueryClient = createQueryClient()
-        return browserQueryClient
-    }
-}
-
-export default function Providers({ children, session }: { children: React.ReactNode; session: Session | undefined }) {
-    // NOTE: Avoid useState when initializing the query client if you don't
-    //       have a suspense boundary between this and the code that may
-    //       suspend because React will throw away the client on the initial
-    //       render if it suspends and there is no boundary
-    const queryClient = getQueryClient()
-    // const trpcClient = getTrpcClient()
-    const trpcClient = MakeTrpcClient()
-
-    return (
-        <QueryClientProvider client={queryClient}>
-            <trpc.Provider client={trpcClient} queryClient={queryClient}>
-                <SessionProvider
-                    session={session}
-                    refetchOnWindowFocus={false}
-                    refetchInterval={0}
-                    refetchWhenOffline={false}
-                >
-                    <ModalProvider>{children}</ModalProvider>
-                </SessionProvider>
-                <ReactQueryDevtools initialIsOpen={false} />
-            </trpc.Provider>
-        </QueryClientProvider>
-    )
-}
+'use client'
+
+import type { Session } from 'nextjs-cms/auth'
+import { NextjsCmsProvider } from '@/app/_trpc/client'
+import { ModalProvider } from '@/components/feedback/modal-context'
+
+export default function Providers({ children, session }: { children: React.ReactNode; session: Session | undefined }) {
+    return (
+        <NextjsCmsProvider
+            session={session}
+            sessionOptions={{
+                refetchOnWindowFocus: false,
+                refetchInterval: 0,
+                refetchWhenOffline: false,
+            }}
+        >
+            <ModalProvider>{children}</ModalProvider>
+        </NextjsCmsProvider>
+    )
+}

package/templates/default/cms.config.ts

@@ -1,5 +1,7 @@
-import { defineConfig } from 'nextjs-cms/core/config'
+import { defineConfig } from 'nextjs-cms/core/config'
+import process from 'process'
 import { resolve } from 'path'
+import { env } from './env/env'
 
 export default defineConfig({
     ui: {
@@ -17,7 +19,7 @@ export default defineConfig({
     media: {
         upload: {
             path:
-                process.env.NODE_ENV === 'development'
+                env.NODE_ENV === 'development'
                     ? 'D:/Work/WebstormProjects/turbo-expo-next/apps/web/public/content/'
                     : '/home2/syriasell/public_html/assets/content',
             preserveExtension: true,

package/templates/default/components/{AdminCard.tsx → admin/admin-card.tsx}

@@ -1,8 +1,8 @@
 import { useI18n } from 'nextjs-cms/translations/client'
 import React from 'react'
-import useModal from '@/hooks/useModal'
-import ProtectedImage from '@/components/ProtectedImage'
-import AdminEditPage from '@/components/AdminEditPage'
+import { useModal } from '@/components/feedback/modal-context'
+import ProtectedImage from '@/components/media/protected-image'
+import AdminEditPage from '@/components/admin/admin-edit-page'
 import { useToast } from '@/components/ui/use-toast'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
@@ -10,7 +10,7 @@ import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { trpc } from '@/app/_trpc/client'
 import Image from 'next/image'
-import type { RouterOutputs } from 'nextjs-cms/api'
+import type { RouterOutputs } from '@/app/_trpc/types'
 export default function AdminCard({
     admin,
     action,

package/templates/default/components/{AdminEditPage.tsx → admin/admin-edit-page.tsx}

@@ -1,9 +1,9 @@
 import { useI18n } from 'nextjs-cms/translations/client'
 import React from 'react'
-import useModal from '@/hooks/useModal'
+import { useModal } from '@/components/feedback/modal-context'
 import { trpc } from '@/app/_trpc/client'
-import AdminRoleCard from './AdminPrivilegeCard'
-import LoadingSpinners from './LoadingSpinners'
+import AdminRoleCard from '@/components/admin/admin-privilege-card'
+import LoadingSpinners from '@/components/feedback/loading-spinners'
 import { Button } from '@/components/ui/button'
 
 export default function AdminEditPage({ id, action }: { id: string; action: any }) {

package/templates/default/components/{AdminPrivilegeCard.tsx → admin/admin-privilege-card.tsx}

@@ -5,7 +5,7 @@ import React, { useEffect } from 'react'
 import { useI18n } from 'nextjs-cms/translations/client'
 import { Badge } from '@/components/ui/badge'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
-import type { RouterOutputs } from 'nextjs-cms/api'
+import type { RouterOutputs } from '@/app/_trpc/types'
 
 export default function AdminRoleCard({
     privilege,