@kenyaemr/esm-adr-app 5.4.2-pre.2257

package/src/components/patient-adr.workspace.tsx

@@ -0,0 +1,79 @@
+import React, { useMemo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { InlineLoading, InlineNotification } from '@carbon/react';
+import { DefaultWorkspaceProps, ExtensionSlot, usePatient } from '@openmrs/esm-framework';
+import { useVisitOrOfflineVisit } from '@openmrs/esm-patient-common-lib';
+
+type encounter = {
+  formUuid: string;
+  encounterDatetime: string;
+  encounterType: string;
+  encounterUuid: string;
+  visitUuid: string;
+  patientUuid: string;
+  visitTypeUuid: string;
+};
+
+type PatientAdrWorkspaceProps = DefaultWorkspaceProps & {
+  encounter?: encounter;
+};
+
+export function PatientAdrWorkspace(props: PatientAdrWorkspaceProps) {
+  const { t } = useTranslation();
+  const { closeWorkspace, closeWorkspaceWithSavedChanges, promptBeforeClosing, encounter } = props;
+  const { formUuid, encounterUuid, visitUuid, patientUuid, visitTypeUuid } = encounter || {};
+  const { isLoading: isLoadingVisit, currentVisit, error: visitError } = useVisitOrOfflineVisit(patientUuid);
+  const { patient, isLoading: isLoadingPatient, error: patientError } = usePatient(patientUuid);
+  const state = useMemo<Record<string, unknown>>(
+    () => ({
+      view: 'form',
+      formUuid: formUuid ?? null,
+      visitUuid: visitUuid ?? null,
+      visitTypeUuid: visitTypeUuid ?? null,
+      patientUuid: patientUuid ?? null,
+      patient,
+      encounterUuid: encounterUuid ?? null,
+      closeWorkspaceWithSavedChanges,
+      closeWorkspace,
+      promptBeforeClosing,
+    }),
+    [
+      patientUuid,
+      encounterUuid,
+      patient,
+      closeWorkspace,
+      promptBeforeClosing,
+      formUuid,
+      visitUuid,
+      visitTypeUuid,
+      closeWorkspaceWithSavedChanges,
+    ],
+  );
+
+  const isLoading = isLoadingVisit || isLoadingPatient;
+  const error = visitError || patientError;
+
+  if (isLoading) {
+    return <InlineLoading description={t('loading', 'Loading')} iconDescription={t('loading', 'Loading data...')} />;
+  }
+
+  if (error) {
+    return (
+      <InlineNotification
+        aria-label={t('error', 'Error')}
+        kind="error"
+        onClose={() => {}}
+        onCloseButtonClick={() => {}}
+        statusIconDescription="notification"
+        subtitle={t('errorLoadingPatientWorkspace', 'Error loading patient workspace {{errorMessage}}', {
+          errorMessage: error?.message,
+        })}
+        title={t('error', 'Error')}
+      />
+    );
+  }
+
+  return <div>{patient && <ExtensionSlot name="form-widget-slot" state={state} />}</div>;
+}
+
+export default PatientAdrWorkspace;

package/src/components/side-menu/side-menu.component.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { LeftNavMenu } from '@openmrs/esm-framework';
+
+const SideMenu = () => <LeftNavMenu />;
+
+export default SideMenu;

package/src/components/summary/summary.component.tsx

@@ -0,0 +1,84 @@
+import React, { useEffect, useState } from 'react';
+import dayjs from 'dayjs';
+
+import styles from './summary.scss';
+import AdrEncounter from '../encounters/adr-encounter.component';
+import { useTranslation } from 'react-i18next';
+import { useAdrAssessmentEncounter } from '../encounters/encounter.resource';
+import { DataTableSkeleton, DatePicker, DatePickerInput } from '@carbon/react';
+
+type SummaryProps = {};
+
+const Summary: React.FC<SummaryProps> = () => {
+  const { t } = useTranslation();
+  const defaultDateRange: [Date, Date] = [dayjs().startOf('day').toDate(), dayjs().endOf('day').toDate()];
+  const [dateRange, setDateRange] = useState<[Date, Date]>(defaultDateRange);
+  const formattedStartDate = dayjs(dateRange[0]).startOf('day').format('YYYY-MM-DDTHH:mm:ss');
+  const formattedEndDate = dayjs(dateRange[1]).endOf('day').format('YYYY-MM-DDTHH:mm:ss');
+  const { encounters, isLoading } = useAdrAssessmentEncounter(formattedStartDate, formattedEndDate);
+  const [counts, setCounts] = useState({
+    assessment: 0,
+  });
+
+  const handleDateRangeChange = ([start, end]: Array<Date>) => {
+    if (start && end) {
+      setDateRange([start, end]);
+    }
+  };
+
+  useEffect(() => {
+    const adrAssessmentCount = encounters.filter(
+      (encounter) => encounter.encounterTypeUuid === 'd18d6d8a-4be2-4115-ac7e-86cc0ec2b263',
+    ).length;
+
+    setCounts({
+      assessment: adrAssessmentCount,
+    });
+  }, [encounters]);
+
+  if (isLoading) {
+    return (
+      <div className={styles.loaderContainer}>
+        <DataTableSkeleton showHeader={false} showToolbar={false} zebra />
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className={styles.filterContainer}>
+        <DatePicker
+          maxDate={new Date()}
+          datePickerType="range"
+          className={styles.dateRangePicker}
+          value={[...dateRange]}
+          onChange={handleDateRangeChange}>
+          <DatePickerInput
+            id="date-picker-input-id-start"
+            placeholder="mm/dd/yyyy"
+            labelText={t('startDate', 'Start date')}
+            size="md"
+          />
+          <DatePickerInput
+            id="date-picker-input-id-finish"
+            placeholder="mm/dd/yyyy"
+            labelText={t('endDate', 'End date')}
+            size="md"
+          />
+        </DatePicker>
+      </div>
+      <div className={styles.summaryContainer}>
+        <div className={styles.summaryCard}>
+          <h4>{t('adrAssessment', 'ADR Assessment')}</h4>
+          <div>
+            <h6>{t('totalAdrAssessment', 'Total ADR assessment')}</h6>
+            <p>{counts.assessment}</p>
+          </div>
+        </div>
+      </div>
+      <AdrEncounter encounters={encounters} />
+    </>
+  );
+};
+
+export default Summary;

package/src/components/summary/summary.scss

@@ -0,0 +1,35 @@
+@use '@carbon/layout';
+@use '@carbon/colors';
+
+.summaryContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: layout.$spacing-05;
+  padding: layout.$spacing-05;
+}
+
+.summaryCard {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: layout.$spacing-05;
+  padding: layout.$spacing-05;
+  border: 1px solid colors.$gray-20;
+  width: 100%;
+  height: 7.875rem;
+  background-color: colors.$white;
+}
+
+.dateRangePicker {
+  flex-grow: unset;
+}
+.filterContainer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: layout.$spacing-05;
+  text-align: end;
+  align-items: center;
+  justify-content: flex-end;
+  padding: layout.$spacing-05;
+}

