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/components/forms/evaluation-form.tsx

@@ -644,7 +644,35 @@ export function EvaluationForm({
 
       {/* Bottom submit button for mobile */}
       {!isReadOnly && (
-        <div className="flex justify-end pb-safe">
+        <div className="flex flex-col gap-3 pb-safe">
+          {/* Autosave Status */}
+          <div className="flex items-center justify-end gap-2 text-sm">
+            {autosaveStatus === 'saved' && (
+              <span className="flex items-center gap-1.5 text-green-600">
+                <CheckCircle2 className="h-3.5 w-3.5" />
+                All changes saved
+              </span>
+            )}
+            {autosaveStatus === 'saving' && (
+              <span className="flex items-center gap-1.5 text-muted-foreground">
+                <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                Saving...
+              </span>
+            )}
+            {autosaveStatus === 'error' && (
+              <span className="flex items-center gap-1.5 text-amber-600">
+                <AlertCircle className="h-3.5 w-3.5" />
+                Unsaved changes
+              </span>
+            )}
+            {autosaveStatus === 'idle' && isDirty && (
+              <span className="flex items-center gap-1.5 text-amber-600">
+                <AlertCircle className="h-3.5 w-3.5" />
+                Unsaved changes
+              </span>
+            )}
+          </div>
+          <div className="flex justify-end">
           <AlertDialog>
             <AlertDialogTrigger asChild>
               <Button
@@ -683,6 +711,7 @@ export function EvaluationForm({
               </AlertDialogFooter>
             </AlertDialogContent>
           </AlertDialog>
+          </div>
         </div>
       )}
     </form>