create-nextjs-cms 0.5.8

package/templates/default/components/ThemeProvider.tsx

@@ -0,0 +1,8 @@
+'use client'
+
+import * as React from 'react'
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+
+export function ThemeProvider({ children, ...props }: React.ComponentProps<typeof NextThemesProvider>) {
+    return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

package/templates/default/components/TooltipComponent.tsx

@@ -0,0 +1,27 @@
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+export default function TooltipComponent({
+    children,
+    content,
+    delayDuration = 200,
+}: {
+    children: React.ReactNode
+    content: React.ReactNode
+    delayDuration?: number
+}) {
+    if (!content) return children
+    return (
+        <TooltipProvider delayDuration={delayDuration}>
+            <Tooltip>
+                <TooltipTrigger
+                    onClick={(e) => {
+                        e.preventDefault()
+                        e.stopPropagation()
+                    }}
+                >
+                    {children}
+                </TooltipTrigger>
+                <TooltipContent>{content}</TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+    )
+}

package/templates/default/components/VariantCard.tsx

@@ -0,0 +1,123 @@
+import getString from 'nextjs-cms/translations'
+import ContainerBox from '@/components/ContainerBox'
+import React from 'react'
+import { Variant } from 'nextjs-cms/core/types'
+import useModal from '@/hooks/useModal'
+import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
+import { handleVariantDeletion } from '@/lib/apiHelpers'
+import { useToast } from '@/components/ui/use-toast'
+import { Button } from '@/components/ui/button'
+import VariantEditPage from '@/components/VariantEditPage'
+
+const VariantCard = ({
+    variant,
+    variantItem,
+    sectionItemId,
+    action,
+}: {
+    variant: Variant
+    variantItem: any
+    sectionItemId: string
+    action: any
+}) => {
+    const { setModal, modal, modalResponse, setModalResponse } = useModal()
+    const axiosPrivate = useAxiosPrivate()
+    const controller = new AbortController()
+    const { toast } = useToast()
+
+    const handleDelete = async () => {
+        const response = await handleVariantDeletion(variant.variant_name, variantItem.id, axiosPrivate, controller)
+        if (response.error) {
+            toast({
+                variant: 'destructive',
+                title: getString('delete_admin'),
+                description: response.error.message,
+            })
+        } else if (response.code === 200) {
+            action ? action() : null
+            setModal(null)
+            setModalResponse(null)
+            toast({
+                variant: 'success',
+                title: getString('itemDeletedSuccessfully'),
+                description: response.message,
+            })
+        }
+    }
+    return (
+        <ContainerBox title={variantItem.display_name} key={variantItem.id}>
+            <div className='flex flex-col gap-4'>
+                <div className='flex flex-row gap-2'>
+                    <Button
+                        size='sm'
+                        type='button'
+                        variant='default'
+                        onClick={() => {
+                            setModal({
+                                size: 'lg',
+                                title: getString('edit'),
+                                body: (
+                                    <div className='p-4'>
+                                        <VariantEditPage
+                                            section={variant.section_name}
+                                            variant={variant.variant_name}
+                                            sectionItemId={sectionItemId}
+                                            itemId={variantItem.id}
+                                            action={action}
+                                        />
+                                    </div>
+                                ),
+                                headerColor: 'bg-sky-700',
+                                titleColor: 'text-white',
+                                lang: 'en',
+                            })
+                        }}
+                    >
+                        {getString('edit')}
+                    </Button>
+                    {/* Delete Button */}
+                    <Button
+                        size='sm'
+                        type='button'
+                        variant='destructive'
+                        onClick={() => {
+                            setModal({
+                                title: getString('delete'),
+                                body: (
+                                    <div className='p-4'>
+                                        <div className='flex flex-col gap-4'>
+                                            <div>{getString('deleteItemText')}</div>
+                                            <div className='flex gap-2'>
+                                                <button
+                                                    className='rounded bg-green-600 px-2 py-1 text-white'
+                                                    onClick={handleDelete}
+                                                >
+                                                    Yes
+                                                </button>
+                                                <button
+                                                    className='rounded bg-red-800 px-2 py-1 text-white'
+                                                    onClick={() => {
+                                                        setModal(null)
+                                                    }}
+                                                >
+                                                    No
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                ),
+                                headerColor: 'bg-red-700',
+                                titleColor: 'text-white',
+                                lang: 'en',
+                            })
+                        }}
+                    >
+                        {getString('delete')}
+                    </Button>
+                </div>
+            </div>
+        </ContainerBox>
+    )
+}
+
+export default VariantCard

package/templates/default/components/VariantEditPage.tsx

@@ -0,0 +1,229 @@
+'use client'
+
+import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
+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 useModal from '@/hooks/useModal'
+import { AxiosError } from 'axios'
+import InfoCard from '@/components/InfoCard'
+import { useRouter } from 'next/navigation'
+import ProgressBar from '@/components/ProgressBar'
+import classNames from 'classnames'
+import LoadingSpinners from '@/components/LoadingSpinners'
+import { useToast } from '@/components/ui/use-toast'
+import ContainerBox from '@/components/ContainerBox'
+import FormInputs from '@/components/form/FormInputs'
+import Dropzone, { DropzoneHandles } from '@/components/Dropzone'
+import PhotoGallery from '@/components/PhotoGallery'
+
+export default function VariantEditPage({
+    section,
+    variant,
+    sectionItemId,
+    itemId,
+    hiddenInputs,
+    action,
+}: {
+    section: string
+    variant: string
+    sectionItemId: string
+    itemId: string
+    hiddenInputs?: {
+        name: string
+        value: string
+    }[]
+    action?: any
+}) {
+    const [response, setResponse] = useState<any>(null)
+    const [progress, setProgress] = useState(0)
+    const [progressVariant, setProgressVariant] = useState<'determinate' | 'query'>('determinate')
+    const [isSubmitting, setIsSubmitting] = useState(false)
+    const { setModal, modal, modalResponse, setModalResponse } = useModal()
+    const axiosPrivate = useAxiosPrivate()
+    const controller = new AbortController()
+    const { toast } = useToast()
+    const router = useRouter()
+    const dropzoneRef: RefObject<DropzoneHandles | null> = useRef(null)
+
+    const { isLoading, isError, data, error, refetch } = useQuery({
+        queryKey: ['edit', variant, itemId],
+        queryFn: () => getVariantPage(section, variant, sectionItemId, itemId, axiosPrivate, controller),
+    })
+
+    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+        setIsSubmitting(true)
+        e.preventDefault()
+        e.stopPropagation()
+        if (isSubmitting) return
+        setResponse(null)
+        const formData = new FormData(e.currentTarget)
+
+        formData.append('section', section)
+        formData.append('variant', variant)
+        formData.append('form_type', 'edit')
+
+        // Retrieve the files from the Dropzone's state
+        if (dropzoneRef.current) {
+            const files: File[] = dropzoneRef.current.getFiles()
+            // Add files to the body
+            files.forEach((file, index) => {
+                formData.append(`dropzoneFiles[${index}]`, file)
+            })
+        }
+
+        // Check if there are any hidden inputs passed to the component
+        if (hiddenInputs) {
+            // Add hidden inputs to the body
+            hiddenInputs.forEach((input) => {
+                formData.append(input.name, input.value)
+            })
+        }
+
+        const body = Object.fromEntries(formData.entries())
+        try {
+            const res = await axiosPrivate.post(`/api-submit`, body, {
+                signal: controller.signal,
+                onUploadProgress: (progressEvent) => {
+                    if (!progressEvent.total) return
+                    const progress = Math.round((progressEvent.loaded / progressEvent.total) * 100)
+                    // Update progress bar value here
+                    setProgress(progress)
+
+                    if (progress === 100) {
+                        setProgressVariant('query')
+                    }
+                },
+                headers: {
+                    'Content-Type': 'multipart/form-data',
+                },
+            })
+
+            if (res) {
+                setIsSubmitting(false)
+                setProgress(0)
+                setProgressVariant('determinate')
+                if (res.data.code === 200) {
+                    // Refetch the page
+                    // Clear Dropzone
+                    if (dropzoneRef.current) {
+                        dropzoneRef.current.removeFiles()
+                    }
+                    action ? action() : null
+                    setModal(null)
+                    setModalResponse(null)
+                    setResponse(null)
+                    toast({
+                        variant: 'success',
+                        description: getString('itemUpdatedSuccessfully'),
+                    })
+
+                    // Redirect to the edit page
+                    // router.push(`/edit/${section}/${res.data.identifier}`)
+                    // Or redirect to the browse page
+                }
+            }
+        } catch (error: AxiosError | any) {
+            setIsSubmitting(false)
+            setProgress(0)
+            setProgressVariant('determinate')
+            if (error?.response?.data) {
+                setResponse(
+                    <InfoCard result={{ key: 'danger', title: error.response.data.error.message, status: false }} />,
+                )
+            }
+        }
+    }
+
+    function cancelSubmit() {
+        controller.abort()
+        setIsSubmitting(false)
+        setProgress(0)
+        setProgressVariant('determinate')
+    }
+
+    useEffect(() => {
+        return () => {
+            cancelSubmit()
+        }
+    }, [])
+
+    return (
+        <div>
+            <div className='w-full overflow-hidden'>
+                <form onSubmit={handleSubmit}>
+                    <div className='bg-gradient-to-r from-sky-200 via-emerald-300 to-blue-600 p-8 font-extrabold text-black'>
+                        {data && data.variant && (
+                            <>
+                                <h1 className='pb-4 text-4xl'>{data?.variant?.variant_html_name_en}</h1>
+                                <span>
+                                    /{getString('edit')} {data?.variant?.variant_single_item_name_en}
+                                </span>
+                            </>
+                        )}
+                    </div>
+                    <div className='p-8'>
+                        <div className=''>
+                            {isLoading && (
+                                <div>
+                                    <LoadingSpinners />
+                                </div>
+                            )}
+                            {data?.error && <InfoCard result={{ icon: true, key: 'danger', title: data.error }} />}
+                            {data && data.inputGroups && (
+                                <div className='flex flex-col gap-4'>
+                                    <input type='hidden' name={data?.variant?.variant_item_identifier} value={itemId} />
+                                    <input type='hidden' name='parentId' value={sectionItemId} />
+                                    {data?.inputGroups?.length > 0 &&
+                                        data?.inputGroups?.map((inputGroup: InputGroup, index: number) => {
+                                            return (
+                                                <ContainerBox title={inputGroup.groupTitle} key={index}>
+                                                    <FormInputs inputs={[]} sectionName={variant} />
+                                                </ContainerBox>
+                                            )
+                                        })}
+
+                                    {data.variant.variant_item_has_gallery === 'true' ? (
+                                        <>
+                                            <div className='w-full'>
+                                                <PhotoGallery sectionName={variant} gallery={data.photo_gallery} />
+                                            </div>
+                                            <div className='w-full'>
+                                                <Dropzone ref={dropzoneRef} />
+                                            </div>
+                                        </>
+                                    ) : null}
+
+                                    <div className='my-4 flex flex-col gap-3 p-4'>
+                                        <div className='mt-5'>
+                                            <button
+                                                className={classNames({
+                                                    'w-full rounded bg-gradient-to-r p-2 font-bold text-white drop-shadow':
+                                                        true,
+                                                    'from-emerald-700 via-green-700 to-green-500': !isSubmitting,
+                                                    'from-gray-600 via-gray-500 to-gray-400': isSubmitting,
+                                                })}
+                                                type='submit'
+                                                disabled={isSubmitting}
+                                            >
+                                                {isSubmitting ? getString('loading') : getString('save')}
+                                            </button>
+                                            {isSubmitting && (
+                                                <div className='mt-0.5'>
+                                                    <ProgressBar variant={progressVariant} value={progress} />
+                                                </div>
+                                            )}
+                                        </div>
+                                        {response && <div className='w-full'>{response}</div>}
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    )
+}

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

@@ -0,0 +1,69 @@
+import getString from 'nextjs-cms/translations'
+import { formatNumber } from 'nextjs-cms/utils'
+import PieChartBox from '@/components/PieChartBox'
+import React, { useEffect } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { getAnalytics } from '@/lib/apiHelpers'
+import { PieChartDataItem } from 'nextjs-cms/core/types'
+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 axiosPrivate = useAxiosPrivate()
+    let controller = new AbortController()
+    const { theme } = useTheme()
+
+    const { isLoading, isError, data, error } = useQuery({
+        queryKey: ['analyticsPage', 'statistics', fromDate, toDate],
+        queryFn: () => {
+            // Abort the previous request
+            controller.abort()
+
+            // Create a new AbortController for the new request
+            controller = new AbortController()
+
+            return getAnalytics({
+                requestType: 'statistics',
+                axiosPrivate,
+                controller,
+                fromDate,
+                toDate,
+            })
+        },
+    })
+
+    const bounceRateData: PieChartDataItem[] = [
+        {
+            name: getString('total_disk_space'),
+            value: 100 - parseInt(data?.bounceRate),
+            fill: 'transparent',
+        },
+        {
+            name: getString('used_disk_space'),
+            value: parseInt(data?.bounceRate),
+            fill: theme === 'dark' ? '#adfa1d' : '#E1315B',
+        },
+    ]
+
+    useEffect(() => {
+        return () => {
+            controller.abort()
+        }
+    }, [])
+
+    return (
+        <PieChartBox
+            height={250}
+            legend={false}
+            chartData={bounceRateData}
+            isLoading={isLoading}
+            chartBoxTitles={{
+                mainTitle: getString('bounceRate'),
+                totalUnitSubtitle: {
+                    key: getString('sessionsPerUser'),
+                    value: formatNumber(data?.sessionsPerUser),
+                },
+            }}
+        />
+    )
+}

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

@@ -0,0 +1,54 @@
+import getString from 'nextjs-cms/translations'
+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 axiosPrivate = useAxiosPrivate()
+    const controller = new AbortController()
+
+    const { isLoading, isError, data, error } = useQuery({
+        queryKey: ['analyticsPage', 'livePageViews'],
+        queryFn: () =>
+            getAnalytics({
+                requestType: 'livePageViews',
+                axiosPrivate,
+                controller,
+            }),
+    })
+
+    return (
+        <ContainerBox title={getString('liveUsersAreViewing')}>
+            <Table>
+                <TableCaption>{getString('liveUsersSubtitle')}</TableCaption>
+                <TableHeader>
+                    <TableRow>
+                        <TableHead>{getString('country')}</TableHead>
+                        <TableHead>{getString('device')}</TableHead>
+                        <TableHead>{getString('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'>
+                                {getString('noLiveUsers')}
+                            </TableCell>
+                        </TableRow>
+                    )}
+                </TableBody>
+            </Table>
+        </ContainerBox>
+    )
+}

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

