@mherman22/esm-act-app 1.0.1-pre.22

package/src/config-schema.test.ts

@@ -0,0 +1,83 @@
+import { describe, expect, it, vi } from 'vitest';
+import { getDefaultsFromConfigSchema } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+
+describe('configSchema', () => {
+  it('defaults to the ACT privilege, clinic tags, RHD flags and ACT 2.0 urgency bands', () => {
+    expect(getDefaultsFromConfigSchema(configSchema)).toEqual({
+      screenPrivileges: {
+        home: 'View Patient Flags',
+        registry: 'View Patient Flags',
+        waitingList: 'View Patient Flags',
+        screenPositive: 'View Patient Flags',
+      },
+      clinicLocationTags: {
+        cardiac: ['RHD Tertiary', 'RHD District'],
+        primaryCare: ['RHD Community'],
+      },
+      flagLists: {
+        namePrefix: 'RHD ',
+        names: [],
+        riskFlags: ['RHD prophylaxis overdue', 'RHD lost to follow-up'],
+      },
+      quickActions: {
+        registerPatientUrl: '${openmrsSpaBase}/patient-registration',
+        enterProphylaxisUrl: '${openmrsSpaBase}/forms',
+        findPatientUrl: '${openmrsSpaBase}/search',
+      },
+      careCascade: {
+        report: '9c6751ae-65fc-5f25-9aa6-8c65cb1dff68',
+        reportUrl: '${openmrsSpaBase}/reports',
+        steps: ['Active', 'Prescribed Prophylaxis', 'Initiated BPG', 'Adherent'],
+      },
+      registry: {
+        report: 'f1a2b3c4-d5e6-7890-abcd-ef1234567890',
+        showBpgColumns: false,
+      },
+      urgencyBands: [
+        { label: '1: Emergent', concept: '1fe15210-4490-58b0-a38c-bb0386e98482', deadlineDays: 1 },
+        { label: '2: Urgent', concept: '33bf504a-15f2-5504-9bdc-ddded0b5eb00', deadlineDays: 60 },
+        { label: '3: Elective', concept: '2666bf97-7400-57c7-b535-7903e22ced34', deadlineDays: 180 },
+      ],
+    });
+  });
+});
+
+describe('urgencyBands', () => {
+  it.each([
+    ['its deadline', { label: '2: Urgent', concept: '33bf504a-15f2-5504-9bdc-ddded0b5eb00' }],
+    ['its concept', { label: '2: Urgent', deadlineDays: 60 }],
+  ])('reports a band that leaves out %s', async (_, band) => {
+    const { clearConfigErrors, processConfig } =
+      await vi.importActual<typeof import('@openmrs/esm-config')>('@openmrs/esm-config');
+    clearConfigErrors();
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+    processConfig(configSchema, { urgencyBands: [band] }, 'rhd');
+
+    const messages = consoleError.mock.calls.map((call) => String(call[0]));
+    expect(messages.some((message) => message.includes('Every urgency band needs'))).toBe(true);
+    consoleError.mockRestore();
+  });
+
+  it('reports a band whose deadline is not a number or whose key is misspelled', async () => {
+    const { processConfig } = await vi.importActual<typeof import('@openmrs/esm-config')>('@openmrs/esm-config');
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+    processConfig(
+      configSchema,
+      {
+        urgencyBands: [
+          { label: '2: Urgent', concept: '33bf504a-15f2-5504-9bdc-ddded0b5eb00', deadlineDays: '60' },
+          { label: '3: Elective', concept: '2666bf97-7400-57c7-b535-7903e22ced34', deadline: 180 },
+        ],
+      },
+      'rhd',
+    );
+
+    const messages = consoleError.mock.calls.map((call) => String(call[0]));
+    expect(messages.some((message) => message.includes('urgencyBands[0].deadlineDays'))).toBe(true);
+    expect(messages.some((message) => message.includes('urgencyBands[1].deadline'))).toBe(true);
+    consoleError.mockRestore();
+  });
+});

package/src/config-schema.ts

