57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { Plus } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import { getIntakesByClientId, Intake } from '../intakes/actions';
|
|
import { IntakeList } from '../intakes/components/intake-list';
|
|
|
|
interface IntakeTabProps {
|
|
clientId: string;
|
|
}
|
|
|
|
export function IntakeTab({ clientId }: IntakeTabProps) {
|
|
const [intakes, setIntakes] = useState<Intake[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
async function fetchIntakes() {
|
|
try {
|
|
const data = await getIntakesByClientId(clientId);
|
|
setIntakes(data);
|
|
} catch (error) {
|
|
console.error('Failed to fetch intakes:', error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}
|
|
|
|
fetchIntakes();
|
|
}, [clientId]);
|
|
|
|
return (
|
|
<div className="p-6">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h2 className="text-lg font-semibold text-slate-900">
|
|
Intakes
|
|
</h2>
|
|
<p className="text-sm text-slate-600 mt-1">
|
|
Overzicht van alle intakes
|
|
</p>
|
|
</div>
|
|
<Link
|
|
href={`/epd/clients/${clientId}/intakes/new`}
|
|
className="inline-flex items-center gap-2 px-4 py-2 bg-teal-600 text-white font-medium rounded-lg hover:bg-teal-700 transition-colors"
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
<span>Nieuwe Intake</span>
|
|
</Link>
|
|
</div>
|
|
|
|
<IntakeList intakes={intakes} clientId={clientId} isLoading={isLoading} />
|
|
</div>
|
|
);
|
|
}
|