@palladium-ethiopia/esm-billing-app 5.4.2-pre.30

package/src/claims/claims-management/header/filter-header.component.tsx

@@ -0,0 +1,75 @@
+import { DatePicker, DatePickerInput, Dropdown, Search, Button } from '@carbon/react';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ClaimsPreAuthFilter } from '../../../types';
+import styles from './filter-header.scss';
+import { showModal } from '@openmrs/esm-framework';
+
+type ClaimsFilterHeaderProps = {
+  filters: ClaimsPreAuthFilter;
+  onFilterChanged: React.Dispatch<React.SetStateAction<ClaimsPreAuthFilter>>;
+  statusOptions?: Array<{ value: string; label: string }>;
+  filteredClaimIds?: Array<string>;
+};
+
+const ClaimsFilterHeader: React.FC<ClaimsFilterHeaderProps> = ({
+  filters,
+  onFilterChanged,
+  statusOptions: status = [],
+  filteredClaimIds = [],
+}) => {
+  const { t } = useTranslation();
+
+  const handleUpdateAllStatuses = () => {
+    const dispose = showModal('manage-claim-request-modal', {
+      closeModal: () => dispose(),
+      multipleIds: filteredClaimIds,
+      modalType: 'all',
+    });
+  };
+  return (
+    <div className={styles.filterContainer}>
+      <Search
+        labelText={t('searchForPatient', 'Search for patient')}
+        placeholder={t('searchPLaceHolder', 'Search by provider or patient')}
+        onChange={({ target: { value } }) => onFilterChanged((fil) => ({ ...fil, search: value }))}
+        value={filters.search}
+      />
+      <Dropdown
+        hideLabel
+        className={styles.input}
+        id="status"
+        onChange={({ selectedItem }) => {
+          onFilterChanged((fil) => ({ ...fil, status: selectedItem }));
+        }}
+        initialSelectedItem={filters.status}
+        label={t('preauthStatus', 'Filter by Status')}
+        items={status.map((s) => s.value)}
+        itemToString={(item) => status.find((s) => s.value === item)?.label ?? ''}
+        titleText={t('preauthStatus', 'Filter by Status')}
+      />
+      <DatePicker
+        datePickerType="range"
+        value={[filters.fromDate, filters.toDate]}
+        onChange={([fromDate, toDate]) => onFilterChanged((fil) => ({ ...fil, fromDate, toDate }))}>
+        <DatePickerInput
+          labelText={t('startDate', 'Start date')}
+          id="date-picker-input-id-start"
+          placeholder="mm/dd/yyyy"
+          size="md"
+        />
+        <DatePickerInput
+          labelText={t('endDatetime', 'End date')}
+          id="date-picker-input-id-finish"
+          placeholder="mm/dd/yyyy"
+          size="md"
+        />
+      </DatePicker>
+      <Button kind="primary" onClick={handleUpdateAllStatuses} disabled={filteredClaimIds.length === 0}>
+        {t('updateAllStatuses', 'Update All')}
+      </Button>
+    </div>
+  );
+};
+
+export default ClaimsFilterHeader;

package/src/claims/claims-management/header/filter-header.scss

@@ -0,0 +1,13 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.filterContainer {
+  display: flex;
+  margin-top: layout.$spacing-05;
+  gap: layout.$spacing-01;
+}
+
+.input {
+  min-width: 200px;
+}

package/src/claims/claims-management/main/claims-overview-main.component.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { ClaimsManagementHeader } from '../header/claims-header.component';
+import ClaimsManagementTable from '../table/claims-list-table.component';
+
+const ClaimsManagementOverview = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={`omrs-main-content`}>
+      <ClaimsManagementHeader title={t('claims', 'Claims')} />
+      <ClaimsManagementTable />
+    </div>
+  );
+};
+
+export default ClaimsManagementOverview;

package/src/claims/claims-management/main/claims-pre-auth-main.component.tsx

