@ampath/esm-dha-workflow-app 4.0.0-next.34 → 4.0.0-next.340

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;

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

@@ -0,0 +1,105 @@
+/* Fills the workspace body so the footer can be held to the bottom even when the
+   intervention is short and the content doesn't reach that far. */
+.panel {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  min-height: 100%;
+}
+
+/* The intervention's particulars, in columns, stepping down to fewer on a narrow
+   panel. */
+.meta {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
+  gap: 0.75rem 1.5rem;
+  margin: 0;
+
+  div {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    min-width: 0;
+  }
+
+  dt {
+    font-size: 0.625rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: #6f6f6f;
+  }
+
+  dd {
+    margin: 0;
+    font-size: 0.875rem;
+    line-height: 1.35;
+    color: #161616;
+    overflow-wrap: anywhere;
+  }
+}
+
+/* One line for what the intervention requires, rather than a row per flag. */
+.flagsRow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375rem 0.5rem;
+  padding-top: 0.875rem;
+  border-top: 1px solid #e0e0e0;
+}
+
+.flagsLabel {
+  font-size: 0.625rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #6f6f6f;
+}
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+
+  /* Carbon tags carry their own margin, which would knock them out of line with the
+     values beside them. */
+  :global(.cds--tag) {
+    margin: 0;
+  }
+}
+
+/* ---- Required documents ---- */
+.documents {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding-top: 0.875rem;
+  border-top: 1px solid #e0e0e0;
+}
+
+.documentsTitle {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #161616;
+}
+
+/* ---- Footer ---- */
+/* margin-top:auto drops it to the bottom of a short panel; sticky keeps it there when a
+   long documents list scrolls. The negative margins bleed it over the panel's own
+   padding, so it spans the width and covers the strip content would scroll through
+   beneath it. */
+.footer {
+  position: sticky;
+  bottom: 0;
+  z-index: 1;
+  margin: auto -1rem -1rem;
+  padding: 0.5rem 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 0.5rem;
+  background-color: #ffffff;
+  border-top: 1px solid #e0e0e0;
+}

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

