Epic 1: Implement two-level EPD layout and navigation
Implemented complete two-level navigation system with context-aware sidebar and header components. ## Changes ### Layout (E1.S1) - Add fixed header (60px) to EPD layout - Maintain fixed sidebar (240px) - Add scrollable main content area with padding ### Context-Aware Sidebar (E1.S2) - Level 1 (Behandelaar): Dashboard | Cliënten | Agenda | Rapportage - Level 2 (Client Dossier): ← Cliënten | Dashboard | Intake | Diagnose | Behandelplan | Rapportage - URL-based context detection (/epd/clients/[id]) - Dynamic menu switching with back button in Level 2 ### Context-Aware Header (E1.S3) - Logo left, search right (both levels) - Client selector center (Level 2 only) - Shows client name, ID, and birthdate - Dropdown icon for future client switching ### Routes & Placeholders (E1.S4) - Level 1: /epd/dashboard, /epd/agenda, /epd/reports - Level 2: /epd/clients/[id]/intake, diagnose, plan, reports - All placeholder pages with clear Epic indicators ### Documentation - Add comprehensive bouwplan: docs/specs/UI/bouwplan-mini-epd-v1.0.md - 7 Epics with detailed stories and tech notes ### Fixes - Fix MDX component type import for build 🚀 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
colinislit
27
app/epd/agenda/page.tsx
Normal file
27
app/epd/agenda/page.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
/**
|
||||
* Behandelaar Agenda - Level 1
|
||||
*
|
||||
* Kalender view met alle afspraken van de behandelaar.
|
||||
*/
|
||||
|
||||
export default function AgendaPage() {
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900 mb-6">
|
||||
Agenda
|
||||
</h1>
|
||||
|
||||
<div className="bg-slate-100 border-2 border-dashed border-slate-300 rounded-lg p-12 text-center">
|
||||
<p className="text-slate-600 text-lg mb-2">
|
||||
Behandelaar Agenda
|
||||
</p>
|
||||
<p className="text-slate-500 text-sm">
|
||||
Kalender view met alle afspraken (alle cliënten)
|
||||
</p>
|
||||
<p className="text-xs text-slate-400 mt-4">
|
||||
Placeholder - Not designed yet
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
27
app/epd/clients/[id]/diagnose/page.tsx
Normal file
27
app/epd/clients/[id]/diagnose/page.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
/**
|
||||
* Diagnose & Probleemprofiel - Level 2 (Client Dossier)
|
||||
*
|
||||
* DSM-light categorieën met severity tracking.
|
||||
*/
|
||||
|
||||
export default function DiagnosePage({ params }: { params: Promise<{ id: string }> }) {
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900 mb-6">
|
||||
Diagnose & Probleemprofiel
|
||||
</h1>
|
||||
|
||||
<div className="bg-slate-100 border-2 border-dashed border-slate-300 rounded-lg p-12 text-center">
|
||||
<p className="text-slate-600 text-lg mb-2">
|
||||
DSM-light Categorieën
|
||||
</p>
|
||||
<p className="text-slate-500 text-sm">
|
||||
6 categorieën met severity indicators (Laag/Middel/Hoog)
|
||||
</p>
|
||||
<p className="text-xs text-slate-400 mt-4">
|
||||
Epic 4 - Placeholder for future content
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
27
app/epd/clients/[id]/intake/page.tsx
Normal file
27
app/epd/clients/[id]/intake/page.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
/**
|
||||
* Intake Sectie - Level 2 (Client Dossier)
|
||||
*
|
||||
* TipTap editor voor intake notities met CRUD functionaliteit.
|
||||
*/
|
||||
|
||||
export default function IntakePage({ params }: { params: Promise<{ id: string }> }) {
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900 mb-6">
|
||||
Intakes
|
||||
</h1>
|
||||
|
||||
<div className="bg-slate-100 border-2 border-dashed border-slate-300 rounded-lg p-12 text-center">
|
||||
<p className="text-slate-600 text-lg mb-2">
|
||||
Intake Notities
|
||||
</p>
|
||||
<p className="text-slate-500 text-sm">
|
||||
TipTap editor, CRUD voor intakes, slide-in detail panel
|
||||
</p>
|
||||
<p className="text-xs text-slate-400 mt-4">
|
||||
Epic 3 - Placeholder for future content
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
27
app/epd/clients/[id]/plan/page.tsx
Normal file
27
app/epd/clients/[id]/plan/page.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
/**
|
||||
* Behandelplan - Level 2 (Client Dossier)
|
||||
*
|
||||
* SMART doelen tracking met interventies en versioning.
|
||||
*/
|
||||
|
||||
export default function PlanPage({ params }: { params: Promise<{ id: string }> }) {
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900 mb-6">
|
||||
Behandelplan
|
||||
</h1>
|
||||
|
||||
<div className="bg-slate-100 border-2 border-dashed border-slate-300 rounded-lg p-12 text-center">
|
||||
<p className="text-slate-600 text-lg mb-2">
|
||||
SMART Doelen & Interventies
|
||||
</p>
|
||||
<p className="text-slate-500 text-sm">
|
||||
Treatment plan met versioning (v1, v2, concept/gepubliceerd)
|
||||
</p>
|
||||
<p className="text-xs text-slate-400 mt-4">
|
||||
Epic 5 - Placeholder for future content
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
27
app/epd/clients/[id]/reports/page.tsx
Normal file
27
app/epd/clients/[id]/reports/page.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
/**
|
||||
* Client Rapportage - Level 2 (Client Dossier)
|
||||
*
|
||||
* Client-specifieke voortgang en metrics.
|
||||
*/
|
||||
|
||||
export default function ClientReportsPage({ params }: { params: Promise<{ id: string }> }) {
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900 mb-6">
|
||||
Rapportage & Voortgang
|
||||
</h1>
|
||||
|
||||
<div className="bg-slate-100 border-2 border-dashed border-slate-300 rounded-lg p-12 text-center">
|
||||
<p className="text-slate-600 text-lg mb-2">
|
||||
Client Voortgang
|
||||
</p>
|
||||
<p className="text-slate-500 text-sm">
|
||||
Behandelduur, sessies, doelvoortgang tracking
|
||||
</p>
|
||||
<p className="text-xs text-slate-400 mt-4">
|
||||
Placeholder - Not designed yet
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,53 +1,60 @@
|
||||
"use client";
|
||||
import React from 'react';
|
||||
import { Bell, Search } from 'lucide-react';
|
||||
import { Search, ChevronDown } from 'lucide-react';
|
||||
import { usePathname } from 'next/navigation';
|
||||
|
||||
interface EPDHeaderProps {
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function EPDHeader({ title, subtitle }: EPDHeaderProps) {
|
||||
export function EPDHeader({ className = "" }: EPDHeaderProps) {
|
||||
const pathname = usePathname();
|
||||
|
||||
// Context detection: Level 2 if URL contains /clients/[id]
|
||||
const isClientContext = pathname.match(/\/epd\/clients\/[^\/]+/);
|
||||
const clientId = isClientContext ? pathname.split('/')[3] : null;
|
||||
|
||||
// TODO: Fetch actual client data based on clientId
|
||||
// For now, hardcoded demo data
|
||||
const selectedClient = clientId ? {
|
||||
name: "Bas Jansen",
|
||||
id: "CL0002",
|
||||
birthDate: "20-11-1992"
|
||||
} : null;
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-20 bg-white border-b border-slate-200 shadow-sm">
|
||||
<div className="px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
|
||||
{/* Left: Page Title */}
|
||||
<div className="flex-1">
|
||||
{title && (
|
||||
<div>
|
||||
<h1 className="text-lg font-semibold text-slate-900">
|
||||
{title}
|
||||
</h1>
|
||||
{subtitle && (
|
||||
<p className="text-xs text-slate-500 mt-0.5">
|
||||
{subtitle}
|
||||
</p>
|
||||
)}
|
||||
<header className={`h-[60px] bg-white border-b border-slate-200 flex items-center px-6 ${className}`}>
|
||||
{/* Left: Logo */}
|
||||
<div className="flex items-center">
|
||||
<span className="text-base font-medium text-slate-800">Mini-ECD</span>
|
||||
</div>
|
||||
|
||||
{/* Center: Client Selector (only in Level 2) */}
|
||||
<div className="flex-1 flex justify-center">
|
||||
{selectedClient && (
|
||||
<button className="flex flex-col items-center px-4 py-1 hover:bg-slate-50 rounded-md transition-colors group">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-sm font-medium text-slate-900">
|
||||
{selectedClient.name}
|
||||
</span>
|
||||
<ChevronDown className="h-4 w-4 text-slate-400 group-hover:text-slate-600 transition-colors" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right: Search & Notifications */}
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Search Bar - Hidden on mobile */}
|
||||
<div className="hidden md:block relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-slate-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Zoeken..."
|
||||
className="w-64 pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent transition-all duration-200"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Notifications */}
|
||||
<button
|
||||
className="relative p-2 text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded-lg transition-colors"
|
||||
aria-label="Notificaties"
|
||||
>
|
||||
<Bell className="h-5 w-5" />
|
||||
{/* Notification badge */}
|
||||
<span className="absolute top-1 right-1 h-2 w-2 bg-red-500 rounded-full" />
|
||||
<span className="text-xs text-slate-500">
|
||||
ID: {selectedClient.id} | Geb: {selectedClient.birthDate}
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right: Search */}
|
||||
<div className="flex items-center">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-slate-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Zoek cliënt..."
|
||||
className="w-64 pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-md text-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent transition-all duration-200"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -29,13 +29,21 @@ interface EPDSidebarProps {
|
||||
userName?: string;
|
||||
}
|
||||
|
||||
// EPD Navigation items
|
||||
const navigationItems: NavigationItem[] = [
|
||||
{ id: "dashboard", name: "Dashboard", icon: LayoutDashboard, href: "/epd/clients" },
|
||||
// LEVEL 1: Behandelaar Context Navigation
|
||||
const level1NavigationItems: NavigationItem[] = [
|
||||
{ id: "dashboard", name: "Dashboard", icon: LayoutDashboard, href: "/epd/dashboard" },
|
||||
{ id: "clients", name: "Cliënten", icon: Users, href: "/epd/clients" },
|
||||
{ id: "documentation", name: "Documentatie", icon: FileText, href: "/epd/docs" },
|
||||
{ id: "settings", name: "Instellingen", icon: Settings, href: "/epd/settings" },
|
||||
{ id: "help", name: "Help", icon: HelpCircle, href: "/epd/help" },
|
||||
{ id: "agenda", name: "Agenda", icon: FileText, href: "/epd/agenda" },
|
||||
{ id: "reports", name: "Rapportage", icon: Settings, href: "/epd/reports" },
|
||||
];
|
||||
|
||||
// LEVEL 2: Client Dossier Context Navigation (clientId gets injected)
|
||||
const level2NavigationItems: NavigationItem[] = [
|
||||
{ id: "dashboard", name: "Dashboard", icon: LayoutDashboard, href: "/dashboard" },
|
||||
{ id: "intake", name: "Intake", icon: FileText, href: "/intake" },
|
||||
{ id: "diagnose", name: "Diagnose", icon: Settings, href: "/diagnose" },
|
||||
{ id: "plan", name: "Behandelplan", icon: HelpCircle, href: "/plan" },
|
||||
{ id: "reports", name: "Rapportage", icon: Settings, href: "/reports" },
|
||||
];
|
||||
|
||||
export function EPDSidebar({ className = "", userEmail, userName }: EPDSidebarProps) {
|
||||
@@ -43,6 +51,18 @@ export function EPDSidebar({ className = "", userEmail, userName }: EPDSidebarPr
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isCollapsed, setIsCollapsed] = useState(false);
|
||||
|
||||
// Context detection: Level 2 if URL contains /clients/[id]
|
||||
const isClientContext = pathname.match(/\/epd\/clients\/[^\/]+/);
|
||||
const clientId = isClientContext ? pathname.split('/')[3] : null;
|
||||
|
||||
// Determine which navigation items to show
|
||||
const navigationItems = isClientContext
|
||||
? level2NavigationItems.map(item => ({
|
||||
...item,
|
||||
href: `/epd/clients/${clientId}${item.href}`
|
||||
}))
|
||||
: level1NavigationItems;
|
||||
|
||||
// Auto-open sidebar on desktop
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
@@ -140,6 +160,20 @@ export function EPDSidebar({ className = "", userEmail, userName }: EPDSidebarPr
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 px-3 py-4 overflow-y-auto">
|
||||
{/* Back to Cliënten button (Level 2 only) */}
|
||||
{isClientContext && (
|
||||
<>
|
||||
<Link
|
||||
href="/epd/clients"
|
||||
className="flex items-center gap-2 px-3 py-2.5 mb-2 text-sm font-medium text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded-md transition-colors"
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
{!isCollapsed && <span>Cliënten</span>}
|
||||
</Link>
|
||||
<div className="h-px bg-slate-200 my-2 mx-3" />
|
||||
</>
|
||||
)}
|
||||
|
||||
<ul className="space-y-1">
|
||||
{navigationItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
|
||||
27
app/epd/dashboard/page.tsx
Normal file
27
app/epd/dashboard/page.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
/**
|
||||
* Behandelaar Dashboard - Level 1
|
||||
*
|
||||
* Overzicht van caseload, aandachtspunten, taken en recente activiteit.
|
||||
*/
|
||||
|
||||
export default function DashboardPage() {
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900 mb-6">
|
||||
Dashboard
|
||||
</h1>
|
||||
|
||||
<div className="bg-slate-100 border-2 border-dashed border-slate-300 rounded-lg p-12 text-center">
|
||||
<p className="text-slate-600 text-lg mb-2">
|
||||
Behandelaar Dashboard
|
||||
</p>
|
||||
<p className="text-slate-500 text-sm">
|
||||
Caseload overzicht, aandachtspunten en aankomende afspraken
|
||||
</p>
|
||||
<p className="text-xs text-slate-400 mt-4">
|
||||
Epic 1 - Placeholder for future content
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -20,7 +20,7 @@ export default async function EPDLayout({ children }: EPDLayoutProps) {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50 flex">
|
||||
{/* Sidebar */}
|
||||
{/* Sidebar - Fixed 240px width on desktop */}
|
||||
<EPDSidebar
|
||||
userEmail={user?.email}
|
||||
userName={user?.user_metadata?.full_name}
|
||||
@@ -28,9 +28,14 @@ export default async function EPDLayout({ children }: EPDLayoutProps) {
|
||||
|
||||
{/* Main Content Area */}
|
||||
<div className="flex-1 flex flex-col min-w-0">
|
||||
{/* Page Content */}
|
||||
<main className="flex-1 overflow-auto">
|
||||
{children}
|
||||
{/* Header - Fixed 60px height */}
|
||||
<EPDHeader />
|
||||
|
||||
{/* Page Content - Scrollable */}
|
||||
<main className="flex-1 overflow-auto bg-white">
|
||||
<div className="p-8">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
27
app/epd/reports/page.tsx
Normal file
27
app/epd/reports/page.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
/**
|
||||
* Behandelaar Rapportage - Level 1
|
||||
*
|
||||
* BI dashboards, KPI's en statistieken.
|
||||
*/
|
||||
|
||||
export default function ReportsPage() {
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900 mb-6">
|
||||
Rapportage
|
||||
</h1>
|
||||
|
||||
<div className="bg-slate-100 border-2 border-dashed border-slate-300 rounded-lg p-12 text-center">
|
||||
<p className="text-slate-600 text-lg mb-2">
|
||||
Behandelaar Rapportage
|
||||
</p>
|
||||
<p className="text-slate-500 text-sm">
|
||||
BI dashboards, KPI's, trends en statistieken
|
||||
</p>
|
||||
<p className="text-xs text-slate-400 mt-4">
|
||||
Placeholder - Not designed yet
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user