@@ -0,0 +1,36 @@
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ClaimsPreAuthFilter } from '../../../types';
+import { ClaimsManagementHeader } from '../header/claims-header.component';
+import ClaimsFilterHeader from '../header/filter-header.component';
+import PreAuthTable from '../table/pre-auth-table.component';
+import PreauthTableTemporary from '../table/preauth-table.tmp.component';
+
+const ClaimsManagementPreAuthRequest = () => {
+  const { t } = useTranslation();
+
+  const [filters, setFilters] = useState<ClaimsPreAuthFilter>({
+    status: 'all',
+  });
+
+  const status = useMemo(
+    () => [
+      { value: 'all', label: t('all', 'All') },
+      { value: 'draft', label: t('draft', 'Draft') },
+      { value: 'active', label: t('active', 'Active') },
+      { value: 'cancelled', label: t('cancelled', 'Cancelled') },
+      { value: 'entered-in-error', label: t('enteredInError', 'Entered in error') },
+    ],
+    [t],
+  );
+
+  return (
+    <div className="omrs-main-content">
+      <ClaimsManagementHeader title={t('preAuthRequets', 'Pre-Auth Requests')} />
+      {/* <ClaimsFilterHeader filters={filters} onFilterChanged={setFilters} statusOptions={status} /> */}
+      <PreauthTableTemporary />
+    </div>
+  );
+};
+
+export default ClaimsManagementPreAuthRequest;

package/src/claims/claims-management/main/claims-preauth.scss

@@ -0,0 +1,13 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.headerContainer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.contentSwitch {
+  max-width: 600px;
+  margin: layout.$spacing-05;
+}

package/src/claims/claims-management/table/claim-summary-modal/claim-summary.modal.tsx

