Add dynamic apply wizard customization with admin settings UI
Some checks failed
Build and Push Docker Image / build (push) Failing after 3m29s

- 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>
This commit is contained in:
2026-02-08 13:18:20 +01:00
parent 98fe658c33
commit e7c86a7b1b
40 changed files with 4477 additions and 1045 deletions

View File

@@ -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}
/>
)
}