@@ -0,0 +1,129 @@
+import { Type, validator } from '@openmrs/esm-framework';
+
+const screenPrivilege = (screen: string) => ({
+  _type: Type.String,
+  _default: 'View Patient Flags',
+  _description: `The privilege a user needs to see ${screen}, its menu entry and its widgets.`,
+});
+
+const locationTags = (clinics: string, defaultTags: Array<string>) => ({
+  _type: Type.Array,
+  _elements: { _type: Type.String },
+  _default: defaultTags,
+  _description: `Location tags that mark ${clinics}.`,
+});
+
+const link = (description: string, defaultUrl: string) => ({
+  _type: Type.String,
+  _default: defaultUrl,
+  _description: description,
+});
+
+export const configSchema = {
+  screenPrivileges: {
+    home: screenPrivilege('the ACT home page'),
+    registry: screenPrivilege('the registry list'),
+    waitingList: screenPrivilege('the procedural waiting list'),
+    screenPositive: screenPrivilege('the screen positive, pending confirmation page'),
+  },
+  clinicLocationTags: {
+    cardiac: locationTags('cardiac clinics', ['RHD Tertiary', 'RHD District']),
+    primaryCare: locationTags('primary care clinics', ['RHD Community']),
+  },
+  flagLists: {
+    namePrefix: {
+      _type: Type.String,
+      _default: 'RHD ',
+      _description: 'The worklist tiles show the lists of the flags whose names start with this, unless names is set.',
+    },
+    names: {
+      _type: Type.Array,
+      _elements: { _type: Type.String },
+      _default: [],
+      _description: 'The flags whose lists the worklist tiles show, by name. When set, namePrefix is not used.',
+    },
+    riskFlags: {
+      _type: Type.Array,
+      _elements: { _type: Type.String },
+      _default: ['RHD prophylaxis overdue', 'RHD lost to follow-up'],
+      _description: 'The flags, by name, that mark a clinical risk. The lists of every other flag are missing data.',
+    },
+  },
+  quickActions: {
+    registerPatientUrl: link(
+      'Where the Register patient quick action on ACT home leads.',
+      '${openmrsSpaBase}/patient-registration',
+    ),
+    enterProphylaxisUrl: link(
+      'Where the Enter prophylaxis quick action on ACT home leads: the fast data entry app, whose forms the distro sets.',
+      '${openmrsSpaBase}/forms',
+    ),
+    findPatientUrl: link('Where the Find a patient quick action on ACT home leads.', '${openmrsSpaBase}/search'),
+  },
+  careCascade: {
+    report: {
+      _type: Type.String,
+      _default: '9c6751ae-65fc-5f25-9aa6-8c65cb1dff68',
+      _description:
+        'The care cascade report, by uuid or name. The ACT home widget draws its rows, one per step, from their step and patients columns.',
+    },
+    reportUrl: link("Where the care cascade widget's link to the full report leads.", '${openmrsSpaBase}/reports'),
+    steps: {
+      _type: Type.Array,
+      _elements: { _type: Type.String },
+      _default: ['Active', 'Prescribed Prophylaxis', 'Initiated BPG', 'Adherent'],
+      _description:
+        "The report's steps the widget draws, by their step value, in this order. The report's Oral and BPG rows split Prescribed Prophylaxis, so they are left out by default.",
+    },
+  },
+  registry: {
+    report: {
+      _type: Type.String,
+      _default: 'f1a2b3c4-d5e6-7890-abcd-ef1234567890',
+      _description: 'The RHD Patient List report, by uuid or name, whose rows the registry lists.',
+    },
+    showBpgColumns: {
+      _type: Type.Boolean,
+      _default: false,
+      _description:
+        "Show the report's bpg_status and adherence columns and a BPG status filter. Turn on once the report returns them.",
+    },
+  },
+  urgencyBands: {
+    _type: Type.Array,
+    _elements: {
+      label: { _type: Type.String, _description: 'The name of the band.' },
+      concept: { _type: Type.ConceptUuid, _description: 'The answer that records this band.' },
+      deadlineDays: { _type: Type.Number, _description: 'Days allowed before a patient in this band is overdue.' },
+    },
+    _default: [
+      { label: '1: Emergent', concept: '1fe15210-4490-58b0-a38c-bb0386e98482', deadlineDays: 1 },
+      { label: '2: Urgent', concept: '33bf504a-15f2-5504-9bdc-ddded0b5eb00', deadlineDays: 60 },
+      { label: '3: Elective', concept: '2666bf97-7400-57c7-b535-7903e22ced34', deadlineDays: 180 },
+    ],
+    _description: 'Urgency bands for the procedural waiting list, with their deadlines, as in ACT 2.0.',
+    _validators: [
+      validator(
+        (bands: Array<{ concept?: string; deadlineDays?: unknown }>) =>
+          bands.every((band) => band.concept && typeof band.deadlineDays === 'number'),
+        'Every urgency band needs a concept and a number of deadline days',
+      ),
+    ],
+  },
+};
+
+export type ActScreen = 'home' | 'registry' | 'waitingList' | 'screenPositive';
+
+export interface Config {
+  screenPrivileges: Record<ActScreen, string>;
+  clinicLocationTags: { cardiac: Array<string>; primaryCare: Array<string> };
+  flagLists: {
+    namePrefix: string;
+    names: Array<string>;
+    riskFlags: Array<string>;
+  };
+  quickActions: { registerPatientUrl: string; enterProphylaxisUrl: string; findPatientUrl: string };
+  careCascade: { report: string; reportUrl: string; steps: Array<string> };
+  registry: { report: string; showBpgColumns: boolean };
+  urgencyBands: Array<{ label: string; concept: string; deadlineDays: number }>;
+}

