create-nextjs-cms 0.9.4 → 0.9.6

package/templates/default/components/EmailCard.tsx

@@ -1,138 +0,0 @@
-import { useI18n } from 'nextjs-cms/translations/client'
-import React from 'react'
-import { EmailItem } from 'nextjs-cms/core/types'
-import useModal from '@/hooks/useModal'
-import { useToast } from '@/components/ui/use-toast'
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
-import ProgressBar from '@/components/ProgressBar'
-import EmailQuotaForm from '@/components/EmailQuotaForm'
-import EmailPasswordForm from '@/components/EmailPasswordForm'
-import { trpc } from '@/app/_trpc/client'
-
-export default function EmailCard({ email, action }: { email: EmailItem; action: any }) {
-    const t = useI18n()
-    const { setModal, modal, modalResponse, setModalResponse } = useModal()
-    const { toast } = useToast()
-
-    const deleteMutation = trpc.cpanelEmails.deleteEmail.useMutation({
-        onError: (error) => {
-            setModalResponse({
-                message: error.message,
-                messageColor: 'text-red-900',
-                borderColor: 'border-red-600',
-                bgColor: 'bg-red-200',
-            })
-        },
-        onSuccess: (data) => {
-            action()
-            setModal(null)
-            setModalResponse(null)
-            toast({
-                variant: 'success',
-                title: t('deleteEmailAccount'),
-                description: data.message,
-            })
-        },
-    })
-    const deleteEmail = async () => {
-        deleteMutation.mutate(email.user)
-    }
-
-    return (
-        <Card className='border border-gray-400 shadow-xs'>
-            <CardHeader>
-                <CardTitle>
-                    <div className='flex flex-row items-center'>
-                        <div className='flex flex-col break-all'>
-                            <div className='text-sm font-medium text-foreground'>
-                                <div className='me-2 font-bold'>{email.email}</div>
-                            </div>
-                        </div>
-                    </div>
-                </CardTitle>
-            </CardHeader>
-            <CardContent>
-                {email.humandiskused} / {email.humandiskquota !== 'None' ? email.humandiskquota : email.diskquota}
-                <ProgressBar variant='determinate' value={parseInt(email.diskusedpercent)} />
-            </CardContent>
-            <CardFooter className='flex flex-wrap gap-1'>
-                <Button
-                    size='sm'
-                    variant='default'
-                    onClick={() => {
-                        setModal({
-                            title: t('emailQuota'),
-                            body: (
-                                <div className='p-4'>
-                                    <EmailQuotaForm email={email.user} action={() => action()} />
-                                </div>
-                            ),
-                            headerColor: 'bg-sky-700',
-                            titleColor: 'text-white',
-                            lang: 'en',
-                        })
-                    }}
-                >
-                    {t('quota')}
-                </Button>
-                <Button
-                    size='sm'
-                    variant='default'
-                    onClick={() => {
-                        setModal({
-                            title: t('changePassword'),
-                            body: (
-                                <div className='p-4'>
-                                    <EmailPasswordForm email={email.user} action={() => action()} />
-                                </div>
-                            ),
-                            headerColor: 'bg-sky-700',
-                            titleColor: 'text-white',
-                            lang: 'en',
-                        })
-                    }}
-                >
-                    {t('password')}
-                </Button>
-                <Button
-                    size='sm'
-                    variant='destructive'
-                    onClick={() => {
-                        setModal({
-                            title: t('delete'),
-                            body: (
-                                <div className='p-4'>
-                                    <div className='flex flex-col gap-4'>
-                                        <div>{t('deleteEmailText')}</div>
-                                        <div className='flex gap-2'>
-                                            <button
-                                                className='rounded bg-green-600 px-2 py-1 text-white'
-                                                onClick={deleteEmail}
-                                            >
-                                                {t('yes')}
-                                            </button>
-                                            <button
-                                                className='rounded bg-red-800 px-2 py-1 text-white'
-                                                onClick={() => {
-                                                    setModal(null)
-                                                }}
-                                            >
-                                                {t('no')}
-                                            </button>
-                                        </div>
-                                    </div>
-                                </div>
-                            ),
-                            headerColor: 'bg-red-700',
-                            titleColor: 'text-white',
-                            lang: 'en',
-                        })
-                    }}
-                >
-                    {t('delete')}
-                </Button>
-            </CardFooter>
-        </Card>
-    )
-}

