Add dynamic apply wizard customization with admin settings UI

- Create wizard config types, utilities, and defaults (wizard-config.ts)
- Add admin apply settings page with drag-and-drop step ordering, dropdown
  option management, feature toggles, welcome message customization, and
  custom field builder with select/multiselect options editor
- Build dynamic apply wizard component with animated step transitions,
  mobile-first responsive design, and config-driven form validation
- Update step components to accept dynamic config (categories, ocean issues,
  field visibility, feature flags)
- Replace hardcoded enum validation with string-based validation for
  admin-configurable dropdown values, with safe enum casting at storage layer
- Add wizard template system (model, router, admin UI) with built-in
  MOPC Classic preset
- Add program wizard config CRUD procedures to program router
- Update application router getConfig to return wizardConfig, submit handler
  to store custom field data in metadataJson
- Add edition-based apply page, project pool page, and supporting routers
- Fix CSS (invalid sm:fixed-none), Enter key handler (skip textarea),
  safe area insets for notched phones, buildStepsArray field visibility

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/app/(public)/apply/[slug]/page.tsx

@@ -1,423 +1,65 @@
 'use client'
 
-import { useState, useEffect } from 'react'
 import { useParams, useRouter } from 'next/navigation'
-import { useForm } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { z } from 'zod'
-import { motion, AnimatePresence } from 'motion/react'
 import { trpc } from '@/lib/trpc/client'
-import { toast } from 'sonner'
-import {
-  Waves,
-  AlertCircle,
-  Loader2,
-  CheckCircle,
-  ArrowLeft,
-  ArrowRight,
-  Clock,
-} from 'lucide-react'
+import { ApplyWizardDynamic } from '@/components/forms/apply-wizard-dynamic'
+import { Loader2, AlertCircle } from 'lucide-react'
 import { Button } from '@/components/ui/button'
-import { Skeleton } from '@/components/ui/skeleton'
-import {
-  StepWelcome,
-  StepContact,
-  StepProject,
-  StepTeam,
-  StepAdditional,
-  StepReview,
-} from '@/components/forms/apply-steps'
-import { CompetitionCategory, OceanIssue, TeamMemberRole } from '@prisma/client'
-import { cn } from '@/lib/utils'
+import { DEFAULT_WIZARD_CONFIG } from '@/types/wizard-config'
+import { toast } from 'sonner'
 
