@ampath/esm-dha-workflow-app 4.0.0-next.33 → 4.0.0-next.331

package/src/bookings/bookings.component.tsx

@@ -0,0 +1,35 @@
+import { Checkbox, Layer, Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import React from 'react';
+import DailyBookings from './daily/daily-bookings.component';
+import styles from './bookings.component.scss';
+import FacilityAndWorkerSlot from '../shared/ui/facility-worker-slot/facility-worker.component-slot.component';
+const Bookings: React.FC = () => {
+  return (
+    <>
+      <div className={styles.bookingsLayout}>
+      <div className={styles.hwrSection}>
+        <FacilityAndWorkerSlot />
+      </div>
+        <div className={styles.bookingsHeader}>
+          <h4>Bookings</h4>
+        </div>
+        <div className={styles.bookingsContent}>
+          <Tabs>
+            <TabList contained>
+              <Tab>Daily</Tab>
+              <Tab>Monthly</Tab>
+            </TabList>
+            <TabPanels>
+              <TabPanel>
+                <DailyBookings />
+              </TabPanel>
+              <TabPanel></TabPanel>
+            </TabPanels>
+          </Tabs>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Bookings;

package/src/bookings/daily/daily-bookings.resource.ts

@@ -1,3 +1,4 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
 import { getEtlBaseUrl } from '../../shared/utils/get-base-url';
 import {
   type BookingFilter,
@@ -21,7 +22,7 @@ export async function getDailyBookings(
   };
   const queryString = new URLSearchParams(params).toString();
   const dailyAppUrl = `${etlBaseUrl}/${bookingType}/${bookingFilter.startDate}?&${queryString}`;
-  const resp = await fetch(dailyAppUrl);
+  const resp = await openmrsFetch(dailyAppUrl);
   const data: DailyBookingsReponse = await resp.json();
   return data.result ?? [];
 }

package/src/case-summary/case-summary.extension.scss

@@ -0,0 +1,13 @@
+@use '@carbon/layout';
+
+.caseSummary {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-05;
+  padding: layout.$spacing-05;
+}
+
+.toolbar {
+  display: flex;
+  justify-content: flex-end;
+}

package/src/case-summary/case-summary.extension.tsx

@@ -0,0 +1,40 @@
+import React, { useRef } from 'react';
+import { Button } from '@carbon/react';
+import { Printer } from '@carbon/react/icons';
+import { usePatient, useSession } from '@openmrs/esm-framework';
+import { useReactToPrint } from 'react-to-print';
+import CaseSummaryPrintable from './components/case-summary-printable.component';
+import { useVisitCaseSummary } from './case-summary.resource';
+import styles from './case-summary.extension.scss';
+
+interface CaseSummaryExtensionProps {}
+
+const CaseSummaryExtension: React.FC<CaseSummaryExtensionProps> = () => {
+  const { isLoading: isLoadingPatient, error: patientError, patient } = usePatient();
+  const session = useSession();
+  const { summary, isLoading, error } = useVisitCaseSummary(patient?.id, session?.sessionLocation?.uuid);
+  const printRef = useRef<HTMLDivElement>(null);
+  const printCaseSummary = useReactToPrint({
+    contentRef: printRef,
+    documentTitle: `CaseSummary-${summary?.demographics.name || patient?.id || 'patient'}`,
+    pageStyle: '@page { size: A4; margin: 16mm; }',
+  });
+
+  if (isLoadingPatient || isLoading) return <div>Loading…</div>;
+  if (patientError) return <div>Error loading patient</div>;
+  if (error) return <div>{error.message}</div>;
+  if (!summary) return <div>No case summary available.</div>;
+
+  return (
+    <div className={styles.caseSummary}>
+      <div className={styles.toolbar}>
+        <Button kind="tertiary" size="sm" renderIcon={Printer} onClick={() => printCaseSummary()}>
+          Print
+        </Button>
+      </div>
+      <CaseSummaryPrintable ref={printRef} summary={summary} />
+    </div>
+  );
+};
+
+export default CaseSummaryExtension;

package/src/case-summary/case-summary.resource.test.ts

@@ -0,0 +1,69 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { getHieBaseUrl } from '../shared/utils/get-base-url';
+import { getVisitCaseSummary } from './case-summary.resource';
+import { type CaseSummaryResponse } from './types/case-summary.types';
+
+// A factory mock, not a bare `jest.mock(path)` automock: the real
+// `get-base-url.ts` imports `moduleName` from `../..` (the app's root
+// `src/index.ts`), which pulls in the entire module registration graph —
+// including an ESM-only transitive dependency Jest can't transform. A
+// factory substitutes the mock directly without ever loading the real file.
+jest.mock('../shared/utils/get-base-url', () => ({
+  getHieBaseUrl: jest.fn(),
+}));
+
+const mockOpenmrsFetch = jest.mocked(openmrsFetch);
+const mockGetHieBaseUrl = jest.mocked(getHieBaseUrl);
+
+const BASE_URL = 'https://hie.example.org/api';
+
+function mockResponse(data: unknown, ok = true, status = 200) {
+  return { ok, status, json: async () => data } as any;
+}
+
+const summaryFixture: CaseSummaryResponse = {
+  visit: { uuid: 'visit-1', visitType: 'OPD Visit' },
+  visitUuids: ['visit-1'],
+  demographics: { name: 'JANE DOE' },
+  allergies: [],
+  conditions: [],
+  vitals: {},
+  medications: [],
+  clinicalNotes: [],
+  labOrders: [],
+  soapNote: {},
+};
+
+describe('getVisitCaseSummary', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+    mockGetHieBaseUrl.mockResolvedValue(BASE_URL);
+  });
+
+  it('requests the endpoint with patientUuid and locationUuid, omitting visitUuid when not given', async () => {
+    mockOpenmrsFetch.mockResolvedValueOnce(mockResponse(summaryFixture));
+
+    const summary = await getVisitCaseSummary('patient-1', 'loc-1');
+
+    const [url] = mockOpenmrsFetch.mock.calls[0] as [string];
+    expect(url).toBe(`${BASE_URL}/case-summary?patientUuid=patient-1&locationUuid=loc-1`);
+    expect(summary).toEqual(summaryFixture);
+  });
+
+  it('includes visitUuid when a specific visit is requested', async () => {
+    mockOpenmrsFetch.mockResolvedValueOnce(mockResponse(summaryFixture));
+
+    await getVisitCaseSummary('patient-1', 'loc-1', 'visit-1');
+
+    const [url] = mockOpenmrsFetch.mock.calls[0] as [string];
+    expect(url).toBe(`${BASE_URL}/case-summary?patientUuid=patient-1&locationUuid=loc-1&visitUuid=visit-1`);
+  });
+
+  it('surfaces a failed request as an Error carrying the status and upstream message', async () => {
+    mockOpenmrsFetch.mockResolvedValueOnce(mockResponse({ message: 'No visit found for this patient.' }, false, 404));
+
+    await expect(getVisitCaseSummary('patient-1', 'loc-1')).rejects.toThrow(
+      'Request failed with 404: No visit found for this patient.',
+    );
+  });
+});