@@ -0,0 +1,32 @@
+import getString from 'nextjs-cms/translations'
+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 axiosPrivate = useAxiosPrivate()
+    const controller = new AbortController()
+
+    const { isLoading, isError, data, error } = useQuery({
+        queryKey: ['analyticsPage', 'liveUsersCount'],
+        queryFn: () =>
+            getAnalytics({
+                requestType: 'liveUsersCount',
+                axiosPrivate,
+                controller,
+            }),
+    })
+    return (
+        <ContainerBox title={getString('liveUsers')}>
+            {isLoading ? (
+                <LoadingSpinners single={true} />
+            ) : (
+                <div className='text-4xl'>{formatNumber(data?.liveUsers?.count)}</div>
+            )}
+        </ContainerBox>
+    )
+}

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

@@ -0,0 +1,41 @@
+import getString from 'nextjs-cms/translations'
+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 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={getString('monthlyPageViews')}
+                fill={theme === 'dark' ? '#adfa1d' : '#ff6688'}
+            />
+        </>
+    )
+}

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

@@ -0,0 +1,51 @@
+import getString from 'nextjs-cms/translations'
+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 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={getString('countries')}>
+            <div className='w-full mb-6'>
+                <h1 className='font-bold border-b pb-1 my-1'>{getString('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>
+    )
+}