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

package/src/billing/dashboard/v2/claim-visits/shared/record-cards.component.scss

@@ -0,0 +1,298 @@
+.cards {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+/* Compact records lay out horizontally, at most THREE across, and GROW to fill the row:
+   one card spans the full width, two split it in half, three take a third each. Each
+   column's minimum is the larger of 15rem or a third of the row (minus the two 0.75rem
+   gaps), so a 4th column never fits, while narrow panels still drop to 2 then 1. */
+.cardsGrid {
+  display: grid;
+  /* Each column is at least half the row (50% minus its share of the single 0.75rem
+     gap), so at most TWO fit; 15rem takes over on narrow panels to drop to 1. */
+  grid-template-columns: repeat(auto-fit, minmax(max(15rem, calc(50% - 0.375rem)), 1fr));
+  grid-auto-flow: row;
+  align-items: stretch;
+}
+
+/* auto-fill keeps empty column tracks, so a lone card stays at its ~half width and two
+   flow side by side, instead of one card stretching across the whole row. */
+.cardsGridFill {
+  grid-template-columns: repeat(auto-fill, minmax(max(15rem, calc(50% - 0.375rem)), 1fr));
+}
+
+/* Opt-in THREE-across variant: each column is at least a third of the row (33.333%
+   minus its share of the two 0.75rem gaps), so up to three fit and grow to fill the
+   row; 14rem takes over on narrow panels to drop to 2 then 1. */
+.cardsGridThree {
+  grid-template-columns: repeat(auto-fit, minmax(max(14rem, calc(33.333% - 0.5rem)), 1fr));
+}
+
+/* Per-section tints. Each tone sets the card fill, its border and a matching left
+   accent, so every section reads as its own coloured group while text stays dark on a
+   pale wash. Defaults (no tone) fall back to a plain white tile. */
+.toneTeal {
+  --card-bg: #eefaf9;
+  --card-border: #7fd1cb;
+  --card-accent: #007d79;
+}
+.toneBlue {
+  --card-bg: #eff5ff;
+  --card-border: #a6c8ff;
+  --card-accent: #0f62fe;
+}
+.tonePurple {
+  --card-bg: #f6f2ff;
+  --card-border: #d0bcf3;
+  --card-accent: #8a3ffc;
+}
+.toneGreen {
+  --card-bg: #eefbf1;
+  --card-border: #a7dfb5;
+  --card-accent: #24a148;
+}
+.toneAmber {
+  --card-bg: #fff8ec;
+  --card-border: #f3d7a4;
+  --card-accent: #d2a106;
+}
+.toneGray {
+  --card-bg: #f5f6f7;
+  --card-border: #d0d3d6;
+  --card-accent: #697077;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--card-border, #c6c6c6);
+  border-left: 3px solid var(--card-accent, #c6c6c6);
+  border-radius: 8px;
+  /* Tinted tile lifted off the panel with a soft shadow, so cards stay distinct on a
+     white or a tinted background. */
+  background: var(--card-bg, #ffffff);
+  box-shadow: 0 1px 2px rgba(22, 22, 22, 0.06), 0 2px 6px rgba(22, 22, 22, 0.08);
+  padding: 0.875rem 1rem;
+}
+
+.cardHead {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.625rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid rgba(22, 22, 22, 0.09);
+}
+
+.cardHeadText {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+/* Eyebrow naming the record's kind (e.g. BILL ITEM / DIAGNOSIS). Uses the card's
+   accent colour and a matching pale pill so bills and diagnoses never get confused
+   even when they share one grid. */
+.cardKind {
+  align-self: flex-start;
+  padding: 0.0625rem 0.4375rem;
+  border-radius: 999px;
+  background: var(--card-accent, #6f6f6f);
+  color: #ffffff;
+  font-size: 0.625rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.cardHeadMain {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.indexChip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.375rem;
+  border-radius: 999px;
+  background: #e0e0e0;
+  color: #393939;
+  font-size: 0.6875rem;
+  font-weight: 600;
+}
+
+.cardTitle {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #161616;
+  overflow-wrap: anywhere;
+}
+
+.cardBadge {
+  flex-shrink: 0;
+}
+
+/* The heart of it: labelled cells that wrap onto as many rows as needed, so every
+   field stays visible instead of running off the right edge of a wide table. */
+.fieldGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
+  gap: 0.625rem 1.25rem;
+  margin: 0;
+}
+
+/* Inside a compact card each field is a neat label-left / value-right row. The rows
+   pack into as many columns as the card is wide — one column in a third-width card,
+   several across a full-width lone card — so the content always fills its card. */
+.cardsGrid .fieldGrid {
+  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
+  column-gap: 1.5rem;
+  row-gap: 0;
+}
+
+.cardsGrid .field {
+  flex-direction: row;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.375rem 0;
+  border-bottom: 1px solid rgba(22, 22, 22, 0.07);
+}
+
+.cardsGrid .fieldValue {
+  text-align: right;
+  font-weight: 600;
+}
+
+.cardsGrid .fieldFull {
+  flex-direction: column;
+  align-items: stretch;
+
+  .fieldValue {
+    text-align: left;
+    font-weight: 400;
+  }
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.fieldFull {
+  grid-column: 1 / -1;
+}
+
+.fieldLabel {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  color: #6f6f6f;
+}
+
+.fieldValue {
+  margin: 0;
+  font-size: 0.875rem;
+  color: #161616;
+  overflow-wrap: anywhere;
+}
+
+.cardActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  /* margin-top:auto pushes the footer to the card's bottom edge so footers align
+     across a row of unequal-height cards. */
+  margin-top: auto;
+  padding-top: 0.5rem;
+  border-top: 1px solid rgba(22, 22, 22, 0.09);
+
+  /* Full-width, evenly split action buttons read as a tidy footer bar. */
+  :global(.cds--btn) {
+    flex: 1 1 auto;
+    justify-content: center;
+  }
+}
+
+/* Collapsible detail region (e.g. invoice lines) under the fields. */
+.expandSection {
+  margin-top: 0.625rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid rgba(22, 22, 22, 0.09);
+}
+
+.expandToggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--card-accent, #0f62fe);
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+
+.expandChevron {
+  transition: transform 0.15s ease;
+}
+.expandChevronOpen {
+  transform: rotate(180deg);
+}
+
+/* Full-bleed on all sides: cancel the card's padding (1rem sides, 0.875rem bottom) so
+   the expanded detail reaches the card's border with no inset, separated only by a top
+   divider line. The nested cards are squared off to sit flush. */
+.expandContent {
+  margin-top: 0.5rem;
+  margin-inline: -1rem;
+  margin-bottom: -0.875rem;
+  overflow-x: auto;
+  border-top: 1px solid rgba(22, 22, 22, 0.09);
+
+  .card {
+    border-radius: 0;
+  }
+}
+
+.tagRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+/* Neat placeholder shown when a category has no records. */
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 1.5rem 1rem;
+  text-align: center;
+  border: 1px dashed #d0d0d0;
+  border-radius: 8px;
+  background: #fafafa;
+  font-size: 0.8125rem;
+  color: #6f6f6f;
+}
+
+.emptyIcon {
+  color: #a8a8a8;
+}

package/src/billing/dashboard/v2/claim-visits/shared/record-cards.component.tsx

@@ -0,0 +1,252 @@
+import React, { useState } from 'react';
+import { SkeletonText, Tag } from '@carbon/react';
+import { ChevronDown, DocumentBlank } from '@carbon/react/icons';
+import styles from './record-cards.component.scss';
+
+/** A compact yes/no indicator for the many boolean flags on a claim record. */
+export const YesNo: React.FC<{ value: boolean }> = ({ value }) => (
+  <Tag size="sm" type={value ? 'green' : 'gray'}>
+    {value ? 'Yes' : 'No'}
+  </Tag>
+);
+
+/** Wraps a set of string values as tags, e.g. required document types. */
+export const TagRow: React.FC<{ items: string[]; type?: 'green' | 'blue' | 'teal' | 'gray' }> = ({
+  items,
+  type = 'blue',
+}) => {
+  if (!items || items.length === 0) {
+    return <>—</>;
+  }
+  return (
+    <div className={styles.tagRow}>
+      {items.map((item, i) => (
+        <Tag size="sm" type={type} key={`${item}-${i}`}>
+          {item}
+        </Tag>
+      ))}
+    </div>
+  );
+};
+
+export interface RecordField {
+  label: string;
+  value: React.ReactNode;
+  /** Let a long value (document lists, names) span the whole card width. */
+  full?: boolean;
+}
+
+export type CardTone = 'teal' | 'blue' | 'purple' | 'green' | 'amber' | 'gray';
+
+export interface RecordCardModel {
+  /** Small eyebrow above the title naming the record's kind, e.g. "Bill item". Lets
+      the reader tell mixed cards apart when several kinds share one grid. */
+  kind?: React.ReactNode;
+  /** Left side of the card header, e.g. an intervention name. */
+  title?: React.ReactNode;
+  /** Right side of the card header, typically a status tag. */
+  badge?: React.ReactNode;
+  fields: RecordField[];
+  /** Buttons rendered in a footer row, e.g. Pay / Add claim line. */
+  actions?: React.ReactNode;
+  /** A collapsible detail region (e.g. invoice lines) with a show/hide toggle, shown
+      under the fields. Starts collapsed. */
+  expandable?: {
+    /** Toggle text. Pass a function to vary it by open state, e.g.
+        `(open) => open ? 'Hide lines' : 'Show lines'`. */
+    label: React.ReactNode | ((open: boolean) => React.ReactNode);
+    content: React.ReactNode;
+    /** Start expanded instead of collapsed. */
+    defaultOpen?: boolean;
+  };
+  /** Per-card tint; overrides the grid-level `tone` so mixed kinds can share a grid. */
+  tone?: CardTone;
+  /**
+   * A purpose-built rendering of this record for the side panel, used in place of the
+   * generic card when the record has a shape the labelled-field grid reads poorly — an
+   * invoice, where the money wants grouping and the lines want listing. The card grid
+   * ignores it, so `fields` stays the fallback and the row columns still read from there.
+   */
+  panel?: React.ReactNode;
+}
+
+interface RecordCardsProps {
+  records: RecordCardModel[];
+  emptyMessage: string;
+  /** Adds a "1", "2"… index chip to each card header when there is more than one. */
+  numbered?: boolean;
+  /**
+   * 'stack' (default) lays cards out one under another — best for records with many
+   * fields. 'grid' flows compact cards into up to three responsive columns so a short
+   * list doesn't stretch the page down its full height.
+   */
+  layout?: 'stack' | 'grid';
+  /**
+   * Grid fill mode. 'fit' (default) lets cards grow to fill the row when there are only
+   * a few. 'fill' keeps each card at its column width (~a third) even when there's just
+   * one, so a lone card doesn't stretch across the whole row.
+   */
+  gridFill?: 'fit' | 'fill';
+  /**
+   * Maximum columns for a 'grid' layout: 2 (default) or 3. Only cards with enough room
+   * reach the cap — narrow panels still step down to fewer columns.
+   */
+  columns?: 2 | 3;
+  /** Section tint, so each section reads as its own group. Defaults to a plain tile. */
+  tone?: CardTone;
+}
+
+const toneClass: Record<CardTone, string> = {
+  teal: styles.toneTeal,
+  blue: styles.toneBlue,
+  purple: styles.tonePurple,
+  green: styles.toneGreen,
+  amber: styles.toneAmber,
+  gray: styles.toneGray,
+};
+
+const hasContent = (value: React.ReactNode): boolean =>
+  !(value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0));
+
+/**
+ * Renders a list of records as labelled tiles instead of a wide table. Each field
+ * keeps its label beside its value, so nothing is lost off the right edge the way it
+ * is when a 15-plus-column table scrolls horizontally.
+ */
+const RecordCards: React.FC<RecordCardsProps> = ({ records, emptyMessage, numbered, layout = 'stack', gridFill = 'fit', columns = 2, tone }) => {
+  const [expanded, setExpanded] = useState<Set<number>>(
+    () => new Set(records.map((r, i) => (r.expandable?.defaultOpen ? i : -1)).filter((i) => i >= 0)),
+  );
+  const toggleExpanded = (index: number) =>
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      next.has(index) ? next.delete(index) : next.add(index);
+      return next;
+    });
+
+  if (!records || records.length === 0) {
+    return (
+      <div className={styles.empty}>
+        <DocumentBlank size={24} className={styles.emptyIcon} />
+        <span>{emptyMessage}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`${styles.cards} ${layout === 'grid' ? styles.cardsGrid : ''} ${
+        layout === 'grid' && gridFill === 'fill' ? styles.cardsGridFill : ''
+      } ${layout === 'grid' && columns === 3 ? styles.cardsGridThree : ''}`}
+    >
+      {records.map((record, index) => {
+        const cardTone = record.tone ?? tone;
+        const isOpen = expanded.has(index);
+        return (
+        <article className={`${styles.card} ${cardTone ? toneClass[cardTone] : ''}`} key={index}>
+          {(record.kind || record.title || record.badge || (numbered && records.length > 1)) && (
+            <header className={styles.cardHead}>
+              <div className={styles.cardHeadText}>
+                {record.kind && <span className={styles.cardKind}>{record.kind}</span>}
+                <div className={styles.cardHeadMain}>
+                  {numbered && records.length > 1 && <span className={styles.indexChip}>{index + 1}</span>}
+                  {record.title && <span className={styles.cardTitle}>{record.title}</span>}
+                </div>
+              </div>
+              {record.badge && <div className={styles.cardBadge}>{record.badge}</div>}
+            </header>
+          )}
+          <dl className={styles.fieldGrid}>
+            {record.fields.filter((f) => hasContent(f.value)).map((field, i) => (
+              <div className={`${styles.field} ${field.full ? styles.fieldFull : ''}`} key={i}>
+                <dt className={styles.fieldLabel}>{field.label}</dt>
+                <dd className={styles.fieldValue}>{field.value}</dd>
+              </div>
+            ))}
+          </dl>
+          {record.expandable ? (
+            <div className={styles.expandSection}>
+              <button
+                type="button"
+                className={styles.expandToggle}
+                aria-expanded={isOpen}
+                onClick={() => toggleExpanded(index)}
+              >
+                <ChevronDown className={`${styles.expandChevron} ${isOpen ? styles.expandChevronOpen : ''}`} />
+                {typeof record.expandable.label === 'function' ? record.expandable.label(isOpen) : record.expandable.label}
+              </button>
+              {isOpen ? <div className={styles.expandContent}>{record.expandable.content}</div> : null}
+            </div>
+          ) : null}
+          {record.actions && <footer className={styles.cardActions}>{record.actions}</footer>}
+        </article>
+        );
+      })}
+    </div>
+  );
+};
+
+export default RecordCards;
+
+interface RecordCardsSkeletonProps {
+  /** Placeholder cards to draw. Pick roughly what the section usually holds. */
+  count?: number;
+  /** Field rows per card. */
+  fields?: number;
+  /** Match the RecordCards call this stands in for, so the grid lines up. */
+  layout?: 'stack' | 'grid';
+  gridFill?: 'fit' | 'fill';
+  columns?: 2 | 3;
+  tone?: CardTone;
+}
+
+/**
+ * Loading placeholder for a RecordCards section. It reuses the same grid, card and
+ * field classes as the real thing, so the section reserves the layout it will settle
+ * into instead of swapping a differently-shaped block for a card grid once loaded.
+ */
+export const RecordCardsSkeleton: React.FC<RecordCardsSkeletonProps> = ({
+  count = 3,
+  fields = 4,
+  layout = 'grid',
+  gridFill = 'fit',
+  columns = 2,
+  tone,
+}) => (
+  <div
+    className={`${styles.cards} ${layout === 'grid' ? styles.cardsGrid : ''} ${
+      layout === 'grid' && gridFill === 'fill' ? styles.cardsGridFill : ''
+    } ${layout === 'grid' && columns === 3 ? styles.cardsGridThree : ''}`}
+    aria-busy="true"
+    aria-label="Loading records"
+  >
+    {Array.from({ length: count }).map((_, index) => (
+      <article className={`${styles.card} ${tone ? toneClass[tone] : ''}`} key={index}>
+        <header className={styles.cardHead}>
+          <div className={styles.cardHeadText}>
+            <span className={styles.cardKind}>
+              <SkeletonText width="4rem" />
+            </span>
+            <div className={styles.cardHeadMain}>
+              <span className={styles.cardTitle}>
+                <SkeletonText width="9rem" />
+              </span>
+            </div>
+          </div>
+        </header>
+        <dl className={styles.fieldGrid}>
+          {Array.from({ length: fields }).map((__, field) => (
+            <div className={styles.field} key={field}>
+              <dt className={styles.fieldLabel}>
+                <SkeletonText width="70%" />
+              </dt>
+              <dd className={styles.fieldValue}>
+                <SkeletonText width="85%" />
+              </dd>
+            </div>
+          ))}
+        </dl>
+      </article>
+    ))}
+  </div>
+);

package/src/billing/dashboard/v2/claim-visits/shared/record-details.workspace.scss

@@ -0,0 +1,42 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+/* The workspace frame supplies the panel, its header and its close control, so this is
+   only the contents: the record card, scrolling if it outgrows the panel. */
+.workspace {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.body {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: layout.$spacing-05;
+}
+
+/* The record's own actions, pinned to the foot of the panel the way every other O3
+   workspace ends. Sits outside the scrolling body, so it stays in reach however long the
+   details run. */
+.actionBar {
+  flex: 0 0 auto;
+  display: flex;
+  gap: layout.$spacing-03;
+  padding: layout.$spacing-04 layout.$spacing-05;
+  border-top: 1px solid $ui-03;
+  background-color: $ui-02;
+
+  /* Share the width between however many actions the record has, matching the button
+     row the workspaces in this app close with. */
+  :global(.cds--btn) {
+    flex: 1 1 0;
+    max-width: none;
+  }
+}
+
+.empty {
+  margin: 0;
+  padding: layout.$spacing-05;
+  font-size: 0.875rem;
+  color: #6f6f6f;
+}

package/src/billing/dashboard/v2/claim-visits/shared/record-details.workspace.tsx

@@ -0,0 +1,54 @@
+import React, { useMemo } from 'react';
+import { type DefaultWorkspaceProps } from '@openmrs/esm-framework';
+import RecordCards, { type RecordCardModel } from './record-cards.component';
+import styles from './record-details.workspace.scss';
+
+/** Registration name, shared with whoever opens or closes this panel. */
+export const RECORD_DETAILS_WORKSPACE = 'record-details-workspace';
+
+interface RecordDetailsWorkspaceProps extends DefaultWorkspaceProps {
+  /** The record the table row stands for — the same model the row was rendered from. */
+  record: RecordCardModel;
+}
+
+/**
+ * Everything a record's table row left out, shown in the OpenMRS workspace — the app's
+ * own right-hand panel.
+ *
+ * The body is the record card the page used to show inline, rendered by the same
+ * component: its kind and title, every field with its label, and the collapsible region
+ * (invoice lines, required documents) with its own Show/Hide toggle. Only where it is
+ * shown has changed — the table row carries the few fields that tell records apart, and
+ * this is the rest of it.
+ *
+ * The record's own actions are lifted out of the card and pinned to the foot of the
+ * panel, where every other O3 workspace puts them, so they stay put and in reach however
+ * far the details scroll. Actions belonging to something *inside* the record — removing
+ * one invoice line — stay with the line they act on, since there is one per line and the
+ * foot of the panel couldn't say which.
+ */
+const RecordDetailsWorkspace: React.FC<RecordDetailsWorkspaceProps> = ({ record }) => {
+  // The card renders everything but the buttons; they are rendered below instead.
+  const cardWithoutActions = useMemo(() => (record ? { ...record, actions: undefined } : record), [record]);
+
+  if (!record) {
+    return <p className={styles.empty}>No record to show.</p>;
+  }
+
+  return (
+    <div className={styles.workspace}>
+      <div className={styles.body}>
+        {/* A record that brings its own panel rendering uses it; the rest fall back to
+            the card the page used to show inline. */}
+        {record.panel ?? (
+          <RecordCards records={[cardWithoutActions]} emptyMessage="No record to show." layout="stack" />
+        )}
+      </div>
+      {/* A record with its own panel rendering brings its own footer with it, so the
+          generic bar would be a second copy of the same buttons. */}
+      {record.actions && !record.panel ? <div className={styles.actionBar}>{record.actions}</div> : null}
+    </div>
+  );
+};
+
+export default RecordDetailsWorkspace;

package/src/billing/dashboard/v2/claim-visits/shared/record-table.component.scss

@@ -0,0 +1,61 @@
+@use './empty-state' as empty;
+
+/* ---- Table ---- */
+/* A scroll container only: the table's own row rules carry the structure. */
+.tableCard {
+  overflow-x: auto;
+}
+
+.row {
+  cursor: pointer;
+}
+
+/* The index and the trailing details button only need their own width. */
+.indexCol {
+  width: 3rem;
+}
+
+.actionCol {
+  width: 3rem;
+  text-align: right;
+}
+
+.visuallyHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ---- Empty state ---- */
+/* A plain line of text where the rows would have been, not a boxed placeholder. */
+.empty {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0.75rem 0;
+  font-size: 0.8125rem;
+  color: #6f6f6f;
+}
+
+.emptyIcon {
+  color: #a8a8a8;
+  flex-shrink: 0;
+}
+
+/* An absence that is blocking something, rather than a section that happens to be
+   unused: filled and ruled so it is found by scanning the page rather than by reading
+   every empty line to work out which one matters. */
+.emptyDanger {
+  @include empty.blocking-callout;
+}
+
+.emptyDangerIcon {
+  @include empty.blocking-callout-icon;
+}