create-nextjs-cms 0.9.0 → 0.9.2

package/templates/default/components/DashboardPage.tsx

@@ -1,188 +1,188 @@
-'use client'
-
-import React, { useEffect } from 'react'
-import { useI18n } from 'nextjs-cms/translations/client'
-import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
-import { humanReadableFileSize } from 'nextjs-cms/utils'
-import PieChartBox from '@/components/PieChartBox'
-import LoadingSpinners from '@/components/LoadingSpinners'
-import ContainerBox from '@/components/ContainerBox'
-import { trpc } from '@/app/_trpc/client'
-ChartJS.register(ArcElement, Tooltip, Legend)
-
-const DashboardPage = () => {
-    const t = useI18n()
-    const { isLoading, isError, data, error } = trpc.cpanelDashboard.getData.useQuery()
-
-    useEffect(() => {}, [])
-
-    return (
-        <div className='w-full'>
-            <div className='bg-linear-to-r from-sky-200 via-emerald-300 to-blue-600 p-8 font-extrabold text-foreground dark:from-blue-800 dark:via-amber-700 dark:to-rose-900'>
-                <h1 className='text-3xl'>{t('dashboard')}</h1>
-            </div>
-            <div className='flex flex-col gap-4 p-4'>
-                {isLoading && (
-                    <div>
-                        <LoadingSpinners />
-                    </div>
-                )}
-                <div className='grid grid-cols-1 gap-4 sm-sidebar:grid-cols-1 md-sidebar:grid-cols-2 lg-sidebar:grid-cols-2 2xl-sidebar:grid-cols-4'>
-                    {data ? (
-                        <>
-                            <PieChartBox
-                                chartData={[
-                                    {
-                                        name: t('totalDiskSpace'),
-                                        value: data.diskSpaceLimit - data.diskSpaceUsage,
-                                        fill: '#00C49F',
-                                    },
-                                    {
-                                        name: t('usedDiskSpace'),
-                                        value: data.diskSpaceUsage,
-                                        fill: '#E1315B',
-                                    },
-                                ]}
-                                chartBoxTitles={{
-                                    mainTitle: t('diskSpace'),
-                                    totalUnitSubtitle: {
-                                        key: t('totalDiskSpace'),
-                                        value: humanReadableFileSize(data.diskSpaceLimit),
-                                    },
-                                    usedUnitSubtitle: {
-                                        key: t('usedDiskSpace'),
-                                        value: humanReadableFileSize(data.diskSpaceUsage),
-                                    },
-                                }}
-                            />
-                            <PieChartBox
-                                chartData={[
-                                    {
-                                        name: t('totalBandwidth'),
-                                        value: data.bandwidthLimit - data.bandwidthUsage,
-                                        fill: '#1c89f1',
-                                    },
-                                    {
-                                        name: t('usedBandwidth'),
-                                        value: data.bandwidthUsage,
-                                        fill: '#ff6688',
-                                    },
-                                ]}
-                                chartBoxTitles={{
-                                    mainTitle: t('thisMothBandwidth'),
-                                    totalUnitSubtitle: {
-                                        key: t('totalBandwidth'),
-                                        value: humanReadableFileSize(data.bandwidthLimit),
-                                    },
-                                    usedUnitSubtitle: {
-                                        key: t('usedBandwidth'),
-                                        value: humanReadableFileSize(data.bandwidthUsage),
-                                    },
-                                }}
-                            />
-                            <PieChartBox
-                                chartData={[
-                                    {
-                                        name: t('totalEmails'),
-                                        value: data.emailsLimit - data.emailsUsage,
-                                        fill: '#c4ba56',
-                                    },
-                                    {
-                                        name: t('usedEmails'),
-                                        value: data.emailsUsage,
-                                        fill: '#1404c4',
-                                    },
-                                ]}
-                                chartBoxTitles={{
-                                    mainTitle: t('emailAccounts'),
-                                    totalUnitSubtitle: {
-                                        key: t('totalEmails'),
-                                        value: data.emailsLimit.toString(),
-                                    },
-                                    usedUnitSubtitle: {
-                                        key: t('usedEmails'),
-                                        value: data.emailsUsage.toString(),
-                                    },
-                                }}
-                            />
-                            <PieChartBox
-                                chartData={[
-                                    {
-                                        name: t('totalDatabases'),
-                                        value: data.dbsLimit - data.dbsCount,
-                                        fill: '#56c4b4',
-                                    },
-                                    {
-                                        name: t('usedDatabases'),
-                                        value: data.dbsCount,
-                                        fill: '#625bb2',
-                                    },
-                                ]}
-                                chartBoxTitles={{
-                                    mainTitle: t('mysqlDatabases'),
-                                    totalUnitSubtitle: {
-                                        key: t('totalDatabases'),
-                                        value: data.dbsLimit.toString(),
-                                    },
-                                    usedUnitSubtitle: {
-                                        key: t('usedDatabases'),
-                                        value: data.dbsCount.toString(),
-                                    },
-                                }}
-                            />
-                        </>
-                    ) : null}
-                </div>
-                <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
-                    <ContainerBox title={t('accountInformation')}>
-<div>{t('phpVersion')}: {data?.phpVersion}</div>
-                                        <div>{t('documentRoot')}: {data?.documentRoot}</div>
-                    </ContainerBox>
-
-                    <ContainerBox title={t('mysqlDatabases')}>
-                        <div>
-                            {data?.dbInfo ? (
-                                <>
-<div>{t('version')}: {data.dbInfo.version}</div>
-                                                    <div>{t('remote')}: {data.dbInfo.is_remote}</div>
-                                </>
-                            ) : (
-                                <div>{t('mysqlNotInstalled')}</div>
-                            )}
-                        </div>
-                        <div>
-                            {data?.dbsList?.map((db: any, index: number) => (
-                                <div key={`${db.name}_${db.database}_${index}`}>
-<div>{t('database')}: {db.database}</div>
-                                                    <div>{t('diskUsage')}: {humanReadableFileSize(db.disk_usage)}</div>
-                                                    <div>{t('users')}: {db.users?.length}</div>
-                                </div>
-                            ))}
-                        </div>
-                    </ContainerBox>
-                </div>
-                {/*<div>
-                    <ContainerBox title={t('passengerApplications')}>
-                        <div className='flex gap-4'>
-                            {data?.passengerAppList?.map((app: any) => (
-                                <ContainerBox title={app.name} key={app.name}>
-                                    <div key={app.name + app.path}>
-                                        <div>Name: {app.name}</div>
-                                        <div>Domain: {app.domain}</div>
-                                        <div>Path: {app.path}</div>
-                                        <div>Deployment: {app.deploymentMode}</div>
-                                        <div>Nodejs: {app.nodejs}</div>
-                                        <div>Base URL: {app.url}</div>
-                                        <div>Enabled: {app.enabled}</div>
-                                    </div>
-                                </ContainerBox>
-                            ))}
-                        </div>
-                    </ContainerBox>
-                </div>*/}
-            </div>
-        </div>
-    )
-}
-
-export default DashboardPage
+'use client'
+
+import React, { useEffect } from 'react'
+import { useI18n } from 'nextjs-cms/translations/client'
+import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
+import { humanReadableFileSize } from 'nextjs-cms/utils'
+import PieChartBox from '@/components/PieChartBox'
+import LoadingSpinners from '@/components/LoadingSpinners'
+import ContainerBox from '@/components/ContainerBox'
+import { trpc } from '@/app/_trpc/client'
+ChartJS.register(ArcElement, Tooltip, Legend)
+
+const DashboardPage = () => {
+    const t = useI18n()
+    const { isLoading, isError, data, error } = trpc.cpanelDashboard.getData.useQuery()
+
+    useEffect(() => {}, [])
+
+    return (
+        <div className='w-full'>
+            <div className='bg-linear-to-r from-sky-200 via-emerald-300 to-blue-600 p-8 font-extrabold text-foreground dark:from-blue-800 dark:via-amber-700 dark:to-rose-900'>
+                <h1 className='text-3xl'>{t('dashboard')}</h1>
+            </div>
+            <div className='flex flex-col gap-4 p-4'>
+                {isLoading && (
+                    <div>
+                        <LoadingSpinners />
+                    </div>
+                )}
+                <div className='grid grid-cols-1 gap-4 sm-sidebar:grid-cols-1 md-sidebar:grid-cols-2 lg-sidebar:grid-cols-2 2xl-sidebar:grid-cols-4'>
+                    {data ? (
+                        <>
+                            <PieChartBox
+                                chartData={[
+                                    {
+                                        name: t('totalDiskSpace'),
+                                        value: data.diskSpaceLimit - data.diskSpaceUsage,
+                                        fill: '#00C49F',
+                                    },
+                                    {
+                                        name: t('usedDiskSpace'),
+                                        value: data.diskSpaceUsage,
+                                        fill: '#E1315B',
+                                    },
+                                ]}
+                                chartBoxTitles={{
+                                    mainTitle: t('diskSpace'),
+                                    totalUnitSubtitle: {
+                                        key: t('totalDiskSpace'),
+                                        value: humanReadableFileSize(data.diskSpaceLimit),
+                                    },
+                                    usedUnitSubtitle: {
+                                        key: t('usedDiskSpace'),
+                                        value: humanReadableFileSize(data.diskSpaceUsage),
+                                    },
+                                }}
+                            />
+                            <PieChartBox
+                                chartData={[
+                                    {
+                                        name: t('totalBandwidth'),
+                                        value: data.bandwidthLimit - data.bandwidthUsage,
+                                        fill: '#1c89f1',
+                                    },
+                                    {
+                                        name: t('usedBandwidth'),
+                                        value: data.bandwidthUsage,
+                                        fill: '#ff6688',
+                                    },
+                                ]}
+                                chartBoxTitles={{
+                                    mainTitle: t('thisMothBandwidth'),
+                                    totalUnitSubtitle: {
+                                        key: t('totalBandwidth'),
+                                        value: humanReadableFileSize(data.bandwidthLimit),
+                                    },
+                                    usedUnitSubtitle: {
+                                        key: t('usedBandwidth'),
+                                        value: humanReadableFileSize(data.bandwidthUsage),
+                                    },
+                                }}
+                            />
+                            <PieChartBox
+                                chartData={[
+                                    {
+                                        name: t('totalEmails'),
+                                        value: data.emailsLimit - data.emailsUsage,
+                                        fill: '#c4ba56',
+                                    },
+                                    {
+                                        name: t('usedEmails'),
+                                        value: data.emailsUsage,
+                                        fill: '#1404c4',
+                                    },
+                                ]}
+                                chartBoxTitles={{
+                                    mainTitle: t('emailAccounts'),
+                                    totalUnitSubtitle: {
+                                        key: t('totalEmails'),
+                                        value: data.emailsLimit.toString(),
+                                    },
+                                    usedUnitSubtitle: {
+                                        key: t('usedEmails'),
+                                        value: data.emailsUsage.toString(),
+                                    },
+                                }}
+                            />
+                            <PieChartBox
+                                chartData={[
+                                    {
+                                        name: t('totalDatabases'),
+                                        value: data.dbsLimit - data.dbsCount,
+                                        fill: '#56c4b4',
+                                    },
+                                    {
+                                        name: t('usedDatabases'),
+                                        value: data.dbsCount,
+                                        fill: '#625bb2',
+                                    },
+                                ]}
+                                chartBoxTitles={{
+                                    mainTitle: t('mysqlDatabases'),
+                                    totalUnitSubtitle: {
+                                        key: t('totalDatabases'),
+                                        value: data.dbsLimit.toString(),
+                                    },
+                                    usedUnitSubtitle: {
+                                        key: t('usedDatabases'),
+                                        value: data.dbsCount.toString(),
+                                    },
+                                }}
+                            />
+                        </>
+                    ) : null}
+                </div>
+                <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+                    <ContainerBox title={t('accountInformation')}>
+<div>{t('phpVersion')}: {data?.phpVersion}</div>
+                                        <div>{t('documentRoot')}: {data?.documentRoot}</div>
+                    </ContainerBox>
+
+                    <ContainerBox title={t('mysqlDatabases')}>
+                        <div>
+                            {data?.dbInfo ? (
+                                <>
+<div>{t('version')}: {data.dbInfo.version}</div>
+                                                    <div>{t('remote')}: {data.dbInfo.is_remote}</div>
+                                </>
+                            ) : (
+                                <div>{t('mysqlNotInstalled')}</div>
+                            )}
+                        </div>
+                        <div>
+                            {data?.dbsList?.map((db: any, index: number) => (
+                                <div key={`${db.name}_${db.database}_${index}`}>
+<div>{t('database')}: {db.database}</div>
+                                                    <div>{t('diskUsage')}: {humanReadableFileSize(db.disk_usage)}</div>
+                                                    <div>{t('users')}: {db.users?.length}</div>
+                                </div>
+                            ))}
+                        </div>
+                    </ContainerBox>
+                </div>
+                {/*<div>
+                    <ContainerBox title={t('passengerApplications')}>
+                        <div className='flex gap-4'>
+                            {data?.passengerAppList?.map((app: any) => (
+                                <ContainerBox title={app.name} key={app.name}>
+                                    <div key={app.name + app.path}>
+                                        <div>Name: {app.name}</div>
+                                        <div>Domain: {app.domain}</div>
+                                        <div>Path: {app.path}</div>
+                                        <div>Deployment: {app.deploymentMode}</div>
+                                        <div>Nodejs: {app.nodejs}</div>
+                                        <div>Base URL: {app.url}</div>
+                                        <div>Enabled: {app.enabled}</div>
+                                    </div>
+                                </ContainerBox>
+                            ))}
+                        </div>
+                    </ContainerBox>
+                </div>*/}
+            </div>
+        </div>
+    )
+}
+
+export default DashboardPage

