create-nextjs-cms 0.9.22 → 0.9.24

package/templates/default/components/VariantCard.tsx

@@ -1,124 +0,0 @@
-import { useI18n } from 'nextjs-cms/translations/client'
-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 t = useI18n()
-
-    const handleDelete = async () => {
-        const response = await handleVariantDeletion(variant.variant_name, variantItem.id, axiosPrivate, controller)
-        if (response.error) {
-            toast({
-                variant: 'destructive',
-                title: t('deleteAdmin'),
-                description: response.error.message,
-            })
-        } else if (response.code === 200) {
-            action ? action() : null
-            setModal(null)
-            setModalResponse(null)
-            toast({
-                variant: 'success',
-                title: t('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: t('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',
-                            })
-                        }}
-                    >
-                        {t('edit')}
-                    </Button>
-                    {/* Delete Button */}
-                    <Button
-                        size='sm'
-                        type='button'
-                        variant='destructive'
-                        onClick={() => {
-                            setModal({
-                                title: t('delete'),
-                                body: (
-                                    <div className='p-4'>
-                                        <div className='flex flex-col gap-4'>
-                                            <div>{t('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',
-                            })
-                        }}
-                    >
-                        {t('delete')}
-                    </Button>
-                </div>
-            </div>
-        </ContainerBox>
-    )
-}
-
-export default VariantCard

package/templates/default/components/VariantEditPage.tsx

@@ -1,230 +0,0 @@
-'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 { useI18n } from 'nextjs-cms/translations/client'
-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 t = useI18n()
-    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: t('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-linear-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>
-                                    /{t('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-linear-to-r p-2 font-bold text-white drop-shadow-sm':
-                                                        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 ? t('loading') : t('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

@@ -1,70 +0,0 @@
-import { useI18n } from 'nextjs-cms/translations/client'
-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 t = useI18n()
-    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: t('totalDiskSpace'),
-            value: 100 - parseInt(data?.bounceRate),
-            fill: 'transparent',
-        },
-        {
-            name: t('usedDiskSpace'),
-            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: t('bounceRate'),
-                totalUnitSubtitle: {
-                    key: t('sessionsPerUser'),
-                    value: formatNumber(data?.sessionsPerUser),
-                },
-            }}
-        />
-    )
-}

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

@@ -1,55 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-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>
-    )
-}