-// Form validation schema
-const teamMemberSchema = z.object({
-  name: z.string().min(1, 'Name is required'),
-  email: z.string().email('Invalid email address'),
-  role: z.nativeEnum(TeamMemberRole).default('MEMBER'),
-  title: z.string().optional(),
-})
-
-const applicationSchema = z.object({
-  competitionCategory: z.nativeEnum(CompetitionCategory),
-  contactName: z.string().min(2, 'Full name is required'),
-  contactEmail: z.string().email('Invalid email address'),
-  contactPhone: z.string().min(5, 'Phone number is required'),
-  country: z.string().min(2, 'Country is required'),
-  city: z.string().optional(),
-  projectName: z.string().min(2, 'Project name is required').max(200),
-  teamName: z.string().optional(),
-  description: z.string().min(20, 'Description must be at least 20 characters'),
-  oceanIssue: z.nativeEnum(OceanIssue),
-  teamMembers: z.array(teamMemberSchema).optional(),
-  institution: z.string().optional(),
-  startupCreatedDate: z.string().optional(),
-  wantsMentorship: z.boolean().default(false),
-  referralSource: z.string().optional(),
-  gdprConsent: z.boolean().refine((val) => val === true, {
-    message: 'You must agree to the data processing terms',
-  }),
-})
-
-type ApplicationFormData = z.infer<typeof applicationSchema>
-
-const STEPS = [
-  { id: 'welcome', title: 'Category', fields: ['competitionCategory'] },
-  { id: 'contact', title: 'Contact', fields: ['contactName', 'contactEmail', 'contactPhone', 'country'] },
-  { id: 'project', title: 'Project', fields: ['projectName', 'description', 'oceanIssue'] },
-  { id: 'team', title: 'Team', fields: [] },
-  { id: 'additional', title: 'Details', fields: [] },
-  { id: 'review', title: 'Review', fields: ['gdprConsent'] },
-]
-
-export default function ApplyWizardPage() {
+export default function RoundApplyPage() {
   const params = useParams()
   const router = useRouter()
   const slug = params.slug as string
 
-  const [currentStep, setCurrentStep] = useState(0)
-  const [direction, setDirection] = useState(0)
-  const [submitted, setSubmitted] = useState(false)
-  const [submissionMessage, setSubmissionMessage] = useState('')
-
   const { data: config, isLoading, error } = trpc.application.getConfig.useQuery(
-    { roundSlug: slug },
+    { slug, mode: 'round' },
     { retry: false }
   )
 
   const submitMutation = trpc.application.submit.useMutation({
-    onSuccess: (result) => {
-      setSubmitted(true)
-      setSubmissionMessage(result.message)
-    },
-    onError: (error) => {
-      toast.error(error.message)
-    },
+    onError: (error) => toast.error(error.message),
   })
 
-  const form = useForm<ApplicationFormData>({
-    resolver: zodResolver(applicationSchema),
-    defaultValues: {
-      competitionCategory: undefined,
-      contactName: '',
-      contactEmail: '',
-      contactPhone: '',
-      country: '',
-      city: '',
-      projectName: '',
-      teamName: '',
-      description: '',
-      oceanIssue: undefined,
-      teamMembers: [],
-      institution: '',
-      startupCreatedDate: '',
-      wantsMentorship: false,
-      referralSource: '',
-      gdprConsent: false,
-    },
-    mode: 'onChange',
-  })
-
-  const { watch, trigger, handleSubmit } = form
-  const competitionCategory = watch('competitionCategory')
-
-  const isBusinessConcept = competitionCategory === 'BUSINESS_CONCEPT'
-  const isStartup = competitionCategory === 'STARTUP'
-
-  const validateCurrentStep = async () => {
-    const currentFields = STEPS[currentStep].fields as (keyof ApplicationFormData)[]
-    if (currentFields.length === 0) return true
-    return await trigger(currentFields)
-  }
-
-  const nextStep = async () => {
-    const isValid = await validateCurrentStep()
-    if (isValid && currentStep < STEPS.length - 1) {
-      setDirection(1)
-      setCurrentStep((prev) => prev + 1)
-    }
-  }
-
-  const prevStep = () => {
-    if (currentStep > 0) {
-      setDirection(-1)
-      setCurrentStep((prev) => prev - 1)
-    }
-  }
-
-  const onSubmit = async (data: ApplicationFormData) => {
-    if (!config) return
-    await submitMutation.mutateAsync({
-      roundId: config.round.id,
-      data,
-    })
-  }
-
-  // Handle keyboard navigation
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Enter' && !e.shiftKey && currentStep < STEPS.length - 1) {
-        e.preventDefault()
-        nextStep()
-      }
-    }
-
-    window.addEventListener('keydown', handleKeyDown)
-    return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [currentStep])
-
-  // Loading state
   if (isLoading) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-background to-muted/30 flex items-center justify-center p-4">
-        <div className="w-full max-w-2xl space-y-6">
-          <div className="flex items-center justify-center gap-3">
-            <Loader2 className="h-8 w-8 animate-spin text-primary" />
-            <span className="text-lg text-muted-foreground">Loading application...</span>
-          </div>
-        </div>
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background to-muted/30">
+        <Loader2 className="h-8 w-8 animate-spin text-primary" />
       </div>
     )
   }
 
-  // Error state
-  if (error) {
+  if (error || !config || config.mode !== 'round') {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-background to-muted/30 flex items-center justify-center p-4">
-        <div className="w-full max-w-md text-center">
+      <div className="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-background to-muted/30">
+        <div className="text-center">
           <AlertCircle className="mx-auto h-16 w-16 text-destructive mb-4" />
           <h1 className="text-2xl font-bold mb-2">Application Not Available</h1>
-          <p className="text-muted-foreground mb-6">{error.message}</p>
-          <Button variant="outline" onClick={() => router.push('/')}>
-            Return Home
-          </Button>
+          <p className="text-muted-foreground mb-6">{error?.message ?? 'Not found'}</p>
+          <Button variant="outline" onClick={() => router.push('/')}>Return Home</Button>
         </div>
       </div>
     )
   }
 