package/templates/default/components/DashboardPageAlt.tsx

@@ -1,45 +1,45 @@
-import { Metadata } from 'next'
-import Image from 'next/image'
-import { useI18n } from 'nextjs-cms/translations/client'
-
-export const metadata: Metadata = {
-    title: 'Dashboard',
-    description: 'Example dashboard app built using the components.',
-}
-
-export default function DashboardPage() {
-    const t = useI18n()
-    return (
-        <>
-            <div className='md:hidden'>
-                <Image
-                    src='/examples/dashboard-light.png'
-                    width={1280}
-                    height={866}
-                    alt={t('dashboard') as string}
-                    className='block dark:hidden'
-                />
-                <Image
-                    src='/examples/dashboard-dark.png'
-                    width={1280}
-                    height={866}
-                    alt={t('dashboard') as string}
-                    className='hidden dark:block'
-                />
-            </div>
-            <div className='hidden flex-col md:flex'>
-                <div className='border-b'>
-                    <div className='flex h-16 items-center px-4'>
-                        <div className='ml-auto flex items-center space-x-4'></div>
-                    </div>
-                </div>
-                <div className='flex-1 space-y-4 p-8 pt-6'>
-                    <div className='flex items-center justify-between space-y-2'>
-                        <h2 className='text-3xl font-bold tracking-tight'>{t('dashboard')}</h2>
-                        <div className='flex items-center space-x-2'></div>
-                    </div>
-                </div>
-            </div>
-        </>
-    )
-}
+import { Metadata } from 'next'
+import Image from 'next/image'
+import { useI18n } from 'nextjs-cms/translations/client'
+
+export const metadata: Metadata = {
+    title: 'Dashboard',
+    description: 'Example dashboard app built using the components.',
+}
+
+export default function DashboardPage() {
+    const t = useI18n()
+    return (
+        <>
+            <div className='md:hidden'>
+                <Image
+                    src='/examples/dashboard-light.png'
+                    width={1280}
+                    height={866}
+                    alt={t('dashboard') as string}
+                    className='block dark:hidden'
+                />
+                <Image
+                    src='/examples/dashboard-dark.png'
+                    width={1280}
+                    height={866}
+                    alt={t('dashboard') as string}
+                    className='hidden dark:block'
+                />
+            </div>
+            <div className='hidden flex-col md:flex'>
+                <div className='border-b'>
+                    <div className='flex h-16 items-center px-4'>
+                        <div className='ml-auto flex items-center space-x-4'></div>
+                    </div>
+                </div>
+                <div className='flex-1 space-y-4 p-8 pt-6'>
+                    <div className='flex items-center justify-between space-y-2'>
+                        <h2 className='text-3xl font-bold tracking-tight'>{t('dashboard')}</h2>
+                        <div className='flex items-center space-x-2'></div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}

package/templates/default/components/DefaultNavItems.tsx

@@ -1,3 +1,3 @@
-import { NavItem } from 'nextjs-cms/core/types'
-
-export const DefaultNavItems: NavItem[] = []
+import { NavItem } from 'nextjs-cms/core/types'
+
+export const DefaultNavItems: NavItem[] = []