create-nextjs-cms 0.9.6 → 0.9.8

package/templates/default/components/LogPage.tsx

@@ -1,107 +1,107 @@
-'use client'
-
-import { useI18n } from 'nextjs-cms/translations/client'
-import { trpc } from '@/app/_trpc/client'
-import { Badge } from '@/components/ui/badge'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
-import ErrorComponent from '@/components/ErrorComponent'
-import { Spinner } from '@/components/ui/spinner'
-
-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 t = useI18n()
-    const { data, isLoading, isError, error } = trpc.logs.list.useQuery({
-        limit: 50,
-        offset: 0,
-    })
-
-    if (isLoading) {
-        return (
-            <div className='flex w-full items-center justify-center p-8'>
-                <Spinner className='size-8' aria-label={t('loading') as string} />
-            </div>
-        )
-    }
-
-    if (isError) {
-        return <ErrorComponent message={error?.message || t('noAccessToSection')} />
-    }
-
-    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'>{t('logs')}</h1>
-            </div>
-
-            <div className='flex flex-col gap-4 p-4'>
-                <Table>
-                    <TableHeader>
-                        <TableRow>
-                            <TableHead>{t('date')}</TableHead>
-                            <TableHead>{t('action')}</TableHead>
-                            <TableHead>{t('admin')}</TableHead>
-                            <TableHead>{t('section')}</TableHead>
-                            <TableHead>{t('details')}</TableHead>
-                        </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                        {logs.length === 0 ? (
-                            <TableRow>
-                                <TableCell colSpan={5} className='text-muted-foreground text-center'>
-                                    {t('noData')}
-                                </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>
-    )
-}
+'use client'
+
+import { useI18n } from 'nextjs-cms/translations/client'
+import { trpc } from '@/app/_trpc/client'
+import { Badge } from '@/components/ui/badge'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import ErrorComponent from '@/components/ErrorComponent'
+import { Spinner } from '@/components/ui/spinner'
+
+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 t = useI18n()
+    const { data, isLoading, isError, error } = trpc.logs.list.useQuery({
+        limit: 50,
+        offset: 0,
+    })
+
+    if (isLoading) {
+        return (
+            <div className='flex w-full items-center justify-center p-8'>
+                <Spinner className='size-8' aria-label={t('loading') as string} />
+            </div>
+        )
+    }
+
+    if (isError) {
+        return <ErrorComponent message={error?.message || t('noAccessToSection')} />
+    }
+
+    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'>{t('logs')}</h1>
+            </div>
+
+            <div className='flex flex-col gap-4 p-4'>
+                <Table>
+                    <TableHeader>
+                        <TableRow>
+                            <TableHead>{t('date')}</TableHead>
+                            <TableHead>{t('action')}</TableHead>
+                            <TableHead>{t('admin')}</TableHead>
+                            <TableHead>{t('section')}</TableHead>
+                            <TableHead>{t('details')}</TableHead>
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                        {logs.length === 0 ? (
+                            <TableRow>
+                                <TableCell colSpan={5} className='text-muted-foreground text-center'>
+                                    {t('noData')}
+                                </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/Modal.tsx

@@ -1,166 +1,166 @@
-'use client'
-
-import { Suspense, useEffect, useRef, useState } from 'react'
-import useModal from '@/hooks/useModal'
-import classNames from 'classnames'
-import { X, Loader2 } from 'lucide-react'
-
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/custom-dialog'
-
-function ModalLoadingFallback() {
-    return (
-        <div className='flex min-h-[200px] items-center justify-center p-8'>
-            <Loader2 className='h-8 w-8 animate-spin text-muted-foreground' />
-        </div>
-    )
-}
-
-function Modal() {
-    const { setModal, modal, modalResponse, setModalResponse } = useModal()
-    const [open, setOpen] = useState(false)
-
-    const handleClose = () => {
-        setOpen(false)
-        // Close after 100ms
-        setTimeout(() => {
-            setModal(null)
-        }, 200)
-    }
-
-    const cancelButtonRef = useRef(null)
-
-    useEffect(() => {
-        if (!modal) {
-            setModalResponse(null)
-        } else {
-            setOpen(true)
-        }
-    }, [modal])
-
-    if (!modal) return null
-
-    return (
-        <Dialog open={open} onOpenChange={handleClose}>
-            <DialogContent
-                showCloseButton={false}
-                onOpenAutoFocus={(e) => e.preventDefault()}
-                onInteractOutside={(e) => e.preventDefault()}
-                onPointerDownOutside={(e) => e.preventDefault()}
-                className={classNames({
-                    'bg-background w-full rounded-lg p-0 text-start': true,
-                    'max-w-lg': modal?.size === 'sm' || modal?.size === undefined,
-                    'max-w-2xl': modal?.size === 'md',
-                    'max-w-4xl': modal?.size === 'lg',
-                    'max-w-6xl': modal?.size === 'xl',
-                })}
-            >
-                <DialogHeader>
-                    <DialogTitle
-                        className={`flex items-center rounded-t-lg text-xl leading-6 font-semibold ${modal?.titleColor} p-6 pt-5 pb-4 md:pe-20 ${modal?.headerColor}`}
-                    >
-                        <div>{modal?.title || ''}</div>
-                        <X
-                            className={`absolute end-5 size-6 cursor-pointer rounded bg-white text-gray-500 hover:opacity-90 md:block`}
-                            onClick={handleClose}
-                            ref={cancelButtonRef}
-                        />
-                    </DialogTitle>
-                </DialogHeader>
-                <div className='max-h-[calc(90vh-120px)] min-h-0 flex-1 overflow-y-auto'>
-                    <div className='flex flex-col gap-1'>
-                        <div className='w-full overflow-hidden'>
-                            <div className='flex w-full flex-col font-semibold'>
-                                <div className='text-foreground w-full'>
-                                    <Suspense fallback={<ModalLoadingFallback />}>
-                                        {modal?.body}
-                                    </Suspense>
-                                </div>
-                                <div className='w-full'>
-                                    {modalResponse && <div className={`w-full p-3`}>{modalResponse.message}</div>}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </DialogContent>
-        </Dialog>
-    )
-
-    /*
-    return (
-        <Transition.Root show={modal !== null} as={Fragment}>
-            <Dialog as='div' className='relative z-50' initialFocus={cancelButtonRef} onClose={handleClose}>
-                <Transition.Child
-                    as={Fragment}
-                    enter='ease-out duration-300'
-                    enterFrom='opacity-0'
-                    enterTo='opacity-100'
-                    leave='ease-in duration-200'
-                    leaveFrom='opacity-100'
-                    leaveTo='opacity-0'
-                >
-                    <div className='fixed inset-0 bg-gray-500/50 backdrop-blur-md transition-opacity' />
-                </Transition.Child>
-
-                <div className='fixed inset-0 z-10 overflow-y-auto'>
-                    <div className='flex min-h-full items-end justify-center p-4 text-start sm:items-start sm:p-0'>
-                        <Transition.Child
-                            as={Fragment}
-                            enter='ease-out duration-300'
-                            enterFrom='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
-                            enterTo='opacity-100 translate-y-0 sm:scale-100'
-                            leave='ease-in duration-200'
-                            leaveFrom='opacity-100 translate-y-0 sm:scale-100'
-                            leaveTo='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
-                        >
-                            <Dialog.Panel
-                                className={classNames({
-                                    'bg-background relative w-full rounded-lg text-start shadow-xl transition-all sm:my-8':
-                                        true,
-                                    'max-w-lg': modal?.size === 'sm' || modal?.size === undefined,
-                                    'max-w-2xl': modal?.size === 'md',
-                                    'max-w-4xl': modal?.size === 'lg',
-                                    'max-w-6xl': modal?.size === 'xl',
-                                })}
-                            >
-                                <div className='bg-background rounded-lg'>
-                                    {modal && (
-                                        <div className='flex flex-col gap-1'>
-                                            <div className='w-full overflow-hidden rounded'>
-                                                <div
-                                                    className={`flex items-center rounded-t-lg text-xl leading-6 font-semibold ${modal.titleColor} p-6 pt-5 pb-4 md:pe-20 ${modal.headerColor}`}
-                                                >
-                                                    <Dialog.Title as='h3' className='pe-5'>
-                                                        {modal.title}
-                                                    </Dialog.Title>
-                                                    <X
-                                                        className={`absolute ${
-                                                            modal.lang === 'ar' ? 'left-5' : 'right-5'
-                                                        } hidden h-7 w-7 cursor-pointer rounded bg-white text-gray-500 hover:opacity-90 md:block`}
-                                                        onClick={handleClose}
-                                                        ref={cancelButtonRef}
-                                                    />
-                                                </div>
-                                                <div className='flex w-full flex-col font-semibold'>
-                                                    <div className='text-foreground w-full'>{modal.body}</div>
-                                                    <div className='w-full'>
-                                                        {modalResponse && (
-                                                            <div className={`w-full p-3`}>{modalResponse.message}</div>
-                                                        )}
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    )}
-                                </div>
-                            </Dialog.Panel>
-                        </Transition.Child>
-                    </div>
-                </div>
-            </Dialog>
-        </Transition.Root>
-    )
-    */
-}
-
-export default Modal
+'use client'
+
+import { Suspense, useEffect, useRef, useState } from 'react'
+import useModal from '@/hooks/useModal'
+import classNames from 'classnames'
+import { X, Loader2 } from 'lucide-react'
+
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/custom-dialog'
+
+function ModalLoadingFallback() {
+    return (
+        <div className='flex min-h-[200px] items-center justify-center p-8'>
+            <Loader2 className='h-8 w-8 animate-spin text-muted-foreground' />
+        </div>
+    )
+}
+
+function Modal() {
+    const { setModal, modal, modalResponse, setModalResponse } = useModal()
+    const [open, setOpen] = useState(false)
+
+    const handleClose = () => {
+        setOpen(false)
+        // Close after 100ms
+        setTimeout(() => {
+            setModal(null)
+        }, 200)
+    }
+
+    const cancelButtonRef = useRef(null)
+
+    useEffect(() => {
+        if (!modal) {
+            setModalResponse(null)
+        } else {
+            setOpen(true)
+        }
+    }, [modal])
+
+    if (!modal) return null
+
+    return (
+        <Dialog open={open} onOpenChange={handleClose}>
+            <DialogContent
+                showCloseButton={false}
+                onOpenAutoFocus={(e) => e.preventDefault()}
+                onInteractOutside={(e) => e.preventDefault()}
+                onPointerDownOutside={(e) => e.preventDefault()}
+                className={classNames({
+                    'bg-background w-full rounded-lg p-0 text-start': true,
+                    'max-w-lg': modal?.size === 'sm' || modal?.size === undefined,
+                    'max-w-2xl': modal?.size === 'md',
+                    'max-w-4xl': modal?.size === 'lg',
+                    'max-w-6xl': modal?.size === 'xl',
+                })}
+            >
+                <DialogHeader>
+                    <DialogTitle
+                        className={`flex items-center rounded-t-lg text-xl leading-6 font-semibold ${modal?.titleColor} p-6 pt-5 pb-4 md:pe-20 ${modal?.headerColor}`}
+                    >
+                        <div>{modal?.title || ''}</div>
+                        <X
+                            className={`absolute end-5 size-6 cursor-pointer rounded bg-white text-gray-500 hover:opacity-90 md:block`}
+                            onClick={handleClose}
+                            ref={cancelButtonRef}
+                        />
+                    </DialogTitle>
+                </DialogHeader>
+                <div className='max-h-[calc(90vh-120px)] min-h-0 flex-1 overflow-y-auto'>
+                    <div className='flex flex-col gap-1'>
+                        <div className='w-full overflow-hidden'>
+                            <div className='flex w-full flex-col font-semibold'>
+                                <div className='text-foreground w-full'>
+                                    <Suspense fallback={<ModalLoadingFallback />}>
+                                        {modal?.body}
+                                    </Suspense>
+                                </div>
+                                <div className='w-full'>
+                                    {modalResponse && <div className={`w-full p-3`}>{modalResponse.message}</div>}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </DialogContent>
+        </Dialog>
+    )
+
+    /*
+    return (
+        <Transition.Root show={modal !== null} as={Fragment}>
+            <Dialog as='div' className='relative z-50' initialFocus={cancelButtonRef} onClose={handleClose}>
+                <Transition.Child
+                    as={Fragment}
+                    enter='ease-out duration-300'
+                    enterFrom='opacity-0'
+                    enterTo='opacity-100'
+                    leave='ease-in duration-200'
+                    leaveFrom='opacity-100'
+                    leaveTo='opacity-0'
+                >
+                    <div className='fixed inset-0 bg-gray-500/50 backdrop-blur-md transition-opacity' />
+                </Transition.Child>
+
+                <div className='fixed inset-0 z-10 overflow-y-auto'>
+                    <div className='flex min-h-full items-end justify-center p-4 text-start sm:items-start sm:p-0'>
+                        <Transition.Child
+                            as={Fragment}
+                            enter='ease-out duration-300'
+                            enterFrom='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
+                            enterTo='opacity-100 translate-y-0 sm:scale-100'
+                            leave='ease-in duration-200'
+                            leaveFrom='opacity-100 translate-y-0 sm:scale-100'
+                            leaveTo='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
+                        >
+                            <Dialog.Panel
+                                className={classNames({
+                                    'bg-background relative w-full rounded-lg text-start shadow-xl transition-all sm:my-8':
+                                        true,
+                                    'max-w-lg': modal?.size === 'sm' || modal?.size === undefined,
+                                    'max-w-2xl': modal?.size === 'md',
+                                    'max-w-4xl': modal?.size === 'lg',
+                                    'max-w-6xl': modal?.size === 'xl',
+                                })}
+                            >
+                                <div className='bg-background rounded-lg'>
+                                    {modal && (
+                                        <div className='flex flex-col gap-1'>
+                                            <div className='w-full overflow-hidden rounded'>
+                                                <div
+                                                    className={`flex items-center rounded-t-lg text-xl leading-6 font-semibold ${modal.titleColor} p-6 pt-5 pb-4 md:pe-20 ${modal.headerColor}`}
+                                                >
+                                                    <Dialog.Title as='h3' className='pe-5'>
+                                                        {modal.title}
+                                                    </Dialog.Title>
+                                                    <X
+                                                        className={`absolute ${
+                                                            modal.lang === 'ar' ? 'left-5' : 'right-5'
+                                                        } hidden h-7 w-7 cursor-pointer rounded bg-white text-gray-500 hover:opacity-90 md:block`}
+                                                        onClick={handleClose}
+                                                        ref={cancelButtonRef}
+                                                    />
+                                                </div>
+                                                <div className='flex w-full flex-col font-semibold'>
+                                                    <div className='text-foreground w-full'>{modal.body}</div>
+                                                    <div className='w-full'>
+                                                        {modalResponse && (
+                                                            <div className={`w-full p-3`}>{modalResponse.message}</div>
+                                                        )}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    )}
+                                </div>
+                            </Dialog.Panel>
+                        </Transition.Child>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition.Root>
+    )
+    */
+}
+
+export default Modal