@kenyaemr/esm-facility-dashboard-app 5.4.1-pre.1867

package/jest.config.js

@@ -0,0 +1,8 @@
+const rootConfig = require('../../jest.config.js');
+
+const packageConfig = {
+  ...rootConfig,
+  collectCoverage: false,
+};
+
+module.exports = packageConfig;

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@kenyaemr/esm-facility-dashboard-app",
+  "version": "5.4.1-pre.1867",
+  "description": "Facility dashboard app",
+  "browser": "dist/kenyaemr-esm-facility-dashboard-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "license": "MPL-2.0",
+  "homepage": "https://github.com/palladiumkenya/kenyaemr-esm-3.x#readme",
+  "scripts": {
+    "start": "openmrs develop",
+    "serve": "webpack serve --mode=development",
+    "debug": "npm run serve",
+    "build": "webpack --mode production",
+    "analyze": "webpack --mode=production --env.analyze=true",
+    "lint": "eslint src --ext ts,tsx",
+    "typescript": "tsc",
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js",
+    "test": "cross-env TZ=UTC jest --config jest.config.js --verbose false --passWithNoTests",
+    "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js",
+    "coverage": "yarn test --coverage"
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "keywords": [
+    "openmrs"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/palladiumkenya/kenyaemr-esm-3.x#readme"
+  },
+  "bugs": {
+    "url": "https://github.com/palladiumkenya/kenyaemr-esm-3.x/issues"
+  },
+  "dependencies": {
+    "lodash-es": "^4.17.15",
+    "react-to-print": "^2.14.13"
+  },
+  "peerDependencies": {
+    "@carbon/react": "1.x",
+    "@openmrs/esm-framework": "5.x",
+    "react": "^18.1.0",
+    "react-i18next": "11.x",
+    "react-router-dom": "6.x",
+    "swr": "2.x"
+  },
+  "devDependencies": {
+    "webpack": "^5.74.0"
+  },
+  "stableVersion": "5.4.0"
+}

package/src/above-site/above-site-dashboard.component.tsx

@@ -0,0 +1,32 @@
+import { Button, Layer } from '@carbon/react';
+import { useConfig } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import FacilityDashboardHeader from '../components/header/header.component';
+import { FacilityDashboardConfigObject } from '../config-schema';
+import styles from './above-site.scss';
+
+const AboveSiteDashboard = () => {
+  const { t } = useTranslation();
+  const { facilityDashboardAboveSiteUrl } = useConfig<FacilityDashboardConfigObject>();
+  return (
+    <Layer>
+      <FacilityDashboardHeader title={t('aboveSiteFacilityDashboard', 'Above site facility Dashboard')} />
+
+      <Button
+        className={styles.supersetBtn}
+        onClick={() => {
+          window.open(facilityDashboardAboveSiteUrl, '_blank');
+        }}>
+        {t('viewOnSuperset', 'View on Superset')}
+      </Button>
+
+      <iframe
+        className={styles.dashboard}
+        src={`${facilityDashboardAboveSiteUrl}?standalone=true`}
+        title={t('aboveSiteDashboard', 'Above Site Dashboard')}></iframe>
+    </Layer>
+  );
+};
+
+export default AboveSiteDashboard;

package/src/above-site/above-site.scss

@@ -0,0 +1,13 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.dashboard {
+  width: 100%;
+  height: 85vh;
+  padding: 0 layout.$spacing-05 0 layout.$spacing-05;
+}
+
+.supersetBtn {
+  margin-left: layout.$spacing-05;
+}

package/src/components/empty-state/empty-state-log.components.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './empty-state-log.scss';
+import { DataEnrichment } from '@carbon/react/icons';
+import { EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
+
+interface EmptyStateProps {
+  subTitle: string;
+}
+
+const EmptyState: React.FC<EmptyStateProps> = ({ subTitle }) => {
+  return (
+    <div className={styles.emptyStateContainer}>
+      <EmptyDataIllustration />
+      <p className={styles.subTitle}>{subTitle}</p>
+    </div>
+  );
+};
+
+export default EmptyState;

package/src/components/empty-state/empty-state-log.scss

@@ -0,0 +1,28 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.emptyStateContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+  background-color: colors.$gray-10;
+  row-gap: layout.$spacing-02;
+
+  & form {
+    border: none;
+  }
+  .subTitle {
+    @include type.type-style('body-compact-01');
+    color: colors.$cool-gray-70;
+    margin-top: layout.$spacing-04;
+  }
+}
+
+svg.iconOverrides {
+  width: layout.$spacing-11;
+  height: layout.$spacing-11;
+  fill: var(--brand-03);
+}