package/src/declarations.d.ts

@@ -0,0 +1,19 @@
+declare module '*.css';
+declare module '*.scss';
+declare module '*.png';
+
+declare type SideNavProps = object;
+
+declare interface RequireContext {
+  keys(): string[];
+  (id: string): unknown;
+  <T>(id: string): T;
+  resolve(id: string): string;
+  id: string;
+}
+
+declare namespace NodeJS {
+  interface Require {
+    context(directory: string, useSubdirectories?: boolean, regExp?: RegExp, mode?: string): RequireContext;
+  }
+}

package/src/fetch-all.ts

@@ -0,0 +1,20 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+
+interface Page<T> {
+  results: Array<T>;
+  totalCount: number;
+}
+
+/** Every page of a REST search, at the page size the server chooses; after the first, the pages load in parallel. */
+export async function fetchAll<T>(url: string) {
+  const fetchPage = (startIndex: number) =>
+    openmrsFetch<Page<T>>(`${url}&totalCount=true&startIndex=${startIndex}`).then(({ data }) => data);
+  const first = await fetchPage(0);
+  const pageSize = first.results.length;
+  const startIndexes = [];
+  for (let start = pageSize; pageSize && start < first.totalCount; start += pageSize) {
+    startIndexes.push(start);
+  }
+  const rest = await Promise.all(startIndexes.map(fetchPage));
+  return [first, ...rest].flatMap((page) => page.results);
+}

package/src/flag-gaps/flag-gaps.resource.test.ts

@@ -0,0 +1,57 @@
+import { describe, expect, it, vi } from 'vitest';
+import { renderHook, waitFor } from '@testing-library/react';
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { usePatientFlagGaps } from './flag-gaps.resource';
+
+const mockOpenmrsFetch = vi.mocked(openmrsFetch);
+
+const gap = {
+  encounter: 'encounter-1',
+  encounterDatetime: '2026-09-10T09:00:00.000+0000',
+  form: { uuid: 'form-uuid', display: 'Procedures and Outcomes' },
+  concept: { uuid: 'perfusion-uuid', display: 'Perfusion Issues' },
+};
+
+function respondWith(byUrl: (url: string) => unknown) {
+  mockOpenmrsFetch.mockImplementation((url: string) => Promise.resolve({ data: byUrl(url) }) as never);
+}
+
+describe('usePatientFlagGaps', () => {
+  it('looks up the gaps behind each flag the patient has raised now, each once', async () => {
+    respondWith((url) =>
+      url.includes('/patientflags/patientflag')
+        ? {
+            results: [
+              { voided: false, flag: { uuid: 'perfusion', display: 'RHD perfusion issues not recorded' } },
+              { voided: false, flag: { uuid: 'perfusion', display: 'RHD perfusion issues not recorded' } },
+              { voided: true, flag: { uuid: 'cleared', display: 'RHD site infection not recorded' } },
+            ],
+          }
+        : { configured: true, results: [gap] },
+    );
+
+    const { result } = renderHook(() => usePatientFlagGaps('patient-uuid'));
+
+    await waitFor(() => expect(result.current.flagGaps).toHaveLength(1));
+    expect(result.current.flagGaps[0]).toEqual({
+      flagUuid: 'perfusion',
+      flagName: 'RHD perfusion issues not recorded',
+      configured: true,
+      gaps: [gap],
+    });
+    const gapUrls = mockOpenmrsFetch.mock.calls.map(([url]) => url).filter((url) => url.includes('/rhdflags/gap'));
+    expect(gapUrls).toEqual([expect.stringContaining('patient=patient-uuid&flag=perfusion')]);
+  });
+
+  it('looks up only the clicked flag when it is given', async () => {
+    mockOpenmrsFetch.mockClear();
+    respondWith(() => ({ configured: false, results: [] }));
+
+    const { result } = renderHook(() => usePatientFlagGaps('patient-2', { uuid: 'death', name: 'RHD death' }));
+
+    await waitFor(() => expect(result.current.flagGaps).toHaveLength(1));
+    expect(result.current.flagGaps[0]).toMatchObject({ flagUuid: 'death', flagName: 'RHD death', configured: false });
+    const urls = mockOpenmrsFetch.mock.calls.map(([url]) => url);
+    expect(urls.some((url) => url.includes('/patientflags/patientflag'))).toBe(false);
+  });
+});

