Scrum4Me/app/(app)/ideas/[id]/page.tsx
Madhura68 1362996a2b ui: /ideas/[id] detail page with 4-tab layout (M12 T-510)
app/(app)/ideas/[id]/page.tsx (server-component):
- user_id-only fetch with notFound() on miss (anti-enumeration)
- Parallel fetch: idea+product+pbi, products list, recent logs (100),
  questions (50)

components/ideas/idea-detail-layout.tsx (client-component):
- Header: code + title + status-badge + product-link + IdeaRowActions
- PBI-link card when PLANNED (or Re-link banner when pbi removed —
  T-512 wires the action)
- URL-based tab switcher (?tab=idee|grill|plan|timeline) — bookmarkable
- Idee-tab: inline edit form with isIdeaEditable guard, dirty-tracking +
  Reset/Save buttons
- Grill/Plan-tabs: read-only md preview (T-511 will add the editor)
- Timeline-tab: chronological merge of IdeaLog + ClaudeQuestion entries
  (T-512 will polish the styling and component-split)

Tests: 546/546 still green.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-04 21:35:48 +02:00

98 lines
2.9 KiB
TypeScript

import { cookies } from 'next/headers'
import { notFound } from 'next/navigation'
import { getIronSession } from 'iron-session'
import { SessionData, sessionOptions } from '@/lib/session'
import { prisma } from '@/lib/prisma'
import { productAccessFilter } from '@/lib/product-access'
import { ideaToDto } from '@/lib/idea-dto'
import { IdeaDetailLayout } from '@/components/ideas/idea-detail-layout'
export const dynamic = 'force-dynamic'
interface PageProps {
params: Promise<{ id: string }>
searchParams: Promise<{ tab?: string }>
}
export default async function IdeaDetailPage({ params, searchParams }: PageProps) {
const session = await getIronSession<SessionData>(await cookies(), sessionOptions)
if (!session.userId) notFound() // proxy.ts redirect zou ons al moeten hebben
const { id } = await params
const { tab } = await searchParams
// M12: strikt user_id-only — 404 (niet 403) voor andere users (anti-enum).
const idea = await prisma.idea.findFirst({
where: { id, user_id: session.userId },
include: {
product: { select: { id: true, name: true, repo_url: true } },
pbi: { select: { id: true, code: true, title: true } },
},
})
if (!idea) notFound()
// Producten voor de "koppel product"-dropdown in de form-tab.
const products = await prisma.product.findMany({
where: { ...productAccessFilter(session.userId), archived: false },
orderBy: { name: 'asc' },
select: { id: true, name: true, repo_url: true },
})
// Recent logs (laatste 100) voor de Timeline-tab.
const logs = await prisma.ideaLog.findMany({
where: { idea_id: id },
orderBy: { created_at: 'desc' },
take: 100,
select: {
id: true,
type: true,
content: true,
metadata: true,
created_at: true,
},
})
// Open vragen voor dit idee — voor de Timeline-tab.
const questions = await prisma.claudeQuestion.findMany({
where: { idea_id: id },
orderBy: { created_at: 'desc' },
take: 50,
select: {
id: true,
question: true,
options: true,
status: true,
answer: true,
created_at: true,
expires_at: true,
},
})
return (
<IdeaDetailLayout
idea={ideaToDto(idea)}
grill_md={idea.grill_md}
plan_md={idea.plan_md}
products={products}
logs={logs.map((l) => ({
id: l.id,
type: l.type,
content: l.content,
metadata: l.metadata,
created_at: l.created_at.toISOString(),
}))}
questions={questions.map((q) => ({
id: q.id,
question: q.question,
options: Array.isArray(q.options) ? (q.options as string[]) : null,
status: q.status as 'open' | 'answered' | 'cancelled' | 'expired',
answer: q.answer ?? null,
created_at: q.created_at.toISOString(),
expires_at: q.expires_at.toISOString(),
}))}
isDemo={session.isDemo ?? false}
initialTab={tab ?? 'idee'}
/>
)
}