develop high level claims dashboard

packages/esm-billing-app/src/claims/claims-management/header/summary-header.component.tsx

@@ -0,0 +1,64 @@
+import { DatePicker, DatePickerInput } from '@carbon/react';
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './summary-header.scss';
+
+
+interface ClaimsSummaryHeaderProps {
+  filters: {
+    fromDate: Date | null; 
+    toDate: Date | null;
+  };
+  onFilterChanged: (updateFn: (currentFilters: any) => any) => void;
+  statusOptions?: string[];
+}
+
+const ClaimSummaryHeader: React.FC<ClaimsSummaryHeaderProps> = ({
+  filters,
+  onFilterChanged,
+}) => {
+  const { t } = useTranslation();
+
+
+  const today = new Date();
+  const oneMonthAgo = new Date(today);
+  oneMonthAgo.setMonth(today.getMonth() - 1);
+
+
+  useEffect(() => {
+    if (!filters.fromDate && !filters.toDate) {
+      onFilterChanged(() => ({
+        fromDate: oneMonthAgo,
+        toDate: today,
+      }));
+    }
+  }, [filters, onFilterChanged, oneMonthAgo, today]);
+
+  return (
+    <div className={styles.summaryContainer}>
+      <DatePicker
+        datePickerType="range"
+        value={[filters.fromDate, filters.toDate]}
+        onChange={([fromDate, toDate]) =>
+          onFilterChanged((currentFilters) => ({ ...currentFilters, fromDate, toDate }))
+        }
+        aria-label={t('datePicker.rangeLabel', 'Select date range')}
+      >
+        <DatePickerInput
+          id="date-picker-input-id-start"
+          placeholder={t('datePicker.startPlaceholder', 'mm/dd/yyyy')}
+          size="md"
+          labelText={t('datePicker.startLabel', 'Start Date')}
+        />
+        <DatePickerInput
+          id="date-picker-input-id-finish"
+          placeholder={t('datePicker.endPlaceholder', 'mm/dd/yyyy')}
+          size="md"
+          labelText={t('datePicker.endLabel', 'End Date')}
+        />
+      </DatePicker>
+    </div>
+  );
+};
+
+export default ClaimSummaryHeader;

packages/esm-billing-app/src/claims/claims-management/header/summary-header.scss

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

packages/esm-billing-app/src/claims/claims-management/main/claims-summary-chart.component.tsx

@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from 'react';
+import { BarChartOptions, GroupedBarChart, ScaleTypes } from '@carbon/charts-react';
+
+const ClaimsSummaryChart = () => {
+  const [metrics, setMetrics] = useState({ summaryGraph: [] });
+
+  useEffect(() => {
+    setTimeout(() => {
+      // Simulating API data fetch
+      const data = {
+        summaryGraph: [
+          { month: 'January', claimsA: 1200, claimsB: 1000 },
+          { month: 'February', claimsA: 1000, claimsB: 1100 },
+          { month: 'March', claimsA: 1400, claimsB: 1300 },
+          { month: 'April', claimsA: 800, claimsB: 700 },
+          { month: 'May', claimsA: 1100, claimsB: 1200 },
+        ],
+      };
+
+      setMetrics(data);
+    }, 1000); // Simulating async fetch
+  }, []);
+
+  if (!metrics.summaryGraph.length) {
+    return <div>Loading data...</div>;
+  }
+
+  const transformClaimSummaryChartData = (data) => {
+    return data.map((item) => [
+      { group: item.month, value: item.claimsA },
+      { group: item.month, value: item.claimsB },
+    ]).flat();
+  };
+
+  const options: BarChartOptions = {
+    title: 'Claims Comparative Analysis',
+    legend: {
+      enabled: true,
+    },
+    axes: {
+      left: {
+        title: 'Month',
+        mapsTo: 'group',
+        scaleType: ScaleTypes.LABELS,
+      },
+      bottom: {
+        title: 'Amount (Ksh)',
+        mapsTo: 'value',
+
+        scaleType: ScaleTypes.LINEAR,
+        includeZero: true,
+      },
+    },
+    height: '400px',
+  };
+
+
+  const transformedData = transformClaimSummaryChartData(metrics.summaryGraph);
+
+  return (
+    <div style={{ padding: '2rem' }}>
+      <GroupedBarChart
+        data={transformedData}
+        options={options}
+      />
+    </div>
+  );
+};
+
+export default ClaimsSummaryChart;

packages/esm-billing-app/src/claims/claims-management/main/claims-summary-main.component.tsx

