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

package/src/billing/dashboard/v3/claim-visits/payer-preview/payer-preview-workspace.component.tsx

@@ -0,0 +1,171 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+    Button,
+    ButtonSet,
+    Tag,
+    Tile,
+    InlineNotification,
+} from '@carbon/react';
+import { formatDate, parseDate, Workspace2, type Workspace2DefinitionProps } from '@openmrs/esm-framework';
+import styles from './index.scss';
+import { PayerPreviewResult } from '../../../../types';
+import PayerClaimDoctors from './tables/payer-claim-doctors.component';
+import PayerClaimNotes from './tables/payer-claim-notes.component';
+import PayerClaimLines from './tables/payer-claim-lines.component';
+import PayerDiagnoses from './tables/payer-diagnoses.component';
+import PayerInterventions from './tables/payer-interventions.component';
+
+export interface ClaimDetailsWorkspaceProps {
+    payerPreviewResult: PayerPreviewResult;
+}
+
+const workflowStateTagType: Record<string, 'red' | 'blue' | 'purple' | 'cyan' | 'gray' | 'green'> = {
+    SENT_BACK: 'red',
+    REJECTED: 'red',
+    AUTOMATIC_CHECKS_DONE: 'blue',
+    SUBMITTED_PAYER: 'purple',
+    SUBMITTED_PROVIDER: 'cyan',
+    DRAFT_PROVIDER: 'gray',
+    APPROVED: 'green',
+};
+
+function getWorkflowTagType(state: string) {
+    return workflowStateTagType[state] ?? 'gray';
+}
+
+function humanizeState(state: string) {
+    return state.replace(/_/g, ' ');
+}
+
+function formatMoney(value: string) {
+    const amount = Number(value);
+    return Number.isNaN(amount) ? value : amount.toLocaleString(undefined, { minimumFractionDigits: 2 });
+}
+
+const PayerPreviewWorkspace: React.FC<Workspace2DefinitionProps<ClaimDetailsWorkspaceProps>> = ({
+    closeWorkspace,
+    workspaceProps,
+}) => {
+    const { t } = useTranslation();
+    const payerPreviewResult = workspaceProps?.payerPreviewResult;
+
+    if (!payerPreviewResult) {
+        return (
+            <Workspace2 title={t('payerPreviewDetails', 'Payer preview details')}>
+                <div>{t('loading', 'Loading...')}</div>
+            </Workspace2>
+        );
+    }
+
+    const orderedTransitions = useMemo(
+        () =>
+            [...payerPreviewResult.claimTransitions].sort(
+                (a, b) => new Date(b.transitionDate).getTime() - new Date(a.transitionDate).getTime(),
+            ),
+        [payerPreviewResult.claimTransitions],
+    );
+
+    return (
+        <Workspace2 title={t('payerPreviewDetails', 'Payer preview details')}>
+        <div className={styles.workspaceContainer}>
+            <div className={styles.tiles}>
+                <Tile className={styles.summaryTile}>
+                    <div className={styles.summaryHeaderRow}>
+                        <div>
+                            <p className={styles.memberName}>{payerPreviewResult.memberName}</p>
+                            <p className={styles.memberMeta}>
+                                {t('memberNumber', 'Member No.')} {payerPreviewResult.memberNumber} · {payerPreviewResult.schemeName}
+                            </p>
+                        </div>
+                        <Tag type={getWorkflowTagType(payerPreviewResult.workflowState)} size="md">
+                            {humanizeState(payerPreviewResult.workflowState)}
+                        </Tag>
+                    </div>
+
+                    {payerPreviewResult.workflowDisplayName && (
+                        <InlineNotification
+                            kind={payerPreviewResult.workflowState === 'SENT_BACK' ? 'warning' : 'info'}
+                            title={payerPreviewResult.workflowDisplayName}
+                            lowContrast
+                            hideCloseButton
+                            className={styles.workflowNotification}
+                        />
+                    )}
+
+                    <div className={styles.summaryGrid}>
+                        <div>
+                            <p className={styles.label}>{t('provider', 'Provider')}</p>
+                            <p className={styles.value}>{payerPreviewResult.providerName}</p>
+                        </div>
+                        <div>
+                            <p className={styles.label}>{t('claimType', 'Claim type')}</p>
+                            <p className={styles.value}>{payerPreviewResult.claimType}</p>
+                        </div>
+                        <div>
+                            <p className={styles.label}>{t('trackingNumber', 'Tracking No.')}</p>
+                            <p className={styles.value}>{payerPreviewResult.trackingNumber}</p>
+                        </div>
+                        <div>
+                            <p className={styles.label}>{t('providerClaimNo', 'Provider claim No.')}</p>
+                            <p className={styles.value}>{payerPreviewResult.providerClaimNo}</p>
+                        </div>
+                        <div>
+                            <p className={styles.label}>{t('billPeriod', 'Bill period')}</p>
+                            <p className={styles.value}>
+                                {formatDate(parseDate(payerPreviewResult.billFrom))} – {formatDate(parseDate(payerPreviewResult.billTo))}
+                            </p>
+                        </div>
+                        <div>
+                            <p className={styles.label}>{t('proposedValue', 'Proposed value')}</p>
+                            <p className={styles.value}>KES {formatMoney(payerPreviewResult.proposedValueLessCopays)}</p>
+                        </div>
+                    </div>
+                </Tile>
+                <br />
+                <br />
+                <PayerClaimNotes claimNotes={payerPreviewResult.claimNotes} />
+                <br />
+                <br />
+                <PayerClaimDoctors claimDoctors={payerPreviewResult.claimDoctors} />
+                <br />
+                <br />
+                <PayerDiagnoses diagnoses={payerPreviewResult.diagnoses} />
+                <br />
+                <br />
+                <PayerInterventions interventions={payerPreviewResult.authorization.interventions} />
+                <br />
+                <br />
+                <PayerClaimLines claimLines={payerPreviewResult.claimLines} />
+                <br />
+                <Tile>
+                    {t('transitions', 'Transitions')}
+                    <br />
+                    <br />
+                    <ul className={styles.timeline}>
+                        {orderedTransitions.map((transition) => (
+                            <li key={transition.guid} className={styles.timelineItem}>
+                                <div className={styles.timelineDot} />
+                                <div>
+                                    <p className={styles.value}>
+                                        {humanizeState(transition.workflowStateFrom)} → {humanizeState(transition.workflowStateTo)}
+                                    </p>
+                                    <p className={styles.label}>{formatDate(parseDate(transition.transitionDate), { time: true })}</p>
+                                </div>
+                            </li>
+                        ))}
+                    </ul>
+                </Tile>
+            </div>
+
+            <ButtonSet className={styles.footer}>
+                <Button kind="secondary" onClick={() => void closeWorkspace()} className={styles.footerButton}>
+                    {t('close', 'Close')}
+                </Button>
+            </ButtonSet>
+        </div>
+        </Workspace2>
+    );
+};
+
+export default PayerPreviewWorkspace;

