@palladium-ethiopia/esm-clinical-workflow-app 5.4.2-pre.20

package/src/patient-scoreboard/metrics-card/metrics-card.component.scss

@@ -0,0 +1,84 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.tileContainer {
+  border: 1px solid colors.$gray-20;
+  height: 7.875rem;
+  padding: layout.$spacing-05;
+}
+
+.tileHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: layout.$spacing-03;
+}
+
+.headerLabel {
+  @include type.type-style('heading-compact-01');
+  color: colors.$gray-70;
+}
+
+.totalsLabel {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+}
+
+.totalsValue {
+  @include type.type-style('heading-04');
+  color: colors.$gray-100;
+}
+
+.headerLabelContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.link {
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  color: colors.$blue-60;
+}
+
+.metricsGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+
+  &:has(.countGrid) {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  &:not(:has(.countGrid)) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.metricsContent {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.countGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  justify-self: flex-end;
+  column-gap: layout.$spacing-03;
+  row-gap: layout.$spacing-03;
+  margin: layout.$spacing-03;
+
+  & > span {
+    font-size: 0.7rem !important;
+    margin: 0;
+    color: colors.$gray-70;
+  }
+
+  & > p {
+    margin: 0;
+  }
+}

package/src/patient-scoreboard/metrics-card/metrics-card.component.tsx

@@ -0,0 +1,40 @@
+import React, { useMemo } from 'react';
+import dayjs from 'dayjs';
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
+import { useTranslation } from 'react-i18next';
+import isEmpty from 'lodash-es/isEmpty';
+
+import styles from './metrics-card.component.scss';
+
+dayjs.extend(isSameOrBefore);
+
+interface MetricsCardProps {
+  label: string;
+  value: number | string;
+  headerLabel: string;
+  selectedDate?: string;
+}
+
+const MetricsCard: React.FC<MetricsCardProps> = ({ label, value, headerLabel, selectedDate }) => {
+  const { t } = useTranslation();
+  const date = selectedDate || dayjs().format('YYYY-MM-DD');
+  const isSelectedDateInPast = useMemo(() => dayjs(date).isBefore(dayjs(), 'date'), [date]);
+
+  return (
+    <article className={styles.tileContainer}>
+      <div className={styles.tileHeader}>
+        <div className={styles.headerLabelContainer}>
+          <span className={styles.headerLabel}>{headerLabel}</span>
+        </div>
+      </div>
+      <div className={styles.metricsGrid}>
+        <div className={styles.metricsContent}>
+          <span className={styles.totalsLabel}>{label}</span>
+          <p className={styles.totalsValue}>{value}</p>
+        </div>
+      </div>
+    </article>
+  );
+};
+
+export default MetricsCard;

package/src/patient-scoreboard/patient-scoreboard.component.scss

@@ -0,0 +1,47 @@
+@use '@carbon/layout';
+@use '@carbon/colors';
+@use '@carbon/type';
+
+.patientScoreboardContainer {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-05;
+  padding: layout.$spacing-05;
+
+  h1 {
+    @include type.type-style('heading-05');
+    margin-bottom: layout.$spacing-03;
+  }
+
+  .cardsGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: layout.$spacing-05;
+  }
+
+  .visitsSection {
+    margin-top: layout.$spacing-06;
+  }
+
+  .switcher {
+    margin-bottom: layout.$spacing-05;
+  }
+
+  .patientScoreboardContent {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .scoreCard {
+    display: flex;
+    flex-direction: column;
+    gap: layout.$spacing-05;
+    width: 32%;
+    border: 1px solid colors.$gray-20;
+    padding: layout.$spacing-05;
+    min-height: 8rem;
+    font-weight: 600;
+    color: colors.$gray-70;
+  }
+}

package/src/patient-scoreboard/patient-scoreboard.component.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ContentSwitcher, Switch } from '@carbon/react';
+import { isDesktop, useLayoutType } from '@openmrs/esm-framework';
+
+import styles from './patient-scoreboard.component.scss';
+import ActiveVisitsCard from './visit-cards/active-visits.card';
+import ScheduledVisitsCard from './visit-cards/scheduled-visits.card';
+import TotalVisitsCard from './visit-cards/total-visits.card';
+import VisitsTable from './visits-table/visits-table.component';
+import { useActiveVisits, useScheduledVisits, useTotalVisits } from './hooks/useVisitList';
+
+type VisitType = 'active' | 'scheduled' | 'all';
+
+const PatientScoreboard: React.FC = () => {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+  const responsiveSize = isDesktop(layout) ? 'sm' : 'md';
+  const [selectedVisitType, setSelectedVisitType] = useState<VisitType>('active');
+
+  const { visits: activeVisits, isLoading: isLoadingActive } = useActiveVisits();
+  const { visits: scheduledVisits, isLoading: isLoadingScheduled } = useScheduledVisits();
+  const { visits: totalVisits, isLoading: isLoadingTotal } = useTotalVisits();
+
+  const getCurrentVisits = () => {
+    switch (selectedVisitType) {
+      case 'active':
+        return { visits: activeVisits, isLoading: isLoadingActive, heading: t('activeVisits', 'Active Visits') };
+      case 'scheduled':
+        return {
+          visits: scheduledVisits,
+          isLoading: isLoadingScheduled,
+          heading: t('scheduledVisits', 'Scheduled Visits'),
+        };
+      case 'all':
+        return { visits: totalVisits, isLoading: isLoadingTotal, heading: t('allVisits', 'All Visits') };
+      default:
+        return { visits: [], isLoading: false, heading: '' };
+    }
+  };
+
+  const { visits, isLoading, heading } = getCurrentVisits();
+
+  return (
+    <div className={styles.patientScoreboardContainer}>
+      <h1>Patient Scoreboard</h1>
+      <div className={styles.cardsGrid}>
+        <ActiveVisitsCard />
+        <ScheduledVisitsCard />
+        <TotalVisitsCard />
+      </div>
+
+      <div className={styles.visitsSection}>
+        <ContentSwitcher
+          className={styles.switcher}
+          size={responsiveSize}
+          onChange={({ name }) => setSelectedVisitType(name as VisitType)}
+          selectedIndex={['active', 'scheduled', 'all'].indexOf(selectedVisitType)}>
+          <Switch name="active" text={t('active', 'Active')} />
+          <Switch name="scheduled" text={t('scheduled', 'Scheduled')} />
+          <Switch name="all" text={t('all', 'All')} />
+        </ContentSwitcher>
+
+        <VisitsTable visits={visits} isLoading={isLoading} tableHeading={heading} />
+      </div>
+    </div>
+  );
+};
+
+export default PatientScoreboard;

