create-nextjs-cms 0.7.0 → 0.7.2

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

@@ -1,55 +1,55 @@
-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'
-import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
-import { useQuery } from '@tanstack/react-query'
-import { getAnalytics } from '@/lib/apiHelpers'
-
-export const LivePageViews = () => {
-    const t = useI18n()
-    const axiosPrivate = useAxiosPrivate()
-    const controller = new AbortController()
-
-    const { isLoading, isError, data, error } = useQuery({
-        queryKey: ['analyticsPage', 'livePageViews'],
-        queryFn: () =>
-            getAnalytics({
-                requestType: 'livePageViews',
-                axiosPrivate,
-                controller,
-            }),
-    })
-
-    return (
-        <ContainerBox title={t('liveUsersAreViewing')}>
-            <Table>
-                <TableCaption>{t('liveUsersSubtitle')}</TableCaption>
-                <TableHeader>
-                    <TableRow>
-                        <TableHead>{t('country')}</TableHead>
-                        <TableHead>{t('device')}</TableHead>
-                        <TableHead>{t('page')}</TableHead>
-                    </TableRow>
-                </TableHeader>
-                <TableBody>
-                    {data?.livePageViews?.locations?.length > 0 ? (
-                        data.livePageViews.locations.map((location: any, index: number) => (
-                            <TableRow key={index}>
-                                <TableCell>{location.country}</TableCell>
-                                <TableCell>{location.device}</TableCell>
-                                <TableCell>{location.page}</TableCell>
-                            </TableRow>
-                        ))
-                    ) : (
-                        <TableRow>
-                            <TableCell colSpan={3} className='text-center'>
-                                {t('noLiveUsers')}
-                            </TableCell>
-                        </TableRow>
-                    )}
-                </TableBody>
-            </Table>
-        </ContainerBox>
-    )
-}
+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'
+import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
+import { useQuery } from '@tanstack/react-query'
+import { getAnalytics } from '@/lib/apiHelpers'
+
+export const LivePageViews = () => {
+    const t = useI18n()
+    const axiosPrivate = useAxiosPrivate()
+    const controller = new AbortController()
+
+    const { isLoading, isError, data, error } = useQuery({
+        queryKey: ['analyticsPage', 'livePageViews'],
+        queryFn: () =>
+            getAnalytics({
+                requestType: 'livePageViews',
+                axiosPrivate,
+                controller,
+            }),
+    })
+
+    return (
+        <ContainerBox title={t('liveUsersAreViewing')}>
+            <Table>
+                <TableCaption>{t('liveUsersSubtitle')}</TableCaption>
+                <TableHeader>
+                    <TableRow>
+                        <TableHead>{t('country')}</TableHead>
+                        <TableHead>{t('device')}</TableHead>
+                        <TableHead>{t('page')}</TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {data?.livePageViews?.locations?.length > 0 ? (
+                        data.livePageViews.locations.map((location: any, index: number) => (
+                            <TableRow key={index}>
+                                <TableCell>{location.country}</TableCell>
+                                <TableCell>{location.device}</TableCell>
+                                <TableCell>{location.page}</TableCell>
+                            </TableRow>
+                        ))
+                    ) : (
+                        <TableRow>
+                            <TableCell colSpan={3} className='text-center'>
+                                {t('noLiveUsers')}
+                            </TableCell>
+                        </TableRow>
+                    )}
+                </TableBody>
+            </Table>
+        </ContainerBox>
+    )
+}

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

