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/components/jury/project-files-section.tsx

@@ -0,0 +1,92 @@
+'use client'
+
+import { trpc } from '@/lib/trpc/client'
+import { FileViewer } from '@/components/shared/file-viewer'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { AlertCircle, FileX } from 'lucide-react'
+
+interface ProjectFilesSectionProps {
+  projectId: string
+  roundId: string
+}
+
+export function ProjectFilesSection({ projectId, roundId }: ProjectFilesSectionProps) {
+  const { data: groupedFiles, isLoading, error } = trpc.file.listByProjectForRound.useQuery({
+    projectId,
+    roundId,
+  })
+
+  if (isLoading) {
+    return <ProjectFilesSectionSkeleton />
+  }
+
+  if (error) {
+    return (
+      <Card>
+        <CardContent className="flex flex-col items-center justify-center py-8 text-center">
+          <AlertCircle className="h-12 w-12 text-destructive/50" />
+          <p className="mt-2 font-medium text-destructive">Failed to load files</p>
+          <p className="text-sm text-muted-foreground">
+            {error.message || 'An error occurred while loading project files'}
+          </p>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  if (!groupedFiles || groupedFiles.length === 0) {
+    return (
+      <Card>
+        <CardContent className="flex flex-col items-center justify-center py-8 text-center">
+          <FileX className="h-12 w-12 text-muted-foreground/50" />
+          <p className="mt-2 font-medium">No files available</p>
+          <p className="text-sm text-muted-foreground">
+            This project has no files uploaded yet
+          </p>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  // Flatten all files from all round groups for FileViewer
+  const allFiles = groupedFiles.flatMap((group) => group.files)
+
+  return (
+    <div className="space-y-4">
+      {groupedFiles.map((group) => (
+        <div key={group.roundId || 'general'} className="space-y-2">
+          <div className="flex items-center gap-2">
+            <h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wide">
+              {group.roundName}
+            </h3>
+            <div className="flex-1 h-px bg-border" />
+          </div>
+          <FileViewer files={group.files} />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function ProjectFilesSectionSkeleton() {
+  return (
+    <Card>
+      <CardHeader>
+        <Skeleton className="h-5 w-28" />
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {[1, 2, 3].map((i) => (
+          <div key={i} className="flex items-center gap-3 rounded-lg border p-3">
+            <Skeleton className="h-10 w-10 rounded-lg" />
+            <div className="flex-1 space-y-2">
+              <Skeleton className="h-4 w-48" />
+              <Skeleton className="h-3 w-24" />
+            </div>
+            <Skeleton className="h-9 w-20" />
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}