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
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user