@@ -0,0 +1,184 @@
+import React from 'react';
+import { Button, Tag } from '@carbon/react';
+import { closeWorkspace } from '@openmrs/esm-framework';
+import { type VisitIntervention } from '../../types';
+import { asBool } from '../../preauth/preauth.resource';
+import InterventionAttachments, { type InterventionAttachmentsProps } from './intervention-attachments.component';
+import { RECORD_DETAILS_WORKSPACE } from '../shared/record-details.workspace';
+import styles from './claim-intervention-panel.component.scss';
+
+/** What the claim page states above this panel, so the panel doesn't restate it. */
+export interface InterventionClaimFacts {
+  schemeCode?: string;
+  schemeName?: string;
+}
+
+interface ClaimInterventionPanelProps {
+  intervention: VisitIntervention;
+  /** Context for the required-documents section; absent when documents don't apply. */
+  attachmentOpts?: Omit<InterventionAttachmentsProps, 'intervention'>;
+  claimFacts?: InterventionClaimFacts;
+  canSwitch?: boolean;
+  canRaisePreauth?: boolean;
+  onSwitch?: () => void;
+  onRaisePreauth?: () => void;
+  /** Why Raise preauth is unavailable, when it is. */
+  raisePreauthReason?: string;
+}
+
+const money = (n: number | string) => {
+  const value = Number(n ?? 0);
+  return value ? `KES ${value.toLocaleString('en-KE', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : '';
+};
+
+const sameValue = (a?: string | null, b?: string | null): boolean =>
+  (a ?? '').trim().toUpperCase() === (b ?? '').trim().toUpperCase();
+
+/**
+ * The specialties an intervention needs a preauth for. The five flags are false on most
+ * interventions, so they are collected into one list of the ones that are set rather than
+ * five rows of "No".
+ */
+const specialtyFlags = (iv: VisitIntervention): string[] =>
+  [
+    { label: 'Surgical', on: asBool(iv.requires_surgical_preauth ?? (iv as any).requiresSurgicalPreauth) },
+    { label: 'Renal', on: asBool(iv.requires_renal_preauth ?? (iv as any).requiresRenalPreauth) },
+    { label: 'Oncology', on: asBool(iv.requires_oncology_preauth ?? (iv as any).requiresOncologyPreauth) },
+    { label: 'Radiology', on: asBool(iv.requires_radiology_preauth ?? (iv as any).requiresRadiologyPreauth) },
+    { label: 'Optical', on: asBool(iv.requires_optical_preauth ?? (iv as any).requiresOpticalPreauth) },
+  ]
+    .filter((flag) => flag.on)
+    .map((flag) => flag.label);
+
+/**
+ * An intervention as the side panel shows it.
+ *
+ * The generic card gave all fifteen fields the same weight, eleven of which were the same
+ * word on every intervention — five "No"s for the specialty preauths, a scheme the claim
+ * had already named, per-diem figures that are nil unless the visit accrued any. Here the
+ * particulars that vary lead, the flags that are set are collected into one line and the
+ * ones that aren't stay silent, and the documents the intervention needs follow.
+ */
+const ClaimInterventionPanel: React.FC<ClaimInterventionPanelProps> = ({
+  intervention,
+  attachmentOpts,
+  claimFacts,
+  canSwitch,
+  canRaisePreauth,
+  onSwitch,
+  onRaisePreauth,
+  raisePreauthReason,
+}) => {
+  const perDiemAmount = Number(intervention.accrued_per_diem_amount ?? 0);
+  const perDiemDays = Number(intervention.accrued_per_diem_days ?? 0);
+  const specialties = specialtyFlags(intervention);
+
+  // Each is shown only when it says something this intervention alone can say: not blank,
+  // and not the scheme the claim above already named.
+  const facts = [
+    { label: 'Code', value: intervention.intervention_code },
+    { label: 'Payment mechanism', value: intervention.intervention_payment_mechanism },
+    { label: 'Fund', value: intervention.intervention_fund },
+    { label: 'Sub benefit code', value: intervention.sub_benefit_code },
+    { label: 'Keph level tariff', value: money(intervention.keph_level_tarrif) },
+    ...(perDiemAmount > 0 ? [{ label: 'Accrued per diem', value: money(perDiemAmount) }] : []),
+    ...(perDiemDays > 0 ? [{ label: 'Per diem days', value: String(perDiemDays) }] : []),
+    ...(sameValue(intervention.supported_scheme, claimFacts?.schemeCode) ||
+    sameValue(intervention.supported_scheme, claimFacts?.schemeName)
+      ? []
+      : [{ label: 'Scheme', value: intervention.supported_scheme }]),
+  ].filter((fact) => Boolean((fact.value ?? '').trim()));
+
+  const showActions = Boolean(onSwitch || onRaisePreauth);
+
+  return (
+    <div className={styles.panel}>
+      <dl className={styles.meta}>
+        <div>
+          <dt>Status</dt>
+          <dd className={styles.tags}>
+            {intervention.workflow_state ? (
+              <Tag size="sm" type={intervention.workflow_state.toUpperCase() === 'ACTIVE' ? 'teal' : 'gray'}>
+                {intervention.workflow_state}
+              </Tag>
+            ) : (
+              '—'
+            )}
+          </dd>
+        </div>
+        {facts.map((fact) => (
+          <div key={fact.label}>
+            <dt>{fact.label}</dt>
+            <dd>{fact.value}</dd>
+          </div>
+        ))}
+      </dl>
+
+      {/* Only the flags that are set. An intervention with none of them says so once,
+          rather than five times over. */}
+      <div className={styles.flagsRow}>
+        <span className={styles.flagsLabel}>Preauth</span>
+        <span className={styles.tags}>
+          {intervention.needs_preauth ? (
+            <Tag size="sm" type="blue">
+              Required
+            </Tag>
+          ) : (
+            <Tag size="sm" type="gray">
+              Not required
+            </Tag>
+          )}
+          {specialties.map((specialty) => (
+            <Tag size="sm" type="purple" key={specialty}>
+              {specialty}
+            </Tag>
+          ))}
+          {intervention.active_for_uhc ? (
+            <Tag size="sm" type="green">
+              Active for UHC
+            </Tag>
+          ) : null}
+        </span>
+      </div>
+
+      {attachmentOpts ? (
+        <section className={styles.documents}>
+          <h6 className={styles.documentsTitle}>Required claim documents</h6>
+          <InterventionAttachments intervention={intervention} {...attachmentOpts} />
+        </section>
+      ) : null}
+
+      {/* Held to the bottom of the panel however short the intervention is, and staying
+          there when the documents list scrolls. 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={() => closeWorkspace(RECORD_DETAILS_WORKSPACE)}>
+          Close
+        </Button>
+        {showActions ? (
+          <>
+            {onSwitch ? (
+              <Button kind="tertiary" size="sm" disabled={!canSwitch} onClick={onSwitch}>
+                Switch intervention
+              </Button>
+            ) : null}
+            {onRaisePreauth ? (
+              <Button
+                kind="primary"
+                size="sm"
+                disabled={!canRaisePreauth}
+                title={canRaisePreauth ? 'Raise normal preauth for this intervention' : raisePreauthReason}
+                onClick={onRaisePreauth}
+              >
+                Raise preauth
+              </Button>
+            ) : null}
+          </>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+export default ClaimInterventionPanel;