Encounter list and patient dashboard done

Author: ir4y

src/containers/EncountersUberList/index.tsx

@@ -1,23 +1,21 @@
 import { PlusOutlined } from '@ant-design/icons';
 import { t, Trans } from '@lingui/macro';
-import { Encounter } from 'fhir/r4b';
+import { Encounter, Reference } from 'fhir/r4b';
 
 import { questionnaireAction, navigationAction, ResourceListPage } from '@beda.software/emr/components';
 import { SearchBarColumnType } from '@beda.software/emr/dist/components/SearchBar/types';
-import { formatPeriodDateTime } from '@beda.software/emr/utils';
+import { compileAsFirst, formatPeriodDateTime } from '@beda.software/emr/utils';
+
+export const getPractitioner = compileAsFirst<Encounter,Reference>("Encounter.participant.individual.where(resourceType='Practitioner').individual");
+export const getPatient= compileAsFirst<Encounter, Reference>("Encounter.subject");
+export const getOrganization = compileAsFirst<Encounter,Reference>("Encounter.serviceProvider");
 
 export function EncountersUberList() {
     return (
         <ResourceListPage<Encounter>
             headerTitle="Encounters"
             resourceType="Encounter"
             getTableColumns={() => [
-                {
-                    title: 'Practitioner',
-                    dataIndex: 'practitioner',
-                    key: 'practitioner',
-                    render: (_text: any, { resource }) => resource.participant?.[0]?.individual?.display,
-                },
                 {
                     title: 'Status',
                     dataIndex: 'status',
@@ -33,6 +31,42 @@ export function EncountersUberList() {
                     width: 250,
                     render: (_text: any, { resource }) => formatPeriodDateTime(resource.period),
                 },
+                {
+                    title: 'Practitioner',
+                    dataIndex: 'practitioner',
+                    key: 'practitioner',
+                    render: (_text: any, { resource }) => {
+                        const reference = getPractitioner(resource);
+                        if(reference){
+                            return reference.display ?? reference.reference;
+
+                        }
+                    },
+                },
+                {
+                    title: 'Patient',
+                    dataIndex: 'patient',
+                    key: 'patient',
+                    render: (_text: any, { resource }) => {
+                        const reference = getPatient(resource);
+                        if (reference) {
+                            return reference.display ?? reference.reference;
+
+                        }
+                    },
+                },
+                {
+                    title: 'Organization',
+                    dataIndex: 'organization',
+                    key: 'organization',
+                    render: (_text: any, { resource }) => {
+                        const reference = getOrganization(resource);
+                        if (reference) {
+                            return reference.display ?? reference.reference;
+
+                        }
+                    },
+                },
             ]}
             getFilters={() => [
                 {
@@ -68,7 +102,6 @@ export function EncountersUberList() {
                     placement: ['table', 'search-bar'],
                 },
             ]}
-            getRecordActions={(record) => [navigationAction('Open', `/`)]}
             getHeaderActions={() => [
                 questionnaireAction(<Trans>Create encounter</Trans>, 'encounter-create-connectathon', {
                     icon: <PlusOutlined />,

src/containers/ImmunizationsUberList /index.tsx

@@ -55,7 +55,7 @@ export function ImmunizationsUberList() {
                     placement: ['table', 'search-bar'],
                 },
             ]}
-            getRecordActions={(record) => [navigationAction('Open', `/`)]}
+            getRecordActions={(_record) => [navigationAction('Open', `/`)]}
             getHeaderActions={() => [
                 questionnaireAction(<Trans>Create immunization</Trans>, 'immunization-create-connectathon', {
                     icon: <PlusOutlined />,

src/containers/PatientsUberList/dashboard.tsx

@@ -0,0 +1,82 @@
+import type { Dashboard, DashboardInstance } from '@beda.software/emr/dist/components/Dashboard/types';
+import { OverviewCard } from '@beda.software/emr/dist/containers/PatientDetails/PatientOverviewDynamic/components/StandardCard/types';
+import { StandardCardContainerFabric } from '@beda.software/emr/dist/containers/PatientDetails/PatientOverviewDynamic/containers/StandardCardContainerFabric/index';
+import { Bundle, Encounter, Patient } from 'fhir/r4b';
+import { getOrganization, getPractitioner } from '../EncountersUberList';
+import { formatPeriodDateTime } from '@beda.software/emr/utils';
+
+function prepareEncounter(
+    resources: Encounter[],
+    bundle: Bundle<Encounter>,
+): OverviewCard<Encounter> {
+
+    return {
+        title: 'Encounters',
+        key: 'ecnounter',
+        icon: <h2></h2>,
+        data: resources,
+        total: bundle.total ?? 0,
+        getKey: (r) => r.id!,
+        columns: [
+            {
+                title: 'Status',
+                key: 'status',
+                render: (resource) => {
+                    return resource.status;
+                },
+            },
+            {
+                title: 'Date',
+                key: 'date',
+                width: 250,
+                render: (resource) => formatPeriodDateTime(resource.period),
+            },
+            {
+                title: 'Practitioner',
+                key: 'practitioner',
+                render: (resource) => {
+                    const reference = getPractitioner(resource);
+                    if (reference) {
+                        return reference.display ?? reference.reference;
+
+                    }
+                },
+            },
+            {
+                title: 'Organization',
+                key: 'organization',
+                render: (resource) => {
+                    const reference = getOrganization(resource);
+                    if (reference) {
+                        return reference.display ?? reference.reference;
+
+                    }
+                },
+            },
+       ]
+        ,
+    };
+}
+
+const patientDashboardConfig: DashboardInstance = {
+    top: [
+        {
+            query: {
+                resourceType: 'Encounter',
+                search: (patient: Patient) => ({
+                    patient: patient.id,
+                    _count: 7,
+                }),
+            },
+            widget: StandardCardContainerFabric(prepareEncounter),
+        },
+ 
+    ],
+    left: [],
+    right: [],
+    bottom: [],
+}
+
+export const dashboard: Dashboard = {
+    default: patientDashboardConfig,
+};

src/containers/PatientsUberList/detail.tsx

@@ -0,0 +1,34 @@
+import { Patient } from 'fhir/r4b';
+
+import { PatientDashboardProvider } from '@beda.software/emr/dist/components/Dashboard/contexts';
+import { PatientOverview } from '@beda.software/emr/dist/containers/PatientDetails/PatientOverviewDynamic/index';
+import { ResourceDetailPage, Tab } from '@beda.software/emr/dist/uberComponents/ResourceDetailPage/index';
+import { compileAsFirst } from '@beda.software/emr/dist/utils/index';
+
+import { dashboard } from './dashboard';
+
+
+const getName = compileAsFirst<Patient, string>("Patient.name.given.first() + ' ' + Patient.name.family");
+
+
+const tabs: Array<Tab<Patient>> = [
+    {
+        path: '',
+        label: 'Overview',
+        component: ({ resource }) => <PatientOverview patient={resource} />,
+    }
+];
+
+export function PatientDetails() {
+    return (
+        <PatientDashboardProvider dashboard={dashboard}>
+            <ResourceDetailPage<Patient>
+                resourceType="Patient"
+                getSearchParams={({ id }) => ({ _id: id })}
+                getTitle={({ resource, bundle }) => getName(resource, { bundle })!}
+                tabs={tabs}
+            />
+        </PatientDashboardProvider>
+    );
+}
+

src/containers/PatientsUberList/index.tsx

@@ -86,9 +86,7 @@ export function PatientUberList() {
                 },
             ]}
             getRecordActions={(record) => [
-                navigationAction('Open', `/patients/${record.resource.id}`),
-                questionnaireAction('Edit', 'patient-edit'),
-                customAction(<S.LinkButton type="link">Custom action</S.LinkButton>),
+                navigationAction('Open', `/patients-ph/${record.resource.id}`),
             ]}
             getHeaderActions={() => [
                 questionnaireAction(<Trans>Add patient</Trans>, 'patient-create-connectathon', {

src/main.tsx

@@ -45,6 +45,7 @@ import { PatientUberList } from './containers/PatientsUberList';
 import { PractitionersUberList } from './containers/PractitionersUberList ';
 import { ProceduresUberList } from './containers/ProceduresUberList';
 import { dynamicActivate, getCurrentLocale } from './services/i18n';
+import { PatientDetails } from './containers/PatientsUberList/detail';
 
 async function expandEMRValueSet(answerValueSet: string | undefined, searchText: string): Promise<Coding[]> {
     if (!answerValueSet) {
@@ -101,6 +102,7 @@ export const AppWithContext = () => {
                                 authenticatedRoutes={
                                     <>
                                         <Route path="/patients-ph" element={<PatientUberList />} />
+                                        <Route path="/patients-ph/:id" element={<PatientDetails />} />
                                         <Route path="/encounters-ph" element={<EncountersUberList />} />
                                         <Route path="/practitioners-ph" element={<PractitionersUberList />} />
                                         <Route path="/organizations-ph" element={<OrganizationsUberList />} />