colin/triqura-ecd
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance EPD header with dynamic client data fetching

Browse Source 
- Update EPD header to fetch and display real client data from database
- Add loading state while fetching client information
- Improve client name and birth date formatting
- Rename ClientDetailPage component to ClientRedirect for clarity
- Fix import path for ReleaseSidebar in documentation layout

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
colinislit
2025-11-20 00:12:01 +01:00
parent 4b71c4a615
commit a167bdcc6e
3 changed files with 54 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
app/epd/components/epd-header.tsx
View File

@@ -1,26 +1,54 @@
"use client";
import React from 'react';
import React, { useState, useEffect } from 'react';
import { Search, ChevronDown } from 'lucide-react';
import { usePathname } from 'next/navigation';
import { getClient } from '../clients/actions';
interface EPDHeaderProps {
className?: string;
}
interface ClientData {
id: string;
first_name: string;
last_name: string;
birth_date: string;
}
export function EPDHeader({ className = "" }: EPDHeaderProps) {
const pathname = usePathname();
const [selectedClient, setSelectedClient] = useState<ClientData | null>(null);
const [isLoading, setIsLoading] = useState(false);
// 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;
useEffect(() => {
async function fetchClient() {
if (!clientId) {
setSelectedClient(null);
return;
}
// Don't re-fetch if we already have the correct client
if (selectedClient?.id === clientId) return;
setIsLoading(true);
try {
const client = await getClient(clientId);
if (client) {
setSelectedClient(client);
}
} catch (error) {
console.error('Failed to fetch client for header:', error);
} finally {
setIsLoading(false);
}
}
fetchClient();
}, [clientId, selectedClient?.id]);
return (
<header className={`h-[60px] bg-white border-b border-slate-200 flex items-center px-6 ${className}`}>
@@ -31,17 +59,23 @@ export function EPDHeader({ className = "" }: EPDHeaderProps) {
{/* Center: Client Selector (only in Level 2) */}
<div className="flex-1 flex justify-center">
{selectedClient && (
{(selectedClient || isLoading) && clientId && (
<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>
<span className="text-xs text-slate-500">
ID: {selectedClient.id} | Geb: {selectedClient.birthDate}
</span>
{isLoading ? (
<div className="h-8 w-32 bg-slate-100 animate-pulse rounded" />
) : selectedClient ? (
<>
<div className="flex items-center gap-1.5">
<span className="text-sm font-medium text-slate-900">
{selectedClient.first_name} {selectedClient.last_name}
</span>
<ChevronDown className="h-4 w-4 text-slate-400 group-hover:text-slate-600 transition-colors" />
</div>
<span className="text-xs text-slate-500">
ID: {selectedClient.id.substring(0, 8)}... | Geb: {new Date(selectedClient.birth_date).toLocaleDateString('nl-NL')}
</span>
</>
) : null}
</button>
)}
</div>