Observer dashboard extraction, PDF reports, jury UX overhaul, and miscellaneous improvements

- Extract observer dashboard to client component, add PDF export button
- Add PDF report generator with jsPDF for analytics reports
- Overhaul jury evaluation page with improved layout and UX
- Add new analytics endpoints for observer/admin reports
- Improve round creation/edit forms with better settings
- Fix filtering rules page, CSV export dialog, notification bell
- Update auth, prisma schema, and various type fixes

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

src/app/(admin)/admin/page.tsx

@@ -142,7 +142,7 @@ async function DashboardStats({ editionId, sessionName }: DashboardStatsProps) {
     prisma.user.count({
       where: {
         role: 'JURY_MEMBER',
-        status: { in: ['ACTIVE', 'INVITED'] },
+        status: { in: ['ACTIVE', 'INVITED', 'NONE'] },
         assignments: { some: { round: { programId: editionId } } },
       },
     }),
@@ -751,7 +751,7 @@ async function DashboardStats({ editionId, sessionName }: DashboardStatsProps) {
                           </div>
                           <div className="h-2 rounded-full bg-muted overflow-hidden">
                             <div
-                              className="h-full rounded-full bg-accent transition-all"
+                              className="h-full rounded-full bg-brand-teal transition-all"
                               style={{ width: `${(issue.count / maxIssueCount) * 100}%` }}
                             />
                           </div>

src/app/(admin)/admin/projects/new/page.tsx

@@ -25,7 +25,10 @@ import {
 import { Skeleton } from '@/components/ui/skeleton'
 import { TagInput } from '@/components/shared/tag-input'
 import { CountrySelect } from '@/components/ui/country-select'
-import { PhoneInput } from '@/components/ui/phone-input'
+import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { Badge } from '@/components/ui/badge'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Separator } from '@/components/ui/separator'
 import { toast } from 'sonner'
 import {
   ArrowLeft,
@@ -33,8 +36,52 @@ import {
   Loader2,
   AlertCircle,
   FolderPlus,
+  Users,
+  UserPlus,
+  Trash2,
+  Mail,
 } from 'lucide-react'
 
+type TeamMemberEntry = {
+  id: string
+  name: string
+  email: string
+  role: 'LEAD' | 'MEMBER' | 'ADVISOR'
+  title: string
+  phone: string
+  sendInvite: boolean
+}
+
+const ROLE_COLORS: Record<string, string> = {
+  LEAD: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
+  MEMBER: 'bg-teal-100 text-teal-700 dark:bg-teal-900/30 dark:text-teal-400',
+  ADVISOR: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
+}
+
+const ROLE_AVATAR_COLORS: Record<string, string> = {
+  LEAD: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300',
+  MEMBER: 'bg-teal-100 text-teal-700 dark:bg-teal-900/40 dark:text-teal-300',
+  ADVISOR: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
+}
+
+const ROLE_LABELS: Record<string, string> = {
+  LEAD: 'Lead',
+  MEMBER: 'Member',
+  ADVISOR: 'Advisor',
+}
+
+function getInitials(name: string): string {
+  return name
+    .split(' ')
+    .map((w) => w[0])
+    .filter(Boolean)
+    .slice(0, 2)
+    .join('')
+    .toUpperCase()
+}
+
+const ROLE_SORT_ORDER: Record<string, number> = { LEAD: 0, MEMBER: 1, ADVISOR: 2 }
+
 function NewProjectPageContent() {
   const router = useRouter()
   const searchParams = useSearchParams()
@@ -49,15 +96,20 @@ function NewProjectPageContent() {
   const [teamName, setTeamName] = useState('')
   const [description, setDescription] = useState('')
   const [tags, setTags] = useState<string[]>([])
-  const [contactEmail, setContactEmail] = useState('')
-  const [contactName, setContactName] = useState('')
-  const [contactPhone, setContactPhone] = useState('')
   const [country, setCountry] = useState('')
-  const [city, setCity] = useState('')
   const [institution, setInstitution] = useState('')
   const [competitionCategory, setCompetitionCategory] = useState<string>('')
   const [oceanIssue, setOceanIssue] = useState<string>('')
 
+  // Team members state
+  const [teamMembers, setTeamMembers] = useState<TeamMemberEntry[]>([])
+  const [memberName, setMemberName] = useState('')
+  const [memberEmail, setMemberEmail] = useState('')
+  const [memberRole, setMemberRole] = useState<'LEAD' | 'MEMBER' | 'ADVISOR'>('MEMBER')
+  const [memberTitle, setMemberTitle] = useState('')
+  const [memberPhone, setMemberPhone] = useState('')
+  const [memberSendInvite, setMemberSendInvite] = useState(false)
+
   // Fetch programs
   const { data: programs, isLoading: loadingPrograms } = trpc.program.list.useQuery({
     status: 'ACTIVE',
@@ -92,6 +144,66 @@ function NewProjectPageContent() {
   const categoryOptions = wizardConfig?.competitionCategories || []
   const oceanIssueOptions = wizardConfig?.oceanIssues || []
 
+  const handleAddMember = () => {
+    if (!memberName.trim()) {
+      toast.error('Please enter a member name')
+      return
+    }
+    if (!memberEmail.trim()) {
+      toast.error('Please enter a member email')
+      return
+    }
+    // Basic email validation
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(memberEmail.trim())) {
+      toast.error('Please enter a valid email address')
+      return
+    }
+    // Check for duplicates
+    if (teamMembers.some((m) => m.email.toLowerCase() === memberEmail.trim().toLowerCase())) {
+      toast.error('A member with this email already exists')
+      return
+    }
+    if (teamMembers.length >= 10) {
+      toast.error('Maximum 10 team members allowed')
+      return
+    }
+
+    setTeamMembers((prev) => [
+      ...prev,
+      {
+        id: crypto.randomUUID(),
+        name: memberName.trim(),
+        email: memberEmail.trim(),
+        role: memberRole,
+        title: memberTitle.trim(),
+        phone: memberPhone.trim(),
+        sendInvite: memberSendInvite,
+      },
+    ])
+
+    // Reset form
+    setMemberName('')
+    setMemberEmail('')
+    setMemberRole('MEMBER')
+    setMemberTitle('')
+    setMemberPhone('')
+    setMemberSendInvite(false)
+  }
+
+  const handleRemoveMember = (id: string) => {
+    setTeamMembers((prev) => prev.filter((m) => m.id !== id))
+  }
+
+  const handleToggleInvite = (id: string) => {
+    setTeamMembers((prev) =>
+      prev.map((m) => (m.id === id ? { ...m, sendInvite: !m.sendInvite } : m))
+    )
+  }
+
+  const sortedMembers = [...teamMembers].sort(
+    (a, b) => (ROLE_SORT_ORDER[a.role] ?? 9) - (ROLE_SORT_ORDER[b.role] ?? 9)
+  )
+
   const handleSubmit = () => {
     if (!title.trim()) {
       toast.error('Please enter a project title')
@@ -113,10 +225,16 @@ function NewProjectPageContent() {
       competitionCategory: competitionCategory as 'STARTUP' | 'BUSINESS_CONCEPT' | undefined || undefined,
       oceanIssue: oceanIssue as 'POLLUTION_REDUCTION' | 'CLIMATE_MITIGATION' | 'TECHNOLOGY_INNOVATION' | 'SUSTAINABLE_SHIPPING' | 'BLUE_CARBON' | 'HABITAT_RESTORATION' | 'COMMUNITY_CAPACITY' | 'SUSTAINABLE_FISHING' | 'CONSUMER_AWARENESS' | 'OCEAN_ACIDIFICATION' | 'OTHER' | undefined || undefined,
       institution: institution.trim() || undefined,
-      contactPhone: contactPhone.trim() || undefined,
-      contactEmail: contactEmail.trim() || undefined,
-      contactName: contactName.trim() || undefined,
-      city: city.trim() || undefined,
+      teamMembers: teamMembers.length > 0
+        ? teamMembers.map(({ name, email, role, title: t, phone, sendInvite }) => ({
+            name,
+            email,
+            role,
+            title: t || undefined,
+            phone: phone || undefined,
+            sendInvite,
+          }))
+        : undefined,
     })
   }
 
@@ -304,47 +422,6 @@ function NewProjectPageContent() {
                     placeholder="e.g., University of Monaco"
                   />
                 </div>
-              </CardContent>
-            </Card>
-
-            {/* Contact Info */}
-            <Card>
-              <CardHeader>
-                <CardTitle>Contact Information</CardTitle>
-                <CardDescription>
-                  Contact details for the project team
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div className="space-y-2">
-                  <Label htmlFor="contactName">Contact Name</Label>
-                  <Input
-                    id="contactName"
-                    value={contactName}
-                    onChange={(e) => setContactName(e.target.value)}
-                    placeholder="e.g., John Smith"
-                  />
-                </div>
-
-                <div className="space-y-2">
-                  <Label htmlFor="contactEmail">Contact Email</Label>
-                  <Input
-                    id="contactEmail"
-                    type="email"
-                    value={contactEmail}
-                    onChange={(e) => setContactEmail(e.target.value)}
-                    placeholder="e.g., john@example.com"
-                  />
-                </div>
-
-                <div className="space-y-2">
-                  <Label>Contact Phone</Label>
-                  <PhoneInput
-                    value={contactPhone}
-                    onChange={setContactPhone}
-                    defaultCountry="MC"
-                  />
-                </div>
 
                 <div className="space-y-2">
                   <Label>Country</Label>
@@ -353,16 +430,171 @@ function NewProjectPageContent() {
                     onChange={setCountry}
                   />
                 </div>
+              </CardContent>
+            </Card>
 
-                <div className="space-y-2">
-                  <Label htmlFor="city">City</Label>
-                  <Input
-                    id="city"
-                    value={city}
-                    onChange={(e) => setCity(e.target.value)}
-                    placeholder="e.g., Monaco"
-                  />
+            {/* Team Members */}
+            <Card>
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <CardTitle>Team Members</CardTitle>
+                  <Badge variant="secondary">{teamMembers.length} / 10</Badge>
                 </div>
+                <CardDescription>
+                  Add team members and optionally invite them to the platform
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                {teamMembers.length === 0 ? (
+                  <div className="flex flex-col items-center justify-center rounded-lg border border-dashed py-8 text-center">
+                    <Users className="h-10 w-10 text-muted-foreground/40" />
+                    <p className="mt-2 text-sm font-medium">No team members yet</p>
+                    <p className="text-xs text-muted-foreground">
+                      Add members below to link them to this project
+                    </p>
+                  </div>
+                ) : (
+                  <div className="space-y-2">
+                    {sortedMembers.map((member) => (
+                      <div
+                        key={member.id}
+                        className="flex items-center gap-3 rounded-lg border p-3"
+                      >
+                        <Avatar className={`h-9 w-9 ${ROLE_AVATAR_COLORS[member.role]}`}>
+                          <AvatarFallback className={ROLE_AVATAR_COLORS[member.role]}>
+                            {getInitials(member.name)}
+                          </AvatarFallback>
+                        </Avatar>
+                        <div className="min-w-0 flex-1">
+                          <div className="flex items-center gap-2">
+                            <span className="truncate text-sm font-medium">{member.name}</span>
+                            <Badge variant="outline" className={`text-[10px] px-1.5 py-0 ${ROLE_COLORS[member.role]}`}>
+                              {ROLE_LABELS[member.role]}
+                            </Badge>
+                            {member.title && (
+                              <span className="hidden truncate text-xs text-muted-foreground sm:inline">
+                                {member.title}
+                              </span>
+                            )}
+                          </div>
+                          <p className="truncate text-xs text-muted-foreground">{member.email}</p>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <button
+                            type="button"
+                            onClick={() => handleToggleInvite(member.id)}
+                            className={`flex items-center gap-1 rounded-md px-2 py-1 text-xs transition-colors ${
+                              member.sendInvite
+                                ? 'bg-primary/10 text-primary'
+                                : 'text-muted-foreground hover:text-foreground'
+                            }`}
+                            title={member.sendInvite ? 'Invitation will be sent' : 'Click to send invitation'}
+                          >
+                            <Mail className="h-3.5 w-3.5" />
+                            <span className="hidden sm:inline">
+                              {member.sendInvite ? 'Invite' : 'No invite'}
+                            </span>
+                          </button>
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            className="h-8 w-8 text-muted-foreground hover:text-destructive"
+                            onClick={() => handleRemoveMember(member.id)}
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+
+                {teamMembers.length > 0 && teamMembers.length < 10 && <Separator />}
+
+                {/* Add member form */}
+                {teamMembers.length < 10 && (
+                  <div className="space-y-3">
+                    <p className="text-sm font-medium flex items-center gap-1.5">
+                      <UserPlus className="h-4 w-4" />
+                      Add Member
+                    </p>
+                    <div className="grid gap-3 sm:grid-cols-2">
+                      <div className="space-y-1.5">
+                        <Label htmlFor="memberName" className="text-xs">Name *</Label>
+                        <Input
+                          id="memberName"
+                          value={memberName}
+                          onChange={(e) => setMemberName(e.target.value)}
+                          placeholder="Full name"
+                          className="h-9"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label htmlFor="memberEmail" className="text-xs">Email *</Label>
+                        <Input
+                          id="memberEmail"
+                          type="email"
+                          value={memberEmail}
+                          onChange={(e) => setMemberEmail(e.target.value)}
+                          placeholder="email@example.com"
+                          className="h-9"
+                        />
+                      </div>
+                    </div>
+                    <div className="grid gap-3 sm:grid-cols-2">
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">Role</Label>
+                        <Select value={memberRole} onValueChange={(v) => setMemberRole(v as 'LEAD' | 'MEMBER' | 'ADVISOR')}>
+                          <SelectTrigger className="h-9">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="LEAD">Lead</SelectItem>
+                            <SelectItem value="MEMBER">Member</SelectItem>
+                            <SelectItem value="ADVISOR">Advisor</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label htmlFor="memberTitle" className="text-xs">Title (optional)</Label>
+                        <Input
+                          id="memberTitle"
+                          value={memberTitle}
+                          onChange={(e) => setMemberTitle(e.target.value)}
+                          placeholder="e.g., CEO, CTO"
+                          className="h-9"
+                        />
+                      </div>
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-2">
+                        <Checkbox
+                          id="memberSendInvite"
+                          checked={memberSendInvite}
+                          onCheckedChange={(checked) => setMemberSendInvite(checked === true)}
+                        />
+                        <Label htmlFor="memberSendInvite" className="text-xs cursor-pointer">
+                          Send platform invitation
+                        </Label>
+                      </div>
+                      <Button
+                        type="button"
+                        size="sm"
+                        onClick={handleAddMember}
+                      >
+                        <UserPlus className="mr-1.5 h-3.5 w-3.5" />
+                        Add
+                      </Button>
+                    </div>
+                  </div>
+                )}
+
+                {teamMembers.length >= 10 && (
+                  <p className="text-center text-xs text-muted-foreground">
+                    Maximum of 10 team members reached
+                  </p>
+                )}
               </CardContent>
             </Card>
           </div>

src/app/(admin)/admin/reports/page.tsx

@@ -37,12 +37,10 @@ import {
   Users,
   ClipboardList,
   CheckCircle2,
-  PieChart,
   TrendingUp,
   GitCompare,
   UserCheck,
   Globe,
-  Printer,
 } from 'lucide-react'
 import { formatDateOnly } from '@/lib/utils'
 import {
@@ -57,6 +55,7 @@ import {
   JurorConsistencyChart,
   DiversityMetricsChart,
 } from '@/components/charts'
+import { ExportPdfButton } from '@/components/shared/export-pdf-button'
 
 function ReportsOverview() {
   const { data: programs, isLoading } = trpc.program.list.useQuery({ includeRounds: true })
@@ -631,6 +630,19 @@ function DiversityTab() {
 }
 
 export default function ReportsPage() {
+  const [pdfRoundId, setPdfRoundId] = useState<string | null>(null)
+
+  const { data: pdfPrograms } = trpc.program.list.useQuery({ includeRounds: true })
+  const pdfRounds = pdfPrograms?.flatMap((p) =>
+    p.rounds.map((r) => ({ id: r.id, name: r.name, programName: `${p.year} Edition` }))
+  ) || []
+
+  if (pdfRounds.length && !pdfRoundId) {
+    setPdfRoundId(pdfRounds[0].id)
+  }
+
+  const selectedPdfRound = pdfRounds.find((r) => r.id === pdfRoundId)
+
   return (
     <div className="space-y-6">
       {/* Header */}
@@ -666,16 +678,27 @@ export default function ReportsPage() {
               Diversity
             </TabsTrigger>
           </TabsList>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => {
-              window.print()
-            }}
-          >
-            <Printer className="mr-2 h-4 w-4" />
-            Export PDF
-          </Button>
+          <div className="flex items-center gap-2">
+            <Select value={pdfRoundId || ''} onValueChange={setPdfRoundId}>
+              <SelectTrigger className="w-[220px]">
+                <SelectValue placeholder="Select round for PDF" />
+              </SelectTrigger>
+              <SelectContent>
+                {pdfRounds.map((round) => (
+                  <SelectItem key={round.id} value={round.id}>
+                    {round.programName} - {round.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {pdfRoundId && (
+              <ExportPdfButton
+                roundId={pdfRoundId}
+                roundName={selectedPdfRound?.name}
+                programName={selectedPdfRound?.programName}
+              />
+            )}
+          </div>
         </div>
 
         <TabsContent value="overview">

src/app/(admin)/admin/rounds/[id]/edit/page.tsx

@@ -72,7 +72,7 @@ interface PageProps {
 const updateRoundSchema = z
   .object({
     name: z.string().min(1, 'Name is required').max(255),
-    requiredReviews: z.number().int().min(1).max(10),
+    requiredReviews: z.number().int().min(0).max(10),
     minAssignmentsPerJuror: z.number().int().min(1).max(50),
     maxAssignmentsPerJuror: z.number().int().min(1).max(100),
     votingStartAt: z.date().nullable().optional(),
@@ -206,7 +206,7 @@ function EditRoundContent({ roundId }: { roundId: string }) {
     await updateRound.mutateAsync({
       id: roundId,
       name: data.name,
-      requiredReviews: data.requiredReviews,
+      requiredReviews: roundType === 'FILTERING' ? 0 : data.requiredReviews,
       minAssignmentsPerJuror: data.minAssignmentsPerJuror,
       maxAssignmentsPerJuror: data.maxAssignmentsPerJuror,
       roundType,
@@ -301,30 +301,32 @@ function EditRoundContent({ roundId }: { roundId: string }) {
                 )}
               />
 
-              <FormField
-                control={form.control}
-                name="requiredReviews"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Required Reviews per Project</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="number"
-                        min={1}
-                        max={10}
-                        {...field}
-                        onChange={(e) =>
-                          field.onChange(parseInt(e.target.value) || 1)
-                        }
-                      />
-                    </FormControl>
-                    <FormDescription>
-                      Minimum number of evaluations each project should receive
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+              {roundType !== 'FILTERING' && (
+                <FormField
+                  control={form.control}
+                  name="requiredReviews"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Required Reviews per Project</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="number"
+                          min={1}
+                          max={10}
+                          {...field}
+                          onChange={(e) =>
+                            field.onChange(parseInt(e.target.value) || 1)
+                          }
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        Minimum number of evaluations each project should receive
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
 
               <div className="grid gap-4 sm:grid-cols-2">
                 <FormField

src/app/(admin)/admin/rounds/[id]/filtering/results/page.tsx

@@ -105,6 +105,8 @@ export default function FilteringResultsPage({
       : undefined,
     page,
     perPage,
+  }, {
+    staleTime: 0, // Always refetch - results change after filtering runs
   })
 
   const utils = trpc.useUtils()

src/app/(admin)/admin/rounds/[id]/filtering/rules/page.tsx

@@ -109,6 +109,7 @@ export default function FilteringRulesPage({
 
   // AI screening config state
   const [criteriaText, setCriteriaText] = useState('')
+  const [aiAction, setAiAction] = useState<'REJECT' | 'FLAG'>('REJECT')
   const [aiBatchSize, setAiBatchSize] = useState('20')
   const [aiParallelBatches, setAiParallelBatches] = useState('1')
 
@@ -144,7 +145,7 @@ export default function FilteringRulesPage({
     } else if (newRuleType === 'AI_SCREENING') {
       configJson = {
         criteriaText,
-        action: 'FLAG',
+        action: aiAction,
         batchSize: parseInt(aiBatchSize) || 20,
         parallelBatches: parseInt(aiParallelBatches) || 1,
       }
@@ -418,9 +419,23 @@ export default function FilteringRulesPage({
                       placeholder="Describe the criteria for AI to evaluate projects against..."
                       rows={4}
                     />
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label>Action for Non-Matching Projects</Label>
+                    <Select value={aiAction} onValueChange={(v) => setAiAction(v as 'REJECT' | 'FLAG')}>
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="REJECT">Auto Filter Out</SelectItem>
+                        <SelectItem value="FLAG">Flag for Review</SelectItem>
+                      </SelectContent>
+                    </Select>
                     <p className="text-xs text-muted-foreground">
-                      AI screening always flags projects for human review, never
-                      auto-rejects.
+                      {aiAction === 'REJECT'
+                        ? 'Projects that don\'t meet criteria will be automatically filtered out.'
+                        : 'Projects that don\'t meet criteria will be flagged for human review.'}
                     </p>
                   </div>
 

src/app/(admin)/admin/rounds/new/page.tsx

@@ -50,7 +50,7 @@ const TEAM_NOTIFICATION_OPTIONS = [
 const createRoundSchema = z.object({
   programId: z.string().min(1, 'Please select a program'),
   name: z.string().min(1, 'Name is required').max(255),
-  requiredReviews: z.number().int().min(1).max(10),
+  requiredReviews: z.number().int().min(0).max(10),
   votingStartAt: z.date().nullable().optional(),
   votingEndAt: z.date().nullable().optional(),
 }).refine((data) => {
@@ -128,7 +128,7 @@ function CreateRoundContent() {
       programId: data.programId,
       name: data.name,
       roundType,
-      requiredReviews: data.requiredReviews,
+      requiredReviews: roundType === 'FILTERING' ? 0 : data.requiredReviews,
       settingsJson: roundSettings,
       votingStartAt: data.votingStartAt ?? undefined,
       votingEndAt: data.votingEndAt ?? undefined,
@@ -291,28 +291,30 @@ function CreateRoundContent() {
                 )}
               />
 
-              <FormField
-                control={form.control}
-                name="requiredReviews"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Required Reviews per Project</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="number"
-                        min={1}
-                        max={10}
-                        {...field}
-                        onChange={(e) => field.onChange(parseInt(e.target.value) || 1)}
-                      />
-                    </FormControl>
-                    <FormDescription>
-                      Minimum number of evaluations each project should receive
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+              {roundType !== 'FILTERING' && (
+                <FormField
+                  control={form.control}
+                  name="requiredReviews"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Required Reviews per Project</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="number"
+                          min={1}
+                          max={10}
+                          {...field}
+                          onChange={(e) => field.onChange(parseInt(e.target.value) || 1)}
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        Minimum number of evaluations each project should receive
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
             </CardContent>
           </Card>
 

src/app/(jury)/jury/page.tsx

@@ -15,22 +15,21 @@ import {
 } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
-import { Progress } from '@/components/ui/progress'
 import { Skeleton } from '@/components/ui/skeleton'
-import { Separator } from '@/components/ui/separator'
 import {
   ClipboardList,
   CheckCircle2,
   Clock,
-  AlertCircle,
   ArrowRight,
   GitCompare,
   Zap,
   BarChart3,
   Target,
+  Waves,
 } from 'lucide-react'
 import { formatDateOnly } from '@/lib/utils'
 import { CountdownTimer } from '@/components/shared/countdown-timer'
+import { AnimatedCard } from '@/components/shared/animated-container'
 import { cn } from '@/lib/utils'
 
 function getGreeting(): string {
@@ -186,29 +185,33 @@ async function JuryDashboardContent() {
       label: 'Total Assignments',
       value: totalAssignments,
       icon: ClipboardList,
-      iconBg: 'bg-blue-100 dark:bg-blue-900/30',
+      accentColor: 'border-l-blue-500',
+      iconBg: 'bg-blue-50 dark:bg-blue-950/40',
       iconColor: 'text-blue-600 dark:text-blue-400',
     },
     {
       label: 'Completed',
       value: completedAssignments,
       icon: CheckCircle2,
-      iconBg: 'bg-green-100 dark:bg-green-900/30',
-      iconColor: 'text-green-600 dark:text-green-400',
+      accentColor: 'border-l-emerald-500',
+      iconBg: 'bg-emerald-50 dark:bg-emerald-950/40',
+      iconColor: 'text-emerald-600 dark:text-emerald-400',
     },
     {
       label: 'In Progress',
       value: inProgressAssignments,
       icon: Clock,
-      iconBg: 'bg-amber-100 dark:bg-amber-900/30',
+      accentColor: 'border-l-amber-500',
+      iconBg: 'bg-amber-50 dark:bg-amber-950/40',
       iconColor: 'text-amber-600 dark:text-amber-400',
     },
     {
       label: 'Pending',
       value: pendingAssignments,
       icon: Target,
-      iconBg: 'bg-slate-100 dark:bg-slate-800',
-      iconColor: 'text-slate-500',
+      accentColor: 'border-l-slate-400',
+      iconBg: 'bg-slate-50 dark:bg-slate-800/50',
+      iconColor: 'text-slate-500 dark:text-slate-400',
     },
   ]
 
@@ -216,334 +219,422 @@ async function JuryDashboardContent() {
     <>
       {/* Hero CTA - Jump to next evaluation */}
       {nextUnevaluated && activeRemaining > 0 && (
-        <Card className="border-primary/20 bg-gradient-to-r from-primary/5 to-accent/5">
-          <CardContent className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 py-5">
-            <div className="flex items-center gap-3">
-              <div className="rounded-full bg-primary/10 p-2.5">
-                <Zap className="h-5 w-5 text-primary" />
-              </div>
-              <div>
-                <p className="font-semibold">
-                  {activeRemaining} evaluation{activeRemaining > 1 ? 's' : ''} remaining
-                </p>
-                <p className="text-sm text-muted-foreground">
-                  Continue with &quot;{nextUnevaluated.project.title}&quot;
-                </p>
-              </div>
+        <AnimatedCard index={0}>
+          <Card className="overflow-hidden border-0 shadow-lg">
+            <div className="bg-gradient-to-r from-brand-blue to-brand-teal p-[1px] rounded-lg">
+              <CardContent className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 py-5 px-6 rounded-[7px] bg-background">
+                <div className="flex items-center gap-4">
+                  <div className="rounded-xl bg-gradient-to-br from-brand-blue to-brand-teal p-3 shadow-sm">
+                    <Zap className="h-5 w-5 text-white" />
+                  </div>
+                  <div>
+                    <p className="font-semibold text-base">
+                      {activeRemaining} evaluation{activeRemaining > 1 ? 's' : ''} remaining
+                    </p>
+                    <p className="text-sm text-muted-foreground">
+                      Continue with &quot;{nextUnevaluated.project.title}&quot;
+                    </p>
+                  </div>
+                </div>
+                <Button asChild size="lg" className="bg-brand-blue hover:bg-brand-blue-light shadow-md">
+                  <Link href={`/jury/projects/${nextUnevaluated.project.id}/evaluate`}>
+                    {nextUnevaluated.evaluation?.status === 'DRAFT' ? 'Continue Evaluation' : 'Start Evaluation'}
+                    <ArrowRight className="ml-2 h-4 w-4" />
+                  </Link>
+                </Button>
+              </CardContent>
             </div>
-            <Button asChild>
-              <Link href={`/jury/projects/${nextUnevaluated.project.id}/evaluate`}>
-                {nextUnevaluated.evaluation?.status === 'DRAFT' ? 'Continue Evaluation' : 'Start Evaluation'}
-                <ArrowRight className="ml-2 h-4 w-4" />
-              </Link>
-            </Button>
-          </CardContent>
-        </Card>
+          </Card>
+        </AnimatedCard>
       )}
 
       {/* Stats */}
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        {stats.map((stat) => (
-          <Card key={stat.label} className="transition-all hover:shadow-md">
-            <CardContent className="flex items-center gap-4 py-4">
-              <div className={cn('rounded-full p-2.5', stat.iconBg)}>
-                <stat.icon className={cn('h-5 w-5', stat.iconColor)} />
-              </div>
-              <div>
-                <p className="text-2xl font-bold tabular-nums">{stat.value}</p>
-                <p className="text-sm text-muted-foreground">{stat.label}</p>
-              </div>
-            </CardContent>
-          </Card>
+        {stats.map((stat, i) => (
+          <AnimatedCard key={stat.label} index={i + 1}>
+            <Card className={cn(
+              'border-l-4 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md',
+              stat.accentColor,
+            )}>
+              <CardContent className="flex items-center gap-4 py-5 px-5">
+                <div className={cn('rounded-xl p-3', stat.iconBg)}>
+                  <stat.icon className={cn('h-5 w-5', stat.iconColor)} />
+                </div>
+                <div>
+                  <p className="text-2xl font-bold tabular-nums tracking-tight">{stat.value}</p>
+                  <p className="text-sm text-muted-foreground font-medium">{stat.label}</p>
+                </div>
+              </CardContent>
+            </Card>
+          </AnimatedCard>
         ))}
       </div>
 
       {/* Overall Progress */}
-      <Card>
-        <CardContent className="py-4">
-          <div className="flex items-center justify-between mb-2">
-            <div className="flex items-center gap-2">
-              <BarChart3 className="h-4 w-4 text-muted-foreground" />
-              <span className="text-sm font-medium">Overall Completion</span>
+      <AnimatedCard index={5}>
+        <Card className="overflow-hidden">
+          <div className="h-1 w-full bg-gradient-to-r from-brand-teal via-brand-blue to-brand-teal" />
+          <CardContent className="py-5 px-6">
+            <div className="flex items-center justify-between mb-3">
+              <div className="flex items-center gap-2.5">
+                <div className="rounded-lg bg-brand-blue/10 p-2 dark:bg-brand-blue/20">
+                  <BarChart3 className="h-4 w-4 text-brand-blue dark:text-brand-teal" />
+                </div>
+                <span className="text-sm font-semibold">Overall Completion</span>
+              </div>
+              <div className="flex items-baseline gap-1">
+                <span className="text-2xl font-bold tabular-nums text-brand-blue dark:text-brand-teal">
+                  {completionRate.toFixed(0)}%
+                </span>
+                <span className="text-xs text-muted-foreground ml-1">
+                  ({completedAssignments}/{totalAssignments})
+                </span>
+              </div>
             </div>
-            <span className="text-sm font-semibold tabular-nums">
-              {completedAssignments}/{totalAssignments} ({completionRate.toFixed(0)}%)
-            </span>
-          </div>
-          <Progress value={completionRate} className="h-2.5" />
-        </CardContent>
-      </Card>
+            <div className="relative h-3 w-full overflow-hidden rounded-full bg-muted/60">
+              <div
+                className="h-full rounded-full bg-gradient-to-r from-brand-teal to-brand-blue transition-all duration-500 ease-out"
+                style={{ width: `${completionRate}%` }}
+              />
+            </div>
+          </CardContent>
+        </Card>
+      </AnimatedCard>
 
-      {/* Main content — two column layout */}
+      {/* Main content -- two column layout */}
       <div className="grid gap-6 lg:grid-cols-12">
         {/* Left column */}
         <div className="lg:col-span-7 space-y-6">
           {/* Recent Assignments */}
-          <Card>
-            <CardHeader className="pb-3">
-              <div className="flex items-center justify-between">
-                <CardTitle className="text-lg">My Assignments</CardTitle>
-                <Button variant="ghost" size="sm" asChild>
-                  <Link href="/jury/assignments">
-                    View all
-                    <ArrowRight className="ml-1 h-3 w-3" />
-                  </Link>
-                </Button>
-              </div>
-            </CardHeader>
-            <CardContent>
-              {recentAssignments.length > 0 ? (
-                <div className="divide-y">
-                  {recentAssignments.map((assignment) => {
-                    const evaluation = assignment.evaluation
-                    const isCompleted = evaluation?.status === 'SUBMITTED'
-                    const isDraft = evaluation?.status === 'DRAFT'
-                    const isVotingOpen =
-                      assignment.round.status === 'ACTIVE' &&
-                      assignment.round.votingStartAt &&
-                      assignment.round.votingEndAt &&
-                      new Date(assignment.round.votingStartAt) <= now &&
-                      new Date(assignment.round.votingEndAt) >= now
+          <AnimatedCard index={6}>
+            <Card>
+              <CardHeader className="pb-3">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2.5">
+                    <div className="rounded-lg bg-brand-blue/10 p-1.5 dark:bg-brand-blue/20">
+                      <ClipboardList className="h-4 w-4 text-brand-blue dark:text-brand-teal" />
+                    </div>
+                    <CardTitle className="text-lg">My Assignments</CardTitle>
+                  </div>
+                  <Button variant="ghost" size="sm" asChild className="text-brand-teal hover:text-brand-blue">
+                    <Link href="/jury/assignments">
+                      View all
+                      <ArrowRight className="ml-1 h-3 w-3" />
+                    </Link>
+                  </Button>
+                </div>
+              </CardHeader>
+              <CardContent>
+                {recentAssignments.length > 0 ? (
+                  <div className="space-y-1">
+                    {recentAssignments.map((assignment, idx) => {
+                      const evaluation = assignment.evaluation
+                      const isCompleted = evaluation?.status === 'SUBMITTED'
+                      const isDraft = evaluation?.status === 'DRAFT'
+                      const isVotingOpen =
+                        assignment.round.status === 'ACTIVE' &&
+                        assignment.round.votingStartAt &&
+                        assignment.round.votingEndAt &&
+                        new Date(assignment.round.votingStartAt) <= now &&
+                        new Date(assignment.round.votingEndAt) >= now
 
-                    return (
-                      <div
-                        key={assignment.id}
-                        className="flex items-center justify-between gap-3 py-3 first:pt-0 last:pb-0"
-                      >
-                        <Link
-                          href={`/jury/projects/${assignment.project.id}`}
-                          className="flex-1 min-w-0 group"
+                      return (
+                        <div
+                          key={assignment.id}
+                          className={cn(
+                            'flex items-center justify-between gap-3 py-3 px-3 -mx-3 rounded-lg transition-colors duration-150',
+                            'hover:bg-muted/50',
+                            idx !== recentAssignments.length - 1 && 'border-b border-border/50',
+                          )}
                         >
-                          <p className="text-sm font-medium truncate group-hover:text-primary group-hover:underline transition-colors">
-                            {assignment.project.title}
-                          </p>
-                          <div className="flex items-center gap-2 mt-0.5">
-                            <span className="text-xs text-muted-foreground truncate">
-                              {assignment.project.teamName}
-                            </span>
-                            <Badge variant="secondary" className="text-[10px] px-1.5 py-0">
-                              {assignment.round.name}
-                            </Badge>
+                          <Link
+                            href={`/jury/projects/${assignment.project.id}`}
+                            className="flex-1 min-w-0 group"
+                          >
+                            <p className="text-sm font-medium truncate group-hover:text-brand-blue dark:group-hover:text-brand-teal transition-colors">
+                              {assignment.project.title}
+                            </p>
+                            <div className="flex items-center gap-2 mt-1">
+                              <span className="text-xs text-muted-foreground truncate">
+                                {assignment.project.teamName}
+                              </span>
+                              <Badge variant="secondary" className="text-[10px] px-1.5 py-0 bg-brand-blue/5 text-brand-blue/80 dark:bg-brand-teal/10 dark:text-brand-teal/80 border-0">
+                                {assignment.round.name}
+                              </Badge>
+                            </div>
+                          </Link>
+                          <div className="flex items-center gap-2 shrink-0">
+                            {isCompleted ? (
+                              <Badge variant="success" className="text-xs">
+                                <CheckCircle2 className="mr-1 h-3 w-3" />
+                                Done
+                              </Badge>
+                            ) : isDraft ? (
+                              <Badge variant="warning" className="text-xs">
+                                <Clock className="mr-1 h-3 w-3" />
+                                Draft
+                              </Badge>
+                            ) : (
+                              <Badge variant="secondary" className="text-xs">Pending</Badge>
+                            )}
+                            {isCompleted ? (
+                              <Button variant="ghost" size="sm" asChild className="h-7 px-2">
+                                <Link href={`/jury/projects/${assignment.project.id}/evaluation`}>
+                                  View
+                                </Link>
+                              </Button>
+                            ) : isVotingOpen ? (
+                              <Button size="sm" asChild className="h-7 px-3 bg-brand-blue hover:bg-brand-blue-light shadow-sm">
+                                <Link href={`/jury/projects/${assignment.project.id}/evaluate`}>
+                                  {isDraft ? 'Continue' : 'Evaluate'}
+                                </Link>
+                              </Button>
+                            ) : (
+                              <Button variant="ghost" size="sm" asChild className="h-7 px-2">
+                                <Link href={`/jury/projects/${assignment.project.id}`}>
+                                  View
+                                </Link>
+                              </Button>
+                            )}
                           </div>
-                        </Link>
-                        <div className="flex items-center gap-2 shrink-0">
-                          {isCompleted ? (
-                            <Badge variant="success" className="text-xs">
-                              <CheckCircle2 className="mr-1 h-3 w-3" />
-                              Done
-                            </Badge>
-                          ) : isDraft ? (
-                            <Badge variant="warning" className="text-xs">
-                              <Clock className="mr-1 h-3 w-3" />
-                              Draft
-                            </Badge>
-                          ) : (
-                            <Badge variant="secondary" className="text-xs">Pending</Badge>
-                          )}
-                          {isCompleted ? (
-                            <Button variant="ghost" size="sm" asChild className="h-7 px-2">
-                              <Link href={`/jury/projects/${assignment.project.id}/evaluation`}>
-                                View
-                              </Link>
-                            </Button>
-                          ) : isVotingOpen ? (
-                            <Button size="sm" asChild className="h-7 px-2">
-                              <Link href={`/jury/projects/${assignment.project.id}/evaluate`}>
-                                {isDraft ? 'Continue' : 'Evaluate'}
-                              </Link>
-                            </Button>
-                          ) : (
-                            <Button variant="ghost" size="sm" asChild className="h-7 px-2">
-                              <Link href={`/jury/projects/${assignment.project.id}`}>
-                                View
-                              </Link>
-                            </Button>
-                          )}
                         </div>
-                      </div>
-                    )
-                  })}
-                </div>
-              ) : (
-                <div className="flex flex-col items-center justify-center py-8 text-center">
-                  <ClipboardList className="h-10 w-10 text-muted-foreground/30" />
-                  <p className="mt-2 text-sm text-muted-foreground">
-                    No assignments yet
-                  </p>
-                </div>
-              )}
-            </CardContent>
-          </Card>
+                      )
+                    })}
+                  </div>
+                ) : (
+                  <div className="flex flex-col items-center justify-center py-10 text-center">
+                    <div className="rounded-2xl bg-brand-teal/10 p-4 mb-3">
+                      <ClipboardList className="h-8 w-8 text-brand-teal/60" />
+                    </div>
+                    <p className="font-medium text-muted-foreground">
+                      No assignments yet
+                    </p>
+                    <p className="text-xs text-muted-foreground/70 mt-1 max-w-[240px]">
+                      Assignments will appear here once an administrator assigns projects to you.
+                    </p>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          </AnimatedCard>
 
           {/* Quick Actions */}
-          <Card>
-            <CardHeader className="pb-3">
-              <CardTitle className="text-lg">Quick Actions</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="grid gap-3 sm:grid-cols-2">
-                <Button variant="outline" className="justify-start h-auto py-3" asChild>
-                  <Link href="/jury/assignments">
-                    <ClipboardList className="mr-2 h-4 w-4 text-muted-foreground" />
+          <AnimatedCard index={7}>
+            <Card>
+              <CardHeader className="pb-3">
+                <div className="flex items-center gap-2.5">
+                  <div className="rounded-lg bg-brand-teal/10 p-1.5 dark:bg-brand-teal/20">
+                    <Zap className="h-4 w-4 text-brand-teal" />
+                  </div>
+                  <CardTitle className="text-lg">Quick Actions</CardTitle>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="grid gap-3 sm:grid-cols-2">
+                  <Link
+                    href="/jury/assignments"
+                    className="group flex items-center gap-4 rounded-xl border border-border/60 p-4 transition-all duration-200 hover:border-brand-blue/30 hover:bg-brand-blue/5 hover:-translate-y-0.5 hover:shadow-md dark:hover:border-brand-teal/30 dark:hover:bg-brand-teal/5"
+                  >
+                    <div className="rounded-xl bg-blue-50 p-3 transition-colors group-hover:bg-blue-100 dark:bg-blue-950/40 dark:group-hover:bg-blue-950/60">
+                      <ClipboardList className="h-5 w-5 text-blue-600 dark:text-blue-400" />
+                    </div>
                     <div className="text-left">
-                      <p className="font-medium">All Assignments</p>
-                      <p className="text-xs text-muted-foreground">View and manage evaluations</p>
+                      <p className="font-semibold text-sm group-hover:text-brand-blue dark:group-hover:text-brand-teal transition-colors">All Assignments</p>
+                      <p className="text-xs text-muted-foreground mt-0.5">View and manage evaluations</p>
                     </div>
                   </Link>
-                </Button>
-                <Button variant="outline" className="justify-start h-auto py-3" asChild>
-                  <Link href="/jury/compare">
-                    <GitCompare className="mr-2 h-4 w-4 text-muted-foreground" />
+                  <Link
+                    href="/jury/compare"
+                    className="group flex items-center gap-4 rounded-xl border border-border/60 p-4 transition-all duration-200 hover:border-brand-teal/30 hover:bg-brand-teal/5 hover:-translate-y-0.5 hover:shadow-md"
+                  >
+                    <div className="rounded-xl bg-teal-50 p-3 transition-colors group-hover:bg-teal-100 dark:bg-teal-950/40 dark:group-hover:bg-teal-950/60">
+                      <GitCompare className="h-5 w-5 text-brand-teal" />
+                    </div>
                     <div className="text-left">
-                      <p className="font-medium">Compare Projects</p>
-                      <p className="text-xs text-muted-foreground">Side-by-side comparison</p>
+                      <p className="font-semibold text-sm group-hover:text-brand-teal transition-colors">Compare Projects</p>
+                      <p className="text-xs text-muted-foreground mt-0.5">Side-by-side comparison</p>
                     </div>
                   </Link>
-                </Button>
-              </div>
-            </CardContent>
-          </Card>
+                </div>
+              </CardContent>
+            </Card>
+          </AnimatedCard>
         </div>
 
         {/* Right column */}
         <div className="lg:col-span-5 space-y-6">
           {/* Active Rounds */}
           {activeRounds.length > 0 && (
-            <Card>
-              <CardHeader className="pb-3">
-                <CardTitle className="text-lg">Active Voting Rounds</CardTitle>
-                <CardDescription>
-                  Rounds currently open for evaluation
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                {activeRounds.map(({ round, assignments: roundAssignments }) => {
-                  const roundCompleted = roundAssignments.filter(
-                    (a) => a.evaluation?.status === 'SUBMITTED'
-                  ).length
-                  const roundTotal = roundAssignments.length
-                  const roundProgress =
-                    roundTotal > 0 ? (roundCompleted / roundTotal) * 100 : 0
-                  const isAlmostDone = roundProgress >= 80
-                  const deadline = graceByRound.get(round.id) ?? (round.votingEndAt ? new Date(round.votingEndAt) : null)
-                  const isUrgent = deadline && (deadline.getTime() - now.getTime()) < 24 * 60 * 60 * 1000
+            <AnimatedCard index={8}>
+              <Card className="overflow-hidden">
+                <div className="h-1 w-full bg-gradient-to-r from-brand-blue via-brand-teal to-brand-blue" />
+                <CardHeader className="pb-3">
+                  <div className="flex items-center gap-2.5">
+                    <div className="rounded-lg bg-brand-blue/10 p-1.5 dark:bg-brand-blue/20">
+                      <Waves className="h-4 w-4 text-brand-blue dark:text-brand-teal" />
+                    </div>
+                    <div>
+                      <CardTitle className="text-lg">Active Voting Rounds</CardTitle>
+                      <CardDescription className="mt-0.5">
+                        Rounds currently open for evaluation
+                      </CardDescription>
+                    </div>
+                  </div>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  {activeRounds.map(({ round, assignments: roundAssignments }) => {
+                    const roundCompleted = roundAssignments.filter(
+                      (a) => a.evaluation?.status === 'SUBMITTED'
+                    ).length
+                    const roundTotal = roundAssignments.length
+                    const roundProgress =
+                      roundTotal > 0 ? (roundCompleted / roundTotal) * 100 : 0
+                    const isAlmostDone = roundProgress >= 80
+                    const deadline = graceByRound.get(round.id) ?? (round.votingEndAt ? new Date(round.votingEndAt) : null)
+                    const isUrgent = deadline && (deadline.getTime() - now.getTime()) < 24 * 60 * 60 * 1000
 
-                  return (
-                    <div
-                      key={round.id}
-                      className={cn(
-                        'rounded-lg border p-4 space-y-3 transition-all hover:-translate-y-0.5 hover:shadow-md',
-                        isUrgent && 'border-red-200 bg-red-50/50 dark:border-red-900 dark:bg-red-950/20'
-                      )}
-                    >
-                      <div className="flex items-start justify-between">
-                        <div>
-                          <h3 className="font-medium">{round.name}</h3>
-                          <p className="text-xs text-muted-foreground">
-                            {round.program.name} &middot; {round.program.year}
-                          </p>
-                        </div>
-                        {isAlmostDone ? (
-                          <Badge variant="success">Almost done</Badge>
-                        ) : (
-                          <Badge variant="default">Active</Badge>
+                    return (
+                      <div
+                        key={round.id}
+                        className={cn(
+                          'rounded-xl border p-4 space-y-3 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md',
+                          isUrgent
+                            ? 'border-red-200 bg-red-50/50 dark:border-red-900 dark:bg-red-950/20'
+                            : 'border-border/60 bg-muted/20 dark:bg-muted/10'
                         )}
-                      </div>
-
-                      <div className="space-y-1">
-                        <div className="flex justify-between text-sm">
-                          <span className="text-muted-foreground">Progress</span>
-                          <span className="font-medium tabular-nums">
-                            {roundCompleted}/{roundTotal}
-                          </span>
-                        </div>
-                        <Progress value={roundProgress} className="h-2" />
-                      </div>
-
-                      {deadline && (
-                        <div className="flex items-center gap-2 flex-wrap">
-                          <CountdownTimer
-                            deadline={deadline}
-                            label="Deadline:"
-                          />
-                          {round.votingEndAt && (
-                            <span className="text-xs text-muted-foreground">
-                              ({formatDateOnly(round.votingEndAt)})
-                            </span>
+                      >
+                        <div className="flex items-start justify-between">
+                          <div>
+                            <h3 className="font-semibold text-brand-blue dark:text-brand-teal">{round.name}</h3>
+                            <p className="text-xs text-muted-foreground mt-0.5">
+                              {round.program.name} &middot; {round.program.year}
+                            </p>
+                          </div>
+                          {isAlmostDone ? (
+                            <Badge variant="success">Almost done</Badge>
+                          ) : (
+                            <Badge variant="info">Active</Badge>
                           )}
                         </div>
-                      )}
 
-                      <Button asChild size="sm" className="w-full">
-                        <Link href={`/jury/assignments?round=${round.id}`}>
-                          View Assignments
-                          <ArrowRight className="ml-2 h-4 w-4" />
-                        </Link>
-                      </Button>
-                    </div>
-                  )
-                })}
-              </CardContent>
-            </Card>
+                        <div className="space-y-1.5">
+                          <div className="flex justify-between text-sm">
+                            <span className="text-muted-foreground">Progress</span>
+                            <span className="font-semibold tabular-nums">
+                              {roundCompleted}/{roundTotal}
+                            </span>
+                          </div>
+                          <div className="relative h-2.5 w-full overflow-hidden rounded-full bg-muted/60">
+                            <div
+                              className="h-full rounded-full bg-gradient-to-r from-brand-teal to-brand-blue transition-all duration-500 ease-out"
+                              style={{ width: `${roundProgress}%` }}
+                            />
+                          </div>
+                        </div>
+
+                        {deadline && (
+                          <div className="flex items-center gap-2 flex-wrap">
+                            <CountdownTimer
+                              deadline={deadline}
+                              label="Deadline:"
+                            />
+                            {round.votingEndAt && (
+                              <span className="text-xs text-muted-foreground">
+                                ({formatDateOnly(round.votingEndAt)})
+                              </span>
+                            )}
+                          </div>
+                        )}
+
+                        <Button asChild size="sm" className="w-full bg-brand-blue hover:bg-brand-blue-light shadow-sm">
+                          <Link href={`/jury/assignments?round=${round.id}`}>
+                            View Assignments
+                            <ArrowRight className="ml-2 h-4 w-4" />
+                          </Link>
+                        </Button>
+                      </div>
+                    )
+                  })}
+                </CardContent>
+              </Card>
+            </AnimatedCard>
           )}
 
           {/* No active rounds */}
           {activeRounds.length === 0 && totalAssignments > 0 && (
-            <Card>
-              <CardContent className="flex flex-col items-center justify-center py-8 text-center">
-                <div className="rounded-full bg-muted p-3 mb-3">
-                  <Clock className="h-6 w-6 text-muted-foreground" />
-                </div>
-                <p className="font-medium">No active voting rounds</p>
-                <p className="text-sm text-muted-foreground mt-1">
-                  Check back later when a voting window opens
-                </p>
-              </CardContent>
-            </Card>
+            <AnimatedCard index={8}>
+              <Card>
+                <CardContent className="flex flex-col items-center justify-center py-10 text-center">
+                  <div className="rounded-2xl bg-brand-teal/10 p-4 mb-3 dark:bg-brand-teal/20">
+                    <Clock className="h-7 w-7 text-brand-teal/70" />
+                  </div>
+                  <p className="font-semibold text-sm">No active voting rounds</p>
+                  <p className="text-xs text-muted-foreground mt-1 max-w-[220px]">
+                    Check back later when a voting window opens
+                  </p>
+                </CardContent>
+              </Card>
+            </AnimatedCard>
           )}
 
           {/* Completion Summary by Round */}
           {Object.keys(assignmentsByRound).length > 0 && (
-            <Card>
-              <CardHeader className="pb-3">
-                <CardTitle className="text-lg">Round Summary</CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-3">
-                {Object.values(assignmentsByRound).map(({ round, assignments: roundAssignments }) => {
-                  const done = roundAssignments.filter((a) => a.evaluation?.status === 'SUBMITTED').length
-                  const total = roundAssignments.length
-                  const pct = total > 0 ? Math.round((done / total) * 100) : 0
-                  return (
-                    <div key={round.id} className="space-y-1.5">
-                      <div className="flex items-center justify-between text-sm">
-                        <span className="font-medium truncate">{round.name}</span>
-                        <span className="text-muted-foreground tabular-nums shrink-0 ml-2">
-                          {done}/{total} ({pct}%)
-                        </span>
-                      </div>
-                      <Progress value={pct} className="h-1.5" />
+            <AnimatedCard index={9}>
+              <Card>
+                <CardHeader className="pb-3">
+                  <div className="flex items-center gap-2.5">
+                    <div className="rounded-lg bg-brand-teal/10 p-1.5 dark:bg-brand-teal/20">
+                      <BarChart3 className="h-4 w-4 text-brand-teal" />
                     </div>
-                  )
-                })}
-              </CardContent>
-            </Card>
+                    <CardTitle className="text-lg">Round Summary</CardTitle>
+                  </div>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  {Object.values(assignmentsByRound).map(({ round, assignments: roundAssignments }) => {
+                    const done = roundAssignments.filter((a) => a.evaluation?.status === 'SUBMITTED').length
+                    const total = roundAssignments.length
+                    const pct = total > 0 ? Math.round((done / total) * 100) : 0
+                    return (
+                      <div key={round.id} className="space-y-2">
+                        <div className="flex items-center justify-between text-sm">
+                          <span className="font-medium truncate">{round.name}</span>
+                          <div className="flex items-baseline gap-1 shrink-0 ml-2">
+                            <span className="font-bold tabular-nums text-brand-blue dark:text-brand-teal">{pct}%</span>
+                            <span className="text-xs text-muted-foreground">({done}/{total})</span>
+                          </div>
+                        </div>
+                        <div className="relative h-2 w-full overflow-hidden rounded-full bg-muted/60">
+                          <div
+                            className="h-full rounded-full bg-gradient-to-r from-brand-teal to-brand-blue transition-all duration-500 ease-out"
+                            style={{ width: `${pct}%` }}
+                          />
+                        </div>
+                      </div>
+                    )
+                  })}
+                </CardContent>
+              </Card>
+            </AnimatedCard>
           )}
         </div>
       </div>
 
       {/* No assignments at all */}
       {totalAssignments === 0 && (
-        <Card>
-          <CardContent className="flex flex-col items-center justify-center py-12 text-center">
-            <div className="rounded-full bg-muted p-4 mb-4">
-              <ClipboardList className="h-8 w-8 text-muted-foreground" />
-            </div>
-            <p className="text-lg font-medium">No assignments yet</p>
-            <p className="text-sm text-muted-foreground mt-1 max-w-sm">
-              You&apos;ll see your project assignments here once they&apos;re assigned to you by an administrator.
-            </p>
-          </CardContent>
-        </Card>
+        <AnimatedCard index={1}>
+          <Card className="overflow-hidden">
+            <div className="h-1 w-full bg-gradient-to-r from-brand-teal/40 via-brand-blue/40 to-brand-teal/40" />
+            <CardContent className="flex flex-col items-center justify-center py-14 text-center">
+              <div className="rounded-2xl bg-gradient-to-br from-brand-teal/10 to-brand-blue/10 p-5 mb-4 dark:from-brand-teal/20 dark:to-brand-blue/20">
+                <ClipboardList className="h-10 w-10 text-brand-teal/60" />
+              </div>
+              <p className="text-lg font-semibold">No assignments yet</p>
+              <p className="text-sm text-muted-foreground mt-1.5 max-w-sm">
+                You&apos;ll see your project assignments here once they&apos;re assigned to you by an administrator.
+              </p>
+            </CardContent>
+          </Card>
+        </AnimatedCard>
       )}
     </>
   )
@@ -552,34 +643,42 @@ async function JuryDashboardContent() {
 function DashboardSkeleton() {
   return (
     <>
+      {/* Stats skeleton */}
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
         {[...Array(4)].map((_, i) => (
-          <Card key={i}>
-            <CardContent className="flex items-center gap-4 py-4">
-              <Skeleton className="h-10 w-10 rounded-full" />
+          <Card key={i} className="border-l-4 border-l-muted">
+            <CardContent className="flex items-center gap-4 py-5 px-5">
+              <Skeleton className="h-11 w-11 rounded-xl" />
               <div className="space-y-2">
-                <Skeleton className="h-6 w-12" />
-                <Skeleton className="h-4 w-20" />
+                <Skeleton className="h-7 w-12" />
+                <Skeleton className="h-4 w-24" />
               </div>
             </CardContent>
           </Card>
         ))}
       </div>
-      <Card>
-        <CardContent className="py-4">
-          <Skeleton className="h-2.5 w-full" />
+      {/* Progress bar skeleton */}
+      <Card className="overflow-hidden">
+        <div className="h-1 w-full bg-muted" />
+        <CardContent className="py-5 px-6">
+          <div className="flex items-center justify-between mb-3">
+            <Skeleton className="h-4 w-36" />
+            <Skeleton className="h-7 w-16" />
+          </div>
+          <Skeleton className="h-3 w-full rounded-full" />
         </CardContent>
       </Card>
+      {/* Two-column skeleton */}
       <div className="grid gap-6 lg:grid-cols-12">
         <div className="lg:col-span-7">
           <Card>
-            <CardHeader>
-              <Skeleton className="h-5 w-32" />
+            <CardHeader className="pb-3">
+              <Skeleton className="h-5 w-40" />
             </CardHeader>
             <CardContent className="space-y-4">
               {[...Array(4)].map((_, i) => (
-                <div key={i} className="flex items-center justify-between">
-                  <div className="space-y-1.5">
+                <div key={i} className="flex items-center justify-between py-2">
+                  <div className="space-y-2">
                     <Skeleton className="h-4 w-48" />
                     <Skeleton className="h-3 w-32" />
                   </div>
@@ -589,13 +688,27 @@ function DashboardSkeleton() {
             </CardContent>
           </Card>
         </div>
-        <div className="lg:col-span-5">
-          <Card>
-            <CardHeader>
-              <Skeleton className="h-5 w-40" />
+        <div className="lg:col-span-5 space-y-6">
+          <Card className="overflow-hidden">
+            <div className="h-1 w-full bg-muted" />
+            <CardHeader className="pb-3">
+              <Skeleton className="h-5 w-44" />
             </CardHeader>
             <CardContent className="space-y-4">
-              <Skeleton className="h-24 w-full rounded-lg" />
+              <Skeleton className="h-28 w-full rounded-xl" />
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader className="pb-3">
+              <Skeleton className="h-5 w-36" />
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {[...Array(2)].map((_, i) => (
+                <div key={i} className="space-y-2">
+                  <Skeleton className="h-4 w-full" />
+                  <Skeleton className="h-2 w-full rounded-full" />
+                </div>
+              ))}
             </CardContent>
           </Card>
         </div>
@@ -610,13 +723,16 @@ export default async function JuryDashboardPage() {
   return (
     <div className="space-y-6">
       {/* Header */}
-      <div>
-        <h1 className="text-2xl font-semibold tracking-tight">
-          {getGreeting()}, {session?.user?.name || 'Juror'}
-        </h1>
-        <p className="text-muted-foreground">
-          Here&apos;s an overview of your evaluation progress
-        </p>
+      <div className="relative">
+        <div className="absolute -top-6 -left-6 -right-6 h-32 bg-gradient-to-b from-brand-blue/[0.03] to-transparent dark:from-brand-blue/[0.06] pointer-events-none rounded-xl" />
+        <div className="relative">
+          <h1 className="text-2xl font-bold tracking-tight text-brand-blue dark:text-foreground">
+            {getGreeting()}, {session?.user?.name || 'Juror'}
+          </h1>
+          <p className="text-muted-foreground mt-0.5">
+            Here&apos;s an overview of your evaluation progress
+          </p>
+        </div>
       </div>
 
       {/* Content */}

src/app/(observer)/observer/page.tsx

@@ -1,346 +1,12 @@
 import type { Metadata } from 'next'
-import { Suspense } from 'react'
 import { auth } from '@/lib/auth'
-import { prisma } from '@/lib/prisma'
+import { ObserverDashboardContent } from '@/components/observer/observer-dashboard-content'
 
 export const metadata: Metadata = { title: 'Observer Dashboard' }
 export const dynamic = 'force-dynamic'
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card'
-import { Badge } from '@/components/ui/badge'
-import { Progress } from '@/components/ui/progress'
-import { Skeleton } from '@/components/ui/skeleton'
-import {
-  FolderKanban,
-  ClipboardList,
-  Users,
-  CheckCircle2,
-  Eye,
-  BarChart3,
-} from 'lucide-react'
-import { cn, formatDateOnly } from '@/lib/utils'
-
-async function ObserverDashboardContent() {
-  const [
-    programCount,
-    activeRoundCount,
-    projectCount,
-    jurorCount,
-    evaluationStats,
-    recentRounds,
-    evaluationScores,
-  ] = await Promise.all([
-    prisma.program.count(),
-    prisma.round.count({ where: { status: 'ACTIVE' } }),
-    prisma.project.count(),
-    prisma.user.count({ where: { role: 'JURY_MEMBER', status: 'ACTIVE' } }),
-    prisma.evaluation.groupBy({
-      by: ['status'],
-      _count: true,
-    }),
-    prisma.round.findMany({
-      orderBy: { createdAt: 'desc' },
-      take: 5,
-      include: {
-        program: { select: { name: true, year: true } },
-        _count: {
-          select: {
-            projects: true,
-            assignments: true,
-          },
-        },
-        assignments: {
-          select: {
-            evaluation: { select: { status: true } },
-          },
-        },
-      },
-    }),
-    prisma.evaluation.findMany({
-      where: { status: 'SUBMITTED', globalScore: { not: null } },
-      select: { globalScore: true },
-    }),
-  ])
-
-  const submittedCount =
-    evaluationStats.find((e) => e.status === 'SUBMITTED')?._count || 0
-  const draftCount =
-    evaluationStats.find((e) => e.status === 'DRAFT')?._count || 0
-  const totalEvaluations = submittedCount + draftCount
-  const completionRate =
-    totalEvaluations > 0 ? (submittedCount / totalEvaluations) * 100 : 0
-
-  // Score distribution computation
-  const scores = evaluationScores.map(e => e.globalScore!).filter(s => s != null)
-  const buckets = [
-    { label: '9-10', min: 9, max: 10, color: 'bg-green-500' },
-    { label: '7-8', min: 7, max: 8.99, color: 'bg-emerald-400' },
-    { label: '5-6', min: 5, max: 6.99, color: 'bg-amber-400' },
-    { label: '3-4', min: 3, max: 4.99, color: 'bg-orange-400' },
-    { label: '1-2', min: 1, max: 2.99, color: 'bg-red-400' },
-  ]
-  const maxCount = Math.max(...buckets.map(b => scores.filter(s => s >= b.min && s <= b.max).length), 1)
-  const scoreDistribution = buckets.map(b => {
-    const count = scores.filter(s => s >= b.min && s <= b.max).length
-    return { ...b, count, percentage: (count / maxCount) * 100 }
-  })
-
-  return (
-    <>
-      {/* Observer Notice */}
-      <div className="rounded-lg border-2 border-blue-300 bg-blue-50 px-4 py-3">
-        <div className="flex items-center gap-3">
-          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-blue-100">
-            <Eye className="h-4 w-4 text-blue-600" />
-          </div>
-          <div>
-            <div className="flex items-center gap-2">
-              <p className="font-semibold text-blue-900">Observer Mode</p>
-              <Badge variant="outline" className="border-blue-300 text-blue-700 text-xs">
-                Read-Only
-              </Badge>
-            </div>
-            <p className="text-sm text-blue-700">
-              You have read-only access to view platform statistics and reports.
-            </p>
-          </div>
-        </div>
-      </div>
-
-      {/* Stats Grid */}
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-        <Card className="transition-all hover:shadow-md">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Programs</CardTitle>
-            <FolderKanban className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{programCount}</div>
-            <p className="text-xs text-muted-foreground">
-              {activeRoundCount} active round{activeRoundCount !== 1 ? 's' : ''}
-            </p>
-          </CardContent>
-        </Card>
-
-        <Card className="transition-all hover:shadow-md">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Projects</CardTitle>
-            <ClipboardList className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{projectCount}</div>
-            <p className="text-xs text-muted-foreground">Across all rounds</p>
-          </CardContent>
-        </Card>
-
-        <Card className="transition-all hover:shadow-md">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Jury Members</CardTitle>
-            <Users className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{jurorCount}</div>
-            <p className="text-xs text-muted-foreground">Active members</p>
-          </CardContent>
-        </Card>
-
-        <Card className="transition-all hover:shadow-md">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Evaluations</CardTitle>
-            <CheckCircle2 className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{submittedCount}</div>
-            <div className="mt-2">
-              <Progress value={completionRate} className="h-2" />
-              <p className="mt-1 text-xs text-muted-foreground">
-                {completionRate.toFixed(0)}% completion rate
-              </p>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Recent Rounds */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Recent Rounds</CardTitle>
-          <CardDescription>Overview of the latest voting rounds</CardDescription>
-        </CardHeader>
-        <CardContent>
-          {recentRounds.length === 0 ? (
-            <div className="flex flex-col items-center justify-center py-8 text-center">
-              <FolderKanban className="h-12 w-12 text-muted-foreground/50" />
-              <p className="mt-2 text-sm text-muted-foreground">
-                No rounds created yet
-              </p>
-            </div>
-          ) : (
-            <div className="space-y-4">
-              {recentRounds.map((round) => (
-                <div
-                  key={round.id}
-                  className="flex items-center justify-between rounded-lg border p-4 transition-all hover:shadow-sm"
-                >
-                  <div className="space-y-1">
-                    <div className="flex items-center gap-2">
-                      <p className="font-medium">{round.name}</p>
-                      <Badge
-                        variant={
-                          round.status === 'ACTIVE'
-                            ? 'default'
-                            : round.status === 'CLOSED'
-                              ? 'secondary'
-                              : 'outline'
-                        }
-                      >
-                        {round.status}
-                      </Badge>
-                    </div>
-                    <p className="text-sm text-muted-foreground">
-                      {round.program.year} Edition
-                    </p>
-                  </div>
-                  <div className="text-right text-sm">
-                    <p>{round._count.projects} projects</p>
-                    <p className="text-muted-foreground">
-                      {round._count.assignments} assignments
-                    </p>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </CardContent>
-      </Card>
-
-      {/* Score Distribution */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Score Distribution</CardTitle>
-          <CardDescription>Distribution of global scores across all evaluations</CardDescription>
-        </CardHeader>
-        <CardContent>
-          {scoreDistribution.length === 0 ? (
-            <div className="flex flex-col items-center justify-center py-8 text-center">
-              <BarChart3 className="h-12 w-12 text-muted-foreground/50" />
-              <p className="mt-2 text-sm text-muted-foreground">No completed evaluations yet</p>
-            </div>
-          ) : (
-            <div className="space-y-2">
-              {scoreDistribution.map((bucket) => (
-                <div key={bucket.label} className="flex items-center gap-3">
-                  <span className="text-sm w-16 text-right tabular-nums">{bucket.label}</span>
-                  <div className="flex-1 h-6 bg-muted rounded-full overflow-hidden">
-                    <div
-                      className={cn('h-full rounded-full transition-all', bucket.color)}
-                      style={{ width: `${bucket.percentage}%` }}
-                    />
-                  </div>
-                  <span className="text-sm tabular-nums w-8">{bucket.count}</span>
-                </div>
-              ))}
-            </div>
-          )}
-        </CardContent>
-      </Card>
-
-      {/* Jury Completion by Round */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Jury Completion by Round</CardTitle>
-          <CardDescription>Evaluation completion rate per round</CardDescription>
-        </CardHeader>
-        <CardContent>
-          {recentRounds.length === 0 ? (
-            <div className="flex flex-col items-center justify-center py-8 text-center">
-              <FolderKanban className="h-12 w-12 text-muted-foreground/50" />
-              <p className="mt-2 text-sm text-muted-foreground">No rounds available</p>
-            </div>
-          ) : (
-            <div className="space-y-4">
-              {recentRounds.map((round) => {
-                const submittedInRound = round.assignments.filter(a => a.evaluation?.status === 'SUBMITTED').length
-                const totalAssignments = round.assignments.length
-                const percent = totalAssignments > 0 ? Math.round((submittedInRound / totalAssignments) * 100) : 0
-                return (
-                  <div key={round.id} className="space-y-1.5">
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center gap-2">
-                        <span className="text-sm font-medium">{round.name}</span>
-                        <Badge variant={round.status === 'ACTIVE' ? 'default' : 'secondary'}>{round.status}</Badge>
-                      </div>
-                      <span className="text-sm font-semibold tabular-nums">{percent}%</span>
-                    </div>
-                    <Progress value={percent} className="h-2" />
-                    <p className="text-xs text-muted-foreground">{submittedInRound} of {totalAssignments} evaluations submitted</p>
-                  </div>
-                )
-              })}
-            </div>
-          )}
-        </CardContent>
-      </Card>
-    </>
-  )
-}
-
-function DashboardSkeleton() {
-  return (
-    <>
-      <Skeleton className="h-20 w-full" />
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-        {[...Array(4)].map((_, i) => (
-          <Card key={i}>
-            <CardHeader className="space-y-0 pb-2">
-              <Skeleton className="h-4 w-20" />
-            </CardHeader>
-            <CardContent>
-              <Skeleton className="h-8 w-16" />
-              <Skeleton className="mt-2 h-3 w-24" />
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-      <Card>
-        <CardHeader>
-          <Skeleton className="h-6 w-32" />
-          <Skeleton className="h-4 w-48" />
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-4">
-            {[...Array(3)].map((_, i) => (
-              <Skeleton key={i} className="h-20 w-full" />
-            ))}
-          </div>
-        </CardContent>
-      </Card>
-    </>
-  )
-}
 
 export default async function ObserverDashboardPage() {
   const session = await auth()
 
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div>
-        <h1 className="text-2xl font-semibold tracking-tight">Dashboard</h1>
-        <p className="text-muted-foreground">
-          Welcome, {session?.user?.name || 'Observer'}
-        </p>
-      </div>
-
-      {/* Content */}
-      <Suspense fallback={<DashboardSkeleton />}>
-        <ObserverDashboardContent />
-      </Suspense>
-    </div>
-  )
+  return <ObserverDashboardContent userName={session?.user?.name || undefined} />
 }

src/app/(observer)/observer/reports/page.tsx

@@ -38,9 +38,7 @@ import {
   GitCompare,
   UserCheck,
   Globe,
-  Printer,
 } from 'lucide-react'
-import { Button } from '@/components/ui/button'
 import { formatDateOnly } from '@/lib/utils'
 import {
   ScoreDistributionChart,
@@ -53,6 +51,7 @@ import {
   JurorConsistencyChart,
   DiversityMetricsChart,
 } from '@/components/charts'
+import { ExportPdfButton } from '@/components/shared/export-pdf-button'
 
 function OverviewTab({ selectedRoundId }: { selectedRoundId: string | null }) {
   const { data: programs, isLoading } = trpc.program.list.useQuery({ includeRounds: true })
@@ -608,14 +607,13 @@ export default function ObserverReportsPage() {
               Diversity
             </TabsTrigger>
           </TabsList>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => window.print()}
-          >
-            <Printer className="mr-2 h-4 w-4" />
-            Export PDF
-          </Button>
+          {selectedRoundId && (
+            <ExportPdfButton
+              roundId={selectedRoundId}
+              roundName={rounds.find((r) => r.id === selectedRoundId)?.name}
+              programName={rounds.find((r) => r.id === selectedRoundId)?.programName}
+            />
+          )}
         </div>
 
         <TabsContent value="overview">

src/app/globals.css

@@ -142,13 +142,13 @@
   :root {
     /* MOPC Brand Colors - mapped to shadcn/ui variables */
     --background: 0 0% 99.5%;
-    --foreground: 198 85% 18%;
+    --foreground: 220 13% 18%;
 
     --card: 0 0% 100%;
-    --card-foreground: 198 85% 18%;
+    --card-foreground: 220 13% 18%;
 
     --popover: 0 0% 100%;
-    --popover-foreground: 198 85% 18%;
+    --popover-foreground: 220 13% 18%;
 
     /* Primary - MOPC Red */
     --primary: 354 90% 47%;
@@ -156,14 +156,14 @@
 
     /* Secondary - Warm gray */
     --secondary: 30 6% 96%;
-    --secondary-foreground: 198 85% 18%;
+    --secondary-foreground: 220 13% 18%;
 
     --muted: 30 6% 96%;
-    --muted-foreground: 30 8% 38%;
+    --muted-foreground: 220 8% 46%;
 
-    /* Accent - MOPC Teal */
-    --accent: 194 25% 44%;
-    --accent-foreground: 0 0% 100%;
+    /* Accent - Light teal tint for hover states */
+    --accent: 194 30% 94%;
+    --accent-foreground: 220 13% 18%;
 
     --destructive: 0 84% 60%;
     --destructive-foreground: 0 0% 100%;
@@ -181,32 +181,32 @@
   }
 
   .dark {
-    --background: 198 85% 8%;
+    --background: 220 15% 8%;
     --foreground: 0 0% 98%;
 
-    --card: 198 85% 10%;
+    --card: 220 15% 10%;
     --card-foreground: 0 0% 98%;
 
-    --popover: 198 85% 10%;
+    --popover: 220 15% 10%;
     --popover-foreground: 0 0% 98%;
 
     --primary: 354 90% 50%;
     --primary-foreground: 0 0% 100%;
 
-    --secondary: 198 30% 18%;
+    --secondary: 220 15% 18%;
     --secondary-foreground: 0 0% 98%;
 
-    --muted: 198 30% 18%;
+    --muted: 220 15% 18%;
     --muted-foreground: 0 0% 64%;
 
-    --accent: 194 25% 50%;
-    --accent-foreground: 0 0% 100%;
+    --accent: 194 20% 18%;
+    --accent-foreground: 0 0% 98%;
 
     --destructive: 0 84% 55%;
     --destructive-foreground: 0 0% 100%;
 
-    --border: 198 30% 22%;
-    --input: 198 30% 22%;
+    --border: 220 15% 22%;
+    --input: 220 15% 22%;
     --ring: 354 90% 50%;
   }
 }