-  // Applications closed state
-  if (config && !config.round.isOpen) {
-    return (
-      <div className="min-h-screen bg-gradient-to-br from-background to-muted/30 flex items-center justify-center p-4">
-        <div className="w-full max-w-md text-center">
-          <Clock className="mx-auto h-16 w-16 text-muted-foreground mb-4" />
-          <h1 className="text-2xl font-bold mb-2">Applications Closed</h1>
-          <p className="text-muted-foreground mb-6">
-            The application period for {config.program.name} {config.program.year} has ended.
-            {config.round.submissionEndDate && (
-              <span className="block mt-2">
-                Submissions closed on{' '}
-                {new Date(config.round.submissionEndDate).toLocaleDateString('en-US', {
-                  dateStyle: 'long',
-                })}
-              </span>
-            )}
-          </p>
-          <Button variant="outline" onClick={() => router.push('/')}>
-            Return Home
-          </Button>
-        </div>
-      </div>
-    )
-  }
-
-  // Success state
-  if (submitted) {
-    return (
-      <div className="min-h-screen bg-gradient-to-br from-background to-muted/30 flex items-center justify-center p-4">
-        <motion.div
-          initial={{ scale: 0.8, opacity: 0 }}
-          animate={{ scale: 1, opacity: 1 }}
-          className="w-full max-w-md text-center"
-        >
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ delay: 0.2, type: 'spring' }}
-          >
-            <CheckCircle className="mx-auto h-20 w-20 text-green-500 mb-6" />
-          </motion.div>
-          <h1 className="text-3xl font-bold mb-4">Application Submitted!</h1>
-          <p className="text-muted-foreground mb-8">{submissionMessage}</p>
-          <Button onClick={() => router.push('/')}>
-            Return Home
-          </Button>
-        </motion.div>
-      </div>
-    )
-  }
-
-  if (!config) return null
-
-  const progress = ((currentStep + 1) / STEPS.length) * 100
-
-  const variants = {
-    enter: (direction: number) => ({
-      x: direction > 0 ? 50 : -50,
-      opacity: 0,
-    }),
-    center: {
-      x: 0,
-      opacity: 1,
-    },
-    exit: (direction: number) => ({
-      x: direction < 0 ? 50 : -50,
-      opacity: 0,
-    }),
-  }
-
   return (
-    <div className="min-h-screen bg-gradient-to-br from-background to-muted/30">
-      {/* Header */}
-      <header className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-        <div className="mx-auto max-w-4xl px-4 py-4">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-3">
-              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
-                <Waves className="h-5 w-5 text-primary" />
-              </div>
-              <div>
-                <h1 className="font-semibold">{config.program.name}</h1>
-                <p className="text-xs text-muted-foreground">{config.program.year} Application</p>
-              </div>
-            </div>
-            <div className="text-right">
-              <span className="text-sm text-muted-foreground">
-                Step {currentStep + 1} of {STEPS.length}
-              </span>
-            </div>
-          </div>
-
-          {/* Progress bar */}
-          <div className="mt-4 h-1.5 w-full overflow-hidden rounded-full bg-muted">
-            <motion.div
-              className="h-full bg-gradient-to-r from-primary to-primary/70"
-              initial={{ width: 0 }}
-              animate={{ width: `${progress}%` }}
-              transition={{ duration: 0.3 }}
-            />
-          </div>
-
-          {/* Step indicators */}
-          <div className="mt-3 flex justify-between">
-            {STEPS.map((step, index) => (
-              <button
-                key={step.id}
-                type="button"
-                onClick={() => {
-                  if (index < currentStep) {
-                    setDirection(index < currentStep ? -1 : 1)
-                    setCurrentStep(index)
-                  }
-                }}
-                disabled={index > currentStep}
-                className={cn(
-                  'hidden text-xs font-medium transition-colors sm:block',
-                  index === currentStep && 'text-primary',
-                  index < currentStep && 'text-muted-foreground hover:text-foreground cursor-pointer',
-                  index > currentStep && 'text-muted-foreground/50'
-                )}
-              >
-                {step.title}
-              </button>
-            ))}
-          </div>
-        </div>
-      </header>
-
-      {/* Main content */}
-      <main className="mx-auto max-w-4xl px-4 py-8">
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <div className="relative min-h-[500px]">
-            <AnimatePresence initial={false} custom={direction} mode="wait">
-              <motion.div
-                key={currentStep}
-                custom={direction}
-                variants={variants}
-                initial="enter"
-                animate="center"
-                exit="exit"
-                transition={{
-                  x: { type: 'spring', stiffness: 300, damping: 30 },
-                  opacity: { duration: 0.2 },
-                }}
-                className="w-full"
-              >
-                {currentStep === 0 && (
-                  <StepWelcome
-                    programName={config.program.name}
-                    programYear={config.program.year}
-                    value={competitionCategory}
-                    onChange={(value) => form.setValue('competitionCategory', value)}
-                  />
-                )}
-                {currentStep === 1 && <StepContact form={form} />}
-                {currentStep === 2 && <StepProject form={form} />}
-                {currentStep === 3 && <StepTeam form={form} />}
-                {currentStep === 4 && (
-                  <StepAdditional
-                    form={form}
-                    isBusinessConcept={isBusinessConcept}
-                    isStartup={isStartup}
-                  />
-                )}
-                {currentStep === 5 && (
-                  <StepReview form={form} programName={config.program.name} />
-                )}
-              </motion.div>
-            </AnimatePresence>
-          </div>
-
-          {/* Navigation buttons */}
-          <div className="mt-8 flex items-center justify-between border-t pt-6">
-            <Button
-              type="button"
-              variant="ghost"
-              onClick={prevStep}
-              disabled={currentStep === 0 || submitMutation.isPending}
-              className={cn(currentStep === 0 && 'invisible')}
-            >
-              <ArrowLeft className="mr-2 h-4 w-4" />
-              Back
-            </Button>
-
-            {currentStep < STEPS.length - 1 ? (
-              <Button type="button" onClick={nextStep}>
-                Continue
-                <ArrowRight className="ml-2 h-4 w-4" />
-              </Button>
-            ) : (
-              <Button type="submit" disabled={submitMutation.isPending}>
-                {submitMutation.isPending ? (
-                  <>
-                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    Submitting...
-                  </>
-                ) : (
-                  <>
-                    <CheckCircle className="mr-2 h-4 w-4" />
-                    Submit Application
-                  </>
-                )}
-              </Button>
-            )}
-          </div>
-        </form>
-      </main>
-
-      {/* Footer with deadline info */}
-      {config.round.submissionEndDate && (
-        <footer className="fixed bottom-0 left-0 right-0 border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 py-3">
-          <div className="mx-auto max-w-4xl px-4 text-center text-sm text-muted-foreground">
-            <Clock className="inline-block mr-1 h-4 w-4" />
-            Applications due by{' '}
-            {new Date(config.round.submissionEndDate).toLocaleDateString('en-US', {
-              dateStyle: 'long',
-            })}
-          </div>
-        </footer>
-      )}
-    </div>
+    <ApplyWizardDynamic
+      mode="round"
+      config={config.wizardConfig ?? DEFAULT_WIZARD_CONFIG}
+      programName={config.program.name}
+      programYear={config.program.year}
+      roundId={config.round.id}
+      isOpen={config.round.isOpen}
+      submissionDeadline={config.round.submissionEndDate}
+      onSubmit={async (data) => {
+        await submitMutation.mutateAsync({
+          mode: 'round',
+          roundId: config.round.id,
+          data: data as any,
+        })
+      }}
+      isSubmitting={submitMutation.isPending}
+    />
   )
 }