package/templates/default/components/EmailPasswordForm.tsx

@@ -1,85 +0,0 @@
-import { useI18n } from 'nextjs-cms/translations/client'
-import React from 'react'
-import useModal from '@/hooks/useModal'
-import { useToast } from '@/components/ui/use-toast'
-import InfoCard from '@/components/InfoCard'
-import { trpc } from '@/app/_trpc/client'
-
-export default function EmailPasswordForm({ email, action }: { email: string; action: any }) {
-    const t = useI18n()
-    const { setModal, modal, modalResponse, setModalResponse } = useModal()
-
-    const { toast } = useToast()
-    const quotaMutation = trpc.cpanelEmails.passwordChange.useMutation({
-        onError: (error) => {
-            setModal({
-                title: t('error'),
-                body: (
-                    <div className='p-4'>
-                        <InfoCard result={{ key: 'danger', title: error.message, status: false }} />
-                    </div>
-                ),
-                headerColor: 'bg-red-700',
-                titleColor: 'text-white',
-                lang: 'en',
-            })
-        },
-        onSuccess: (data) => {
-            action()
-            setModal(null)
-            setModalResponse(null)
-            toast({
-                variant: 'success',
-                title: t('success'),
-            })
-        },
-    })
-    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault()
-        quotaMutation.mutate({
-            email,
-            password: e.currentTarget.password.value,
-            passwordConfirm: e.currentTarget.passwordConfirm.value,
-        })
-    }
-
-    return (
-        <form onSubmit={handleSubmit} className='flex flex-col gap-2'>
-            <div>
-                <label htmlFor='password' className='block text-sm font-medium leading-6 text-foreground'>
-                    {t('newPassword')}
-                </label>
-                <div className=''>
-                    <input
-                        id='password'
-                        name='password'
-                        type='text'
-                        autoComplete='password'
-                        required
-                        className='block w-full rounded-md border-0 bg-input p-2.5 text-foreground shadow-xs outline-0 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6'
-                    />
-                </div>
-            </div>
-            <div>
-                <label htmlFor='passwordConfirm' className='block text-sm font-medium leading-6 text-foreground'>
-                    {t('confirmNewPassword')}
-                </label>
-                <div className=''>
-                    <input
-                        id='passwordConfirm'
-                        name='passwordConfirm'
-                        type='text'
-                        autoComplete='passwordConfirm'
-                        required
-                        className='block w-full rounded-md border-0 bg-input p-2.5 text-foreground shadow-xs outline-0 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6'
-                    />
-                </div>
-            </div>
-            <div className='mt-4'>
-                <button className='rounded bg-blue-700 px-2 py-1 font-bold text-white'>
-                    {t('changePassword')}
-                </button>
-            </div>
-        </form>
-    )
-}

package/templates/default/components/EmailQuotaForm.tsx

