create-nextjs-cms 0.5.90 → 0.5.92

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nextjs-cms",
-  "version": "0.5.90",
+  "version": "0.5.92",
   "private": false,
   "type": "module",
   "bin": {
@@ -28,9 +28,9 @@
     "prettier": "^3.3.3",
     "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/eslint-config": "0.3.0"
   },
   "prettier": "@lzcms/prettier-config",
   "scripts": {

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

@@ -1,23 +1,49 @@
-import { NextRequest } from 'next/server'
-import auth from 'nextjs-cms/auth'
-import { deleteSession, login } from 'nextjs-cms/auth/actions'
-
-export async function POST(request: NextRequest) {
-    const { username, password } = await request.json()
-    try {
-        const loginResult = await login({ username, password })
-        return Response.json(loginResult, { status: 200 })
-    } catch (error: any) {
-        return Response.json({ error: error.message }, { status: 400 })
-    }
-}
-
-export async function DELETE() {
-    const session = await auth()
-    try {
-        const loginResult = await deleteSession(session)
-        return Response.json(loginResult, { status: 200 })
-    } catch (error: any) {
-        return Response.json({ error: error.message }, { status: 400 })
-    }
-}
+import { NextRequest } from 'next/server'
+import auth from 'nextjs-cms/auth'
+import { deleteSession, login } from 'nextjs-cms/auth/actions'
+import { getRequestMetadataFromHeaders, recordLog } from 'nextjs-cms/logging'
+
+export async function POST(request: NextRequest) {
+    const { username, password } = await request.json()
+    try {
+        const loginResult = await login({ username, password })
+        const requestMetadata = getRequestMetadataFromHeaders(request.headers)
+
+        await recordLog({
+            eventType: 'auth.login',
+            actorId: loginResult.user?.id ?? null,
+            actorUsername: loginResult.user?.username ?? null,
+            entityType: 'admin',
+            entityId: loginResult.user?.id ?? null,
+            entityLabel: loginResult.user?.username ?? null,
+            sectionName: 'auth',
+            requestMetadata,
+        })
+        return Response.json(loginResult, { status: 200 })
+    } catch (error: any) {
+        return Response.json({ error: error.message }, { status: 400 })
+    }
+}
+
+export async function DELETE(request: NextRequest) {
+    const session = await auth()
+    try {
+        const loginResult = await deleteSession(session)
+        if (session?.user?.id) {
+            const requestMetadata = getRequestMetadataFromHeaders(request.headers)
+            await recordLog({
+                eventType: 'auth.logout',
+                actorId: session.user.id,
+                actorUsername: session.user.name ?? null,
+                entityType: 'admin',
+                entityId: session.user.id,
+                entityLabel: session.user.name ?? null,
+                sectionName: 'auth',
+                requestMetadata,
+            })
+        }
+        return Response.json(loginResult, { status: 200 })
+    } catch (error: any) {
+        return Response.json({ error: error.message }, { status: 400 })
+    }
+}

package/templates/default/app/api/submit/section/item/[slug]/route.ts

@@ -1,6 +1,7 @@
-import { NextRequest, NextResponse } from 'next/server'
-import { EditSubmit } from 'nextjs-cms/core/submit'
-import auth from 'nextjs-cms/auth'
+import { NextRequest, NextResponse } from 'next/server'
+import { EditSubmit } from 'nextjs-cms/core/submit'
+import auth from 'nextjs-cms/auth'
+import { getRequestMetadataFromHeaders } from 'nextjs-cms/logging'
 
 export async function PUT(request: NextRequest, { params }: { params: Promise<{ slug: string }> }) {
     const session = await auth()
@@ -24,9 +25,10 @@ export async function PUT(request: NextRequest, { params }: { params: Promise<{
         )
     }
 
-    const user = session.user
-    const formData = await request.formData()
-    const sectionName = formData.get('sectionName') as string | null
+    const user = session.user
+    const formData = await request.formData()
+    const sectionName = formData.get('sectionName') as string | null
+    const requestMetadata = getRequestMetadataFromHeaders(request.headers)
 
     if (!sectionName) {
         return NextResponse.json(
@@ -37,12 +39,13 @@ export async function PUT(request: NextRequest, { params }: { params: Promise<{
         )
     }
 
-    const submit = new EditSubmit({
-        itemId: itemId as string,
-        sectionName,
-        user,
-        postData: formData,
-    })
+    const submit = new EditSubmit({
+        itemId: itemId as string,
+        sectionName,
+        user,
+        postData: formData,
+        requestMetadata,
+    })
 
     await submit.initialize()
     await submit.submit()

package/templates/default/app/api/submit/section/item/route.ts

@@ -1,6 +1,7 @@
-import { NextRequest, NextResponse } from 'next/server'
-import { NewSubmit } from 'nextjs-cms/core/submit'
-import auth from 'nextjs-cms/auth'
+import { NextRequest, NextResponse } from 'next/server'
+import { NewSubmit } from 'nextjs-cms/core/submit'
+import auth from 'nextjs-cms/auth'
+import { getRequestMetadataFromHeaders } from 'nextjs-cms/logging'
 
 export async function POST(request: NextRequest) {
     const session = await auth()
@@ -14,9 +15,10 @@ export async function POST(request: NextRequest) {
         )
     }
 
-    const user = session.user
-    const formData = await request.formData()
-    const sectionName = formData.get('sectionName') as string | null
+    const user = session.user
+    const formData = await request.formData()
+    const sectionName = formData.get('sectionName') as string | null
+    const requestMetadata = getRequestMetadataFromHeaders(request.headers)
 
     if (!sectionName) {
         return NextResponse.json(
@@ -27,11 +29,12 @@ export async function POST(request: NextRequest) {
         )
     }
 
-    const submit = new NewSubmit({
-        sectionName,
-        user,
-        postData: formData,
-    })
+    const submit = new NewSubmit({
+        sectionName,
+        user,
+        postData: formData,
+        requestMetadata,
+    })
 
     await submit.initialize()
     await submit.submit()

package/templates/default/app/api/submit/section/simple/route.ts

@@ -1,6 +1,7 @@
-import { NextRequest, NextResponse } from 'next/server'
-import { SimpleSectionSubmit } from 'nextjs-cms/core/submit'
-import auth from 'nextjs-cms/auth'
+import { NextRequest, NextResponse } from 'next/server'
+import { SimpleSectionSubmit } from 'nextjs-cms/core/submit'
+import auth from 'nextjs-cms/auth'
+import { getRequestMetadataFromHeaders } from 'nextjs-cms/logging'
 
 export async function PUT(request: NextRequest) {
     const session = await auth()
@@ -14,9 +15,10 @@ export async function PUT(request: NextRequest) {
         )
     }
 
-    const user = session.user
-    const formData = await request.formData()
-    const sectionName = formData.get('sectionName') as string | null
+    const user = session.user
+    const formData = await request.formData()
+    const sectionName = formData.get('sectionName') as string | null
+    const requestMetadata = getRequestMetadataFromHeaders(request.headers)
 
     if (!sectionName) {
         return NextResponse.json(
@@ -27,12 +29,13 @@ export async function PUT(request: NextRequest) {
         )
     }
 
-    const submit = new SimpleSectionSubmit({
-        itemId: '1',
-        sectionName,
-        user,
-        postData: formData,
-    })
+    const submit = new SimpleSectionSubmit({
+        itemId: '1',
+        sectionName,
+        user,
+        postData: formData,
+        requestMetadata,
+    })
 
     await submit.initialize()
     await submit.submit()

package/templates/default/components/LogPage.tsx

@@ -1,15 +1,92 @@
-'use client'
-
-import getString from 'nextjs-cms/translations'
-
-export default function LogPage() {
-    return (
-        <div className='w-full'>
-            <div className='text-foreground bg-linear-to-r from-sky-200 via-emerald-300 to-blue-600 p-8 font-extrabold dark:from-blue-800 dark:via-amber-700 dark:to-rose-900'>
-                <h1 className='text-3xl'>{getString('logs')}</h1>
-            </div>
-
-            <div className='flex flex-col gap-2 p-4'></div>
-        </div>
-    )
-}
+'use client'
+
+import getString from 'nextjs-cms/translations'
+import { trpc } from '@/app/_trpc/client'
+import { Badge } from '@/components/ui/badge'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+
+type LogMetadata = {
+    fields?: string[]
+    previousUsername?: string
+    newUsername?: string
+}
+
+const formatTimestamp = (value: Date | string | null) => {
+    if (!value) return ''
+    const date = value instanceof Date ? value : new Date(value)
+    if (Number.isNaN(date.getTime())) return ''
+    return date.toLocaleString()
+}
+
+const parseMetadata = (metadata?: string | null): LogMetadata | null => {
+    if (!metadata) return null
+    try {
+        return JSON.parse(metadata) as LogMetadata
+    } catch (error) {
+        return null
+    }
+}
+
+export default function LogPage() {
+    const [data] = trpc.logs.list.useSuspenseQuery({
+        limit: 50,
+        offset: 0,
+    })
+
+    const logs = data?.items ?? []
+    return (
+        <div className='w-full'>
+            <div className='text-foreground bg-linear-to-r from-sky-200 via-emerald-300 to-blue-600 p-8 font-extrabold dark:from-blue-800 dark:via-amber-700 dark:to-rose-900'>
+                <h1 className='text-3xl'>{getString('logs')}</h1>
+            </div>
+
+            <div className='flex flex-col gap-4 p-4'>
+                <Table>
+                    <TableHeader>
+                        <TableRow>
+                            <TableHead>{getString('date')}</TableHead>
+                            <TableHead>{getString('action')}</TableHead>
+                            <TableHead>{getString('admin')}</TableHead>
+                            <TableHead>{getString('section')}</TableHead>
+                            <TableHead>{getString('details')}</TableHead>
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                        {logs.length === 0 ? (
+                            <TableRow>
+                                <TableCell colSpan={5} className='text-muted-foreground text-center'>
+                                    {getString('no_data')}
+                                </TableCell>
+                            </TableRow>
+                        ) : (
+                            logs.map((log) => {
+                                const metadata = parseMetadata(log.metadata)
+                                const fields = metadata?.fields?.length ? metadata.fields.join(', ') : null
+                                const usernameChange =
+                                    metadata?.previousUsername && metadata?.newUsername
+                                        ? `${metadata.previousUsername} -> ${metadata.newUsername}`
+                                        : null
+
+                                return (
+                                    <TableRow key={log.id}>
+                                        <TableCell>{formatTimestamp(log.createdAt)}</TableCell>
+                                        <TableCell>
+                                            <Badge variant='outline'>{log.eventType}</Badge>
+                                        </TableCell>
+                                        <TableCell>{log.actorUsername || log.actorId || '-'}</TableCell>
+                                        <TableCell>{log.sectionName || '-'}</TableCell>
+                                        <TableCell className='text-muted-foreground'>
+                                            {log.entityLabel || log.entityId || '-'}
+                                            {fields ? ` | ${fields}` : ''}
+                                            {usernameChange ? ` | ${usernameChange}` : ''}
+                                        </TableCell>
+                                    </TableRow>
+                                )
+                            })
+                        )}
+                    </TableBody>
+                </Table>
+            </div>
+        </div>
+    )
+}

package/templates/default/components/Navbar.tsx

@@ -4,7 +4,9 @@ import { MoonIcon, SunIcon, BellIcon, HamburgerMenuIcon } from '@radix-ui/react-
 import { useTheme } from 'next-themes'
 import Link from 'next/link'
 import getString from 'nextjs-cms/translations'
+import { trpc } from '@/app/_trpc/client'
 import ProtectedImage from '@/components/ProtectedImage'
+import { Spinner } from '@/components/ui/spinner'
 import Image from 'next/image'
 import { LogOut, Settings } from 'lucide-react'
 
@@ -29,10 +31,34 @@ type Props = {
     onMenuButtonClick(): void
 }
 
+const formatTimestamp = (value?: Date | string | null) => {
+    if (!value) return ''
+    const date = value instanceof Date ? value : new Date(value)
+    if (Number.isNaN(date.getTime())) return ''
+    return date.toLocaleString()
+}
+
 export default function Navbar(props: Props) {
     const { theme, setTheme } = useTheme()
     const session = useSession()
     const { toast } = useToast()
+    const logsQuery = trpc.logs.list.useQuery(
+        {
+            limit: 20,
+            offset: 0,
+        },
+        {
+            enabled: false,
+        },
+    )
+
+    const handleNotificationsOpenChange = (open: boolean) => {
+        if (open) {
+            void logsQuery.refetch()
+        }
+    }
+
+    const logs = logsQuery.data?.items ?? []
     const handleLogout = async (e: React.MouseEvent<HTMLDivElement>) => {
         e.preventDefault()
         e.stopPropagation()
@@ -85,17 +111,61 @@ export default function Navbar(props: Props) {
                         <div className=''>
                             <div className='ml-4 flex items-center md:ml-6'>
                                 <div className='flex flex-row items-center gap-3'>
-                                    <DropdownMenu>
+                                    <DropdownMenu onOpenChange={handleNotificationsOpenChange}>
                                         <DropdownMenuTrigger
                                             asChild
                                             className='text-foreground hover:text-foreground/90 cursor-pointer'
                                         >
                                             <BellIcon className='h-6 w-6' />
                                         </DropdownMenuTrigger>
-                                        <DropdownMenuContent className='mt-2 w-[300px]'>
+                                        <DropdownMenuContent
+                                            sideOffset={20}
+                                            align='end'
+                                            side='bottom'
+                                            alignOffset={-20}
+                                            className='w-[400px] max-w-full ring-1 ring-sky-400/80 dark:ring-amber-900'
+                                        >
                                             <DropdownMenuLabel>{getString('notifications')}</DropdownMenuLabel>
                                             <DropdownMenuSeparator />
-                                            <DropdownMenuGroup></DropdownMenuGroup>
+                                            <DropdownMenuGroup className='max-h-[320px] overflow-y-auto'>
+                                                {logsQuery.isFetching && logs.length === 0 ? (
+                                                    <DropdownMenuItem disabled className='flex items-center gap-2'>
+                                                        <Spinner className='size-3' />
+                                                        <span>{getString('loading')}</span>
+                                                    </DropdownMenuItem>
+                                                ) : logsQuery.isError ? (
+                                                    <DropdownMenuItem disabled>
+                                                        {getString('server_error')}
+                                                    </DropdownMenuItem>
+                                                ) : logs.length === 0 ? (
+                                                    <DropdownMenuItem disabled>{getString('no_data')}</DropdownMenuItem>
+                                                ) : (
+                                                    logs.map((log) => {
+                                                        const actorLabel = log.actorUsername || log.actorId || ''
+                                                        const contextLabel = log.entityLabel || log.sectionName || ''
+                                                        const timestamp = formatTimestamp(log.createdAt)
+                                                        const detailParts: string[] = []
+                                                        if (actorLabel) detailParts.push(actorLabel)
+                                                        if (contextLabel) detailParts.push(contextLabel)
+                                                        if (timestamp) detailParts.push(timestamp)
+                                                        const details = detailParts.join(' | ') || '-'
+
+                                                        return (
+                                                            <DropdownMenuItem
+                                                                key={log.id}
+                                                                className='flex flex-col items-start gap-1 py-2'
+                                                            >
+                                                                <span className='w-full truncate text-sm font-medium'>
+                                                                    {log.eventType}
+                                                                </span>
+                                                                <span className='text-muted-foreground w-full truncate text-xs'>
+                                                                    {details}
+                                                                </span>
+                                                            </DropdownMenuItem>
+                                                        )
+                                                    })
+                                                )}
+                                            </DropdownMenuGroup>
                                             <DropdownMenuSeparator />
 
                                             <Link href='/log'>
@@ -137,7 +207,13 @@ export default function Navbar(props: Props) {
                                                 )}
                                             </div>
                                         </DropdownMenuTrigger>
-                                        <DropdownMenuContent className='w-56'>
+                                        <DropdownMenuContent
+                                            sideOffset={12}
+                                            align='end'
+                                            side='bottom'
+                                            alignOffset={-10}
+                                            className='w-56 max-w-full ring-1 ring-sky-400/80 dark:ring-amber-900'
+                                        >
                                             <DropdownMenuLabel>{session.data?.user.name}</DropdownMenuLabel>
                                             <DropdownMenuSeparator />
                                             <DropdownMenuGroup>

package/templates/default/components/theme-toggle.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { useTheme } from 'next-themes'
 import { MoonIcon, SunIcon } from '@radix-ui/react-icons'
-import { Spinner } from './spinner'
+import { Spinner } from '@/components/ui/spinner'
 
 const ThemeToggle = () => {
     const [mounted, setMounted] = useState(false)

package/templates/default/components/ui/spinner.tsx

@@ -0,0 +1,16 @@
+import { Loader2Icon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon
+      role="status"
+      aria-label="Loading"
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  )
+}
+
+export { Spinner }