package/src/billing/dashboard/v3/claim-visits/payer-preview/tables/payer-claim-doctors.component.tsx

@@ -0,0 +1,54 @@
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tile } from "@carbon/react";
+import { formatDate, parseDate } from "@openmrs/esm-framework";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { PayerClaimDoctor } from "../../../../../types";
+
+interface PayerClaimDoctorsProps {
+    claimDoctors: PayerClaimDoctor[]
+}
+
+const PayerClaimDoctors: React.FC<PayerClaimDoctorsProps> = ({ claimDoctors }) => {
+    const { t } = useTranslation();
+    return (
+        <Tile>
+            {t('claimDoctors', 'Claim doctors')}
+            <br />
+            <br />
+            <Table size="sm">
+                <TableHead>
+                    <TableRow>
+                        <TableHeader>No</TableHeader>
+                        <TableHeader>Name</TableHeader>
+                        <TableHeader>Practitioner registry Id</TableHeader>
+                        <TableHeader>Practitioner registration No</TableHeader>
+                        <TableHeader>Practitioner license No</TableHeader>
+                        <TableHeader>Practitioner license validity</TableHeader>
+                        <TableHeader>Practitioner license body</TableHeader>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {claimDoctors &&
+                        claimDoctors.map((val, index) => {
+                            const doctorProfile = val.doctorProfile;
+                            return (
+                                <>
+                                    <TableRow key={val.name}>
+                                        <TableCell>{index + 1}</TableCell>
+                                        <TableCell>{val.name}</TableCell>
+                                        <TableCell>{doctorProfile.practitionerRegistryId}</TableCell>
+                                        <TableCell>{doctorProfile.practitionerRegistrationNumber}</TableCell>
+                                        <TableCell>{doctorProfile.practitionerLicenceNumber}</TableCell>
+                                        <TableCell>{doctorProfile.practitionerLicenceValidity}</TableCell>
+                                        <TableCell>{doctorProfile.practitionerLicenseBody}</TableCell>
+                                    </TableRow>
+                                </>
+                            );
+                        })}
+                </TableBody>
+            </Table>
+        </Tile>
+    )
+}
+
+export default PayerClaimDoctors;

package/src/billing/dashboard/v3/claim-visits/payer-preview/tables/payer-claim-lines.component.tsx