@@ -1,33 +1,33 @@
-import { useI18n } from 'nextjs-cms/translations/client'
-import { formatNumber } from 'nextjs-cms/utils'
-import ContainerBox from '@/components/ContainerBox'
-import React from 'react'
-import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
-import { useQuery } from '@tanstack/react-query'
-import { getAnalytics } from '@/lib/apiHelpers'
-import LoadingSpinners from '@/components/LoadingSpinners'
-
-export const LiveUsersCount = () => {
-    const t = useI18n()
-    const axiosPrivate = useAxiosPrivate()
-    const controller = new AbortController()
-
-    const { isLoading, isError, data, error } = useQuery({
-        queryKey: ['analyticsPage', 'liveUsersCount'],
-        queryFn: () =>
-            getAnalytics({
-                requestType: 'liveUsersCount',
-                axiosPrivate,
-                controller,
-            }),
-    })
-    return (
-        <ContainerBox title={t('liveUsers')}>
-            {isLoading ? (
-                <LoadingSpinners single={true} />
-            ) : (
-                <div className='text-4xl'>{formatNumber(data?.liveUsers?.count)}</div>
-            )}
-        </ContainerBox>
-    )
-}
+import { useI18n } from 'nextjs-cms/translations/client'
+import { formatNumber } from 'nextjs-cms/utils'
+import ContainerBox from '@/components/ContainerBox'
+import React from 'react'
+import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
+import { useQuery } from '@tanstack/react-query'
+import { getAnalytics } from '@/lib/apiHelpers'
+import LoadingSpinners from '@/components/LoadingSpinners'
+
+export const LiveUsersCount = () => {
+    const t = useI18n()
+    const axiosPrivate = useAxiosPrivate()
+    const controller = new AbortController()
+
+    const { isLoading, isError, data, error } = useQuery({
+        queryKey: ['analyticsPage', 'liveUsersCount'],
+        queryFn: () =>
+            getAnalytics({
+                requestType: 'liveUsersCount',
+                axiosPrivate,
+                controller,
+            }),
+    })
+    return (
+        <ContainerBox title={t('liveUsers')}>
+            {isLoading ? (
+                <LoadingSpinners single={true} />
+            ) : (
+                <div className='text-4xl'>{formatNumber(data?.liveUsers?.count)}</div>
+            )}
+        </ContainerBox>
+    )
+}

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

@@ -1,42 +1,42 @@
-import { useI18n } from 'nextjs-cms/translations/client'
-import BarChartBox from '@/components/BarChartBox'
-import React from 'react'
-import { useTheme } from 'next-themes'
-import { useQuery } from '@tanstack/react-query'
-import { getAnalytics } from '@/lib/apiHelpers'
-import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
-
-export const MonthlyPageViews = ({
-    fromDate,
-    toDate,
-}: {
-    fromDate: Date | string | null
-    toDate: Date | string | null
-}) => {
-    const t = useI18n()
-    const axiosPrivate = useAxiosPrivate()
-    const controller = new AbortController()
-    const { theme } = useTheme()
-
-    const { isLoading, isError, data, error } = useQuery({
-        queryKey: ['analyticsPage', 'monthlyPageViews', fromDate, toDate],
-        queryFn: () =>
-            getAnalytics({
-                requestType: 'monthlyPageViews',
-                axiosPrivate,
-                controller,
-                fromDate,
-                toDate,
-            }),
-    })
-    return (
-        <>
-            <BarChartBox
-                isLoading={isLoading}
-                chartData={data?.monthlyPageViews}
-                title={t('monthlyPageViews')}
-                fill={theme === 'dark' ? '#adfa1d' : '#ff6688'}
-            />
-        </>
-    )
-}
+import { useI18n } from 'nextjs-cms/translations/client'
+import BarChartBox from '@/components/BarChartBox'
+import React from 'react'
+import { useTheme } from 'next-themes'
+import { useQuery } from '@tanstack/react-query'
+import { getAnalytics } from '@/lib/apiHelpers'
+import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
+
+export const MonthlyPageViews = ({
+    fromDate,
+    toDate,
+}: {
+    fromDate: Date | string | null
+    toDate: Date | string | null
+}) => {
+    const t = useI18n()
+    const axiosPrivate = useAxiosPrivate()
+    const controller = new AbortController()
+    const { theme } = useTheme()
+
+    const { isLoading, isError, data, error } = useQuery({
+        queryKey: ['analyticsPage', 'monthlyPageViews', fromDate, toDate],
+        queryFn: () =>
+            getAnalytics({
+                requestType: 'monthlyPageViews',
+                axiosPrivate,
+                controller,
+                fromDate,
+                toDate,
+            }),
+    })
+    return (
+        <>
+            <BarChartBox
+                isLoading={isLoading}
+                chartData={data?.monthlyPageViews}
+                title={t('monthlyPageViews')}
+                fill={theme === 'dark' ? '#adfa1d' : '#ff6688'}
+            />
+        </>
+    )
+}

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