package/src/config-schema.ts

@@ -0,0 +1 @@
+export const configSchema = {};

package/src/declarations.d.ts

@@ -0,0 +1,2 @@
+declare module '*.css';
+declare module '*.scss';

package/src/index.ts

@@ -0,0 +1,30 @@
+import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+import AdrAssessmentApp from './root.component';
+import { createDashboardLink } from '@openmrs/esm-patient-common-lib';
+import SideMenu from './components/side-menu/side-menu.component';
+import Summary from './components/summary/summary.component';
+
+const moduleName = '@kenyaemr/esm-adr-app';
+
+const options = {
+  featureName: 'adr-assessment',
+  moduleName,
+};
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+export const adrAssessmentApp = getSyncLifecycle(AdrAssessmentApp, options);
+export const adrAssessmentSideNav = getSyncLifecycle(SideMenu, options);
+export const adrAssessmentSummary = getSyncLifecycle(Summary, options);
+export const patientAdrWorkspace = getAsyncLifecycle(() => import('./components/patient-adr.workspace'), options);
+
+// Dashboard link for the search page
+export const overviewDashboardLink = getSyncLifecycle(
+  createDashboardLink({ moduleName, path: 'overview', title: 'Overview', icon: '' }),
+  options,
+);
+
+export function startupApp() {
+  defineConfigSchema(moduleName, configSchema);
+}

