feat: ST-401-ST-410 M4 REST API, tokenbeleer en activiteitenlog
- api-auth.ts was al aanwezig; demo-check toegevoegd per endpoint (ST-401) - Token aanmaken (SHA-256 hash, eenmalig tonen), intrekken, max 10 (ST-402) - GET /api/products actieve productenlijst (ST-403) - GET /api/products/:id/next-story hoogst geprioriteerde open story (ST-404) - GET /api/sprints/:id/tasks met limit parameter (ST-405) - PATCH /api/stories/:id/tasks/reorder met ID-validatie (ST-406) - POST /api/stories/:id/log met discriminatedUnion per type (ST-407) - PATCH /api/tasks/:id status bijwerken met cross-user bescherming (ST-408) - POST /api/todos via API aanmaken (ST-409) - StoryLog component met kleurcodering per type in story slide-over (ST-410) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
d92e548f88
commit
b71a1a7328
14 changed files with 713 additions and 1 deletions
|
|
@ -29,7 +29,8 @@ import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sh
|
|||
import { PanelNavBar } from '@/components/shared/panel-nav-bar'
|
||||
import { useSelectionStore } from '@/stores/selection-store'
|
||||
import { usePlannerStore } from '@/stores/planner-store'
|
||||
import { createStoryAction, updateStoryAction, deleteStoryAction, reorderStoriesAction } from '@/actions/stories'
|
||||
import { createStoryAction, updateStoryAction, deleteStoryAction, reorderStoriesAction, getStoryLogsAction } from '@/actions/stories'
|
||||
import { StoryLog } from '@/components/shared/story-log'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const PRIORITY_LABELS: Record<number, string> = { 1: 'Kritiek', 2: 'Hoog', 3: 'Gemiddeld', 4: 'Laag' }
|
||||
|
|
@ -125,6 +126,11 @@ function StoryDetailSheet({
|
|||
}) {
|
||||
const [confirmDelete, setConfirmDelete] = useState(false)
|
||||
const [isDeleting, startDeleteTransition] = useTransition()
|
||||
const [logs, setLogs] = useState<Awaited<ReturnType<typeof getStoryLogsAction>> | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
getStoryLogsAction(story.id).then(setLogs)
|
||||
}, [story.id])
|
||||
|
||||
const [state, formAction] = useActionState(
|
||||
async (_prev: unknown, fd: FormData) => {
|
||||
|
|
@ -212,6 +218,16 @@ function StoryDetailSheet({
|
|||
)}
|
||||
</div>
|
||||
|
||||
{/* Activity log */}
|
||||
<div className="px-5 py-4 border-t border-border">
|
||||
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-3">Activiteitenlog</p>
|
||||
{logs && 'logs' in logs && logs.logs ? (
|
||||
<StoryLog logs={logs.logs.map(l => ({ ...l, status: l.status ?? null, commit_hash: l.commit_hash ?? null, commit_message: l.commit_message ?? null }))} repoUrl={logs.repoUrl} />
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground">Laden…</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!isDemo && (
|
||||
<div className="border-t border-border p-4">
|
||||
{confirmDelete ? (
|
||||
|
|
|
|||
150
components/settings/token-manager.tsx
Normal file
150
components/settings/token-manager.tsx
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
'use client'
|
||||
|
||||
import { useState, useActionState, useTransition } from 'react'
|
||||
import { useFormStatus } from 'react-dom'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { createApiTokenAction, revokeApiTokenAction } from '@/actions/api-tokens'
|
||||
|
||||
interface Token {
|
||||
id: string
|
||||
label: string | null
|
||||
created_at: string
|
||||
revoked_at: string | null
|
||||
}
|
||||
|
||||
interface TokenManagerProps {
|
||||
tokens: Token[]
|
||||
isDemo: boolean
|
||||
}
|
||||
|
||||
function CreateSubmitButton() {
|
||||
const { pending } = useFormStatus()
|
||||
return (
|
||||
<Button type="submit" disabled={pending}>
|
||||
{pending ? 'Aanmaken…' : 'Token aanmaken'}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
export function TokenManager({ tokens, isDemo }: TokenManagerProps) {
|
||||
const [newToken, setNewToken] = useState<string | null>(null)
|
||||
const [copied, setCopied] = useState(false)
|
||||
const [, startRevoke] = useTransition()
|
||||
|
||||
const [state, formAction] = useActionState(
|
||||
async (_prev: unknown, fd: FormData) => {
|
||||
const result = await createApiTokenAction(_prev, fd)
|
||||
if (result.success && result.token) {
|
||||
setNewToken(result.token)
|
||||
}
|
||||
return result
|
||||
},
|
||||
undefined
|
||||
)
|
||||
|
||||
function handleCopy() {
|
||||
if (!newToken) return
|
||||
navigator.clipboard.writeText(newToken)
|
||||
setCopied(true)
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
}
|
||||
|
||||
function handleRevoke(id: string) {
|
||||
startRevoke(async () => {
|
||||
await revokeApiTokenAction(id)
|
||||
})
|
||||
}
|
||||
|
||||
const activeTokens = tokens.filter(t => !t.revoked_at)
|
||||
const revokedTokens = tokens.filter(t => t.revoked_at)
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* New token revealed */}
|
||||
{newToken && (
|
||||
<div className="bg-success-container border border-success/30 rounded-xl p-4 space-y-3">
|
||||
<p className="text-sm font-medium text-success-container-foreground">
|
||||
Token aangemaakt — kopieer het nu. Je ziet het daarna niet meer.
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<code className="flex-1 bg-surface-container px-3 py-2 rounded-lg text-xs font-mono break-all">
|
||||
{newToken}
|
||||
</code>
|
||||
<Button size="sm" variant="outline" onClick={handleCopy}>
|
||||
{copied ? 'Gekopieerd!' : 'Kopieer'}
|
||||
</Button>
|
||||
</div>
|
||||
<Button size="sm" variant="ghost" onClick={() => setNewToken(null)}>Sluiten</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create form */}
|
||||
{!isDemo && (
|
||||
<div className="bg-surface-container-low border border-border rounded-xl p-5 space-y-4">
|
||||
<h2 className="text-sm font-medium text-foreground">Nieuw token aanmaken</h2>
|
||||
<form action={formAction} className="flex gap-2">
|
||||
<Input name="label" placeholder="Label (optioneel)" className="flex-1" />
|
||||
<CreateSubmitButton />
|
||||
</form>
|
||||
{typeof state?.error === 'string' && (
|
||||
<p className="text-xs text-error">{state.error}</p>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Maximaal 10 actieve tokens. Je hebt er nu {activeTokens.length}.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Active tokens */}
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-sm font-medium text-foreground">Actieve tokens ({activeTokens.length})</h2>
|
||||
{activeTokens.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">Geen actieve tokens.</p>
|
||||
) : (
|
||||
<div className="bg-surface-container-low border border-border rounded-xl divide-y divide-border">
|
||||
{activeTokens.map(token => (
|
||||
<div key={token.id} className="flex items-center justify-between px-4 py-3 gap-3">
|
||||
<div>
|
||||
<p className="text-sm font-medium">{token.label ?? <span className="text-muted-foreground italic">Geen label</span>}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Aangemaakt {new Date(token.created_at).toLocaleDateString('nl-NL')}
|
||||
</p>
|
||||
</div>
|
||||
{!isDemo && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="text-error hover:bg-error/10 shrink-0"
|
||||
onClick={() => handleRevoke(token.id)}
|
||||
>
|
||||
Intrekken
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Revoked tokens */}
|
||||
{revokedTokens.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-sm font-medium text-muted-foreground">Ingetrokken tokens</h2>
|
||||
<div className="bg-surface-container-low border border-border rounded-xl divide-y divide-border opacity-60">
|
||||
{revokedTokens.map(token => (
|
||||
<div key={token.id} className="flex items-center justify-between px-4 py-3 gap-3">
|
||||
<div>
|
||||
<p className="text-sm line-through">{token.label ?? 'Geen label'}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Ingetrokken {new Date(token.revoked_at!).toLocaleDateString('nl-NL')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
103
components/shared/story-log.tsx
Normal file
103
components/shared/story-log.tsx
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
interface StoryLogEntry {
|
||||
id: string
|
||||
type: string
|
||||
content: string
|
||||
status: string | null
|
||||
commit_hash: string | null
|
||||
commit_message: string | null
|
||||
created_at: string
|
||||
}
|
||||
|
||||
interface StoryLogProps {
|
||||
logs: StoryLogEntry[]
|
||||
repoUrl?: string | null
|
||||
}
|
||||
|
||||
const TYPE_STYLES: Record<string, { bg: string; label: string; labelColor: string }> = {
|
||||
IMPLEMENTATION_PLAN: {
|
||||
bg: 'bg-info-container/50 border-info/20',
|
||||
label: 'Implementatieplan',
|
||||
labelColor: 'text-info',
|
||||
},
|
||||
TEST_RESULT: {
|
||||
bg: 'bg-surface-container border-border',
|
||||
label: 'Testresultaat',
|
||||
labelColor: 'text-foreground',
|
||||
},
|
||||
COMMIT: {
|
||||
bg: 'bg-secondary-container/30 border-secondary/20',
|
||||
label: 'Commit',
|
||||
labelColor: 'text-secondary',
|
||||
},
|
||||
}
|
||||
|
||||
export function StoryLog({ logs, repoUrl }: StoryLogProps) {
|
||||
if (logs.length === 0) {
|
||||
return (
|
||||
<p className="text-sm text-muted-foreground text-center py-4">
|
||||
Nog geen activiteit. Gebruik de REST API om logs toe te voegen.
|
||||
</p>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{logs.map(log => {
|
||||
const style = TYPE_STYLES[log.type] ?? TYPE_STYLES.IMPLEMENTATION_PLAN
|
||||
const isTestResult = log.type === 'TEST_RESULT'
|
||||
const testPassed = log.status === 'PASSED'
|
||||
|
||||
return (
|
||||
<div
|
||||
key={log.id}
|
||||
className={`rounded-lg border p-3 space-y-1.5 ${
|
||||
isTestResult
|
||||
? testPassed
|
||||
? 'bg-success-container/40 border-success/20'
|
||||
: 'bg-error-container/40 border-error/20'
|
||||
: style.bg
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className={`text-xs font-semibold ${
|
||||
isTestResult ? (testPassed ? 'text-success' : 'text-error') : style.labelColor
|
||||
}`}>
|
||||
{style.label}
|
||||
{isTestResult && ` — ${testPassed ? 'Geslaagd' : 'Mislukt'}`}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{new Date(log.created_at).toLocaleDateString('nl-NL', {
|
||||
day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit',
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-foreground whitespace-pre-line">{log.content}</p>
|
||||
|
||||
{log.commit_hash && (
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
{repoUrl ? (
|
||||
<a
|
||||
href={`${repoUrl}/commit/${log.commit_hash}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-xs font-mono text-secondary hover:underline"
|
||||
>
|
||||
{log.commit_hash.slice(0, 7)}
|
||||
</a>
|
||||
) : (
|
||||
<code className="text-xs font-mono text-secondary">
|
||||
{log.commit_hash.slice(0, 7)}
|
||||
</code>
|
||||
)}
|
||||
{log.commit_message && (
|
||||
<span className="text-xs text-muted-foreground truncate">{log.commit_message}</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue