Director dashboard

[jammy438]

Phase 3 — Dashboard Section Components & Rendering Fix

What was built
Completed the Director Dashboard view with a full set of data-driven section components wired to a mock data layer via React Query. The dashboard now renders correctly at /dashboard?view=director with the shell, sidebar, and all metric cards visible.
New section components:

HealthScoreCard — pipeline health score metric
TotalSpendCard — total cloud spend over a date range
SavingsCard — identified savings opportunities
RiskAlertCard — active anomaly/risk count
InsightsSummaryCard — summary of top insights
CostVsForecastCard — actual vs forecast spend chart
CostAllocation — spend breakdown by provider/team
TopServiceIncreases — top services by cost increase

New primitive components:

MetricCard — reusable metric display with glow, trend direction, loading and error states
PageErrorBoundary — class-based error boundary catching render failures gracefully
Skeleton — loading placeholder primitive

New data layer:

mockData.ts — typed mock responses for all endpoints
useSavingsOpportunities, useForecast, usePipelineHealth, useSpendByService, useSpendByTeam — React Query hooks with NEXT_PUBLIC_USE_MOCK_DATA flag pattern, ready to swap to real API endpoints in Phase 4

Issues encountered and fixes

1. QueryClientProvider not in the component tree
   The Providers component (ClerkProvider + QueryClientProvider) was correctly built but never imported into layout.tsx. The root layout had a standalone ClerkProvider directly, meaning QueryClientProvider was never present in the tree. All useQuery calls threw No QueryClient set immediately.
   Fix: replaced the standalone ClerkProvider in layout.tsx with , which supplies both Clerk and React Query contexts to the entire app.
2. Section components being SSR'd before QueryClient context was available
   Even after fixing the provider, Next.js 15 was SSR-ing the section components server-side before the client context was hydrated. This caused useQuery hooks to execute in a context where QueryClientProvider didn't exist yet, throwing the same error during the server render pass.
   Fix: converted all section component imports in dashboard/page.tsx to use next/dynamic with ssr: false, ensuring they only render client-side where the QueryClient context is available.
3. useSearchParams in ViewGate required a Suspense boundary
   ViewGate uses useSearchParams() to read the ?view= param. In Next.js 15, components using useSearchParams must be wrapped in a Suspense boundary or they cause rendering issues during the SSR pass.
   Fix: wrapped both instances in a single in dashboard/page.tsx.
4. .env.local not being read — file was named .env.locale
   NEXT_PUBLIC_USE_MOCK_DATA=true was set but the file was accidentally named .env.locale instead of .env.local. Next.js only reads .env.local, so the flag was never picked up — all hooks were falling through to real API calls against endpoints that don't exist yet, producing cascading 404s.
   Fix: renamed .env.locale to .env.local.
5. Monorepo export pattern bug
   Consistent with the known monorepo Webpack issue identified in Phase 2 — all new components use const Component = () => {} + export default Component pattern. The export default function syntax was avoided throughout to prevent Webpack returning empty objects for component imports.

Known state going into Phase 4

All section components render with mock data when NEXT_PUBLIC_USE_MOCK_DATA=true
Hooks are structured to swap mock for real API calls by flipping the env flag
orgId from useOrganization() is undefined in dev (no Clerk org set up locally) — this is expected and harmless while on mock data
Engineer view is a placeholder — full implementation is Phase 4
useAnomalies hook not yet built — RiskAlertCard will need it in Phase 4

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
costprism-web	Error		Mar 17, 2026 11:42am