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

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

@@ -0,0 +1,150 @@
+import React from 'react';
+import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@carbon/react';
+import { DocumentBlank, View, WarningFilled } from '@carbon/react/icons';
+import { launchWorkspace } from '@openmrs/esm-framework';
+import { type RecordCardModel } from './record-cards.component';
+import { RECORD_DETAILS_WORKSPACE } from './record-details.workspace';
+import styles from './record-table.component.scss';
+
+export interface RecordTableColumn {
+  /** Column heading. */
+  header: string;
+  /** Take the cell from the record field carrying this label. */
+  field?: string;
+  /** Or take it from the record itself rather than one of its fields. */
+  source?: 'title' | 'badge';
+}
+
+interface RecordTableProps {
+  records: RecordCardModel[];
+  /** The few fields worth a column. Everything else is left for the side panel. */
+  columns: RecordTableColumn[];
+  emptyMessage: string;
+  /** How much the absence matters. `danger` marks a section whose emptiness is blocking
+      something — a claim that can't be submitted without a diagnosis — so it reads as a
+      problem to fix rather than a section that happens to be unused. */
+  emptyTone?: 'neutral' | 'danger';
+  ariaLabel: string;
+  /** Adds a "1", "2"… column when there is more than one record. */
+  numbered?: boolean;
+}
+
+const hasContent = (value: React.ReactNode): boolean =>
+  !(value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0));
+
+const cellValue = (record: RecordCardModel, column: RecordTableColumn): React.ReactNode => {
+  if (column.source === 'title') {
+    return record.title ?? '—';
+  }
+  if (column.source === 'badge') {
+    return record.badge ?? '—';
+  }
+  const field = record.fields?.find((f) => f.label === column.field);
+  return hasContent(field?.value) ? field.value : '—';
+};
+
+// The panel's own header names the record, so the title has to survive as text — a
+// record title can be a node (a dash placeholder, a tag) rather than a plain string.
+const panelTitle = (record: RecordCardModel, fallback: string): string => {
+  const title = record.title;
+  if (typeof title === 'string' && title.trim()) {
+    return title;
+  }
+  if (typeof title === 'number') {
+    return String(title);
+  }
+  return fallback;
+};
+
+/**
+ * Renders records as a short table — a handful of columns — and opens the record itself,
+ * as the card the page used to show inline, in the OpenMRS workspace: the platform's own
+ * side panel.
+ *
+ * Takes the same `RecordCardModel` list the card grids are built from, so a claim's
+ * invoices, interventions and diagnoses are described in one place (their builders) and
+ * only laid out differently here.
+ */
+const RecordTable: React.FC<RecordTableProps> = ({
+  records,
+  columns,
+  emptyMessage,
+  emptyTone,
+  ariaLabel,
+  numbered,
+}) => {
+  if (!records || records.length === 0) {
+    const blocking = emptyTone === 'danger';
+    return (
+      // `role="alert"` only on the blocking one: a section that is merely empty is not
+      // something a screen reader should be interrupted for.
+      <div
+        className={blocking ? `${styles.empty} ${styles.emptyDanger}` : styles.empty}
+        role={blocking ? 'alert' : undefined}
+      >
+        {blocking ? (
+          <WarningFilled size={20} className={styles.emptyDangerIcon} />
+        ) : (
+          <DocumentBlank size={24} className={styles.emptyIcon} />
+        )}
+        <span>{emptyMessage}</span>
+      </div>
+    );
+  }
+
+  const showIndex = Boolean(numbered) && records.length > 1;
+
+  const openRecord = (record: RecordCardModel) =>
+    launchWorkspace(RECORD_DETAILS_WORKSPACE, {
+      record,
+      // Named after the record it is showing, rather than the registration's generic
+      // "Details", so the panel header says which invoice or intervention is open.
+      workspaceTitle: panelTitle(record, ariaLabel),
+    });
+
+  return (
+    <div className={styles.tableCard}>
+      <Table size="sm" useZebraStyles aria-label={ariaLabel}>
+        <TableHead>
+          <TableRow>
+            {showIndex ? <TableHeader className={styles.indexCol}>#</TableHeader> : null}
+            {columns.map((column) => (
+              <TableHeader key={column.header}>{column.header}</TableHeader>
+            ))}
+            <TableHeader className={styles.actionCol}>
+              <span className={styles.visuallyHidden}>Details</span>
+            </TableHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {records.map((record, index) => (
+            <TableRow key={index} className={styles.row} onClick={() => openRecord(record)}>
+              {showIndex ? <TableCell className={styles.indexCol}>{index + 1}</TableCell> : null}
+              {columns.map((column) => (
+                <TableCell key={column.header}>{cellValue(record, column)}</TableCell>
+              ))}
+              <TableCell className={styles.actionCol}>
+                <Button
+                  kind="ghost"
+                  size="sm"
+                  hasIconOnly
+                  renderIcon={View}
+                  iconDescription="View details"
+                  tooltipPosition="left"
+                  onClick={(event: React.MouseEvent) => {
+                    // The row is clickable too; without this the panel would be asked to
+                    // open twice for one click.
+                    event.stopPropagation();
+                    openRecord(record);
+                  }}
+                />
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
+
+export default RecordTable;

package/src/billing/dashboard/v2/claim-visits/switch-intervention/switch-intervention.resource.ts

@@ -0,0 +1,51 @@
+import { type CreateOrderEncounterDto } from '../../../../../shared/types';
+import { createOrderEncounter, getOrder } from '../../../../../shared/services/encounters.resource';
+
+type CreateSwitchInterventionOrderParams = {
+  patientUuid: string;
+  visitUuid: string;
+  locationUuid: string;
+  providerUuid: string;
+  orderEncounterTypeUuid: string;
+  outPatientCareSettingUuid: string;
+  shaInterventionSwitchingUuid: string;
+};
+
+export async function createSwitchInterventionOrder({
+  patientUuid,
+  visitUuid,
+  locationUuid,
+  providerUuid,
+  orderEncounterTypeUuid,
+  outPatientCareSettingUuid,
+  shaInterventionSwitchingUuid,
+}: CreateSwitchInterventionOrderParams): Promise<{ orderUuid: string; orderNumber: string }> {
+  const dto: CreateOrderEncounterDto = {
+    patient: patientUuid,
+    location: locationUuid,
+    encounterType: orderEncounterTypeUuid,
+    encounterDatetime: new Date().toISOString(),
+    visit: visitUuid,
+    obs: [],
+    orders: [
+      {
+        action: 'NEW',
+        type: 'order',
+        patient: patientUuid,
+        careSetting: outPatientCareSettingUuid,
+        orderer: providerUuid,
+        concept: shaInterventionSwitchingUuid,
+        urgency: 'ROUTINE',
+      },
+    ],
+  };
+
+  const encounter = await createOrderEncounter(dto);
+  const createdOrder = encounter?.orders?.[0];
+  if (!createdOrder?.uuid) {
+    throw new Error('Order encounter was created without an order');
+  }
+
+  const order = await getOrder(createdOrder.uuid);
+  return { orderUuid: createdOrder.uuid, orderNumber: order?.orderNumber };
+}

package/src/billing/dashboard/v2/claim-visits/switch-intervention/switch-intervention.workspace.scss

@@ -0,0 +1,191 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.form {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-06;
+  padding: layout.$spacing-05;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-04;
+  min-width: 0;
+}
+
+.sectionTitle {
+  @include type.type-style('heading-compact-02');
+  color: $ui-05;
+  margin: 0;
+}
+
+.sectionSub {
+  @include type.type-style('label-01');
+  color: $text-02;
+  margin: 0;
+  max-width: 56ch;
+}
+
+.emptyState {
+  padding: layout.$spacing-06;
+  color: $text-02;
+  @include type.type-style('body-01');
+}
+
+/* current intervention summary */
+.currentCard {
+  border: 1px solid $ui-03;
+  background-color: colors.$blue-10;
+  padding: layout.$spacing-04;
+  min-width: 0;
+}
+
+/* alternatives grid — collapses to a single column on narrow widths */
+.ivGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+  gap: layout.$spacing-04;
+}
+
+@media (max-width: 42rem) {
+  .ivGrid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.ivTile {
+  text-align: left;
+  background-color: $ui-01;
+  border: 1px solid $ui-03;
+  padding: layout.$spacing-04;
+  cursor: pointer;
+  min-width: 0;
+  transition: border-color 70ms, background-color 70ms;
+
+  &:hover {
+    border-color: colors.$blue-40;
+  }
+}
+
+.ivTileActive {
+  border-color: colors.$blue-60;
+  background-color: colors.$blue-10;
+  box-shadow: inset 0 0 0 1px colors.$blue-60;
+}
+
+.ivHead {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: layout.$spacing-03;
+  min-width: 0;
+}
+
+.ivCode {
+  @include type.type-style('label-01');
+  font-family: 'IBM Plex Mono', monospace;
+  color: colors.$blue-70;
+  overflow-wrap: anywhere;
+}
+
+.ivName {
+  @include type.type-style('heading-compact-01');
+  color: $ui-05;
+  margin: layout.$spacing-02 0;
+  overflow-wrap: anywhere;
+}
+
+.ivFlags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: layout.$spacing-02;
+  @include type.type-style('label-01');
+  color: $text-02;
+  text-transform: capitalize;
+}
+
+/* retain bill items date range */
+.dateRange {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+  gap: layout.$spacing-04;
+}
+
+.tagRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: layout.$spacing-02;
+}
+
+.hintBad {
+  @include type.type-style('label-01');
+  color: colors.$red-60;
+  margin: 0;
+}
+
+/* confirmation prompt — mirrors the claim-workspace switch prompt */
+.switchPrompt {
+  display: flex;
+  align-items: flex-start;
+  gap: layout.$spacing-03;
+  padding: layout.$spacing-04 layout.$spacing-05;
+  background-color: colors.$yellow-10;
+  border-left: 3px solid colors.$yellow-30;
+  min-width: 0;
+}
+
+.switchPrompt svg {
+  color: #b28600;
+  flex: 0 0 auto;
+  margin-top: 2px;
+}
+
+.switchBody {
+  min-width: 0;
+}
+
+.switchBody p {
+  @include type.type-style('body-compact-01');
+  color: $ui-05;
+  margin: 0 0 layout.$spacing-03;
+  overflow-wrap: anywhere;
+}
+
+.warn {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-02;
+  color: colors.$red-60;
+}
+
+.switchActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: layout.$spacing-03;
+}
+
+/* footer */
+.buttonSet {
+  display: flex;
+  gap: layout.$spacing-03;
+  padding: layout.$spacing-04 layout.$spacing-05;
+  border-top: 1px solid $ui-03;
+}
+
+@media (max-width: 42rem) {
+  .buttonSet {
+    flex-direction: column;
+  }
+}