00f7452d54
Implements comprehensive client detail view with three tabs:
Profile, Intake, and Treatment Plan. Improves UX by redirecting
to client detail after create/edit instead of list view.
## New Files
### Client Detail Page (app/epd/clients/[id]/page.tsx)
- Server component with async params/searchParams
- Breadcrumb navigation back to clients list
- Client header with name, age, BSN, status badge
- Tab navigation for Profile, Intake, Plan
- Edit button linking to edit page
### Tab Components (app/epd/clients/[id]/components/)
- client-tabs.tsx: Tab navigation wrapper with search params
- profile-tab.tsx: Client demographic info, contact details
- intake-tab.tsx: Coming Soon - Week 3 feature preview
- plan-tab.tsx: Coming Soon - Week 3 feature preview
### Edit Page (app/epd/clients/[id]/edit/page.tsx)
- Reuses ClientForm component
- Breadcrumb navigation back to client detail
## Modified Files
### Client Form (app/epd/clients/components/client-form.tsx)
- IMPROVED UX: Redirect to /epd/clients/{id} after save
- Previously redirected to list view (/epd/clients)
- Better flow: Create → Detail view, Edit → Back to detail
- Captures new client ID from createClient() for redirect
## Features
- Tabbed interface with query params (?tab=profile|intake|plan)
- Professional header with status badges
- Breadcrumb navigation throughout
- Coming Soon placeholders for Week 3 features
- Consistent slate-based color scheme (no teal overload)
Part of Epic 1, Story 6 (E1.S6) - Client Detail View
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
import { notFound } from 'next/navigation';
|
|
import { ChevronLeft } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import { getClient } from '../../actions';
|
|
import { ClientForm } from '../../components/client-form';
|
|
|
|
interface EditClientPageProps {
|
|
params: Promise<{ id: string }>;
|
|
}
|
|
|
|
export default async function EditClientPage({ params }: EditClientPageProps) {
|
|
const { id } = await params;
|
|
|
|
// Fetch client data
|
|
let client;
|
|
try {
|
|
client = await getClient(id);
|
|
} catch (error) {
|
|
notFound();
|
|
}
|
|
|
|
if (!client) {
|
|
notFound();
|
|
}
|
|
|
|
return (
|
|
<div className="px-4 sm:px-6 lg:px-8 py-8 max-w-2xl mx-auto">
|
|
{/* Back Button */}
|
|
<Link
|
|
href={`/epd/clients/${id}`}
|
|
className="inline-flex items-center gap-2 text-sm text-slate-600 hover:text-slate-900 mb-6 transition-colors"
|
|
>
|
|
<ChevronLeft className="h-4 w-4" />
|
|
<span>Terug naar cliënt</span>
|
|
</Link>
|
|
|
|
{/* Page Header */}
|
|
<div className="mb-8">
|
|
<h1 className="text-2xl font-bold text-slate-900">Cliënt bewerken</h1>
|
|
<p className="text-sm text-slate-600 mt-1">
|
|
Wijzig de gegevens van {client.first_name} {client.last_name}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Form */}
|
|
<ClientForm client={client} />
|
|
</div>
|
|
);
|
|
}
|