package/src/case-summary/case-summary.resource.ts

@@ -0,0 +1,52 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { getHieBaseUrl } from '../shared/utils/get-base-url';
+import { type CaseSummaryResponse } from './types/case-summary.types';
+
+/**
+ * Fetches the assembled visit case summary from `hie-saf`'s `GET /case-summary`
+ * (`packages/hie-saf/src/case-summary/`). The AMRS join — demographics,
+ * allergies, active diagnoses, vitals, medications, lab results, and the SOAP
+ * note — now happens server-side in one call; this used to be ~11 REST/FHIR
+ * requests assembled client-side. See
+ * `packages/hie-saf/docs/case-summary-endpoint.md` for the full contract.
+ *
+ * `visitUuid` scopes to exactly that visit, with no same-day merging. Omit it
+ * for the default behaviour: the patient's current visit, merged with any
+ * sibling visit started the same calendar day.
+ */
+export async function getVisitCaseSummary(
+  patientUuid: string,
+  locationUuid: string,
+  visitUuid?: string,
+): Promise<CaseSummaryResponse> {
+  const hieBaseUrl = await getHieBaseUrl();
+  const params = new URLSearchParams({ patientUuid, locationUuid, ...(visitUuid ? { visitUuid } : {}) });
+  const url = `${hieBaseUrl}/case-summary?${params.toString()}`;
+  const response = await openmrsFetch<CaseSummaryResponse>(url);
+
+  const data = await response.json();
+
+  if (!response.ok) {
+    const errorText = (data as { message?: string })?.message || 'Failed to fetch case summary';
+    throw new Error(`Request failed with ${response.status}: ${errorText}`);
+  }
+
+  return data;
+}
+
+/**
+ * SWR hook for the visit case summary. `locationUuid` is required — the
+ * endpoint uses it to resolve the requesting facility — so the key stays
+ * `null` (no fetch) until both it and `patientUuid` are known. When
+ * `visitUuid` is omitted the most recent visit is resolved as part of the
+ * same underlying call. Returns the standard `{ data, isLoading, error,
+ * mutate }` shape used across the app.
+ */
+export function useVisitCaseSummary(patientUuid?: string, locationUuid?: string, visitUuid?: string) {
+  const key = patientUuid && locationUuid ? `case-summary:${patientUuid}:${locationUuid}:${visitUuid ?? 'latest'}` : null;
+  const { data, isLoading, error, mutate } = useSWR<CaseSummaryResponse, Error>(key, () =>
+    getVisitCaseSummary(patientUuid as string, locationUuid as string, visitUuid),
+  );
+  return { summary: data, isLoading, error, mutate };
+}