package/src/flag-gaps/flag-gaps.resource.ts

@@ -0,0 +1,69 @@
+import useSWR from 'swr';
+import { type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+
+/** One piece of data missing behind a flag, as the rhdflags gap endpoint returns it. */
+export interface FlagGap {
+  encounter: string;
+  encounterDatetime: string;
+  form: { uuid: string; display: string } | null;
+  concept: { uuid: string; display: string };
+}
+
+/** The gaps behind one of the patient's flags; `configured` is false for a flag with no gap query. */
+export interface FlagGaps {
+  flagUuid: string;
+  flagName: string;
+  configured: boolean;
+  gaps: Array<FlagGap>;
+}
+
+interface FlagGapsResponse {
+  configured: boolean;
+  results: Array<FlagGap>;
+}
+
+interface PatientFlagsResponse {
+  results: Array<{ voided: boolean; flag: { uuid: string; display: string } }>;
+}
+
+// The representation the patient chart's forms app opens a form with.
+const formRepresentation =
+  'custom:(uuid,name,display,encounterType:(uuid,name,viewPrivilege,editPrivilege),version,published,retired,resources:(uuid,name,dataType,valueReference))';
+
+async function fetchFlagGaps(patientUuid: string, flagUuid: string, flagName: string): Promise<FlagGaps> {
+  const { data } = await openmrsFetch<FlagGapsResponse>(
+    `${restBaseUrl}/rhdflags/gap?patient=${patientUuid}&flag=${flagUuid}`,
+  );
+  return { flagUuid, flagName, configured: data.configured, gaps: data.results };
+}
+
+/** The patient's flags that are raised now, each once. */
+async function fetchRaisedFlags(patientUuid: string) {
+  const { data } = await openmrsFetch<PatientFlagsResponse>(
+    `${restBaseUrl}/patientflags/patientflag?patient=${patientUuid}&v=custom:(voided,flag:(uuid,display))`,
+  );
+  const flags = new Map<string, string>();
+  data.results.filter((row) => !row.voided).forEach((row) => flags.set(row.flag.uuid, row.flag.display));
+  return [...flags].map(([uuid, name]) => ({ uuid, name }));
+}
+
+/**
+ * The gaps behind the clicked flag, or, when the workspace was not told which flag was clicked, behind
+ * every flag the patient has raised now.
+ */
+export function usePatientFlagGaps(patientUuid: string, clickedFlag?: { uuid: string; name: string }) {
+  const { data, error, isLoading } = useSWR<Array<FlagGaps>, Error>(
+    patientUuid ? ['rhd-flag-gaps', patientUuid, clickedFlag?.uuid ?? 'every raised flag'] : null,
+    async () => {
+      const flags = clickedFlag ? [clickedFlag] : await fetchRaisedFlags(patientUuid);
+      return Promise.all(flags.map((flag) => fetchFlagGaps(patientUuid, flag.uuid, flag.name)));
+    },
+  );
+
+  return { flagGaps: data ?? [], isLoading, error };
+}
+
+export async function fetchForm(formUuid: string) {
+  const response = await openmrsFetch(`${restBaseUrl}/form/${formUuid}?v=${formRepresentation}`);
+  return response.data;
+}

package/src/flag-gaps/flag-gaps.scss

@@ -0,0 +1,19 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.container {
+  padding: layout.$spacing-05;
+}
+
+.message {
+  @include type.type-style('body-compact-01');
+}
+
+.flag + .flag {
+  margin-top: layout.$spacing-07;
+}
+
+.flagName {
+  @include type.type-style('heading-compact-02');
+  margin-bottom: layout.$spacing-03;
+}

package/src/flag-gaps/flag-gaps.workspace.test.tsx

@@ -0,0 +1,208 @@
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { fetchForm, type FlagGap, type FlagGaps, usePatientFlagGaps } from './flag-gaps.resource';
+import FlagGapsWorkspace, { daysPending, type FlagActionWorkspaceProps } from './flag-gaps.workspace';
+
+vi.mock('./flag-gaps.resource', () => ({
+  usePatientFlagGaps: vi.fn(),
+  fetchForm: vi.fn(),
+}));
+
+const mockUsePatientFlagGaps = vi.mocked(usePatientFlagGaps);
+const mockFetchForm = vi.mocked(fetchForm);
+
+const workspaceProps: FlagActionWorkspaceProps = {
+  patientUuid: 'patient-uuid',
+  patientFlagUuid: 'patient-flag-uuid',
+  flagUuid: 'flag-uuid',
+  flagName: 'RHD perfusion issues not recorded',
+};
+
+const firstGap: FlagGap = {
+  encounter: 'encounter-1',
+  encounterDatetime: '2026-09-10T09:00:00.000+0000',
+  form: { uuid: 'form-uuid', display: 'Procedures and Outcomes' },
+  concept: { uuid: 'perfusion-uuid', display: 'Perfusion Issues' },
+};
+
+const secondGap: FlagGap = { ...firstGap, encounter: 'encounter-2', encounterDatetime: '2026-09-20T10:30:00.000+0000' };
+
+function showWorkspace(
+  launchChildWorkspace = vi.fn(),
+  props: Partial<FlagActionWorkspaceProps> | null = workspaceProps,
+) {
+  render(
+    <FlagGapsWorkspace
+      workspaceProps={props}
+      windowProps={null}
+      groupProps={{ patientUuid: 'patient-uuid' }}
+      launchChildWorkspace={launchChildWorkspace}
+      closeWorkspace={vi.fn()}
+      workspaceName="rhd-flag-gaps-workspace"
+      windowName="patient-chart-clinical-forms"
+      isRootWorkspace
+      showActionMenu={false}
+    />,
+  );
+  return launchChildWorkspace;
+}
+
+function flagWith(gaps: Array<FlagGap>, overrides: Partial<FlagGaps> = {}): FlagGaps {
+  return { flagUuid: 'flag-uuid', flagName: 'RHD perfusion issues not recorded', configured: true, gaps, ...overrides };
+}
+
+function flagsReturned(flagGaps: Array<FlagGaps>, overrides: Partial<ReturnType<typeof usePatientFlagGaps>> = {}) {
+  mockUsePatientFlagGaps.mockReturnValue({ flagGaps, isLoading: false, error: undefined, ...overrides });
+}
+
+// The clicked flag's gaps, as the lookup returns them for one flag.
+function gapsReturned({
+  gaps = [],
+  configured = true,
+  error,
+}: {
+  gaps?: Array<FlagGap>;
+  configured?: boolean;
+  error?: Error;
+}) {
+  flagsReturned(error ? [] : [flagWith(gaps, { configured })], { error });
+}
+
+describe('flag gaps workspace', () => {
+  beforeEach(() => {
+    vi.useFakeTimers({ toFake: ['Date'] });
+    vi.setSystemTime(new Date('2026-09-25T12:00:00.000Z'));
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('asks for the gaps of the clicked flag for the patient', () => {
+    gapsReturned({});
+
+    showWorkspace();
+
+    expect(mockUsePatientFlagGaps).toHaveBeenCalledWith('patient-uuid', {
+      uuid: 'flag-uuid',
+      name: 'RHD perfusion issues not recorded',
+    });
+    expect(screen.getByText('RHD perfusion issues not recorded')).toBeInTheDocument();
+  });
+
+  it('lists one row per gap with its form, question and days pending', () => {
+    gapsReturned({ gaps: [firstGap, secondGap] });
+
+    showWorkspace();
+
+    const rows = screen.getAllByRole('row');
+    expect(rows).toHaveLength(3);
+    expect(rows[1]).toHaveTextContent('Procedures and Outcomes');
+    expect(rows[1]).toHaveTextContent('Perfusion Issues');
+    expect(rows[1]).toHaveTextContent('15');
+    expect(rows[2]).toHaveTextContent('5');
+  });
+
+  it("opens the gap's encounter in the form entry workspace", async () => {
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    const form = { uuid: 'form-uuid', name: 'Procedures and Outcomes' };
+    mockFetchForm.mockResolvedValue(form);
+    gapsReturned({ gaps: [firstGap, secondGap] });
+
+    const launchChildWorkspace = showWorkspace();
+    await user.click(screen.getAllByRole('button', { name: /open form/i })[1]);
+
+    expect(mockFetchForm).toHaveBeenCalledWith('form-uuid');
+    expect(launchChildWorkspace).toHaveBeenCalledWith('patient-form-entry-workspace', {
+      form,
+      encounterUuid: 'encounter-2',
+    });
+  });
+
+  it('says so when the form cannot be opened', async () => {
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    mockFetchForm.mockRejectedValue(new Error('forbidden'));
+    gapsReturned({ gaps: [firstGap] });
+
+    const launchChildWorkspace = showWorkspace();
+    await user.click(screen.getByRole('button', { name: /open form/i }));
+
+    expect(launchChildWorkspace).not.toHaveBeenCalled();
+    expect(showSnackbar).toHaveBeenCalledWith(expect.objectContaining({ kind: 'error', subtitle: 'forbidden' }));
+  });
+
+  it('offers no way to open a gap whose form the user may not see', () => {
+    gapsReturned({ gaps: [{ ...firstGap, form: null }] });
+
+    showWorkspace();
+
+    expect(screen.getAllByRole('row')).toHaveLength(2);
+    expect(screen.queryByRole('button', { name: /open form/i })).not.toBeInTheDocument();
+  });
+
+  it('says so when the flag does not list its missing data', () => {
+    gapsReturned({ configured: false });
+
+    showWorkspace();
+
+    expect(screen.getByText(/does not list its missing data/i)).toBeInTheDocument();
+    expect(screen.queryByRole('table')).not.toBeInTheDocument();
+  });
+
+  it('offers a new form when no saved form is waiting to be completed', async () => {
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    gapsReturned({ gaps: [] });
+
+    const launchChildWorkspace = showWorkspace();
+    expect(screen.getByText(/no saved form is waiting to be completed/i)).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: /open clinical forms/i }));
+
+    expect(launchChildWorkspace).toHaveBeenCalledWith('clinical-forms-workspace');
+  });
+
+  it("lists the gaps behind each of the patient's flags when not told which flag was clicked", () => {
+    const sepsis = { ...firstGap, concept: { uuid: 'sepsis-uuid', display: 'Bacterial Sepsis' } };
+    flagsReturned([
+      flagWith([firstGap]),
+      flagWith([], { flagUuid: 'overdue-uuid', flagName: 'RHD prophylaxis overdue', configured: false }),
+      flagWith([sepsis], { flagUuid: 'sepsis-flag-uuid', flagName: 'RHD bacterial sepsis not recorded' }),
+    ]);
+
+    showWorkspace(vi.fn(), null);
+
+    expect(mockUsePatientFlagGaps).toHaveBeenCalledWith('patient-uuid', undefined);
+    expect(screen.getByText('Missing data')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'RHD perfusion issues not recorded' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'RHD bacterial sepsis not recorded' })).toBeInTheDocument();
+    expect(screen.queryByText('RHD prophylaxis overdue')).not.toBeInTheDocument();
+    expect(screen.getAllByRole('table')).toHaveLength(2);
+    expect(screen.getByText('Bacterial Sepsis')).toBeInTheDocument();
+  });
+
+  it("says so when none of the patient's flags lists its missing data", () => {
+    flagsReturned([flagWith([], { configured: false })]);
+
+    showWorkspace(vi.fn(), null);
+
+    expect(screen.getByText(/none of this patient's flags lists its missing data/i)).toBeInTheDocument();
+  });
+
+  it('says so when the gaps cannot be loaded', () => {
+    gapsReturned({ error: new Error('Privilege required: View Patient Flags') });
+
+    showWorkspace();
+
+    expect(screen.getByText(/could not load the missing data/i)).toBeInTheDocument();
+    expect(screen.getByText(/privilege required/i)).toBeInTheDocument();
+  });
+});
+
+describe('daysPending', () => {
+  it('counts whole days since the encounter', () => {
+    expect(daysPending('2026-09-10T09:00:00.000+0000', new Date('2026-09-25T08:59:00.000Z'))).toBe(14);
+    expect(daysPending('2026-09-10T09:00:00.000+0000', new Date('2026-09-25T09:00:00.000Z'))).toBe(15);
+  });
+});