create-nextjs-cms 0.5.92 → 0.5.94

package/templates/default/components/BrowsePage.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useRef } from 'react'
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import SectionItemCard from '@/components/SectionItemCard'
 import ContainerBox from '@/components/ContainerBox'
 import Pagination from '@/components/pagination/Pagination'
@@ -15,6 +15,7 @@ import { capitalizeWords } from 'nextjs-cms/utils'
 import ErrorComponent from '@/components/ErrorComponent'
 
 export default function BrowsePage({ section, page }: { section: string; page: string }) {
+    const t = useI18n()
     const pageInt = parseInt(page) ?? 1
     const params = useSearchParams()
     const router = useRouter()
@@ -50,24 +51,24 @@ export default function BrowsePage({ section, page }: { section: string; page: s
                             }}
                         >
                             <CardHeader>
-                                <CardTitle>Search {data?.section?.title}</CardTitle>
+                                <CardTitle>{t('search')} {data?.section?.title}</CardTitle>
                                 {/*<CardDescription>Search by title</CardDescription>*/}
                             </CardHeader>
                             <CardContent>
                                 <Input
                                     className='border-accent-foreground bg-input'
                                     ref={searchInputRef}
-                                    placeholder={`${capitalizeWords(getString('search'))}...`}
+                                    placeholder={`${capitalizeWords(t('search'))}...`}
                                     defaultValue={q || ''}
                                 />
                             </CardContent>
                             <CardFooter className='border-t px-6 py-4'>
-                                <Button>{capitalizeWords(getString('search'))}</Button>
+                                <Button>{capitalizeWords(t('search'))}</Button>
                             </CardFooter>
                         </form>
                     </Card>
                 ) : null}