@@ -1,52 +1,52 @@
-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'
-import ContainerBox from '@/components/ContainerBox'
-import React from 'react'
-import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
-import { useQuery } from '@tanstack/react-query'
-import { getAnalytics } from '@/lib/apiHelpers'
-import LoadingSpinners from '@/components/LoadingSpinners'
-
-export const TopCountries = ({
-    fromDate,
-    toDate,
-}: {
-    fromDate: Date | string | null
-    toDate: Date | string | null
-}) => {
-    const t = useI18n()
-    const axiosPrivate = useAxiosPrivate()
-    const controller = new AbortController()
-
-    const { isLoading, isError, data, error } = useQuery({
-        queryKey: ['analyticsPage', 'topCountries', fromDate, toDate],
-        queryFn: () =>
-            getAnalytics({
-                requestType: 'topCountries',
-                axiosPrivate,
-                controller,
-                fromDate,
-                toDate,
-            }),
-    })
-
-    return (
-        <ContainerBox title={t('countries')}>
-            <div className='w-full mb-6'>
-                <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) => (
-                        <div key={`${index}-${country.name}`} className='w-full text-sm flex justify-between'>
-                            <span className='font-bold text-foreground'>{country.name}:</span>
-                            <Badge variant='outline' className='ms-2'>
-                                {formatNumber(country.value)}
-                            </Badge>
-                        </div>
-                    ))}
-            </div>
-        </ContainerBox>
-    )
-}
+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'
+import ContainerBox from '@/components/ContainerBox'
+import React from 'react'
+import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
+import { useQuery } from '@tanstack/react-query'
+import { getAnalytics } from '@/lib/apiHelpers'
+import LoadingSpinners from '@/components/LoadingSpinners'
+
+export const TopCountries = ({
+    fromDate,
+    toDate,
+}: {
+    fromDate: Date | string | null
+    toDate: Date | string | null
+}) => {
+    const t = useI18n()
+    const axiosPrivate = useAxiosPrivate()
+    const controller = new AbortController()
+
+    const { isLoading, isError, data, error } = useQuery({
+        queryKey: ['analyticsPage', 'topCountries', fromDate, toDate],
+        queryFn: () =>
+            getAnalytics({
+                requestType: 'topCountries',
+                axiosPrivate,
+                controller,
+                fromDate,
+                toDate,
+            }),
+    })
+
+    return (
+        <ContainerBox title={t('countries')}>
+            <div className='w-full mb-6'>
+                <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) => (
+                        <div key={`${index}-${country.name}`} className='w-full text-sm flex justify-between'>
+                            <span className='font-bold text-foreground'>{country.name}:</span>
+                            <Badge variant='outline' className='ms-2'>
+                                {formatNumber(country.value)}
+                            </Badge>
+                        </div>
+                    ))}
+            </div>
+        </ContainerBox>
+    )
+}

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

