feat: KHP3 follow up changes on the providers: Filters, UI

packages/esm-providers-app/src/component/providers.component.tsx

@@ -1,53 +1,12 @@
 import React from 'react';
 import { ProvidersHeader } from '../header/providers-header.component';
-import { ContentSwitchTabs } from '../content-switcher/content-switcher.component';
-import { useProviders } from '../table/provider-data-table.resource';
-import dayjs from 'dayjs';
-import { ConfigObject } from '../config-schema';
-import { useConfig } from '@openmrs/esm-framework';
+import { ProviderOverview } from '../overview/provider-overview.component';
 
 const ProvidersComponent: React.FC = () => {
-  const { provider, error, isLoading } = useProviders();
-  const { licenseNumberUuid, licenseExpiryDateUuid, providerNationalIdUuid } = useConfig<ConfigObject>();
-
-  const activeProviders = provider.filter((provider) => {
-    const licenseAttr = provider.attributes.find((attr) => attr.attributeType.uuid === licenseNumberUuid);
-    const expiryAttr = provider.attributes.find((attr) => attr.attributeType.uuid === licenseExpiryDateUuid);
-    const nationalId = provider.attributes.find((attr) => attr.attributeType.uuid === providerNationalIdUuid);
-    const licenseExpiryDate = expiryAttr ? dayjs(expiryAttr.value) : null;
-
-    return nationalId && licenseAttr && licenseExpiryDate && licenseExpiryDate.isAfter(dayjs());
-  });
-
-  const expiredProviders = provider.filter((provider) => {
-    const expiryAttr = provider.attributes.find((attr) => attr.attributeType.uuid === licenseExpiryDateUuid);
-    const licenseExpiryDate = expiryAttr ? dayjs(expiryAttr.value) : null;
-
-    return licenseExpiryDate && licenseExpiryDate.isBefore(dayjs());
-  });
-
-  const missingNationalId = provider.filter((provider) => {
-    const nationalId = provider.attributes.find((attr) => attr.attributeType.uuid === providerNationalIdUuid);
-    return !nationalId;
-  });
-  const missingLicenseOrExpiry = provider.filter((provider) => {
-    const licenseAttr = provider.attributes.find((attr) => attr.attributeType.uuid === licenseNumberUuid);
-    const expiryAttr = provider.attributes.find((attr) => attr.attributeType.uuid === licenseExpiryDateUuid);
-    const nationalId = provider.attributes.find((attr) => attr.attributeType.uuid === providerNationalIdUuid);
-
-    return nationalId && (!licenseAttr || !expiryAttr);
-  });
-  const summarize = {
-    all: provider.length,
-    active: activeProviders.length,
-    expired: expiredProviders.length,
-    missingNationalId: missingNationalId.length,
-    missingLicenseOrExpiry: missingLicenseOrExpiry.length,
-  };
   return (
     <div className={`omrs-main-content`}>
-      <ProvidersHeader title={'Providers'} summarize={summarize} />
-      <ContentSwitchTabs />
+      <ProvidersHeader />
+      <ProviderOverview />
     </div>
   );
 };

packages/esm-providers-app/src/config-schema.ts

@@ -32,6 +32,26 @@ export const configSchema = {
     _description: 'UUID for provider licensing body',
     _default: 'bcaaa67b-cc72-4662-90c2-e1e992ceda66',
   },
