mirror of
https://dev.azure.com/globalhealthx/EMR/_git/helix-engage
synced 2026-04-11 10:23:27 +00:00
Merged PR 69: added Patient info from Patient master
added Patient info from Patient master
This commit is contained in:
Mouli Chand Birudugadda
191
src/components/shared/patient-profile-panel.tsx
Normal file
191
src/components/shared/patient-profile-panel.tsx
Normal file
@@ -0,0 +1,191 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faSparkles, faUser, faCalendarCheck } from '@fortawesome/pro-duotone-svg-icons';
|
||||
import { faIcon } from '@/lib/icon-wrapper';
|
||||
import { Badge } from '@/components/base/badges/badges';
|
||||
import { apiClient } from '@/lib/api-client';
|
||||
import { formatPhone, formatShortDate } from '@/lib/format';
|
||||
import type { LeadActivity, Patient } from '@/types/entities';
|
||||
|
||||
const CalendarCheck = faIcon(faCalendarCheck);
|
||||
|
||||
interface PatientProfilePanelProps {
|
||||
patient: Patient | null;
|
||||
activities?: LeadActivity[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Reusable Patient/Lead 360 profile panel
|
||||
* Shows comprehensive patient information including appointments, calls, and activity timeline
|
||||
* Can be used with either Patient or Lead entities
|
||||
*/
|
||||
export const PatientProfilePanel = ({ patient, activities = [] }: PatientProfilePanelProps) => {
|
||||
const [patientData, setPatientData] = useState<any>(null);
|
||||
const [loadingPatient, setLoadingPatient] = useState(false);
|
||||
|
||||
// Fetch full patient data with appointments and calls
|
||||
useEffect(() => {
|
||||
if (!patient?.id) {
|
||||
setPatientData(null);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoadingPatient(true);
|
||||
apiClient.graphql<{ patients: { edges: Array<{ node: any }> } }>(
|
||||
`query GetPatient($id: UUID!) { patients(filter: { id: { eq: $id } }) { edges { node {
|
||||
id fullName { firstName lastName } dateOfBirth gender patientType
|
||||
phones { primaryPhoneNumber } emails { primaryEmail }
|
||||
appointments(first: 10, orderBy: [{ scheduledAt: DescNullsLast }]) { edges { node {
|
||||
id scheduledAt status doctorName department reasonForVisit appointmentType
|
||||
} } }
|
||||
calls(first: 10, orderBy: [{ startedAt: DescNullsLast }]) { edges { node {
|
||||
id callStatus disposition direction startedAt durationSec agentName
|
||||
} } }
|
||||
} } } }`,
|
||||
{ id: patient.id },
|
||||
{ silent: true },
|
||||
).then(data => {
|
||||
setPatientData(data.patients.edges[0]?.node ?? null);
|
||||
}).catch(() => setPatientData(null))
|
||||
.finally(() => setLoadingPatient(false));
|
||||
}, [patient?.id]);
|
||||
|
||||
if (!patient) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-center px-4">
|
||||
<FontAwesomeIcon icon={faUser} className="mb-3 size-8 text-fg-quaternary" />
|
||||
<p className="text-sm text-tertiary">Select a patient to see their full profile.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const firstName = patient.fullName?.firstName ?? '';
|
||||
const lastName = patient.fullName?.lastName ?? '';
|
||||
const fullName = `${firstName} ${lastName}`.trim() || 'Unknown';
|
||||
const phone = patient.phones?.primaryPhoneNumber;
|
||||
const email = patient.emails?.primaryEmail;
|
||||
|
||||
const appointments = patientData?.appointments?.edges?.map((e: any) => e.node) ?? [];
|
||||
const patientCalls = patientData?.calls?.edges?.map((e: any) => e.node) ?? [];
|
||||
|
||||
const patientAge = patientData?.dateOfBirth
|
||||
? Math.floor((Date.now() - new Date(patientData.dateOfBirth).getTime()) / (365.25 * 24 * 60 * 60 * 1000))
|
||||
: null;
|
||||
const patientGender = patientData?.gender === 'MALE' ? 'M' : patientData?.gender === 'FEMALE' ? 'F' : null;
|
||||
|
||||
// Filter activities for this patient (if Lead activities are provided)
|
||||
const patientActivities = activities
|
||||
.filter((a) => a.leadId === patient.id)
|
||||
.sort((a, b) => new Date(b.occurredAt ?? b.createdAt ?? '').getTime() - new Date(a.occurredAt ?? a.createdAt ?? '').getTime())
|
||||
.slice(0, 10);
|
||||
|
||||
return (
|
||||
<div className="p-4 space-y-4">
|
||||
{/* Profile */}
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-primary">{fullName}</h3>
|
||||
{phone && <p className="text-sm text-secondary">{formatPhone({ number: phone, callingCode: '+91' })}</p>}
|
||||
{email && <p className="text-xs text-tertiary">{email}</p>}
|
||||
<div className="mt-2 flex flex-wrap gap-1.5">
|
||||
{patientAge !== null && patientGender && (
|
||||
<Badge size="sm" color="gray" type="pill-color">{patientAge}y · {patientGender}</Badge>
|
||||
)}
|
||||
{patient.patientType && <Badge size="sm" color="brand">{patient.patientType}</Badge>}
|
||||
{patient.gender && (
|
||||
<Badge size="sm" color="gray">
|
||||
{patient.gender.charAt(0) + patient.gender.slice(1).toLowerCase()}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Loading state */}
|
||||
{loadingPatient && (
|
||||
<p className="text-xs text-tertiary">Loading patient details...</p>
|
||||
)}
|
||||
|
||||
{/* Appointments */}
|
||||
{appointments.length > 0 && (
|
||||
<div>
|
||||
<h4 className="mb-2 text-xs font-bold text-secondary uppercase">Appointments</h4>
|
||||
<div className="space-y-2">
|
||||
{appointments.map((appt: any) => {
|
||||
const statusColors: Record<string, 'success' | 'brand' | 'warning' | 'error' | 'gray'> = {
|
||||
COMPLETED: 'success', SCHEDULED: 'brand', CONFIRMED: 'brand',
|
||||
CANCELLED: 'error', NO_SHOW: 'warning',
|
||||
};
|
||||
return (
|
||||
<div key={appt.id} className="flex items-start gap-2 rounded-lg bg-secondary p-2">
|
||||
<CalendarCheck className="mt-0.5 size-3.5 text-fg-brand-primary shrink-0" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-xs font-semibold text-primary">
|
||||
{appt.doctorName ?? 'Doctor'} · {appt.department ?? ''}
|
||||
</span>
|
||||
{appt.status && (
|
||||
<Badge size="sm" color={statusColors[appt.status] ?? 'gray'}>
|
||||
{appt.status.toLowerCase()}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-[10px] text-quaternary">
|
||||
{appt.scheduledAt ? formatShortDate(appt.scheduledAt) : ''}
|
||||
{appt.reasonForVisit ? ` — ${appt.reasonForVisit}` : ''}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Recent calls */}
|
||||
{patientCalls.length > 0 && (
|
||||
<div>
|
||||
<h4 className="mb-2 text-xs font-bold text-secondary uppercase">Recent Calls</h4>
|
||||
<div className="space-y-1">
|
||||
{patientCalls.map((call: any) => (
|
||||
<div key={call.id} className="flex items-center gap-2 text-xs">
|
||||
<div className="mt-0.5 size-1.5 shrink-0 rounded-full bg-fg-quaternary" />
|
||||
<span className="text-primary">
|
||||
{call.direction === 'INBOUND' ? 'Inbound' : 'Outbound'}
|
||||
{call.disposition ? ` — ${call.disposition.replace(/_/g, ' ').toLowerCase()}` : ''}
|
||||
</span>
|
||||
<span className="text-quaternary ml-auto">{call.startedAt ? formatShortDate(call.startedAt) : ''}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Activity timeline (if activities provided) */}
|
||||
{patientActivities.length > 0 && (
|
||||
<div>
|
||||
<h4 className="mb-2 text-xs font-bold text-secondary uppercase">Activity</h4>
|
||||
<div className="space-y-2">
|
||||
{patientActivities.map((a) => (
|
||||
<div key={a.id} className="flex items-start gap-2">
|
||||
<div className="mt-1.5 size-1.5 shrink-0 rounded-full bg-fg-quaternary" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-xs text-primary">{a.summary}</p>
|
||||
<p className="text-[10px] text-quaternary">
|
||||
{a.activityType}{a.occurredAt ? ` · ${formatShortDate(a.occurredAt)}` : ''}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty state when no data */}
|
||||
{!loadingPatient && appointments.length === 0 && patientCalls.length === 0 && patientActivities.length === 0 && (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-center">
|
||||
<FontAwesomeIcon icon={faSparkles} className="mb-2 size-6 text-fg-quaternary" />
|
||||
<p className="text-xs text-tertiary">No appointments or call history yet</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useMemo, useState } from 'react';
|
||||
import { useNavigate } from 'react-router';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faUser, faMagnifyingGlass, faEye, faCommentDots, faMessageDots } from '@fortawesome/pro-duotone-svg-icons';
|
||||
import { faUser, faMagnifyingGlass, faEye, faCommentDots, faMessageDots, faSidebarFlip, faSidebar } from '@fortawesome/pro-duotone-svg-icons';
|
||||
import { faIcon } from '@/lib/icon-wrapper';
|
||||
|
||||
const SearchLg = faIcon(faMagnifyingGlass);
|
||||
@@ -12,8 +12,10 @@ import { Input } from '@/components/base/input/input';
|
||||
import { Table, TableCard } from '@/components/application/table/table';
|
||||
import { TopBar } from '@/components/layout/top-bar';
|
||||
import { ClickToCallButton } from '@/components/call-desk/click-to-call-button';
|
||||
import { PatientProfilePanel } from '@/components/shared/patient-profile-panel';
|
||||
import { useData } from '@/providers/data-provider';
|
||||
import { getInitials } from '@/lib/format';
|
||||
import { cx } from '@/utils/cx';
|
||||
import type { Patient } from '@/types/entities';
|
||||
|
||||
const computeAge = (dateOfBirth: string | null): number | null => {
|
||||
@@ -58,6 +60,8 @@ export const PatientsPage = () => {
|
||||
const navigate = useNavigate();
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [statusFilter, setStatusFilter] = useState<'all' | 'active' | 'inactive'>('all');
|
||||
const [selectedPatient, setSelectedPatient] = useState<Patient | null>(null);
|
||||
const [panelOpen, setPanelOpen] = useState(false);
|
||||
|
||||
const filteredPatients = useMemo(() => {
|
||||
return patients.filter((patient) => {
|
||||
@@ -80,10 +84,11 @@ export const PatientsPage = () => {
|
||||
}, [patients, searchQuery, statusFilter]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-1 flex-col">
|
||||
<div className="flex flex-1 flex-col overflow-hidden">
|
||||
<TopBar title="Patients" subtitle={`${filteredPatients.length} patients`} />
|
||||
|
||||
<div className="flex flex-1 flex-col overflow-y-auto p-7">
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
<div className="flex flex-1 flex-col overflow-y-auto p-7">
|
||||
<TableCard.Root size="sm">
|
||||
<TableCard.Header
|
||||
title="All Patients"
|
||||
@@ -91,6 +96,13 @@ export const PatientsPage = () => {
|
||||
description="Manage and view patient records"
|
||||
contentTrailing={
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setPanelOpen(!panelOpen)}
|
||||
className="flex size-8 items-center justify-center rounded-lg text-fg-quaternary hover:text-fg-secondary hover:bg-primary_hover transition duration-100 ease-linear"
|
||||
title={panelOpen ? 'Hide patient profile' : 'Show patient profile'}
|
||||
>
|
||||
<FontAwesomeIcon icon={panelOpen ? faSidebarFlip : faSidebar} className="size-4" />
|
||||
</button>
|
||||
{/* Status filter buttons */}
|
||||
<div className="flex rounded-lg border border-secondary overflow-hidden">
|
||||
{(['all', 'active', 'inactive'] as const).map((status) => (
|
||||
@@ -157,7 +169,17 @@ export const PatientsPage = () => {
|
||||
: '?';
|
||||
|
||||
return (
|
||||
<Table.Row id={patient.id}>
|
||||
<Table.Row
|
||||
id={patient.id}
|
||||
className={cx(
|
||||
'cursor-pointer',
|
||||
selectedPatient?.id === patient.id && 'bg-brand-primary'
|
||||
)}
|
||||
onAction={() => {
|
||||
setSelectedPatient(patient);
|
||||
setPanelOpen(true);
|
||||
}}
|
||||
>
|
||||
{/* Patient name + avatar */}
|
||||
<Table.Cell>
|
||||
<div className="flex items-center gap-3">
|
||||
@@ -266,6 +288,30 @@ export const PatientsPage = () => {
|
||||
</Table>
|
||||
)}
|
||||
</TableCard.Root>
|
||||
</div>
|
||||
|
||||
{/* Patient Profile Panel - collapsible with smooth transition */}
|
||||
<div className={cx(
|
||||
"shrink-0 border-l border-secondary bg-primary flex flex-col overflow-hidden transition-all duration-200 ease-linear",
|
||||
panelOpen ? "w-[450px]" : "w-0 border-l-0",
|
||||
)}>
|
||||
{panelOpen && (
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="flex items-center justify-between border-b border-secondary px-4 py-3">
|
||||
<h3 className="text-sm font-semibold text-primary">Patient Profile</h3>
|
||||
<button
|
||||
onClick={() => setPanelOpen(false)}
|
||||
className="flex size-6 items-center justify-center rounded-lg text-fg-quaternary hover:text-fg-secondary hover:bg-primary_hover transition duration-100 ease-linear"
|
||||
>
|
||||
<FontAwesomeIcon icon={faSidebarFlip} className="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<PatientProfilePanel patient={selectedPatient} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user