create-nextjs-cms 0.8.6 → 0.8.8

package/templates/default/components/ContainerBox.tsx

@@ -1,24 +1,24 @@
-import React from 'react'
-// import { Card, CardContent, CardHeader, CardTitle } from './ui/card'
-
-export default function ContainerBox({ children, title }: { children: React.ReactNode; title?: string }) {
-    return (
-        <>
-            {/*<Card>
-                <CardHeader>
-                    <CardTitle>{title}</CardTitle>
-                </CardHeader>
-                <CardContent>{children}</CardContent>
-            </Card>*/}
-
-            <div className='relative flex flex-col rounded-lg border border-slate-300 bg-white shadow-xs dark:border-slate-500 dark:bg-slate-900'>
-                {title ? (
-                    <div className='rounded-t-lg px-4 py-1.5 font-bold text-black dark:bg-slate-800 dark:text-white'>
-                        {title}
-                    </div>
-                ) : null}
-                <div className='w-full px-4 py-2'>{children}</div>
-            </div>
-        </>
-    )
-}
+import React from 'react'
+// import { Card, CardContent, CardHeader, CardTitle } from './ui/card'
+
+export default function ContainerBox({ children, title }: { children: React.ReactNode; title?: string }) {
+    return (
+        <>
+            {/*<Card>
+                <CardHeader>
+                    <CardTitle>{title}</CardTitle>
+                </CardHeader>
+                <CardContent>{children}</CardContent>
+            </Card>*/}
+
+            <div className='relative flex flex-col rounded-lg border border-slate-300 bg-white shadow-xs dark:border-slate-500 dark:bg-slate-900'>
+                {title ? (
+                    <div className='rounded-t-lg px-4 py-1.5 font-bold text-black dark:bg-slate-800 dark:text-white'>
+                        {title}
+                    </div>
+                ) : null}
+                <div className='w-full px-4 py-2'>{children}</div>
+            </div>
+        </>
+    )
+}

package/templates/default/components/DashboardNewPage.tsx

