@thrustdevs/esm-procedure-orders-app 1.0.2-pre.6

package/src/shared/ui/common/orders-date-range-picker.scss

@@ -0,0 +1,15 @@
+@use '@carbon/layout';
+
+.datePickerWrapper {
+  display: flex;
+  gap: layout.$spacing-03;
+  align-items: center;
+}
+
+.dateRangePicker {
+  flex-grow: unset;
+
+  input {
+    background-color: transparent;
+  }
+}

package/src/shared/ui/common/orders-date-range-picker.tsx

@@ -0,0 +1,38 @@
+import { DatePicker, DatePickerInput } from '@carbon/react';
+import { useAppContext } from '@openmrs/esm-framework';
+import dayjs from 'dayjs';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { type DateFilterContext } from '../../../types';
+import styles from './orders-date-range-picker.scss';
+
+export const OrdersDateRangePicker = () => {
+  const currentDate = new Date();
+  const { dateRange, setDateRange } = useAppContext<DateFilterContext>('procedures-date-filter') ?? {
+    dateRange: [dayjs().startOf('day').toDate(), new Date()],
+    setDateRange: () => {},
+  };
+
+  const { t } = useTranslation();
+
+  const handleOrdersDateRangeChange = (dates: Array<Date>) => {
+    setDateRange(dates);
+  };
+
+  return (
+    <>
+      <p>{t('filter', 'Filter')}:</p>
+      <div className={styles.datePickerWrapper}>
+        <DatePicker
+          datePickerType="range"
+          className={styles.dateRangePicker}
+          onClose={handleOrdersDateRangeChange}
+          maxDate={currentDate.toISOString()}
+          value={dateRange}>
+          <DatePickerInput id="date-picker-input-id-start" placeholder="dd/mm/yyyy" size="md" />
+          <DatePickerInput id="date-picker-input-id-finish" placeholder="dd/mm/yyyy" size="md" />
+        </DatePicker>
+      </div>
+    </>
+  );
+};

package/src/summary-tiles/procedure-summary-tiles.component.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import styles from './procedure-summary-tiles.scss';
+import { type AssignedExtension, useConnectedExtensions, Extension } from '@openmrs/esm-framework';
+import { ComponentContext } from '@openmrs/esm-framework/src/internal';
+
+const ProcedureSummaryTiles: React.FC = () => {
+  const ProcedureTileSlot = 'procedure-tiles-slot';
+
+  const tilesExtensions = useConnectedExtensions(ProcedureTileSlot) as AssignedExtension[];
+
+  return (
+    <div className={styles.cardContainer}>
+      {tilesExtensions
+        .filter((extension) => Object.keys(extension.meta).length > 0)
+        .map((extension) => {
+          return (
+            <ComponentContext.Provider
+              key={extension.id}
+              value={{
+                featureName: extension.meta.featureName,
+                moduleName: extension.moduleName,
+                extension: {
+                  extensionId: extension.id,
+                  extensionSlotName: ProcedureTileSlot,
+                  extensionSlotModuleName: extension.moduleName,
+                },
+              }}>
+              <Extension />
+            </ComponentContext.Provider>
+          );
+        })}
+    </div>
+  );
+};
+
+export default ProcedureSummaryTiles;

package/src/summary-tiles/procedure-summary-tiles.scss

@@ -0,0 +1,11 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@openmrs/esm-styleguide/src/vars' as vars;
+
+.cardContainer {
+  background-color: vars.$ui-02;
+  display: flex;
+  justify-content: flex-start;
+  padding: 0 spacing.$spacing-05 spacing.$spacing-05 spacing.$spacing-03;
+  flex-flow: row wrap;
+}

package/src/summary-tiles/procedure-summary.resource.tsx

