create-nextjs-cms 0.5.92 → 0.5.93

package/templates/default/components/Sidebar.tsx

@@ -6,13 +6,14 @@ import { SidebarProps } from 'nextjs-cms/core/types'
 import SidebarItem from '@/components/SidebarItem'
 import SidebarDropdownItem from '@/components/SidebarDropdownItem'
 import { ScrollArea } from '@/components/ui/scroll-area'
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import ProtectedImage from '@/components/ProtectedImage'
 import { trpc } from '@/app/_trpc/client'
 import { useToast } from '@/components/ui/use-toast'
 import { logout, useSession } from 'nextjs-cms/auth/react'
 
 const Sidebar = (props: SidebarProps & { logoUrlPath: string; logoText: string }) => {
+    const t = useI18n()
     const session = useSession()
     const [navItems] = trpc.navigation.getSidebar.useSuspenseQuery()
     const { toast } = useToast()
@@ -24,19 +25,26 @@ const Sidebar = (props: SidebarProps & { logoUrlPath: string; logoText: string }
         } catch (error: any) {
             toast({
                 variant: 'destructive',
-                title: getString('logoutError'),
+                title: t('logoutError'),
                 description: error.message,
             })
         }
     }
+    const isRTL = session?.data?.user?.locale === 'ar'
     return (
         <div
             className={classNames({
-                'fixed z-20 h-full bg-linear-to-br from-indigo-600 to-sky-500 text-zinc-50 md:translate-x-0 dark:from-slate-950 dark:to-pink-950':
+                'fixed z-20 h-full bg-linear-to-br from-indigo-600 to-sky-500 text-zinc-50 dark:from-slate-950 dark:to-pink-950':
                     true,
                 'transition-all duration-100 ease-in-out': true,
                 'w-[300px] md:w-[275px]': true,
+                // LTR: sidebar on left, slides in from left
+                'left-0 md:translate-x-0': true,
                 '-translate-x-full': !props.mobileSidebar,
+                // RTL: sidebar on right, slides in from right
+                'rtl:left-auto rtl:right-0': true,
+                'rtl:translate-x-full rtl:md:translate-x-0': !props.mobileSidebar,
+                'rtl:translate-x-0': props.mobileSidebar,
             })}
         >
             <div
@@ -56,7 +64,7 @@ const Sidebar = (props: SidebarProps & { logoUrlPath: string; logoText: string }
                         {props.logoText}
                     </span>
                 </div>
-                <ScrollArea type='always' className='grow'>
+                <ScrollArea dir={isRTL ? 'rtl' : 'ltr'} type='always' className='grow'>
                     <ul
                         className={classNames({
                             'my-2 flex flex-col items-stretch gap-2': true,
@@ -66,7 +74,7 @@ const Sidebar = (props: SidebarProps & { logoUrlPath: string; logoText: string }
                             <>
                                 {navItems.fixed_sections && navItems.fixed_sections.length > 0 && (
                                     <div className='border-primary/40 mx-3 flex flex-col border-b py-2'>
-                                        <h2 className='my-2 text-xs text-gray-300'>Main</h2>
+                                        <h2 className='my-2 text-start text-xs text-gray-300'>{t('main')}</h2>
                                         {navItems.fixed_sections.map((item, index) => {
                                             return (
                                                 <SidebarItem
@@ -81,7 +89,7 @@ const Sidebar = (props: SidebarProps & { logoUrlPath: string; logoText: string }
 
                                 {navItems.cat_sections && navItems.cat_sections.length > 0 && (
                                     <div className='border-primary/40 mx-3 flex flex-col border-b py-2'>
-                                        <h2 className='my-2 text-xs text-gray-300'>Category Sections</h2>
+                                        <h2 className='my-2 text-start text-xs text-gray-300'>{t('categorySections')}</h2>
                                         {navItems.cat_sections.map((item, index) => {
                                             return (
                                                 <SidebarItem
@@ -96,7 +104,7 @@ const Sidebar = (props: SidebarProps & { logoUrlPath: string; logoText: string }
 
                                 {navItems.has_items_sections && navItems.has_items_sections.length > 0 && (
                                     <div className='border-primary/40 mx-3 flex flex-col border-b py-2'>
-                                        <h2 className='my-2 text-xs text-gray-300'>Sections with Items</h2>
+                                        <h2 className='my-2 text-start text-xs text-gray-300'>{t('sectionsWithItems')}</h2>
                                         <div className='flex flex-col gap-y-2'>
                                             {navItems.has_items_sections.map((item, index) => {
                                                 return (
@@ -112,7 +120,7 @@ const Sidebar = (props: SidebarProps & { logoUrlPath: string; logoText: string }
                                 )}
                                 {navItems.simple_sections && navItems.simple_sections.length > 0 && (
                                     <div className='mx-3 flex flex-col border-b border-blue-900 py-2'>
-                                        <h2 className='my-2 text-xs text-gray-300'>Simple Sections</h2>
+                                        <h2 className='my-2 text-start text-xs text-gray-300'>{t('simpleSections')}</h2>
                                         {navItems.simple_sections.map((item, index) => {
                                             return (
                                                 <SidebarItem
@@ -125,13 +133,13 @@ const Sidebar = (props: SidebarProps & { logoUrlPath: string; logoText: string }
                                     </div>
                                 )}
                                 <div className='mx-3 flex flex-col py-2'>
-                                    <h2 className='my-2 text-xs text-gray-300'>Settings</h2>
+                                    <h2 className='my-2 text-start text-xs text-gray-300'>{t('settings')}</h2>
                                     <SidebarItem
                                         closeSideBar={props.closeSideBar}
                                         key={101}
                                         item={{
                                             path: '/settings',
-                                            title: getString('accountSettings'),
+                                            title: t('accountSettings'),
                                         }}
                                     />
                                     <Link
@@ -140,10 +148,10 @@ const Sidebar = (props: SidebarProps & { logoUrlPath: string; logoText: string }
                                         className={classNames({
                                             'rounded-lg text-white hover:bg-indigo-900 dark:hover:bg-emerald-600': true, //colors
                                             'transition-colors duration-100': false, //animation
-                                            'gap-4 p-2': true,
+                                            'gap-4 p-2 text-start': true,
                                         })}
                                     >
-                                        <span>{getString('logout')}</span>
+                                        <span>{t('logout')}</span>
                                     </Link>
                                 </div>
                             </>
@@ -155,7 +163,7 @@ const Sidebar = (props: SidebarProps & { logoUrlPath: string; logoText: string }
                         'grid place-content-stretch bg-indigo-700 p-2 dark:bg-slate-800': true,
                     })}
                 >
-                    <div className='flex h-12 items-center gap-4'>
+                        <div className='flex h-12 items-center gap-4'>
                         {session?.data?.user.image ? (
                             <ProtectedImage
                                 section={'admins'}
@@ -177,10 +185,10 @@ const Sidebar = (props: SidebarProps & { logoUrlPath: string; logoText: string }
                             />
                         )}
 
-                        <div className='flex flex-col'>
+                        <div className='flex flex-col text-start'>
                             <span className='my-0 text-indigo-50'>{session?.data?.user.name}</span>
                             <Link href='/settings' className='text-sm text-indigo-200'>
-                                {getString('settings')}
+                                {t('settings')}
                             </Link>
                         </div>
                     </div>

package/templates/default/components/SidebarDropdownItem.tsx

@@ -4,15 +4,17 @@ import { useState } from 'react'
 import { SidebarItemProps } from 'nextjs-cms/core/types'
 import { useAutoAnimate } from '@formkit/auto-animate/react'
 import { ChevronDownIcon, ChevronUpIcon, FolderIcon, PlusCircleIcon, PlusIcon } from 'lucide-react'
+import { useI18n } from 'nextjs-cms/translations/client'
 
 export default function SidebarDropdownItem({ item, closeSideBar }: SidebarItemProps) {
+    const t = useI18n()
     const [parent] = useAutoAnimate()
     const [open, setOpen] = useState(false)
     return (
         <div ref={parent}>
             <div
                 className={classNames({
-                    'flex text-white hover:bg-indigo-900 dark:hover:bg-emerald-600': true, //colors
+                    'flex cursor-pointer text-white hover:bg-indigo-900 dark:hover:bg-emerald-600': true, //colors
                     'transition-colors duration-100': false, //animation
                     'gap-4 rounded-md p-2': true,
                     'rounded-b-none bg-indigo-700 dark:bg-emerald-600': open,
@@ -21,9 +23,13 @@ export default function SidebarDropdownItem({ item, closeSideBar }: SidebarItemP
             >
                 <li className='relative flex w-full items-center justify-between gap-2'>
                     {/*<span>{item.icon}</span>*/}
-                    <span>{item.title}</span>
+                    <span className='text-start'>{item.title}</span>
                     <span>
-                        {open ? <ChevronUpIcon className='h-5 w-5' /> : <ChevronDownIcon className='h-5 w-5' />}
+                        {open ? (
+                            <ChevronUpIcon className='h-5 w-5' />
+                        ) : (
+                            <ChevronDownIcon className='h-5 w-5 rtl:rotate-0' />
+                        )}
                     </span>
                 </li>
             </div>
@@ -48,7 +54,7 @@ export default function SidebarDropdownItem({ item, closeSideBar }: SidebarItemP
                             <span>
                                 <PlusIcon className='size-4' />
                             </span>
-                            <span>New</span>
+                            <span>{t('new')}</span>
                         </li>
                     </Link>
                     <Link
@@ -64,7 +70,7 @@ export default function SidebarDropdownItem({ item, closeSideBar }: SidebarItemP
                             <span>
                                 <FolderIcon className='size-4' />
                             </span>
-                            <span>Browse</span>
+                            <span>{t('browse')}</span>
                         </li>
                     </Link>
                 </div>

package/templates/default/components/SidebarItem.tsx

@@ -11,6 +11,7 @@ export default function SidebarItem({ item, closeSideBar }: SidebarItemProps) {
                 'rounded-lg text-white hover:bg-indigo-900 dark:hover:bg-emerald-600': true, //colors
                 'transition-colors duration-100': false, //animation
                 'gap-4 p-2': true,
+                'text-start': true, // RTL support
             })}
         >
             <span>{item.title}</span>

package/templates/default/components/VariantCard.tsx

@@ -1,4 +1,4 @@
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import ContainerBox from '@/components/ContainerBox'
 import React from 'react'
 import { Variant } from 'nextjs-cms/core/types'
@@ -30,7 +30,7 @@ const VariantCard = ({
         if (response.error) {
             toast({
                 variant: 'destructive',
-                title: getString('delete_admin'),
+                title: t('deleteAdmin'),
                 description: response.error.message,
             })
         } else if (response.code === 200) {
@@ -39,7 +39,7 @@ const VariantCard = ({
             setModalResponse(null)
             toast({
                 variant: 'success',
-                title: getString('itemDeletedSuccessfully'),
+                title: t('itemDeletedSuccessfully'),
                 description: response.message,
             })
         }
@@ -55,7 +55,7 @@ const VariantCard = ({
                         onClick={() => {
                             setModal({
                                 size: 'lg',
-                                title: getString('edit'),
+                                title: t('edit'),
                                 body: (
                                     <div className='p-4'>
                                         <VariantEditPage
@@ -73,7 +73,7 @@ const VariantCard = ({
                             })
                         }}
                     >
-                        {getString('edit')}
+                        {t('edit')}
                     </Button>
                     {/* Delete Button */}
                     <Button
@@ -82,11 +82,11 @@ const VariantCard = ({
                         variant='destructive'
                         onClick={() => {
                             setModal({
-                                title: getString('delete'),
+                                title: t('delete'),
                                 body: (
                                     <div className='p-4'>
                                         <div className='flex flex-col gap-4'>
-                                            <div>{getString('deleteItemText')}</div>
+                                            <div>{t('deleteItemText')}</div>
                                             <div className='flex gap-2'>
                                                 <button
                                                     className='rounded bg-green-600 px-2 py-1 text-white'
@@ -112,7 +112,7 @@ const VariantCard = ({
                             })
                         }}
                     >
-                        {getString('delete')}
+                        {t('delete')}
                     </Button>
                 </div>
             </div>

package/templates/default/components/VariantEditPage.tsx

@@ -5,7 +5,7 @@ import { getVariantPage } from '@/lib/apiHelpers'
 import React, { RefObject, useEffect, useRef, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { InputGroup } from 'nextjs-cms/core/types'
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import useModal from '@/hooks/useModal'
 import { AxiosError } from 'axios'
 import InfoCard from '@/components/InfoCard'
@@ -37,6 +37,7 @@ export default function VariantEditPage({
     }[]
     action?: any
 }) {
+    const t = useI18n()
     const [response, setResponse] = useState<any>(null)
     const [progress, setProgress] = useState(0)
     const [progressVariant, setProgressVariant] = useState<'determinate' | 'query'>('determinate')
@@ -117,7 +118,7 @@ export default function VariantEditPage({
                     setResponse(null)
                     toast({
                         variant: 'success',
-                        description: getString('itemUpdatedSuccessfully'),
+                        description: t('itemUpdatedSuccessfully'),
                     })
 
                     // Redirect to the edit page
@@ -159,7 +160,7 @@ export default function VariantEditPage({
                             <>
                                 <h1 className='pb-4 text-4xl'>{data?.variant?.variant_html_name_en}</h1>
                                 <span>
-                                    /{getString('edit')} {data?.variant?.variant_single_item_name_en}
+                                    /{t('edit')} {data?.variant?.variant_single_item_name_en}
                                 </span>
                             </>
                         )}
@@ -208,7 +209,7 @@ export default function VariantEditPage({
                                                 type='submit'
                                                 disabled={isSubmitting}
                                             >
-                                                {isSubmitting ? getString('loading') : getString('save')}
+                                                {isSubmitting ? t('loading') : t('save')}
                                             </button>
                                             {isSubmitting && (
                                                 <div className='mt-0.5'>

package/templates/default/components/analytics/BounceRate.tsx

@@ -1,4 +1,4 @@
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import { formatNumber } from 'nextjs-cms/utils'
 import PieChartBox from '@/components/PieChartBox'
 import React, { useEffect } from 'react'
@@ -9,6 +9,7 @@ import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
 import { useTheme } from 'next-themes'
 
 export const BounceRate = ({ fromDate, toDate }: { fromDate: Date | string | null; toDate: Date | string | null }) => {
+    const t = useI18n()
     const axiosPrivate = useAxiosPrivate()
     let controller = new AbortController()
     const { theme } = useTheme()
@@ -34,12 +35,12 @@ export const BounceRate = ({ fromDate, toDate }: { fromDate: Date | string | nul
 
     const bounceRateData: PieChartDataItem[] = [
         {
-            name: getString('total_disk_space'),
+            name: t('totalDiskSpace'),
             value: 100 - parseInt(data?.bounceRate),
             fill: 'transparent',
         },
         {
-            name: getString('used_disk_space'),
+            name: t('usedDiskSpace'),
             value: parseInt(data?.bounceRate),
             fill: theme === 'dark' ? '#adfa1d' : '#E1315B',
         },
@@ -58,9 +59,9 @@ export const BounceRate = ({ fromDate, toDate }: { fromDate: Date | string | nul
             chartData={bounceRateData}
             isLoading={isLoading}
             chartBoxTitles={{
-                mainTitle: getString('bounceRate'),
+                mainTitle: t('bounceRate'),
                 totalUnitSubtitle: {
-                    key: getString('sessionsPerUser'),
+                    key: t('sessionsPerUser'),
                     value: formatNumber(data?.sessionsPerUser),
                 },
             }}

package/templates/default/components/analytics/LivePageViews.tsx

@@ -1,4 +1,4 @@
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
 import ContainerBox from '@/components/ContainerBox'
 import React, { useEffect } from 'react'
@@ -7,6 +7,7 @@ import { useQuery } from '@tanstack/react-query'
 import { getAnalytics } from '@/lib/apiHelpers'
 
 export const LivePageViews = () => {
+    const t = useI18n()
     const axiosPrivate = useAxiosPrivate()
     const controller = new AbortController()
 
@@ -21,14 +22,14 @@ export const LivePageViews = () => {
     })
 
     return (
-        <ContainerBox title={getString('liveUsersAreViewing')}>
+        <ContainerBox title={t('liveUsersAreViewing')}>
             <Table>
-                <TableCaption>{getString('liveUsersSubtitle')}</TableCaption>
+                <TableCaption>{t('liveUsersSubtitle')}</TableCaption>
                 <TableHeader>
                     <TableRow>
-                        <TableHead>{getString('country')}</TableHead>
-                        <TableHead>{getString('device')}</TableHead>
-                        <TableHead>{getString('page')}</TableHead>
+                        <TableHead>{t('country')}</TableHead>
+                        <TableHead>{t('device')}</TableHead>
+                        <TableHead>{t('page')}</TableHead>
                     </TableRow>
                 </TableHeader>
                 <TableBody>
@@ -43,7 +44,7 @@ export const LivePageViews = () => {
                     ) : (
                         <TableRow>
                             <TableCell colSpan={3} className='text-center'>
-                                {getString('noLiveUsers')}
+                                {t('noLiveUsers')}
                             </TableCell>
                         </TableRow>
                     )}

package/templates/default/components/analytics/LiveUsersCount.tsx

@@ -1,4 +1,4 @@
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import { formatNumber } from 'nextjs-cms/utils'
 import ContainerBox from '@/components/ContainerBox'
 import React from 'react'
@@ -8,6 +8,7 @@ import { getAnalytics } from '@/lib/apiHelpers'
 import LoadingSpinners from '@/components/LoadingSpinners'
 
 export const LiveUsersCount = () => {
+    const t = useI18n()
     const axiosPrivate = useAxiosPrivate()
     const controller = new AbortController()
 
@@ -21,7 +22,7 @@ export const LiveUsersCount = () => {
             }),
     })
     return (
-        <ContainerBox title={getString('liveUsers')}>
+        <ContainerBox title={t('liveUsers')}>
             {isLoading ? (
                 <LoadingSpinners single={true} />
             ) : (

package/templates/default/components/analytics/MonthlyPageViews.tsx

@@ -1,4 +1,4 @@
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import BarChartBox from '@/components/BarChartBox'
 import React from 'react'
 import { useTheme } from 'next-themes'
@@ -13,6 +13,7 @@ export const MonthlyPageViews = ({
     fromDate: Date | string | null
     toDate: Date | string | null
 }) => {
+    const t = useI18n()
     const axiosPrivate = useAxiosPrivate()
     const controller = new AbortController()
     const { theme } = useTheme()
@@ -33,7 +34,7 @@ export const MonthlyPageViews = ({
             <BarChartBox
                 isLoading={isLoading}
                 chartData={data?.monthlyPageViews}
-                title={getString('monthlyPageViews')}
+                title={t('monthlyPageViews')}
                 fill={theme === 'dark' ? '#adfa1d' : '#ff6688'}
             />
         </>

package/templates/default/components/analytics/TopCountries.tsx

@@ -1,4 +1,4 @@
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import { BarChartDataItem } from 'nextjs-cms/core/types'
 import { Badge } from '@/components/ui/badge'
 import { formatNumber } from 'nextjs-cms/utils'
@@ -16,6 +16,7 @@ export const TopCountries = ({
     fromDate: Date | string | null
     toDate: Date | string | null
 }) => {
+    const t = useI18n()
     const axiosPrivate = useAxiosPrivate()
     const controller = new AbortController()
 
@@ -32,9 +33,9 @@ export const TopCountries = ({
     })
 
     return (
-        <ContainerBox title={getString('countries')}>
+        <ContainerBox title={t('countries')}>
             <div className='w-full mb-6'>
-                <h1 className='font-bold border-b pb-1 my-1'>{getString('topCountries')}</h1>
+                <h1 className='font-bold border-b pb-1 my-1'>{t('topCountries')}</h1>
                 {isLoading && <LoadingSpinners single={true} />}
                 {data?.topCountries?.length > 0 &&
                     data.topCountries.map((country: BarChartDataItem, index: number) => (

package/templates/default/components/analytics/TopDevices.tsx

@@ -1,4 +1,4 @@
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import { BarChartDataItem } from 'nextjs-cms/core/types'
 import { Badge } from '@/components/ui/badge'
 import { formatNumber } from 'nextjs-cms/utils'
@@ -10,6 +10,7 @@ import { getAnalytics } from '@/lib/apiHelpers'
 import LoadingSpinners from '@/components/LoadingSpinners'
 
 export const TopDevices = ({ fromDate, toDate }: { fromDate: Date | string | null; toDate: Date | string | null }) => {
+    const t = useI18n()
     const axiosPrivate = useAxiosPrivate()
     const controller = new AbortController()
 
@@ -26,9 +27,9 @@ export const TopDevices = ({ fromDate, toDate }: { fromDate: Date | string | nul
     })
 
     return (
-        <ContainerBox title={getString('devices')}>
+        <ContainerBox title={t('devices')}>
             <div className='w-full'>
-                <h1 className='font-bold border-b pb-1 my-1'>{getString('topDevices')}</h1>
+                <h1 className='font-bold border-b pb-1 my-1'>{t('topDevices')}</h1>
                 {isLoading && <LoadingSpinners single={true} />}
                 {data?.topDevices?.length > 0 &&
                     data.topDevices.map((device: BarChartDataItem, index: number) => (

package/templates/default/components/analytics/TopMediums.tsx

@@ -1,4 +1,4 @@
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import { BarChartDataItem } from 'nextjs-cms/core/types'
 import { Badge } from '@/components/ui/badge'
 import { formatNumber } from 'nextjs-cms/utils'
@@ -10,6 +10,7 @@ import { getAnalytics } from '@/lib/apiHelpers'
 import LoadingSpinners from '@/components/LoadingSpinners'
 
 export const TopMediums = ({ fromDate, toDate }: { fromDate: Date | string | null; toDate: Date | string | null }) => {
+    const t = useI18n()
     const axiosPrivate = useAxiosPrivate()
     let controller = new AbortController()
 
@@ -38,9 +39,9 @@ export const TopMediums = ({ fromDate, toDate }: { fromDate: Date | string | nul
     }, [])
 
     return (
-        <ContainerBox title={getString('mediums')}>
+        <ContainerBox title={t('mediums')}>
             <div className='w-full mb-6'>
-                <h1 className='font-bold border-b pb-1 my-1'>{getString('topMediums')}</h1>
+                <h1 className='font-bold border-b pb-1 my-1'>{t('topMediums')}</h1>
                 {isLoading && <LoadingSpinners single={true} />}
                 {data?.topMediums?.length > 0 &&
                     data.topMediums.map((medium: BarChartDataItem, index: number) => (

package/templates/default/components/analytics/TopSources.tsx

@@ -1,4 +1,4 @@
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import { BarChartDataItem } from 'nextjs-cms/core/types'
 import { Badge } from '@/components/ui/badge'
 import { formatNumber } from 'nextjs-cms/utils'
@@ -10,6 +10,7 @@ import { getAnalytics } from '@/lib/apiHelpers'
 import LoadingSpinners from '@/components/LoadingSpinners'
 
 export const TopSources = ({ fromDate, toDate }: { fromDate: Date | string | null; toDate: Date | string | null }) => {
+    const t = useI18n()
     const axiosPrivate = useAxiosPrivate()
     const controller = new AbortController()
 
@@ -25,9 +26,9 @@ export const TopSources = ({ fromDate, toDate }: { fromDate: Date | string | nul
             }),
     })
     return (
-        <ContainerBox title={getString('sources')}>
+        <ContainerBox title={t('sources')}>
             <div className='w-full mb-6'>
-                <h1 className='font-bold border-b pb-1 my-1'>{getString('topSources')}</h1>
+                <h1 className='font-bold border-b pb-1 my-1'>{t('topSources')}</h1>
                 {isLoading && <LoadingSpinners single={true} />}
                 {data?.topSources?.length > 0 &&
                     data.topSources.map((source: BarChartDataItem, index: number) => (

package/templates/default/components/analytics/TotalPageViews.tsx

@@ -1,4 +1,4 @@
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import { formatNumber } from 'nextjs-cms/utils'
 import ContainerBox from '@/components/ContainerBox'
 import React from 'react'
@@ -14,6 +14,7 @@ export const TotalPageViews = ({
     fromDate: Date | string | null
     toDate: Date | string | null
 }) => {
+    const t = useI18n()
     const axiosPrivate = useAxiosPrivate()
     const controller = new AbortController()
 
@@ -29,7 +30,7 @@ export const TotalPageViews = ({
             }),
     })
     return (
-        <ContainerBox title={getString('totalPageViews')}>
+        <ContainerBox title={t('totalPageViews')}>
             {isLoading ? (
                 <LoadingSpinners single={true} />
             ) : (

package/templates/default/components/analytics/TotalSessions.tsx

@@ -1,4 +1,4 @@
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import { formatNumber } from 'nextjs-cms/utils'
 import ContainerBox from '@/components/ContainerBox'
 import React from 'react'
@@ -14,6 +14,7 @@ export const TotalSessions = ({
     fromDate: Date | string | null
     toDate: Date | string | null
 }) => {
+    const t = useI18n()
     const axiosPrivate = useAxiosPrivate()
     const controller = new AbortController()
 
@@ -29,7 +30,7 @@ export const TotalSessions = ({
             }),
     })
     return (
-        <ContainerBox title={getString('totalSessions')}>
+        <ContainerBox title={t('totalSessions')}>
             {isLoading ? (
                 <LoadingSpinners single={true} />
             ) : (

package/templates/default/components/analytics/TotalUniqueUsers.tsx

@@ -1,4 +1,4 @@
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import { formatNumber } from 'nextjs-cms/utils'
 import ContainerBox from '@/components/ContainerBox'
 import React from 'react'
@@ -14,6 +14,7 @@ export const TotalUniqueUsers = ({
     fromDate: Date | string | null
     toDate: Date | string | null
 }) => {
+    const t = useI18n()
     const axiosPrivate = useAxiosPrivate()
     const controller = new AbortController()
 
@@ -29,7 +30,7 @@ export const TotalUniqueUsers = ({
             }),
     })
     return (
-        <ContainerBox title={getString('totalUniqueUsers')}>
+        <ContainerBox title={t('totalUniqueUsers')}>
             {isLoading ? (
                 <LoadingSpinners single={true} />
             ) : (