package/src/case-summary/components/case-summary-printable.component.scss

@@ -0,0 +1,174 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.document {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-06;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: layout.$spacing-02;
+  padding-bottom: layout.$spacing-04;
+  border-bottom: 1px solid $ui-03;
+  text-align: center;
+}
+
+.facility {
+  @include type.type-style('label-01');
+  color: $text-02;
+  text-transform: uppercase;
+}
+
+.title {
+  @include type.type-style('heading-compact-02');
+  color: $ui-05;
+  margin: 0;
+}
+
+.visitMeta {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-03;
+}
+
+.sectionTitle {
+  @include type.type-style('heading-compact-01');
+  color: $ui-05;
+  margin: 0;
+  padding-bottom: layout.$spacing-02;
+  border-bottom: 1px solid $ui-03;
+}
+
+.keyValueGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+  gap: layout.$spacing-04;
+}
+
+.keyValueItem {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.keyValueLabel {
+  @include type.type-style('label-01');
+  color: $text-02;
+}
+
+.keyValueValue {
+  @include type.type-style('body-compact-01');
+  color: $ui-05;
+}
+
+.mono {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 0.82rem;
+}
+
+.empty {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+  margin: 0;
+}
+
+.testOrders {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-05;
+}
+
+.testOrder {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-03;
+  /* Keep an order and its result rows on one page where the printer allows it. */
+  break-inside: avoid;
+}
+
+.testOrderHead {
+  display: flex;
+  align-items: baseline;
+  gap: layout.$spacing-03;
+}
+
+.testOrderName {
+  @include type.type-style('heading-compact-01');
+  color: $ui-05;
+}
+
+.testOrderMeta {
+  @include type.type-style('label-01');
+  color: $text-02;
+}
+
+.abnormalValue {
+  font-weight: 600;
+  margin-right: layout.$spacing-02;
+}
+
+/* ------------------------------------------------------------------ *
+ * SOAP note — four `Tile`s, one per section. Sections are told apart by
+ * icon + label, not colour: this is a clinical document that also prints,
+ * and Carbon itself reserves colour for semantic status (info/success/
+ * warning/error), not arbitrary categorisation — so none is used here.
+ * ------------------------------------------------------------------ */
+
+.soapGrid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: layout.$spacing-05;
+}
+
+.soapCard {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-03;
+  /* Keep a section's heading with its own content where the printer allows it. */
+  break-inside: avoid;
+}
+
+.soapCardHeader {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+  color: $text-02;
+  padding-bottom: layout.$spacing-02;
+  border-bottom: 1px solid $ui-03;
+}
+
+.soapCardTitle {
+  @include type.type-style('heading-compact-01');
+  color: $ui-05;
+  flex-grow: 1;
+}
+
+.soapList {
+  @include type.type-style('body-compact-01');
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-02;
+  margin: 0;
+  padding-left: layout.$spacing-05;
+  color: $ui-05;
+
+  li {
+    padding-left: layout.$spacing-02;
+  }
+}
+
+@media (max-width: 42rem) {
+  .soapGrid {
+    grid-template-columns: 1fr;
+  }
+}