package/src/patient-scoreboard/visit-cards/active-visits.card.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import MetricsCard from '../metrics-card/metrics-card.component';
+import { useActiveVisits } from '../hooks/useVisitList';
+
+export default function ActiveVisitsCard() {
+  const { t } = useTranslation();
+  const { count, isLoading } = useActiveVisits();
+
+  return (
+    <MetricsCard
+      headerLabel={t('activeVisits', 'Active Visits')}
+      label={t('visits', 'Visits')}
+      value={isLoading ? '...' : count}
+    />
+  );
+}

package/src/patient-scoreboard/visit-cards/scheduled-visits.card.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import MetricsCard from '../metrics-card/metrics-card.component';
+import { useScheduledVisits } from '../hooks/useVisitList';
+
+export default function ScheduledVisitsCard() {
+  const { t } = useTranslation();
+  const { count, isLoading } = useScheduledVisits();
+
+  return (
+    <MetricsCard
+      headerLabel={t('pastVisits', 'Past Visits')}
+      label={t('visits', 'Visits')}
+      value={isLoading ? '...' : count}
+    />
+  );
+}

package/src/patient-scoreboard/visit-cards/total-visits.card.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import MetricsCard from '../metrics-card/metrics-card.component';
+import { useTotalVisits } from '../hooks/useVisitList';
+
+export default function TotalVisitsCard() {
+  const { t } = useTranslation();
+  const { count, isLoading } = useTotalVisits();
+
+  return (
+    <MetricsCard
+      headerLabel={t('totalVisits', 'Total Visits')}
+      label={t('visits', 'Visits')}
+      value={isLoading ? '...' : count}
+    />
+  );
+}

package/src/patient-scoreboard/visits-table/visits-table.component.scss

