create-nextjs-cms 0.5.8

package/templates/default/components/AdvancedSettingsPage.tsx

@@ -0,0 +1,167 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+import getString from 'nextjs-cms/translations'
+import useModal from '@/hooks/useModal'
+import InfoCard from '@/components/InfoCard'
+import LoadingSpinners from '@/components/LoadingSpinners'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { useToast } from '@/components/ui/use-toast'
+import { trpc } from '@/app/_trpc/client'
+import Form from '@/components/form/Form'
+
+export default function AdvancedSettingsPage() {
+    const [progress, setProgress] = useState(0)
+    const [progressVariant, setProgressVariant] = useState<'determinate' | 'query'>('determinate')
+    const [isSubmitting, setIsSubmitting] = useState(false)
+    const { setModal } = useModal()
+
+    const { toast } = useToast()
+
+    const { isLoading, data, refetch } = trpc.cmsSettings.get.useQuery()
+    const saveMutation = trpc.cmsSettings.save.useMutation({
+        onSuccess: async (data) => {
+            setIsSubmitting(false)
+            setProgress(0)
+            setProgressVariant('determinate')
+            if (data === true) {
+                // Refetch the page
+                await refetch()
+
+                toast({
+                    title: getString('success'),
+                    description: getString('success'),
+                    duration: 2000,
+                })
+            }
+        },
+        onError: (error) => {
+            setIsSubmitting(false)
+            setProgress(0)
+            setProgressVariant('determinate')
+            if (error) {
+                setModal({
+                    title: getString('delete_admin'),
+                    body: <InfoCard result={{ key: 'danger', title: error.message, status: false }} />,
+                    headerColor: 'bg-red-700',
+                    titleColor: 'text-white',
+                    lang: 'en',
+                })
+            }
+        },
+    })
+
+    const handleSubmit = async (formData: FormData) => {
+        setIsSubmitting(true)
+        if (isSubmitting) return
+        saveMutation.mutate({
+            googleTagId: formData.get('ga_tag_id') as string,
+            googlePropertyId: formData.get('ga_property_id') as string,
+            googleServiceAccountCredentials: formData.get('ga_code') as string,
+        })
+    }
+
+    function cancelSubmit() {
+        setIsSubmitting(false)
+        setProgress(0)
+        setProgressVariant('determinate')
+    }
+
+    useEffect(() => {
+        return () => {
+            cancelSubmit()
+        }
+    }, [])
+
+    return (
+        <div>
+            <div className='w-full overflow-hidden bg-background'>
+                <div className='bg-gradient-to-r from-rose-200 via-rose-400 to-sky-400 p-8 font-extrabold text-black'>
+                    <h1 className='text-3xl'>{getString('advancedSettings')}</h1>
+                </div>
+                <div className='flex w-full flex-col'>
+                    <div className='flex w-full flex-col gap-2 p-4'>
+                        <Alert variant='destructive' className='bg-destructive text-destructive-foreground'>
+                            <AlertDescription className='font-bold'>
+                                {getString('advancedSettingsWarning')}
+                            </AlertDescription>
+                        </Alert>
+                        <Alert variant='default' className='bg-primary text-primary-foreground'>
+                            <AlertDescription className='font-bold'>
+                                <div>{getString('googleAnalyticsChangeText')}</div>
+                                <div>
+                                    {getString('googleAnalyticsChangeSubText')}{' '}
+                                    <a
+                                        className='text-sky-500'
+                                        target='_blank'
+                                        href='https://analytics.google.com/analytics/web/'
+                                    >
+                                        {getString('here')}
+                                    </a>
+                                </div>
+                            </AlertDescription>
+                        </Alert>
+                    </div>
+                    {isLoading ? (
+                        <div>
+                            <LoadingSpinners />
+                        </div>
+                    ) : (
+                        <Form
+                            buttonType='small'
+                            data={{
+                                section: {
+                                    name: 'advanced_settings',
+                                },
+
+                                inputGroups: [
+                                    {
+                                        groupId: 1,
+                                        groupTitle: getString('advancedSettings'),
+                                        groupOrder: 1,
+                                        inputs: [
+                                            {
+                                                type: 'text',
+                                                required: false,
+                                                label: 'Measurement ID (Google Tag ID)',
+                                                name: 'ga_tag_id',
+                                                placeholder: 'G-XXXXXXXXXX',
+                                                value: data?.googleTagId,
+                                                readonly: false,
+                                                conditionalFields: [],
+                                            },
+                                            {
+                                                type: 'text',
+                                                required: false,
+                                                label: 'Property ID',
+                                                name: 'ga_property_id',
+                                                placeholder: 'XXXXXXXXXX',
+                                                value: data?.googlePropertyId,
+                                                readonly: false,
+                                                conditionalFields: [],
+                                            },
+                                            {
+                                                type: 'textarea',
+                                                required: false,
+                                                label: 'Service Account Credentials',
+                                                name: 'ga_code',
+                                                placeholder: 'Paste your service account credentials here',
+                                                value: data?.googleServiceAccountCredentials,
+                                                readonly: false,
+                                                conditionalFields: [],
+                                            },
+                                        ],
+                                    },
+                                ],
+                            }}
+                            progressVariant={progressVariant}
+                            progress={progress}
+                            handleSubmit={handleSubmit}
+                            isSubmitting={isSubmitting}
+                        />
+                    )}
+                </div>
+            </div>
+        </div>
+    )
+}