@@ -1,253 +1,253 @@
-'use client'
-
-import React from 'react'
-import { useI18n } from 'nextjs-cms/translations/client'
-import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
-import { LiveUsersCount } from '@/components/analytics/LiveUsersCount'
-import { TotalPageViews } from '@/components/analytics/TotalPageViews'
-import { TotalSessions } from '@/components/analytics/TotalSessions'
-import { TotalUniqueUsers } from '@/components/analytics/TotalUniqueUsers'
-import ContainerBox from '@/components/ContainerBox'
-import LoadingSpinners from '@/components/LoadingSpinners'
-import { trpc } from '@/app/_trpc/client'
-import Link from 'next/link'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { PlusCircle, FileText, BarChart3, Users, Settings, Eye } from 'lucide-react'
-
-ChartJS.register(ArcElement, Tooltip, Legend)
-
-const DashboardNewPage = () => {
-    const t = useI18n()
-    // Analytics date range - last 30 days
-    const [fromDate, setFromDate] = React.useState<Date | string>('30daysAgo')
-    const [toDate, setToDate] = React.useState<Date | string>('today')
-
-    // Get available sections
-    const { data: sectionsData, isLoading: sectionsLoading } = trpc.hasItemsSections.listItems.useQuery({
-        section: 'settings', // This might give us section metadata
-        page: 1,
-        limit: 100,
-    })
-
-    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('dashboard')}</h1>
-                <p className='mt-2 text-lg opacity-90'>{t('cmsOverview')}</p>
-            </div>
-
-            <div className='flex flex-col gap-6 p-6'>
-                {/* Analytics Overview */}
-                <div>
-                    <h2 className='mb-4 flex items-center gap-2 text-2xl font-semibold'>
-                        <BarChart3 className='h-6 w-6' />
-                        {t('analyticsOverview')}
-                    </h2>
-                    <div className='sm-sidebar:grid-cols-2 md-sidebar:grid-cols-2 lg-sidebar:grid-cols-4 grid grid-cols-1 gap-4'>
-                        <LiveUsersCount />
-                        <TotalPageViews fromDate={fromDate} toDate={toDate} />
-                        <TotalSessions fromDate={fromDate} toDate={toDate} />
-                        <TotalUniqueUsers fromDate={fromDate} toDate={toDate} />
-                    </div>
-                </div>
-
-                {/* Content Statistics */}
-                <div>
-                    <h2 className='mb-4 flex items-center gap-2 text-2xl font-semibold'>
-                        <FileText className='h-6 w-6' />
-                        {t('contentStatistics')}
-                    </h2>
-                    <div className='sm-sidebar:grid-cols-2 md-sidebar:grid-cols-3 lg-sidebar:grid-cols-4 grid grid-cols-1 gap-4'>
-                        <Card>
-                            <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
-                                <CardTitle className='text-sm font-medium'>{t('totalCars')}</CardTitle>
-                                <FileText className='text-muted-foreground h-4 w-4' />
-                            </CardHeader>
-                            <CardContent>
-                                <div className='text-2xl font-bold'>1,234</div>
-                                <p className='text-muted-foreground text-xs'>+20.1% {t('fromLastMonth')}</p>
-                            </CardContent>
-                        </Card>
-
-                        <Card>
-                            <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
-                                <CardTitle className='text-sm font-medium'>{t('realEstate')}</CardTitle>
-                                <FileText className='text-muted-foreground h-4 w-4' />
-                            </CardHeader>
-                            <CardContent>
-                                <div className='text-2xl font-bold'>856</div>
-                                <p className='text-muted-foreground text-xs'>+15.3% {t('fromLastMonth')}</p>
-                            </CardContent>
-                        </Card>
-
-                        <Card>
-                            <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
-                                <CardTitle className='text-sm font-medium'>{t('jobs')}</CardTitle>
-                                <FileText className='text-muted-foreground h-4 w-4' />
-                            </CardHeader>
-                            <CardContent>
-                                <div className='text-2xl font-bold'>432</div>
-                                <p className='text-muted-foreground text-xs'>+7.2% {t('fromLastMonth')}</p>
-                            </CardContent>
-                        </Card>
-
-                        <Card>
-                            <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
-                                <CardTitle className='text-sm font-medium'>{t('services')}</CardTitle>
-                                <FileText className='text-muted-foreground h-4 w-4' />
-                            </CardHeader>
-                            <CardContent>
-                                <div className='text-2xl font-bold'>298</div>
-                                <p className='text-muted-foreground text-xs'>+12.5% {t('fromLastMonth')}</p>
-                            </CardContent>
-                        </Card>
-                    </div>
-                </div>
-
-                {/* Recent Activity */}
-                <div>
-                    <h2 className='mb-4 text-2xl font-semibold'>{t('recentActivity')}</h2>
-                    <Card>
-                        <CardHeader>
-                            <CardTitle>{t('latestContentUpdates')}</CardTitle>
-                            <CardDescription>{t('recentlyAddedOrModified')}</CardDescription>
-                        </CardHeader>
-                        <CardContent>
-                            <div className='space-y-4'>
-                                <div className='flex items-center justify-between border-b pb-2'>
-                                    <div>
-                                        <p className='font-medium'>2024 BMW X5 - Cars Section</p>
-                                        <p className='text-muted-foreground text-sm'>Added 2 hours ago</p>
-                                    </div>
-                                    <Button variant='outline' size='sm' asChild>
-                                        <Link href='/browse/cars/1'>
-                                            <Eye className='mr-1 h-4 w-4' />
-                                            {t('view')}
-                                        </Link>
-                                    </Button>
-                                </div>
-
-                                <div className='flex items-center justify-between border-b pb-2'>
-                                    <div>
-                                        <p className='font-medium'>3BR Apartment in Downtown - Real Estate</p>
-                                        <p className='text-muted-foreground text-sm'>Added 4 hours ago</p>
-                                    </div>
-                                    <Button variant='outline' size='sm' asChild>
-                                        <Link href='/browse/real-estate/1'>
-                                            <Eye className='mr-1 h-4 w-4' />
-                                            {t('view')}
-                                        </Link>
-                                    </Button>
-                                </div>
-
-                                <div className='flex items-center justify-between border-b pb-2'>
-                                    <div>
-                                        <p className='font-medium'>Software Developer Position - Jobs</p>
-                                        <p className='text-muted-foreground text-sm'>Added 6 hours ago</p>
-                                    </div>
-                                    <Button variant='outline' size='sm' asChild>
-                                        <Link href='/browse/jobs/1'>
-                                            <Eye className='mr-1 h-4 w-4' />
-                                            {t('view')}
-                                        </Link>
-                                    </Button>
-                                </div>
-                            </div>
-                        </CardContent>
-                    </Card>
-                </div>
-
-                {/* Quick Actions */}
-                <div>
-                    <h2 className='mb-4 text-2xl font-semibold'>{t('quickActions')}</h2>
-                    <div className='sm-sidebar:grid-cols-2 md-sidebar:grid-cols-3 lg-sidebar:grid-cols-4 grid grid-cols-1 gap-4'>
-                        <Card className='cursor-pointer transition-shadow hover:shadow-md'>
-                            <CardHeader>
-                                <CardTitle className='flex items-center gap-2'>
-                                    <PlusCircle className='h-5 w-5' />
-                                    {t('addNewCar')}
-                                </CardTitle>
-                                <CardDescription>{t('createCarListing')}</CardDescription>
-                            </CardHeader>
-                            <CardContent>
-                                <Button asChild className='w-full'>
-                                    <Link href='/new/cars'>{t('create')}</Link>
-                                </Button>
-                            </CardContent>
-                        </Card>
-
-                        <Card className='cursor-pointer transition-shadow hover:shadow-md'>
-                            <CardHeader>
-                                <CardTitle className='flex items-center gap-2'>
-                                    <PlusCircle className='h-5 w-5' />
-                                    {t('addRealEstate')}
-                                </CardTitle>
-                                <CardDescription>{t('createPropertyListing')}</CardDescription>
-                            </CardHeader>
-                            <CardContent>
-                                <Button asChild className='w-full'>
-                                    <Link href='/new/real-estate'>{t('create')}</Link>
-                                </Button>
-                            </CardContent>
-                        </Card>
-
-                        <Card className='cursor-pointer transition-shadow hover:shadow-md'>
-                            <CardHeader>
-                                <CardTitle className='flex items-center gap-2'>
-                                    <Users className='h-5 w-5' />
-                                    {t('manageAdmins')}
-                                </CardTitle>
-                                <CardDescription>{t('viewAndManageAdmins')}</CardDescription>
-                            </CardHeader>
-                            <CardContent>
-                                <Button asChild variant='outline' className='w-full'>
-                                    <Link href='/admins'>{t('manageAdmins')}</Link>
-                                </Button>
-                            </CardContent>
-                        </Card>
-
-                        <Card className='cursor-pointer transition-shadow hover:shadow-md'>
-                            <CardHeader>
-                                <CardTitle className='flex items-center gap-2'>
-                                    <BarChart3 className='h-5 w-5' />
-                                    {t('viewAnalytics')}
-                                </CardTitle>
-                                <CardDescription>{t('detailedAnalytics')}</CardDescription>
-                            </CardHeader>
-                            <CardContent>
-                                <Button asChild variant='outline' className='w-full'>
-                                    <Link href='/analytics'>{t('viewAnalytics')}</Link>
-                                </Button>
-                            </CardContent>
-                        </Card>
-                    </div>
-                </div>
-
-                {/* System Status */}
-                <div>
-                    <h2 className='mb-4 text-2xl font-semibold'>{t('systemStatus')}</h2>
-                    <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
-                        <ContainerBox title={t('databaseStatus')}>
-                            <div className='flex items-center gap-2'>
-                                <div className='h-3 w-3 rounded-full bg-green-500'></div>
-                                <span>{t('connected')}</span>
-                            </div>
-                            <p className='text-muted-foreground mt-2 text-sm'>{t('allConnectionsHealthy')}</p>
-                        </ContainerBox>
-
-                        <ContainerBox title={t('cacheStatus')}>
-                            <div className='flex items-center gap-2'>
-                                <div className='h-3 w-3 rounded-full bg-green-500'></div>
-                                <span>{t('operational')}</span>
-                            </div>
-                            <p className='text-muted-foreground mt-2 text-sm'>{t('cacheFunctioning')}</p>
-                        </ContainerBox>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default DashboardNewPage
+'use client'
+
+import React from 'react'
+import { useI18n } from 'nextjs-cms/translations/client'
+import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
+import { LiveUsersCount } from '@/components/analytics/LiveUsersCount'
+import { TotalPageViews } from '@/components/analytics/TotalPageViews'
+import { TotalSessions } from '@/components/analytics/TotalSessions'
+import { TotalUniqueUsers } from '@/components/analytics/TotalUniqueUsers'
+import ContainerBox from '@/components/ContainerBox'
+import LoadingSpinners from '@/components/LoadingSpinners'
+import { trpc } from '@/app/_trpc/client'
+import Link from 'next/link'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { PlusCircle, FileText, BarChart3, Users, Settings, Eye } from 'lucide-react'
+
+ChartJS.register(ArcElement, Tooltip, Legend)
+
+const DashboardNewPage = () => {
+    const t = useI18n()
+    // Analytics date range - last 30 days
+    const [fromDate, setFromDate] = React.useState<Date | string>('30daysAgo')
+    const [toDate, setToDate] = React.useState<Date | string>('today')
+
+    // Get available sections
+    const { data: sectionsData, isLoading: sectionsLoading } = trpc.hasItemsSections.listItems.useQuery({
+        section: 'settings', // This might give us section metadata
+        page: 1,
+        limit: 100,
+    })
+
+    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('dashboard')}</h1>
+                <p className='mt-2 text-lg opacity-90'>{t('cmsOverview')}</p>
+            </div>
+
+            <div className='flex flex-col gap-6 p-6'>
+                {/* Analytics Overview */}
+                <div>
+                    <h2 className='mb-4 flex items-center gap-2 text-2xl font-semibold'>
+                        <BarChart3 className='h-6 w-6' />
+                        {t('analyticsOverview')}
+                    </h2>
+                    <div className='sm-sidebar:grid-cols-2 md-sidebar:grid-cols-2 lg-sidebar:grid-cols-4 grid grid-cols-1 gap-4'>
+                        <LiveUsersCount />
+                        <TotalPageViews fromDate={fromDate} toDate={toDate} />
+                        <TotalSessions fromDate={fromDate} toDate={toDate} />
+                        <TotalUniqueUsers fromDate={fromDate} toDate={toDate} />
+                    </div>
+                </div>
+
+                {/* Content Statistics */}
+                <div>
+                    <h2 className='mb-4 flex items-center gap-2 text-2xl font-semibold'>
+                        <FileText className='h-6 w-6' />
+                        {t('contentStatistics')}
+                    </h2>
+                    <div className='sm-sidebar:grid-cols-2 md-sidebar:grid-cols-3 lg-sidebar:grid-cols-4 grid grid-cols-1 gap-4'>
+                        <Card>
+                            <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
+                                <CardTitle className='text-sm font-medium'>{t('totalCars')}</CardTitle>
+                                <FileText className='text-muted-foreground h-4 w-4' />
+                            </CardHeader>
+                            <CardContent>
+                                <div className='text-2xl font-bold'>1,234</div>
+                                <p className='text-muted-foreground text-xs'>+20.1% {t('fromLastMonth')}</p>
+                            </CardContent>
+                        </Card>
+
+                        <Card>
+                            <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
+                                <CardTitle className='text-sm font-medium'>{t('realEstate')}</CardTitle>
+                                <FileText className='text-muted-foreground h-4 w-4' />
+                            </CardHeader>
+                            <CardContent>
+                                <div className='text-2xl font-bold'>856</div>
+                                <p className='text-muted-foreground text-xs'>+15.3% {t('fromLastMonth')}</p>
+                            </CardContent>
+                        </Card>
+
+                        <Card>
+                            <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
+                                <CardTitle className='text-sm font-medium'>{t('jobs')}</CardTitle>
+                                <FileText className='text-muted-foreground h-4 w-4' />
+                            </CardHeader>
+                            <CardContent>
+                                <div className='text-2xl font-bold'>432</div>
+                                <p className='text-muted-foreground text-xs'>+7.2% {t('fromLastMonth')}</p>
+                            </CardContent>
+                        </Card>
+
+                        <Card>
+                            <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
+                                <CardTitle className='text-sm font-medium'>{t('services')}</CardTitle>
+                                <FileText className='text-muted-foreground h-4 w-4' />
+                            </CardHeader>
+                            <CardContent>
+                                <div className='text-2xl font-bold'>298</div>
+                                <p className='text-muted-foreground text-xs'>+12.5% {t('fromLastMonth')}</p>
+                            </CardContent>
+                        </Card>
+                    </div>
+                </div>
+
+                {/* Recent Activity */}
+                <div>
+                    <h2 className='mb-4 text-2xl font-semibold'>{t('recentActivity')}</h2>
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>{t('latestContentUpdates')}</CardTitle>
+                            <CardDescription>{t('recentlyAddedOrModified')}</CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                            <div className='space-y-4'>
+                                <div className='flex items-center justify-between border-b pb-2'>
+                                    <div>
+                                        <p className='font-medium'>2024 BMW X5 - Cars Section</p>
+                                        <p className='text-muted-foreground text-sm'>Added 2 hours ago</p>
+                                    </div>
+                                    <Button variant='outline' size='sm' asChild>
+                                        <Link href='/browse/cars/1'>
+                                            <Eye className='mr-1 h-4 w-4' />
+                                            {t('view')}
+                                        </Link>
+                                    </Button>
+                                </div>
+
+                                <div className='flex items-center justify-between border-b pb-2'>
+                                    <div>
+                                        <p className='font-medium'>3BR Apartment in Downtown - Real Estate</p>
+                                        <p className='text-muted-foreground text-sm'>Added 4 hours ago</p>
+                                    </div>
+                                    <Button variant='outline' size='sm' asChild>
+                                        <Link href='/browse/real-estate/1'>
+                                            <Eye className='mr-1 h-4 w-4' />
+                                            {t('view')}
+                                        </Link>
+                                    </Button>
+                                </div>
+
+                                <div className='flex items-center justify-between border-b pb-2'>
+                                    <div>
+                                        <p className='font-medium'>Software Developer Position - Jobs</p>
+                                        <p className='text-muted-foreground text-sm'>Added 6 hours ago</p>
+                                    </div>
+                                    <Button variant='outline' size='sm' asChild>
+                                        <Link href='/browse/jobs/1'>
+                                            <Eye className='mr-1 h-4 w-4' />
+                                            {t('view')}
+                                        </Link>
+                                    </Button>
+                                </div>
+                            </div>
+                        </CardContent>
+                    </Card>
+                </div>
+
+                {/* Quick Actions */}
+                <div>
+                    <h2 className='mb-4 text-2xl font-semibold'>{t('quickActions')}</h2>
+                    <div className='sm-sidebar:grid-cols-2 md-sidebar:grid-cols-3 lg-sidebar:grid-cols-4 grid grid-cols-1 gap-4'>
+                        <Card className='cursor-pointer transition-shadow hover:shadow-md'>
+                            <CardHeader>
+                                <CardTitle className='flex items-center gap-2'>
+                                    <PlusCircle className='h-5 w-5' />
+                                    {t('addNewCar')}
+                                </CardTitle>
+                                <CardDescription>{t('createCarListing')}</CardDescription>
+                            </CardHeader>
+                            <CardContent>
+                                <Button asChild className='w-full'>
+                                    <Link href='/new/cars'>{t('create')}</Link>
+                                </Button>
+                            </CardContent>
+                        </Card>
+
+                        <Card className='cursor-pointer transition-shadow hover:shadow-md'>
+                            <CardHeader>
+                                <CardTitle className='flex items-center gap-2'>
+                                    <PlusCircle className='h-5 w-5' />
+                                    {t('addRealEstate')}
+                                </CardTitle>
+                                <CardDescription>{t('createPropertyListing')}</CardDescription>
+                            </CardHeader>
+                            <CardContent>
+                                <Button asChild className='w-full'>
+                                    <Link href='/new/real-estate'>{t('create')}</Link>
+                                </Button>
+                            </CardContent>
+                        </Card>
+
+                        <Card className='cursor-pointer transition-shadow hover:shadow-md'>
+                            <CardHeader>
+                                <CardTitle className='flex items-center gap-2'>
+                                    <Users className='h-5 w-5' />
+                                    {t('manageAdmins')}
+                                </CardTitle>
+                                <CardDescription>{t('viewAndManageAdmins')}</CardDescription>
+                            </CardHeader>
+                            <CardContent>
+                                <Button asChild variant='outline' className='w-full'>
+                                    <Link href='/admins'>{t('manageAdmins')}</Link>
+                                </Button>
+                            </CardContent>
+                        </Card>
+
+                        <Card className='cursor-pointer transition-shadow hover:shadow-md'>
+                            <CardHeader>
+                                <CardTitle className='flex items-center gap-2'>
+                                    <BarChart3 className='h-5 w-5' />
+                                    {t('viewAnalytics')}
+                                </CardTitle>
+                                <CardDescription>{t('detailedAnalytics')}</CardDescription>
+                            </CardHeader>
+                            <CardContent>
+                                <Button asChild variant='outline' className='w-full'>
+                                    <Link href='/analytics'>{t('viewAnalytics')}</Link>
+                                </Button>
+                            </CardContent>
+                        </Card>
+                    </div>
+                </div>
+
+                {/* System Status */}
+                <div>
+                    <h2 className='mb-4 text-2xl font-semibold'>{t('systemStatus')}</h2>
+                    <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+                        <ContainerBox title={t('databaseStatus')}>
+                            <div className='flex items-center gap-2'>
+                                <div className='h-3 w-3 rounded-full bg-green-500'></div>
+                                <span>{t('connected')}</span>
+                            </div>
+                            <p className='text-muted-foreground mt-2 text-sm'>{t('allConnectionsHealthy')}</p>
+                        </ContainerBox>
+
+                        <ContainerBox title={t('cacheStatus')}>
+                            <div className='flex items-center gap-2'>
+                                <div className='h-3 w-3 rounded-full bg-green-500'></div>
+                                <span>{t('operational')}</span>
+                            </div>
+                            <p className='text-muted-foreground mt-2 text-sm'>{t('cacheFunctioning')}</p>
+                        </ContainerBox>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default DashboardNewPage