package/src/case-summary/components/case-summary-printable.component.tsx

@@ -0,0 +1,288 @@
+import React from 'react';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tag, Tile } from '@carbon/react';
+import { Chat, ListChecked, Report, Stethoscope, type CarbonIconType } from '@carbon/react/icons';
+import { useSession } from '@openmrs/esm-framework';
+import { type CaseSummaryResponse, type CaseSummarySoapNote, type CaseSummaryVitals } from '../types/case-summary.types';
+import { EMPTY_VALUE, formatDateSafe, interpretationLabel, interpretationTagType, splitSoapSentences } from './case-summary-printable.utils';
+import styles from './case-summary-printable.component.scss';
+
+interface CaseSummaryPrintableProps {
+  summary: CaseSummaryResponse;
+}
+
+/** Display labels live here, not on the server — `vitals` is a keyed object addressed by field name. */
+const VITAL_ROWS: Array<[keyof CaseSummaryVitals, string]> = [
+  ['temperature', 'Temperature'],
+  ['bloodPressure', 'Blood Pressure'],
+  ['pulse', 'Pulse'],
+  ['respiratoryRate', 'Respiratory Rate'],
+  ['spo2', 'SpO₂'],
+  ['height', 'Height'],
+  ['weight', 'Weight'],
+  ['bmi', 'BMI'],
+  ['tewScore', 'TEW Score'],
+];
+
+const SOAP_SECTIONS: Array<{
+  key: keyof CaseSummarySoapNote;
+  letter: string;
+  title: string;
+  Icon: CarbonIconType;
+}> = [
+  { key: 'subjective', letter: 'S', title: 'Subjective', Icon: Chat },
+  { key: 'objective', letter: 'O', title: 'Objective', Icon: Stethoscope },
+  { key: 'assessment', letter: 'A', title: 'Assessment', Icon: Report },
+  { key: 'plan', letter: 'P', title: 'Plan', Icon: ListChecked },
+];
+
+const CaseSummaryPrintable = React.forwardRef<HTMLDivElement, CaseSummaryPrintableProps>(({ summary }, ref) => {
+  const session = useSession();
+  const { demographics, allergies, inpatientDetails, visit, visitUuids, vitals, conditions, medications, labOrders, labResultsUnavailable, soapNote } =
+    summary;
+
+  const soapSections = SOAP_SECTIONS.map((section) => ({ ...section, sentences: splitSoapSentences(soapNote[section.key]) }));
+  const hasSoapNote = soapSections.some((section) => section.sentences.length > 0);
+
+  return (
+    <div className={styles.document} ref={ref}>
+      <header className={styles.header}>
+        <div className={styles.facility}>{session?.sessionLocation?.display ?? EMPTY_VALUE}</div>
+        <h3 className={styles.title}>Patient Clinical Summary</h3>
+        <div className={styles.visitMeta}>
+          {visit.display ?? visit.visitType ?? 'Visit'} · {formatDateSafe(visit.startDatetime)}
+          {/* Say so when the day's visits were combined, so a reader isn't left
+              wondering why the content spans more than the named visit. */}
+          {visitUuids.length > 1 ? ` · ${visitUuids.length} visits combined` : ''}
+        </div>
+      </header>
+
+      <section className={styles.section}>
+        <h5 className={styles.sectionTitle}>Demographics</h5>
+        <div className={styles.keyValueGrid}>
+          <KeyValue label="Name" value={demographics.name || EMPTY_VALUE} />
+          <KeyValue label="DOB" value={formatDateSafe(demographics.birthDate)} />
+          <KeyValue label="Gender" value={demographics.gender ?? EMPTY_VALUE} />
+          <KeyValue label="National ID" value={demographics.nationalId ?? EMPTY_VALUE} />
+          <KeyValue label="CR Number" value={demographics.crNumber ?? EMPTY_VALUE} />
+        </div>
+      </section>
+
+      <section className={styles.section}>
+        <h5 className={styles.sectionTitle}>Allergies</h5>
+        {allergies.length ? (
+          <Table size="sm" aria-label="allergies" useZebraStyles>
+            <TableHead>
+              <TableRow>
+                <TableHeader>Substance</TableHeader>
+                <TableHeader>Criticality</TableHeader>
+                <TableHeader>Reaction</TableHeader>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {allergies.map((row, i) => (
+                <TableRow key={i}>
+                  <TableCell>{row.substance}</TableCell>
+                  <TableCell>{row.criticality ?? EMPTY_VALUE}</TableCell>
+                  <TableCell>{row.reaction ?? EMPTY_VALUE}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        ) : (
+          <p className={styles.empty}>No known allergies recorded.</p>
+        )}
+      </section>
+
+      <section className={styles.section}>
+        <h5 className={styles.sectionTitle}>Active Diagnoses</h5>
+        {conditions.length ? (
+          <Table size="sm" aria-label="active diagnoses" useZebraStyles>
+            <TableHead>
+              <TableRow>
+                <TableHeader>ICD-11</TableHeader>
+                <TableHeader>Description</TableHeader>
+                <TableHeader>Certainty</TableHeader>
+                <TableHeader>Primary</TableHeader>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {conditions.map((row, i) => (
+                <TableRow key={i}>
+                  <TableCell className={styles.mono}>{row.code ?? EMPTY_VALUE}</TableCell>
+                  <TableCell>{row.description}</TableCell>
+                  <TableCell>{row.certainty ?? EMPTY_VALUE}</TableCell>
+                  <TableCell>{row.primary ? 'Yes' : EMPTY_VALUE}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        ) : (
+          <p className={styles.empty}>No active diagnoses recorded.</p>
+        )}
+      </section>
+
+      <section className={styles.section}>
+        <h5 className={styles.sectionTitle}>Latest Vitals</h5>
+        <div className={styles.keyValueGrid}>
+          {VITAL_ROWS.map(([key, label]) => (
+            <KeyValue key={key} label={label} value={vitals[key] ?? EMPTY_VALUE} />
+          ))}
+        </div>
+      </section>
+
+      <section className={styles.section}>
+        <h5 className={styles.sectionTitle}>Active Medications</h5>
+        {medications.length ? (
+          <Table size="sm" aria-label="active medications" useZebraStyles>
+            <TableHead>
+              <TableRow>
+                <TableHeader>Date</TableHeader>
+                <TableHeader>Drug Name</TableHeader>
+                <TableHeader>Dose</TableHeader>
+                <TableHeader>Route</TableHeader>
+                <TableHeader>Frequency</TableHeader>
+                <TableHeader>Duration</TableHeader>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {medications.map((row, i) => (
+                <TableRow key={i}>
+                  <TableCell>{formatDateSafe(row.date)}</TableCell>
+                  <TableCell>{row.drug}</TableCell>
+                  <TableCell>{row.dose ?? EMPTY_VALUE}</TableCell>
+                  <TableCell>{row.route ?? EMPTY_VALUE}</TableCell>
+                  <TableCell>{row.frequency ?? EMPTY_VALUE}</TableCell>
+                  <TableCell>{row.duration ?? EMPTY_VALUE}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        ) : (
+          <p className={styles.empty}>No active medications recorded.</p>
+        )}
+      </section>
+
+      <section className={styles.section}>
+        <h5 className={styles.sectionTitle}>Test Results</h5>
+        {/* Three distinct states, which is the point of this section: nothing ordered,
+            ordered but not yet resulted, and ordered but the lookup failed. A failed
+            lookup is reported *alongside* the orders, never instead of them — which
+            tests were requested is useful even when their values can't be shown. */}
+        {!labOrders.length ? (
+          <p className={styles.empty}>No tests were ordered during this visit.</p>
+        ) : (
+          <div className={styles.testOrders}>
+            {labResultsUnavailable ? (
+              <p className={styles.empty}>Results could not be retrieved — the tests ordered are listed below.</p>
+            ) : null}
+            {labOrders.map((order) => (
+              <div key={order.uuid} className={styles.testOrder}>
+                <div className={styles.testOrderHead}>
+                  <span className={styles.testOrderName}>{order.test || EMPTY_VALUE}</span>
+                  <span className={styles.testOrderMeta}>Ordered {formatDateSafe(order.orderedDate)}</span>
+                  {order.pending ? (
+                    <Tag size="sm" type="gray">
+                      Pending
+                    </Tag>
+                  ) : null}
+                </div>
+                {order.results.length ? (
+                  <Table size="sm" aria-label={`results for ${order.test}`} useZebraStyles>
+                    <TableHead>
+                      <TableRow>
+                        <TableHeader>Test</TableHeader>
+                        <TableHeader>Result</TableHeader>
+                        <TableHeader>Units</TableHeader>
+                        <TableHeader>Reference</TableHeader>
+                        <TableHeader>Date</TableHeader>
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {order.results.map((row, i) => (
+                        <TableRow key={i}>
+                          <TableCell>{row.panel && row.panel !== row.test ? `${row.panel} · ${row.test}` : row.test}</TableCell>
+                          <TableCell>
+                            <span className={row.interpretation ? styles.abnormalValue : undefined}>{row.value}</span>
+                            {row.interpretation ? (
+                              <Tag size="sm" type={interpretationTagType(row.interpretation)}>
+                                {interpretationLabel(row.interpretation)}
+                              </Tag>
+                            ) : null}
+                          </TableCell>
+                          <TableCell>{row.units ?? EMPTY_VALUE}</TableCell>
+                          <TableCell>{row.range ?? EMPTY_VALUE}</TableCell>
+                          <TableCell>{formatDateSafe(row.datetime)}</TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                ) : (
+                  <p className={styles.empty}>Awaiting results.</p>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+
+      {/* Replaces the old Clinical Notes section (raw per-encounter obs dump) — the
+          SOAP note below is server-generated from the same underlying data, already
+          organised into the categories a reader actually wants: what the patient said,
+          what was observed, what was concluded, what happens next. */}
+      <section className={styles.section}>
+        <h5 className={styles.sectionTitle}>Clinical SOAP Note</h5>
+        {hasSoapNote ? (
+          <div className={styles.soapGrid}>
+            {soapSections.map(({ key, letter, title, Icon, sentences }) =>
+              sentences.length ? (
+                <Tile key={key} className={styles.soapCard}>
+                  <div className={styles.soapCardHeader}>
+                    <Icon size={16} />
+                    <span className={styles.soapCardTitle}>{title}</span>
+                    <Tag size="sm" type="gray">
+                      {letter}
+                    </Tag>
+                  </div>
+                  <ul className={styles.soapList}>
+                    {sentences.map((sentence, i) => (
+                      <li key={i}>{sentence}</li>
+                    ))}
+                  </ul>
+                </Tile>
+              ) : null,
+            )}
+          </div>
+        ) : (
+          <p className={styles.empty}>No SOAP note could be generated for this visit.</p>
+        )}
+      </section>
+
+      {/* Omitted entirely for an outpatient visit — a heading over "not applicable" is
+          just noise on a printed page. `inpatientDetails` is only set when the visit
+          carries an ADT encounter. */}
+      {inpatientDetails ? (
+        <section className={styles.section}>
+          <h5 className={styles.sectionTitle}>Inpatient Details</h5>
+          <div className={styles.keyValueGrid}>
+            <KeyValue label="Admission Date" value={formatDateSafe(inpatientDetails.admissionDate)} />
+            <KeyValue label="Status" value={inpatientDetails.status ?? EMPTY_VALUE} />
+            <KeyValue label="Ward" value={inpatientDetails.ward ?? EMPTY_VALUE} />
+            <KeyValue label="Doctor" value={inpatientDetails.doctor ?? EMPTY_VALUE} />
+            <KeyValue label="Discharge Date" value={formatDateSafe(inpatientDetails.dischargeDate)} />
+          </div>
+        </section>
+      ) : null}
+    </div>
+  );
+});
+
+CaseSummaryPrintable.displayName = 'CaseSummaryPrintable';
+
+const KeyValue: React.FC<{ label: string; value: string }> = ({ label, value }) => (
+  <div className={styles.keyValueItem}>
+    <span className={styles.keyValueLabel}>{label}</span>
+    <span className={styles.keyValueValue}>{value}</span>
+  </div>
+);
+
+export default CaseSummaryPrintable;