package/src/components/empty-state/empty-state-log.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
+import EmptyState from './empty-state-log.components';
+import React from 'react';
+
+// Mock the EmptyDataIllustration component
+jest.mock('@openmrs/esm-patient-common-lib', () => ({
+  EmptyDataIllustration: jest.fn(() => <div>Mocked EmptyDataIllustration</div>),
+}));
+
+describe('EmptyState', () => {
+  it('renders the EmptyState component with the given subtitle', () => {
+    const testSubtitle = 'No data available';
+
+    render(<EmptyState subTitle={testSubtitle} />);
+
+    const subtitleElement = screen.getByText(testSubtitle);
+    expect(subtitleElement).toBeInTheDocument();
+
+    const illustrationElement = screen.getByText('Mocked EmptyDataIllustration');
+    expect(illustrationElement).toBeInTheDocument();
+  });
+});

package/src/components/header/header-illustration.component.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './header.scss';
+import { ChartColumn } from '@carbon/react/icons';
+
+const FacilityDashboardIllustration: React.FC = () => {
+  return (
+    <div className={styles.svgContainer}>
+      <ChartColumn className={styles.iconOveriders} />
+    </div>
+  );
+};
+
+export default FacilityDashboardIllustration;

package/src/components/header/header.component.tsx

@@ -0,0 +1,34 @@
+import { Calendar, Location } from '@carbon/react/icons';
+import { formatDate, useSession } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import FacilityDashboardIllustration from './header-illustration.component';
+import styles from './header.scss';
+
+const FacilityDashboardHeader: React.FC<{ title: string }> = ({ title }) => {
+  const { t } = useTranslation();
+  const userSession = useSession();
+  const userLocation = userSession?.sessionLocation?.display;
+  return (
+    <div className={styles.header}>
+      <div className={styles.leftJustifiedItems}>
+        <FacilityDashboardIllustration />
+        <div className={styles.pageLabels}>
+          <p>{t('facilitydashboard', 'Facility Dashboard')}</p>
+          <p className={styles.pageName}>{title}</p>
+        </div>
+      </div>
+      <div className={styles.rightJustifiedItems}>
+        <div className={styles.dateAndLocation}>
+          <Location size={16} />
+          <span className={styles.value}>{userLocation}</span>
+          <span className={styles.middot}>&middot;</span>
+          <Calendar size={16} />
+          <span className={styles.value}>{formatDate(new Date(), { mode: 'standard' })}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FacilityDashboardHeader;

package/src/components/header/header.scss

@@ -0,0 +1,72 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.header {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  height: layout.$spacing-12;
+  background-color: $ui-02;
+  border: 1px solid $ui-03;
+  border-left: 0px;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 2rem;
+}
+
+.leftJustifiedItems {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-left: 0.75rem;
+}
+
+.rightJustifiedItems {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  padding-top: 1rem;
+}
+
+.pageName {
+  @include type.type-style('heading-04');
+}
+
+.pageLabels {
+  margin-left: 1rem;
+
+  p:first-of-type {
+    margin-bottom: 0.25rem;
+  }
+}
+
+.dateAndLocation {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-right: 1rem;
+}
+
+.value {
+  margin-left: 0.25rem;
+}
+
+.middot {
+  margin: 0 layout.$spacing-03;
+}
+
+.view {
+  @include type.type-style('label-01');
+}
+
+svg.iconOverrides {
+  width: 72 !important;
+  height: 72 !important;
+  fill: var(--brand-03);
+}
+
+.svgContainer svg {
+  width: 72px;
+  height: 72px;
+  fill: var(--brand-03);
+}

package/src/components/side-menu/left-panel.scss

@@ -0,0 +1,42 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.leftPanel {
+  border-right: 1px solid colors.$gray-20;
+  padding-top: layout.$spacing-05;
+
+  // Left nav menu item
+  :global(.cds--side-nav__link) {
+    color: colors.$gray-70;
+    @include type.type-style('heading-compact-01');
+
+    &:focus,
+    &:hover {
+      background-color: colors.$gray-10-hover;
+    }
+
+    // Active menu item
+    &:global(.active-left-nav-link) {
+      color: colors.$gray-100;
+      border-left: layout.$spacing-02 solid var(--brand-01);
+      outline: none;
+      padding: 0 layout.$spacing-04;
+      background-color: colors.$gray-20;
+    }
+  }
+}
+
+/* Desktop */
+:global(.omrs-breakpoint-gt-tablet) {
+  :global(.cds--side-nav__link) {
+    height: layout.$spacing-07;
+  }
+}
+
+/* Tablet */
+:global(.omrs-breakpoint-lt-desktop) {
+  :global(.cds--side-nav__link) {
+    height: layout.$spacing-09;
+  }
+}

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { SideNav } from '@carbon/react';
+import { attach, ExtensionSlot, isDesktop, useLayoutType } from '@openmrs/esm-framework';
+import styles from './left-panel.scss';
+
+attach('nav-menu-slot', 'admin-left-panel');
+
+const LeftPanel: React.FC = () => {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+
+  return (
+    isDesktop(layout) && (
+      <SideNav
+        aria-label={t('facilitydashboardLeftPannel', 'facility Dashboard Left Panel')}
+        className={styles.leftPanel}
+        expanded>
+        <ExtensionSlot name="facility-dashboard-left-panel-slot" />
+      </SideNav>
+    )
+  );
+};
+
+export default LeftPanel;

package/src/config-schema.ts

@@ -0,0 +1,16 @@
+import { Type } from '@openmrs/esm-framework';
+
+export const configSchema = {
+  facilityDashboardAboveSiteUrl: {
+    _type: Type.String,
+    _description: 'Facility dashboard link for superset analytics',
+    // links for testing above site superset dashbord embeding
+    // _default: 'https://odoosuperset.kenyahmis.org/superset/dashboard/11/', // Actual facility link
+    _default: 'https://superset.datatest.ch/superset/dashboard/10/', // Public accessible test link
+    // _default: 'http://192.168.1.102:8088/superset/dashboard/1/', // Local test instance link
+  },
+};
+
+export type FacilityDashboardConfigObject = {
+  facilityDashboardAboveSiteUrl: string;
+};

package/src/constants.ts

@@ -0,0 +1,15 @@
+export const moduleName = '@kenyaemr/esm-facility-dashboard-app';
+export const etlBasePath = `${window.spaBase}`;
+
+export const today = () => {
+  const date = new Date();
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+};
+
+export const DATE_PICKER_CONTROL_FORMAT = 'd/m/Y';
+
+export const DATE_PICKER_FORMAT = 'DD/MM/YYYY';
+
+export const formatNewDate = (date: Date | null | undefined) => {
+  return date ? new Date(date) : '';
+};

package/src/declarations.d.ts

@@ -0,0 +1,6 @@
+declare module '@carbon/react';
+declare module '*.css';
+declare module '*.scss';
+declare module '*.png';
+
+declare type SideNavProps = object;

package/src/hooks/useFacilityDashboardSurveillance.ts

@@ -0,0 +1,29 @@
+import { FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { IndicationMode, type SurveillanceSummary } from '../types';
+import { useCallback } from 'react';
+
+const useFacilityDashboardSurveillance = () => {
+  const url = `${restBaseUrl}/kenyaemr/facility-dashboard`;
+  const { data, error, isLoading, mutate } = useSWR<FetchResponse<SurveillanceSummary>>(url, openmrsFetch);
+  const getIndication = useCallback((indicator: number, denominator: number, threshold: number): IndicationMode => {
+    if (denominator === 0) {
+      return 'decreasing';
+    }
+    if (indicator > denominator * threshold) {
+      return 'increasing';
+    } else {
+      return 'decreasing';
+    }
+  }, []);
+
+  return {
+    surveillanceSummary: data?.data,
+    getIndication,
+    isLoading,
+    mutate,
+    error,
+  };
+};
+
+export default useFacilityDashboardSurveillance;

package/src/index.ts

@@ -0,0 +1,28 @@
+import { defineConfigSchema, getSyncLifecycle } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+import { moduleName } from './constants';
+import Root from './root.component';
+import { createLeftPanelLink } from './left-pannel-link.component';
+
+const options = {
+  featureName: 'esm-facility-dashboard-app',
+  moduleName,
+};
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+export const root = getSyncLifecycle(Root, options);
+
+export function startupApp() {
+  defineConfigSchema(moduleName, configSchema);
+}
+
+export const surveillanceDashboardLink = getSyncLifecycle(
+  createLeftPanelLink({ title: 'Surveillance', name: '' }),
+  options,
+);
+
+export const aboveSiteDashboardLink = getSyncLifecycle(
+  createLeftPanelLink({ title: 'Above site Dashboard', name: 'above-site' }),
+  options,
+);

package/src/left-pannel-link.component.tsx

@@ -0,0 +1,47 @@
+import React, { useMemo } from 'react';
+import last from 'lodash-es/last';
+import { BrowserRouter, useLocation } from 'react-router-dom';
+import { ConfigurableLink } from '@openmrs/esm-framework';
+
+export interface LinkConfig {
+  name: string;
+  title: string;
+}
+
+function LinkExtension({ config }: { config: LinkConfig }) {
+  const { name, title } = config;
+  const location = useLocation();
+
+  let urlSegment = useMemo(() => decodeURIComponent(last(location.pathname.split('/'))), [location.pathname]);
+
+  const isUUID = (value) => {
+    const regex = /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/;
+    return regex.test(value);
+  };
+
+  if (isUUID(urlSegment)) {
+    urlSegment = 'facility-dashboard';
+  }
+
+  const getName = (name: string) => {
+    if (!name) {
+      return 'facility-dashboard';
+    }
+    return name;
+  };
+
+  return (
+    <ConfigurableLink
+      to={`${window.getOpenmrsSpaBase()}facility-dashboard${name && name !== 'facility-dashboard' ? `/${name}` : ''}`}
+      className={`cds--side-nav__link ${getName(name) === urlSegment && 'active-left-nav-link'}`}>
+      {title}
+    </ConfigurableLink>
+  );
+}
+
+export const createLeftPanelLink = (config: LinkConfig) => () =>
+  (
+    <BrowserRouter>
+      <LinkExtension config={config} />
+    </BrowserRouter>
+  );

package/src/root.component.tsx

@@ -0,0 +1,34 @@
+import { setLeftNav, unsetLeftNav } from '@openmrs/esm-framework';
+import React, { useEffect } from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import LeftPanel from './components/side-menu/left-pannel.component';
+import styles from './root.scss';
+import SurveillanceDashboard from './surveillance/surveillance-dashboard.component';
+import AboveSiteDashboard from './above-site/above-site-dashboard.component';
+
+const Root: React.FC = () => {
+  const spaBasePath = window.spaBase;
+  const facilityDashboardBaseName = window.getOpenmrsSpaBase() + 'facility-dashboard';
+
+  useEffect(() => {
+    setLeftNav({
+      name: 'facility-dashboard-left-panel-slot',
+      basePath: spaBasePath,
+    });
+    return () => unsetLeftNav('facility-dashboard-left-panel-slot');
+  }, [spaBasePath]);
+
+  return (
+    <BrowserRouter basename={facilityDashboardBaseName}>
+      <LeftPanel />
+      <main className={styles.container}>
+        <Routes>
+          <Route path="/" element={<SurveillanceDashboard />} />
+          <Route path="/above-site" element={<AboveSiteDashboard />} />
+        </Routes>
+      </main>
+    </BrowserRouter>
+  );
+};
+
+export default Root;

package/src/root.scss

@@ -0,0 +1,12 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.container {
+  background-color: colors.$white-0;
+  height: calc(100vh - layout.$spacing-09);
+}
+
+:global(.omrs-breakpoint-gt-tablet) .container {
+  margin-left: var(--omrs-sidenav-width);
+}

package/src/routes.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "kenyaemrCharts": "^1.6.7"
+  },
+  "extensions": [
+    {
+      "component": "surveillanceDashboardLink",
+      "name": "surveillance-dashboard-link",
+      "slot": "facility-dashboard-left-panel-slot"
+    },
+    {
+      "component": "aboveSiteDashboardLink",
+      "name": "above-site-dashboard-link",
+      "slot": "facility-dashboard-left-panel-slot"
+    }
+  ],
+  "workspaces": [],
+  "modals": [],
+  "pages": [
+    {
+      "component": "root",
+      "route": "facility-dashboard"
+    }
+  ]
+}

package/src/setup-tests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/src/surveillance/summary-cards/summary-card.component.tsx

@@ -0,0 +1,30 @@
+import { Tile } from '@carbon/react';
+import { ArrowUp, ArrowDown } from '@carbon/react/icons';
+import React from 'react';
+import styles from './summary-card.scss';
+import { type IndicationMode } from '../../types';
+
+type Props = {
+  title: string;
+  value?: string;
+  header?: string;
+  mode?: IndicationMode;
+};
+
+const SummaryCard: React.FC<Props> = ({ title, value, header, mode }) => {
+  return (
+    <Tile className={styles.summaryCard}>
+      <span>
+        {mode === 'increasing' && <ArrowUp className={styles.upIcon} />}
+        {mode === 'decreasing' && <ArrowDown className={styles.downIcon} />}
+        {mode === 'increasing' && <ArrowUp className={styles.upIcon} />}
+        {mode === 'decreasing' && <ArrowDown className={styles.downIcon} />}
+      </span>
+      {header && <strong>{header}</strong>}
+      <h4>{value ?? '--'}</h4>
+      <p>{title}</p>
+    </Tile>
+  );
+};
+
+export default SummaryCard;