@digihmis/esm-procedures-app 1.0.1

package/src/procedures-worklist/procedures-worklist.component.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, InlineLoading, Tile } from '@carbon/react';
+import { Alarm, ConnectionTwoWay, Login, Logout } from '@carbon/react/icons';
+import { formatDate, useConfig, useLayoutType } from '@openmrs/esm-framework';
+import { CardHeader } from '@openmrs/esm-patient-common-lib';
+import { useProviderClockIn } from '@digihmis/esm-commons-lib';
+import { type ConfigObject } from '../config-schema';
+import { bucketByStatus, useImagingWorklist } from '../procedures.resource';
+import { PageHeader } from '../page-header/page-header.component';
+import ImagingWorklistQueue from '../procedures-tab/procedures-tab.component';
+import styles from './procedures-worklist.scss';
+
+const ImagingWorklist: React.FC = () => {
+  const { t } = useTranslation();
+  const { entries, isLoading } = useImagingWorklist();
+  const { proceduresQueueUuid } = useConfig<ConfigObject>();
+  const { isClockedIn, activeSession, isProcessing, handleClockIn, handleClockOut, handleSwitchServicePoint } =
+    useProviderClockIn({ queueUuid: proceduresQueueUuid, moduleName: 'Procedures' });
+
+  const buckets = React.useMemo(() => bucketByStatus(entries), [entries]);
+
+  const isToday = (value?: string) => {
+    if (!value) {
+      return false;
+    }
+    const d = new Date(value);
+    const n = new Date();
+    return d.getFullYear() === n.getFullYear() && d.getMonth() === n.getMonth() && d.getDate() === n.getDate();
+  };
+  const verifiedToday = React.useMemo(
+    () => buckets.verified.filter((e) => isToday(e.procedure?.approvedAt ?? e.dateActivated)).length,
+    [buckets.verified],
+  );
+
+  return (
+    <div>
+      <PageHeader />
+      <div className={styles.dashboardContainer}>
+        <Tile className={styles.tileContainer}>
+          <div className={styles.displayDetails}>
+            <div className={styles.countLabel}>{t('awaiting', 'Awaiting')}</div>
+            <div className={styles.displayData}>
+              {isLoading ? <InlineLoading description="" /> : buckets.ordered.length + buckets.scheduled.length}
+            </div>
+          </div>
+          <div className={styles.displayDetails}>
+            <div className={styles.countLabel}>{t('inProgress', 'In progress')}</div>
+            <div className={styles.displayData}>
+              {isLoading ? <InlineLoading description="" /> : buckets.in_progress.length}
+            </div>
+          </div>
+          <div className={styles.displayDetails}>
+            <div className={styles.countLabel}>{t('toVerify', 'To verify')}</div>
+            <div className={styles.displayData}>
+              {isLoading ? <InlineLoading description="" /> : buckets.reported.length}
+            </div>
+          </div>
+          <div className={styles.displayDetails}>
+            <div className={styles.countLabel}>{t('verifiedToday', 'Verified Today')}</div>
+            <div className={styles.displayData}>{isLoading ? <InlineLoading description="" /> : verifiedToday}</div>
+          </div>
+        </Tile>
+
+        {isClockedIn && activeSession && (
+          <Tile className={styles.clockInBanner}>
+            <div className={styles.clockInInfo}>
+              <Alarm size={20} className={styles.alarmIcon} />
+              <div className={styles.clockInText}>
+                <strong>{t('clockedInTo', 'Clocked in to')}: </strong>
+                {activeSession?.queueRoom?.display}
+                <span className={styles.clockInTime}>
+                  {' '}
+                  ({t('since', 'since')} {formatDate(new Date(activeSession.clockInTime), { mode: 'wide' })})
+                </span>
+              </div>
+            </div>
+          </Tile>
+        )}
+        <CardHeader title={activeSession?.queueRoom?.display || t('proceduresQueue', 'Procedures Queue')}>
+          <div className={styles.headerActions}>
+            <Button
+              kind={isClockedIn ? 'danger' : 'primary'}
+              size="sm"
+              renderIcon={(props) => (isClockedIn ? <Logout size={16} {...props} /> : <Login size={16} {...props} />)}
+              onClick={isClockedIn ? handleClockOut : handleClockIn}
+              disabled={isProcessing}>
+              {isProcessing ? (
+                <InlineLoading
+                  description={isClockedIn ? t('clockingOut', 'Clocking out') : t('clockingIn', 'Clocking in')}
+                />
+              ) : isClockedIn ? (
+                t('clockOut', 'Clock Out')
+              ) : (
+                t('clockIn', 'Clock In')
+              )}
+            </Button>
+            {isClockedIn && (
+              <Button
+                kind="secondary"
+                size="sm"
+                renderIcon={(props) => <ConnectionTwoWay size={16} {...props} />}
+                onClick={handleSwitchServicePoint}
+                disabled={isProcessing}>
+                {t('changeStation', 'Change Station')}
+              </Button>
+            )}
+          </div>
+        </CardHeader>
+        {isClockedIn && activeSession ? (
+          <ImagingWorklistQueue />
+        ) : (
+          <div className={styles.emptyStateContainer}>
+            <Tile className={styles.tile}>
+              <div className={styles.tileContent}>
+                <p className={styles.content}>{t('pleaseClockIn', 'Please clock in to view the queue')}</p>
+                <p className={styles.emptyStateHelperText}>
+                  {t('clockInPrompt', 'Click the "Clock In" button above to start managing patients')}
+                </p>
+              </div>
+            </Tile>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ImagingWorklist;

package/src/procedures-worklist/procedures-worklist.scss

@@ -0,0 +1,166 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.tileContainer {
+  border: 1px solid colors.$cool-gray-30;
+  margin-bottom: layout.$spacing-04;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  gap: 0;
+  height: 80px;
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    padding: layout.$spacing-04;
+  }
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    padding: layout.$spacing-03;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto;
+    gap: layout.$spacing-04;
+  }
+}
+
+.tileHeader {
+  color: colors.$gray-70;
+  margin-bottom: layout.$spacing-03;
+  text-transform: none;
+  letter-spacing: 0;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    margin-bottom: layout.$spacing-02;
+  }
+}
+
+.displayDetails {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    padding: layout.$spacing-03 0;
+    border-right: none;
+    border-bottom: 1px solid colors.$gray-20;
+    padding-bottom: layout.$spacing-04;
+    margin-bottom: layout.$spacing-03;
+  }
+}
+
+.countLabel {
+  color: colors.$gray-70;
+  margin-bottom: layout.$spacing-02;
+  @include type.type-style('caption-01');
+  font-weight: bold;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    @include type.type-style('caption-01');
+    font-weight: bold;
+    margin-bottom: layout.$spacing-01;
+  }
+}
+
+.displayData {
+  color: colors.$gray-100;
+  font-weight: bold;
+  @include type.type-style('caption-01');
+  font-size: 25px;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    font-size: 2.625rem;
+    line-height: 2.75rem;
+  }
+}
+
+.headerActions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-right: 1rem;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    gap: 0.25rem;
+  }
+}
+
+.dashboardContainer {
+  padding: layout.$spacing-05;
+  padding-bottom: 0;
+  background-color: var(--cds-field);
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    padding: layout.$spacing-02;
+    padding-bottom: 0;
+  }
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    padding: layout.$spacing-03;
+    padding-bottom: 0;
+  }
+}
+
+.clockInInfo {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  gap: layout.$spacing-03;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    flex-direction: row;
+    align-items: center;
+    gap: layout.$spacing-02;
+  }
+}
+
+.clockInText {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    font-size: 0.875rem;
+  }
+}
+
+.clockInTime {
+  color: colors.$gray-70;
+  white-space: nowrap;
+}
+
+.alarmIcon {
+  flex-shrink: 0;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    width: 18px;
+    height: 18px;
+  }
+}
+
+.emptyStateContainer {
+  border: 1px solid colors.$gray-20;
+  padding: 3rem 0;
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+  background: colors.$gray-20;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-70;
+  margin-bottom: layout.$spacing-03;
+}
+.loader {
+  min-height: fit-content;
+}

