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>
This commit is contained in:
@@ -5,108 +5,23 @@ 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,
|
||||
addAllPageFooters,
|
||||
savePdf,
|
||||
} from '@/lib/pdf-generator'
|
||||
|
||||
interface PdfReportProps {
|
||||
roundId: string
|
||||
sections: string[]
|
||||
}
|
||||
|
||||
function buildReportHtml(reportData: Record<string, unknown>): string {
|
||||
const parts: string[] = []
|
||||
|
||||
parts.push(`<!DOCTYPE html><html><head>
|
||||
<title>Round Report - ${String(reportData.roundName || 'Report')}</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Montserrat', sans-serif; color: #1a1a1a; padding: 40px; max-width: 1000px; margin: 0 auto; }
|
||||
h1 { color: #053d57; font-size: 24px; font-weight: 700; margin-bottom: 8px; }
|
||||
h2 { color: #053d57; font-size: 18px; font-weight: 600; margin: 24px 0 12px; border-bottom: 2px solid #053d57; padding-bottom: 4px; }
|
||||
p { font-size: 12px; line-height: 1.6; margin-bottom: 8px; }
|
||||
.subtitle { color: #557f8c; font-size: 14px; margin-bottom: 24px; }
|
||||
.generated { color: #888; font-size: 10px; margin-bottom: 32px; }
|
||||
table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 11px; }
|
||||
th { background: #053d57; color: white; text-align: left; padding: 8px 12px; font-weight: 600; }
|
||||
td { padding: 6px 12px; border-bottom: 1px solid #e0e0e0; }
|
||||
tr:nth-child(even) td { background: #f8f8f8; }
|
||||
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 16px 0; }
|
||||
.stat-card { background: #f0f4f8; border-radius: 8px; padding: 16px; text-align: center; }
|
||||
.stat-value { font-size: 28px; font-weight: 700; color: #053d57; }
|
||||
.stat-label { font-size: 11px; color: #557f8c; margin-top: 4px; }
|
||||
@media print { body { padding: 20px; } .no-print { display: none; } }
|
||||
</style>
|
||||
</head><body>`)
|
||||
|
||||
parts.push(`<div class="no-print" style="margin-bottom: 20px;">
|
||||
<button onclick="window.print()" style="background: #053d57; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-family: Montserrat; font-weight: 600;">
|
||||
Print / Save as PDF
|
||||
</button>
|
||||
</div>`)
|
||||
|
||||
parts.push(`<h1>${escapeHtml(String(reportData.roundName || 'Round Report'))}</h1>`)
|
||||
parts.push(`<p class="subtitle">${escapeHtml(String(reportData.programName || ''))}</p>`)
|
||||
parts.push(`<p class="generated">Generated on ${new Date().toLocaleString()}</p>`)
|
||||
|
||||
const summary = reportData.summary as Record<string, unknown> | undefined
|
||||
if (summary) {
|
||||
parts.push(`<h2>Summary</h2><div class="stat-grid">`)
|
||||
parts.push(statCard(summary.totalProjects, 'Projects'))
|
||||
parts.push(statCard(summary.totalEvaluations, 'Evaluations'))
|
||||
parts.push(statCard(summary.averageScore != null ? Number(summary.averageScore).toFixed(1) : '--', 'Avg Score'))
|
||||
parts.push(statCard(summary.completionRate != null ? Number(summary.completionRate).toFixed(0) + '%' : '--', 'Completion'))
|
||||
parts.push(`</div>`)
|
||||
}
|
||||
|
||||
const rankings = reportData.rankings as Array<Record<string, unknown>> | undefined
|
||||
if (rankings && rankings.length > 0) {
|
||||
parts.push(`<h2>Project Rankings</h2><table><thead><tr>
|
||||
<th>#</th><th>Project</th><th>Team</th><th>Avg Score</th><th>Evaluations</th>
|
||||
</tr></thead><tbody>`)
|
||||
for (const p of rankings) {
|
||||
parts.push(`<tr>
|
||||
<td>${escapeHtml(String(p.rank ?? ''))}</td>
|
||||
<td>${escapeHtml(String(p.title ?? ''))}</td>
|
||||
<td>${escapeHtml(String(p.team ?? ''))}</td>
|
||||
<td>${Number(p.avgScore ?? 0).toFixed(2)}</td>
|
||||
<td>${String(p.evalCount ?? 0)}</td>
|
||||
</tr>`)
|
||||
}
|
||||
parts.push(`</tbody></table>`)
|
||||
}
|
||||
|
||||
const jurorStats = reportData.jurorStats as Array<Record<string, unknown>> | undefined
|
||||
if (jurorStats && jurorStats.length > 0) {
|
||||
parts.push(`<h2>Juror Statistics</h2><table><thead><tr>
|
||||
<th>Juror</th><th>Assigned</th><th>Completed</th><th>Completion %</th><th>Avg Score Given</th>
|
||||
</tr></thead><tbody>`)
|
||||
for (const j of jurorStats) {
|
||||
parts.push(`<tr>
|
||||
<td>${escapeHtml(String(j.name ?? ''))}</td>
|
||||
<td>${String(j.assigned ?? 0)}</td>
|
||||
<td>${String(j.completed ?? 0)}</td>
|
||||
<td>${Number(j.completionRate ?? 0).toFixed(0)}%</td>
|
||||
<td>${Number(j.avgScore ?? 0).toFixed(2)}</td>
|
||||
</tr>`)
|
||||
}
|
||||
parts.push(`</tbody></table>`)
|
||||
}
|
||||
|
||||
parts.push(`</body></html>`)
|
||||
return parts.join('')
|
||||
}
|
||||
|
||||
function escapeHtml(str: string): string {
|
||||
return str
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
}
|
||||
|
||||
function statCard(value: unknown, label: string): string {
|
||||
return `<div class="stat-card"><div class="stat-value">${escapeHtml(String(value ?? 0))}</div><div class="stat-label">${escapeHtml(label)}</div></div>`
|
||||
}
|
||||
|
||||
export function PdfReportGenerator({ roundId, sections }: PdfReportProps) {
|
||||
const [generating, setGenerating] = useState(false)
|
||||
|
||||
@@ -117,6 +32,8 @@ export function PdfReportGenerator({ roundId, sections }: PdfReportProps) {
|
||||
|
||||
const handleGenerate = useCallback(async () => {
|
||||
setGenerating(true)
|
||||
toast.info('Generating PDF report...')
|
||||
|
||||
try {
|
||||
const result = await refetch()
|
||||
if (!result.data) {
|
||||
@@ -124,20 +41,113 @@ export function PdfReportGenerator({ roundId, sections }: PdfReportProps) {
|
||||
return
|
||||
}
|
||||
|
||||
const html = buildReportHtml(result.data as Record<string, unknown>)
|
||||
const blob = new Blob([html], { type: 'text/html;charset=utf-8' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const newWindow = window.open(url, '_blank')
|
||||
if (!newWindow) {
|
||||
toast.error('Pop-up blocked. Please allow pop-ups and try again.')
|
||||
URL.revokeObjectURL(url)
|
||||
return
|
||||
const data = result.data as Record<string, unknown>
|
||||
const rName = String(data.roundName || 'Report')
|
||||
const pName = 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
|
||||
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)
|
||||
}
|
||||
// Clean up after a delay
|
||||
setTimeout(() => URL.revokeObjectURL(url), 5000)
|
||||
toast.success('Report generated. Use the Print button or Ctrl+P to save as PDF.')
|
||||
} catch {
|
||||
toast.error('Failed to generate report')
|
||||
|
||||
// 4. Rankings
|
||||
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
|
||||
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. Footers
|
||||
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)
|
||||
}
|
||||
|
||||
@@ -213,17 +213,17 @@ function FilteringSettings({
|
||||
<Input
|
||||
id="minReviews"
|
||||
type="number"
|
||||
min="1"
|
||||
min="0"
|
||||
value={settings.autoEliminationMinReviews}
|
||||
onChange={(e) =>
|
||||
onChange({
|
||||
...settings,
|
||||
autoEliminationMinReviews: parseInt(e.target.value) || 1,
|
||||
autoEliminationMinReviews: parseInt(e.target.value) || 0,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Min reviews before auto-elimination applies
|
||||
Min reviews before auto-elimination applies (0 for AI-only filtering)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
476
src/components/observer/observer-dashboard-content.tsx
Normal file
476
src/components/observer/observer-dashboard-content.tsx
Normal file
@@ -0,0 +1,476 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
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 { Input } from '@/components/ui/input'
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { StatusBadge } from '@/components/shared/status-badge'
|
||||
import {
|
||||
FolderKanban,
|
||||
ClipboardList,
|
||||
Users,
|
||||
CheckCircle2,
|
||||
Eye,
|
||||
BarChart3,
|
||||
Search,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
} from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { useDebouncedCallback } from 'use-debounce'
|
||||
|
||||
const PER_PAGE_OPTIONS = [10, 20, 50]
|
||||
|
||||
export function ObserverDashboardContent({ userName }: { userName?: string }) {
|
||||
const [selectedRoundId, setSelectedRoundId] = useState<string>('all')
|
||||
const [search, setSearch] = useState('')
|
||||
const [debouncedSearch, setDebouncedSearch] = useState('')
|
||||
const [statusFilter, setStatusFilter] = useState<string>('all')
|
||||
const [page, setPage] = useState(1)
|
||||
const [perPage, setPerPage] = useState(20)
|
||||
|
||||
const debouncedSetSearch = useDebouncedCallback((value: string) => {
|
||||
setDebouncedSearch(value)
|
||||
setPage(1)
|
||||
}, 300)
|
||||
|
||||
const handleSearchChange = (value: string) => {
|
||||
setSearch(value)
|
||||
debouncedSetSearch(value)
|
||||
}
|
||||
|
||||
const handleRoundChange = (value: string) => {
|
||||
setSelectedRoundId(value)
|
||||
setPage(1)
|
||||
}
|
||||
|
||||
const handleStatusChange = (value: string) => {
|
||||
setStatusFilter(value)
|
||||
setPage(1)
|
||||
}
|
||||
|
||||
// Fetch programs/rounds for the filter dropdown
|
||||
const { data: programs } = trpc.program.list.useQuery({ includeRounds: true })
|
||||
|
||||
const rounds = programs?.flatMap((p) =>
|
||||
p.rounds.map((r) => ({
|
||||
id: r.id,
|
||||
name: r.name,
|
||||
programName: `${p.year} Edition`,
|
||||
status: r.status,
|
||||
}))
|
||||
) || []
|
||||
|
||||
// Fetch dashboard stats
|
||||
const roundIdParam = selectedRoundId !== 'all' ? selectedRoundId : undefined
|
||||
const { data: stats, isLoading: statsLoading } = trpc.analytics.getDashboardStats.useQuery(
|
||||
{ roundId: roundIdParam }
|
||||
)
|
||||
|
||||
// Fetch projects
|
||||
const { data: projectsData, isLoading: projectsLoading } = trpc.analytics.getAllProjects.useQuery({
|
||||
roundId: roundIdParam,
|
||||
search: debouncedSearch || undefined,
|
||||
status: statusFilter !== 'all' ? statusFilter : undefined,
|
||||
page,
|
||||
perPage,
|
||||
})
|
||||
|
||||
// Fetch recent rounds for jury completion
|
||||
const { data: recentRoundsData } = trpc.program.list.useQuery({ includeRounds: true })
|
||||
const recentRounds = recentRoundsData?.flatMap((p) =>
|
||||
p.rounds.map((r) => ({
|
||||
...r,
|
||||
programName: `${p.year} Edition`,
|
||||
}))
|
||||
)?.slice(0, 5) || []
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">Dashboard</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Welcome, {userName || 'Observer'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 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>
|
||||
|
||||
{/* Round Filter */}
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
|
||||
<label className="text-sm font-medium">Filter by Round:</label>
|
||||
<Select value={selectedRoundId} onValueChange={handleRoundChange}>
|
||||
<SelectTrigger className="w-full sm:w-[300px]">
|
||||
<SelectValue placeholder="All Rounds" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Rounds</SelectItem>
|
||||
{rounds.map((round) => (
|
||||
<SelectItem key={round.id} value={round.id}>
|
||||
{round.programName} - {round.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Stats Grid */}
|
||||
{statsLoading ? (
|
||||
<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>
|
||||
) : stats ? (
|
||||
<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">{stats.programCount}</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{stats.activeRoundCount} active round{stats.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">{stats.projectCount}</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{selectedRoundId !== 'all' ? 'In selected round' : '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">{stats.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">{stats.submittedEvaluations}</div>
|
||||
<div className="mt-2">
|
||||
<Progress value={stats.completionRate} className="h-2" />
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
{stats.completionRate}% completion rate
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* Projects Table */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>All Projects</CardTitle>
|
||||
<CardDescription>
|
||||
{projectsData ? `${projectsData.total} project${projectsData.total !== 1 ? 's' : ''} found` : 'Loading projects...'}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Search & Filter Bar */}
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search by title or team..."
|
||||
value={search}
|
||||
onChange={(e) => handleSearchChange(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
<Select value={statusFilter} onValueChange={handleStatusChange}>
|
||||
<SelectTrigger className="w-full sm:w-[180px]">
|
||||
<SelectValue placeholder="All Statuses" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Statuses</SelectItem>
|
||||
<SelectItem value="SUBMITTED">Submitted</SelectItem>
|
||||
<SelectItem value="ELIGIBLE">Eligible</SelectItem>
|
||||
<SelectItem value="ASSIGNED">Assigned</SelectItem>
|
||||
<SelectItem value="UNDER_REVIEW">Under Review</SelectItem>
|
||||
<SelectItem value="SHORTLISTED">Shortlisted</SelectItem>
|
||||
<SelectItem value="SEMIFINALIST">Semi-finalist</SelectItem>
|
||||
<SelectItem value="FINALIST">Finalist</SelectItem>
|
||||
<SelectItem value="WINNER">Winner</SelectItem>
|
||||
<SelectItem value="REJECTED">Rejected</SelectItem>
|
||||
<SelectItem value="WITHDRAWN">Withdrawn</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value={String(perPage)} onValueChange={(v) => { setPerPage(Number(v)); setPage(1) }}>
|
||||
<SelectTrigger className="w-full sm:w-[100px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{PER_PAGE_OPTIONS.map((n) => (
|
||||
<SelectItem key={n} value={String(n)}>{n} / page</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{projectsLoading ? (
|
||||
<div className="space-y-2">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Skeleton key={i} className="h-12 w-full" />
|
||||
))}
|
||||
</div>
|
||||
) : projectsData && projectsData.projects.length > 0 ? (
|
||||
<>
|
||||
{/* Desktop Table */}
|
||||
<div className="hidden md:block">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Title</TableHead>
|
||||
<TableHead>Team</TableHead>
|
||||
<TableHead>Round</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead className="text-right">Avg Score</TableHead>
|
||||
<TableHead className="text-right">Evaluations</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{projectsData.projects.map((project) => (
|
||||
<TableRow key={project.id}>
|
||||
<TableCell className="font-medium max-w-[250px] truncate">
|
||||
{project.title}
|
||||
</TableCell>
|
||||
<TableCell className="max-w-[150px] truncate">{project.teamName || '-'}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline" className="text-xs whitespace-nowrap">
|
||||
{project.roundName}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<StatusBadge status={project.status} />
|
||||
</TableCell>
|
||||
<TableCell className="text-right tabular-nums">
|
||||
{project.averageScore !== null
|
||||
? project.averageScore.toFixed(2)
|
||||
: '-'}
|
||||
</TableCell>
|
||||
<TableCell className="text-right tabular-nums">
|
||||
{project.evaluationCount}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* Mobile Cards */}
|
||||
<div className="space-y-3 md:hidden">
|
||||
{projectsData.projects.map((project) => (
|
||||
<Card key={project.id}>
|
||||
<CardContent className="pt-4 space-y-2">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<p className="font-medium text-sm leading-tight">{project.title}</p>
|
||||
<StatusBadge status={project.status} />
|
||||
</div>
|
||||
{project.teamName && (
|
||||
<p className="text-xs text-muted-foreground">{project.teamName}</p>
|
||||
)}
|
||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{project.roundName}
|
||||
</Badge>
|
||||
<div className="flex gap-3">
|
||||
<span>Score: {project.averageScore !== null ? project.averageScore.toFixed(2) : '-'}</span>
|
||||
<span>{project.evaluationCount} eval{project.evaluationCount !== 1 ? 's' : ''}</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{projectsData.totalPages > 1 && (
|
||||
<div className="flex items-center justify-between pt-2">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Page {projectsData.page} of {projectsData.totalPages}
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
||||
disabled={page <= 1}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setPage((p) => Math.min(projectsData.totalPages, p + 1))}
|
||||
disabled={page >= projectsData.totalPages}
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-center">
|
||||
<ClipboardList className="h-12 w-12 text-muted-foreground/50" />
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
{debouncedSearch || statusFilter !== 'all'
|
||||
? 'No projects match your filters'
|
||||
: 'No projects found'}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Score Distribution */}
|
||||
{stats && stats.scoreDistribution.some((b) => b.count > 0) && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Score Distribution</CardTitle>
|
||||
<CardDescription>Distribution of global scores across evaluations</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
{(() => {
|
||||
const maxCount = Math.max(...stats.scoreDistribution.map((b) => b.count), 1)
|
||||
const colors = ['bg-green-500', 'bg-emerald-400', 'bg-amber-400', 'bg-orange-400', 'bg-red-400']
|
||||
return stats.scoreDistribution.map((bucket, i) => (
|
||||
<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', colors[i])}
|
||||
style={{ width: `${maxCount > 0 ? (bucket.count / maxCount) * 100 : 0}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm tabular-nums w-8">{bucket.count}</span>
|
||||
</div>
|
||||
))
|
||||
})()}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Recent Rounds */}
|
||||
{recentRounds.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Recent Rounds</CardTitle>
|
||||
<CardDescription>Overview of the latest voting rounds</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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.programName}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right text-sm">
|
||||
<p>{round._count?.projects || 0} projects</p>
|
||||
<p className="text-muted-foreground">
|
||||
{round._count?.assignments || 0} assignments
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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)
|
||||
}
|
||||
|
||||
|
||||
191
src/components/shared/export-pdf-button.tsx
Normal file
191
src/components/shared/export-pdf-button.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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 })
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user