@@ -0,0 +1,284 @@
+import {
+  Button,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  DataTable,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+} from '@carbon/react';
+import { formatDate, parseDate } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FacilityClaim } from '../../../../types';
+import { useFacilityClaims } from '../use-facility-claims';
+import styles from './claim-summary.scss';
+import upperCase from 'lodash-es/upperCase';
+import Capitalize from 'lodash-es/capitalize';
+import { useCurrencyFormatting } from '../../../../helpers/currency';
+
+type ProvidedItem = {
+  uuid: string;
+  originUuid: string;
+  price: number;
+  dateOfServed: string | null;
+  status: string;
+  numberOfConsumptions: number;
+  item: {
+    uuid: string;
+    display: string;
+  };
+};
+
+type ExtendedClaim = FacilityClaim & {
+  id: string;
+  providerName: string;
+  patientName: string;
+  patientId?: string;
+  visitType?: { uuid: string; display: string };
+  patient?: {
+    uuid: string;
+    display: string;
+    person?: {
+      display?: string;
+      gender: string;
+      age: number;
+      birthdate: string;
+    };
+  };
+  visit?: {
+    uuid: string;
+    display: string;
+    startDatetime: string;
+    stopDatetime: string;
+    encounters: Array<{
+      diagnoses: Array<{
+        uuid: string;
+        diagnosis: {
+          coded?: {
+            display: string;
+            name?: {
+              display: string;
+            };
+          };
+          display?: string;
+        };
+      }>;
+    }>;
+  };
+  bill: {
+    uuid: string;
+    providedItems?: Array<ProvidedItem>;
+  };
+};
+
+export const ClaimSummaryModal = ({ closeModal, claimId }: { closeModal: () => void; claimId: string }) => {
+  const { t } = useTranslation();
+  const { claims } = useFacilityClaims();
+  const { format: formatCurrency } = useCurrencyFormatting();
+
+  const claim = claims.find((claim) => claim.id === claimId) as ExtendedClaim | undefined;
+
+  if (!claim) {
+    return (
+      <React.Fragment>
+        <ModalHeader closeModal={closeModal}>{t('claimInvoice', 'Claim Invoice')}</ModalHeader>
+        <ModalBody>
+          <p>{t('claimNotFound', 'Claim not found')}</p>
+        </ModalBody>
+        <ModalFooter>
+          <Button kind="primary" onClick={closeModal} type="button">
+            {t('close', 'Close')}
+          </Button>
+        </ModalFooter>
+      </React.Fragment>
+    );
+  }
+
+  const diagnoses =
+    claim.visit?.encounters?.flatMap((encounter) => {
+      if (!encounter.diagnoses || encounter.diagnoses.length === 0) {
+        return [];
+      }
+
+      return encounter.diagnoses
+        .map((d) => {
+          let displayName = '';
+
+          if (d.diagnosis?.coded?.display) {
+            displayName = d.diagnosis.coded.display;
+          } else if (d.diagnosis?.coded?.name?.display) {
+            displayName = d.diagnosis.coded.name.display;
+          } else if (d.diagnosis?.display) {
+            displayName = d.diagnosis.display;
+          } else if (typeof d.diagnosis === 'string') {
+            displayName = d.diagnosis;
+          }
+
+          return {
+            uuid: d.uuid,
+            display: displayName,
+          };
+        })
+        .filter((d) => d.display);
+    }) || [];
+
+  const lineItemsHeaders = [
+    { key: 'item', header: t('item', 'Item') },
+    { key: 'quantity', header: t('quantity', 'Quantity') },
+    { key: 'unitPrice', header: t('unitPrice', 'Unit Price') },
+    { key: 'total', header: t('total', 'Total') },
+  ];
+
+  const providedItems = claim.bill?.providedItems || [];
+
+  const lineItemsRows =
+    providedItems.length > 0
+      ? providedItems.map((item, index) => ({
+          id: `${index}`,
+          item: item.item?.display || '-',
+          quantity: item.numberOfConsumptions || 1,
+          unitPrice: formatCurrency(item.price || 0),
+          total: formatCurrency((item.price || 0) * (item.numberOfConsumptions || 1)),
+        }))
+      : [];
+
+  const calculatedTotal = providedItems.reduce((sum, item) => {
+    return sum + (item.price || 0) * (item.numberOfConsumptions || 1);
+  }, 0);
+
+  const displayTotal = calculatedTotal > 0 ? calculatedTotal : claim.claimedTotal || 0;
+
+  return (
+    <React.Fragment>
+      <ModalBody>
+        <div className={styles.invoiceContainer}>
+          <div className={styles.invoiceHeader}>
+            <div className={styles.invoiceTitle}>
+              <h3>{t('claimSummary', 'CLAIM SUMMARY')}</h3>
+            </div>
+            <div className={styles.claimNumber}>
+              <span className={styles.claimNumberLabel}>{t('claimNo', 'Claim No.')}</span>
+              <span className={styles.claimNumberValue}>{claim.claimCode || 'N/A'}</span>
+            </div>
+          </div>
+
+          <div className={styles.infoGrid}>
+            <div className={styles.infoBlock}>
+              <h4 className={styles.blockTitle}>{t('billTo', 'BILL TO')}</h4>
+              <div className={styles.infoContent}>
+                <p className={styles.primaryInfo}>
+                  {upperCase(claim.patient?.person?.display || claim.patientName) || '-'}
+                </p>
+                <p className={styles.secondaryInfo}>
+                  {claim.patient?.person?.gender} • {claim.patient?.person?.age} years
+                </p>
+                <p className={styles.secondaryInfo}>
+                  {t('dob', 'DOB')}:{' '}
+                  {claim.patient?.person?.birthdate
+                    ? formatDate(parseDate(claim.patient.person.birthdate), { time: false, noToday: true })
+                    : '-'}
+                </p>
+              </div>
+            </div>
+
+            <div className={styles.infoBlock}>
+              <h4 className={styles.blockTitle}>{t('provider', 'PROVIDER')}</h4>
+              <div className={styles.infoContent}>
+                <p className={styles.primaryInfo}>{claim.providerName || '-'}</p>
+              </div>
+            </div>
+          </div>
+
+          <div className={styles.visitSection}>
+            <h4 className={styles.sectionTitle}>{t('visitInformation', 'VISIT INFORMATION')}</h4>
+            <div className={styles.visitGrid}>
+              <div className={styles.visitField}>
+                <span className={styles.visitLabel}>{t('visitType', 'Visit Type')}</span>
+                <div className={styles.visitValueContainer}>
+                  <span className={styles.visitValue}>{claim.visitType?.display || claim.use || '-'}</span>
+                </div>
+              </div>
+              <div className={styles.visitField}>
+                <span className={styles.visitLabel}>{t('dateFrom', 'Service From')}</span>
+                <span className={styles.visitValue}>
+                  {claim.dateFrom ? formatDate(parseDate(claim.dateFrom), { time: false, noToday: true }) : '-'}
+                </span>
+              </div>
+              <div className={styles.visitField}>
+                <span className={styles.visitLabel}>{t('dateTo', 'Service To')}</span>
+                <span className={styles.visitValue}>
+                  {claim.dateTo ? formatDate(parseDate(claim.dateTo), { time: false, noToday: true }) : '-'}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {diagnoses.length > 0 && (
+            <div className={styles.diagnosesSection}>
+              <h4 className={styles.sectionTitle}>{t('diagnoses', 'DIAGNOSES')}</h4>
+              <ul className={styles.diagnosesList}>
+                {diagnoses.map((diagnosis) => (
+                  <li key={diagnosis.uuid} className={styles.diagnosisItem}>
+                    {Capitalize(diagnosis.display)}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          <div className={styles.lineItemsSection}>
+            <h4 className={styles.sectionTitle}>{t('servicesProvided', 'SERVICES PROVIDED')}</h4>
+            {providedItems.length === 0 ? (
+              <p className={styles.noItems}>{t('noLineItems', 'No line items available')}</p>
+            ) : lineItemsRows.length > 0 ? (
+              <DataTable rows={lineItemsRows} headers={lineItemsHeaders}>
+                {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
+                  <Table {...getTableProps()} size="md" useZebraStyles={false}>
+                    <TableHead>
+                      <TableRow>
+                        {headers.map((header) => (
+                          <TableHeader {...getHeaderProps({ header })} key={header.key}>
+                            {header.header}
+                          </TableHeader>
+                        ))}
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {rows.map((row) => (
+                        <TableRow {...getRowProps({ row })} key={row.id}>
+                          {row.cells.map((cell) => (
+                            <TableCell key={cell.id}>{cell.value}</TableCell>
+                          ))}
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                )}
+              </DataTable>
+            ) : (
+              <p className={styles.noItems}>{t('noLineItems', 'No line items available')}</p>
+            )}
+          </div>
+
+          <div className={styles.financialSummary}>
+            <h4 className={styles.sectionTitle}>{t('total', 'TOTAL')}</h4>
+            <div className={styles.summaryRow}>
+              <span className={styles.summaryLabel}>{t('claimedAmount', 'Claimed Amount')}</span>
+              <span className={styles.summaryValue}>{formatCurrency(displayTotal)}</span>
+            </div>
+          </div>
+        </div>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="primary" onClick={closeModal} type="button">
+          {t('close', 'Close')}
+        </Button>
+      </ModalFooter>
+    </React.Fragment>
+  );
+};

package/src/claims/claims-management/table/claim-summary-modal/claim-summary.scss

@@ -0,0 +1,252 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.invoiceContainer {
+  padding: layout.$spacing-05;
+  background-color: colors.$white;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.invoiceHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding-bottom: layout.$spacing-05;
+  border-bottom: 2px solid colors.$gray-20;
+  margin-bottom: layout.$spacing-06;
+}
+
+.invoiceTitle {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-04;
+
+  h3 {
+    @include type.type-style('heading-03');
+    font-weight: 600;
+    color: colors.$gray-100;
+    margin: 0;
+    letter-spacing: 0.5px;
+  }
+}
+
+.claimNumber {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: layout.$spacing-02;
+}
+
+.claimNumberLabel {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+  text-transform: uppercase;
+  font-weight: 600;
+}
+
+.claimNumberValue {
+  @include type.type-style('heading-compact-02');
+  color: colors.$blue-60;
+  font-weight: 600;
+}
+
+.infoGrid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: layout.$spacing-06;
+  margin-bottom: layout.$spacing-06;
+}
+
+.infoBlock {
+  padding: layout.$spacing-04;
+  border-radius: 4px;
+}
+
+.blockTitle {
+  @include type.type-style('label-02');
+  color: colors.$gray-100;
+  text-transform: uppercase;
+  margin: 0 0 layout.$spacing-04 0;
+  letter-spacing: 0.5px;
+  font-weight: 600;
+}
+
+.infoContent {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-02;
+}
+
+.primaryInfo {
+  @include type.type-style('body-short-02');
+  font-weight: 600;
+  color: colors.$gray-70;
+  margin: 0;
+  padding-bottom: layout.$spacing-02;
+}
+
+.secondaryInfo {
+  @include type.type-style('body-short-01');
+  color: colors.$gray-70;
+  margin: 0;
+  padding-bottom: layout.$spacing-02;
+}
+
+.visitSection {
+  margin-bottom: layout.$spacing-06;
+}
+
+.sectionTitle {
+  @include type.type-style('label-02');
+  font-weight: 600;
+  color: colors.$gray-70;
+  text-transform: uppercase;
+  margin: 0 0 layout.$spacing-04 0;
+  padding-bottom: layout.$spacing-03;
+  border-bottom: 1px solid colors.$gray-20;
+  letter-spacing: 0.5px;
+}
+
+.visitGrid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: layout.$spacing-05;
+  margin-top: layout.$spacing-04;
+}
+
+.visitField {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-02;
+}
+
+.visitLabel {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+  font-weight: 600;
+}
+
+.visitValue {
+  @include type.type-style('body-short-01');
+  color: colors.$gray-100;
+}
+
+.diagnosesSection {
+  margin-bottom: layout.$spacing-06;
+}
+
+.diagnosesList {
+  list-style: none;
+  padding: 0;
+  margin: layout.$spacing-04 0 0 0;
+}
+
+.diagnosisItem {
+  @include type.type-style('body-short-01');
+  padding: layout.$spacing-03;
+  margin-bottom: layout.$spacing-02;
+  color: colors.$gray-100;
+}
+
+.lineItemsSection {
+  margin-bottom: layout.$spacing-06;
+
+  :global(.cds--data-table) {
+    margin-top: layout.$spacing-04;
+  }
+
+  :global(.cds--table-header-label) {
+    @include type.type-style('label-01');
+    font-weight: 600;
+    text-transform: uppercase;
+  }
+
+  :global(.cds--data-table td) {
+    @include type.type-style('body-short-01');
+  }
+}
+
+.noItems {
+  @include type.type-style('body-short-01');
+  color: colors.$gray-70;
+  font-style: italic;
+  margin-top: layout.$spacing-04;
+  text-align: center;
+  padding: layout.$spacing-05;
+  background-color: colors.$gray-10;
+  border-radius: 4px;
+}
+
+.financialSummary {
+  margin-top: layout.$spacing-06;
+  padding: layout.$spacing-05;
+  background-color: colors.$gray-10;
+  border-radius: 4px;
+  border: 1px solid colors.$gray-20;
+}
+
+.summaryRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: layout.$spacing-03 0;
+  border-bottom: 1px solid colors.$gray-20;
+}
+
+.summaryLabel {
+  @include type.type-style('body-short-01');
+  color: colors.$gray-70;
+}
+
+.summaryValue {
+  @include type.type-style('body-short-01');
+  font-weight: 600;
+  color: colors.$gray-100;
+}
+
+.totalRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: layout.$spacing-04;
+  margin-top: layout.$spacing-03;
+  border-top: 2px solid colors.$gray-70;
+}
+
+.totalLabel {
+  @include type.type-style('heading-compact-01');
+  font-weight: 600;
+  color: colors.$gray-100;
+  text-transform: uppercase;
+}
+
+.totalValue {
+  @include type.type-style('heading-03');
+  font-weight: 700;
+  color: colors.$blue-60;
+}
+
+.billReference {
+  margin-top: layout.$spacing-05;
+  padding: layout.$spacing-03;
+  background-color: colors.$blue-10;
+  border-radius: 4px;
+  border-left: 3px solid colors.$blue-60;
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-02;
+}
+
+.referenceLabel {
+  @include type.type-style('label-01');
+  font-weight: 600;
+  color: colors.$gray-70;
+}
+
+.referenceValue {
+  @include type.type-style('code-01');
+  color: colors.$blue-60;
+  font-weight: 600;
+}