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/components/shared/csv-export-dialog.tsx

@@ -132,13 +132,16 @@ export function CsvExportDialog({
       ),
     ].join('\n')
 
-    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
+    const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' })
     const url = URL.createObjectURL(blob)
     const link = document.createElement('a')
     link.href = url
     link.download = `${filename}-${new Date().toISOString().split('T')[0]}.csv`
+    document.body.appendChild(link)
     link.click()
-    URL.revokeObjectURL(url)
+    document.body.removeChild(link)
+    // Delay revoking to ensure download starts before URL is invalidated
+    setTimeout(() => URL.revokeObjectURL(url), 1000)
     onOpenChange(false)
   }
 

src/components/shared/export-pdf-button.tsx

@@ -0,0 +1,191 @@
+'use client'
+
+import { useState, useCallback, type RefObject } from 'react'
+import { trpc } from '@/lib/trpc/client'
+import { Button } from '@/components/ui/button'
+import { FileDown, Loader2 } from 'lucide-react'
+import { toast } from 'sonner'
+import {
+  createReportDocument,
+  addCoverPage,
+  addPageBreak,
+  addHeader,
+  addSectionTitle,
+  addStatCards,
+  addTable,
+  addChartImage,
+  addAllPageFooters,
+  savePdf,
+} from '@/lib/pdf-generator'
+
+interface ExportPdfButtonProps {
+  roundId: string
+  roundName?: string
+  programName?: string
+  chartRefs?: Record<string, RefObject<HTMLDivElement | null>>
+  variant?: 'default' | 'outline' | 'secondary' | 'ghost'
+  size?: 'default' | 'sm' | 'lg' | 'icon'
+}
+
+export function ExportPdfButton({
+  roundId,
+  roundName,
+  programName,
+  chartRefs,
+  variant = 'outline',
+  size = 'sm',
+}: ExportPdfButtonProps) {
+  const [generating, setGenerating] = useState(false)
+
+  const { refetch } = trpc.export.getReportData.useQuery(
+    { roundId, sections: [] },
+    { enabled: false }
+  )
+
+  const handleGenerate = useCallback(async () => {
+    setGenerating(true)
+    toast.info('Generating PDF report...')
+
+    try {
+      const result = await refetch()
+      if (!result.data) {
+        toast.error('Failed to fetch report data')
+        return
+      }
+
+      const data = result.data as Record<string, unknown>
+      const rName = roundName || String(data.roundName || 'Report')
+      const pName = programName || String(data.programName || '')
+
+      // 1. Create document
+      const doc = await createReportDocument()
+
+      // 2. Cover page
+      await addCoverPage(doc, {
+        title: 'Round Report',
+        subtitle: `${pName} ${data.programYear ? `(${data.programYear})` : ''}`.trim(),
+        roundName: rName,
+        programName: pName,
+      })
+
+      // 3. Summary section
+      const summary = data.summary as Record<string, unknown> | undefined
+      if (summary) {
+        addPageBreak(doc)
+        await addHeader(doc, rName)
+        let y = addSectionTitle(doc, 'Summary', 28)
+
+        y = addStatCards(doc, [
+          { label: 'Projects', value: String(summary.projectCount ?? 0) },
+          { label: 'Evaluations', value: String(summary.evaluationCount ?? 0) },
+          {
+            label: 'Avg Score',
+            value: summary.averageScore != null
+              ? Number(summary.averageScore).toFixed(1)
+              : '--',
+          },
+          {
+            label: 'Completion',
+            value: summary.completionRate != null
+              ? `${Number(summary.completionRate).toFixed(0)}%`
+              : '--',
+          },
+        ], y)
+
+        // Capture chart images if refs provided
+        if (chartRefs) {
+          for (const [, ref] of Object.entries(chartRefs)) {
+            if (ref.current) {
+              try {
+                y = await addChartImage(doc, ref.current, y, { maxHeight: 90 })
+              } catch {
+                // Skip chart if capture fails
+              }
+            }
+          }
+        }
+      }
+
+      // 4. Rankings section
+      const rankings = data.rankings as Array<Record<string, unknown>> | undefined
+      if (rankings && rankings.length > 0) {
+        addPageBreak(doc)
+        await addHeader(doc, rName)
+        let y = addSectionTitle(doc, 'Project Rankings', 28)
+
+        const headers = ['#', 'Project', 'Team', 'Avg Score', 'Evaluations', 'Yes %']
+        const rows = rankings.map((r, i) => [
+          i + 1,
+          String(r.title ?? ''),
+          String(r.teamName ?? ''),
+          r.averageScore != null ? Number(r.averageScore).toFixed(2) : '-',
+          String(r.evaluationCount ?? 0),
+          r.yesPercentage != null ? `${Number(r.yesPercentage).toFixed(0)}%` : '-',
+        ])
+
+        y = addTable(doc, headers, rows, y)
+      }
+
+      // 5. Juror stats section
+      const jurorStats = data.jurorStats as Array<Record<string, unknown>> | undefined
+      if (jurorStats && jurorStats.length > 0) {
+        addPageBreak(doc)
+        await addHeader(doc, rName)
+        let y = addSectionTitle(doc, 'Juror Statistics', 28)
+
+        const headers = ['Juror', 'Assigned', 'Completed', 'Completion %', 'Avg Score']
+        const rows = jurorStats.map((j) => [
+          String(j.name ?? ''),
+          String(j.assigned ?? 0),
+          String(j.completed ?? 0),
+          `${Number(j.completionRate ?? 0).toFixed(0)}%`,
+          j.averageScore != null ? Number(j.averageScore).toFixed(2) : '-',
+        ])
+
+        y = addTable(doc, headers, rows, y)
+      }
+
+      // 6. Criteria breakdown
+      const criteriaBreakdown = data.criteriaBreakdown as Array<Record<string, unknown>> | undefined
+      if (criteriaBreakdown && criteriaBreakdown.length > 0) {
+        addPageBreak(doc)
+        await addHeader(doc, rName)
+        let y = addSectionTitle(doc, 'Criteria Breakdown', 28)
+
+        const headers = ['Criterion', 'Avg Score', 'Responses']
+        const rows = criteriaBreakdown.map((c) => [
+          String(c.label ?? ''),
+          c.averageScore != null ? Number(c.averageScore).toFixed(2) : '-',
+          String(c.count ?? 0),
+        ])
+
+        y = addTable(doc, headers, rows, y)
+      }
+
+      // 7. Footer on all pages
+      addAllPageFooters(doc)
+
+      // 8. Save
+      const dateStr = new Date().toISOString().split('T')[0]
+      savePdf(doc, `MOPC-Report-${rName.replace(/\s+/g, '-')}-${dateStr}.pdf`)
+
+      toast.success('PDF report downloaded successfully')
+    } catch (err) {
+      console.error('PDF generation error:', err)
+      toast.error('Failed to generate PDF report')
+    } finally {
+      setGenerating(false)
+    }
+  }, [refetch, roundName, programName, chartRefs])
+
+  return (
+    <Button variant={variant} size={size} onClick={handleGenerate} disabled={generating}>
+      {generating ? (
+        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+      ) : (
+        <FileDown className="mr-2 h-4 w-4" />
+      )}
+      {generating ? 'Generating...' : 'Export PDF Report'}
+    </Button>
+  )
+}

