feat: rapportage UI refactor, speech streaming, docs & seed data
Rapportage: - Refactor workspace into modular components (quick-actions, timeline-card, timeline-sidebar) - Add updateReport action for inline editing - Improve report timeline with better UX Speech: - Add Deepgram token API endpoint - Add use-deepgram-streaming hook - Add confidence-text component Docs: - Add architecture documentation - Add performance optimization plan - Add speech specs and seed data docs Scripts & Data: - Add seed-reports script and migration - Update AGENTS.md guidelines 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
colinislit
144
app/api/deepgram/token/route.ts
Normal file
144
app/api/deepgram/token/route.ts
Normal file
@@ -0,0 +1,144 @@
|
||||
import { NextResponse } from 'next/server'
|
||||
import { createClient as createSupabaseClient } from '@/lib/auth/server'
|
||||
import { createClient as createDeepgramClient } from '@deepgram/sdk'
|
||||
|
||||
const MAX_TOKENS_PER_HOUR = 10
|
||||
const TOKEN_TTL_SECONDS = 3600
|
||||
const HOUR_IN_MS = 60 * 60 * 1000
|
||||
|
||||
type RateLimitEntry = {
|
||||
count: number
|
||||
resetAt: number
|
||||
}
|
||||
|
||||
type RateLimitResult = {
|
||||
allowed: boolean
|
||||
remaining: number
|
||||
resetAt: number
|
||||
}
|
||||
|
||||
const rateLimitStore = new Map<string, RateLimitEntry>()
|
||||
|
||||
function consumeRateLimit(userId: string): RateLimitResult {
|
||||
const now = Date.now()
|
||||
const entry = rateLimitStore.get(userId)
|
||||
|
||||
if (!entry || now >= entry.resetAt) {
|
||||
const resetAt = now + HOUR_IN_MS
|
||||
rateLimitStore.set(userId, { count: 1, resetAt })
|
||||
return {
|
||||
allowed: true,
|
||||
remaining: MAX_TOKENS_PER_HOUR - 1,
|
||||
resetAt,
|
||||
}
|
||||
}
|
||||
|
||||
if (entry.count >= MAX_TOKENS_PER_HOUR) {
|
||||
return {
|
||||
allowed: false,
|
||||
remaining: 0,
|
||||
resetAt: entry.resetAt,
|
||||
}
|
||||
}
|
||||
|
||||
entry.count += 1
|
||||
|
||||
return {
|
||||
allowed: true,
|
||||
remaining: MAX_TOKENS_PER_HOUR - entry.count,
|
||||
resetAt: entry.resetAt,
|
||||
}
|
||||
}
|
||||
|
||||
function buildRateLimitHeaders(result: RateLimitResult) {
|
||||
return {
|
||||
'X-RateLimit-Limit': `${MAX_TOKENS_PER_HOUR}`,
|
||||
'X-RateLimit-Remaining': `${Math.max(result.remaining, 0)}`,
|
||||
'X-RateLimit-Reset': `${Math.floor(result.resetAt / 1000)}`,
|
||||
}
|
||||
}
|
||||
|
||||
export async function POST() {
|
||||
try {
|
||||
const skipAuthCheck = process.env.SKIP_AUTH_CHECK === 'true'
|
||||
let userId = 'demo-user'
|
||||
|
||||
// Auth check (skip in development/demo mode)
|
||||
if (!skipAuthCheck) {
|
||||
const supabase = await createSupabaseClient()
|
||||
const { data: authData, error: authError } = await supabase.auth.getUser()
|
||||
|
||||
if (authError) {
|
||||
console.error('Deepgram token: auth error', authError)
|
||||
return NextResponse.json(
|
||||
{ error: 'Kon sessie niet ophalen' },
|
||||
{ status: 500 }
|
||||
)
|
||||
}
|
||||
|
||||
if (!authData?.user) {
|
||||
return NextResponse.json({ error: 'Niet geautoriseerd' }, { status: 401 })
|
||||
}
|
||||
|
||||
userId = authData.user.id
|
||||
} else {
|
||||
console.log('🔓 Deepgram token: Auth check overgeslagen (demo mode)')
|
||||
}
|
||||
|
||||
const apiKey = process.env.DEEPGRAM_API_KEY
|
||||
|
||||
if (!apiKey) {
|
||||
return NextResponse.json(
|
||||
{ error: 'Deepgram API key ontbreekt in server configuratie' },
|
||||
{ status: 500 }
|
||||
)
|
||||
}
|
||||
|
||||
const rateLimit = consumeRateLimit(userId)
|
||||
const headers = buildRateLimitHeaders(rateLimit)
|
||||
|
||||
if (!rateLimit.allowed) {
|
||||
const retryAfterSeconds = Math.max(
|
||||
0,
|
||||
Math.ceil((rateLimit.resetAt - Date.now()) / 1000)
|
||||
)
|
||||
return NextResponse.json(
|
||||
{ error: 'Rate limit overschreden. Max 10 tokens per uur.' },
|
||||
{
|
||||
status: 429,
|
||||
headers: {
|
||||
...headers,
|
||||
'Retry-After': `${retryAfterSeconds}`,
|
||||
},
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
const deepgram = createDeepgramClient(apiKey)
|
||||
const tokenResponse = await deepgram.auth.grantToken({
|
||||
ttl_seconds: TOKEN_TTL_SECONDS,
|
||||
})
|
||||
|
||||
if (!tokenResponse.result) {
|
||||
console.error('Deepgram token: API error', tokenResponse.error)
|
||||
return NextResponse.json(
|
||||
{ error: 'Genereren van tijdelijk token mislukt' },
|
||||
{ status: 502, headers }
|
||||
)
|
||||
}
|
||||
|
||||
return NextResponse.json(
|
||||
{
|
||||
token: tokenResponse.result.access_token,
|
||||
expiresIn: tokenResponse.result.expires_in,
|
||||
},
|
||||
{ headers }
|
||||
)
|
||||
} catch (error) {
|
||||
console.error('Deepgram token: onverwachte fout', error)
|
||||
return NextResponse.json(
|
||||
{ error: 'Onverwachte fout bij genereren token' },
|
||||
{ status: 500 }
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -55,6 +55,34 @@ export async function createReport(
|
||||
return response.json();
|
||||
}
|
||||
|
||||
export async function updateReport(
|
||||
patientId: string,
|
||||
reportId: string,
|
||||
input: { content: string }
|
||||
): Promise<Report> {
|
||||
const baseUrl = getBaseUrl();
|
||||
const url = `${baseUrl}/api/reports/${reportId}`;
|
||||
|
||||
const response = await authFetch(url, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(input),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 401) {
|
||||
redirect('/login');
|
||||
}
|
||||
const error = await response.json().catch(() => ({}));
|
||||
throw new Error(error.error || 'Bijwerken mislukt');
|
||||
}
|
||||
|
||||
revalidatePath(`/epd/patients/${patientId}/rapportage`);
|
||||
return response.json();
|
||||
}
|
||||
|
||||
export async function deleteReport(patientId: string, reportId: string) {
|
||||
const baseUrl = getBaseUrl();
|
||||
const url = `${baseUrl}/api/reports/${reportId}`;
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
'use client'
|
||||
|
||||
import { FileText, ClipboardList } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// Types
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
export type ReportType = 'vrije_notitie' | 'behandeladvies'
|
||||
|
||||
interface QuickAction {
|
||||
id: string
|
||||
label: string
|
||||
icon: typeof FileText
|
||||
type: ReportType
|
||||
}
|
||||
|
||||
export interface QuickActionsProps {
|
||||
/** Callback wanneer een type wordt geselecteerd */
|
||||
onSelectType: (type: ReportType) => void
|
||||
/** Huidige geselecteerde type */
|
||||
selectedType?: ReportType
|
||||
/** Disabled state */
|
||||
disabled?: boolean
|
||||
/** Extra CSS classes */
|
||||
className?: string
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// Constants
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
const QUICK_ACTIONS: QuickAction[] = [
|
||||
{ id: 'vrije-notitie', label: '+ Vrije notitie', icon: FileText, type: 'vrije_notitie' },
|
||||
{ id: 'behandeladvies', label: '+ Behandeladvies', icon: ClipboardList, type: 'behandeladvies' },
|
||||
]
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// Component
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
export function QuickActions({
|
||||
onSelectType,
|
||||
selectedType,
|
||||
disabled = false,
|
||||
className,
|
||||
}: QuickActionsProps) {
|
||||
const handleSelect = (type: ReportType) => {
|
||||
onSelectType(type)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn('flex flex-wrap items-center gap-2', className)}>
|
||||
<span className="text-sm text-slate-500 mr-1">Nieuwe rapportage:</span>
|
||||
|
||||
{QUICK_ACTIONS.map((action) => {
|
||||
const Icon = action.icon
|
||||
const isActive = selectedType === action.type
|
||||
|
||||
return (
|
||||
<button
|
||||
key={action.id}
|
||||
type="button"
|
||||
onClick={() => handleSelect(action.type)}
|
||||
disabled={disabled}
|
||||
className={cn(
|
||||
'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-all',
|
||||
'border',
|
||||
isActive
|
||||
? 'bg-emerald-500 text-white border-emerald-500 shadow-sm'
|
||||
: 'bg-white text-slate-700 border-slate-200 hover:border-emerald-300 hover:bg-emerald-50',
|
||||
disabled && 'opacity-50 cursor-not-allowed'
|
||||
)}
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
{action.label}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,324 +1,180 @@
|
||||
'use client';
|
||||
'use client'
|
||||
|
||||
import type { ReactNode } from 'react';
|
||||
import { useMemo, useState, useEffect } from 'react';
|
||||
import { Search, Filter, Sparkles, Timer } from 'lucide-react';
|
||||
import type { Report } from '@/lib/types/report';
|
||||
import { ReportTimeline } from './report-timeline';
|
||||
import { ReportComposer } from './report-composer';
|
||||
import { useMediaQuery } from '@/hooks/use-media-query';
|
||||
import { useState, useCallback } from 'react'
|
||||
import { LayoutList } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import type { Report } from '@/lib/types/report'
|
||||
import { useMediaQuery } from '@/hooks/use-media-query'
|
||||
import { ReportComposer } from './report-composer'
|
||||
import { QuickActions, type ReportType } from './quick-actions'
|
||||
import { TimelineSidebar, TimelineSidebarOverlay } from './timeline-sidebar'
|
||||
import { ReportViewEditModal } from './report-view-edit-modal'
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// Types
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
interface RapportageWorkspaceProps {
|
||||
patientId: string;
|
||||
patientName: string;
|
||||
initialReports: Report[];
|
||||
patientId: string
|
||||
patientName: string
|
||||
initialReports: Report[]
|
||||
}
|
||||
|
||||
const TYPE_LABELS: Record<string, string> = {
|
||||
behandeladvies: 'Behandeladvies',
|
||||
vrije_notitie: 'Vrije notitie',
|
||||
};
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// Component
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
export function RapportageWorkspace({ patientId, patientName, initialReports }: RapportageWorkspaceProps) {
|
||||
const [reports, setReports] = useState(initialReports);
|
||||
const [search, setSearch] = useState('');
|
||||
const [typeFilter, setTypeFilter] = useState<'all' | keyof typeof TYPE_LABELS>('all');
|
||||
const [selectedReportId, setSelectedReportId] = useState<string | null>(null);
|
||||
const [authorFilter, setAuthorFilter] = useState<'all' | string>('all');
|
||||
const [dateFrom, setDateFrom] = useState('');
|
||||
const [dateTo, setDateTo] = useState('');
|
||||
const [aiFilter, setAiFilter] = useState<'all' | 'ai' | 'manual'>('all');
|
||||
const isMobile = useMediaQuery('(max-width: 1023px)');
|
||||
const [activeTab, setActiveTab] = useState<'timeline' | 'composer'>('timeline');
|
||||
export function RapportageWorkspace({
|
||||
patientId,
|
||||
patientName,
|
||||
initialReports,
|
||||
}: RapportageWorkspaceProps) {
|
||||
const [reports, setReports] = useState(initialReports)
|
||||
const [selectedType, setSelectedType] = useState<ReportType>('vrije_notitie')
|
||||
const [isTimelineOpen, setIsTimelineOpen] = useState(false)
|
||||
const [selectedReport, setSelectedReport] = useState<Report | null>(null)
|
||||
const [isModalOpen, setIsModalOpen] = useState(false)
|
||||
const [duplicateContent, setDuplicateContent] = useState<string | null>(null)
|
||||
const isMobile = useMediaQuery('(max-width: 1023px)')
|
||||
|
||||
useEffect(() => {
|
||||
if (!isMobile) {
|
||||
setActiveTab('timeline');
|
||||
// Handlers
|
||||
const handleReportCreated = useCallback((report: Report) => {
|
||||
setReports((prev) => [report, ...prev])
|
||||
}, [])
|
||||
|
||||
const handleSelectReport = useCallback((report: Report) => {
|
||||
setSelectedReport(report)
|
||||
setIsModalOpen(true)
|
||||
}, [])
|
||||
|
||||
const handleCloseModal = useCallback(() => {
|
||||
setIsModalOpen(false)
|
||||
// Bewaar selectedReport voor active state in timeline
|
||||
}, [])
|
||||
|
||||
const handleReportUpdated = useCallback((updatedReport: Report) => {
|
||||
setReports((prev) =>
|
||||
prev.map((r) => (r.id === updatedReport.id ? updatedReport : r))
|
||||
)
|
||||
setSelectedReport(updatedReport)
|
||||
}, [])
|
||||
|
||||
const handleReportDeleted = useCallback((reportId: string) => {
|
||||
setReports((prev) => prev.filter((r) => r.id !== reportId))
|
||||
if (selectedReport?.id === reportId) {
|
||||
setSelectedReport(null)
|
||||
}
|
||||
}, [isMobile]);
|
||||
}, [selectedReport])
|
||||
|
||||
const authorOptions = useMemo(() => {
|
||||
const unique = Array.from(new Set(reports.map((report) => report.created_by).filter(Boolean)));
|
||||
return unique as string[];
|
||||
}, [reports]);
|
||||
const handleDuplicate = useCallback((content: string) => {
|
||||
setDuplicateContent(content)
|
||||
setIsTimelineOpen(false) // Sluit timeline zodat editor zichtbaar is
|
||||
}, [])
|
||||
|
||||
const filteredReports = useMemo(() => {
|
||||
return reports.filter((report) => {
|
||||
const matchesType = typeFilter === 'all' || report.type === typeFilter;
|
||||
const matchesSearch =
|
||||
!search ||
|
||||
report.content.toLowerCase().includes(search.toLowerCase()) ||
|
||||
report.ai_reasoning?.toLowerCase().includes(search.toLowerCase());
|
||||
const matchesAuthor = authorFilter === 'all' || report.created_by === authorFilter;
|
||||
const createdAt = report.created_at ? new Date(report.created_at) : null;
|
||||
const matchesFrom = !dateFrom || (createdAt && createdAt >= new Date(dateFrom));
|
||||
const matchesTo = !dateTo || (createdAt && createdAt <= new Date(`${dateTo}T23:59:59`));
|
||||
const matchesAI =
|
||||
aiFilter === 'all' ||
|
||||
(aiFilter === 'ai' ? report.ai_confidence !== null : report.ai_confidence === null);
|
||||
const handleTypeSelect = useCallback((type: ReportType) => {
|
||||
setSelectedType(type)
|
||||
}, [])
|
||||
|
||||
return matchesType && matchesSearch && matchesAuthor && matchesFrom && matchesTo && matchesAI;
|
||||
});
|
||||
}, [reports, search, typeFilter, authorFilter, dateFrom, dateTo, aiFilter]);
|
||||
|
||||
const selectedReport = useMemo(
|
||||
() => reports.find((report) => report.id === selectedReportId) ?? null,
|
||||
[reports, selectedReportId]
|
||||
);
|
||||
|
||||
const totalReports = reports.length;
|
||||
const aiReports = reports.filter((report) => report.ai_confidence !== null).length;
|
||||
const latestReport = reports[0];
|
||||
const latestDate = latestReport?.created_at
|
||||
? new Date(latestReport.created_at).toLocaleString('nl-NL')
|
||||
: null;
|
||||
|
||||
const handleReportCreated = (report: Report) => {
|
||||
setReports((prev) => [report, ...prev]);
|
||||
setSelectedReportId(report.id);
|
||||
};
|
||||
|
||||
const handleDeleteSuccess = (reportId: string) => {
|
||||
setReports((prev) => prev.filter((report) => report.id !== reportId));
|
||||
if (selectedReportId === reportId) {
|
||||
setSelectedReportId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const resetFilters = () => {
|
||||
setSearch('');
|
||||
setTypeFilter('all');
|
||||
setAuthorFilter('all');
|
||||
setDateFrom('');
|
||||
setDateTo('');
|
||||
setAiFilter('all');
|
||||
};
|
||||
const toggleTimeline = useCallback(() => {
|
||||
setIsTimelineOpen((prev) => !prev)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="space-y-6 p-6">
|
||||
<header>
|
||||
<p className="text-sm uppercase tracking-wide text-slate-500">Universele rapportage</p>
|
||||
<h1 className="text-2xl font-semibold text-slate-900">Tijdlijn en notities</h1>
|
||||
<p className="mt-1 text-sm text-slate-600">
|
||||
Alle behandeladviezen en vrije notities voor {patientName} op één plek.
|
||||
</p>
|
||||
<div className="min-h-screen bg-slate-50">
|
||||
{/* Header */}
|
||||
<header className="bg-white border-b border-slate-200 sticky top-0 z-20">
|
||||
<div className="max-w-6xl mx-auto px-4 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wide text-slate-500">
|
||||
Rapportage
|
||||
</p>
|
||||
<h1 className="text-xl font-semibold text-slate-900">
|
||||
{patientName}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Timeline toggle button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleTimeline}
|
||||
className={cn(
|
||||
'inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all',
|
||||
isTimelineOpen
|
||||
? 'bg-emerald-100 text-emerald-700 border border-emerald-300'
|
||||
: 'bg-white text-slate-700 border border-slate-200 hover:border-slate-300'
|
||||
)}
|
||||
>
|
||||
<LayoutList className="h-4 w-4" />
|
||||
Tijdlijn
|
||||
{reports.length > 0 && (
|
||||
<span className={cn(
|
||||
'ml-1 px-1.5 py-0.5 rounded-full text-xs',
|
||||
isTimelineOpen ? 'bg-emerald-200 text-emerald-800' : 'bg-slate-100 text-slate-600'
|
||||
)}>
|
||||
{reports.length}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<StatCard
|
||||
icon={<Filter className="h-5 w-5" />}
|
||||
label="Totaal rapportages"
|
||||
value={totalReports.toString()}
|
||||
helper={totalReports > 0 ? 'Inclusief AI-notities' : 'Nog geen rapportages'}
|
||||
/>
|
||||
<StatCard
|
||||
icon={<Sparkles className="h-5 w-5" />}
|
||||
label="AI classificaties"
|
||||
value={aiReports.toString()}
|
||||
helper="Aantal rapportages met AI-bijdrage"
|
||||
/>
|
||||
<StatCard
|
||||
icon={<Timer className="h-5 w-5" />}
|
||||
label="Laatste activiteit"
|
||||
value={latestDate ?? '—'}
|
||||
helper={latestDate ? 'Recentste rapportage' : 'Nog geen activiteit'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{isMobile && (
|
||||
<div className="flex rounded-full border border-slate-200 bg-slate-100 p-1 text-sm font-medium text-slate-500">
|
||||
<button
|
||||
type="button"
|
||||
className={`flex-1 rounded-full py-2 ${
|
||||
activeTab === 'timeline' ? 'bg-white text-slate-900 shadow' : ''
|
||||
}`}
|
||||
onClick={() => setActiveTab('timeline')}
|
||||
>
|
||||
Timeline
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`flex-1 rounded-full py-2 ${
|
||||
activeTab === 'composer' ? 'bg-white text-slate-900 shadow' : ''
|
||||
}`}
|
||||
onClick={() => setActiveTab('composer')}
|
||||
>
|
||||
Nieuwe rapportage
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col gap-6 lg:flex-row">
|
||||
{(!isMobile || activeTab === 'timeline') && (
|
||||
<aside className="space-y-4 lg:w-2/5">
|
||||
<div className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
|
||||
<div className="mb-3 flex items-center gap-2 text-xs uppercase tracking-wide text-slate-500">
|
||||
<Search className="h-3.5 w-3.5" />
|
||||
Filters
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<label className="text-xs font-medium text-slate-600" htmlFor="rapportage-search">
|
||||
Zoeken
|
||||
</label>
|
||||
<input
|
||||
id="rapportage-search"
|
||||
type="search"
|
||||
value={search}
|
||||
onChange={(event) => setSearch(event.target.value)}
|
||||
placeholder="Zoek in rapportages"
|
||||
className="w-full rounded-lg border border-slate-200 bg-white p-2 text-sm text-slate-900 focus:border-teal-500 focus:outline-none"
|
||||
/>
|
||||
<label className="text-xs font-medium text-slate-600" htmlFor="rapportage-type">
|
||||
Type
|
||||
</label>
|
||||
<select
|
||||
id="rapportage-type"
|
||||
value={typeFilter}
|
||||
onChange={(event) =>
|
||||
setTypeFilter(event.target.value as 'all' | keyof typeof TYPE_LABELS)
|
||||
}
|
||||
className="w-full rounded-lg border border-slate-200 bg-white p-2 text-sm text-slate-900"
|
||||
>
|
||||
<option value="all">Alle types</option>
|
||||
{Object.entries(TYPE_LABELS).map(([value, label]) => (
|
||||
<option key={value} value={value}>
|
||||
{label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<label className="text-xs font-medium text-slate-600" htmlFor="rapportage-author">
|
||||
Auteur
|
||||
</label>
|
||||
<select
|
||||
id="rapportage-author"
|
||||
value={authorFilter}
|
||||
onChange={(event) => setAuthorFilter(event.target.value as 'all' | string)}
|
||||
className="w-full rounded-lg border border-slate-200 bg-white p-2 text-sm text-slate-900"
|
||||
>
|
||||
<option value="all">Alle auteurs</option>
|
||||
{authorOptions.map((author) => (
|
||||
<option key={author} value={author}>
|
||||
{author || 'Onbekend'}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-xs font-medium text-slate-600" htmlFor="rapportage-date-from">
|
||||
Datum van
|
||||
</label>
|
||||
<input
|
||||
id="rapportage-date-from"
|
||||
type="date"
|
||||
value={dateFrom}
|
||||
onChange={(event) => setDateFrom(event.target.value)}
|
||||
className="mt-1 w-full rounded-lg border border-slate-200 bg-white p-2 text-sm text-slate-900"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-medium text-slate-600" htmlFor="rapportage-date-to">
|
||||
Datum t/m
|
||||
</label>
|
||||
<input
|
||||
id="rapportage-date-to"
|
||||
type="date"
|
||||
value={dateTo}
|
||||
onChange={(event) => setDateTo(event.target.value)}
|
||||
className="mt-1 w-full rounded-lg border border-slate-200 bg-white p-2 text-sm text-slate-900"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-medium text-slate-600">AI</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<FilterChip active={aiFilter === 'all'} onClick={() => setAiFilter('all')}>
|
||||
Alles
|
||||
</FilterChip>
|
||||
<FilterChip active={aiFilter === 'ai'} onClick={() => setAiFilter('ai')}>
|
||||
Met AI
|
||||
</FilterChip>
|
||||
<FilterChip active={aiFilter === 'manual'} onClick={() => setAiFilter('manual')}>
|
||||
Handmatig
|
||||
</FilterChip>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="w-full rounded-lg border border-slate-200 bg-white py-2 text-sm font-medium text-slate-700 hover:border-teal-200 hover:text-teal-700"
|
||||
onClick={resetFilters}
|
||||
>
|
||||
Reset filters
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ReportTimeline
|
||||
reports={filteredReports}
|
||||
patientId={patientId}
|
||||
selectedReportId={selectedReportId}
|
||||
onSelect={(report) => setSelectedReportId(report.id)}
|
||||
onDeleteSuccess={handleDeleteSuccess}
|
||||
/>
|
||||
</aside>
|
||||
{/* Main content area */}
|
||||
<main
|
||||
className={cn(
|
||||
'transition-all duration-300 ease-out',
|
||||
// Op desktop: editor krimpt wanneer timeline open is
|
||||
isTimelineOpen && !isMobile && 'lg:mr-[30%] lg:min-w-0'
|
||||
)}
|
||||
>
|
||||
<div className="max-w-4xl mx-auto px-4 py-6">
|
||||
{/* Quick Actions */}
|
||||
<section className="mb-6">
|
||||
<QuickActions
|
||||
onSelectType={handleTypeSelect}
|
||||
selectedType={selectedType}
|
||||
/>
|
||||
</section>
|
||||
|
||||
{(!isMobile || activeTab === 'composer') && (
|
||||
<div className="lg:w-3/5">
|
||||
{isMobile && activeTab === 'composer' && (
|
||||
<button
|
||||
type="button"
|
||||
className="mb-3 inline-flex items-center text-sm font-medium text-teal-600"
|
||||
onClick={() => setActiveTab('timeline')}
|
||||
>
|
||||
← Terug naar timeline
|
||||
</button>
|
||||
)}
|
||||
{/* Editor */}
|
||||
<section>
|
||||
<ReportComposer
|
||||
patientId={patientId}
|
||||
patientName={patientName}
|
||||
selectedReport={selectedReport}
|
||||
onReportCreated={handleReportCreated}
|
||||
initialContent={duplicateContent}
|
||||
onInitialContentConsumed={() => setDuplicateContent(null)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
function StatCard({
|
||||
icon,
|
||||
label,
|
||||
value,
|
||||
helper,
|
||||
}: {
|
||||
icon: ReactNode;
|
||||
label: string;
|
||||
value: string;
|
||||
helper: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
|
||||
<div className="flex items-center justify-between text-slate-500">
|
||||
<span className="text-xs font-medium uppercase tracking-wide">{label}</span>
|
||||
<div className="text-slate-400">{icon}</div>
|
||||
</div>
|
||||
<p className="mt-3 text-2xl font-semibold text-slate-900">{value}</p>
|
||||
<p className="text-xs text-slate-500">{helper}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
{/* Timeline Sidebar */}
|
||||
<TimelineSidebarOverlay
|
||||
isOpen={isTimelineOpen && isMobile}
|
||||
onClose={() => setIsTimelineOpen(false)}
|
||||
/>
|
||||
|
||||
<TimelineSidebar
|
||||
isOpen={isTimelineOpen}
|
||||
onClose={() => setIsTimelineOpen(false)}
|
||||
reports={reports}
|
||||
onSelectReport={handleSelectReport}
|
||||
activeReportId={selectedReport?.id}
|
||||
/>
|
||||
|
||||
function FilterChip({ active, onClick, children }: { active: boolean; onClick: () => void; children: ReactNode }) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className={`rounded-full px-3 py-1 text-xs font-medium transition ${
|
||||
active ? 'bg-teal-100 text-teal-700' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
|
||||
}`}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
{/* View/Edit Modal */}
|
||||
<ReportViewEditModal
|
||||
report={selectedReport}
|
||||
isOpen={isModalOpen}
|
||||
onClose={handleCloseModal}
|
||||
patientId={patientId}
|
||||
onReportUpdated={handleReportUpdated}
|
||||
onReportDeleted={handleReportDeleted}
|
||||
onDuplicate={handleDuplicate}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,96 +1,254 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { FilePlus2 } from 'lucide-react';
|
||||
import { FilePlus2, Search, Filter, FileText, ChevronDown } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { Report } from '@/lib/types/report';
|
||||
import { deleteReport } from '../actions';
|
||||
import { ReportCard } from './report-card';
|
||||
import { toast } from '@/hooks/use-toast';
|
||||
import { TimelineCard } from './timeline-card';
|
||||
|
||||
interface ReportTimelineProps {
|
||||
reports: Report[];
|
||||
patientId: string;
|
||||
selectedReportId?: string | null;
|
||||
onSelect?: (report: Report) => void;
|
||||
onDeleteSuccess?: (reportId: string) => void;
|
||||
onSelectReport: (report: Report) => void;
|
||||
activeReportId?: string | null;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const TYPE_LABELS: Record<string, string> = {
|
||||
behandeladvies: 'Behandeladvies',
|
||||
vrije_notitie: 'Vrije notitie',
|
||||
intake_verslag: 'Intake verslag',
|
||||
behandelplan: 'Behandelplan',
|
||||
};
|
||||
|
||||
const FILTER_THRESHOLD = 10;
|
||||
const INITIAL_VISIBLE = 20;
|
||||
|
||||
export function ReportTimeline({
|
||||
reports,
|
||||
patientId,
|
||||
selectedReportId,
|
||||
onSelect,
|
||||
onDeleteSuccess,
|
||||
onSelectReport,
|
||||
activeReportId,
|
||||
className,
|
||||
}: ReportTimelineProps) {
|
||||
const [deletingId, setDeletingId] = useState<string | null>(null);
|
||||
const [search, setSearch] = useState('');
|
||||
const [showFilters, setShowFilters] = useState(false);
|
||||
const [typeFilter, setTypeFilter] = useState<string>('all');
|
||||
const [visibleCount, setVisibleCount] = useState(INITIAL_VISIBLE);
|
||||
|
||||
useEffect(() => {
|
||||
setVisibleCount(INITIAL_VISIBLE);
|
||||
}, [reports]);
|
||||
|
||||
const visibleReports = useMemo(() => reports.slice(0, visibleCount), [reports, visibleCount]);
|
||||
// Gefilterde rapportages
|
||||
const filteredReports = useMemo(() => {
|
||||
return reports.filter((report) => {
|
||||
const matchesSearch =
|
||||
!search ||
|
||||
report.content.toLowerCase().includes(search.toLowerCase()) ||
|
||||
TYPE_LABELS[report.type]?.toLowerCase().includes(search.toLowerCase());
|
||||
|
||||
const handleDelete = async (reportId: string) => {
|
||||
setDeletingId(reportId);
|
||||
try {
|
||||
await deleteReport(patientId, reportId);
|
||||
onDeleteSuccess?.(reportId);
|
||||
toast({
|
||||
title: 'Rapportage verwijderd',
|
||||
description: 'De rapportage is verwijderd uit de tijdlijn.',
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Failed to delete report', error);
|
||||
toast({
|
||||
variant: 'destructive',
|
||||
title: 'Verwijderen mislukt',
|
||||
description:
|
||||
error instanceof Error ? error.message : 'Probeer het later opnieuw.',
|
||||
});
|
||||
} finally {
|
||||
setDeletingId(null);
|
||||
}
|
||||
};
|
||||
const matchesType = typeFilter === 'all' || report.type === typeFilter;
|
||||
|
||||
if (reports.length === 0) {
|
||||
return (
|
||||
<div className="rounded-2xl border border-dashed border-slate-300 bg-slate-50 p-10 text-center">
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-white text-slate-400">
|
||||
<FilePlus2 className="h-6 w-6" />
|
||||
</div>
|
||||
<p className="text-base font-semibold text-slate-900">Nog geen rapportages</p>
|
||||
<p className="mt-1 text-sm text-slate-500">
|
||||
Klik op “Nieuwe rapportage” in de header om de eerste rapportage vast te leggen.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return matchesSearch && matchesType;
|
||||
});
|
||||
}, [reports, search, typeFilter]);
|
||||
|
||||
const hasMore = reports.length > visibleCount;
|
||||
const visibleReports = useMemo(
|
||||
() => filteredReports.slice(0, visibleCount),
|
||||
[filteredReports, visibleCount]
|
||||
);
|
||||
|
||||
const showFilterSection = reports.length > FILTER_THRESHOLD;
|
||||
const hasMore = filteredReports.length > visibleCount;
|
||||
|
||||
const availableTypes = useMemo(() => {
|
||||
const types = new Set(reports.map((r) => r.type));
|
||||
return Array.from(types);
|
||||
}, [reports]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{visibleReports.map((report) => (
|
||||
<ReportCard
|
||||
key={report.id}
|
||||
report={report}
|
||||
onDelete={() => handleDelete(report.id)}
|
||||
isDeleting={deletingId === report.id}
|
||||
onSelect={() => onSelect?.(report)}
|
||||
isSelected={selectedReportId === report.id}
|
||||
/>
|
||||
))}
|
||||
{hasMore && (
|
||||
<button
|
||||
type="button"
|
||||
className="w-full rounded-lg border border-slate-200 bg-white py-2 text-sm font-medium text-slate-700 hover:border-teal-200 hover:text-teal-700"
|
||||
onClick={() => setVisibleCount((prev) => prev + INITIAL_VISIBLE)}
|
||||
>
|
||||
Meer rapportages laden
|
||||
</button>
|
||||
<div className={cn('h-full flex flex-col bg-slate-50', className)}>
|
||||
{/* Header */}
|
||||
<div className="px-6 py-4 bg-white border-b border-slate-200 shrink-0">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<FileText className="h-5 w-5 text-slate-500" />
|
||||
<h2 className="text-lg font-semibold text-slate-900">Tijdlijn</h2>
|
||||
<span className="px-2 py-0.5 text-xs font-medium bg-slate-100 text-slate-600 rounded-full">
|
||||
{filteredReports.length}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{showFilterSection && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowFilters(!showFilters)}
|
||||
className={cn(
|
||||
'flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors',
|
||||
showFilters
|
||||
? 'bg-emerald-50 text-emerald-700 border border-emerald-200'
|
||||
: 'bg-white text-slate-600 border border-slate-200 hover:border-slate-300'
|
||||
)}
|
||||
>
|
||||
<Filter className="h-4 w-4" />
|
||||
Filters
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
'h-3 w-3 transition-transform',
|
||||
showFilters && 'rotate-180'
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Search Bar */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
|
||||
<input
|
||||
type="search"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
placeholder="Zoek in rapportages..."
|
||||
className="w-full pl-10 pr-4 py-2.5 text-sm border border-slate-200 rounded-lg bg-slate-50 focus:bg-white focus:border-emerald-300 focus:ring-2 focus:ring-emerald-100 focus:outline-none transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Filters Panel */}
|
||||
{showFilters && showFilterSection && (
|
||||
<div className="mt-3 p-3 bg-slate-50 border border-slate-200 rounded-lg">
|
||||
<div className="flex items-center gap-4">
|
||||
<label className="flex-1">
|
||||
<span className="block text-xs font-medium text-slate-700 mb-1.5">
|
||||
Type rapportage
|
||||
</span>
|
||||
<select
|
||||
value={typeFilter}
|
||||
onChange={(e) => setTypeFilter(e.target.value)}
|
||||
className="w-full text-sm border border-slate-200 rounded-md px-3 py-1.5 bg-white focus:border-emerald-300 focus:ring-2 focus:ring-emerald-100 focus:outline-none"
|
||||
>
|
||||
<option value="all">Alle types</option>
|
||||
{availableTypes.map((type) => (
|
||||
<option key={type} value={type}>
|
||||
{TYPE_LABELS[type] || type}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{(typeFilter !== 'all' || search) && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setTypeFilter('all');
|
||||
setSearch('');
|
||||
}}
|
||||
className="mt-5 text-xs text-emerald-600 hover:text-emerald-700 font-medium"
|
||||
>
|
||||
Reset filters
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Timeline Content */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{filteredReports.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center h-full px-6 py-12">
|
||||
<div className="text-center max-w-md">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-slate-100 mb-4">
|
||||
<FilePlus2 className="h-8 w-8 text-slate-400" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-slate-900 mb-2">
|
||||
{reports.length === 0
|
||||
? 'Nog geen rapportages'
|
||||
: 'Geen resultaten gevonden'}
|
||||
</h3>
|
||||
<p className="text-sm text-slate-500 mb-4">
|
||||
{reports.length === 0
|
||||
? 'Maak je eerste rapportage om hier de tijdlijn te zien.'
|
||||
: 'Probeer een andere zoekopdracht of pas de filters aan.'}
|
||||
</p>
|
||||
{search && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSearch('')}
|
||||
className="text-sm text-emerald-600 hover:text-emerald-700 font-medium"
|
||||
>
|
||||
Wis zoekopdracht
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="px-6 py-4 space-y-3">
|
||||
{/* Group by date */}
|
||||
{visibleReports.map((report, index) => {
|
||||
const prevReport = index > 0 ? visibleReports[index - 1] : null;
|
||||
const currentDate = new Date(
|
||||
report.created_at
|
||||
).toLocaleDateString('nl-NL', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
});
|
||||
const prevDate = prevReport
|
||||
? new Date(prevReport.created_at).toLocaleDateString('nl-NL', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
})
|
||||
: null;
|
||||
|
||||
const showDateDivider = currentDate !== prevDate;
|
||||
|
||||
return (
|
||||
<div key={report.id}>
|
||||
{showDateDivider && (
|
||||
<div className="flex items-center gap-3 mb-4 mt-6 first:mt-0">
|
||||
<div className="h-px flex-1 bg-slate-200" />
|
||||
<span className="text-xs font-medium text-slate-500 uppercase tracking-wide">
|
||||
{currentDate}
|
||||
</span>
|
||||
<div className="h-px flex-1 bg-slate-200" />
|
||||
</div>
|
||||
)}
|
||||
<TimelineCard
|
||||
report={report}
|
||||
onView={() => onSelectReport(report)}
|
||||
isActive={activeReportId === report.id}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Load More */}
|
||||
{hasMore && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setVisibleCount((prev) => prev + INITIAL_VISIBLE)}
|
||||
className="w-full py-3 mt-4 text-sm font-medium text-emerald-600 hover:text-emerald-700 hover:bg-emerald-50 rounded-lg border border-emerald-200 transition-colors"
|
||||
>
|
||||
Meer rapportages laden ({filteredReports.length - visibleCount} resterend)
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer Stats */}
|
||||
{filteredReports.length > 0 && (
|
||||
<div className="px-6 py-3 bg-white border-t border-slate-200 shrink-0">
|
||||
<div className="flex items-center justify-between text-xs text-slate-500">
|
||||
<span>
|
||||
{visibleReports.length} van {filteredReports.length} rapportages
|
||||
</span>
|
||||
{(search || typeFilter !== 'all') && (
|
||||
<span className="text-emerald-600">Gefilterd</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
147
app/epd/patients/[id]/rapportage/components/timeline-card.tsx
Normal file
147
app/epd/patients/[id]/rapportage/components/timeline-card.tsx
Normal file
@@ -0,0 +1,147 @@
|
||||
'use client'
|
||||
|
||||
import { FilePenLine, FileText } from 'lucide-react'
|
||||
import { format, formatDistanceToNow } from 'date-fns'
|
||||
import { nl } from 'date-fns/locale'
|
||||
import { cn } from '@/lib/utils'
|
||||
import type { Report } from '@/lib/types/report'
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// Types
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
export interface TimelineCardProps {
|
||||
report: Report
|
||||
onView: () => void
|
||||
isActive?: boolean
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// Constants
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
const TYPE_META = {
|
||||
behandeladvies: {
|
||||
label: 'Behandeladvies',
|
||||
icon: FilePenLine,
|
||||
iconBg: 'bg-teal-50 text-teal-600',
|
||||
},
|
||||
vrije_notitie: {
|
||||
label: 'Vrije notitie',
|
||||
icon: FileText,
|
||||
iconBg: 'bg-slate-100 text-slate-600',
|
||||
},
|
||||
intake_verslag: {
|
||||
label: 'Intake verslag',
|
||||
icon: FileText,
|
||||
iconBg: 'bg-blue-50 text-blue-600',
|
||||
},
|
||||
behandelplan: {
|
||||
label: 'Behandelplan',
|
||||
icon: FilePenLine,
|
||||
iconBg: 'bg-purple-50 text-purple-600',
|
||||
},
|
||||
} as const
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// Helper Functions
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
function getPreview(content: string, maxLines = 2): string {
|
||||
if (!content) return ''
|
||||
|
||||
// Strip HTML tags als er HTML in zit
|
||||
const stripped = content.replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim()
|
||||
|
||||
// Neem eerste N regels of max 100 karakters
|
||||
const lines = stripped.split(/[.!?]\s+/).slice(0, maxLines)
|
||||
const preview = lines.join('. ')
|
||||
|
||||
if (preview.length > 120) {
|
||||
return preview.slice(0, 120) + '...'
|
||||
}
|
||||
|
||||
return preview + (stripped.length > preview.length ? '...' : '')
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// Component
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
export function TimelineCard({ report, onView, isActive = false }: TimelineCardProps) {
|
||||
const meta = TYPE_META[report.type as keyof typeof TYPE_META] ?? TYPE_META.vrije_notitie
|
||||
const Icon = meta.icon
|
||||
|
||||
const createdAt = report.created_at ? new Date(report.created_at) : null
|
||||
const dateFormatted = createdAt
|
||||
? format(createdAt, "d-MM, HH:mm", { locale: nl })
|
||||
: ''
|
||||
const relativeTime = createdAt
|
||||
? formatDistanceToNow(createdAt, { addSuffix: false, locale: nl })
|
||||
: ''
|
||||
|
||||
const preview = getPreview(report.content)
|
||||
|
||||
return (
|
||||
<article
|
||||
className={cn(
|
||||
'rounded-lg border bg-white p-3 transition-all cursor-pointer',
|
||||
'hover:border-emerald-300 hover:shadow-sm',
|
||||
isActive
|
||||
? 'border-emerald-500 bg-emerald-50/50 shadow-sm'
|
||||
: 'border-slate-200'
|
||||
)}
|
||||
onClick={onView}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault()
|
||||
onView()
|
||||
}
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-start gap-2">
|
||||
<div className={cn('p-1.5 rounded-md', meta.iconBg)}>
|
||||
<Icon className="h-4 w-4" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-slate-900 truncate">
|
||||
{meta.label}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500">
|
||||
{dateFormatted}
|
||||
{relativeTime && (
|
||||
<span className="text-slate-400 ml-1">
|
||||
· {relativeTime} geleden
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Preview */}
|
||||
{preview && (
|
||||
<p className="mt-2 text-xs text-slate-600 line-clamp-2">
|
||||
{preview}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Action */}
|
||||
<div className="mt-2 pt-2 border-t border-slate-100">
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onView()
|
||||
}}
|
||||
className="text-xs font-medium text-emerald-600 hover:text-emerald-700"
|
||||
>
|
||||
Bekijk rapport →
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
)
|
||||
}
|
||||
|
||||
219
app/epd/patients/[id]/rapportage/components/timeline-sidebar.tsx
Normal file
219
app/epd/patients/[id]/rapportage/components/timeline-sidebar.tsx
Normal file
@@ -0,0 +1,219 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useMemo } from 'react'
|
||||
import { X, Search, ChevronDown, FileText } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import type { Report } from '@/lib/types/report'
|
||||
import { TimelineCard } from './timeline-card'
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// Types
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
export interface TimelineSidebarProps {
|
||||
/** Of de sidebar open is */
|
||||
isOpen: boolean
|
||||
/** Callback om sidebar te sluiten */
|
||||
onClose: () => void
|
||||
/** Lijst van rapportages */
|
||||
reports: Report[]
|
||||
/** Callback wanneer een rapport wordt geselecteerd */
|
||||
onSelectReport: (report: Report) => void
|
||||
/** ID van actief rapport (in modal) */
|
||||
activeReportId?: string | null
|
||||
/** Extra CSS classes */
|
||||
className?: string
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// Constants
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
const TYPE_LABELS: Record<string, string> = {
|
||||
behandeladvies: 'Behandeladvies',
|
||||
vrije_notitie: 'Vrije notitie',
|
||||
intake_verslag: 'Intake verslag',
|
||||
behandelplan: 'Behandelplan',
|
||||
}
|
||||
|
||||
const FILTER_THRESHOLD = 10 // Toon filters alleen bij meer dan N items
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// Component
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
export function TimelineSidebar({
|
||||
isOpen,
|
||||
onClose,
|
||||
reports,
|
||||
onSelectReport,
|
||||
activeReportId,
|
||||
className,
|
||||
}: TimelineSidebarProps) {
|
||||
const [search, setSearch] = useState('')
|
||||
const [showFilters, setShowFilters] = useState(false)
|
||||
const [typeFilter, setTypeFilter] = useState<string>('all')
|
||||
|
||||
// Gefilterde rapportages
|
||||
const filteredReports = useMemo(() => {
|
||||
return reports.filter((report) => {
|
||||
const matchesSearch = !search ||
|
||||
report.content.toLowerCase().includes(search.toLowerCase()) ||
|
||||
TYPE_LABELS[report.type]?.toLowerCase().includes(search.toLowerCase())
|
||||
|
||||
const matchesType = typeFilter === 'all' || report.type === typeFilter
|
||||
|
||||
return matchesSearch && matchesType
|
||||
})
|
||||
}, [reports, search, typeFilter])
|
||||
|
||||
// Toon filters alleen als er meer dan threshold items zijn
|
||||
const showFilterSection = reports.length > FILTER_THRESHOLD
|
||||
|
||||
// Unieke types voor filter dropdown
|
||||
const availableTypes = useMemo(() => {
|
||||
const types = new Set(reports.map(r => r.type))
|
||||
return Array.from(types)
|
||||
}, [reports])
|
||||
|
||||
return (
|
||||
<aside
|
||||
className={cn(
|
||||
'fixed top-0 right-0 h-full bg-white border-l border-slate-200 shadow-xl z-40',
|
||||
'transition-transform duration-300 ease-out',
|
||||
'w-full sm:w-[380px] lg:w-[30%] lg:min-w-[320px] lg:max-w-[400px]',
|
||||
isOpen ? 'translate-x-0' : 'translate-x-full',
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-slate-200">
|
||||
<div className="flex items-center gap-2">
|
||||
<FileText className="h-5 w-5 text-slate-500" />
|
||||
<h2 className="text-lg font-semibold text-slate-900">Tijdlijn</h2>
|
||||
<span className="text-sm text-slate-500">
|
||||
({filteredReports.length})
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-lg transition-colors"
|
||||
aria-label="Sluiten"
|
||||
>
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Search */}
|
||||
<div className="p-3 border-b border-slate-100">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
|
||||
<input
|
||||
type="search"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
placeholder="Zoek in rapportages..."
|
||||
className="w-full pl-9 pr-3 py-2 text-sm border border-slate-200 rounded-lg bg-slate-50 focus:bg-white focus:border-emerald-300 focus:outline-none transition-colors"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Filters (on-demand) */}
|
||||
{showFilterSection && (
|
||||
<div className="mt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowFilters(!showFilters)}
|
||||
className="flex items-center gap-1 text-xs text-slate-500 hover:text-slate-700"
|
||||
>
|
||||
<ChevronDown className={cn('h-3 w-3 transition-transform', showFilters && 'rotate-180')} />
|
||||
Filters
|
||||
</button>
|
||||
|
||||
{showFilters && (
|
||||
<div className="mt-2 p-2 bg-slate-50 rounded-lg">
|
||||
<label className="block text-xs text-slate-600 mb-1">Type</label>
|
||||
<select
|
||||
value={typeFilter}
|
||||
onChange={(e) => setTypeFilter(e.target.value)}
|
||||
className="w-full text-sm border border-slate-200 rounded-md p-1.5 bg-white"
|
||||
>
|
||||
<option value="all">Alle types</option>
|
||||
{availableTypes.map((type) => (
|
||||
<option key={type} value={type}>
|
||||
{TYPE_LABELS[type] || type}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Reports List */}
|
||||
<div className="flex-1 overflow-y-auto p-3 space-y-2">
|
||||
{filteredReports.length === 0 ? (
|
||||
<div className="text-center py-8">
|
||||
<FileText className="h-10 w-10 text-slate-300 mx-auto mb-2" />
|
||||
<p className="text-sm text-slate-500">
|
||||
{reports.length === 0
|
||||
? 'Nog geen rapportages'
|
||||
: 'Geen resultaten gevonden'}
|
||||
</p>
|
||||
{search && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSearch('')}
|
||||
className="mt-2 text-xs text-emerald-600 hover:text-emerald-700"
|
||||
>
|
||||
Wis zoekopdracht
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
filteredReports.map((report) => (
|
||||
<TimelineCard
|
||||
key={report.id}
|
||||
report={report}
|
||||
onView={() => onSelectReport(report)}
|
||||
isActive={activeReportId === report.id}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-3 border-t border-slate-100 bg-slate-50">
|
||||
<p className="text-xs text-slate-500 text-center">
|
||||
{filteredReports.length} van {reports.length} rapportages
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// Overlay Component (voor achtergrond dimmen)
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
export function TimelineSidebarOverlay({
|
||||
isOpen,
|
||||
onClose,
|
||||
}: {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
}) {
|
||||
if (!isOpen) return null
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/20 z-30 lg:hidden"
|
||||
onClick={onClose}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { getReports } from './actions';
|
||||
import { RapportageWorkspace } from './components/rapportage-workspace';
|
||||
import { RapportageWorkspaceV2 } from './components/rapportage-workspace-v2';
|
||||
import { getPatient } from '../../actions';
|
||||
|
||||
export default async function RapportagePage({
|
||||
@@ -12,7 +12,7 @@ export default async function RapportagePage({
|
||||
const patientName = formatPatientName(patient);
|
||||
|
||||
return (
|
||||
<RapportageWorkspace
|
||||
<RapportageWorkspaceV2
|
||||
patientId={id}
|
||||
patientName={patientName}
|
||||
initialReports={reports}
|
||||
|
||||
Reference in New Issue
Block a user