create-nextjs-cms 0.5.8

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

@@ -0,0 +1,45 @@
+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 TopDevices = ({ 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', 'topDevices', fromDate, toDate],
+        queryFn: () =>
+            getAnalytics({
+                requestType: 'topDevices',
+                axiosPrivate,
+                controller,
+                fromDate,
+                toDate,
+            }),
+    })
+
+    return (
+        <ContainerBox title={getString('devices')}>
+            <div className='w-full'>
+                <h1 className='font-bold border-b pb-1 my-1'>{getString('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

@@ -0,0 +1,57 @@
+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, { 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 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={getString('mediums')}>
+            <div className='w-full mb-6'>
+                <h1 className='font-bold border-b pb-1 my-1'>{getString('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>
+    )
+}

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

@@ -0,0 +1,44 @@
+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 TopSources = ({ 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', 'topSources', fromDate, toDate],
+        queryFn: () =>
+            getAnalytics({
+                requestType: 'topSources',
+                axiosPrivate,
+                controller,
+                fromDate,
+                toDate,
+            }),
+    })
+    return (
+        <ContainerBox title={getString('sources')}>
+            <div className='w-full mb-6'>
+                <h1 className='font-bold border-b pb-1 my-1'>{getString('topSources')}</h1>
+                {isLoading && <LoadingSpinners single={true} />}
+                {data?.topSources?.length > 0 &&
+                    data.topSources.map((source: BarChartDataItem, index: number) => (
+                        <div key={`${index}-${source.name}`} className='w-full text-sm flex justify-between'>
+                            <span className='font-bold text-foreground'>{source.name}:</span>
+                            <Badge variant='outline' className='ms-2'>
+                                {formatNumber(source.value)}
+                            </Badge>
+                        </div>
+                    ))}
+            </div>
+        </ContainerBox>
+    )
+}

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

@@ -0,0 +1,40 @@
+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 TotalPageViews = ({
+    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', 'statistics', fromDate, toDate],
+        queryFn: () =>
+            getAnalytics({
+                requestType: 'statistics',
+                axiosPrivate,
+                controller,
+                fromDate,
+                toDate,
+            }),
+    })
+    return (
+        <ContainerBox title={getString('totalPageViews')}>
+            {isLoading ? (
+                <LoadingSpinners single={true} />
+            ) : (
+                <div className='text-4xl'>{formatNumber(data?.totalPageViews)}</div>
+            )}
+        </ContainerBox>
+    )
+}

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

@@ -0,0 +1,40 @@
+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 TotalSessions = ({
+    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', 'statistics', fromDate, toDate],
+        queryFn: () =>
+            getAnalytics({
+                requestType: 'statistics',
+                axiosPrivate,
+                controller,
+                fromDate,
+                toDate,
+            }),
+    })
+    return (
+        <ContainerBox title={getString('totalSessions')}>
+            {isLoading ? (
+                <LoadingSpinners single={true} />
+            ) : (
+                <div className='text-4xl'>{formatNumber(data?.totalSessions)}</div>
+            )}
+        </ContainerBox>
+    )
+}

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

@@ -0,0 +1,40 @@
+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 TotalUniqueUsers = ({
+    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', 'statistics', fromDate, toDate],
+        queryFn: () =>
+            getAnalytics({
+                requestType: 'statistics',
+                axiosPrivate,
+                controller,
+                fromDate,
+                toDate,
+            }),
+    })
+    return (
+        <ContainerBox title={getString('totalUniqueUsers')}>
+            {isLoading ? (
+                <LoadingSpinners single={true} />
+            ) : (
+                <div className='text-4xl'>{formatNumber(data?.totalUniqueUsers)}</div>
+            )}
+        </ContainerBox>
+    )
+}

package/templates/default/components/custom/RightHomeRoomVariantCard.tsx

@@ -0,0 +1,137 @@
+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 RightHomeRoomVariantCard = ({
+    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-col gap-1'>
+                    <div className='flex justify-between'>
+                        <span className='font-bold'>Size From:</span>
+                        <span>{variantItem.size_from}</span>
+                    </div>
+                    <div className='flex justify-between'>
+                        <span className='font-bold'>Size To:</span>
+                        <span>{variantItem.size_to}</span>
+                    </div>
+                    <div className='flex justify-between'>
+                        <span className='font-bold'>Price:</span>
+                        <span>{variantItem.price}</span>
+                    </div>
+                </div>
+                <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 RightHomeRoomVariantCard

package/templates/default/components/dndKit/Draggable.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { useDraggable } from '@dnd-kit/core'
+
+function Draggable({ draggableId, children }: { draggableId: string | number; children: React.ReactNode }) {
+    const { attributes, listeners, setNodeRef, transform } = useDraggable({
+        id: draggableId,
+    })
+    const style = transform
+        ? {
+              transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+          }
+        : undefined
+
+    return (
+        <div ref={setNodeRef} className='float-start' style={style} {...listeners} {...attributes}>
+            {children}
+        </div>
+    )
+}
+
+export default Draggable

package/templates/default/components/dndKit/Droppable.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { useDroppable } from '@dnd-kit/core'
+
+function Droppable({ droppableId, children }: { droppableId: string | number; children: React.ReactNode }) {
+    const { isOver, setNodeRef } = useDroppable({
+        id: droppableId,
+    })
+
+    const style = {
+        color: isOver ? 'green' : undefined,
+    }
+
+    return (
+        <div ref={setNodeRef} style={style}>
+            {children}
+        </div>
+    )
+}
+
+export default Droppable

package/templates/default/components/dndKit/SortableItem.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+
+export default function SortableItem({ id, children }: { id: string | number; children: React.ReactNode }) {
+    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: id })
+
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    }
+
+    return (
+        <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
+            {children}
+        </div>
+    )
+}

package/templates/default/components/form/DateRangeFormInput.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import * as React from 'react'
+import { addDays, format } from 'date-fns'
+import { DateRange } from 'react-day-picker'
+
+import { cn } from 'nextjs-cms/utils'
+import { Button } from '@/components/ui/button'
+import { Calendar } from '@/components/ui/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { CalendarIcon } from '@radix-ui/react-icons'
+
+export function DatePickerWithRange({ className }: React.HTMLAttributes<HTMLDivElement>) {
+    const [date, setDate] = React.useState<DateRange | undefined>({
+        from: new Date(2020, 0, 20),
+        to: addDays(new Date(2023, 0, 20), 20),
+    })
+
+    return (
+        <div className={cn('grid gap-2', className)}>
+            <Popover>
+                <PopoverTrigger asChild>
+                    <Button
+                        id='date'
+                        variant={'outline'}
+                        className={cn('justify-start text-left font-normal', !date && 'text-muted-foreground')}
+                    >
+                        <CalendarIcon className='mr-2 h-4 w-4' />
+                        {date?.from ? (
+                            date.to ? (
+                                <>
+                                    {format(date.from, 'LLL dd, y')} - {format(date.to, 'LLL dd, y')}
+                                </>
+                            ) : (
+                                format(date.from, 'LLL dd, y')
+                            )
+                        ) : (
+                            <span>Pick a date</span>
+                        )}
+                    </Button>
+                </PopoverTrigger>
+                <PopoverContent className='w-auto p-0' align='start'>
+                    <Calendar
+                        initialFocus
+                        mode='range'
+                        defaultMonth={date?.from}
+                        selected={date}
+                        onSelect={setDate}
+                        numberOfMonths={2}
+                    />
+                </PopoverContent>
+            </Popover>
+        </div>
+    )
+}