@@ -1,73 +0,0 @@
-import { useI18n } from 'nextjs-cms/translations/client'
-import React from 'react'
-import useModal from '@/hooks/useModal'
-import { Badge } from '@/components/ui/badge'
-import { useToast } from '@/components/ui/use-toast'
-import InfoCard from '@/components/InfoCard'
-import { trpc } from '@/app/_trpc/client'
-
-export default function EmailQuotaForm({ email, action }: { email: string; action: any }) {
-    const t = useI18n()
-    const { setModal, modal, modalResponse, setModalResponse } = useModal()
-    const { toast } = useToast()
-
-    const quotaMutation = trpc.cpanelEmails.quotaChange.useMutation({
-        onError: (error) => {
-            setModal({
-                title: t('error'),
-                body: (
-                    <div className='p-4'>
-                        <InfoCard result={{ key: 'danger', title: error.message, status: false }} />
-                    </div>
-                ),
-                headerColor: 'bg-red-700',
-                titleColor: 'text-white',
-                lang: 'en',
-            })
-        },
-        onSuccess: (data) => {
-            action()
-            setModal(null)
-            setModalResponse(null)
-            toast({
-                variant: 'success',
-                title: t('success'),
-            })
-        },
-    })
-    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault()
-        quotaMutation.mutate({
-            email,
-            quota: e.currentTarget.quota.value,
-        })
-    }
-
-    return (
-        <form onSubmit={handleSubmit} className='flex flex-col gap-2'>
-            <div>
-                <label htmlFor='quota' className='block text-sm font-medium leading-6 text-foreground'>
-                    {t('emailQuota')}
-                </label>
-                <div className=''>
-                    <input
-                        id='quota'
-                        name='quota'
-                        type='number'
-                        autoComplete='quota'
-                        required
-                        className='block rounded-md border-0 bg-input p-2.5 text-foreground shadow-xs outline-0 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6'
-                    />
-                    <Badge className='rounded-sm border-muted-foreground text-muted-foreground' variant='secondary'>
-                        0 = {t('unlimited')}
-                    </Badge>
-                </div>
-            </div>
-            <div className='mt-4'>
-                <button className='rounded bg-blue-700 px-2 py-1 font-bold text-white'>
-                    {t('updateQuota')}
-                </button>
-            </div>
-        </form>
-    )
-}

package/templates/default/components/EmailsPage.tsx

@@ -1,49 +0,0 @@
-'use client'
-
-import  { useEffect } from 'react'
-import { EmailItem } from 'nextjs-cms/core/types'
-import { useI18n } from 'nextjs-cms/translations/client'
-import ContainerBox from '@/components/ContainerBox'
-import NewEmailForm from '@/components/NewEmailForm'
-import EmailCard from '@/components/EmailCard'
-import { trpc } from '@/app/_trpc/client'
-
-const EmailsPage = () => {
-    const t = useI18n()
-    const controller = new AbortController()
-
-    const { isLoading, isError, data, error, refetch } = trpc.cpanelEmails.getEmails.useQuery()
-
-    useEffect(() => {
-        return () => {
-            controller.abort()
-        }
-    }, [])
-
-    return (
-        <div className='bg-white dark:bg-slate-900'>
-            <div className='bg-linear-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'>{t('emailAccounts')}</h1>
-            </div>
-
-            <div className='flex flex-col gap-2 p-4'>
-                <ContainerBox title={t('createNewEmailAccount')}>
-                    <NewEmailForm action={() => refetch()} />
-                </ContainerBox>
-
-                {isLoading && <div>{t('loading')}</div>}
-                {data && data.emails && data.emails.length > 0 && (
-                    <ContainerBox title={t('emailAccountsList')}>
-                        <div className='mt-2 grid w-full grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3'>
-                            {data.emails.map((email: EmailItem) => (
-                                <EmailCard key={email.user} action={() => refetch()} email={email} />
-                            ))}
-                        </div>
-                    </ContainerBox>
-                )}
-            </div>
-        </div>
-    )
-}
-
-export default EmailsPage

package/templates/default/components/NewEmailForm.tsx

