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/learning/page.tsx

@@ -1,27 +1,34 @@
-import { Suspense } from 'react'
+'use client'
+
+import { useState, useMemo } from 'react'
+import { useDebounce } from '@/hooks/use-debounce'
 import Link from 'next/link'
-import { api } from '@/lib/trpc/server'
+import { trpc } from '@/lib/trpc/client'
 import { Button } from '@/components/ui/button'
 import {
   Card,
   CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
 } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import { Skeleton } from '@/components/ui/skeleton'
+import { Input } from '@/components/ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
 import {
   Plus,
   FileText,
   Video,
   Link as LinkIcon,
   File,
-  Eye,
   Pencil,
   ExternalLink,
+  Search,
 } from 'lucide-react'
-import { formatDate } from '@/lib/utils'
 
 const resourceTypeIcons = {
   PDF: FileText,
@@ -31,111 +38,73 @@ const resourceTypeIcons = {
   OTHER: File,
 }
 
-const cohortColors = {
+const cohortColors: Record<string, string> = {
   ALL: 'bg-gray-100 text-gray-800',
   SEMIFINALIST: 'bg-blue-100 text-blue-800',
   FINALIST: 'bg-purple-100 text-purple-800',
 }
 
-async function LearningResourcesList() {
-  const caller = await api()
-  const { data: resources } = await caller.learningResource.list({
-    perPage: 50,
-  })
+export default function LearningHubPage() {
+  const { data, isLoading } = trpc.learningResource.list.useQuery({ perPage: 50 })
+  const resources = data?.data
 
-  if (resources.length === 0) {
+  const [search, setSearch] = useState('')
+  const debouncedSearch = useDebounce(search, 300)
+  const [typeFilter, setTypeFilter] = useState('all')
+  const [cohortFilter, setCohortFilter] = useState('all')
+
+  const filteredResources = useMemo(() => {
+    if (!resources) return []
+    return resources.filter((resource) => {
+      const matchesSearch =
+        !debouncedSearch ||
+        resource.title.toLowerCase().includes(debouncedSearch.toLowerCase())
+      const matchesType = typeFilter === 'all' || resource.resourceType === typeFilter
+      const matchesCohort = cohortFilter === 'all' || resource.cohortLevel === cohortFilter
+      return matchesSearch && matchesType && matchesCohort
+    })
+  }, [resources, debouncedSearch, typeFilter, cohortFilter])
+
+  if (isLoading) {
     return (
-      <Card>
-        <CardContent className="flex flex-col items-center justify-center py-12">
-          <FileText className="h-12 w-12 text-muted-foreground mb-4" />
-          <h3 className="text-lg font-medium mb-2">No resources yet</h3>
-          <p className="text-muted-foreground mb-4">
-            Start by adding your first learning resource
-          </p>
-          <Link href="/admin/learning/new">
-            <Button>
-              <Plus className="mr-2 h-4 w-4" />
-              Add Resource
-            </Button>
-          </Link>
-        </CardContent>
-      </Card>
+      <div className="space-y-6">
+        <div className="flex items-center justify-between">
+          <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-[160px]" />
+            <Skeleton className="h-10 w-[160px]" />
+          </div>
+        </div>
+        {/* Resource list skeleton */}
+        <div className="grid gap-4">
+          {[...Array(5)].map((_, i) => (
+            <Card key={i}>
+              <CardContent className="flex items-center gap-4 py-4">
+                <Skeleton className="h-10 w-10 rounded-lg" />
+                <div className="flex-1 space-y-2">
+                  <Skeleton className="h-5 w-48" />
+                  <Skeleton className="h-4 w-32" />
+                </div>
+                <Skeleton className="h-8 w-8 rounded" />
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
     )
   }
 
-  return (
-    <div className="grid gap-4">
-      {resources.map((resource) => {
-        const Icon = resourceTypeIcons[resource.resourceType]
-        return (
-          <Card key={resource.id}>
-            <CardContent className="flex items-center gap-4 py-4">
-              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
-                <Icon className="h-5 w-5" />
-              </div>
-              <div className="flex-1 min-w-0">
-                <div className="flex items-center gap-2">
-                  <h3 className="font-medium truncate">{resource.title}</h3>
-                  {!resource.isPublished && (
-                    <Badge variant="secondary">Draft</Badge>
-                  )}
-                </div>
-                <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                  <Badge className={cohortColors[resource.cohortLevel]} variant="outline">
-                    {resource.cohortLevel}
-                  </Badge>
-                  <span>{resource.resourceType}</span>
-                  <span>-</span>
-                  <span>{resource._count.accessLogs} views</span>
-                </div>
-              </div>
-              <div className="flex items-center gap-2">
-                {resource.externalUrl && (
-                  <a
-                    href={resource.externalUrl}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <Button variant="ghost" size="icon">
-                      <ExternalLink className="h-4 w-4" />
-                    </Button>
-                  </a>
-                )}
-                <Link href={`/admin/learning/${resource.id}`}>
-                  <Button variant="ghost" size="icon">
-                    <Pencil className="h-4 w-4" />
-                  </Button>
-                </Link>
-              </div>
-            </CardContent>
-          </Card>
-        )
-      })}
-    </div>
-  )
-}
-
-function LoadingSkeleton() {
-  return (
-    <div className="grid gap-4">
-      {[1, 2, 3].map((i) => (
-        <Card key={i}>
-          <CardContent className="flex items-center gap-4 py-4">
-            <Skeleton className="h-10 w-10 rounded-lg" />
-            <div className="flex-1 space-y-2">
-              <Skeleton className="h-5 w-48" />
-              <Skeleton className="h-4 w-32" />
-            </div>
-          </CardContent>
-        </Card>
-      ))}
-    </div>
-  )
-}
-
-export default function LearningHubPage() {
   return (
     <div className="space-y-6">
+      {/* Header */}
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-2xl font-bold">Learning Hub</h1>
@@ -151,9 +120,128 @@ export default function LearningHubPage() {
         </Link>
       </div>
 
-      <Suspense fallback={<LoadingSkeleton />}>
-        <LearningResourcesList />
-      </Suspense>
+      {/* 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 resources..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="pl-9"
+          />
+        </div>
+        <div className="flex items-center gap-2">
+          <Select value={typeFilter} onValueChange={setTypeFilter}>
+            <SelectTrigger className="w-[160px]">
+              <SelectValue placeholder="All types" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All types</SelectItem>
+              <SelectItem value="PDF">PDF</SelectItem>
+              <SelectItem value="VIDEO">Video</SelectItem>
+              <SelectItem value="DOCUMENT">Document</SelectItem>
+              <SelectItem value="LINK">Link</SelectItem>
+              <SelectItem value="OTHER">Other</SelectItem>
+            </SelectContent>
+          </Select>
+          <Select value={cohortFilter} onValueChange={setCohortFilter}>
+            <SelectTrigger className="w-[160px]">
+              <SelectValue placeholder="All cohorts" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All cohorts</SelectItem>
+              <SelectItem value="ALL">All (cohort)</SelectItem>
+              <SelectItem value="SEMIFINALIST">Semifinalist</SelectItem>
+              <SelectItem value="FINALIST">Finalist</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {/* Results count */}
+      {resources && (
+        <p className="text-sm text-muted-foreground">
+          {filteredResources.length} of {resources.length} resources
+        </p>
+      )}
+
+      {/* Resource List */}
+      {filteredResources.length > 0 ? (
+        <div className="grid gap-4">
+          {filteredResources.map((resource) => {
+            const Icon = resourceTypeIcons[resource.resourceType as keyof typeof resourceTypeIcons] || File
+            return (
+              <Card key={resource.id}>
+                <CardContent className="flex items-center gap-4 py-4">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
+                    <Icon className="h-5 w-5" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <h3 className="font-medium truncate">{resource.title}</h3>
+                      {!resource.isPublished && (
+                        <Badge variant="secondary">Draft</Badge>
+                      )}
+                    </div>
+                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                      <Badge className={cohortColors[resource.cohortLevel] || ''} variant="outline">
+                        {resource.cohortLevel}
+                      </Badge>
+                      <span>{resource.resourceType}</span>
+                      <span>-</span>
+                      <span>{resource._count.accessLogs} views</span>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    {resource.externalUrl && (
+                      <a
+                        href={resource.externalUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        <Button variant="ghost" size="icon">
+                          <ExternalLink className="h-4 w-4" />
+                        </Button>
+                      </a>
+                    )}
+                    <Link href={`/admin/learning/${resource.id}`}>
+                      <Button variant="ghost" size="icon">
+                        <Pencil className="h-4 w-4" />
+                      </Button>
+                    </Link>
+                  </div>
+                </CardContent>
+              </Card>
+            )
+          })}
+        </div>
+      ) : resources && resources.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 resources match your filters
+            </p>
+          </CardContent>
+        </Card>
+      ) : (
+        <Card>
+          <CardContent className="flex flex-col items-center justify-center py-12 text-center">
+            <FileText className="h-12 w-12 text-muted-foreground/40" />
+            <h3 className="mt-3 text-lg font-medium">No resources yet</h3>
+            <p className="mt-1 text-sm text-muted-foreground max-w-sm">
+              Add learning materials like videos, documents, and links for program participants.
+            </p>
+            <Button className="mt-4" asChild>
+              <Link href="/admin/learning/new">
+                <Plus className="mr-2 h-4 w-4" />
+                Add Resource
+              </Link>
+            </Button>
+          </CardContent>
+        </Card>
+      )}
     </div>
   )
 }