Scrum4Me/app/(app)/insights/page.tsx
Janpeter Visser d93c91c386
fix(insights): integrate all 5 sections in /insights + add missing components (#50)
The /insights page was rendering only Sprint Health (2 charts).
PRs #47/#48/#49 delivered helpers + tests for Velocity, Backlog health
and Agent throughput, but Velocity and Backlog never produced their
UI components, and none of the four new sections were wired into
page.tsx. Result: user sees 2 charts where 5 sections were promised.

This PR fills the gaps:

- New `app/(app)/insights/components/velocity-chart.tsx` — Recharts
  grouped BarChart with optional ReferenceLine for the average. Empty
  state when <2 completed sprints.
- New `app/(app)/insights/components/backlog-health.tsx` — counters
  (stories sans AC / tasks sans plan / stuck>7d) + stuck-tasks table
  with severity-coded days-stuck cell.
- `app/(app)/insights/page.tsx` rewritten as 5 sections:
  Sprint Health, Plan-quality (donut + alignment-trend), Agent
  throughput, Velocity, Backlog health. Helpers run in one
  Promise.all so the page renders in a single tick.

Tests: 314/314 green, tsc clean, lint 0 errors.

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-02 17:23:03 +02:00

158 lines
5.6 KiB
TypeScript

import { cookies } from 'next/headers'
import { getIronSession } from 'iron-session'
import { SessionData, sessionOptions } from '@/lib/session'
import { prisma } from '@/lib/prisma'
import { productAccessFilter } from '@/lib/product-access'
import { getBurndownData } from '@/lib/insights/burndown'
import { getSprintStatusBreakdown } from '@/lib/insights/sprint-status'
import { getVerifyResultStats, getAlignmentTrend } from '@/lib/insights/verify-stats'
import { getJobsPerDay } from '@/lib/insights/agent-throughput'
import { getVelocity } from '@/lib/insights/velocity'
import { getBacklogHealth } from '@/lib/insights/backlog-health'
import { SprintInfoStrip } from './components/sprint-info-strip'
import { BurndownChart } from './components/burndown-chart'
import { SprintStatusDonut } from './components/sprint-status-donut'
import { PlanQualityCard } from './components/plan-quality'
import { AlignmentTrend } from './components/alignment-trend'
import { AgentThroughputCard } from './components/agent-throughput'
import { VelocityChart } from './components/velocity-chart'
import { BacklogHealthCard } from './components/backlog-health'
const DAY_MS = 86_400_000
const ASSUMED_SPRINT_DAYS = 14
interface InsightsPageProps {
searchParams: Promise<{ product?: string }>
}
function MissingDatesNotice({ productId, productName }: { productId: string; productName: string }) {
return (
<p className="text-muted-foreground text-sm">
{productName} sprint heeft geen datums.{' '}
<a href={`/products/${productId}/sprint`} className="underline text-primary">
Stel datums in
</a>
</p>
)
}
export default async function InsightsPage({ searchParams }: InsightsPageProps) {
const session = await getIronSession<SessionData>(await cookies(), sessionOptions)
const userId = session.userId!
const { product: filterProductId } = await searchParams
const [
burndownSprints,
statusBreakdown,
activeSprints,
productList,
verifyStats,
alignmentTrend,
jobsPerDay,
velocity,
backlogHealth,
] = await Promise.all([
getBurndownData(userId),
getSprintStatusBreakdown(userId),
prisma.sprint.findMany({
where: { status: 'ACTIVE', product: productAccessFilter(userId) },
select: {
id: true,
sprint_goal: true,
created_at: true,
product: { select: { id: true, name: true } },
tasks: { select: { id: true } },
},
}),
prisma.product.findMany({
where: productAccessFilter(userId),
select: { id: true, name: true },
orderBy: { name: 'asc' },
}),
getVerifyResultStats(userId, 30),
getAlignmentTrend(userId, 5),
getJobsPerDay(userId, 14, filterProductId),
getVelocity(userId, 5),
getBacklogHealth(userId),
])
// Date.now is an impure call but used once per request — safe in a Server Component.
// eslint-disable-next-line react-hooks/purity
const nowMs = Date.now()
const sprintInfos = activeSprints.map(s => ({
sprintId: s.id,
productId: s.product.id,
productName: s.product.name,
sprintGoal: s.sprint_goal,
taskCount: s.tasks.length,
daysLeft: ASSUMED_SPRINT_DAYS - Math.floor((nowMs - s.created_at.getTime()) / DAY_MS),
}))
const burndownMap = new Map(burndownSprints.map(b => [b.sprintId, b]))
return (
<div className="p-6 space-y-8 max-w-6xl mx-auto w-full">
<h1 className="text-2xl font-semibold text-foreground">Insights</h1>
{/* Sprint Health */}
<section className="space-y-3">
<h2 className="text-lg font-medium text-foreground">Sprint Health</h2>
{activeSprints.length === 0 ? (
<p className="text-muted-foreground text-sm">
Geen active sprints start er een via /products/[id]/sprint.
</p>
) : (
<>
<SprintInfoStrip sprints={sprintInfos} />
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-4">
{sprintInfos.map(s => {
const burndown = burndownMap.get(s.sprintId)
if (!burndown || burndown.days.length === 0) {
return (
<MissingDatesNotice
key={s.sprintId}
productId={s.productId}
productName={s.productName}
/>
)
}
return <BurndownChart key={s.sprintId} sprint={burndown} />
})}
</div>
<SprintStatusDonut data={statusBreakdown} />
</div>
</>
)}
</section>
{/* Plan-quality */}
<section className="space-y-3">
<h2 className="text-lg font-medium text-foreground">Plan-quality</h2>
<PlanQualityCard stats={verifyStats} nowMs={nowMs} />
{alignmentTrend.length > 0 && <AlignmentTrend trend={alignmentTrend} />}
</section>
{/* Agent throughput */}
<section className="space-y-3">
<h2 className="text-lg font-medium text-foreground">Agent throughput</h2>
<AgentThroughputCard
data={jobsPerDay}
productList={productList}
currentProductId={filterProductId}
/>
</section>
{/* Velocity */}
<section className="space-y-3">
<h2 className="text-lg font-medium text-foreground">Velocity</h2>
<VelocityChart data={velocity} />
</section>
{/* Backlog health */}
<section className="space-y-3">
<h2 className="text-lg font-medium text-foreground">Backlog health</h2>
<BacklogHealthCard data={backlogHealth} />
</section>
</div>
)
}