package/src/root.component.tsx

@@ -0,0 +1,27 @@
+import React, { useEffect } from 'react';
+import { Routes, BrowserRouter, Route } from 'react-router-dom';
+import { setLeftNav, unsetLeftNav, WorkspaceContainer } from '@openmrs/esm-framework';
+import Dashboard from './components/dashboard/home-dashboard.component';
+
+const AdrAssessmentApp = () => {
+  const spaBasePath = `${window.spaBase}/adr-assessment`;
+
+  useEffect(() => {
+    setLeftNav({ name: 'adr-assessment-page-dashboard-slot', basePath: spaBasePath });
+    return () => unsetLeftNav('adr-assessment-page-dashboard-slot');
+  }, [spaBasePath]);
+
+  return (
+    <main>
+      <BrowserRouter basename={window.spaBase}>
+        <Routes>
+          <Route path="/adr-assessment" element={<Dashboard />} />
+          <Route path="/adr-assessment/:dashboard/*" element={<Dashboard />} />
+        </Routes>
+        <WorkspaceContainer key="adr-assessment" contextKey="adr-assessment"></WorkspaceContainer>
+      </BrowserRouter>
+    </main>
+  );
+};
+
+export default AdrAssessmentApp;

package/src/routes.json

@@ -0,0 +1,47 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "kenyaemr": "^19.0.0"
+  },
+  "pages": [
+    {
+      "component": "adrAssessmentApp",
+      "route": "adr-assessment"
+    }
+  ],
+  "workspaces": [
+    {
+      "name": "patient-adr-workspace",
+      "title": "ADR Assessment Review",
+      "component": "patientAdrWorkspace",
+      "type": "workspace",
+      "canMaximize": true,
+      "canHide": true,
+      "width": "extra-wide"
+    }
+
+
+  ],
+  "extensions": [
+    {
+      "name": "adr-assessment-side-nav",
+      "slot": "adr-assessment-side-nav-slot",
+      "component": "adrAssessmentSideNav"
+    },
+    {
+      "name": "adr-assessment-search-dashboard-db-link",
+      "slot": "adr-assessment-page-dashboard-slot",
+      "component": "overviewDashboardLink",
+      "meta": {
+        "name": "adr-assessment-overview",
+        "title": "Overview",
+        "slot": "adr-assessment-overview-dashboard-slot"
+      }
+    },
+    {
+      "name": "adr-assessment-summary",
+      "component": "adrAssessmentSummary",
+      "slot": "adr-assessment-overview-dashboard-slot"
+    }
+  ]
+}

package/src/types/index.ts

@@ -0,0 +1,21 @@
+export type DashboardConfig = {
+  name: string;
+  slot: string;
+  title: string;
+};
+
+export interface MappedAdrEncounter {
+  encounterUuid: string;
+  encounterTypeUuid: string;
+  patientUuid: string;
+  patientName: string;
+  encounterType: string;
+  encounterDatetime: string;
+  visitTypeName: string;
+  formName: string;
+  location: string;
+  provider: string;
+  formUuid?: string;
+  visitUuid?: string;
+  visitTypeUuid?: string;
+}

package/translations/en.json

@@ -0,0 +1,12 @@
+{
+  "adrAssessment": "ADR Assessment",
+  "adrAssessmentEncounters": "ADR Assessment Encounters",
+  "encounters": "Encounters",
+  "endDate": "End date",
+  "noAdrEncountersFound": "Adr assessment encounters",
+  "noEncountersFoundTitle": "No encounters found",
+  "review": "Review",
+  "startDate": "Start date",
+  "summaryOfAdrAssessmentEncounters": "Summary of ADR assessment encounters",
+  "totalAdrAssessment": "Total ADR assessment"
+}

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*"],
+  "exclude": ["src/**/*.test.tsx", "src/**/*.outdated.tsx"]
+}

package/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require('openmrs/default-webpack-config');