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/(admin)/admin/awards/page.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import { useState, useMemo } from 'react'
+import { useDebounce } from '@/hooks/use-debounce'
 import Link from 'next/link'
 import { trpc } from '@/lib/trpc/client'
 import { Button } from '@/components/ui/button'
@@ -12,7 +14,15 @@ import {
 } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import { Skeleton } from '@/components/ui/skeleton'
-import { Plus, Trophy, Users, CheckCircle2 } from 'lucide-react'
+import { Input } from '@/components/ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Plus, Trophy, Users, CheckCircle2, Search } from 'lucide-react'
 
 const STATUS_COLORS: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
   DRAFT: 'secondary',
@@ -31,16 +41,46 @@ const SCORING_LABELS: Record<string, string> = {
 export default function AwardsListPage() {
   const { data: awards, isLoading } = trpc.specialAward.list.useQuery({})
 
+  const [search, setSearch] = useState('')
+  const debouncedSearch = useDebounce(search, 300)
+  const [statusFilter, setStatusFilter] = useState('all')
+  const [scoringFilter, setScoringFilter] = useState('all')
+
+  const filteredAwards = useMemo(() => {
+    if (!awards) return []
+    return awards.filter((award) => {
+      const matchesSearch =
+        !debouncedSearch ||
+        award.name.toLowerCase().includes(debouncedSearch.toLowerCase()) ||
+        award.description?.toLowerCase().includes(debouncedSearch.toLowerCase())
+      const matchesStatus = statusFilter === 'all' || award.status === statusFilter
+      const matchesScoring = scoringFilter === 'all' || award.scoringMode === scoringFilter
+      return matchesSearch && matchesStatus && matchesScoring
+    })
+  }, [awards, debouncedSearch, statusFilter, scoringFilter])
+
   if (isLoading) {
     return (
       <div className="space-y-6">
         <div className="flex items-center justify-between">
-          <Skeleton className="h-9 w-48" />
+          <div>
+            <Skeleton className="h-8 w-48" />
+            <Skeleton className="mt-2 h-4 w-72" />
+          </div>
           <Skeleton className="h-9 w-32" />
         </div>
+        {/* Toolbar skeleton */}
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+          <Skeleton className="h-10 flex-1" />
+          <div className="flex items-center gap-2">
+            <Skeleton className="h-10 w-[180px]" />
+            <Skeleton className="h-10 w-[160px]" />
+          </div>
+        </div>
+        {/* Cards skeleton */}
         <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-          {[...Array(3)].map((_, i) => (
-            <Skeleton key={i} className="h-48" />
+          {[...Array(6)].map((_, i) => (
+            <Skeleton key={i} className="h-48 rounded-lg" />
           ))}
         </div>
       </div>
@@ -67,12 +107,58 @@ export default function AwardsListPage() {
         </Button>
       </div>
 
+      {/* Toolbar */}
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            placeholder="Search awards..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="pl-9"
+          />
+        </div>
+        <div className="flex items-center gap-2">
+          <Select value={statusFilter} onValueChange={setStatusFilter}>
+            <SelectTrigger className="w-[180px]">
+              <SelectValue placeholder="All statuses" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All statuses</SelectItem>
+              <SelectItem value="DRAFT">Draft</SelectItem>
+              <SelectItem value="NOMINATIONS_OPEN">Nominations Open</SelectItem>
+              <SelectItem value="VOTING_OPEN">Voting Open</SelectItem>
+              <SelectItem value="CLOSED">Closed</SelectItem>
+              <SelectItem value="ARCHIVED">Archived</SelectItem>
+            </SelectContent>
+          </Select>
+          <Select value={scoringFilter} onValueChange={setScoringFilter}>
+            <SelectTrigger className="w-[160px]">
+              <SelectValue placeholder="All scoring" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All scoring</SelectItem>
+              <SelectItem value="PICK_WINNER">Pick Winner</SelectItem>
+              <SelectItem value="RANKED">Ranked</SelectItem>
+              <SelectItem value="SCORED">Scored</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {/* Results count */}
+      {awards && (
+        <p className="text-sm text-muted-foreground">
+          {filteredAwards.length} of {awards.length} awards
+        </p>
+      )}
+
       {/* Awards Grid */}
-      {awards && awards.length > 0 ? (
+      {filteredAwards.length > 0 ? (
         <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-          {awards.map((award) => (
+          {filteredAwards.map((award) => (
             <Link key={award.id} href={`/admin/awards/${award.id}`}>
-              <Card className="transition-colors hover:bg-muted/50 cursor-pointer h-full">
+              <Card className="transition-all hover:bg-muted/50 hover:-translate-y-0.5 hover:shadow-md cursor-pointer h-full">
                 <CardHeader className="pb-3">
                   <div className="flex items-start justify-between">
                     <CardTitle className="text-lg flex items-center gap-2">
@@ -118,13 +204,22 @@ export default function AwardsListPage() {
             </Link>
           ))}
         </div>
+      ) : awards && awards.length > 0 ? (
+        <Card>
+          <CardContent className="flex flex-col items-center justify-center py-8 text-center">
+            <Search className="h-8 w-8 text-muted-foreground/40" />
+            <p className="mt-2 text-sm text-muted-foreground">
+              No awards match your filters
+            </p>
+          </CardContent>
+        </Card>
       ) : (
         <Card>
           <CardContent className="flex flex-col items-center justify-center py-12 text-center">
-            <Trophy className="h-12 w-12 text-muted-foreground/50" />
-            <p className="mt-2 font-medium">No awards yet</p>
-            <p className="text-sm text-muted-foreground">
-              Create special awards for outstanding projects
+            <Trophy className="h-12 w-12 text-muted-foreground/40" />
+            <h3 className="mt-3 text-lg font-medium">No awards yet</h3>
+            <p className="mt-1 text-sm text-muted-foreground max-w-sm">
+              Create special awards with eligibility criteria and jury voting for outstanding projects.
             </p>
             <Button className="mt-4" asChild>
               <Link href="/admin/awards/new">