@@ -0,0 +1,48 @@
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tile } from "@carbon/react";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { PayerClaimLine } from "../../../../../types";
+
+interface PayerClaimLinesProps {
+    claimLines: PayerClaimLine[]
+}
+
+const PayerClaimLines: React.FC<PayerClaimLinesProps> = ({ claimLines }) => {
+    const { t } = useTranslation();
+    return (
+        <Tile>
+            {t('claimLines', 'Claim lines')}
+            <br />
+            <br />
+            <Table size="sm">
+                <TableHead>
+                    <TableRow>
+                        <TableHeader>Item</TableHeader>
+                        <TableHeader>Quantity</TableHeader>
+                        <TableHeader>Unit price</TableHeader>
+                        <TableHeader>Total</TableHeader>
+                        <TableHeader>State</TableHeader>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {claimLines &&
+                        claimLines.map((val, index) => {
+                            return (
+                                <>
+                                    <TableRow key={val.id}>
+                                        <TableCell>{val.name}</TableCell>
+                                        <TableCell>{val.quantity}</TableCell>
+                                        <TableCell>{val.unitPrice}</TableCell>
+                                        <TableCell>{val.claimLineTotal}</TableCell>
+                                        <TableCell>{val.workflowState}</TableCell>
+                                    </TableRow>
+                                </>
+                            );
+                        })}
+                </TableBody>
+            </Table>
+        </Tile>
+    )
+}
+
+export default PayerClaimLines;

package/src/billing/dashboard/v3/claim-visits/payer-preview/tables/payer-claim-notes.component.tsx

@@ -0,0 +1,47 @@
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tile } from "@carbon/react";
+import { formatDate, parseDate } from "@openmrs/esm-framework";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { PayerClaimNote } from "../../../../../types";
+
+interface PayerClaimNotesProps {
+    claimNotes: PayerClaimNote[]
+}
+
+const PayerClaimNotes: React.FC<PayerClaimNotesProps> = ({ claimNotes }) => {
+    const { t } = useTranslation();
+    return (
+        <Tile>
+            {t('claimNotes', 'Claim notes')}
+            <br />
+            <br />
+            <Table size="sm">
+                <TableHead>
+                    <TableRow>
+                        <TableHeader>Note</TableHeader>
+                        <TableHeader>Author</TableHeader>
+                        <TableHeader>Source</TableHeader>
+                        <TableHeader>Workflow state</TableHeader>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {claimNotes &&
+                        claimNotes.map((val, index) => {
+                            return (
+                                <>
+                                    <TableRow key={val.id}>
+                                        <TableCell>{val.note}</TableCell>
+                                        <TableCell>{val.author}</TableCell>
+                                        <TableCell>{val.source}</TableCell>
+                                        <TableCell>{val.workflowState}</TableCell>
+                                    </TableRow>
+                                </>
+                            );
+                        })}
+                </TableBody>
+            </Table>
+        </Tile>
+    )
+}
+
+export default PayerClaimNotes;

package/src/billing/dashboard/v3/claim-visits/payer-preview/tables/payer-diagnoses.component.tsx

@@ -0,0 +1,44 @@
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tile } from "@carbon/react";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { PayerDiagnosis } from "../../../../../types";
+
+interface PayerDiagnosesProps {
+    diagnoses: PayerDiagnosis[]
+}
+
+const PayerDiagnoses: React.FC<PayerDiagnosesProps> = ({ diagnoses }) => {
+    const { t } = useTranslation();
+    return (
+        <Tile>
+            {t('diagnosis', 'Diagnosis')}
+            <br />
+            <br />
+            <Table size="sm">
+                <TableHead>
+                    <TableRow>
+                        <TableHeader>Diagnosis</TableHeader>
+                        <TableHeader>Code</TableHeader>
+                        <TableHeader>Code type</TableHeader>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {diagnoses &&
+                        diagnoses.map((val, index) => {
+                            return (
+                                <>
+                                    <TableRow key={index}>
+                                        <TableCell>{val.name}</TableCell>
+                                        <TableCell>{val.siteCode}</TableCell>
+                                        <TableCell>{val.siteCodeType}</TableCell>
+                                    </TableRow>
+                                </>
+                            );
+                        })}
+                </TableBody>
+            </Table>
+        </Tile>
+    )
+}
+
+export default PayerDiagnoses;

package/src/billing/dashboard/v3/claim-visits/payer-preview/tables/payer-interventions.component.tsx

@@ -0,0 +1,44 @@
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tile } from "@carbon/react";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { PayerIntervention } from "../../../../../types";
+
+interface PayerInterventionsProps {
+    interventions: PayerIntervention[]
+}
+
+const PayerInterventions: React.FC<PayerInterventionsProps> = ({ interventions }) => {
+    const { t } = useTranslation();
+    return (
+        <Tile>
+            {t('interventions', 'Interventions')}
+            <br />
+            <br />
+            <Table size="sm">
+                <TableHead>
+                    <TableRow>
+                        <TableHeader>Code</TableHeader>
+                        <TableHeader>Name</TableHeader>
+                        <TableHeader>Payment mechanism</TableHeader>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {interventions &&
+                        interventions.map((val, index) => {
+                            return (
+                                <>
+                                    <TableRow key={val.id}>
+                                        <TableCell>{val.code}</TableCell>
+                                        <TableCell>{val.name}</TableCell>
+                                        <TableCell>{val.paymentMechanism}</TableCell>
+                                    </TableRow>
+                                </>
+                            );
+                        })}
+                </TableBody>
+            </Table>
+        </Tile>
+    )
+}
+
+export default PayerInterventions;

package/src/billing/dashboard/v3/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/v3/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;
+  }
+}