package/src/procedures.resource.ts

@@ -0,0 +1,163 @@
+import { openmrsFetch, restBaseUrl, type FetchResponse } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+
+/** The stages a radiology order moves through. */
+export type ImagingStatus = 'ordered' | 'scheduled' | 'in_progress' | 'reported' | 'verified' | 'declined';
+
+/** The report state carried on the linked Procedure record. */
+export interface ProcedureInfo {
+  uuid: string;
+  status?: string;
+  modality?: { uuid: string; display: string };
+  bodySite?: { uuid: string; display: string };
+  hasPreliminaryReport?: boolean;
+  hasFinalReport?: boolean;
+  impressions?: string;
+  reportedBy?: string;
+  reportedAt?: string;
+  approvedBy?: string;
+  approvedAt?: string;
+}
+
+/** One radiology order on the worklist. */
+export interface WorklistEntry {
+  order: {
+    uuid: string;
+    display: string;
+    accessionNumber?: string;
+    dateStopped?: string;
+    orderer?: { uuid?: string; display: string };
+  };
+  patient?: { uuid: string; display: string };
+  visit?: { uuid: string; display: string };
+  concept?: { uuid: string; display: string };
+  orderer?: { uuid: string; display: string };
+  urgency?: string;
+  dateActivated?: string;
+  scheduledDate?: string;
+  encounterDatetime?: string;
+  status?: ImagingStatus;
+  fulfillerStatus?: string;
+  fulfillerComment?: string;
+  procedure?: ProcedureInfo | null;
+}
+
+const WORKLIST_URL = `${restBaseUrl}/digihmisorders/worklist?department=procedure&status=all`;
+
+/** Every radiology order, tagged with its workflow bucket. */
+export function useImagingWorklist() {
+  const { data, error, isLoading, mutate } = useSWR<FetchResponse<{ results: Array<WorklistEntry> }>>(
+    WORKLIST_URL,
+    openmrsFetch,
+  );
+  return { entries: data?.data?.results ?? [], error, isLoading, mutate };
+}
+
+/** Split worklist entries into their workflow buckets, preserving order. */
+export function bucketByStatus(entries: Array<WorklistEntry>): Record<ImagingStatus, Array<WorklistEntry>> {
+  const buckets: Record<ImagingStatus, Array<WorklistEntry>> = {
+    ordered: [],
+    scheduled: [],
+    in_progress: [],
+    reported: [],
+    verified: [],
+    declined: [],
+  };
+  for (const entry of entries) {
+    const status = (entry.status ?? 'ordered') as ImagingStatus;
+    (buckets[status] ?? buckets.ordered).push(entry);
+  }
+  return buckets;
+}
+
+/** Create a Procedure record for an order (used to open the workflow at a given status). */
+function createProcedure(orderUuid: string, body: Record<string, unknown>) {
+  return openmrsFetch(`${restBaseUrl}/procedure`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: { orderUuid, ...body },
+  });
+}
+
+/** Update an existing Procedure record. */
+function updateProcedure(procedureUuid: string, body: Record<string, unknown>) {
+  return openmrsFetch(`${restBaseUrl}/procedure/${procedureUuid}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body,
+  });
+}
+
+/** Move an entry to a Procedure status, creating the record on first transition. */
+function transition(entry: WorklistEntry, body: Record<string, unknown>) {
+  return entry.procedure?.uuid
+    ? updateProcedure(entry.procedure.uuid, body)
+    : createProcedure(entry.order.uuid, body);
+}
+
+/** Ordered → Scheduled: book the study. */
+export function scheduleStudy(entry: WorklistEntry) {
+  return transition(entry, { status: 'PREPARATION' });
+}
+
+/** Scheduled → In progress: the study is being acquired. */
+export function startStudy(entry: WorklistEntry) {
+  return transition(entry, { status: 'IN_PROGRESS', startDatetime: new Date().toISOString() });
+}
+
+/** In progress → Reported: save the preliminary report + impressions. */
+export function submitReport(entry: WorklistEntry, report: string, impressions?: string) {
+  return transition(entry, { preliminaryReport: report, impressions, status: 'PRELIMINARY' });
+}
+
+/** Reported → Verified: approve/release the report (locking it). */
+export function verifyReport(entry: WorklistEntry, finalReport: string, impressions?: string) {
+  if (!entry.procedure?.uuid) {
+    return Promise.reject(new Error('No report to verify'));
+  }
+  return updateProcedure(entry.procedure.uuid, {
+    procedureReport: finalReport,
+    impressions,
+    status: 'APPROVED',
+    reportLockedAt: new Date().toISOString(),
+  });
+}
+
+/** Cancel: decline the order (before a report exists) or mark the study not done. */
+export function cancelStudy(entry: WorklistEntry, reason?: string) {
+  if (entry.procedure?.uuid) {
+    return updateProcedure(entry.procedure.uuid, { status: 'NOT_DONE' });
+  }
+  const params = new URLSearchParams({ status: 'DECLINED' });
+  if (reason) {
+    params.set('comment', reason);
+  }
+  return openmrsFetch(`${restBaseUrl}/digihmisorders/worklist/${entry.order.uuid}?${params.toString()}`, {
+    method: 'POST',
+  });
+}
+
+export interface ProcedureDetail extends ProcedureInfo {
+  preliminaryReport?: string;
+  procedureReport?: string;
+  reportType?: 'PRELIMINARY' | 'FINAL' | null;
+  preliminaryReportEnteredBy?: { display: string };
+}
+
+const PROCEDURE_REP =
+  'custom:(uuid,status,preliminaryReport,procedureReport,impressions,reportType,' +
+  'modality:(uuid,display),bodySite:(uuid,display),preliminaryReportEnteredBy:(display),' +
+  'preliminaryReportEnteredAt,preliminaryReportApprovedBy:(display),preliminaryReportApprovedAt)';
+
+/** The full Procedure record for an order (report text + impressions), for the report/view workspaces. */
+export function useProcedure(orderUuid?: string) {
+  const url = orderUuid ? `${restBaseUrl}/procedure?orderUuid=${orderUuid}&v=${PROCEDURE_REP}` : null;
+  const { data, error, isLoading } = useSWR<FetchResponse<{ results: Array<ProcedureDetail> }>>(url, openmrsFetch);
+  return { procedure: data?.data?.results?.[0], error, isLoading };
+}
+
+/** Open the printable imaging report PDF for a procedure in a new tab. */
+export function openImagingReport(procedureUuid: string) {
+  const base = (window as unknown as { openmrsBase?: string }).openmrsBase ?? '/openmrs';
+  window.open(`${base}${restBaseUrl}/digihmisorders/imagingReport?procedureUuid=${procedureUuid}`, '_blank', 'noopener');
+}

package/src/report-workspace/report.workspace.scss

@@ -0,0 +1,48 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.formContent {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: layout.$spacing-05;
+}
+
+.subtitle {
+  @include type.type-style('heading-compact-01');
+  color: colors.$gray-70;
+  margin-bottom: layout.$spacing-05;
+}
+
+.audit {
+  @include type.type-style('label-01');
+  color: colors.$gray-60;
+}
+
+.buttonSet {
+  display: flex;
+  width: 100%;
+  margin-top: auto;
+
+  :global(.cds--btn) {
+    flex: 1 1 50%;
+    max-inline-size: none;
+    height: layout.$spacing-10;
+  }
+}
+
+.tablet {
+  padding: layout.$spacing-05;
+  background-color: colors.$gray-10;
+}
+
+.desktop {
+  padding: 0;
+}

package/src/report-workspace/report.workspace.tsx

@@ -0,0 +1,168 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Controller, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Button, ButtonSet, Form, InlineLoading, Stack, TextArea } from '@carbon/react';
+import { Printer } from '@carbon/react/icons';
+import { type DefaultWorkspaceProps, showSnackbar, useLayoutType } from '@openmrs/esm-framework';
+import classNames from 'classnames';
+import { openImagingReport, submitReport, useProcedure, verifyReport, type WorklistEntry } from '../procedures.resource';
+import styles from './report.workspace.scss';
+
+type Mode = 'report' | 'verify' | 'view';
+
+interface ReportWorkspaceProps extends DefaultWorkspaceProps {
+  order: WorklistEntry;
+  mode: Mode;
+  onSaved?: () => void;
+}
+
+const reportSchema = z.object({
+  report: z.string().trim().min(1, 'Enter the report'),
+  impressions: z.string().optional(),
+});
+
+type ReportForm = z.infer<typeof reportSchema>;
+
+const ProcedureReportWorkspace: React.FC<ReportWorkspaceProps> = ({
+  order,
+  mode,
+  onSaved,
+  closeWorkspace,
+  closeWorkspaceWithSavedChanges,
+  promptBeforeClosing,
+}) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const { procedure, isLoading } = useProcedure(order.order.uuid);
+  const readOnly = mode === 'view';
+  const [saving, setSaving] = useState(false);
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { errors, isDirty, isValid },
+  } = useForm<ReportForm>({
+    mode: 'all',
+    resolver: zodResolver(reportSchema),
+    defaultValues: { report: '', impressions: '' },
+  });
+
+  // Prefill from the saved record once it loads (final report takes precedence over preliminary).
+  useEffect(() => {
+    if (procedure) {
+      reset({
+        report: procedure.procedureReport || procedure.preliminaryReport || '',
+        impressions: procedure.impressions || '',
+      });
+    }
+  }, [procedure, reset]);
+
+  useEffect(() => {
+    promptBeforeClosing(() => !readOnly && isDirty);
+  }, [readOnly, isDirty, promptBeforeClosing]);
+
+  const onSubmit = (values: ReportForm) => {
+    setSaving(true);
+    const impressions = values.impressions?.trim() || undefined;
+    const action =
+      mode === 'verify'
+        ? verifyReport(order, values.report.trim(), impressions)
+        : submitReport(order, values.report.trim(), impressions);
+    action.then(
+      () => {
+        showSnackbar({
+          kind: 'success',
+          isLowContrast: true,
+          title: mode === 'verify' ? t('reportVerified', 'Report verified') : t('reportSaved', 'Report saved'),
+        });
+        setSaving(false);
+        onSaved?.();
+        closeWorkspaceWithSavedChanges();
+      },
+      (err) => {
+        setSaving(false);
+        showSnackbar({
+          kind: 'error',
+          title: t('reportError', 'Could not save report'),
+          subtitle: err?.responseBody?.error?.message ?? err?.message,
+        });
+      },
+    );
+  };
+
+  const primaryLabel = mode === 'verify' ? t('verifyRelease', 'Verify & release') : t('saveReport', 'Save report');
+
+  return (
+    <Form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
+      <div className={styles.formContent}>
+        <p className={styles.subtitle}>
+          {order.concept?.display ?? order.order.display}
+          {order.patient?.display ? ` — ${order.patient.display}` : ''}
+        </p>
+        {isLoading ? (
+          <InlineLoading description={t('loading', 'Loading…')} />
+        ) : (
+          <Stack gap={5}>
+            <Controller
+              name="report"
+              control={control}
+              render={({ field }) => (
+                <TextArea
+                  id="procedure-report"
+                  labelText={t('report', 'Report / findings')}
+                  rows={10}
+                  readOnly={readOnly}
+                  invalid={Boolean(errors.report)}
+                  invalidText={errors.report?.message}
+                  {...field}
+                />
+              )}
+            />
+            <Controller
+              name="impressions"
+              control={control}
+              render={({ field }) => (
+                <TextArea
+                  id="procedure-impressions"
+                  labelText={t('impression', 'Impression')}
+                  rows={4}
+                  readOnly={readOnly}
+                  {...field}
+                />
+              )}
+            />
+            {procedure?.reportType === 'PRELIMINARY' && procedure?.preliminaryReportEnteredBy && (
+              <p className={styles.audit}>
+                {t('reportedByLabel', 'Reported by {{who}}', { who: procedure.preliminaryReportEnteredBy.display })}
+              </p>
+            )}
+          </Stack>
+        )}
+      </div>
+      <ButtonSet className={classNames(styles.buttonSet, { [styles.tablet]: isTablet, [styles.desktop]: !isTablet })}>
+        <Button className={styles.button} kind="secondary" onClick={() => closeWorkspace()}>
+          {readOnly ? t('close', 'Close') : t('cancel', 'Cancel')}
+        </Button>
+        {readOnly ? (
+          <Button
+            className={styles.button}
+            kind="primary"
+            renderIcon={Printer}
+            disabled={!procedure?.uuid}
+            onClick={() => procedure?.uuid && openImagingReport(procedure.uuid)}>
+            {t('print', 'Print')}
+          </Button>
+        ) : (
+          <Button className={styles.button} kind="primary" type="submit" disabled={saving || isLoading || !isValid}>
+            {saving ? <InlineLoading description={t('saving', 'Saving…')} /> : primaryLabel}
+          </Button>
+        )}
+      </ButtonSet>
+    </Form>
+  );
+};
+
+export default ProcedureReportWorkspace;