@@ -0,0 +1,31 @@
+@use '@carbon/layout';
+@use '@carbon/colors';
+
+.visitsTableContainer {
+  margin-top: layout.$spacing-06;
+}
+
+.tableHeader {
+  margin-bottom: layout.$spacing-05;
+
+  h4 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: colors.$gray-100;
+  }
+}
+
+.link {
+  text-decoration: none;
+  color: colors.$blue-60;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.emptyState {
+  padding: layout.$spacing-06;
+  text-align: center;
+  color: colors.$gray-70;
+}

package/src/patient-scoreboard/visits-table/visits-table.component.tsx

@@ -0,0 +1,181 @@
+import React, { useState, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import dayjs from 'dayjs';
+import {
+  DataTable,
+  DataTableSkeleton,
+  Search,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Pagination,
+} from '@carbon/react';
+import {
+  ConfigurableLink,
+  formatDatetime,
+  isDesktop,
+  useLayoutType,
+  usePagination,
+  useConfig,
+  type Visit,
+} from '@openmrs/esm-framework';
+import styles from './visits-table.component.scss';
+
+interface VisitsTableProps {
+  visits: Array<Visit>;
+  isLoading: boolean;
+  tableHeading: string;
+}
+
+const VisitsTable: React.FC<VisitsTableProps> = ({ visits, isLoading, tableHeading }) => {
+  const { t } = useTranslation();
+  const [pageSize, setPageSize] = useState(25);
+  const [searchString, setSearchString] = useState('');
+  const layout = useLayoutType();
+  const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
+  const config = useConfig();
+  const customPatientChartUrl =
+    config?.customPatientChartUrl || '${openmrsSpaBase}/patient/${patientUuid}/chart/Visits';
+
+  const searchResults = useMemo(() => {
+    if (!visits || visits.length === 0) {
+      return [];
+    }
+    if (!searchString || searchString.trim() === '') {
+      return visits;
+    }
+
+    const search = searchString.toLowerCase();
+    return visits.filter((visit) => {
+      const patientName = visit.patient?.person?.display?.toLowerCase() || '';
+      const identifier = visit.patient?.identifiers?.[0]?.identifier?.toLowerCase() || '';
+      const location = visit.location?.display?.toLowerCase() || '';
+      const visitType = visit.visitType?.display?.toLowerCase() || '';
+
+      return (
+        patientName.includes(search) ||
+        identifier.includes(search) ||
+        location.includes(search) ||
+        visitType.includes(search)
+      );
+    });
+  }, [visits, searchString]);
+
+  const { results, goTo, currentPage } = usePagination(searchResults, pageSize);
+
+  const headerData = [
+    { header: t('patientName', 'Patient Name'), key: 'patientName' },
+    { header: t('identifier', 'Identifier'), key: 'identifier' },
+    { header: t('visitType', 'Visit Type'), key: 'visitType' },
+    { header: t('location', 'Location'), key: 'location' },
+    { header: t('startTime', 'Start Time'), key: 'startTime' },
+    { header: t('endTime', 'End Time'), key: 'endTime' },
+    { header: t('status', 'Status'), key: 'status' },
+  ];
+
+  const rowData = results?.map((visit) => {
+    const patientUuid = visit.patient?.uuid;
+    const patientName = visit.patient?.person?.display || '--';
+    const identifier = visit.patient?.identifiers?.[0]?.identifier || '--';
+    const visitType = visit.visitType?.display || '--';
+    const location = visit.location?.display || '--';
+    const startTime = visit.startDatetime ? formatDatetime(new Date(visit.startDatetime)) : '--';
+    const endTime = visit.stopDatetime ? formatDatetime(new Date(visit.stopDatetime)) : '--';
+    const status = visit.stopDatetime ? t('ended', 'Ended') : t('active', 'Active');
+
+    return {
+      id: visit.uuid,
+      patientName: patientUuid ? (
+        <ConfigurableLink className={styles.link} to={customPatientChartUrl} templateParams={{ patientUuid }}>
+          {patientName}
+        </ConfigurableLink>
+      ) : (
+        patientName
+      ),
+      identifier,
+      visitType,
+      location,
+      startTime,
+      endTime,
+      status,
+    };
+  });
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    goTo(1);
+    setSearchString(e.target.value);
+  };
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" rowCount={5} columnCount={headerData.length} />;
+  }
+
+  if (!visits || visits.length === 0) {
+    return (
+      <div className={styles.emptyState}>
+        <p>{t('noVisitsFound', 'No visits found')}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.visitsTableContainer}>
+      <div className={styles.tableHeader}>
+        <h4>{tableHeading}</h4>
+      </div>
+      <Search
+        labelText={t('searchVisits', 'Search visits')}
+        placeholder={t('searchTable', 'Search table')}
+        onChange={handleSearch}
+        size={responsiveSize}
+        value={searchString}
+      />
+      <DataTable rows={rowData} headers={headerData} isSortable size={responsiveSize} useZebraStyles>
+        {({ rows, headers, getHeaderProps, getTableProps }) => (
+          <TableContainer>
+            <Table {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row) => (
+                  <TableRow key={row.id}>
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+      {searchResults.length > pageSize && (
+        <Pagination
+          backwardText={t('previousPage', 'Previous page')}
+          forwardText={t('nextPage', 'Next page')}
+          itemsPerPageText={t('itemsPerPage', 'Items per page:')}
+          page={currentPage}
+          pageNumberText={t('pageNumber', 'Page number')}
+          pageSize={pageSize}
+          pageSizes={[10, 25, 50, 100]}
+          totalItems={searchResults.length}
+          onChange={({ page, pageSize }) => {
+            setPageSize(pageSize);
+            goTo(page);
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default VisitsTable;

package/src/root.component.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { useLeftNav } from '@openmrs/esm-framework';
+
+import { spaBasePath } from './constants';
+import styles from './root.scss';
+
+const Root: React.FC = () => {
+  useLeftNav({ name: 'clinical-workflow-left-panel-slot', basePath: spaBasePath });
+
+  return (
+    <BrowserRouter basename={spaBasePath}>
+      <main className={styles.container}>
+        <Routes></Routes>
+      </main>
+    </BrowserRouter>
+  );
+};
+
+export default Root;

package/src/root.scss

@@ -0,0 +1,10 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.container {
+  background-color: colors.$white-0;
+}
+
+:global(.omrs-breakpoint-gt-tablet) .container {
+  margin-left: var(--omrs-sidenav-width);
+}

package/src/routes.json

@@ -0,0 +1,108 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "fhir2": ">=1.2",
+    "webservices.rest": "^2.24.0"
+  },
+  "pages": [],
+  "extensions": [
+    {
+      "name": "clinical-workflow-triage-dashboard-link",
+      "component": "triageDashboardLink",
+      "slot": "homepage-dashboard-slot",
+      "order": 0,
+      "meta": {
+        "name": "clinical-workflow-triage",
+        "slot": "clinical-workflow-triage-dashboard-slot",
+        "title": "clinical-workflow-triage"
+      }
+    },
+    {
+      "name": "clinical-workflow-triage-dashboard",
+      "component": "triageDashboard",
+      "slot": "clinical-workflow-triage-dashboard-slot"
+    },
+    {
+      "name": "ewf-mru-dashboard-link",
+      "component": "mruLeftPanelLink",
+      "slot": "homepage-dashboard-slot",
+      "order": 1,
+      "meta": {
+        "name": "mru",
+        "title": "MRU",
+        "path": "mru",
+        "slot": "mru-dashboard-slot"
+      }
+    },
+    {
+      "name": "ewf-mru-dashboard",
+      "component": "mruDashboard",
+      "slot": "mru-dashboard-slot",
+      "online": true,
+      "offline": false
+    },
+    {
+      "name": "patient-scoreboard-link",
+      "component": "patientScoreboardLink",
+      "slot": "homepage-dashboard-slot",
+      "order": 1,
+      "meta": {
+        "name": "patient-scoreboard",
+        "title": "Patient Scoreboard",
+        "path": "patient-scoreboard",
+        "slot": "patient-scoreboard-slot"
+      }
+    },
+    {
+      "name": "patient-scoreboard",
+      "component": "patientScoreboard",
+      "slot": "patient-scoreboard-slot",
+      "online": true,
+      "offline": false
+    }
+  ],
+  "workspaces": [
+    {
+      "name": "triage-workspace",
+      "component": "triageWorkspace",
+      "title": "Triage Form",
+      "canMaximize": true,
+      "type": "clinical-form"
+    },
+    {
+      "name": "patient-registration-workspace",
+      "component": "patientRegistrationWorkspace",
+      "title": "Patient Registration",
+      "canMaximize": true,
+      "type": "registration-form"
+    },
+    {
+      "name": "billing-information-workspace",
+      "component": "billingInformationWorkspace",
+      "title": "Billing Information Workspace",
+      "type": "clinical-form"
+    }
+  ],
+  "workspaces2": [
+    {
+      "name": "clinical-workflow-patient-form-entry-workspace",
+      "component": "@openmrs/esm-patient-forms-app#exportedPatientFormEntryWorkspace",
+      "window": "clinical-workflow-window"
+    }
+  ],
+  "workspaceWindows2": [
+    {
+      "name": "clinical-workflow-window",
+      "group": "clinical-workflow-group",
+      "width": "wider",
+      "canMaximize": true
+    }
+  ],
+  "workspaceGroups2": [
+    {
+      "name": "clinical-workflow-group",
+      "overlay": true,
+      "persistence": "closable"
+    }
+  ]
+}