Add Tremor design tokens for Tailwind v4 compatibility

Tremor v3 expects its TW3 plugin to register tremor-* design tokens
(tremor-content, tremor-background, tremor-border, etc.). Since TW4
has no v3 plugin support, define these tokens manually in @theme and
safelist the utility classes via @source inline().

This fixes chart axis labels, grid lines, and tooltips rendering
without proper colors.

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

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

@@ -72,7 +72,7 @@ type Stage = {
   status: string
   roundType: string
   windowCloseAt: Date | null
-  _count: { projects: number; assignments: number }
+  _count: { projects: number; assignments: number; evaluations: number }
   programId: string
   programName: string
 }
@@ -288,7 +288,13 @@ function ProgressTab({ selectedValue, stages, stagesLoading, selectedRound }: {
                   {stages.map((stage) => {
                     const projects = stage._count.projects
                     const assignments = stage._count.assignments
-                    const rate = assignments > 0 && projects > 0 ? Math.round((assignments / projects) * 100) : 0
+                    const evaluations = stage._count.evaluations
+                    const isClosed = stage.status === 'ROUND_CLOSED' || stage.status === 'ROUND_ARCHIVED'
+                    const rate = isClosed
+                      ? 100
+                      : assignments > 0
+                        ? Math.min(100, Math.round((evaluations / assignments) * 100))
+                        : 0
                     return (
                       <TableRow key={stage.id}>
                         <TableCell>
@@ -335,7 +341,13 @@ function ProgressTab({ selectedValue, stages, stagesLoading, selectedRound }: {
             {stages.map((stage) => {
               const projects = stage._count.projects
               const assignments = stage._count.assignments
-              const rate = assignments > 0 && projects > 0 ? Math.round((assignments / projects) * 100) : 0
+              const evaluations = stage._count.evaluations
+              const isClosed = stage.status === 'ROUND_CLOSED' || stage.status === 'ROUND_ARCHIVED'
+              const rate = isClosed
+                ? 100
+                : assignments > 0
+                  ? Math.min(100, Math.round((evaluations / assignments) * 100))
+                  : 0
               return (
                 <Card key={stage.id}>
                   <CardContent className="pt-4 space-y-3">
@@ -770,7 +782,7 @@ function ReportsPageContent() {
   const { data: programs, isLoading: stagesLoading } = trpc.program.list.useQuery({ includeStages: true })
 
   const stages: Stage[] = programs?.flatMap(p =>
-    ((p.stages || []) as { id: string; name: string; status: string; roundType: string; windowCloseAt: Date | null; _count: { projects: number; assignments: number } }[]).map(s => ({
+    ((p.stages || []) as { id: string; name: string; status: string; roundType: string; windowCloseAt: Date | null; _count: { projects: number; assignments: number; evaluations: number } }[]).map(s => ({
       ...s,
       programId: p.id,
       programName: `${p.year} Edition`,

src/app/globals.css

@@ -43,10 +43,44 @@
 /* Source the JS config for extended theme values */
 @config "../../tailwind.config.ts";
 
-/* Tremor generates Tailwind utility classes dynamically (fill-blue-500, bg-emerald-500, etc.)
+/* Tremor generates Tailwind utility classes dynamically via template literals
-   Tailwind v4 needs to scan Tremor's compiled JS to include them in the output. */
+   (e.g. `fill-${color}-${shade}`). Tailwind v4's scanner cannot detect these,
+   so we must explicitly safelist every color+shade+property combination. */
 @source "../../node_modules/@tremor/react/dist/**/*.js";
 
+/* Safelist Tremor chart color utilities — all colors × key shades × fill/stroke/bg */
+@source inline("{fill,stroke,bg,text}-{blue,emerald,amber,violet,rose,indigo,sky,fuchsia,lime,orange,cyan,teal,purple,slate,gray,zinc,neutral,stone,red,yellow,green,pink}-{50,100,200,300,400,500,600,700,800,900,950}");
+@source inline("hover:{bg,text,border}-{blue,emerald,amber,violet,rose,indigo,sky,fuchsia,lime,orange,cyan,teal,purple,slate,gray,zinc,neutral,stone,red,yellow,green,pink}-{50,100,200,300,400,500,600,700,800,900,950}");
+@source inline("{border,ring}-{blue,emerald,amber,violet,rose,indigo,sky,fuchsia,lime,orange,cyan,teal,purple,slate,gray,zinc,neutral,stone,red,yellow,green,pink}-{50,100,200,300,400,500,600,700,800,900,950}");
+
+/* Safelist Tremor design token utility classes */
+@source inline("{fill,stroke,bg,text,border}-tremor-{brand,background,border,content,content-emphasis,default,label,card,dropdown}");
+
+/* Tremor design tokens — normally registered by Tremor's TW3 plugin.
+   We define them manually for Tailwind v4 compatibility. */
+@theme {
+  --color-tremor-brand: var(--color-blue-500);
+  --color-tremor-brand-emphasis: var(--color-blue-700);
+  --color-tremor-brand-inverted: #fff;
+  --color-tremor-brand-muted: var(--color-blue-200);
+  --color-tremor-brand-faint: var(--color-blue-50);
+  --color-tremor-background: #fff;
+  --color-tremor-background-emphasis: var(--color-gray-700);
+  --color-tremor-background-muted: var(--color-gray-50);
+  --color-tremor-background-subtle: var(--color-gray-100);
+  --color-tremor-border: var(--color-gray-200);
+  --color-tremor-content: var(--color-gray-500);
+  --color-tremor-content-emphasis: var(--color-gray-700);
+  --color-tremor-content-strong: var(--color-gray-900);
+  --color-tremor-content-subtle: var(--color-gray-400);
+  --color-tremor-content-inverted: #fff;
+  --color-tremor-ring: var(--color-gray-200);
+  --color-tremor-default: var(--color-gray-500);
+  --color-tremor-label: var(--color-gray-400);
+  --color-tremor-card: #fff;
+  --color-tremor-dropdown: #fff;
+}
+
 /* Theme variables - using CSS custom properties with Tailwind v4 @theme */
 @theme {
   /* Container */

src/server/routers/program.ts

@@ -34,6 +34,10 @@ export const programRouter = router({
                       _count: {
                         select: { assignments: true, projectRoundStates: true },
                       },
+                      assignments: {
+                        where: { evaluation: { status: 'SUBMITTED' } },
+                        select: { id: true },
+                      },
                     },
                   },
                 },
@@ -52,9 +56,11 @@ export const programRouter = router({
           // Provide `stages` as alias for backward compatibility
           stages: allRounds.map((round: any) => ({
             ...round,
+            assignments: undefined, // don't leak raw assignments array
             _count: {
               projects: round._count?.projectRoundStates || 0,
               assignments: round._count?.assignments || 0,
+              evaluations: round.assignments?.length || 0,
             },
           })),
           // Main rounds array
@@ -68,6 +74,7 @@ export const programRouter = router({
             _count: {
               projects: round._count?.projectRoundStates || 0,
               assignments: round._count?.assignments || 0,
+              evaluations: round.assignments?.length || 0,
             },
           })),
         }