src/components/shared/notification-bell.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import Link from 'next/link'
 import type { Route } from 'next'
 import { usePathname } from 'next/navigation'
@@ -140,9 +140,11 @@ type Notification = {
 function NotificationItem({
   notification,
   onRead,
+  observeRef,
 }: {
   notification: Notification
   onRead: () => void
+  observeRef?: (el: HTMLDivElement | null) => void
 }) {
   const IconComponent = ICON_MAP[notification.icon || 'Bell'] || Bell
   const priorityStyle =
@@ -151,6 +153,8 @@ function NotificationItem({
 
   const content = (
     <div
+      ref={observeRef}
+      data-notification-id={notification.id}
       className={cn(
         'flex gap-3 p-3 hover:bg-muted/50 transition-colors cursor-pointer',
         !notification.isRead && 'bg-blue-50/50 dark:bg-blue-950/20'
@@ -250,17 +254,86 @@ export function NotificationBell() {
     onSuccess: () => refetch(),
   })
 
-  // Auto-mark all notifications as read when popover opens
-  useEffect(() => {
-    if (open && (countData ?? 0) > 0) {
-      markAllAsReadMutation.mutate()
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open])
+  const markBatchAsReadMutation = trpc.notification.markBatchAsRead.useMutation({
+    onSuccess: () => refetch(),
+  })
 
   const unreadCount = countData ?? 0
   const notifications = notificationData?.notifications ?? []
 
+  // Track unread notification IDs that have become visible
+  const pendingReadIds = useRef<Set<string>>(new Set())
+  const flushTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const observerRef = useRef<IntersectionObserver | null>(null)
+  const itemRefs = useRef<Map<string, HTMLDivElement>>(new Map())
+
+  // Flush pending read IDs in a batch
+  const flushPendingReads = useCallback(() => {
+    if (pendingReadIds.current.size === 0) return
+    const ids = Array.from(pendingReadIds.current)
+    pendingReadIds.current.clear()
+    markBatchAsReadMutation.mutate({ ids })
+  }, [markBatchAsReadMutation])
+
+  // Set up IntersectionObserver when popover opens
+  useEffect(() => {
+    if (!open) {
+      // Flush any remaining on close
+      if (flushTimer.current) clearTimeout(flushTimer.current)
+      flushPendingReads()
+      observerRef.current?.disconnect()
+      observerRef.current = null
+      return
+    }
+
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            const id = (entry.target as HTMLElement).dataset.notificationId
+            if (id) {
+              // Check if this notification is unread
+              const notif = notifications.find((n) => n.id === id)
+              if (notif && !notif.isRead) {
+                pendingReadIds.current.add(id)
+              }
+            }
+          }
+        }
+        // Debounce the batch call
+        if (pendingReadIds.current.size > 0) {
+          if (flushTimer.current) clearTimeout(flushTimer.current)
+          flushTimer.current = setTimeout(flushPendingReads, 500)
+        }
+      },
+      { threshold: 0.5 }
+    )
+
+    // Observe all currently tracked items
+    itemRefs.current.forEach((el) => observerRef.current?.observe(el))
+
+    return () => {
+      observerRef.current?.disconnect()
+      if (flushTimer.current) clearTimeout(flushTimer.current)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, notifications])
+
+  // Ref callback for each notification item
+  const getItemRef = useCallback(
+    (id: string) => (el: HTMLDivElement | null) => {
+      if (el) {
+        itemRefs.current.set(id, el)
+        observerRef.current?.observe(el)
+      } else {
+        const prev = itemRefs.current.get(id)
+        if (prev) observerRef.current?.unobserve(prev)
+        itemRefs.current.delete(id)
+      }
+    },
+    []
+  )
+
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
@@ -339,6 +412,7 @@ export function NotificationBell() {
               <NotificationItem
                 key={notification.id}
                 notification={notification}
+                observeRef={!notification.isRead ? getItemRef(notification.id) : undefined}
                 onRead={() => {
                   if (!notification.isRead) {
                     markAsReadMutation.mutate({ id: notification.id })

src/components/shared/status-badge.tsx

@@ -25,6 +25,7 @@ const STATUS_STYLES: Record<string, { variant: BadgeProps['variant']; className?
   COMPLETED: { variant: 'default', className: 'bg-emerald-500/10 text-emerald-700 border-emerald-200 dark:text-emerald-400' },
 
   // User statuses
+  NONE: { variant: 'secondary', className: 'bg-slate-500/10 text-slate-500 border-slate-200 dark:text-slate-400' },
   INVITED: { variant: 'secondary', className: 'bg-sky-500/10 text-sky-700 border-sky-200 dark:text-sky-400' },
   INACTIVE: { variant: 'secondary' },
   SUSPENDED: { variant: 'destructive' },
@@ -38,7 +39,7 @@ type StatusBadgeProps = {
 
 export function StatusBadge({ status, className, size = 'default' }: StatusBadgeProps) {
   const style = STATUS_STYLES[status] || { variant: 'secondary' as const }
-  const label = status.replace(/_/g, ' ')
+  const label = status === 'NONE' ? 'NOT INVITED' : status.replace(/_/g, ' ')
 
   return (
     <Badge