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

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 { type VisitIntervention } from '../../types';
+import { asBool } from '../../preauth/preauth.resource';
+import InterventionAttachments, { type InterventionAttachmentsProps } from './intervention-attachments.component';
+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;
+  onClose?: () => void;
+}
+
+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,
+  onClose,
+}) => {
+  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={onClose}>
+          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;

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

@@ -0,0 +1,161 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  /* Inset from the full-bleed expander so the rows align with the card's fields above
+     instead of touching its border. */
+  padding: 0 1rem 0.75rem;
+}
+
+.summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.summaryLabel {
+  font-size: 0.6875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  color: #6f6f6f;
+}
+
+.docs {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.docRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.5rem 0.625rem;
+  border: 1px solid #e6e6e6;
+  border-radius: 8px;
+  background: #ffffff;
+  transition: border-color 0.12s ease, box-shadow 0.12s ease;
+
+  &:hover {
+    border-color: #d0d0d0;
+    box-shadow: 0 1px 3px rgba(22, 22, 22, 0.07);
+  }
+}
+
+.docLeft {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+  min-width: 0;
+}
+
+/* Tinted icon tile — purple for EMR-generated, teal for manual — so the method reads
+   at a glance. */
+.docBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  inline-size: 2rem;
+  block-size: 2rem;
+  border-radius: 7px;
+}
+
+.auto .docBadge {
+  background: #f6f2ff;
+  color: #8a3ffc;
+}
+.manual .docBadge {
+  background: #eefaf9;
+  color: #007d79;
+}
+
+.docText {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.docName {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: #161616;
+  overflow-wrap: anywhere;
+}
+
+.docMethod {
+  font-size: 0.625rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  color: #8d8d8d;
+}
+
+.docAction {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex-shrink: 0;
+}
+
+.attached {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: #24a148;
+}
+
+/* Counterpart to .attached, for a document missing from a claim that is past draft and
+   can no longer take one. Muted rather than red — it states a fact, not an error. */
+.notAttached {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: #6f6f6f;
+}
+
+.previewFrame {
+  inline-size: 100%;
+  block-size: 75vh;
+  border: none;
+}
+
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  margin: 0;
+  padding: 1.25rem 1rem;
+  text-align: center;
+  border: 1px dashed #d0d0d0;
+  border-radius: 8px;
+  background: #fafafa;
+  font-size: 0.8125rem;
+  color: #6f6f6f;
+}
+
+.emptyIcon {
+  color: #a8a8a8;
+}
+
+/* Keeps the PDF source markup rendered (so refs exist) but out of view. */
+.hiddenPdf {
+  position: fixed;
+  left: -9999px;
+  top: 0;
+  opacity: 0;
+  pointer-events: none;
+  z-index: -1;
+}