@ampath/esm-dha-workflow-app 4.0.0-next.44 → 4.0.0-next.445

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;

package/src/case-summary/components/case-summary-printable.utils.ts

@@ -0,0 +1,51 @@
+import { formatDate, parseDate } from '@openmrs/esm-framework';
+import { type CaseSummaryLabInterpretation } from '../types/case-summary.types';
+
+export const EMPTY_VALUE = '—';
+
+export function formatDateSafe(value?: string): string {
+  return value ? formatDate(parseDate(value), { time: false }) : EMPTY_VALUE;
+}
+
+/**
+ * Human label for a lab interpretation. `interpretation` is only ever present
+ * on the wire when the result is abnormal — `NORMAL` and unassessable results
+ * omit the field entirely (see `CaseSummaryLabInterpretation`) — so every
+ * value this can be called with is a real flag to render.
+ */
+export function interpretationLabel(interpretation: CaseSummaryLabInterpretation): string {
+  switch (interpretation) {
+    case 'LOW':
+      return 'Low';
+    case 'HIGH':
+      return 'High';
+    case 'CRITICALLY_LOW':
+      return 'Critically low';
+    case 'CRITICALLY_HIGH':
+      return 'Critically high';
+    case 'OFF_SCALE_LOW':
+      return 'Off-scale low';
+    case 'OFF_SCALE_HIGH':
+      return 'Off-scale high';
+  }
+}
+
+/** Carbon tag tone for a lab interpretation — red for critical/off-scale, magenta for a plain high/low. */
+export function interpretationTagType(interpretation: CaseSummaryLabInterpretation): 'red' | 'magenta' {
+  return interpretation === 'LOW' || interpretation === 'HIGH' ? 'magenta' : 'red';
+}
+
+/**
+ * Splits a SOAP note section's prose into its component sentences for
+ * display as a scannable list rather than one dense paragraph. The
+ * server-generated text is sentence-terminated prose (`"Chief Complaint:
+ * HEADACHE. Onset: MODERATE."`), so splitting after `". "` recovers the
+ * original field-level lines without needing the raw fields.
+ */
+export function splitSoapSentences(text?: string): Array<string> {
+  if (!text) return [];
+  return text
+    .split(/(?<=[.!?])\s+/)
+    .map((sentence) => sentence.trim())
+    .filter(Boolean);
+}

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

