@nestledjs/data-browser 0.1.0

package/src/lib/layouts/AdminDataLayout.tsx

@@ -0,0 +1,251 @@
+import { getPluralName } from '@nestledjs/helpers'
+import { Outlet, useNavigate, useParams } from 'react-router'
+import { useMemo, useState, useRef } from 'react'
+import { AdminLocalStorage } from '../utils/secure-storage'
+import { kebabCase, spacedWords } from '../utils/string-utils'
+import { useAdminDataContext } from '../context/AdminDataContext'
+
+/**
+ * Main layout component for admin data browser
+ * Provides model selector, fullscreen toggle, and preferences import/export
+ */
+export function AdminDataLayout() {
+  const navigate = useNavigate()
+  const params = useParams()
+  const { databaseModels, basePath = '/admin/data' } = useAdminDataContext()
+
+  const [isFullscreen, setIsFullscreen] = useState(false)
+  const [notification, setNotification] = useState<{ type: 'success' | 'error'; message: string } | null>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  // Sort models alphabetically by plural display name
+  const sortedModels = useMemo(
+    () =>
+      [...databaseModels].sort((a, b) =>
+        getPluralName(spacedWords(a.name)).localeCompare(getPluralName(spacedWords(b.name))),
+      ),
+    [databaseModels],
+  )
+
+  // Find the current model based on route params
+  const currentModel = useMemo(() => {
+    const pluralParam = params.dataTypePlural
+    if (!pluralParam) return null
+
+    return sortedModels.find(m => {
+      const modelUrlName = kebabCase(getPluralName(m.name))
+      return modelUrlName.toLowerCase() === pluralParam.toLowerCase()
+    })
+  }, [params.dataTypePlural, sortedModels])
+
+  // Handle model selection
+  const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedModelName = event.target.value
+    if (selectedModelName) {
+      const selectedModel = sortedModels.find(m => m.name === selectedModelName)
+      if (selectedModel) {
+        navigate(`${basePath}/${kebabCase(getPluralName(selectedModel.name))}`)
+      }
+    }
+  }
+
+  const toggleFullscreen = () => {
+    setIsFullscreen(!isFullscreen)
+  }
+
+  // Show notification with auto-dismiss
+  const showNotification = (type: 'success' | 'error', message: string) => {
+    setNotification({ type, message })
+    setTimeout(() => setNotification(null), 5000)
+  }
+
+  // Export preferences
+  const handleExport = () => {
+    const configJson = AdminLocalStorage.exportConfig()
+    if (!configJson) {
+      showNotification('error', 'Failed to export preferences')
+      return
+    }
+
+    // Create download
+    const blob = new Blob([configJson], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = `admin-data-preferences-${new Date().toISOString().split('T')[0]}.json`
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    URL.revokeObjectURL(url)
+
+    showNotification('success', 'Preferences exported successfully')
+  }
+
+  // Import preferences
+  const handleImport = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (!file) return
+
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      const content = e.target?.result as string
+      if (!content) {
+        showNotification('error', 'Failed to read file')
+        return
+      }
+
+      const success = AdminLocalStorage.importConfig(content)
+      if (success) {
+        showNotification('success', 'Preferences imported successfully. Refreshing...')
+        // Refresh the page to apply new preferences
+        setTimeout(() => window.location.reload(), 1500)
+      } else {
+        showNotification('error', 'Invalid preferences file')
+      }
+    }
+    reader.onerror = () => {
+      showNotification('error', 'Failed to read file')
+    }
+    reader.readAsText(file)
+
+    // Reset file input
+    if (fileInputRef.current) {
+      fileInputRef.current.value = ''
+    }
+  }
+
+  const triggerImport = () => {
+    fileInputRef.current?.click()
+  }
+
+  const content = (
+    <div className="max-w-full mx-auto h-full flex flex-col">
+      {/* Notification Toast */}
+      {notification && (
+        <div className={`mb-4 px-4 py-3 rounded-md border ${
+          notification.type === 'success'
+            ? 'bg-green-50 border-green-200 text-green-800 dark:bg-green-900/20 dark:border-green-800 dark:text-green-200'
+            : 'bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-200'
+        }`}>
+          <div className="flex items-center">
+            {notification.type === 'success' ? (
+              <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+              </svg>
+            ) : (
+              <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+              </svg>
+            )}
+            <span className="text-sm font-medium">{notification.message}</span>
+          </div>
+        </div>
+      )}
+
+      {/* Model Selector and Controls */}
+      <div className="mb-6 space-y-3">
+        <div className="flex items-end gap-3">
+          <div className="flex-1">
+            <label htmlFor="model-selector" className="block text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">
+              Select Model
+            </label>
+            <div className="relative">
+              <select
+                id="model-selector"
+                value={currentModel?.name || ''}
+                onChange={handleModelChange}
+                className="w-full h-[50px] pl-4 pr-10 py-3 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-web focus:border-green-web text-base appearance-none cursor-pointer"
+              >
+                <option value="">Choose a model...</option>
+                {sortedModels.map(model => (
+                  <option key={model.name} value={model.name}>
+                    {getPluralName(spacedWords(model.name))}
+                  </option>
+                ))}
+              </select>
+              {/* Custom chevron icon */}
+              <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                <svg className="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                  <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
+                </svg>
+              </div>
+            </div>
+          </div>
+
+          {/* Fullscreen Toggle Button */}
+          <button
+            onClick={toggleFullscreen}
+            className="h-[50px] px-4 py-3 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-green-web focus:border-green-web transition-colors"
+            title={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
+          >
+            {isFullscreen ? (
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 9V4.5M9 9H4.5M9 9L3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5l5.25 5.25" />
+              </svg>
+            ) : (
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
+              </svg>
+            )}
+          </button>
+        </div>
+
+        {/* Import/Export Preferences */}
+        <div className="flex items-center gap-2 text-sm">
+          <span className="text-gray-600 dark:text-gray-400">Preferences:</span>
+          <button
+            onClick={handleExport}
+            className="inline-flex items-center px-3 py-1.5 text-gray-700 dark:text-gray-300 hover:text-green-web dark:hover:text-green-web transition-colors"
+            title="Export your preferences to a file"
+          >
+            <svg className="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+            </svg>
+            Export
+          </button>
+          <span className="text-gray-300 dark:text-gray-600">|</span>
+          <button
+            onClick={triggerImport}
+            className="inline-flex items-center px-3 py-1.5 text-gray-700 dark:text-gray-300 hover:text-green-web dark:hover:text-green-web transition-colors"
+            title="Import preferences from a file"
+          >
+            <svg className="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
+            </svg>
+            Import
+          </button>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="application/json,.json"
+            onChange={handleImport}
+            className="hidden"
+          />
+        </div>
+      </div>
+
+      {/* Page Content */}
+      <div className="flex-1 overflow-auto">
+        <Outlet />
+      </div>
+    </div>
+  )
+
+  if (isFullscreen) {
+    return (
+      <div className="fixed inset-0 z-50 bg-white dark:bg-gray-900 overflow-hidden flex flex-col">
+        <div className="h-full w-full overflow-auto p-6 md:p-8 lg:p-12">
+          {content}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="h-full overflow-hidden flex flex-col">
+      <main className="h-full w-full overflow-auto p-6 md:p-8 lg:p-12">
+        {content}
+      </main>
+    </div>
+  )
+}

package/src/lib/pages/AdminDataCreatePage.tsx

@@ -0,0 +1,415 @@
+import { gql } from '@apollo/client'
+import { useMutation } from '@apollo/client/react'
+import { CheckCircleIcon, ExclamationCircleIcon } from '@heroicons/react/24/outline'
+import { useAdminDataContext } from '../context/AdminDataContext'
+
+function toReadableText(text: string): string {
+  return text.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, str => str.toUpperCase())
+}
+import { ErrorBoundary } from '@nestledjs/shared-components'
+import { Form } from '@nestledjs/forms'
+import { useEffect, useMemo, useState } from 'react'
+import { Link, useNavigate, useParams } from 'react-router'
+
+import { buildFormFields, cleanFormInput, getAdminDocuments } from '../utils/graphql-utils' // =================================
+
+// =================================
+// SECURITY UTILITIES
+// =================================
+
+// Sanitize and validate user input
+function sanitizeInput(input: string | undefined): string {
+  if (!input || typeof input !== 'string') return ''
+
+  // Remove potentially dangerous characters and limit length
+  return input
+    .replace(/[<>"'%;()&+]/g, '') // Remove common injection characters
+    .replace(/javascript:/gi, '') // Remove javascript: protocols
+    .replace(/on\w+\s*=/gi, '') // Remove event handlers
+    .trim()
+    .substring(0, 100) // Limit length to prevent DoS
+}
+
+// Convert PascalCase to kebab-case for URLs (CourseChapter -> course-chapter)
+const toKebabCase = (str: string): string => {
+  return str
+    .replace(/([a-z])([A-Z])/g, '$1-$2') // Insert dash between lowercase and uppercase
+    .toLowerCase() // Convert to lowercase
+}
+
+// Validation functions moved into component to access databaseModels from context
+
+// Check if user has access to this data type (basic implementation)
+function checkAccess(dataType: string): boolean {
+  // For now, allow access to all data types in admin
+  // In a real app, this would check user permissions
+  return true
+}
+
+// =================================
+// MAIN COMPONENT
+// =================================
+
+export function AdminDataCreatePage() {
+  const { dataType } = useParams()
+  const { databaseModels, basePath = '/admin/data', formTheme } = useAdminDataContext()
+
+  // Helper function to find model by name
+  const findModelByName = (name: string) => {
+    return databaseModels.find(model => model.name === name)
+  }
+
+  // Validate data type against allowed models
+  const validateDataType = (dataType: string | undefined): string | null => {
+    const sanitized = sanitizeInput(dataType)
+    if (!sanitized) return null
+
+    // Convert kebab-case to PascalCase (course-chapter -> CourseChapter)
+    const properCaseDataType = sanitized
+      .split('-')
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+      .join('')
+
+    // Check if this data type exists in our models
+    const model = databaseModels.find(m => m.name === properCaseDataType)
+    return model ? properCaseDataType : null
+  }
+
+  // Security validation
+  const validatedDataType = validateDataType(dataType)
+
+  // Determine what to render based on validation
+  const shouldShowUnauthorized = !validatedDataType
+  const shouldShowAccessDenied = validatedDataType && !checkAccess(validatedDataType)
+  const model = validatedDataType ? findModelByName(validatedDataType) : null
+  const shouldShowModelNotFound = validatedDataType && !shouldShowAccessDenied && !model
+
+  // Render error states
+  if (shouldShowUnauthorized) {
+    return (
+      <div className="flex flex-col justify-center py-12">
+        <div className="mt-8 mx-auto w-full max-w-md">
+          <div className="bg-white dark:bg-gray-800 py-8 px-4 shadow sm:rounded-lg sm:px-10">
+            <div className="text-center">
+              <ExclamationCircleIcon className="mx-auto h-12 w-12 text-red-400" />
+              <h2 className="mt-4 text-lg font-medium text-gray-900 dark:text-gray-100">Unauthorized</h2>
+              <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
+                Invalid data type or insufficient permissions.
+              </p>
+              <div className="mt-6">
+                <Link
+                  to={basePath}
+                  className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-web hover:bg-green-web-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-web"
+                >
+                  Return to Data Browser
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (shouldShowAccessDenied) {
+    return (
+      <div className="flex flex-col justify-center py-12">
+        <div className="mt-8 mx-auto w-full max-w-md">
+          <div className="bg-white dark:bg-gray-800 py-8 px-4 shadow sm:rounded-lg sm:px-10">
+            <div className="text-center">
+              <ExclamationCircleIcon className="mx-auto h-12 w-12 text-red-400" />
+              <h2 className="mt-4 text-lg font-medium text-gray-900 dark:text-gray-100">Access Denied</h2>
+              <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
+                You don't have permission to create {toReadableText(validatedDataType!)} records.
+              </p>
+              <div className="mt-6">
+                <Link
+                  to={basePath}
+                  className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-web hover:bg-green-web-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-web"
+                >
+                  Return to Data Browser
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (shouldShowModelNotFound) {
+    return (
+      <div className="flex flex-col justify-center py-12">
+        <div className="mt-8 mx-auto w-full max-w-md">
+          <div className="bg-white dark:bg-gray-800 py-8 px-4 shadow sm:rounded-lg sm:px-10">
+            <div className="text-center">
+              <ExclamationCircleIcon className="mx-auto h-12 w-12 text-yellow-400" />
+              <h2 className="mt-4 text-lg font-medium text-gray-900 dark:text-gray-100">Model Not Found</h2>
+              <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
+                The data model for "{validatedDataType}" could not be found.
+              </p>
+              <div className="mt-6">
+                <Link
+                  to={basePath}
+                  className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-web hover:bg-green-web-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-web"
+                >
+                  Return to Data Browser
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // At this point we know model exists and is valid
+  return <AdminDataCreatePageContent model={model!} basePath={basePath} formTheme={formTheme} />
+}
+
+// =================================
+// CONTENT COMPONENT
+// =================================
+
+function AdminDataCreatePageContent({ model, basePath, formTheme }: Readonly<{ model: any; basePath: string; formTheme: any }>) {
+  const navigate = useNavigate()
+  const { sdk } = useAdminDataContext()
+
+  // State
+  const [submissionState, setSubmissionState] = useState<{
+    status: 'idle' | 'loading' | 'success' | 'error'
+    message?: string
+  }>({ status: 'idle' })
+
+  // Get GraphQL documents with error handling (memoized to prevent render loops)
+  const documents = useMemo(() => {
+    try {
+      return getAdminDocuments(sdk, model)
+    } catch (error) {
+      console.error('[AdminDataCreatePage] Error getting documents:', error)
+      return null
+    }
+  }, [sdk, model])
+
+  const CREATE_MUTATION = useMemo(() => {
+    if (!documents?.create) return null
+    try {
+      // Check if it's already a parsed GraphQL document
+      if (documents.create?.definitions && documents.create?.loc) {
+        return documents.create
+      }
+
+      return gql(documents.create)
+    } catch (error) {
+      console.error('[AdminDataCreatePage] Error parsing CREATE mutation:', error)
+      return null
+    }
+  }, [documents])
+
+  // Create mutation - call BEFORE any early returns to maintain hook order
+  const [createMutation] = useMutation(
+    CREATE_MUTATION ||
+      gql`
+        mutation PlaceholderCreate {
+          __typename
+        }
+      `,
+  )
+
+  // Early return AFTER all hooks are called
+  if (!documents || !CREATE_MUTATION) {
+    return (
+      <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
+        <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-2xl">
+          <div className="bg-white dark:bg-gray-800 py-8 px-4 shadow sm:rounded-lg sm:px-10">
+            <div className="text-center">
+              <ExclamationCircleIcon className="mx-auto h-12 w-12 text-red-400" />
+              <h2 className="mt-4 text-lg font-medium text-gray-900 dark:text-gray-100">GraphQL Schema Error</h2>
+              <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
+                Unable to load GraphQL documents for this model. Please ensure the API server is
+                running and the GraphQL schema is up to date.
+              </p>
+              <div className="mt-6">
+                <Link
+                  to={basePath}
+                  className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-web hover:bg-green-web-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-web"
+                >
+                  Return to Data Browser
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // Build form fields
+  const formFields = buildFormFields(sdk, model, 'create')
+
+  // Handle form submission
+  const handleSubmit = async (formData: Record<string, unknown>) => {
+    try {
+      setSubmissionState({ status: 'loading' })
+
+      // Clean the form input
+      const cleanedInput = cleanFormInput(formData, model)
+
+      // Execute mutation
+      const result = await createMutation({
+        variables: {
+          input: cleanedInput,
+        },
+      })
+
+      if ((result as any).errors) {
+        console.error('GraphQL errors:', (result as any).errors)
+        setSubmissionState({
+          status: 'error',
+          message: (result as any).errors.map((err: any) => err.message).join(', '),
+        })
+        return
+      }
+
+      setSubmissionState({
+        status: 'success',
+        message: `${toReadableText(model.name)} created successfully!`,
+      })
+
+      // Redirect after a brief delay to show success message
+      setTimeout(() => {
+        navigate(`/admin/data/${toKebabCase(model.pluralName)}`)
+      }, 1500)
+    } catch (error) {
+      console.error('Error creating record:', error)
+      setSubmissionState({
+        status: 'error',
+        message: error instanceof Error ? error.message : 'An unexpected error occurred',
+      })
+    }
+  }
+
+  // Clear submission state after errors
+  useEffect(() => {
+    if (submissionState.status === 'error') {
+      const timer = setTimeout(() => {
+        setSubmissionState({ status: 'idle' })
+      }, 5000)
+      return () => clearTimeout(timer)
+    }
+  }, [submissionState.status])
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="mb-8">
+          <nav className="flex mb-6" aria-label="Breadcrumb">
+            <ol className="flex items-center space-x-4">
+              <li>
+                <Link to="/admin/data" className="text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400">
+                  Data Browser
+                </Link>
+              </li>
+              <li>
+                <div className="flex items-center">
+                  <svg
+                    className="flex-shrink-0 h-5 w-5 text-gray-300 dark:text-gray-600"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 111.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                  <Link
+                    to={`/admin/data/${toKebabCase(model.pluralName)}`}
+                    className="ml-4 text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400"
+                  >
+                    {toReadableText(model.pluralName)}
+                  </Link>
+                </div>
+              </li>
+              <li>
+                <div className="flex items-center">
+                  <svg
+                    className="flex-shrink-0 h-5 w-5 text-gray-300 dark:text-gray-600"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 111.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                  <span className="ml-4 text-gray-500 dark:text-gray-400">Create New</span>
+                </div>
+              </li>
+            </ol>
+          </nav>
+          <h1 className="mt-4 text-3xl font-bold text-gray-900 dark:text-gray-100">
+            Create {toReadableText(model.name)}
+          </h1>
+        </div>
+
+        {/* Submission Status */}
+        {submissionState.status !== 'idle' && (
+          <div
+            className={`mb-6 rounded-md p-4 ${
+              submissionState.status === 'success'
+                ? 'bg-green-50 border border-green-200'
+                : submissionState.status === 'error'
+                  ? 'bg-red-50 border border-red-200'
+                  : 'bg-blue-50 border border-blue-200'
+            }`}
+          >
+            <div className="flex">
+              <div className="flex-shrink-0">
+                {submissionState.status === 'success' ? (
+                  <CheckCircleIcon className="h-5 w-5 text-green-400" />
+                ) : submissionState.status === 'error' ? (
+                  <ExclamationCircleIcon className="h-5 w-5 text-red-400" />
+                ) : (
+                  <div className="h-5 w-5 border-2 border-blue-400 border-t-transparent rounded-full animate-spin" />
+                )}
+              </div>
+              <div className="ml-3">
+                <p
+                  className={`text-sm font-medium ${
+                    submissionState.status === 'success'
+                      ? 'text-green-800'
+                      : submissionState.status === 'error'
+                        ? 'text-red-800'
+                        : 'text-blue-800'
+                  }`}
+                >
+                  {submissionState.status === 'loading'
+                    ? `Creating ${toReadableText(model.name)}...`
+                    : submissionState.message}
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Form */}
+        <div className="bg-white dark:bg-gray-800 shadow-sm rounded-lg">
+          <div className="px-6 py-8">
+            <Form
+              id={`create-${model.name.toLowerCase()}-form`}
+              fields={formFields}
+              submit={handleSubmit}
+              disabled={submissionState.status === 'loading'}
+              theme={formTheme}
+            />
+          </div>
+        </div>
+    </div>
+  )
+}
+
+export function AdminDataCreateErrorBoundary({ error }: Readonly<{ error: Error }>) {
+  return <ErrorBoundary error={error} />
+}