helix-admin/helix-engage
1
0
Fork 0
mirror of https://dev.azure.com/globalhealthx/EMR/_git/helix-engage synced 2026-04-11 18:28:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

added Patient info from Patient master

Browse Source
This commit is contained in:
moulichand16
2026-03-25 16:14:15 +05:30
parent 710609dfee
commit 30b59be604
2 changed files with 241 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/pages/patients.tsx
View File

@@ -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>
);