create-nextjs-cms 0.5.69 → 0.5.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nextjs-cms",
-  "version": "0.5.69",
+  "version": "0.5.71",
   "private": false,
   "type": "module",
   "bin": {
@@ -29,8 +29,8 @@
     "tsx": "^4.20.6",
     "typescript": "^5.9.2",
     "@lzcms/eslint-config": "0.3.0",
-    "@lzcms/tsconfig": "0.1.0",
-    "@lzcms/prettier-config": "0.1.0"
+    "@lzcms/prettier-config": "0.1.0",
+    "@lzcms/tsconfig": "0.1.0"
   },
   "prettier": "@lzcms/prettier-config",
   "scripts": {

package/templates/default/app/(rootLayout)/(plugins)/[...slug]/page.tsx

@@ -1,36 +1,36 @@
-import { notFound } from 'next/navigation'
-import auth from 'nextjs-cms/auth'
-import { getAdminPrivileges } from 'nextjs-cms/api/helpers'
-import { findPluginRouteByPath } from 'nextjs-cms/plugins/server'
-import { getPluginServerComponent } from './plugin-server-registry'
-
-export const dynamic = 'force-dynamic'
-type Params = Promise<{ slug?: string[] }>
-
-export default async function Page(props: { params: Params }) {
-    const params = await props.params
-    const slug = params.slug ?? []
-
-    const path = `/${slug.join('/')}`
-    const session = await auth()
-    if (!session?.user) {
-        notFound()
-    }
-
-    const plugin = await findPluginRouteByPath(path)
-    if (!plugin) {
-        notFound()
-    }
-
-    const privilegeSet = await getAdminPrivileges(session.user.id)
-    if (!privilegeSet.has(plugin.pluginName)) {
-        notFound()
-    }
-
-    const PluginComponent = await getPluginServerComponent(plugin.pluginId, plugin.component)
-    if (!PluginComponent) {
-        notFound()
-    }
-
-    return <PluginComponent />
-}
+import { notFound } from 'next/navigation'
+import auth from 'nextjs-cms/auth'
+import { getAdminPrivileges } from 'nextjs-cms/api/helpers'
+import { findPluginRouteByPath } from 'nextjs-cms/plugins/server'
+import { getPluginServerComponent } from './plugin-server-registry'
+
+export const dynamic = 'force-dynamic'
+type Params = Promise<{ slug?: string[] }>
+
+export default async function Page(props: { params: Params }) {
+    const params = await props.params
+    const slug = params.slug ?? []
+
+    const path = `/${slug.join('/')}`
+    const session = await auth()
+    if (!session?.user) {
+        notFound()
+    }
+
+    const plugin = await findPluginRouteByPath(path)
+    if (!plugin) {
+        notFound()
+    }
+
+    const privilegeSet = await getAdminPrivileges(session.user.id)
+    if (!privilegeSet.has(plugin.pluginName)) {
+        notFound()
+    }
+
+    const PluginComponent = await getPluginServerComponent(plugin.pluginRegistryName, plugin.component)
+    if (!PluginComponent) {
+        notFound()
+    }
+
+    return <PluginComponent />
+}

package/templates/default/app/(rootLayout)/(plugins)/[...slug]/plugin-server-registry.ts

@@ -1,25 +1,22 @@
-import type { ReactNode } from 'react'
-import { pluginServerLoaders } from 'nextjs-cms/plugins/server'
-
-export type PluginServerComponent = (props?: Record<string, unknown>) => ReactNode | Promise<ReactNode>
-
-export type PluginServerModule = {
-    default?: PluginServerComponent
-    [key: string]: unknown
-}
-
-export const getPluginServerComponent = async (packageName: string, componentName: string | undefined) => {
-    const loader = pluginServerLoaders[packageName]
-    if (!loader) return null
-
-    const mod = await loader()
-    const resolved = componentName
-        ? (mod as Record<string, PluginServerComponent | undefined>)[componentName]
-        : mod.default
-
-    if (!resolved || typeof resolved !== 'function') {
-        return null
-    }
-
-    return resolved
-}
+import dynamic from 'next/dynamic'
+
+export const pluginNamesMap: Record<string, string> = {
+    'cpanel-dashboard': '@nextjs-cms-plugins/cpanel-dashboard/server',
+    'cpanel-emails': '@nextjs-cms-plugins/cpanel-emails/server',
+    'google-analytics': '@nextjs-cms-plugins/google-analytics/server',
+    // A workaround to avoid importing error if no plugins are installed
+    blank: 'nextjs-cms/plugins/blank-component',
+}
+
+export const getPluginServerComponent = async (registryName: string, componentName: string | undefined) => {
+    const pluginName = pluginNamesMap[registryName]
+    const ClientComponent = dynamic(
+        () =>
+            import(pluginName ?? 'nextjs-cms/plugins/blank-component').then((mod) =>
+                componentName ? mod[componentName] : mod.default,
+            ),
+        { ssr: true },
+    )
+
+    return ClientComponent
+}

package/templates/default/app/(rootLayout)/browse/[section]/[page]/page.tsx

@@ -7,6 +7,7 @@ export default async function Page(props: { params: Params; searchParams: Search
     const searchParams = await props.searchParams
     const { q } = searchParams
     const { section, page } = params
+
     await api.hasItemsSections.listItems.prefetch({
         sectionName: section,
         page: parseInt(page) ?? 1,

package/templates/default/app/(rootLayout)/dashboard/page.tsx

@@ -1,44 +1,44 @@
-export const dynamic = 'force-dynamic'
-
-export default function DashboardPage() {
-    return (
-        <div className='w-full'>
-            <div className='bg-linear-to-r from-amber-200 via-orange-200 to-rose-200 p-8 text-foreground dark:from-amber-900 dark:via-orange-900 dark:to-rose-900'>
-                <h1 className='text-3xl font-extrabold tracking-tight'>Welcome to Mission Control</h1>
-                <p className='mt-2 text-base text-muted-foreground'>
-                    Your CMS is ready. Chart a course, publish boldly, and keep the lights green.
-                </p>
-            </div>
-
-            <div className='space-y-6 p-6'>
-                <section className='rounded-lg border bg-card p-6 text-card-foreground shadow-sm'>
-                    <h2 className='text-xl font-semibold'>Today&apos;s focus</h2>
-                    <p className='mt-2 text-sm text-muted-foreground'>
-                        Start with one small win: verify a section, ship a quick update, or polish a headline.
-                    </p>
-                </section>
-
-                <section className='grid gap-4 md:grid-cols-3'>
-                    <div className='rounded-lg border bg-card p-4 text-card-foreground shadow-sm'>
-                        <div className='text-sm font-semibold'>Ship with confidence</div>
-                        <div className='mt-2 text-sm text-muted-foreground'>
-                            Keep changes tight and reversible. Small releases, fast feedback.
-                        </div>
-                    </div>
-                    <div className='rounded-lg border bg-card p-4 text-card-foreground shadow-sm'>
-                        <div className='text-sm font-semibold'>Stay organized</div>
-                        <div className='mt-2 text-sm text-muted-foreground'>
-                            Group your content by intent, not just by type.
-                        </div>
-                    </div>
-                    <div className='rounded-lg border bg-card p-4 text-card-foreground shadow-sm'>
-                        <div className='text-sm font-semibold'>Delight users</div>
-                        <div className='mt-2 text-sm text-muted-foreground'>
-                            A clean headline and a single strong image can do the heavy lifting.
-                        </div>
-                    </div>
-                </section>
-            </div>
-        </div>
-    )
-}
+export const dynamic = 'force-dynamic'
+
+export default function DashboardPage() {
+    return (
+        <div className='w-full'>
+            <div className='bg-linear-to-r from-amber-200 via-orange-200 to-rose-200 p-8 text-foreground dark:from-amber-900 dark:via-orange-900 dark:to-rose-900'>
+                <h1 className='text-3xl font-extrabold tracking-tight'>Welcome to Mission Control</h1>
+                <p className='mt-2 text-base text-muted-foreground'>
+                    Your CMS is ready. Chart a course, publish boldly, and keep the lights green.
+                </p>
+            </div>
+
+            <div className='space-y-6 p-6'>
+                <section className='rounded-lg border bg-card p-6 text-card-foreground shadow-sm'>
+                    <h2 className='text-xl font-semibold'>Today&apos;s focus</h2>
+                    <p className='mt-2 text-sm text-muted-foreground'>
+                        Start with one small win: verify a section, ship a quick update, or polish a headline.
+                    </p>
+                </section>
+
+                <section className='grid gap-4 md:grid-cols-3'>
+                    <div className='rounded-lg border bg-card p-4 text-card-foreground shadow-sm'>
+                        <div className='text-sm font-semibold'>Ship with confidence</div>
+                        <div className='mt-2 text-sm text-muted-foreground'>
+                            Keep changes tight and reversible. Small releases, fast feedback.
+                        </div>
+                    </div>
+                    <div className='rounded-lg border bg-card p-4 text-card-foreground shadow-sm'>
+                        <div className='text-sm font-semibold'>Stay organized</div>
+                        <div className='mt-2 text-sm text-muted-foreground'>
+                            Group your content by intent, not just by type.
+                        </div>
+                    </div>
+                    <div className='rounded-lg border bg-card p-4 text-card-foreground shadow-sm'>
+                        <div className='text-sm font-semibold'>Delight users</div>
+                        <div className='mt-2 text-sm text-muted-foreground'>
+                            A clean headline and a single strong image can do the heavy lifting.
+                        </div>
+                    </div>
+                </section>
+            </div>
+        </div>
+    )
+}

package/templates/default/app/(rootLayout)/layout.tsx

@@ -1,12 +1,14 @@
 import Layout from '@/components/Layout'
 import { api, HydrateClient } from 'nextjs-cms/api/trpc/server'
+import { getCMSConfig } from 'nextjs-cms/core'
 
 export default async function CMSLayout({ children }: { children: React.ReactNode }) {
     await api.navigation.getSidebar.prefetch()
+    const cmsConfig = await getCMSConfig()
 
     return (
         <HydrateClient>
-            <Layout>{children}</Layout>
+            <Layout logoUrlPath={cmsConfig.ui.logo}>{children}</Layout>
         </HydrateClient>
     )
 }

package/templates/default/app/_trpc/client.ts

@@ -1,3 +1,3 @@
-'use client'
-
-export { trpc } from 'nextjs-cms/api/trpc/client'
+'use client'
+
+export { trpc } from 'nextjs-cms/api/trpc/client'

package/templates/default/app/api/trpc/[trpc]/route.ts

@@ -1,5 +1,5 @@
 import { fetchRequestHandler } from '@trpc/server/adapters/fetch'
-import { createTRPCContext, getAppRouter } from 'nextjs-cms/api'
+import { createTRPCContext, getAppRouter } from 'nextjs-cms/api'
 import { NextRequest } from 'next/server'
 
 /**
@@ -13,11 +13,11 @@ const context = async (req: NextRequest) => {
     })
 }
 
-const handler = async (req: NextRequest) =>
+const handler = async (req: NextRequest) =>
     fetchRequestHandler({
         endpoint: '/api/trpc',
         req,
-        router: await getAppRouter(),
+        router: await getAppRouter(),
         createContext: () => context(req),
         /*onError(opts) {
             return opts.error

package/templates/default/app/layout.tsx

@@ -5,23 +5,29 @@ import { cn } from '@/lib/utils'
 import { ThemeProvider } from '@/components/ThemeProvider'
 import Providers from '@/app/providers'
 import auth from 'nextjs-cms/auth'
-
-export const metadata: Metadata = {
-    title: 'nextjs-cms',
-    description: 'nextjs-cms',
-}
+import { getCMSConfig } from 'nextjs-cms/core'
 
 const inter = Inter({
     subsets: ['latin'],
     variable: '--font-sans',
 })
 
+
+export async function generateMetadata(): Promise<Metadata> {
+    const cmsConfig = await getCMSConfig()
+    return {
+      title: cmsConfig.ui.title,
+      description: 'nextjs-cms',
+  }
+}
+
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
     const session = await auth()
+    const cmsConfig = await getCMSConfig()
     return (
         <html lang='en' suppressHydrationWarning>
             <body className={cn('bg-background min-h-screen font-sans antialiased', inter.variable)}>
-                <ThemeProvider attribute='class' defaultTheme='dark' enableSystem disableTransitionOnChange>
+                <ThemeProvider attribute='class' defaultTheme={cmsConfig.ui.defaultTheme} enableSystem disableTransitionOnChange>
                     <Providers session={session ?? undefined}>{children}</Providers>
                 </ThemeProvider>
             </body>

package/templates/default/cms.config.ts

@@ -3,9 +3,8 @@ import process from 'process'
 import { resolve } from 'path'
 
 export const config: CMSConfig = {
-        title: 'NEXT CMS Admin',
+        title: 'NEXTJS CMS',
         defaultTheme: 'dark',
-        logo: '/logo.svg',
     },
     debug: true,
     sections: {

package/templates/default/components/AdminsPage.tsx

@@ -4,12 +4,16 @@ import AdminCard from '@/components/AdminCard'
 import getString from 'nextjs-cms/translations'
 import NewAdminForm from '@/components/NewAdminForm'
 import ContainerBox from '@/components/ContainerBox'
-import LoadingSpinners from '@/components/LoadingSpinners'
 import { trpc } from '@/app/_trpc/client'
+import ErrorComponent from './ErrorComponent'
 
 const AdminsPage = () => {
-    const { isLoading, isError, data, error, refetch } = trpc.admins.list.useQuery()
+    const [data, {refetch}] = trpc.admins.list.useSuspenseQuery()
 
+    if (data.error) {
+        return <ErrorComponent message={data.error.message} />
+    }
+    
     return (
         <div className='w-full'>
             <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'>
@@ -21,11 +25,6 @@ const AdminsPage = () => {
                     {data && data.privileges && <NewAdminForm action={() => refetch()} privileges={data.privileges} />}
                 </ContainerBox>
 
-                {isLoading && (
-                    <div>
-                        <LoadingSpinners />
-                    </div>
-                )}
                 {data && data.admins && data.admins.length > 0 && (
                     <ContainerBox title={getString('admins_list')}>
                         <div className='mt-2 grid w-full grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3'>

package/templates/default/components/BarChartBox.tsx

@@ -1,6 +1,5 @@
-import React from 'react'
 import ContainerBox from '@/components/ContainerBox'
-import { BarChart, Bar, Rectangle, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'
+import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from 'recharts'
 import { BarChartDataItem } from 'nextjs-cms/core/types'
 import LoadingSpinners from '@/components/LoadingSpinners'
 

package/templates/default/components/BrowsePage.tsx

@@ -1,9 +1,8 @@
 'use client'
 
-import React, { useEffect, useRef } from 'react'
+import { useRef } from 'react'
 import getString from 'nextjs-cms/translations'
 import SectionItemCard from '@/components/SectionItemCard'
-import LoadingSpinners from '@/components/LoadingSpinners'
 import ContainerBox from '@/components/ContainerBox'
 import Pagination from '@/components/pagination/Pagination'
 import { Alert, AlertDescription } from '@/components/ui/alert'
@@ -12,8 +11,8 @@ import { Input } from './ui/input'
 import { Button } from './ui/button'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { trpc } from '@/app/_trpc/client'
-import { ExclamationTriangleIcon } from '@radix-ui/react-icons'
 import { capitalizeWords } from 'nextjs-cms/utils'
+import ErrorComponent from '@/components/ErrorComponent'
 
 export default function BrowsePage({ section, page }: { section: string; page: string }) {
     const pageInt = parseInt(page) ?? 1
@@ -21,13 +20,15 @@ export default function BrowsePage({ section, page }: { section: string; page: s
     const router = useRouter()
     const q = params.get('q') ?? ''
     const searchInputRef = useRef<HTMLInputElement>(null)
-    const { isLoading, isError, data, error, refetch } = trpc.hasItemsSections.listItems.useQuery({
+    const [data, {refetch}] = trpc.hasItemsSections.listItems.useSuspenseQuery({
         sectionName: section,
         page: pageInt,
         q,
     })
 
-    useEffect(() => {}, [])
+    if (data.error) {
+            return <ErrorComponent message={data.error.message} />
+    }
 
     return (
         <div>
@@ -67,23 +68,9 @@ export default function BrowsePage({ section, page }: { section: string; page: s
                     </Card>
                 ) : null}
                 <ContainerBox title={getString('browse')}>
-                    {isLoading ? (
-                        <div>
-                            <LoadingSpinners />
-                        </div>
-                    ) : null}
-
-                    {data ? (
-                        <>
-                            {data.error ? (
-                                <Alert variant='destructive' className='my-8'>
-                                    <AlertDescription className='text-md font-bold'>
-                                        <div className='flex items-center gap-1.5'>
-                                            <ExclamationTriangleIcon className='h-5 w-5' /> {data.error.message}
-                                        </div>
-                                    </AlertDescription>
-                                </Alert>
-                            ) : data.items && data.items.length > 0 ? (
+                    
+                        
+                            { data.items && data.items.length > 0 ? (
                                 <div className='mt-2 grid w-full grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'>
                                     {data.items.map((item, index: number) => (
                                         <SectionItemCard
@@ -99,8 +86,7 @@ export default function BrowsePage({ section, page }: { section: string; page: s
                                     <AlertDescription className='font-bold'>{getString('noItems')}</AlertDescription>
                                 </Alert>
                             )}
-                        </>
-                    ) : null}
+                     
                 </ContainerBox>
                 {data?.totalCount && data?.totalCount > 0 ? (
                     <Pagination

package/templates/default/components/CategorizedSectionPage.tsx

@@ -1,16 +1,17 @@
 'use client'
 
-import React, { useEffect } from 'react'
-import LoadingSpinners from '@/components/LoadingSpinners'
 import { trpc } from '@/app/_trpc/client'
 import CategorySectionSelectInput from '@/components/CategorySectionSelectInput'
+import ErrorComponent from '@/components/ErrorComponent'
 
 export default function CategorizedSectionPage({ section }: { section: string }) {
-    const { isLoading, isError, data, error, refetch } = trpc.categorySections.get.useQuery({
+    const [data, {refetch}] = trpc.categorySections.get.useSuspenseQuery({
         sectionName: section,
     })
 
-    useEffect(() => {}, [])
+    if (data.error) {
+            return <ErrorComponent message={data.error.message} />
+    }
 
     return (
         <div>
@@ -21,12 +22,6 @@ export default function CategorizedSectionPage({ section }: { section: string })
                 </div>
                 <div className='flex w-full flex-col'>
                     <div className='rounded-xl p-4 shadow-sm'>
-                        {isLoading && (
-                            <div>
-                                <LoadingSpinners />
-                            </div>
-                        )}
-
                         {data && data.data ? <CategorySectionSelectInput refetch={refetch} input={data.data} /> : null}
                     </div>
                 </div>

package/templates/default/components/EmailsPage.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useEffect } from 'react'
+import  { useEffect } from 'react'
 import { EmailItem } from 'nextjs-cms/core/types'
 import getString from 'nextjs-cms/translations'
 import ContainerBox from '@/components/ContainerBox'

package/templates/default/components/ErrorComponent.tsx

@@ -0,0 +1,17 @@
+import { Alert, AlertDescription } from './ui/alert'
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons'
+
+export default function ErrorComponent({ message }: { message: string }) {
+    return (
+        <div className='px-4'>
+            <Alert variant='info' className='my-8'>
+                <AlertDescription className='text-md font-bold'>
+                    <div className='flex items-center gap-1.5'>
+                        <ExclamationTriangleIcon className='size-5' /> {message}
+                    </div>
+                </AlertDescription>
+            </Alert>
+        </div>
+    )
+    
+}

package/templates/default/components/GalleryPhoto.tsx

@@ -2,13 +2,12 @@ import { PhotoGalleryItem } from 'nextjs-cms/core/types'
 import getString from 'nextjs-cms/translations'
 import { MinusIcon } from '@radix-ui/react-icons'
 import ProtectedImage from '@/components/ProtectedImage'
-import React from 'react'
 import useModal from '@/hooks/useModal'
 import { useToast } from '@/components/ui/use-toast'
 import { trpc } from '@/app/_trpc/client'
 
 const GalleryPhoto = ({ item, sectionName, action }: { item: PhotoGalleryItem; sectionName: string; action?: any }) => {
-    const { setModal, modal, modalResponse, setModalResponse } = useModal()
+    const { setModal, setModalResponse } = useModal()
     const deleteMutation = trpc.gallery.deletePhoto.useMutation({
         onError: (error) => {
             toast({

package/templates/default/components/InfoCard.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import Link from 'next/link'
-import React from 'react'
 import { CheckCircle, OctagonIcon, TriangleIcon } from 'lucide-react'
 
 type result = {

package/templates/default/components/ItemEditPage.tsx

@@ -1,19 +1,19 @@
 'use client'
 
 import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
-import React, { RefObject, useEffect, useRef, useState } from 'react'
+import { RefObject, useEffect, useRef, useState } from 'react'
 import { SectionType } 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 LoadingSpinners from '@/components/LoadingSpinners'
 import { useToast } from '@/components/ui/use-toast'
 import { DropzoneHandles } from '@/components/Dropzone'
 import { VariantHandles } from '@/components/NewVariantComponent'
 import { trpc } from '@/app/_trpc/client'
 import Form from '@/components/form/Form'
+import ErrorComponent from '@/components/ErrorComponent'
 
 export default function ItemEditPage({
     section,
@@ -42,7 +42,7 @@ export default function ItemEditPage({
     const router = useRouter()
     const dropzoneRef: RefObject<DropzoneHandles | null> = useRef(null)
     const variantRef: RefObject<VariantHandles[]> = useRef([])
-    const { isLoading, isError, data, error, refetch } = trpc.hasItemsSections.editItem.useQuery({
+    const [data, {refetch}] = trpc.hasItemsSections.editItem.useSuspenseQuery({
         sectionName: section,
         sectionItemId: itemId,
     })
@@ -182,36 +182,32 @@ export default function ItemEditPage({
         }
     }, [])
 
+    if (data.error) {
+            return <ErrorComponent message={data.error.message} />
+    }
+
     return (
         <div className='flex w-full flex-col overflow-hidden'>
-            {isLoading ? (
-                <div>
-                    <LoadingSpinners />
-                </div>
-            ) : null}
-            {isError ? <div>{error?.message}</div> : null}
-            {data ? (
-                <div className='flex w-full flex-col'>
-                    <div className='relative z-1 border-b-2 p-8 pt-12 font-extrabold text-foreground'>
-                        <div className='absolute left-0 top-0 z-2 h-4 w-full bg-linear-to-r from-emerald-800 via-emerald-400 to-sky-600'></div>
-                        <h1 className='pb-4 text-4xl'>{data.section?.title.section}</h1>
-                        <span>
-                            /{getString('edit')} {data.section?.title.singular}
-                        </span>
-                    </div>
-                    <Form
-                        formType='edit'
-                        progressVariant={progressVariant}
-                        response={response}
-                        progress={progress}
-                        data={data}
-                        dropzoneRef={dropzoneRef}
-                        variantRef={variantRef}
-                        handleSubmit={handleSubmit}
-                        isSubmitting={isSubmitting}
-                    />
+            <div className='flex w-full flex-col'>
+                <div className='relative z-1 border-b-2 p-8 pt-12 font-extrabold text-foreground'>
+                    <div className='absolute left-0 top-0 z-2 h-4 w-full bg-linear-to-r from-emerald-800 via-emerald-400 to-sky-600'></div>
+                    <h1 className='pb-4 text-4xl'>{data.section?.title.section}</h1>
+                    <span>
+                        /{getString('edit')} {data.section?.title.singular}
+                    </span>
                 </div>
-            ) : null}
+                <Form
+                    formType='edit'
+                    progressVariant={progressVariant}
+                    response={response}
+                    progress={progress}
+                    data={data}
+                    dropzoneRef={dropzoneRef}
+                    variantRef={variantRef}
+                    handleSubmit={handleSubmit}
+                    isSubmitting={isSubmitting}
+                />
+            </div>
         </div>
     )
 }