64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { Search } from 'lucide-react';
|
||
|
|
import { Input } from '@/components/ui/Input';
|
||
|
|
import { Patient } from '@/types/patient';
|
||
|
|
|
||
|
|
interface PatientSearchSelectProps {
|
||
|
|
search: string;
|
||
|
|
onSearchChange: (value: string) => void;
|
||
|
|
patients: Patient[];
|
||
|
|
selectedPatientId?: string;
|
||
|
|
onSelectPatient: (patient: Patient) => void;
|
||
|
|
loading?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function PatientSearchSelect({
|
||
|
|
search,
|
||
|
|
onSearchChange,
|
||
|
|
patients,
|
||
|
|
selectedPatientId,
|
||
|
|
onSelectPatient,
|
||
|
|
loading = false,
|
||
|
|
}: PatientSearchSelectProps) {
|
||
|
|
return (
|
||
|
|
<div className="surface-card p-4 space-y-4">
|
||
|
|
<Input
|
||
|
|
placeholder="Search patients by name, phone, email"
|
||
|
|
value={search}
|
||
|
|
onChange={(e) => onSearchChange(e.target.value)}
|
||
|
|
icon={<Search className="h-4 w-4 icon-flat" />}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div className="space-y-2 max-h-80 overflow-y-auto">
|
||
|
|
{loading && <p className="text-sm text-text-muted">Loading patients...</p>}
|
||
|
|
|
||
|
|
{!loading && patients.length === 0 && (
|
||
|
|
<p className="text-sm text-text-muted">No patients found for this search.</p>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{patients.map((patient) => {
|
||
|
|
const isSelected = selectedPatientId === patient.id;
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
key={patient.id}
|
||
|
|
type="button"
|
||
|
|
onClick={() => onSelectPatient(patient)}
|
||
|
|
className={`w-full text-left rounded-[var(--radius-sm)] border px-3 py-2 transition-colors ${
|
||
|
|
isSelected
|
||
|
|
? 'bg-primary-soft border-primary/60'
|
||
|
|
: 'border-border/60 hover:bg-background-card/70'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<p className="text-sm font-medium text-text-primary">
|
||
|
|
{patient.firstName} {patient.lastName}
|
||
|
|
</p>
|
||
|
|
<p className="text-xs text-text-muted">{patient.phone || patient.email || 'No contact'}</p>
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|