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

package/src/billing/dashboard/v2/claim-visits/claim-diagnosis-details/claim-diagnosis-panel.component.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { Button, Tag } from '@carbon/react';
+import { formatDate, parseDate } from '@openmrs/esm-framework';
+import { type VisitDiagnosis } from '../../types';
+import styles from './claim-diagnosis-panel.component.scss';
+
+/** What the claim page states above this panel, so the panel doesn't restate it. */
+export interface DiagnosisClaimFacts {
+  memberNumber?: string;
+  patientNumber?: string;
+}
+
+interface ClaimDiagnosisPanelProps {
+  diagnosis: VisitDiagnosis;
+  claimFacts?: DiagnosisClaimFacts;
+  onClose?: () => void;
+}
+
+const sameValue = (a?: string | null, b?: string | null): boolean =>
+  (a ?? '').trim().toUpperCase() === (b ?? '').trim().toUpperCase();
+
+const asDate = (value?: string | null): string => {
+  const v = (value ?? '').trim();
+  if (!v) {
+    return '';
+  }
+  try {
+    return formatDate(parseDate(v));
+  } catch {
+    return v;
+  }
+};
+
+/**
+ * A diagnosis as the side panel shows it.
+ *
+ * A diagnosis carries little, so the work here is in what it doesn't show: the member
+ * number the claim above already names, and an intervention code that is only worth
+ * stating when it differs from the diagnosis' own. What it adds is the flag — whether the
+ * payer has marked this diagnosis for attention — which the card never surfaced at all.
+ */
+const ClaimDiagnosisPanel: React.FC<ClaimDiagnosisPanelProps> = ({ diagnosis, claimFacts, onClose }) => {
+  const recorded = asDate(diagnosis.recorded_on);
+
+  const facts = [
+    { label: 'Diagnosis code', value: diagnosis.diagnosis_code },
+    // The same code on both sides says nothing twice; only a differing one is a fact.
+    ...(sameValue(diagnosis.intervention_code, diagnosis.diagnosis_code)
+      ? []
+      : [{ label: 'Intervention code', value: diagnosis.intervention_code }]),
+    { label: 'Recorded', value: recorded },
+    ...(sameValue(diagnosis.patient_number, claimFacts?.memberNumber) ||
+    sameValue(diagnosis.patient_number, claimFacts?.patientNumber)
+      ? []
+      : [{ label: 'Member number', value: diagnosis.patient_number }]),
+  ].filter((fact) => Boolean((fact.value ?? '').trim()));
+
+  return (
+    <div className={styles.panel}>
+      {/* Only when it is set: a diagnosis not flagged is the norm and says nothing. */}
+      {diagnosis.is_flagged_diagnosis ? (
+        <div className={styles.flagRow}>
+          <Tag size="sm" type="red">
+            Flagged diagnosis
+          </Tag>
+        </div>
+      ) : null}
+
+      <dl className={styles.meta}>
+        {facts.map((fact) => (
+          <div key={fact.label}>
+            <dt>{fact.label}</dt>
+            <dd>{fact.value}</dd>
+          </div>
+        ))}
+      </dl>
+
+      {/* Held to the bottom of the panel. This panel is rendered from a record model
+          rather than as a child of the workspace, so it has no closeWorkspace prop to
+          call — it dismisses the panel by name instead. */}
+      <div className={styles.footer}>
+        <Button kind="secondary" size="sm" onClick={onClose}>
+          Close
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default ClaimDiagnosisPanel;

package/src/billing/dashboard/v2/claim-visits/claim-doctors/claim-doctors.scss

@@ -0,0 +1,28 @@
+@use '../shared/empty-state' as empty;
+
+/* Plain names, run together — no chips, no avatars. */
+.doctors {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.4;
+  color: #161616;
+  overflow-wrap: anywhere;
+}
+
+/* Compact inline note — doctors don't warrant a full empty-state tile. */
+.empty {
+  margin: 0;
+  font-size: 0.8125rem;
+  color: #6f6f6f;
+}
+
+/* Unless the claim can still be worked on, when the same gap is something to act on.
+   Shares its look with the diagnoses callout, which is rendered by a different component
+   entirely — see the partial. */
+.emptyDanger {
+  @include empty.blocking-callout;
+}
+
+.emptyDangerIcon {
+  @include empty.blocking-callout-icon;
+}

package/src/billing/dashboard/v2/claim-visits/claim-doctors/claim-doctors.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { WarningFilled } from '@carbon/react/icons';
+import { type ClaimDoctor } from '../../types';
+import styles from './claim-doctors.scss';
+
+interface claimDoctorsProps {
+  claimDoctors: ClaimDoctor[];
+  /** The claim can still be worked on, so a missing doctor is a gap to fill rather than
+      a record of what never happened. Colours the empty state to match the other
+      sections whose emptiness is holding the claim up. */
+  blocking?: boolean;
+}
+
+// A claim doctor carries nothing but a name, so the names are set as plain text — an
+// avatar and a pill around each said no more than the name already does.
+const ClaimDoctors: React.FC<claimDoctorsProps> = ({ claimDoctors, blocking }) => {
+  const names = (claimDoctors ?? []).map((cd) => (cd.doctor_name ?? '').trim()).filter(Boolean);
+
+  if (names.length === 0) {
+    if (blocking) {
+      return (
+        // `role="alert"` only here: a claim that is past being worked on has nothing to
+        // announce, and its empty state stays the quiet note below.
+        <p className={styles.emptyDanger} role="alert">
+          <WarningFilled size={20} className={styles.emptyDangerIcon} />
+          <span>No doctor recorded. One must be recorded before this claim can be submitted.</span>
+        </p>
+      );
+    }
+    return <p className={styles.empty}>No doctors on this claim.</p>;
+  }
+
+  return <p className={styles.doctors}>{names.join(', ')}</p>;
+};
+
+export default ClaimDoctors;

package/src/billing/dashboard/v2/claim-visits/claim-history/claim-history.component.scss

@@ -0,0 +1,119 @@
+/* Chips, not a track: nothing here claims one entry led to the next, only that each
+   happened. Being unordered, they can wrap — which is what keeps this section to two or
+   three lines however much the claim carries. */
+.history {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+/* The live one, leading, set apart from the settled facts below it. */
+.status {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem 0.5rem;
+  min-width: 0;
+}
+
+/* Same micro-label as the claim's other headers, so the rail reads as one column. */
+.statusLabel {
+  font-size: 0.625rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  color: #6f6f6f;
+  flex-shrink: 0;
+}
+
+.statusTag {
+  /* Carbon tags carry their own margin, which would knock the tag out of line with the
+     text beside it. */
+  margin: 0;
+}
+
+.statusNote {
+  font-size: 0.75rem;
+  color: #6f6f6f;
+  overflow-wrap: anywhere;
+}
+
+/* Pushed to the end of the status line so the caveat costs no line of its own. */
+.caveat {
+  margin-left: auto;
+}
+
+.caveatTrigger {
+  display: inline-flex;
+  align-items: center;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: #8d8d8d;
+  cursor: help;
+
+  &:hover,
+  &:focus-visible {
+    color: #525252;
+  }
+}
+
+.confirming {
+  min-height: 1.25rem;
+
+  :global(.cds--inline-loading__text) {
+    font-size: 0.75rem;
+    color: #6f6f6f;
+  }
+}
+
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  min-width: 0;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.125rem 0.5rem 0.125rem 0.375rem;
+  border-radius: 0.75rem;
+  font-size: 0.75rem;
+  line-height: 1.34;
+  white-space: nowrap;
+  /* A long note — an authorisation status, say — gives up the nowrap rather than push
+     the row wider than the pane. */
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.chipDone {
+  background: #defbe6;
+  color: #0e6027;
+}
+
+.chipWarning {
+  background: #fcf4d6;
+  color: #684e00;
+}
+
+.chipLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* The qualifier — a count, a retry, an outcome — carried at a lower weight than the
+   fact it qualifies. */
+.chipNote {
+  padding-left: 0.25rem;
+  border-left: 1px solid currentColor;
+  opacity: 0.7;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/src/billing/dashboard/v2/claim-visits/claim-history/claim-history.component.tsx

@@ -0,0 +1,198 @@
+import React from 'react';
+import { CheckmarkFilled, InformationFilled, WarningAltFilled } from '@carbon/react/icons';
+import { InlineLoading, Tag, Tooltip } from '@carbon/react';
+import { type ClaimsVisit } from '../../types';
+import { claimStatusTagType, getClaimWorkflowPhase, humaniseClaimStatus } from '../../claim-statuses';
+import styles from './claim-history.component.scss';
+
+interface ClaimHistoryProps {
+  claimsVisit: ClaimsVisit;
+  /** No live `workflow_state` has arrived yet, so the current entry holds back rather
+      than assert the copy stored when the visit was recorded. */
+  claimStateUnconfirmed?: boolean;
+}
+
+type MilestoneTone = 'done' | 'warning';
+
+interface Milestone {
+  /** The chip's own word, kept to one or two so a claim's whole history fits on a line. */
+  label: string;
+  /** What qualifies it — a count, a retry, an outcome. Rendered dimmed beside the label. */
+  note?: string;
+  /** The unabbreviated sentence, for the chip's hover title. */
+  detail: string;
+  tone: MilestoneTone;
+}
+
+const PHASE_LABEL: Record<string, string> = {
+  preparation: 'Being prepared',
+  submission: 'Submission and dispatch',
+  payer: 'With the payer',
+  final: 'Closed',
+};
+
+const CAVEAT =
+  'What the claim records having happened. The claims API returns no dates for these, and nothing here says the order they happened in.';
+
+const plural = (n: number, one: string, many: string) => `${n} ${n === 1 ? one : many}`;
+
+/**
+ * What has happened to this claim, as far as the claim itself evidences it.
+ *
+ * There is no transition log to read: `/claim-preview/provider` returns the claim's
+ * current `workflow_state` and nothing about the states before it. So this is not a
+ * progress bar through a fixed lifecycle — claims don't share one path, and a bar would
+ * assert steps that never happened. Every chip below is instead derived from a field the
+ * claim actually carries, so a claim that skipped a stage simply has no chip for it.
+ *
+ * It reads as a status line and a row of chips rather than a stacked list because the
+ * entries have no order to preserve and no dates to align — being unordered, they lose
+ * nothing by wrapping, and the section keeps to two or three lines inside a details pane
+ * that has several more sections to get through.
+ */
+const ClaimHistory: React.FC<ClaimHistoryProps> = ({ claimsVisit, claimStateUnconfirmed }) => {
+  if (!claimsVisit) {
+    return null;
+  }
+
+  const diagnoses = Number(claimsVisit.diagnoses_count ?? 0);
+  const attachments = Number(claimsVisit.claim_attachments_count ?? 0);
+  const invoiceCount = Number(claimsVisit.number_of_invoices ?? 0);
+  const retries = Number(claimsVisit.retry_count ?? 0);
+  const dispatched = (claimsVisit.invoices ?? []).some(
+    (invoice) => (invoice?.dispatch_status ?? '').trim().toUpperCase() === 'DISPATCHED',
+  );
+
+  const milestones: Milestone[] = [];
+
+  // --- What was assembled, each counted from the claim's own totals.
+  if (diagnoses > 0) {
+    milestones.push({
+      label: 'Diagnoses',
+      note: String(diagnoses),
+      detail: `${plural(diagnoses, 'diagnosis', 'diagnoses')} recorded`,
+      tone: 'done',
+    });
+  }
+  if (invoiceCount > 0) {
+    milestones.push({
+      label: 'Invoiced',
+      note: String(invoiceCount),
+      detail: `${plural(invoiceCount, 'invoice', 'invoices')} raised`,
+      tone: 'done',
+    });
+  }
+  if (attachments > 0) {
+    milestones.push({
+      label: 'Documents',
+      note: String(attachments),
+      detail: `${plural(attachments, 'document', 'documents')} attached`,
+      tone: 'done',
+    });
+  }
+  if (claimsVisit.is_charge_master_mapped) {
+    milestones.push({ label: 'Charges mapped', detail: 'Charges mapped to the charge master', tone: 'done' });
+  }
+
+  // --- The visit's authorisation, in the payer's own words.
+  if ((claimsVisit.claim_auth_status ?? '').trim()) {
+    const authStatus = humaniseClaimStatus(claimsVisit.claim_auth_status);
+    milestones.push({
+      label: 'Visit auth',
+      note: authStatus,
+      detail: `Visit authorisation: ${authStatus}`,
+      tone: claimStatusTagType(claimsVisit.claim_auth_status) === 'red' ? 'warning' : 'done',
+    });
+  }
+
+  // --- The hand-off. A dispatched invoice is the evidence the claim reached the payer;
+  // a retry count is evidence it took more than one attempt.
+  if (dispatched) {
+    milestones.push({
+      label: 'Dispatched',
+      note: retries > 0 ? `after ${retries}` : undefined,
+      detail:
+        retries > 0
+          ? `Dispatched to the payer after ${plural(retries, 'failed attempt', 'failed attempts')}`
+          : 'Dispatched to the payer',
+      tone: 'done',
+    });
+  } else if (retries > 0) {
+    milestones.push({
+      label: 'Dispatch failed',
+      note: `${retries}×`,
+      detail: `${plural(retries, 'failed attempt', 'failed attempts')} to dispatch, not yet dispatched`,
+      tone: 'warning',
+    });
+  }
+
+  // --- What came back.
+  if (claimsVisit.has_reviewed_claim) {
+    milestones.push({ label: 'Reviewed', detail: 'Reviewed by the payer', tone: 'done' });
+  }
+  if (claimsVisit.is_resubmitted) {
+    milestones.push({ label: 'Resubmitted', detail: 'Sent to the payer more than once', tone: 'done' });
+  }
+
+  // --- Anomalies the payer will act on, worth surfacing beside the rest.
+  if (claimsVisit.is_zero) {
+    milestones.push({ label: 'Zero value', detail: 'Zero-value claim', tone: 'warning' });
+  }
+  if (claimsVisit.is_negative) {
+    milestones.push({ label: 'Negative value', detail: 'Negative-value claim', tone: 'warning' });
+  }
+
+  const phase = getClaimWorkflowPhase(claimsVisit.workflow_state);
+  const phaseLabel = PHASE_LABEL[phase] ?? '';
+
+  return (
+    <div className={styles.history}>
+      {/* Where the claim stands now, leading and always shown — even on a claim that
+          evidences nothing else, which is exactly what a fresh draft looks like. The
+          "Now" label is what separates this from the settled facts below it, standing in
+          for the divider a wider column would have used. */}
+      <div className={styles.status}>
+        <span className={styles.statusLabel}>Now</span>
+        {claimStateUnconfirmed ? (
+          <InlineLoading status="active" description="Confirming…" className={styles.confirming} />
+        ) : (
+          <>
+            <Tag size="sm" type={claimStatusTagType(claimsVisit.workflow_state)} className={styles.statusTag}>
+              {claimsVisit.workflow_state || 'Unknown'}
+            </Tag>
+            {phaseLabel ? <span className={styles.statusNote}>{phaseLabel}</span> : null}
+          </>
+        )}
+
+        {/* The caveat that used to sit under the list as a sentence. It qualifies the
+            chips rather than adding to them, so it hides behind the icon and stops
+            costing a line of its own. */}
+        <Tooltip align="bottom-right" label={CAVEAT} className={styles.caveat}>
+          <button type="button" className={styles.caveatTrigger} aria-label="About this history">
+            <InformationFilled size={16} />
+          </button>
+        </Tooltip>
+      </div>
+
+      {/* Unordered by nature: each chip is one fact the claim carries, not a step that
+          led to the next. */}
+      {milestones.length ? (
+        <ul className={styles.chips}>
+          {milestones.map((milestone, index) => (
+            <li
+              className={`${styles.chip} ${milestone.tone === 'warning' ? styles.chipWarning : styles.chipDone}`}
+              key={`${milestone.label}-${index}`}
+              title={milestone.detail}
+            >
+              {milestone.tone === 'warning' ? <WarningAltFilled size={16} /> : <CheckmarkFilled size={16} />}
+              <span className={styles.chipLabel}>{milestone.label}</span>
+              {milestone.note ? <span className={styles.chipNote}>{milestone.note}</span> : null}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  );
+};
+
+export default ClaimHistory;

package/src/billing/dashboard/v2/claim-visits/claim-intervention-details/claim-intervention-details.component.scss

@@ -0,0 +1,5 @@
+.attachmentButtons {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}

package/src/billing/dashboard/v2/claim-visits/claim-intervention-details/claim-intervention-details.component.tsx

@@ -0,0 +1,160 @@
+import React from 'react';
+import { Button, Tag } from '@carbon/react';
+import { type ClaimAttachment, type PatientFacilityBillDetails, type VisitIntervention } from '../../types';
+import { asBool } from '../../preauth/preauth.resource';
+import { interventionHasBlockingPreauth } from '../../../../../claims/claims.resource';
+import RecordCards, { YesNo, type RecordCardModel } from '../shared/record-cards.component';
+import InterventionAttachments from './intervention-attachments.component';
+import ClaimInterventionPanel, { type InterventionClaimFacts } from './claim-intervention-panel.component';
+
+interface claimInterventionDetailsProps {
+  claimInterventions: VisitIntervention[];
+  consentToken: string;
+}
+
+// Context needed for the per-intervention required-documents region.
+export interface InterventionAttachmentOpts {
+  consentToken: string;
+  locationUuid: string;
+  claimAttachments: ClaimAttachment[];
+  bill?: PatientFacilityBillDetails;
+  /** Only a draft claim accepts new documents; otherwise the rows are read-only. */
+  isClaimDraft?: boolean;
+  /** Whether the claim is currently open to content edits (gates Switch / Raise preauth). */
+  canSwitchIntervention?: boolean;
+  /** Launches the switch workflow scoped to this card's intervention. */
+  onSwitchIntervention?: (intervention: VisitIntervention) => void;
+  /** Opens the normal preauth workspace for this intervention. */
+  onRaisePreauth?: (intervention: VisitIntervention) => void;
+  /** Raw GET /pre-auth/preview payload — used to hide Raise when a non-failed row exists. */
+  preauthPreview?: unknown;
+}
+
+// A claim intervention is actionable only while its workflow_state is ACTIVE;
+// one already switched out (INACTIVE) has nothing left to change.
+const isActiveIntervention = (iv: VisitIntervention) => (iv.workflow_state ?? '').toUpperCase() === 'ACTIVE';
+
+// Builder so the cards can be merged into a shared grid with the invoices. When `opts`
+// is given, each card gets an expandable "required documents" region driven by that
+// intervention's own applicable_document_types.
+export function buildInterventionRecords(
+  claimInterventions: VisitIntervention[],
+  opts?: InterventionAttachmentOpts,
+  /** What the claim page states above the panel, so the panel doesn't restate it. */
+  claimFacts?: InterventionClaimFacts,
+): RecordCardModel[] {
+  return (claimInterventions ?? []).map((ci) => {
+    const requiredDocs = Array.from(new Set(ci.applicable_document_types ?? []));
+    const canAct = Boolean(opts?.canSwitchIntervention) && isActiveIntervention(ci);
+    const alreadyRaised = interventionHasBlockingPreauth(opts?.preauthPreview, ci.intervention_code);
+    const canRaisePreauth = canAct && Boolean(ci.needs_preauth) && !alreadyRaised;
+    const hasActions = Boolean(opts?.onSwitchIntervention || opts?.onRaisePreauth);
+    const raisePreauthReason = !ci.needs_preauth
+      ? 'This intervention does not need preauth'
+      : alreadyRaised
+        ? 'Preauth already raised for this intervention'
+        : 'This intervention is no longer open to changes';
+
+    return {
+      // How the side panel renders this intervention, in place of the generic field grid.
+      panel: (
+        <ClaimInterventionPanel
+          intervention={ci}
+          attachmentOpts={opts}
+          claimFacts={claimFacts}
+          canSwitch={canAct}
+          canRaisePreauth={canRaisePreauth}
+          onSwitch={opts?.onSwitchIntervention ? () => opts.onSwitchIntervention!(ci) : undefined}
+          onRaisePreauth={opts?.onRaisePreauth ? () => opts.onRaisePreauth!(ci) : undefined}
+          raisePreauthReason={raisePreauthReason}
+        />
+      ),
+      tone: 'purple',
+      kind: 'Intervention',
+      title: ci.intervention_name,
+      badge: ci.workflow_state ? (
+        <Tag size="sm" type="teal">
+          {ci.workflow_state}
+        </Tag>
+      ) : undefined,
+      fields: [
+        { label: 'Code', value: ci.intervention_code },
+        { label: 'Payment mechanism', value: ci.intervention_payment_mechanism },
+        { label: 'Scheme', value: ci.supported_scheme },
+        { label: 'Sub benefit code', value: ci.sub_benefit_code },
+        { label: 'Fund', value: ci.intervention_fund },
+        { label: 'Keph level tariff', value: ci.keph_level_tarrif },
+        { label: 'Accrued per diem', value: ci.accrued_per_diem_amount },
+        { label: 'Accrued per diem days', value: ci.accrued_per_diem_days },
+        { label: 'Active for UHC', value: <YesNo value={ci.active_for_uhc} /> },
+        { label: 'Needs preauth', value: <YesNo value={ci.needs_preauth} /> },
+        {
+          label: 'Surgical preauth',
+          value: <YesNo value={asBool(ci.requires_surgical_preauth ?? (ci as any).requiresSurgicalPreauth)} />,
+        },
+        {
+          label: 'Renal preauth',
+          value: <YesNo value={asBool(ci.requires_renal_preauth ?? (ci as any).requiresRenalPreauth)} />,
+        },
+        {
+          label: 'Oncology preauth',
+          value: <YesNo value={asBool(ci.requires_oncology_preauth ?? (ci as any).requiresOncologyPreauth)} />,
+        },
+        {
+          label: 'Radiology preauth',
+          value: <YesNo value={asBool(ci.requires_radiology_preauth ?? (ci as any).requiresRadiologyPreauth)} />,
+        },
+        {
+          label: 'Optical preauth',
+          value: <YesNo value={asBool(ci.requires_optical_preauth ?? (ci as any).requiresOpticalPreauth)} />,
+        },
+      ],
+      expandable: opts
+        ? {
+            label: (open: boolean) => `${open ? 'Hide' : 'Show'} required claim documents (${requiredDocs.length})`,
+            content: <InterventionAttachments intervention={ci} {...opts} />,
+            // Nothing to show when the intervention requires no documents, so start
+            // collapsed rather than expanding onto an empty state.
+            defaultOpen: requiredDocs.length > 0,
+          }
+        : undefined,
+      actions: hasActions ? (
+        <>
+          {opts?.onSwitchIntervention ? (
+            <Button kind="tertiary" size="sm" onClick={() => opts.onSwitchIntervention!(ci)} disabled={!canAct}>
+              Switch Intervention
+            </Button>
+          ) : null}
+          {opts?.onRaisePreauth ? (
+            <Button
+              kind="tertiary"
+              size="sm"
+              onClick={() => opts.onRaisePreauth!(ci)}
+              disabled={!canRaisePreauth}
+              title={
+                !ci.needs_preauth
+                  ? 'This intervention does not need preauth'
+                  : alreadyRaised
+                    ? 'Preauth already raised for this intervention'
+                    : 'Raise normal preauth for this intervention'
+              }
+            >
+              Raise preauth
+            </Button>
+          ) : null}
+        </>
+      ) : undefined,
+    };
+  });
+}
+
+const ClaimInterventionDetails: React.FC<claimInterventionDetailsProps> = ({ claimInterventions }) => (
+  <RecordCards
+    records={buildInterventionRecords(claimInterventions)}
+    emptyMessage="No intervention data."
+    layout="grid"
+    gridFill="fill"
+  />
+);
+
+export default ClaimInterventionDetails;