@@ -0,0 +1,79 @@
+import useSWR, { mutate } from 'swr';
+import { type ConfigObject, openmrsFetch, restBaseUrl, useConfig } from '@openmrs/esm-framework';
+import { useCallback } from 'react';
+import { ProcedureConceptClass_UUID } from '../constants';
+import { type Result } from '../types';
+
+export function useMetrics() {
+  const metrics = {
+    orders: 15,
+    in_progress: 4,
+    transferred: 1,
+    completed: 6,
+  };
+  const { data, error } = useSWR<{ data: { results: any } }, Error>(`${restBaseUrl}/queue?`, openmrsFetch);
+
+  return {
+    metrics: metrics,
+    isError: error,
+    isLoading: !data && !error,
+  };
+}
+
+export function useProcedureOrderStats(fulfillerStatus: string) {
+  const config = useConfig() as ConfigObject;
+
+  const orderTypeParam = `orderTypes=${config.procedureOrderTypeUuid}&isStopped=false&fulfillerStatus=${fulfillerStatus}&v=custom:(uuid,orderNumber,patient:ref,concept:(uuid,display,conceptClass),action,careSetting,orderer:ref,urgency,instructions,commentToFulfiller,display,fulfillerStatus,dateStopped)`;
+  const apiUrl = `/ws/rest/v1/order?${orderTypeParam}`;
+
+  const { data, error, isLoading } = useSWR<{ data: { results: Array<Result> } }, Error>(apiUrl, openmrsFetch);
+
+  const mutateOrders = useCallback(() => {
+    mutate(apiUrl);
+  }, [apiUrl]);
+
+  const procedureOrders = data?.data?.results?.filter((order) => {
+    if (fulfillerStatus === '') {
+      return (
+        order.fulfillerStatus === null &&
+        order.dateStopped === null &&
+        order.action === 'NEW' &&
+        order.concept.conceptClass.uuid === ProcedureConceptClass_UUID
+      );
+    } else if (fulfillerStatus === 'IN_PROGRESS') {
+      return (
+        order.fulfillerStatus === 'IN_PROGRESS' &&
+        order.dateStopped === null &&
+        order.action !== 'DISCONTINUE' &&
+        order.concept.conceptClass.uuid === ProcedureConceptClass_UUID
+      );
+    } else if (fulfillerStatus === 'COMPLETED') {
+      return (
+        order.fulfillerStatus === 'COMPLETED' &&
+        order.dateStopped === null &&
+        order.action !== 'DISCONTINUE' &&
+        order.concept.conceptClass.uuid === ProcedureConceptClass_UUID
+      );
+    } else if (fulfillerStatus === 'EXCEPTION') {
+      return (
+        order.fulfillerStatus === 'EXCEPTION' &&
+        order.dateStopped === null &&
+        order.action !== 'DISCONTINUE' &&
+        order.concept.conceptClass.uuid === ProcedureConceptClass_UUID
+      );
+    } else if (fulfillerStatus === 'DECLINED') {
+      return (
+        order.fulfillerStatus === 'DECLINED' &&
+        order.dateStopped === null &&
+        order.action !== 'DISCONTINUE' &&
+        order.concept.conceptClass.uuid === ProcedureConceptClass_UUID
+      );
+    }
+  });
+  return {
+    count: procedureOrders?.length > 0 ? procedureOrders.length : 0,
+    isLoading,
+    isError: error,
+    mutate: mutateOrders,
+  };
+}

package/src/summary-tiles/summary-tile.component.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Tile, Button } from '@carbon/react';
+import { ArrowRight } from '@carbon/react/icons';
+import styles from './summary-tile.scss';
+
+interface SummaryTileProps {
+  label: string;
+  value: number;
+  headerLabel: string;
+  children?: React.ReactNode;
+}
+
+const SummaryTile: React.FC<SummaryTileProps> = ({ label, value, headerLabel, children }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Tile className={styles.tileContainer} light={true}>
+      <div className={styles.tileHeader}>
+        <div className={styles.headerLabelContainer}>
+          <label className={styles.headerLabel}>{headerLabel}</label>
+          {children}
+        </div>
+        <div></div>
+        <Button
+          kind="ghost"
+          renderIcon={(props) => <ArrowRight size={16} className={styles.arrowIcon} />}
+          iconDescription={t('view', 'View ')}>
+          {t('view', 'View ')}
+          &nbsp;
+        </Button>
+      </div>
+      <div>
+        <label className={styles.totalsLabel}>{label}</label>
+        <p className={styles.totalsValue}>{value}</p>
+      </div>
+    </Tile>
+  );
+};
+
+export default SummaryTile;

package/src/summary-tiles/summary-tile.scss

@@ -0,0 +1,53 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@openmrs/esm-styleguide/src/vars' as vars;
+
+.tileContainer {
+  border: 0.0625rem solid vars.$ui-03;
+  flex-grow: 1;
+  height: 7.875rem;
+  padding: 0 spacing.$spacing-05;
+  margin: spacing.$spacing-03 spacing.$spacing-03;
+}
+
+.tileHeader {
+  background-color: #fff;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  justify-content: space-between;
+  padding: 0.5rem;
+}
+
+.headerLabel {
+  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
+  font-weight: var(--cds-heading-compact-01-font-weight, 600);
+  line-height: var(--cds-heading-compact-01-line-height, 1.28572);
+  letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
+  color: #525252;
+}
+
+.totalsLabel {
+  font-size: var(--cds-label-01-font-size, 0.75rem);
+  font-weight: var(--cds-label-01-font-weight, 400);
+  line-height: var(--cds-label-01-line-height, 1.33333);
+  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
+  color: #525252;
+}
+
+.totalsValue {
+  font-size: var(--cds-heading-04-font-size, 1.75rem);
+  font-weight: var(--cds-heading-04-font-weight, 400);
+  line-height: var(--cds-heading-04-line-height, 1.28572);
+  letter-spacing: var(--cds-heading-04-letter-spacing, 0);
+  color: #161616;
+}
+
+.headerLabelContainer {
+  display: flex;
+  align-items: center;
+  height: spacing.$spacing-07;
+}
+
+.arrowIcon {
+  fill: var(--cds-link-primary, #0f62fe) !important;
+}