src/app/(public)/apply/edition/[programSlug]/page.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { useParams, useRouter } from 'next/navigation'
+import { trpc } from '@/lib/trpc/client'
+import { ApplyWizardDynamic } from '@/components/forms/apply-wizard-dynamic'
+import { Loader2, AlertCircle } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { DEFAULT_WIZARD_CONFIG } from '@/types/wizard-config'
+import { toast } from 'sonner'
+
+export default function EditionApplyPage() {
+  const params = useParams()
+  const router = useRouter()
+  const programSlug = params.programSlug as string
+
+  const { data: config, isLoading, error } = trpc.application.getConfig.useQuery(
+    { slug: programSlug, mode: 'edition' },
+    { retry: false }
+  )
+
+  const submitMutation = trpc.application.submit.useMutation({
+    onError: (error) => toast.error(error.message),
+  })
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background to-muted/30">
+        <Loader2 className="h-8 w-8 animate-spin text-primary" />
+      </div>
+    )
+  }
+
+  if (error || !config || config.mode !== 'edition') {
+    return (
+      <div className="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-background to-muted/30">
+        <div className="text-center">
+          <AlertCircle className="mx-auto h-16 w-16 text-destructive mb-4" />
+          <h1 className="text-2xl font-bold mb-2">Application Not Available</h1>
+          <p className="text-muted-foreground mb-6">{error?.message ?? 'Not found'}</p>
+          <Button variant="outline" onClick={() => router.push('/')}>Return Home</Button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <ApplyWizardDynamic
+      mode="edition"
+      config={config.wizardConfig ?? DEFAULT_WIZARD_CONFIG}
+      programName={config.program.name}
+      programYear={config.program.year}
+      programId={config.program.id}
+      isOpen={config.program.isOpen}
+      submissionDeadline={config.program.submissionEndDate}
+      onSubmit={async (data) => {
+        await submitMutation.mutateAsync({
+          mode: 'edition',
+          programId: config.program.id,
+          data: data as any,
+        })
+      }}
+      isSubmitting={submitMutation.isPending}
+    />
+  )
+}