@@ -1,46 +1,46 @@
-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'
-import ContainerBox from '@/components/ContainerBox'
-import React from 'react'
-import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
-import { useQuery } from '@tanstack/react-query'
-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()
-
-    const { isLoading, isError, data, error } = useQuery({
-        queryKey: ['analyticsPage', 'topDevices', fromDate, toDate],
-        queryFn: () =>
-            getAnalytics({
-                requestType: 'topDevices',
-                axiosPrivate,
-                controller,
-                fromDate,
-                toDate,
-            }),
-    })
-
-    return (
-        <ContainerBox title={t('devices')}>
-            <div className='w-full'>
-                <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) => (
-                        <div key={`${index}-${device.name}`} className='w-full text-sm flex justify-between'>
-                            <span className='font-bold text-foreground'>{device.name}:</span>
-                            <Badge variant='outline' className='ms-2'>
-                                {formatNumber(device.value)}
-                            </Badge>
-                        </div>
-                    ))}
-            </div>
-        </ContainerBox>
-    )
-}
+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'
+import ContainerBox from '@/components/ContainerBox'
+import React from 'react'
+import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
+import { useQuery } from '@tanstack/react-query'
+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()
+
+    const { isLoading, isError, data, error } = useQuery({
+        queryKey: ['analyticsPage', 'topDevices', fromDate, toDate],
+        queryFn: () =>
+            getAnalytics({
+                requestType: 'topDevices',
+                axiosPrivate,
+                controller,
+                fromDate,
+                toDate,
+            }),
+    })
+
+    return (
+        <ContainerBox title={t('devices')}>
+            <div className='w-full'>
+                <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) => (
+                        <div key={`${index}-${device.name}`} className='w-full text-sm flex justify-between'>
+                            <span className='font-bold text-foreground'>{device.name}:</span>
+                            <Badge variant='outline' className='ms-2'>
+                                {formatNumber(device.value)}
+                            </Badge>
+                        </div>
+                    ))}
+            </div>
+        </ContainerBox>
+    )
+}

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

@@ -1,58 +1,58 @@
-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'
-import ContainerBox from '@/components/ContainerBox'
-import React, { useEffect } from 'react'
-import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
-import { useQuery } from '@tanstack/react-query'
-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()
-
-    const { isLoading, isError, data, error } = useQuery({
-        queryKey: ['analyticsPage', 'topMediums', fromDate, toDate],
-        queryFn: () => {
-            // Abort the previous request
-            controller.abort()
-
-            // Create a new AbortController for the new request
-            controller = new AbortController()
-            return getAnalytics({
-                requestType: 'topMediums',
-                axiosPrivate,
-                controller,
-                fromDate,
-                toDate,
-            })
-        },
-    })
-
-    useEffect(() => {
-        return () => {
-            controller.abort()
-        }
-    }, [])
-
-    return (
-        <ContainerBox title={t('mediums')}>
-            <div className='w-full mb-6'>
-                <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) => (
-                        <div key={`${index}-${medium.name}`} className='w-full text-sm flex justify-between'>
-                            <span className='font-bold text-foreground'>{medium.name}:</span>
-                            <Badge variant='outline' className='ms-2'>
-                                {formatNumber(medium.value)}
-                            </Badge>
-                        </div>
-                    ))}
-            </div>
-        </ContainerBox>
-    )
-}
+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'
+import ContainerBox from '@/components/ContainerBox'
+import React, { useEffect } from 'react'
+import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
+import { useQuery } from '@tanstack/react-query'
+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()
+
+    const { isLoading, isError, data, error } = useQuery({
+        queryKey: ['analyticsPage', 'topMediums', fromDate, toDate],
+        queryFn: () => {
+            // Abort the previous request
+            controller.abort()
+
+            // Create a new AbortController for the new request
+            controller = new AbortController()
+            return getAnalytics({
+                requestType: 'topMediums',
+                axiosPrivate,
+                controller,
+                fromDate,
+                toDate,
+            })
+        },
+    })
+
+    useEffect(() => {
+        return () => {
+            controller.abort()
+        }
+    }, [])
+
+    return (
+        <ContainerBox title={t('mediums')}>
+            <div className='w-full mb-6'>
+                <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) => (
+                        <div key={`${index}-${medium.name}`} className='w-full text-sm flex justify-between'>
+                            <span className='font-bold text-foreground'>{medium.name}:</span>
+                            <Badge variant='outline' className='ms-2'>
+                                {formatNumber(medium.value)}
+                            </Badge>
+                        </div>
+                    ))}
+            </div>
+        </ContainerBox>
+    )
+}