@@ -0,0 +1,93 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from '../../metrics/metrics.scss';
+import { ClaimsManagementHeader } from '../header/claims-header.component';
+import  ClaimsSummaryHeader  from '../header/summary-header.component';
+import { ClaimsSummaryFilter } from '../../../types';
+import ClaimsSummaryChart from './claims-summary-chart.component';
+
+
+import MetricsHeader from '../../metrics/metrics-header.component';
+import MetricsCard from '../../metrics/metrics-card.component';
+import { convertToCurrency } from '../../../helpers';
+
+
+const MainMetrics = () => {
+
+
+  const [filters, setFilters] = useState({
+    fromDate: null,
+    toDate: null,
+  });
+  const onFilterChanged = (updateFn: (currentFilters: any) => any) => {
+    setFilters(updateFn(filters));
+  };
+
+
+  const fromDate = filters.fromDate || new Date();
+  const toDate = filters.toDate || new Date();
+   // test data values declaration
+  const totalAmount = 1150000;
+  const claimedAmount = 120000; 
+
+  const pendingAmount = 56000; 
+
+  const preApps = 300; 
+  const preAppsApproved = 188; 
+
+  const preAppsPending = 20; 
+
+  const t = (key, fallback) => fallback; 
+
+  return (
+    <div className={`omrs-main-content`}>
+      <ClaimsManagementHeader title={t('claims', 'Claims Summary')} />
+      <ClaimsSummaryHeader
+        filters={filters}
+        onFilterChanged={onFilterChanged}
+      />       <> 
+       <div className={styles.cardContainer} data-testid="claims-metrics">
+        <MetricsCard
+          label={t('ksh', '')}
+          value={convertToCurrency(totalAmount)}
+          headerLabel={t('claimsItems', 'Total Claimed')}
+        />
+        <MetricsCard
+          label={t('ksh', '')}
+          value={convertToCurrency(claimedAmount)}
+          headerLabel={t('claimsItems', 'Total Approved')}
+        />
+        <MetricsCard
+          label={t('ksh', '')}
+          value={convertToCurrency(pendingAmount)}
+          headerLabel={t('claimsItems', 'Amount Pending')}
+        />
+      </div>
+      <div className={styles.cardContainer} data-testid="claims-metrics">
+        <MetricsCard
+          label={t('ksh', '')}
+          value={preApps}
+          headerLabel={t('claimsItems', 'Total Preauth')}
+        />
+        <MetricsCard
+          label={t('ksh', '')}
+          value={preAppsApproved}
+          headerLabel={t('claimsItems', 'Approved Preauth')}
+        />
+        <MetricsCard
+          label={t('ksh', '')}
+          value={preAppsPending}
+          headerLabel={t('claimsItems', 'Pending Preauth')}
+        />
+      </div>
+      <ClaimsSummaryChart />
+
+    </>
+
+
+    </div>
+
+  );
+};
+
+export default MainMetrics;

packages/esm-billing-app/src/index.ts

@@ -128,6 +128,13 @@ export const claimsManagementSideNavGroup = getSyncLifecycle(
   }),
   options,
 );
+export const claimsSummaryOverviewDashboardLink = getSyncLifecycle(
+  createLeftPanelLink({
+    name: 'claims-summary',
+    title: 'Claims Summary',
+  }),
+  options,
+);
 export const claimsManagementOverviewDashboardLink = getSyncLifecycle(
   createLeftPanelLink({
     name: 'claims-overview',

packages/esm-billing-app/src/root.component.tsx

@@ -5,6 +5,7 @@ import BillManager from './billable-services/bill-manager/bill-manager.component
 import { ChargeItemsDashboard } from './billable-services/dashboard/dashboard.component';
 import { PaymentHistory } from './billable-services/payment-history/payment-history.component';
 import { BillingDashboard } from './billing-dashboard/billing-dashboard.component';
+import ClaimsManagementSummary from './claims/claims-management/main/claims-summary-main.component';
 import ClaimsManagementOverview from './claims/claims-management/main/claims-overview-main.component';
 import ClaimsManagementPreAuthRequest from './claims/claims-management/main/claims-pre-auth-main.component';
 import ClaimScreen from './claims/dashboard/claims-dashboard.component';
@@ -22,6 +23,7 @@ const RootComponent: React.FC = () => {
     <BrowserRouter basename={baseName}>
       <Routes>
         <Route path="/" element={<BillingDashboard />} />
+        <Route path="/claims-summary" element={<ClaimsManagementSummary />} />
         <Route path="/claims-overview" element={<ClaimsManagementOverview />} />
         <Route path="/preauth-requests" element={<ClaimsManagementPreAuthRequest />} />
         <Route path="/patient/:patientUuid/:billUuid/pre-auth-request" element={<PreAuthRequestDashboard />} />

packages/esm-billing-app/src/routes.json

@@ -186,11 +186,18 @@
       },
       "featureFlag": "healthInformationExchange"
     },
+
+    {
+      "component": "claimsSummaryOverviewDashboardLink",
+      "name": "claims-management-summary-link",
+      "slot": "claims-management-dashboard-link-slot"
+    },
     {
       "component": "claimsManagementOverviewDashboardLink",
       "name": "claims-management-overview-link",
       "slot": "claims-management-dashboard-link-slot"
     },
+
     {
       "component": "preAuthRequestsDashboardLink",
       "name": "preauthrequest-overview-link",

packages/esm-billing-app/src/types/index.ts

@@ -521,6 +521,12 @@ export interface ClaimsPreAuthFilter {
   search?: string;
 }
 
+export interface ClaimsSummaryFilter {
+  fromDate: Date;
+  toDate: Date;
+  status: string;
+}
+
 export interface BenefitDataResponse {
   title?: string;
   allocation?: string;