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>
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

File diff suppressed because it is too large Load Diff

View File

@@ -45,18 +45,23 @@ export default function EditProgramPage() {
const [isSubmitting, setIsSubmitting] = useState(false)
const [formData, setFormData] = useState({
name: '',
slug: '',
description: '',
status: 'DRAFT',
applyMode: 'round' as 'edition' | 'round' | 'both',
})
const { data: program, isLoading } = trpc.program.get.useQuery({ id })
useEffect(() => {
if (program) {
const settings = (program.settingsJson as Record<string, any>) || {}
setFormData({
name: program.name,
slug: program.slug || '',
description: program.description || '',
status: program.status,
applyMode: settings.applyMode || 'round',
})
}
}, [program])
@@ -89,8 +94,12 @@ export default function EditProgramPage() {
updateProgram.mutate({
id,
name: formData.name,
slug: formData.slug || undefined,
description: formData.description || undefined,
status: formData.status as 'DRAFT' | 'ACTIVE' | 'ARCHIVED',
settingsJson: {
applyMode: formData.applyMode,
},
})
}
@@ -196,6 +205,41 @@ export default function EditProgramPage() {
</div>
</div>
<div className="grid gap-4 md:grid-cols-2">
<div className="space-y-2">
<Label htmlFor="slug">Edition Slug</Label>
<Input
id="slug"
value={formData.slug}
onChange={(e) => setFormData({ ...formData, slug: e.target.value })}
placeholder="e.g., mopc-2026"
/>
<p className="text-xs text-muted-foreground">
URL-friendly identifier for edition-wide applications (optional)
</p>
</div>
<div className="space-y-2">
<Label htmlFor="applyMode">Application Flow</Label>
<Select
value={formData.applyMode}
onValueChange={(value) => setFormData({ ...formData, applyMode: value as 'edition' | 'round' | 'both' })}
>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="edition">Edition-wide only</SelectItem>
<SelectItem value="round">Round-specific only</SelectItem>
<SelectItem value="both">Allow both</SelectItem>
</SelectContent>
</Select>
<p className="text-xs text-muted-foreground">
Controls whether applicants apply to the program or specific rounds
</p>
</div>
</div>
<div className="space-y-2">
<Label htmlFor="description">Description</Label>
<Textarea