+  providerHieFhirReference: {
+    _type: Type.String,
+    _description: 'UUID for provider hie fhir reference',
+    _default: '67b94e8e-4d61-4810-b0f1-d86497f6e553',
+  },
+  phoneNumberUuid: {
+    _type: Type.String,
+    _description: 'UUID for provider hie phone number',
+    _default: '37daed7f-1f4e-4e62-8e83-6048ade18a87',
+  },
+  qualificationUuid: {
+    _type: Type.String,
+    _description: 'UUID for provider hie qualification',
+    _default: '43f99413-6e7f-4812-bc60-066bb1d43f94',
+  },
+  providerAddressUuid: {
+    _type: Type.String,
+    _description: 'UUID for provider hie address',
+    _default: '033ff604-ecf7-464f-b623-5b77c733667f',
+  },
   defaultPrimaryFacility: {
     _type: Type.String,
     _description: 'Default facility for a provider',
@@ -64,6 +84,10 @@ export interface ConfigObject {
   nationalIDUuid: string;
   passportNumberUuid: string;
   licenseExpiryDateUuid: string;
+  providerHieFhirReference: string;
+  phoneNumberUuid: string;
+  qualificationUuid: string;
+  providerAddressUuid: string;
   licenseBodyUuid: string;
   providerNationalIdUuid: string;
   licenseNumberUuid: string;

packages/esm-providers-app/src/header/providers-header.component.tsx

@@ -1,53 +1,18 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Calendar, Location } from '@carbon/react/icons';
-import { useSession, formatDate } from '@openmrs/esm-framework';
+import { useSession, formatDate, PageHeader } from '@openmrs/esm-framework';
 import styles from './providers-header.scss';
 import ProvidersIllustration from './providers-illustration.component';
-import { MetricCard } from './providers-metrics.component';
 
-interface ProviderHeaderProps {
-  title: string;
-  summarize: {
-    all: number;
-    active: number;
-    expired: number;
-    missingNationalId: number;
-    missingLicenseOrExpiry: number;
-  };
-}
-export const ProvidersHeader: React.FC<ProviderHeaderProps> = ({ title, summarize }) => {
+export const ProvidersHeader: React.FC = () => {
   const { t } = useTranslation();
-  const userSession = useSession();
-  const userLocation = userSession?.sessionLocation?.display;
 
   return (
-    <div className={styles.header__section__container}>
-      <div className={styles.left__justified__items}>
-        <ProvidersIllustration />
-        <div className={styles.page__label}>
-          <p className={styles.page__name}>{title}</p>
-          <p>{t('providerManagement', 'Providers Management')}</p>
-        </div>
+    <>
+      <div className={styles.header}>
+        <PageHeader title={t('providerManagement', 'Providers Management')} illustration={<ProvidersIllustration />} />
       </div>
-      <div className={styles.metrics__header}>
-        <MetricCard label={t('all', 'All')} value={summarize.all} />
-        <MetricCard label={t('actives', 'Active')} value={summarize.active} />
-        <MetricCard label={t('expiredlscs', 'Expiring license(s)')} value={summarize.expired} />
-        <MetricCard label={t('missingLicenses', 'Missing license(s)')} value={summarize.missingLicenseOrExpiry} />
-        <MetricCard label={t('missingNational', 'Missing national id')} value={summarize.missingNationalId} />
-
-        <div className={styles.warp__metrics}>
-          <div className={styles.metricLocationDate}>
-            <span className={styles.location}>
-              <Location size={16} /> {userLocation}
-            </span>
-            <span className={styles.date}>
-              <Calendar size={16} /> {formatDate(new Date(), { mode: 'standard' })}
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
+    </>
   );
 };

packages/esm-providers-app/src/header/providers-header.scss

@@ -2,117 +2,18 @@
 @use '@carbon/type';
 @use '@carbon/colors';
 
-.header__section__container {
+.header {
   @include type.type-style('body-compact-02');
-  color: colors.$gray-70;
   height: layout.$spacing-12;
-  background-color: white;
-  border: 1px solid colors.$gray-20;
-  border-left: 0;
   display: flex;
   justify-content: space-between;
-  align-items: center;
-  margin-bottom: layout.$spacing-01;
-  margin-right: 0;
-  overflow-x: hidden;
-  padding: 0 layout.$spacing-05;
-}
-
-.left__justified__items {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-left: layout.$spacing-04;
-}
-
-.page__name {
-  @include type.type-style('heading-04');
-}
-
-.page__labels {
-  margin-left: 1rem;
-
-  p:first-of-type {
-    margin-bottom: layout.$spacing-02;
-  }
+  background: white;
+  border: 1px solid colors.$gray-20;
 }
-
-.svg__container svg {
+.svgContainer svg {
   width: layout.$spacing-10;
   height: layout.$spacing-10;
+  margin-right: layout.$spacing-03;
+  margin-left: layout.$spacing-06;
   fill: var(--brand-03);
 }
-
-.metrics__header {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  align-items: center;
-  gap: layout.$spacing-06;
-  flex-wrap: wrap;
-  padding: layout.$spacing-04 layout.$spacing-05 0 0;
-  margin-right: layout.$spacing-09;
-  width: auto;
-  height: auto;
-}
-
-.warp__metrics {
-  width: auto;
-  height: auto;
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  gap: layout.$spacing-03;
-  padding: 0;
-  min-width: layout.$spacing-12;
-}
-
-.metric__label {
-  flex-grow: 0;
-  font-family: IBMPlexSans;
-  font-size: layout.$spacing-04;
-  line-height: layout.$spacing-06;
-  letter-spacing: layout.$spacing-01;
-  color: colors.$gray-70;
-  text-align: left;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.metric__value {
-  flex-grow: 0;
-  font-size: layout.$spacing-06;
-  line-height: layout.$spacing-06;
-  text-align: left;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.metricLocationDate {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-  gap: layout.$spacing-05;
-  width: auto;
-}
-
-.location,
-.date {
-  display: flex;
-  align-items: center;
-  font-size: layout.$spacing-05;
-  line-height: layout.$spacing-06;
-  text-align: left;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.location {
-  margin-bottom: layout.$spacing-02;
-}

packages/esm-providers-app/src/header/providers-illustration.component.tsx

@@ -4,8 +4,8 @@ import { MedicalStaff } from '@carbon/pictograms-react';
 
 const ProvidersIllustration: React.FC = () => {
   return (
-    <div className={styles.svg__container}>
-      <MedicalStaff className={styles.icon__overiders} />
+    <div className={styles.svgContainer}>
+      <MedicalStaff className={styles.iconOveriders} />
     </div>
   );
 };