@@ -1,132 +0,0 @@
-import { useI18n } from 'nextjs-cms/translations/client'
-import React from 'react'
-import useModal from '@/hooks/useModal'
-import { Badge } from '@/components/ui/badge'
-import { useToast } from '@/components/ui/use-toast'
-import InfoCard from '@/components/InfoCard'
-import { trpc } from '@/app/_trpc/client'
-
-export default function NewEmailForm({ action }: { action: any }) {
-    const t = useI18n()
-    const { setModal, modal, modalResponse, setModalResponse } = useModal()
-    const formRef = React.useRef<HTMLFormElement>(null)
-    const { toast } = useToast()
-    const newEmailMutation = trpc.cpanelEmails.createEmail.useMutation({
-        onError: (error) => {
-            setModal({
-                title: t('error'),
-                body: (
-                    <div className='p-4'>
-                        <InfoCard result={{ key: 'danger', title: error.message, status: false }} />
-                    </div>
-                ),
-                headerColor: 'bg-red-700',
-                titleColor: 'text-white',
-                lang: 'en',
-            })
-        },
-        onSuccess: (data) => {
-            action()
-            toast({
-                variant: 'success',
-                title: t('success'),
-                description: data.message,
-            })
-
-            // Empty the form
-            if (formRef.current) {
-                formRef.current.reset()
-            }
-        },
-    })
-    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault()
-        newEmailMutation.mutate({
-            email: e.currentTarget.username.value,
-            password: e.currentTarget.password.value,
-            quota: e.currentTarget.quota.value,
-        })
-
-        /*const data = new FormData(e.currentTarget)
-        const values = Object.fromEntries(data.entries())
-        values.operationType = 'newEmail'
-        const response = await handleEmailSubmission(values, axiosPrivate, controller)
-        if (response.error) {
-            setModal({
-                title: t('error'),
-                body: (
-                    <div className='p-4'>
-                        <InfoCard result={{ key: 'danger', title: response.error.message, status: false }} />
-                    </div>
-                ),
-                headerColor: 'bg-red-700',
-                titleColor: 'text-white',
-                lang: 'en',
-            })
-        } else if (response.code === 200) {
-            action()
-            toast({
-                variant: 'success',
-                title: t('success'),
-                description: response.message,
-            })
-        }*/
-    }
-
-    return (
-        <form ref={formRef} onSubmit={handleSubmit} className='flex flex-col gap-2'>
-            <div>
-                <label htmlFor='username' className='block text-sm font-medium leading-6 text-foreground'>
-                    {t('email')}
-                </label>
-                <div className=''>
-                    <input
-                        id='username'
-                        name='username'
-                        type='text'
-                        autoComplete='username'
-                        required
-                        className='block w-full rounded-md border-0 bg-input p-2.5 text-foreground shadow-xs outline-0 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6'
-                    />
-                </div>
-            </div>
-
-            <div>
-                <label htmlFor='password' className='block text-sm font-medium leading-6 text-foreground'>
-                    {t('password')}
-                </label>
-                <div className=''>
-                    <input
-                        id='password'
-                        name='password'
-                        type='text'
-                        autoComplete='password'
-                        required
-                        className='block w-full rounded-md border-0 bg-input p-2.5 text-foreground shadow-xs outline-0 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6'
-                    />
-                </div>
-            </div>
-            <div>
-                <label htmlFor='quota' className='block text-sm font-medium leading-6 text-foreground'>
-                    {t('emailQuota')}
-                </label>
-                <div className=''>
-                    <input
-                        id='quota'
-                        name='quota'
-                        type='number'
-                        autoComplete='quota'
-                        required
-                        className='block rounded-md border-0 bg-input p-2.5 text-foreground shadow-xs outline-0 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6'
-                    />
-                    <Badge className='rounded-sm border-muted-foreground text-muted-foreground' variant='secondary'>
-                        0 = {t('unlimited')}
-                    </Badge>
-                </div>
-            </div>
-            <div className='mt-4'>
-                <button className='rounded bg-blue-700 px-2 py-1 font-bold text-white'>{t('create')}</button>
-            </div>
-        </form>
-    )
-}

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

@@ -1,57 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import dayjs from 'dayjs'
-import type { DateRange } from 'react-day-picker'
-
-import { cn } from '@/lib/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: dayjs(new Date(2023, 0, 20))
-            .add(20, 'day')
-            .toDate(),
-    })
-
-    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 ? (
-                                <>
-                                    {dayjs(date.from).format('MMM DD, YYYY')} - {dayjs(date.to).format('MMM DD, YYYY')}
-                                </>
-                            ) : (
-                                dayjs(date.from).format('MMM DD, YYYY')
-                            )
-                        ) : (
-                            <span>Pick a date</span>
-                        )}
-                    </Button>
-                </PopoverTrigger>
-                <PopoverContent className='w-auto p-0' align='start'>
-                    <Calendar
-                        autoFocus
-                        mode='range'
-                        defaultMonth={date?.from}
-                        selected={date}
-                        onSelect={setDate}
-                        numberOfMonths={2}
-                    />
-                </PopoverContent>
-            </Popover>
-        </div>
-    )
-}