@kenyaemr/esm-admin-app 5.4.4-pre.85 → 5.4.4-pre.89

package/src/components/facility-setup/facility-info.component.tsx

@@ -1,78 +1,53 @@
-import { Button, Column, Grid, InlineLoading, Layer, Tile } from '@carbon/react';
+import { Button, Column, Grid, InlineLoading, Layer, Tag, Tile } from '@carbon/react';
 import { formatDate, parseDate, showSnackbar } from '@openmrs/esm-framework';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocalFacilityInfo, useShaFacilityInfo } from '../hook/useFacilityInfo';
 import styles from './facility-info.scss';
-import Card from './card.component';
-import dayjs from 'dayjs';
 import { syncPackagesAndInterventions } from './facility-setup.resource';
+import { Renew, Phone, Email } from '@carbon/react/icons';
+import { SectionCard } from './shared/custom-section-card.component';
+import { InfoRow } from './shared/custom-info.component';
+import { StatusTag } from './shared/custom-status-tag.component';
 
 const FacilityInfo: React.FC = () => {
   const { t } = useTranslation();
-  const [shouldSynchronize, setshouldSynchronize] = useState<boolean>(false);
+  const [shouldSynchronize, setShouldSynchronize] = useState(false);
+
   const {
     shaFacility,
-    isLoading: isShaFacilityLoading,
-    error: shaFacilityError,
-    mutate: mutateShafacility,
+    isLoading: isShaLoading,
+    error: shaError,
+    mutate: mutateSha,
   } = useShaFacilityInfo(shouldSynchronize);
-  const {
-    localFacility,
-    isLoading: isLocalFacilityLoading,
-    mutate: mutateLocalFacility,
-    error: localFacilityError,
-  } = useLocalFacilityInfo();
+  const { localFacility, isLoading: isLocalLoading, mutate: mutateLocal } = useLocalFacilityInfo();
+
   const mutateFacility = useCallback(async () => {
-    const defaultFacility = await mutateLocalFacility();
-    const shaFacility = await mutateShafacility();
-    return {
-      shaFacility,
-      defaultFacility,
-    };
-  }, [mutateLocalFacility, mutateShafacility]);
-  const shaStatus = useMemo(
-    () =>
-      shaFacility?.operationalStatus
-        ? `${shaFacility.operationalStatus.at(0).toUpperCase()}${shaFacility.operationalStatus
-            .slice(1)
-            ?.toLocaleLowerCase()}`
-        : undefined,
-    [shaFacility],
-  );
-  const shaExpiry = useMemo(
-    () =>
-      shaFacility?.shaFacilityExpiryDate && dayjs(shaFacility.shaFacilityExpiryDate).isValid()
-        ? formatDate(parseDate(shaFacility.shaFacilityExpiryDate))
-        : undefined,
-    [shaFacility],
-  );
+    const [defaultFacility, sha] = await Promise.all([mutateLocal(), mutateSha()]);
+    return { shaFacility: sha, defaultFacility };
+  }, [mutateLocal, mutateSha]);
+
+  const isLoading = isShaLoading || isLocalLoading;
 
   const synchronizeFacilityData = useCallback(async () => {
     try {
-      setshouldSynchronize(true);
-      const { shaFacility } = await mutateFacility();
-      showSnackbar({
-        title: t('syncingHieSuccess', 'Synchronization Complete'),
-        kind: 'success',
-        isLowContrast: true,
-      });
-      if (shaFacility.data?.source != 'HIE') {
+      setShouldSynchronize(true);
+      const { shaFacility: synced } = await mutateFacility();
+      showSnackbar({ title: t('syncingHieSuccess', 'Synchronization complete'), kind: 'success', isLowContrast: true });
+      if (synced?.data?.source !== 'HIE') {
         showSnackbar({
           kind: 'warning',
-          title: 'HIE Sync Failed. Pulling local info.',
+          title: t('hieSyncFailed', 'HIE sync failed. Pulling local info.'),
           isLowContrast: true,
         });
       }
-      // sync packages and intervensions
       await syncPackagesAndInterventions();
     } catch (error) {
-      const errorMessage =
-        error?.responseBody?.error?.message ??
-        t('hieSynchronizationError', 'An error occurred while synchronizing with HIE');
       showSnackbar({
-        title: t('syncingHieError', 'Syncing with HIE Failed'),
-        subtitle: errorMessage,
+        title: t('syncingHieError', 'Syncing with HIE failed'),
+        subtitle:
+          error?.responseBody?.error?.message ??
+          t('hieSynchronizationError', 'An error occurred while synchronizing with HIE'),
         kind: 'error',
         isLowContrast: true,
       });
@@ -80,59 +55,153 @@ const FacilityInfo: React.FC = () => {
   }, [mutateFacility, t]);
 
   return (
-    <div className={styles.facilityInfoContainer}>
-      <div>
-        <Layer className={styles.btnLayer}>
-          {isShaFacilityLoading || isLocalFacilityLoading ? (
-            <InlineLoading
-              description={t('synchronizingFacilityData', 'Please wait, Synchronizing Info.')}
-              className={styles.loading}
-            />
+    <div className={styles.root}>
+      <div className={styles.pageHeader}>
+        <div className={styles.pageActions}>
+          {isLoading ? (
+            <InlineLoading description={t('synchronizing', 'Synchronizing...')} />
           ) : (
-            <Button kind="primary" onClick={synchronizeFacilityData}>
-              {t('synchronizeWithHie', 'Synchronize with HIE')}
+            <Button kind="secondary" size="sm" renderIcon={Renew} onClick={synchronizeFacilityData}>
+              {t('syncWithHie', 'Sync with HIE')}
             </Button>
           )}
-        </Layer>
+        </div>
       </div>
+      <Grid narrow className={styles.grid}>
+        <Column sm={4} md={4} lg={8}>
+          <SectionCard title={t('generalInformation', 'General information')}>
+            <InfoRow label={t('facilityName', 'Facility name')} value={localFacility?.display} />
+            <InfoRow label={t('registrationNumber', 'Registration no.')} value={shaFacility?.registrationNumber} />
+            <InfoRow label={t('fidCode', 'FID code')} value={shaFacility?.fidCode} />
+            <InfoRow label={t('facilityRegistryCode', 'Registry code')} value={shaFacility?.facilityRegistryCode} />
+            <InfoRow
+              label={t('mflCode', 'MFL code')}
+              value={shaFacility?.mflCode !== '--' ? shaFacility?.mflCode : localFacility?.locationId}
+            />
+            <InfoRow label={t('kephLevel', 'KEPH level')} value={shaFacility?.kephLevel} />
+            <InfoRow label={t('facilityType', 'Facility type')} value={shaFacility?.facilityType} />
+            <InfoRow label={t('facilityOwnership', 'Ownership')} value={shaFacility?.facilityOwnership} />
+            <InfoRow
+              label={t('hubFacility', 'Hub facility')}
+              value={
+                <Tag type={shaFacility?.isHub === 'true' ? 'blue' : 'gray'} size="sm">
+                  {shaFacility?.isHub === 'true' ? 'Yes' : 'No'}
+                </Tag>
+              }
+            />
+          </SectionCard>
+        </Column>
 
-      <Grid narrow>
-        {/* General Info Column */}
         <Column sm={4} md={4} lg={8}>
-          <Tile className={styles.card}>
-            <h3 className={styles.cardTitle}>{t('generalInformation', 'General Information')}</h3>
-            <hr className={styles.cardDivider} />
-            <div className={styles.cardContent}>
-              <Card label={t('facilityName', 'Facility Name')} value={localFacility?.display} />
-              <Card label={t('facilityCode', 'Facility KMHFR Code')} value={shaFacility?.mflCode} />
-              <Card label={t('kephLevel', 'Keph Level')} value={shaFacility?.kephLevel} />
-              <br />
-              <br />
-            </div>
-          </Tile>
+          <SectionCard title={t('licenseAndShaStatus', 'License & SHA status')}>
+            <InfoRow label={t('licenseNumber', 'License no.')} value={shaFacility?.shaFacilityLicenseNumber} />
+            <InfoRow label={t('regulatoryBody', 'Regulatory body')} value={shaFacility?.regulatoryBody} />
+            <InfoRow
+              label={t('licenseStatus', 'License status')}
+              value={<StatusTag value={shaFacility?.facilityLicenseStatus} />}
+            />
+            <InfoRow
+              label={t('licenseStart', 'License start')}
+              value={formatDate(parseDate(shaFacility?.facilityLicenseStartDate)) ?? '—'}
+            />
+            <InfoRow
+              label={t('licenseExpiry', 'License expiry')}
+              value={formatDate(parseDate(shaFacility?.shaFacilityExpiryDate)) ?? '—'}
+            />
+            <InfoRow
+              label={t('operationalStatus', 'Operational status')}
+              value={<StatusTag value={shaFacility?.operationalStatus} />}
+            />
+            <InfoRow
+              label={t('shaContractStatus', 'SHA contract')}
+              value={
+                shaFacility?.shaContractStatus &&
+                shaFacility.shaContractStatus !== '--' &&
+                shaFacility.shaContractStatus !== '' ? (
+                  <StatusTag value={shaFacility.shaContractStatus} />
+                ) : (
+                  <Tag type="gray" size="sm">
+                    Not contracted
+                  </Tag>
+                )
+              }
+            />
+            <InfoRow label={t('totalBeds', 'Total beds')} value={shaFacility?.totalBeds} />
+          </SectionCard>
         </Column>
 
-        {/* SHA Info Column */}
         <Column sm={4} md={4} lg={8}>
-          <Layer>
-            <Tile className={styles.card}>
-              <h3 className={styles.cardTitle}>{t('facilityInformation', 'Facility Information')}</h3>
-              <hr className={styles.cardDivider} />
-              <div className={styles.cardContent}>
-                <Card
-                  label={t('facilityRegistryCode', 'Facility Registry Code')}
-                  value={shaFacility?.facilityRegistryCode}
-                />
-                <Card
-                  label={t('shalicenceNumber', 'SHA License Number')}
-                  value={shaFacility?.shaFacilityLicenseNumber}
-                />
-                <Card label={t('shaStatus', 'SHA Status')} value={shaStatus} />
-                <Card label={t('shaContracted', 'SHA Contracted')} value={shaFacility?.approved} />
-                <Card label={t('shaContractExpiry', 'SHA Contract Expiry Date')} value={shaExpiry} />
+          <SectionCard title={t('location', 'Location')}>
+            <InfoRow label={t('county', 'County')} value={shaFacility?.county} />
+            <InfoRow label={t('subCounty', 'Sub-county')} value={shaFacility?.subCounty} />
+            <InfoRow label={t('town', 'Town')} value={shaFacility?.town} />
+            <InfoRow label={t('physicalLocation', 'Physical location')} value={shaFacility?.physicalLocation} />
+            <InfoRow label={t('postalAddress', 'Postal address')} value={shaFacility?.postalAddress} />
+          </SectionCard>
+        </Column>
+
+        <Column sm={4} md={4} lg={8}>
+          <SectionCard title={t('contactAndAdministrator', 'Contact & administrator')}>
+            <InfoRow
+              label={t('facilityPhone', 'Phone')}
+              value={
+                shaFacility?.facilityPhoneNumber && shaFacility.facilityPhoneNumber !== '--' ? (
+                  <span className={styles.contactValue}>
+                    <Phone size={14} />
+                    {shaFacility.facilityPhoneNumber}
+                  </span>
+                ) : undefined
+              }
+            />
+            <InfoRow
+              label={t('facilityEmail', 'Email')}
+              value={
+                shaFacility?.facilityEmail && shaFacility.facilityEmail !== '--' ? (
+                  <span className={styles.contactValue}>
+                    <Email size={14} />
+                    {shaFacility.facilityEmail}
+                  </span>
+                ) : undefined
+              }
+            />
+            {shaFacility?.facilityAdministratorName && shaFacility.facilityAdministratorName !== '--' && (
+              <div className={styles.adminCard}>
+                <div>
+                  <p className={styles.adminName}>{shaFacility.facilityAdministratorName}</p>
+                  <p className={styles.adminDetail}>{shaFacility.facilityAdministratorPhone}</p>
+                  <p className={styles.adminDetail}>{shaFacility.facilityAdministratorEmail}</p>
+                </div>
               </div>
-            </Tile>
-          </Layer>
+            )}
+          </SectionCard>
+        </Column>
+
+        <Column sm={4} md={8} lg={16}>
+          <SectionCard title={t('shaContractedServices', 'SHA contracted services')}>
+            {(() => {
+              try {
+                const services = JSON.parse(shaFacility?.shaContractedServices ?? '[]');
+                if (services.length === 0) {
+                  return (
+                    <p className={styles.emptyState}>
+                      {t('noContractedServices', 'No contracted services on record for this facility.')}
+                    </p>
+                  );
+                }
+                return (
+                  <div className={styles.serviceList}>
+                    {services.map((svc: any, idx: number) => (
+                      <Tag key={idx} type="teal" size="sm">
+                        {svc.name ?? svc}
+                      </Tag>
+                    ))}
+                  </div>
+                );
+              } catch {
+                return <p className={styles.emptyState}>—</p>;
+              }
+            })()}
+          </SectionCard>
         </Column>
       </Grid>
     </div>

package/src/components/facility-setup/facility-info.scss

@@ -2,86 +2,129 @@
 @use '@carbon/type';
 @use '@carbon/colors';
 
-.omrs-main-content {
-  background-color: colors.$white;
+.root {
+  padding: layout.$spacing-05;
 }
 
-.bottomBorder {
+.pageHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   margin-bottom: layout.$spacing-05;
 }
 
-.btnLayer {
+.pageTitle {
+  @include type.type-style('heading-03');
+  color: colors.$gray-100;
+  margin: 0;
+}
+
+.pageActions {
   display: flex;
-  padding-top: layout.$spacing-05;
-  padding-right: layout.$spacing-05;
-  padding-bottom: layout.$spacing-05;
-  margin-top: layout.$spacing-05;
-  flex-direction: row;
-  justify-content: flex-end;
-  background-color: white;
-  width: 100%;
+  align-items: center;
+  gap: layout.$spacing-03;
+  margin-left: auto;
+  margin-right: layout.$spacing-09;
+}
+.grid {
+  margin-top: 0;
 }
 
-.tableLayer {
-  padding-left: layout.$spacing-05;
-  padding-right: layout.$spacing-05;
-  background: white;
-  padding-top: layout.$spacing-01;
+.sectionCard {
+  padding: layout.$spacing-05 !important;
+  background: white !important;
+  border: 1px solid colors.$gray-20 !important;
+  border-radius: 8px !important;
+  margin-bottom: layout.$spacing-05;
+  box-shadow: none !important;
 }
 
-.loading {
+.sectionTitle {
+  @include type.type-style('label-01');
+  font-weight: 600;
+  color: colors.$gray-60;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin: 0 0 layout.$spacing-04;
+  padding-bottom: layout.$spacing-03;
+  border-bottom: 1px solid colors.$gray-20;
+}
+
+.sectionBody {
   display: flex;
-  padding-top: layout.$spacing-05;
-  padding-right: layout.$spacing-05;
-  padding-bottom: layout.$spacing-05;
-  margin-top: layout.$spacing-05;
-  flex-direction: row;
-  justify-content: flex-end;
-  background-color: white;
-  width: 100%;
+  flex-direction: column;
 }
 
-.facilityInfoContainer {
-  margin: layout.$spacing-05;
+/* ── Info rows ── */
+.infoRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: layout.$spacing-02 0;
+  border-bottom: 1px solid colors.$gray-10;
+
+  &:last-child {
+    border-bottom: none;
+  }
 }
 
-.card {
-  padding: 1rem;
-  background-color: colors.$gray-10;
-  border: 1px solid #e0e0e0;
-  border-radius: 2px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+.infoLabel {
+  @include type.type-style('body-01');
+  color: colors.$gray-60;
+  flex-shrink: 0;
+  margin-right: layout.$spacing-05;
 }
 
-.cardTitle {
-  margin-bottom: 1rem;
-  font-size: 1.25rem;
-  font-weight: 600;
+.infoValue {
+  @include type.type-style('body-01');
+  font-weight: 500;
+  color: colors.$gray-100;
+  text-align: right;
+  word-break: break-word;
 }
 
-.cardDivider {
-  border: none;
-  border-top: 1px solid #e0e0e0;
-  margin: 0.5rem 0;
+.emptyValue {
+  color: colors.$gray-40;
+  font-weight: 400;
 }
-.cardContent {
-  font-size: 1rem;
-  line-height: 1.8;
+
+.contactValue {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-02;
 }
 
-.cardContent p {
+.adminCard {
   display: flex;
-  justify-content: space-between;
-  margin-bottom: 0.5rem;
+  align-items: flex-start;
+  gap: layout.$spacing-04;
+  margin-top: layout.$spacing-04;
+  padding-top: layout.$spacing-04;
+  border-top: 1px solid colors.$gray-10;
 }
-.cardContent br {
+.adminName {
+  @include type.type-style('body-01');
+  font-weight: 500;
+  color: colors.$gray-100;
+  margin: 0 0 layout.$spacing-01;
+  text-transform: capitalize;
+}
+
+.adminDetail {
+  @include type.type-style('label-01');
+  color: colors.$gray-60;
+  margin: 0;
+}
+
+.serviceList {
   display: flex;
-  justify-content: space-between;
-  margin-bottom: 0.5rem;
+  flex-wrap: wrap;
+  gap: layout.$spacing-02;
 }
 
-.cardContent strong {
-  min-width: 150px;
-  display: inline-block;
-  color: #393939;
+.emptyState {
+  @include type.type-style('body-01');
+  color: colors.$gray-40;
+  font-style: italic;
+  margin: 0;
 }

package/src/components/facility-setup/header/header.component.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { Development } from '@carbon/react/icons';
-import { useSession, PageHeader } from '@openmrs/esm-framework';
+import { PageHeader, PageHeaderContent, HomePictogram } from '@openmrs/esm-framework';
 import styles from './header.scss';
 
 interface HeaderProps {
@@ -9,14 +7,10 @@ interface HeaderProps {
 }
 
 const Header: React.FC<HeaderProps> = ({ title }) => {
-  const { t } = useTranslation();
-  const session = useSession();
-  const location = session?.sessionLocation?.display;
-
   return (
-    <div className={styles.header}>
-      <PageHeader title={title} illustration={<Development size={32} />} className={styles.header} />
-    </div>
+    <PageHeader className={styles.pageHeader}>
+      <PageHeaderContent title={title} illustration={<HomePictogram />} />
+    </PageHeader>
   );
 };
 

package/src/components/facility-setup/header/header.scss

@@ -2,18 +2,12 @@
 @use '@carbon/type';
 @use '@carbon/colors';
 
-.header {
+.pageHeader {
   @include type.type-style('body-compact-02');
   height: layout.$spacing-12;
   display: flex;
   justify-content: space-between;
   padding: layout.$spacing-05;
-  background: white;
-  border: 1px solid colors.$gray-20;
-}
-.svgContainer svg {
-  width: layout.$spacing-10;
-  height: layout.$spacing-10;
-  margin-right: layout.$spacing-06;
-  fill: var(--brand-03);
+  background: colors.$white-0;
+  border-bottom: 1px solid colors.$gray-20;
 }

package/src/components/facility-setup/shared/custom-info.component.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import styles from '../facility-info.scss';
+
+export const InfoRow: React.FC<{ label: string; value?: React.ReactNode }> = ({ label, value }) => (
+  <div className={styles.infoRow}>
+    <span className={styles.infoLabel}>{label}</span>
+    <span className={styles.infoValue}>{value ?? <span className={styles.emptyValue}>—</span>}</span>
+  </div>
+);

package/src/components/facility-setup/shared/custom-section-card.component.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Tile } from '@carbon/react';
+import styles from '../facility-info.scss';
+
+export const SectionCard: React.FC<{ title: string; children: React.ReactNode }> = ({ title, children }) => (
+  <Tile className={styles.sectionCard}>
+    <p className={styles.sectionTitle}>{title}</p>
+    <div className={styles.sectionBody}>{children}</div>
+  </Tile>
+);

package/src/components/facility-setup/shared/custom-status-tag.component.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Tag } from '@carbon/react';
+import styles from '../facility-info.scss';
+
+export const StatusTag: React.FC<{ value?: string }> = ({ value }) => {
+  if (!value || value === '--' || value.trim() === '') {
+    return <span className={styles.emptyValue}>—</span>;
+  }
+  const upper = value.toUpperCase();
+  const type =
+    upper === 'ACTIVE' || upper === 'LICENSED'
+      ? 'green'
+      : upper === 'INACTIVE' || upper === 'SUSPENDED'
+      ? 'red'
+      : 'gray';
+  const label = `${value.charAt(0).toUpperCase()}${value.slice(1).toLowerCase()}`;
+  return (
+    <Tag type={type} size="sm">
+      {label}
+    </Tag>
+  );
+};

package/src/types/index.ts

@@ -27,8 +27,36 @@ export interface SHAFacility {
   shaFacilityLicenseNumber: string;
   facilityRegistryCode: string;
   source: string;
+  officialName: string;
+  facilityType: string;
+  facilityOwnership: string;
+  fidCode: string;
+  isHub: string;
+  facilityLicenseStatus: string;
+  facilityLicenseStartDate: string;
+  regulatoryBody: string;
+  shaContractStatus: string;
+  shaContractStartDate: string;
+  shaContractEndDate: string;
+  facilityPhoneNumber: string;
+  facilityEmail: string;
+  facilityAdministratorName: string;
+  facilityAdministratorPhone: string;
+  facilityAdministratorEmail: string;
+  county: string;
+  subCounty: string;
+  town: string;
+  physicalLocation: string;
+  postalAddress: string;
+  latitude: string;
+  longitude: string;
+  totalBeds: string;
+  normalBeds: string;
+  icuBeds: string;
+  hduBeds: string;
+  dialysisBeds: string;
+  shaContractedServices: string;
 }
-
 export interface DefaultFacility {
   locationId: number;
   uuid: string;