-                <ContainerBox title={getString('browse')}>
+                <ContainerBox title={t('browse')}>
                     
                         
                             { data.items && data.items.length > 0 ? (
@@ -83,7 +84,7 @@ export default function BrowsePage({ section, page }: { section: string; page: s
                                 </div>
                             ) : (
                                 <Alert variant='default' className='bg-primary text-primary-foreground my-8'>
-                                    <AlertDescription className='font-bold'>{getString('noItems')}</AlertDescription>
+                                    <AlertDescription className='font-bold'>{t('noItems')}</AlertDescription>
                                 </Alert>
                             )}
                      

package/templates/default/components/CategoryDeleteConfirmPage.tsx

@@ -1,7 +1,7 @@
 import LoadingSpinners from '@/components/LoadingSpinners'
 import InfoCard from '@/components/InfoCard'
 import React from 'react'
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import { Button } from '@/components/ui/button'
 import useModal from '@/hooks/useModal'
 import { useToast } from '@/components/ui/use-toast'
@@ -22,6 +22,7 @@ export default function CategoryDeleteConfirmPage({
     action: any
     allowRecursiveDelete: boolean
 }) {
+    const t = useI18n()
     const { setModal } = useModal()
     const { toast } = useToast()
 
@@ -39,7 +40,7 @@ export default function CategoryDeleteConfirmPage({
     const deleteMutation = trpc.hasItemsSections.deleteItem.useMutation({
         onError: (error) => {
             setModal({
-                title: getString('delete'),
+                title: t('delete'),
                 body: (
                     <div className='rounded border-2 border-dashed border-red-500 bg-red-100 p-2 text-red-800'>
                         {error.message}
@@ -55,8 +56,8 @@ export default function CategoryDeleteConfirmPage({
             await action()
             setModal(null)
             toast({
-                title: getString('delete'),
-                description: getString('itemDeletedSuccessfully'),
+                title: t('delete'),
+                description: t('itemDeletedSuccessfully'),
                 variant: 'success',
             })
         },
@@ -74,10 +75,10 @@ export default function CategoryDeleteConfirmPage({
                 <div className='relative z-1 border-b-2 p-8 pt-12 font-extrabold text-foreground'>
                     <div className='absolute left-0 top-0 z-2 h-4 w-full bg-linear-to-r from-red-300 via-rose-500 to-pink-400'></div>
                     <h1 className='pb-4 text-3xl'>{sectionTitle}</h1>
-                    <span>/{getString('delete')}</span>
+                    <span>/{t('delete')}</span>
                 </div>
                 <div className='flex flex-col gap-2 px-8 py-4'>
-                    <div className='mb-4 text-2xl'>{getString('catDeleteTextLight')}</div>
+                    <div className='mb-4 text-2xl'>{t('catDeleteTextLight')}</div>
                     {deleteMutation.isPending ? (
                         <div className='flex w-full items-center justify-center text-center'>
                             <LoadingSpinners />
@@ -87,7 +88,7 @@ export default function CategoryDeleteConfirmPage({
                         <InfoCard
                             result={{
                                 key: 'info',
-                                title: `${getString('catDeleteWarningLight')}`,
+                                title: `${t('catDeleteWarningLight')}`,
                                 status: false,
                             }}
                         />
@@ -97,20 +98,20 @@ export default function CategoryDeleteConfirmPage({
                             <InfoCard
                                 result={{
                                     key: 'info',
-                                    title: `${getString('recursiveCategoryDeleteWarning')}`,
+                                    title: `${t('recursiveCategoryDeleteWarning')}`,
                                     status: false,
                                 }}
                             />
                             <div className='flex items-center space-x-2'>
                                 <Switch id='recursive-category-delete' />
-                                <Label htmlFor='airplane-mode'>{getString('recursiveCategoryDelete')}</Label>
+                                <Label htmlFor='airplane-mode'>{t('recursiveCategoryDelete')}</Label>
                             </div>
                         </div>
                     ) : null}
 
                     <div className='mt-2 flex flex-wrap gap-2'>
                         <Button variant='destructive' onClick={handleDelete}>
-                            {getString('delete')}
+                            {t('delete')}
                         </Button>
 
                         <Button
@@ -119,7 +120,7 @@ export default function CategoryDeleteConfirmPage({
                                 setModal(null)
                             }}
                         >
-                            {getString('cancel')}
+                            {t('cancel')}
                         </Button>
                     </div>
                 </div>

package/templates/default/components/CategorySectionSelectInput.tsx

@@ -4,7 +4,7 @@ import SelectBox from '@/components/SelectBox'
 import LoadingSpinners from '@/components/LoadingSpinners'
 import { useAutoAnimate } from '@formkit/auto-animate/react'
 import SelectInputButtons from '@/components/SelectInputButtons'
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import { trpc } from '@/app/_trpc/client'
 import { SelectOption } from 'nextjs-cms/core/fields'
 import type { RouterOutputs } from 'nextjs-cms/api'
@@ -21,6 +21,7 @@ export default function CategorySectionSelectInput({
     refetch?: any
     isChild?: boolean
 }) {
+    const t = useI18n()
     /**
      * Check and add the select option if it does not exist, the select option has a value of undefined
      */
@@ -28,7 +29,7 @@ export default function CategorySectionSelectInput({
     if (!exists || exists.length === 0) {
         if (input.options) {
             // @ts-ignore - This is a type-hack to add the placeholder `select` option to the options array
-            input.options.unshift({ value: undefined, label: getString('select') })
+            input.options.unshift({ value: undefined, label: t('select') })
         }
     }
 

package/templates/default/components/DashboardNewPage.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import React from 'react'
-import getString from 'nextjs-cms/translations'
+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'
@@ -18,6 +18,7 @@ import { PlusCircle, FileText, BarChart3, Users, Settings, Eye } from 'lucide-re
 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')
@@ -32,8 +33,8 @@ const DashboardNewPage = () => {
     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('dashboard')}</h1>
-                <p className='mt-2 text-lg opacity-90'>Content Management System Overview</p>
+                <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'>
@@ -41,7 +42,7 @@ const DashboardNewPage = () => {
                 <div>
                     <h2 className='mb-4 flex items-center gap-2 text-2xl font-semibold'>
                         <BarChart3 className='h-6 w-6' />
-                        Analytics Overview
+                        {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 />
@@ -55,50 +56,50 @@ const DashboardNewPage = () => {
                 <div>
                     <h2 className='mb-4 flex items-center gap-2 text-2xl font-semibold'>
                         <FileText className='h-6 w-6' />
-                        Content Statistics
+                        {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'>Total Cars</CardTitle>
+                                <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% from last month</p>
+                                <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'>Real Estate</CardTitle>
+                                <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% from last month</p>
+                                <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'>Jobs</CardTitle>
+                                <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% from last month</p>
+                                <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'>Services</CardTitle>
+                                <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% from last month</p>
+                                <p className='text-muted-foreground text-xs'>+12.5% {t('fromLastMonth')}</p>
                             </CardContent>
                         </Card>
                     </div>
@@ -106,11 +107,11 @@ const DashboardNewPage = () => {
 
                 {/* Recent Activity */}
                 <div>
-                    <h2 className='mb-4 text-2xl font-semibold'>Recent Activity</h2>
+                    <h2 className='mb-4 text-2xl font-semibold'>{t('recentActivity')}</h2>
                     <Card>
                         <CardHeader>
-                            <CardTitle>Latest Content Updates</CardTitle>
-                            <CardDescription>Recently added or modified items across all sections</CardDescription>
+                            <CardTitle>{t('latestContentUpdates')}</CardTitle>
+                            <CardDescription>{t('recentlyAddedOrModified')}</CardDescription>
                         </CardHeader>
                         <CardContent>
                             <div className='space-y-4'>
@@ -122,7 +123,7 @@ const DashboardNewPage = () => {
                                     <Button variant='outline' size='sm' asChild>
                                         <Link href='/browse/cars/1'>
                                             <Eye className='mr-1 h-4 w-4' />
-                                            View
+                                            {t('view')}
                                         </Link>
                                     </Button>
                                 </div>
@@ -135,7 +136,7 @@ const DashboardNewPage = () => {
                                     <Button variant='outline' size='sm' asChild>
                                         <Link href='/browse/real-estate/1'>
                                             <Eye className='mr-1 h-4 w-4' />
-                                            View
+                                            {t('view')}
                                         </Link>
                                     </Button>
                                 </div>
@@ -148,7 +149,7 @@ const DashboardNewPage = () => {
                                     <Button variant='outline' size='sm' asChild>
                                         <Link href='/browse/jobs/1'>
                                             <Eye className='mr-1 h-4 w-4' />
-                                            View
+                                            {t('view')}
                                         </Link>
                                     </Button>
                                 </div>
@@ -159,19 +160,19 @@ const DashboardNewPage = () => {
 
                 {/* Quick Actions */}
                 <div>
-                    <h2 className='mb-4 text-2xl font-semibold'>Quick Actions</h2>
+                    <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' />
-                                    Add New Car
+                                    {t('addNewCar')}
                                 </CardTitle>
-                                <CardDescription>Create a new car listing</CardDescription>
+                                <CardDescription>{t('createCarListing')}</CardDescription>
                             </CardHeader>
                             <CardContent>
                                 <Button asChild className='w-full'>
-                                    <Link href='/new/cars'>Create Car Listing</Link>
+                                    <Link href='/new/cars'>{t('create')}</Link>
                                 </Button>
                             </CardContent>
                         </Card>
@@ -180,13 +181,13 @@ const DashboardNewPage = () => {
                             <CardHeader>
                                 <CardTitle className='flex items-center gap-2'>
                                     <PlusCircle className='h-5 w-5' />
-                                    Add Real Estate
+                                    {t('addRealEstate')}
                                 </CardTitle>
-                                <CardDescription>Create a new property listing</CardDescription>
+                                <CardDescription>{t('createPropertyListing')}</CardDescription>
                             </CardHeader>
                             <CardContent>
                                 <Button asChild className='w-full'>
-                                    <Link href='/new/real-estate'>Create Property</Link>
+                                    <Link href='/new/real-estate'>{t('create')}</Link>
                                 </Button>
                             </CardContent>
                         </Card>
@@ -195,13 +196,13 @@ const DashboardNewPage = () => {
                             <CardHeader>
                                 <CardTitle className='flex items-center gap-2'>
                                     <Users className='h-5 w-5' />
-                                    Manage Admins
+                                    {t('manageAdmins')}
                                 </CardTitle>
-                                <CardDescription>View and manage administrators</CardDescription>
+                                <CardDescription>{t('viewAndManageAdmins')}</CardDescription>
                             </CardHeader>
                             <CardContent>
                                 <Button asChild variant='outline' className='w-full'>
-                                    <Link href='/admins'>Manage Admins</Link>
+                                    <Link href='/admins'>{t('manageAdmins')}</Link>
                                 </Button>
                             </CardContent>
                         </Card>
@@ -210,13 +211,13 @@ const DashboardNewPage = () => {
                             <CardHeader>
                                 <CardTitle className='flex items-center gap-2'>
                                     <BarChart3 className='h-5 w-5' />
-                                    View Analytics
+                                    {t('viewAnalytics')}
                                 </CardTitle>
-                                <CardDescription>Detailed analytics and insights</CardDescription>
+                                <CardDescription>{t('detailedAnalytics')}</CardDescription>
                             </CardHeader>
                             <CardContent>
                                 <Button asChild variant='outline' className='w-full'>
-                                    <Link href='/analytics'>View Analytics</Link>
+                                    <Link href='/analytics'>{t('viewAnalytics')}</Link>
                                 </Button>
                             </CardContent>
                         </Card>
@@ -225,22 +226,22 @@ const DashboardNewPage = () => {
 
                 {/* System Status */}
                 <div>
-                    <h2 className='mb-4 text-2xl font-semibold'>System Status</h2>
+                    <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='Database Status'>
+                        <ContainerBox title={t('databaseStatus')}>
                             <div className='flex items-center gap-2'>
                                 <div className='h-3 w-3 rounded-full bg-green-500'></div>
-                                <span>Connected</span>
+                                <span>{t('connected')}</span>
                             </div>
-                            <p className='text-muted-foreground mt-2 text-sm'>All database connections are healthy</p>
+                            <p className='text-muted-foreground mt-2 text-sm'>{t('allConnectionsHealthy')}</p>
                         </ContainerBox>
 
-                        <ContainerBox title='Cache Status'>
+                        <ContainerBox title={t('cacheStatus')}>
                             <div className='flex items-center gap-2'>
                                 <div className='h-3 w-3 rounded-full bg-green-500'></div>
-                                <span>Operational</span>
+                                <span>{t('operational')}</span>
                             </div>
-                            <p className='text-muted-foreground mt-2 text-sm'>Caching system is functioning properly</p>
+                            <p className='text-muted-foreground mt-2 text-sm'>{t('cacheFunctioning')}</p>
                         </ContainerBox>
                     </div>
                 </div>

package/templates/default/components/DashboardPage.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import React, { useEffect } from 'react'
-import getString from 'nextjs-cms/translations'
+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'
@@ -11,6 +11,7 @@ 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(() => {}, [])
@@ -18,7 +19,7 @@ const DashboardPage = () => {
     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'>{getString('dashboard')}</h1>
+                <h1 className='text-3xl'>{t('dashboard')}</h1>
             </div>
             <div className='flex flex-col gap-4 p-4'>
                 {isLoading && (
@@ -32,24 +33,24 @@ const DashboardPage = () => {
                             <PieChartBox
                                 chartData={[
                                     {
-                                        name: getString('total_disk_space'),
+                                        name: t('totalDiskSpace'),
                                         value: data.diskSpaceLimit - data.diskSpaceUsage,
                                         fill: '#00C49F',
                                     },
                                     {
-                                        name: getString('used_disk_space'),
+                                        name: t('usedDiskSpace'),
                                         value: data.diskSpaceUsage,
                                         fill: '#E1315B',
                                     },
                                 ]}
                                 chartBoxTitles={{
-                                    mainTitle: getString('disk_space'),
+                                    mainTitle: t('diskSpace'),
                                     totalUnitSubtitle: {
-                                        key: getString('total_disk_space'),
+                                        key: t('totalDiskSpace'),
                                         value: humanReadableFileSize(data.diskSpaceLimit),
                                     },
                                     usedUnitSubtitle: {
-                                        key: getString('used_disk_space'),
+                                        key: t('usedDiskSpace'),
                                         value: humanReadableFileSize(data.diskSpaceUsage),
                                     },
                                 }}
@@ -57,24 +58,24 @@ const DashboardPage = () => {
                             <PieChartBox
                                 chartData={[
                                     {
-                                        name: getString('total_bandwidth'),
+                                        name: t('totalBandwidth'),
                                         value: data.bandwidthLimit - data.bandwidthUsage,
                                         fill: '#1c89f1',
                                     },
                                     {
-                                        name: getString('used_bandwidth'),
+                                        name: t('usedBandwidth'),
                                         value: data.bandwidthUsage,
                                         fill: '#ff6688',
                                     },
                                 ]}
                                 chartBoxTitles={{
-                                    mainTitle: getString('this_moth_bandwidth'),
+                                    mainTitle: t('thisMothBandwidth'),
                                     totalUnitSubtitle: {
-                                        key: getString('total_bandwidth'),
+                                        key: t('totalBandwidth'),
                                         value: humanReadableFileSize(data.bandwidthLimit),
                                     },
                                     usedUnitSubtitle: {
-                                        key: getString('used_bandwidth'),
+                                        key: t('usedBandwidth'),
                                         value: humanReadableFileSize(data.bandwidthUsage),
                                     },
                                 }}
@@ -82,24 +83,24 @@ const DashboardPage = () => {
                             <PieChartBox
                                 chartData={[
                                     {
-                                        name: getString('total_emails'),
+                                        name: t('totalEmails'),
                                         value: data.emailsLimit - data.emailsUsage,
                                         fill: '#c4ba56',
                                     },
                                     {
-                                        name: getString('used_emails'),
+                                        name: t('usedEmails'),
                                         value: data.emailsUsage,
                                         fill: '#1404c4',
                                     },
                                 ]}
                                 chartBoxTitles={{
-                                    mainTitle: getString('email_accounts'),
+                                    mainTitle: t('emailAccounts'),
                                     totalUnitSubtitle: {
-                                        key: getString('total_emails'),
+                                        key: t('totalEmails'),
                                         value: data.emailsLimit.toString(),
                                     },
                                     usedUnitSubtitle: {
-                                        key: getString('used_emails'),
+                                        key: t('usedEmails'),
                                         value: data.emailsUsage.toString(),
                                     },
                                 }}
@@ -107,24 +108,24 @@ const DashboardPage = () => {
                             <PieChartBox
                                 chartData={[
                                     {
-                                        name: getString('totalDatabases'),
+                                        name: t('totalDatabases'),
                                         value: data.dbsLimit - data.dbsCount,
                                         fill: '#56c4b4',
                                     },
                                     {
-                                        name: getString('usedDatabases'),
+                                        name: t('usedDatabases'),
                                         value: data.dbsCount,
                                         fill: '#625bb2',
                                     },
                                 ]}
                                 chartBoxTitles={{
-                                    mainTitle: 'MySQL®/MariaDB Databases',
+                                    mainTitle: t('mysqlDatabases'),
                                     totalUnitSubtitle: {
-                                        key: getString('totalDatabases'),
+                                        key: t('totalDatabases'),
                                         value: data.dbsLimit.toString(),
                                     },
                                     usedUnitSubtitle: {
-                                        key: getString('usedDatabases'),
+                                        key: t('usedDatabases'),
                                         value: data.dbsCount.toString(),
                                     },
                                 }}
@@ -133,35 +134,35 @@ const DashboardPage = () => {
                     ) : null}
                 </div>
                 <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
-                    <ContainerBox title={getString('accountInformation')}>
-                        <div>PHP Version: {data?.phpVersion}</div>
-                        <div>root: {data?.documentRoot}</div>
+                    <ContainerBox title={t('accountInformation')}>
+<div>{t('phpVersion')}: {data?.phpVersion}</div>
+                                        <div>{t('documentRoot')}: {data?.documentRoot}</div>
                     </ContainerBox>
 
-                    <ContainerBox title='MySQL/MariaDB'>
+                    <ContainerBox title={t('mysqlDatabases')}>
                         <div>
                             {data?.dbInfo ? (
                                 <>
-                                    <div>Version: {data.dbInfo.version}</div>
-                                    <div>Remote: {data.dbInfo.is_remote}</div>
+<div>{t('version')}: {data.dbInfo.version}</div>
+                                                    <div>{t('remote')}: {data.dbInfo.is_remote}</div>
                                 </>
                             ) : (
-                                <div>MySQL/MariaDB is not installed</div>
+                                <div>{t('mysqlNotInstalled')}</div>
                             )}
                         </div>
                         <div>
                             {data?.dbsList?.map((db: any, index: number) => (
                                 <div key={`${db.name}_${db.database}_${index}`}>
-                                    <div>database: {db.database}</div>
-                                    <div>Disk Usage: {humanReadableFileSize(db.disk_usage)}</div>
-                                    <div>Users: {db.users?.length}</div>
+<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={getString('passengerApplications')}>
+                    <ContainerBox title={t('passengerApplications')}>
                         <div className='flex gap-4'>
                             {data?.passengerAppList?.map((app: any) => (
                                 <ContainerBox title={app.name} key={app.name}>

package/templates/default/components/DashboardPageAlt.tsx

@@ -1,5 +1,6 @@
 import { Metadata } from 'next'
 import Image from 'next/image'
+import { useI18n } from 'nextjs-cms/translations/client'
 
 export const metadata: Metadata = {
     title: 'Dashboard',
@@ -7,6 +8,7 @@ export const metadata: Metadata = {
 }
 
 export default function DashboardPage() {
+    const t = useI18n()
     return (
         <>
             <div className='md:hidden'>
@@ -33,7 +35,7 @@ export default function DashboardPage() {
                 </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'>Dashboard</h2>
+                        <h2 className='text-3xl font-bold tracking-tight'>{t('dashboard')}</h2>
                         <div className='flex items-center space-x-2'></div>
                     </div>
                 </div>