Comprehensive platform audit: security, UX, performance, and visual polish

Phase 1: Security - status transition validation, Zod tightening, DB indexes, transactions

Phase 2: Admin UX - search/filter for awards, learning, partners pages

Phase 3: Dashboard - Recent Activity feed, Pending Actions card, quick actions

Phase 4: Jury - assignments progress/urgency, autosave indicator, divergence highlighting

Phase 5: Portals - observer charts, mentor search, login/onboarding polish

Phase 6: Messages preview dialog, CsvExportDialog with column selection

Phase 7: Performance - query optimizations, loading skeletons, useDebounce hook

Phase 8: Visual - AnimatedCard, hover effects, StatusBadge, empty state CTAs

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

src/app/(auth)/onboarding/page.tsx

@@ -22,6 +22,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
+import { cn } from '@/lib/utils'
 import { toast } from 'sonner'
 import { ExpertiseSelect } from '@/components/shared/expertise-select'
 import { AvatarUpload } from '@/components/shared/avatar-upload'
@@ -195,6 +196,30 @@ export default function OnboardingPage() {
               </div>
             ))}
           </div>
+          {/* Step labels */}
+          <div className="flex items-center gap-2 mt-1">
+            {steps.slice(0, -1).map((s, i) => {
+              const labels: Record<string, string> = {
+                name: 'Name',
+                photo: 'Photo',
+                country: 'Country',
+                bio: 'About',
+                phone: 'Phone',
+                tags: 'Expertise',
+                preferences: 'Settings',
+              }
+              return (
+                <div key={s} className="flex-1 text-center">
+                  <span className={cn(
+                    'text-[10px]',
+                    i <= currentIndex ? 'text-primary font-medium' : 'text-muted-foreground'
+                  )}>
+                    {labels[s] || s}
+                  </span>
+                </div>
+              )
+            })}
+          </div>
           <p className="text-sm text-muted-foreground mt-2">
             Step {currentIndex + 1} of {totalVisibleSteps}
           </p>
@@ -530,10 +555,12 @@ export default function OnboardingPage() {
         {/* Step 7: Complete */}
         {step === 'complete' && (
           <CardContent className="flex flex-col items-center justify-center py-12">
-            <div className="rounded-full bg-green-100 p-4 mb-4">
+            <div className="rounded-full bg-green-100 p-4 mb-4 animate-in zoom-in-50 duration-500">
               <CheckCircle className="h-12 w-12 text-green-600" />
             </div>
-            <h2 className="text-xl font-semibold mb-2">Welcome, {name}!</h2>
+            <h2 className="text-xl font-semibold mb-2 animate-in fade-in slide-in-from-bottom-2 duration-500 delay-200">
+              Welcome, {name}!
+            </h2>
             <p className="text-muted-foreground text-center mb-4">
               Your profile is all set up. You&apos;ll be redirected to your dashboard
               shortly.