Code Review

The dashboard page contains 12+ component definitions inline — Topbar, SectionHead, Card, OpportunityBanner, ConvergenceIndexSection, DemandPressureSection, OpportunityMatrix, SectionBanner, MoatSection, WhitespaceSection, IntentSection, PricingSection, StrategySection and DiagnosisSection — plus the page itself. Individual sections cannot be tested in isolation and the file is difficult to navigate.

Suggested restructure:

app/dashboard/[market]/
  page.tsx                       ← ~100 lines — layout + section composition only
  sections/
    s01-market-intelligence.tsx
    s03-moat-coverage.tsx
    s04-named-territory.tsx
    s05-intent.tsx
    s06-pricing.tsx
    s07-strategy.tsx
    s08-diagnosis.tsx
components/dashboard/
  section-banner.tsx             ← generic dark-card signal banner (used S02–S07)
  section-head.tsx
  card.tsx
  logo-mark.tsx

OpportunityMatrix defines three sub-components — OptionA, OptionB, OptionC — but only renders Option B. Options A and C are fully implemented but never reached. Separately, DemandPressureSection contains Options G and H inside a display: none div (the comment confirms "design preview removed").

Fix: Delete OptionA, OptionC and the hidden G/H block. Keep only what renders.

page.tsx defines MOATS — an array of 15 objects with code, label, group, status, count and note. supply-concepts.tsx defines the same data as five parallel arrays: MOAT_CODES, MOAT_LABELS, MOAT_SAT, MOAT_COUNTS, MOAT_DEFS. These must be manually kept in sync and will diverge when live moat scores are wired.

Fix: Create lib/moat-data.ts as a single source of truth. Both files import from there.

// lib/moat-data.ts
export const MOATS = [...] as const;
export const MOAT_CODES  = MOATS.map(m => m.code);
export const MOAT_LABELS = MOATS.map(m => m.label);
export const MOAT_SAT    = MOATS.map(m => m.status);
export const MOAT_COUNTS = MOATS.map(m => m.count);
export const MOAT_DEFS   = MOATS.map(m => m.def);

page.tsx defines catchmentDesc (includes parcels count). supply-concepts.tsx defines ALL_DESCS (same numeric data, no parcels). SUPPLY_INSIGHT and SUPPLY_HEADLINE also cover the same catchment narrative from different directions.

Fix: Create lib/market-data.ts with catchment constants. Both files import from it.

Next.js 15 changed params and searchParams from synchronous objects to Promise<...>. The current synchronous access pattern will throw warnings in strict mode and fail in production builds.

// Current — synchronous (will break)
interface PageProps {
  params: { market: string };
  searchParams: { mode?: string; ... };
}
export default function DashboardPage({ params, searchParams }: PageProps) {
  const market = decodeURIComponent(params.market);

// Fix — async with await
interface PageProps {
  params: Promise<{ market: string }>;
  searchParams: Promise<{ mode?: string; ... }>;
}
export default async function DashboardPage({ params, searchParams }: PageProps) {
  const { market } = await params;
  const sp = await searchParams;

The codebase defines a complete brand token set in Tailwind (--brass, --sage, --rust, etc.) but inline style blocks repeatedly use raw hex values (#B99B6A, #2B2826, #D4A85C, etc.) instead of var(--brass), var(--ink), var(--gold). This makes dark mode support very difficult and color semantics invisible.

Fix: Enforce var(--token) in all inline styles. The SAT_COLOR map in supply-concepts.tsx is a good pattern — extend it to all color references.

The Parcel and SupplyDesc types are defined inline in supply-concepts.tsx. As parcels will eventually come from the DB, these should live in types.ts alongside Mode, Catchment etc. — and eventually be derived from Prisma-generated types.

Throughout both files there are patterns like textAlign: "center" as const and whiteSpace: "nowrap" as const. This is a workaround for TypeScript not narrowing string literals to CSS property value types. The cleaner fix is typed style objects or Tailwind utility classes.

// Instead of: textAlign: "center" as const
const centeredStyle: React.CSSProperties = { textAlign: "center" };

The hexToRgb() function is a pure utility. It belongs in lib/utils.ts alongside cn().

Every section uses scrollMarginTop: "160px" hardcoded. This is the combined height of Topbar + RefineBar + SectionNav. If any of those change height, all sections break silently with no compile error.

Fix: Define a CSS custom property --scroll-offset: 160px or TypeScript constant SCROLL_OFFSET = 160 and reference it everywhere.

All mock data (PARCELS, MOATS, catchmentDesc, pricing segments, SEO queries, etc.) is defined inline in component files. When live data is wired, every component will need to be touched simultaneously.

Fix: Introduce a thin query layer before wiring any live data. Components call query functions that today return mock data and later call Prisma.

lib/queries/
  market.ts       ← getMarket(slug), getMarketStats(slug, catchment)
  supply.ts       ← getParcels(marketId, filters)
  moats.ts        ← getMoatScores(marketId)
  intelligence.ts ← getPCI(marketId), getDPI(marketId)

No <ErrorBoundary> wraps any section. A crash in, say, SupplyDensitySection will blank the entire dashboard. Each section should be wrapped so failures are isolated. Next.js provides error.tsx at the route segment level for RSC errors; client component sections need explicit error boundary wrappers.