@@ -0,0 +1,152 @@
+/**
+ * Types for the patient Case Summary.
+ *
+ * Mirrors the `hie-saf` package's `GET /case-summary` response verbatim
+ * (`packages/hie-saf/src/case-summary/types/index.ts`) — this endpoint now
+ * does the AMRS join server-side, so there is nothing left to assemble here.
+ * See `packages/hie-saf/docs/case-summary-endpoint.md` for the full contract.
+ */
+
+export type CaseSummaryVisit = {
+  uuid: string;
+  display?: string;
+  visitType?: string;
+  startDatetime?: string;
+  stopDatetime?: string;
+};
+
+export type CaseSummaryDemographics = {
+  name: string;
+  birthDate?: string;
+  gender?: string;
+  age?: string;
+  patientId?: string;
+  nationalId?: string;
+  crNumber?: string;
+};
+
+export type CaseSummaryAllergy = {
+  substance: string;
+  criticality?: string;
+  reaction?: string;
+};
+
+export type CaseSummaryCondition = {
+  code?: string;
+  description: string;
+  certainty?: string;
+  /** Present only for a rank-1 diagnosis. */
+  primary?: true;
+  onsetDate?: string;
+};
+
+/** Keyed, not an array of `{label, value}` pairs — display labels belong here in the view, via `VITAL_ROWS`. */
+export type CaseSummaryVitals = {
+  temperature?: string;
+  bloodPressure?: string;
+  pulse?: string;
+  respiratoryRate?: string;
+  spo2?: string;
+  height?: string;
+  weight?: string;
+  bmi?: string;
+  tewScore?: string;
+};
+
+export type CaseSummaryMedication = {
+  date?: string;
+  drug: string;
+  dose?: string;
+  route?: string;
+  frequency?: string;
+  duration?: string;
+  instructions?: string;
+};
+
+/**
+ * One encounter's non-vital obs. Kept in the type for parity with the wire
+ * contract, but deliberately not rendered by `CaseSummaryPrintable` — see the
+ * note there. The SOAP note is the intended replacement for this section.
+ */
+export type CaseSummaryClinicalNote = {
+  encounterUuid: string;
+  encounterType?: string;
+  datetime?: string;
+  fields: Array<{ label: string; value: string }>;
+};
+
+/** Present only when there is something to say — `'--'`/`NORMAL` are never sent. */
+export type CaseSummaryLabInterpretation =
+  | 'LOW'
+  | 'HIGH'
+  | 'CRITICALLY_LOW'
+  | 'CRITICALLY_HIGH'
+  | 'OFF_SCALE_LOW'
+  | 'OFF_SCALE_HIGH';
+
+export type CaseSummaryLabResult = {
+  test: string;
+  /** Immediate parent panel name when nested; absent at root. */
+  panel?: string;
+  value: string;
+  units?: string;
+  datetime?: string;
+  range?: string;
+  interpretation?: CaseSummaryLabInterpretation;
+};
+
+export type CaseSummaryLabOrder = {
+  uuid: string;
+  test: string;
+  orderNumber?: string;
+  orderedDate?: string;
+  /** Present only when no in-window result was found. */
+  pending?: true;
+  /** OpenMRS `order_action` — e.g. `NEW`, `RENEW`, `DISCONTINUE`. */
+  action?: string;
+  /** OpenMRS's own fulfiller workflow status — e.g. `RECEIVED`, `COMPLETED`, `EXCEPTION`. */
+  fulfillerStatus?: string;
+  results: Array<CaseSummaryLabResult>;
+};
+
+export type CaseSummaryInpatientDetails = {
+  admissionDate?: string;
+  ward?: string;
+  doctor?: string;
+  status?: string;
+  dischargeDate?: string;
+};
+
+/**
+ * A SOAP note assembled server-side from everything else in this response —
+ * narrative text, not a new source of clinical data. Deterministic and
+ * template-based, not model-generated. Each section is absent when nothing
+ * categorised into it.
+ */
+export type CaseSummarySoapNote = {
+  subjective?: string;
+  objective?: string;
+  assessment?: string;
+  plan?: string;
+};
+
+export type CaseSummaryResponse = {
+  /** Anchor visit; the merged span when several same-day visits were folded in. */
+  visit: CaseSummaryVisit;
+  /** All folded-in visit uuids, anchor first. Length > 1 ⇒ the view says "N visits combined". */
+  visitUuids: Array<string>;
+  demographics: CaseSummaryDemographics;
+  allergies: Array<CaseSummaryAllergy>;
+  /** Active diagnoses. */
+  conditions: Array<CaseSummaryCondition>;
+  vitals: CaseSummaryVitals;
+  /** Active drug orders only — inactive ones are filtered server-side. */
+  medications: Array<CaseSummaryMedication>;
+  clinicalNotes: Array<CaseSummaryClinicalNote>;
+  labOrders: Array<CaseSummaryLabOrder>;
+  /** Present only when orders existed but the lab results query failed. */
+  labResultsUnavailable?: true;
+  /** Present only for a visit with an ADT encounter — absent entirely for outpatient. */
+  inpatientDetails?: CaseSummaryInpatientDetails;
+  soapNote: CaseSummarySoapNote;
+};

package/src/claims/claims.component.scss

@@ -0,0 +1,70 @@
+// Stack the claim fields with clear spacing between them.
+.claimFields {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.preExistingInterventionsHeader {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.tableWrapper {
+  overflow-x: auto;
+}
+
+.field {
+  position: relative;
+}
+
+// Interventions field with its eligibility / preauth tags: field on its own row,
+// tags wrapping neatly below with breathing room.
+.interventionRow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem 0.75rem;
+
+  .field {
+    flex: 1 1 100%;
+  }
+}
+
+// Keep the eligibility spinner inline (Carbon defaults it to full width) so it
+// sits on the same row as the Needs Preauth tag.
+.checkingEligibility {
+  width: auto;
+  min-width: 0;
+}
+
+// A small spinner sitting inside the ComboBox's input row, just left of its chevron.
+//
+// The field is the containing block and the input is the last thing in it, so anchoring
+// to the bottom puts the spinner on the input row whatever the label above does — it
+// stays put if the label wraps to two lines, which it does in a narrow panel. 0.75rem up
+// from that edge centres a 1rem spinner on the 2.5rem row.
+//
+// z-index because the list-box paints its own background and border over anything sharing
+// its space; without it the spinner sits behind the field it is meant to be inside.
+.fieldSpinner {
+  position: absolute;
+  inset-inline-end: 2.5rem;
+  inset-block-end: 0.75rem;
+  z-index: 1;
+  width: 1rem;
+  height: 1rem;
+}
+
+// The spinner floats over the input, so the placeholder underneath has to stop short of
+// it — 2.5rem to clear the chevron, 1rem for the spinner, and a little air. Without this
+// the loading text ran under the spinner and the field read as garbled. Only applied
+// while the spinner is actually there.
+.field:has(.fieldSpinner) {
+  :global(.cds--text-input),
+  :global(.cds--list-box__field input) {
+    padding-inline-end: 4.25rem;
+    text-overflow: ellipsis;
+  }
+}