7f91e048f3
E1.S1 Command Center layout: - 4-zone layout (context, canvas, recent, input) - Keyboard shortcuts (⌘K focus, Escape close) - CanvasArea met empty state + voorbeelden E1.S2 Context Bar: - Shift indicator met icons per dienst - Patient chip met avatar + clear button - Terug naar EPD link E1.S3 Command Input: - Dynamic placeholder op basis van context - Send button (verschijnt bij input) - Focus state met ring E1.S4 Voice Input: - useSwiftVoice hook (wraps Deepgram) - Real-time waveform visualisatie - Streaming transcript naar input E1.S5 Recent Strip: - Intent-based chips met icons + kleuren - Relative time (zojuist, 5m, 2u) - Click-to-repeat functionaliteit - Quick hints bij lege state Bouwplan bijgewerkt: E0+E1 done (21/68 SP, 31%) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
81 lines
2.9 KiB
TypeScript
81 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
/**
|
|
* Context Bar
|
|
*
|
|
* Top bar showing current context: shift, selected patient, user info.
|
|
* Height: 48px (h-12)
|
|
*/
|
|
|
|
import { useSwiftStore, type ShiftType } from '@/stores/swift-store';
|
|
import { Sun, Moon, Sunrise, Sunset, X, User, ArrowLeft } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
|
|
const SHIFT_CONFIG: Record<ShiftType, { icon: typeof Sun; label: string; color: string }> = {
|
|
nacht: { icon: Moon, label: 'Nachtdienst', color: 'text-indigo-400' },
|
|
ochtend: { icon: Sunrise, label: 'Ochtenddienst', color: 'text-amber-400' },
|
|
middag: { icon: Sun, label: 'Middagdienst', color: 'text-yellow-400' },
|
|
avond: { icon: Sunset, label: 'Avonddienst', color: 'text-orange-400' },
|
|
};
|
|
|
|
export function ContextBar() {
|
|
const { shift, activePatient, setActivePatient } = useSwiftStore();
|
|
const shiftConfig = SHIFT_CONFIG[shift];
|
|
const ShiftIcon = shiftConfig.icon;
|
|
|
|
return (
|
|
<header className="h-12 border-b border-slate-700 flex items-center px-4 justify-between shrink-0 bg-slate-900">
|
|
{/* Left: Logo + Shift */}
|
|
<div className="flex items-center gap-4">
|
|
<Link
|
|
href="/epd"
|
|
className="flex items-center gap-2 text-slate-400 hover:text-white transition-colors"
|
|
title="Terug naar EPD"
|
|
>
|
|
<ArrowLeft size={16} />
|
|
<span className="text-sm font-semibold tracking-tight">Swift</span>
|
|
</Link>
|
|
|
|
<div className="h-4 w-px bg-slate-700" />
|
|
|
|
<div className={`flex items-center gap-1.5 ${shiftConfig.color}`}>
|
|
<ShiftIcon size={14} />
|
|
<span className="text-xs font-medium">{shiftConfig.label}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Center: Active Patient */}
|
|
<div className="flex items-center">
|
|
{activePatient ? (
|
|
<div className="flex items-center gap-2 px-3 py-1 rounded-full bg-slate-800 border border-slate-600">
|
|
<div className="w-5 h-5 rounded-full bg-blue-600 flex items-center justify-center text-[10px] font-medium">
|
|
{activePatient.name_given[0]?.[0]}
|
|
{activePatient.name_family[0]}
|
|
</div>
|
|
<span className="text-sm text-white">
|
|
{activePatient.name_given.join(' ')} {activePatient.name_family}
|
|
</span>
|
|
<button
|
|
onClick={() => setActivePatient(null)}
|
|
className="p-0.5 rounded hover:bg-slate-700 text-slate-400 hover:text-white transition-colors"
|
|
title="Patiënt deselecteren"
|
|
>
|
|
<X size={14} />
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<span className="text-sm text-slate-500">Geen patiënt geselecteerd</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Right: User */}
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex items-center gap-2 text-slate-400">
|
|
<User size={16} />
|
|
<span className="text-xs hidden sm:block">Verpleegkundige</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|