116 lines
4.5 KiB
TypeScript
116 lines
4.5 KiB
TypeScript
'use client';
|
|
|
|
/**
|
|
* Recent Strip
|
|
*
|
|
* Shows last 5 actions as clickable chips for quick repeat.
|
|
* Height: 48px (h-12)
|
|
*/
|
|
|
|
import { useSwiftStore, type SwiftIntent } from '@/stores/swift-store';
|
|
import { FileText, Search, ArrowRightLeft, HelpCircle, Clock, Calendar, Plus, X } from 'lucide-react';
|
|
|
|
const INTENT_CONFIG: Record<SwiftIntent, { icon: typeof FileText; color: string; label: string }> = {
|
|
dagnotitie: { icon: FileText, color: 'text-blue-600 bg-blue-50 border border-blue-200', label: 'Notitie' },
|
|
zoeken: { icon: Search, color: 'text-emerald-600 bg-emerald-50 border border-emerald-200', label: 'Zoeken' },
|
|
overdracht: { icon: ArrowRightLeft, color: 'text-purple-600 bg-purple-50 border border-purple-200', label: 'Overdracht' },
|
|
agenda_query: { icon: Calendar, color: 'text-teal-600 bg-teal-50 border border-teal-200', label: 'Agenda' },
|
|
create_appointment: { icon: Plus, color: 'text-green-600 bg-green-50 border border-green-200', label: 'Afspraak' },
|
|
cancel_appointment: { icon: X, color: 'text-red-600 bg-red-50 border border-red-200', label: 'Annuleren' },
|
|
reschedule_appointment: { icon: Clock, color: 'text-amber-600 bg-amber-50 border border-amber-200', label: 'Verzetten' },
|
|
unknown: { icon: HelpCircle, color: 'text-slate-600 bg-slate-50 border border-slate-200', label: 'Actie' },
|
|
};
|
|
|
|
function formatRelativeTime(date: Date): string {
|
|
const now = new Date();
|
|
const diffMs = now.getTime() - date.getTime();
|
|
const diffMins = Math.floor(diffMs / 60000);
|
|
|
|
if (diffMins < 1) return 'zojuist';
|
|
if (diffMins < 60) return `${diffMins}m`;
|
|
const diffHours = Math.floor(diffMins / 60);
|
|
if (diffHours < 24) return `${diffHours}u`;
|
|
return `${Math.floor(diffHours / 24)}d`;
|
|
}
|
|
|
|
export function RecentStrip() {
|
|
const { recentActions, setInputValue, openBlock } = useSwiftStore();
|
|
|
|
const handleActionClick = (action: typeof recentActions[0]) => {
|
|
// Set the input to repeat the action
|
|
setInputValue(action.label);
|
|
|
|
// If it's a known intent, open the block directly
|
|
if (action.intent !== 'unknown') {
|
|
openBlock(action.intent, {
|
|
patientName: action.patientName,
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="h-12 border-t border-slate-200 flex items-center px-4 gap-3 shrink-0 bg-white">
|
|
{/* Label */}
|
|
<div className="flex items-center gap-1.5 text-slate-500 shrink-0">
|
|
<Clock size={12} />
|
|
<span className="text-xs font-medium">Recent</span>
|
|
</div>
|
|
|
|
{/* Divider */}
|
|
<div className="h-4 w-px bg-slate-200" />
|
|
|
|
{/* Actions */}
|
|
{recentActions.length === 0 ? (
|
|
<span className="text-xs text-slate-400 italic">Nog geen acties</span>
|
|
) : (
|
|
<div className="flex gap-2 overflow-x-auto scrollbar-hide">
|
|
{recentActions.map((action) => {
|
|
const config = INTENT_CONFIG[action.intent];
|
|
const Icon = config.icon;
|
|
|
|
return (
|
|
<button
|
|
key={action.id}
|
|
onClick={() => handleActionClick(action)}
|
|
className={`flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium
|
|
whitespace-nowrap transition-all duration-200
|
|
hover:scale-105 active:scale-95
|
|
${config.color} hover:brightness-110`}
|
|
title={`Herhaal: ${action.label}${action.patientName ? ` (${action.patientName})` : ''}`}
|
|
>
|
|
<Icon size={12} />
|
|
<span className="max-w-[120px] truncate">{action.label}</span>
|
|
{action.patientName && (
|
|
<span className="text-[10px] opacity-60">• {action.patientName}</span>
|
|
)}
|
|
<span className="text-[10px] opacity-40 ml-1">
|
|
{formatRelativeTime(action.timestamp)}
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
|
|
{/* Quick actions hint (when empty) */}
|
|
{recentActions.length === 0 && (
|
|
<div className="ml-auto flex items-center gap-2 text-xs text-slate-500">
|
|
<span>Probeer:</span>
|
|
<button
|
|
onClick={() => setInputValue('notitie ')}
|
|
className="px-2 py-0.5 rounded bg-slate-100 hover:bg-slate-200 text-slate-600 transition-colors"
|
|
>
|
|
notitie
|
|
</button>
|
|
<button
|
|
onClick={() => setInputValue('zoek ')}
|
|
className="px-2 py-0.5 rounded bg-slate-100 hover:bg-slate-200 text-slate-600 transition-colors"
|
|
>
|
|
zoek
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|