package/templates/default/components/AnalyticsPage.tsx

@@ -0,0 +1,127 @@
+'use client'
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import React, { useEffect, useRef } from 'react'
+import getString from 'nextjs-cms/translations'
+import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
+import { DatePickerWithRange } from '@/components/form/DateRangeFormInput'
+import { MonthlyPageViews } from '@/components/analytics/MonthlyPageViews'
+import { TopSources } from '@/components/analytics/TopSources'
+import { TopMediums } from '@/components/analytics/TopMediums'
+import { LiveUsersCount } from '@/components/analytics/LiveUsersCount'
+import { TotalPageViews } from '@/components/analytics/TotalPageViews'
+import { TotalSessions } from '@/components/analytics/TotalSessions'
+import { TotalUniqueUsers } from '@/components/analytics/TotalUniqueUsers'
+import { BounceRate } from '@/components/analytics/BounceRate'
+import { LivePageViews } from '@/components/analytics/LivePageViews'
+import { TopCountries } from '@/components/analytics/TopCountries'
+import { TopDevices } from '@/components/analytics/TopDevices'
+import { trpc } from '@/app/_trpc/client'
+ChartJS.register(ArcElement, Tooltip, Legend)
+
+const AnalyticsPage = () => {
+    const controller = new AbortController()
+    const datePickerRangeRef = useRef<HTMLDivElement>(null)
+    const [fromDate, setFromDate] = React.useState<Date | string>('30daysAgo')
+    const [toDate, setToDate] = React.useState<Date | string>('today')
+
+    const { data, isError } = trpc.googleAnalytics.test.useQuery()
+
+    useEffect(() => {
+        return () => {
+            controller.abort()
+        }
+    }, [])
+
+    return (
+        <div className='w-full'>
+            <div className='bg-gradient-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('analytics')}</h1>
+            </div>
+            <div className='p-4'>
+                <div className='flex gap-2'>
+                    <Tabs
+                        defaultValue='account'
+                        onValueChange={(value) => {
+                            if (value === 'custom') {
+                                // Remove hidden class from date picker range
+                                datePickerRangeRef.current?.classList.remove('hidden')
+                            } else {
+                                // Add hidden class to date picker range
+                                datePickerRangeRef.current?.classList.add('hidden')
+                            }
+                        }}
+                    >
+                        <Tabs
+                            defaultValue='lastMonth'
+                            onValueChange={(value) => {
+                                if (value === 'custom') {
+                                    // Remove hidden class from date picker range
+                                    datePickerRangeRef.current?.classList.remove('hidden')
+                                } else {
+                                    switch (value) {
+                                        case 'today':
+                                            setFromDate('yesterday')
+                                            setToDate('today')
+                                            break
+                                        case 'lastWeek':
+                                            setFromDate('10daysAgo')
+                                            setToDate('today')
+                                            break
+                                        case 'lastMonth':
+                                            setFromDate('30daysAgo')
+                                            setToDate('today')
+                                            break
+                                        case 'lastYear':
+                                            setFromDate('365daysAgo')
+                                            setToDate('today')
+                                            break
+                                    }
+                                    // Add hidden class to date picker range
+                                    datePickerRangeRef.current?.classList.add('hidden')
+                                }
+                            }}
+                        >
+                            <TabsList>
+                                <TabsTrigger value='today'>Today</TabsTrigger>
+                                <TabsTrigger value='lastWeek'>Last 7 Days</TabsTrigger>
+                                <TabsTrigger value='lastMonth'>Last 30 Days</TabsTrigger>
+                                <TabsTrigger value='lastYear'>Last 365 Days</TabsTrigger>
+                                <TabsTrigger value='custom'>Custom</TabsTrigger>
+                            </TabsList>
+                        </Tabs>
+                    </Tabs>
+                    <div ref={datePickerRangeRef} className='hidden'>
+                        <DatePickerWithRange />
+                    </div>
+                </div>
+                <div className='my-2 grid grid-cols-2 gap-4 sm-sidebar:grid-cols-2 md-sidebar:grid-cols-2 lg-sidebar:grid-cols-4'>
+                    <LiveUsersCount />
+                    <TotalPageViews fromDate={fromDate} toDate={toDate} />
+                    <TotalSessions fromDate={fromDate} toDate={toDate} />
+                    <TotalUniqueUsers fromDate={fromDate} toDate={toDate} />
+                </div>
+                <div className='my-4 grid grid-cols-1 gap-4 sm-sidebar:grid-cols-1 md-sidebar:grid-cols-2 lg-sidebar:grid-cols-4'>
+                    <div className='col-span-2'>
+                        <MonthlyPageViews fromDate={fromDate} toDate={toDate} />
+                    </div>
+                    <div className='col-span-2 grid grid-cols-1 gap-4 sm-sidebar:grid-cols-1 md-sidebar:grid-cols-2'>
+                        <TopCountries fromDate={fromDate} toDate={toDate} />
+                        <BounceRate fromDate={fromDate} toDate={toDate} />
+                    </div>
+                </div>
+                <div className='my-4 grid grid-cols-1 gap-4 sm-sidebar:grid-cols-1 md-sidebar:grid-cols-2 lg-sidebar:grid-cols-4'>
+                    <div className='col-span-2'>
+                        <TopSources fromDate={fromDate} toDate={toDate} />
+                    </div>
+                    <TopMediums fromDate={fromDate} toDate={toDate} />
+                    <TopDevices fromDate={fromDate} toDate={toDate} />
+                </div>
+                <div className='my-2'>
+                    <LivePageViews />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default AnalyticsPage

package/templates/default/components/BarChartBox.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import ContainerBox from '@/components/ContainerBox'
+import { BarChart, Bar, Rectangle, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'
+import { BarChartDataItem } from 'nextjs-cms/core/types'
+import LoadingSpinners from '@/components/LoadingSpinners'
+
+export default function BarChartBox({
+    chartData,
+    title,
+    fill = '#adfa1d',
+    isLoading,
+}: {
+    chartData: BarChartDataItem[]
+    title: string
+    fill?: string
+    isLoading?: boolean
+}) {
+    return (
+        <ContainerBox title={title}>
+            <div>
+                <div style={{ width: '100%', height: 300 }}>
+                    {isLoading ? (
+                        <LoadingSpinners single={true} />
+                    ) : (
+                        <ResponsiveContainer width='100%' height='100%'>
+                            <BarChart data={chartData}>
+                                <XAxis
+                                    dataKey='name'
+                                    stroke='#888888'
+                                    fontSize={12}
+                                    tickLine={false}
+                                    axisLine={false}
+                                />
+                                <YAxis stroke='#888888' fontSize={12} tickLine={false} axisLine={true} />
+                                <Bar dataKey='value' fill={fill} radius={[4, 4, 0, 0]} />
+                            </BarChart>
+                        </ResponsiveContainer>
+                    )}
+                </div>
+            </div>
+        </ContainerBox>
+    )
+}

package/templates/default/components/BrowsePage.tsx

@@ -0,0 +1,119 @@
+'use client'
+
+import React, { useEffect, useRef } from 'react'
+import getString from 'nextjs-cms/translations'
+import SectionItemCard from '@/components/SectionItemCard'
+import LoadingSpinners from '@/components/LoadingSpinners'
+import ContainerBox from '@/components/ContainerBox'
+import Pagination from '@/components/pagination/Pagination'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from './ui/card'
+import { Input } from './ui/input'
+import { Button } from './ui/button'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { trpc } from '@/app/_trpc/client'
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons'
+import { capitalizeWords } from 'nextjs-cms/utils'
+
+export default function BrowsePage({ section, page }: { section: string; page: string }) {
+    const pageInt = parseInt(page) ?? 1
+    const params = useSearchParams()
+    const router = useRouter()
+    const q = params.get('q') ?? ''
+    const searchInputRef = useRef<HTMLInputElement>(null)
+    const { isLoading, isError, data, error, refetch } = trpc.hasItemsSections.listItems.useQuery({
+        sectionName: section,
+        page: pageInt,
+        q,
+    })
+
+    useEffect(() => {}, [])
+
+    return (
+        <div>
+            <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-gradient-to-r from-sky-300 via-gray-300 to-blue-400'></div>
+                <h1 className='text-3xl'>{data?.section?.title}</h1>
+            </div>
+            <div className='p-4'>
+                {data?.section?.hasSearch ? (
+                    <Card className='mb-4 border border-accent-foreground'>
+                        <form
+                            onSubmit={(event) => {
+                                event.preventDefault()
+                                event.stopPropagation()
+
+                                router.push(
+                                    decodeURIComponent(`/browse/${section}?q=${searchInputRef.current?.value || ''}`),
+                                )
+                            }}
+                        >
+                            <CardHeader>
+                                <CardTitle>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'))}...`}
+                                    defaultValue={q || ''}
+                                />
+                            </CardContent>
+                            <CardFooter className='border-t px-6 py-4'>
+                                <Button>{capitalizeWords(getString('search'))}</Button>
+                            </CardFooter>
+                        </form>
+                    </Card>
+                ) : null}
+                <ContainerBox title={getString('browse')}>
+                    {isLoading ? (
+                        <div>
+                            <LoadingSpinners />
+                        </div>
+                    ) : null}
+
+                    {data ? (
+                        <>
+                            {data.error ? (
+                                <Alert variant='destructive' className='my-8'>
+                                    <AlertDescription className='text-md font-bold'>
+                                        <div className='flex items-center gap-1.5'>
+                                            <ExclamationTriangleIcon className='h-5 w-5' /> {data.error.message}
+                                        </div>
+                                    </AlertDescription>
+                                </Alert>
+                            ) : data.items && data.items.length > 0 ? (
+                                <div className='mt-2 grid w-full grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'>
+                                    {data.items.map((item, index: number) => (
+                                        <SectionItemCard
+                                            key={`${data.section.name}-${item.id}-${index}`}
+                                            item={item}
+                                            sectionName={data.section.name}
+                                            action={() => refetch()}
+                                        />
+                                    ))}
+                                </div>
+                            ) : (
+                                <Alert variant='default' className='my-8 bg-primary text-primary-foreground'>
+                                    <AlertDescription className='font-bold'>{getString('noItems')}</AlertDescription>
+                                </Alert>
+                            )}
+                        </>
+                    ) : null}
+                </ContainerBox>
+                {data?.totalCount && data?.totalCount > 0 ? (
+                    <Pagination
+                        page={pageInt}
+                        totalCount={data?.totalCount}
+                        limit={12}
+                        route={`browse/${section}`}
+                        lang='en'
+                        paginationLinksToShow={4}
+                        searchParams={q ? `q=${q}` : null}
+                    />
+                ) : null}
+            </div>
+        </div>
+    )
+}

package/templates/default/components/CategorizedSectionPage.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import React, { useEffect } from 'react'
+import LoadingSpinners from '@/components/LoadingSpinners'
+import { trpc } from '@/app/_trpc/client'
+import CategorySectionSelectInput from '@/components/CategorySectionSelectInput'
+
+export default function CategorizedSectionPage({ section }: { section: string }) {
+    const { isLoading, isError, data, error, refetch } = trpc.categorySections.get.useQuery({
+        sectionName: section,
+    })
+
+    useEffect(() => {}, [])
+
+    return (
+        <div>
+            <div className='w-full'>
+                <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-gradient-to-r from-rose-200 via-rose-400 to-sky-400'></div>{' '}
+                    {data && data.section && <h1 className='text-3xl'>{data?.section?.title.section}</h1>}
+                </div>
+                <div className='flex w-full flex-col'>
+                    <div className='rounded-xl p-4 shadow'>
+                        {isLoading && (
+                            <div>
+                                <LoadingSpinners />
+                            </div>
+                        )}
+
+                        {data && data.data ? <CategorySectionSelectInput refetch={refetch} input={data.data} /> : null}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}

package/templates/default/components/CategoryDeleteConfirmPage.tsx

@@ -0,0 +1,129 @@
+import LoadingSpinners from '@/components/LoadingSpinners'
+import InfoCard from '@/components/InfoCard'
+import React from 'react'
+import getString from 'nextjs-cms/translations'
+import { Button } from '@/components/ui/button'
+import useModal from '@/hooks/useModal'
+import { useToast } from '@/components/ui/use-toast'
+import { trpc } from '@/app/_trpc/client'
+import { Switch } from './ui/switch'
+import { Label } from '@/components/ui/label'
+
+export default function CategoryDeleteConfirmPage({
+    section,
+    sectionTitle,
+    id,
+    action,
+    allowRecursiveDelete,
+}: {
+    section: string
+    sectionTitle: string
+    id: string
+    action: any
+    allowRecursiveDelete: boolean
+}) {
+    const { setModal } = useModal()
+    const { toast } = useToast()
+
+    // TODO: implement this? Basically we're getting the associated items with the category,
+    // and displaying their count to notify the admin,
+    // for now we will not delete the items, only the category
+
+    /*
+    const { isLoading, isError, data, error, refetch } = useQuery({
+        queryKey: ['confirmCategoryDeletion', section, id],
+        queryFn: () => confirmCategoryDeletion(section, id, axiosPrivate, controller),
+    })
+    */
+
+    const deleteMutation = trpc.hasItemsSections.deleteItem.useMutation({
+        onError: (error) => {
+            setModal({
+                title: getString('delete'),
+                body: (
+                    <div className='rounded border-2 border-dashed border-red-500 bg-red-100 p-2 text-red-800'>
+                        {error.message}
+                    </div>
+                ),
+                headerColor: 'bg-red-700',
+                titleColor: 'text-white',
+                lang: 'en',
+            })
+        },
+
+        onSuccess: async (data) => {
+            await action()
+            setModal(null)
+            toast({
+                title: getString('delete'),
+                description: getString('itemDeletedSuccessfully'),
+                variant: 'success',
+            })
+        },
+    })
+    const handleDelete = async () => {
+        deleteMutation.mutate({
+            sectionName: section,
+            sectionItemId: id,
+        })
+    }
+
+    return (
+        <div className='flex flex-col'>
+            <div className='flex flex-col gap-3'>
+                <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-gradient-to-r from-red-300 via-rose-500 to-pink-400'></div>
+                    <h1 className='pb-4 text-3xl'>{sectionTitle}</h1>
+                    <span>/{getString('delete')}</span>
+                </div>
+                <div className='flex flex-col gap-2 px-8 py-4'>
+                    <div className='mb-4 text-2xl'>{getString('catDeleteTextLight')}</div>
+                    {deleteMutation.isPending ? (
+                        <div className='flex w-full items-center justify-center text-center'>
+                            <LoadingSpinners />
+                        </div>
+                    ) : null}
+                    <div className='flex flex-col gap-3 rounded p-2 ring ring-sky-300'>
+                        <InfoCard
+                            result={{
+                                key: 'info',
+                                title: `${getString('catDeleteWarningLight')}`,
+                                status: false,
+                            }}
+                        />
+                    </div>
+                    {allowRecursiveDelete ? (
+                        <div className='flex flex-col gap-3 rounded p-2 ring ring-sky-300'>
+                            <InfoCard
+                                result={{
+                                    key: 'info',
+                                    title: `${getString('recursiveCategoryDeleteWarning')}`,
+                                    status: false,
+                                }}
+                            />
+                            <div className='flex items-center space-x-2'>
+                                <Switch id='recursive-category-delete' />
+                                <Label htmlFor='airplane-mode'>{getString('recursiveCategoryDelete')}</Label>
+                            </div>
+                        </div>
+                    ) : null}
+
+                    <div className='mt-2 flex flex-wrap gap-2'>
+                        <Button variant='destructive' onClick={handleDelete}>
+                            {getString('delete')}
+                        </Button>
+
+                        <Button
+                            variant='outline'
+                            onClick={() => {
+                                setModal(null)
+                            }}
+                        >
+                            {getString('cancel')}
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}