@kenyaemr/esm-admin-app 5.4.4-pre.98 → 5.4.5-pre.544

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemrCharts":"^1.6.7"},"extensions":[{"component":"adminLeftPanelLink","name":"admin-left-panel-link","slot":"admin-left-panel-slot"},{"component":"userManagementLeftPannelLink","name":"user-management-left-panel-link","slot":"admin-left-panel-slot"},{"component":"etlAdministrationLeftPannelLink","name":"etl-administration-left-panel-link","slot":"admin-left-panel-slot"},{"component":"locationsLeftPanelLink","name":"locations-left-panel-link","slot":"admin-left-panel-slot"},{"component":"facilitySetupLeftPanelLink","name":"facility-setup-left-panel-link","slot":"admin-left-panel-slot"},{"component":"providerBanner","name":"provider-banner","slot":"provider-banner-info-slot","order":1}],"modals":[{"component":"operationConfirmationModal","name":"operation-confirmation-modal"},{"component":"hwrConfirmationModal","name":"hwr-confirmation-modal"},{"component":"hwrEmptyModal","name":"hwr-empty-modal"},{"component":"hwrSyncModal","name":"hwr-syncing-modal"}],"workspaces2":[{"name":"manage-user-workspace","component":"manageUserWorkspace","window":"esm-admin-extra-wide-workspace-window"},{"name":"user-role-scope-workspace","component":"userRoleScopeWorkspace","window":"esm-admin-workspace-window"},{"name":"add-location-workspace","component":"addLocation","window":"esm-admin-workspace-window"},{"name":"search-location-workspace","component":"searchLocationWorkspace","window":"esm-admin-workspace-window"}],"workspaceWindows2":[{"name":"esm-admin-workspace-window","canMaximize":true,"group":"esm-admin-workspace-group"},{"name":"esm-admin-extra-wide-workspace-window","canMaximize":true,"group":"esm-admin-workspace-group","width":"extra-wide"}],"workspaceGroups2":[{"name":"esm-admin-workspace-group","scopePattern":"/admin","closeable":true}],"pages":[{"component":"root","route":"admin"}],"version":"5.4.4-pre.98"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemrCharts":"^1.6.7"},"extensions":[{"component":"adminLeftPanelLink","name":"admin-left-panel-link","slot":"admin-left-panel-slot"},{"component":"userManagementLeftPannelLink","name":"user-management-left-panel-link","slot":"admin-left-panel-slot"},{"component":"etlAdministrationLeftPannelLink","name":"etl-administration-left-panel-link","slot":"admin-left-panel-slot"},{"component":"locationsLeftPanelLink","name":"locations-left-panel-link","slot":"admin-left-panel-slot"},{"component":"facilitySetupLeftPanelLink","name":"facility-setup-left-panel-link","slot":"admin-left-panel-slot"},{"name":"global-property-link","component":"globalPropertyLink","slot":"admin-left-panel-slot"},{"component":"providerBanner","name":"provider-banner","slot":"provider-banner-info-slot","order":1},{"component":"globalPropertyDashboard","name":"global-property-dashboard"}],"modals":[{"component":"operationConfirmationModal","name":"operation-confirmation-modal"},{"component":"hwrConfirmationModal","name":"hwr-confirmation-modal"},{"component":"hwrEmptyModal","name":"hwr-empty-modal"},{"component":"hwrSyncModal","name":"hwr-syncing-modal"},{"component":"deleteGlobalPropertyModal","name":"delete-global-property-modal"}],"workspaces2":[{"name":"manage-user-workspace","component":"manageUserWorkspace","window":"esm-admin-extra-wide-workspace-window"},{"name":"user-role-scope-workspace","component":"userRoleScopeWorkspace","window":"esm-admin-workspace-window"},{"name":"add-location-workspace","component":"addLocation","window":"esm-admin-workspace-window"},{"name":"search-location-workspace","component":"searchLocationWorkspace","window":"esm-admin-workspace-window"},{"name":"global-property-workspace","component":"globalPropertyWorkspace","window":"esm-admin-workspace-window"},{"name":"upload-logo-workspace","component":"uploadLogoWorkspace","window":"esm-admin-workspace-window"}],"workspaceWindows2":[{"name":"esm-admin-workspace-window","canMaximize":true,"group":"esm-admin-workspace-group","width":"wider"},{"name":"esm-admin-extra-wide-workspace-window","canMaximize":true,"group":"esm-admin-workspace-group","width":"extra-wide"}],"workspaceGroups2":[{"name":"esm-admin-workspace-group","scopePattern":"/admin","closeable":true}],"pages":[{"component":"root","route":"admin"}],"version":"5.4.5-pre.544"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-admin-app",
-  "version": "5.4.4-pre.98",
+  "version": "5.4.5-pre.544",
   "description": "Facilitates the management of ETL tables",
   "keywords": [
     "openmrs"
@@ -22,7 +22,7 @@
     "build": "rspack --mode=production",
     "coverage": "echo \"Jest has been removed; no unit test runner is configured\" && exit 0",
     "debug": "npm run serve",
-    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js",
+    "extract-translations": "i18next 'src/**/*.{ts,tsx}' --config ../../tools/i18next-parser.config.js",
     "lint": "eslint src --ext ts,tsx",
     "serve": "rspack serve --mode=development",
     "start": "openmrs develop",
@@ -46,5 +46,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "stableVersion": "5.4.3"
+  "stableVersion": "5.4.4"
 }

package/src/components/confirm-modal/confirmation-operation.test.tsx

@@ -1,24 +1,13 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { useTranslation } from 'react-i18next';
+import { vi, describe, it, expect } from 'vitest';
 import OperationConfirmation from './confirmation-operation-modal.component';
 
-jest.mock('react-i18next', () => ({
-  useTranslation: jest.fn(),
-}));
-
 describe('OperationConfirmation', () => {
-  beforeEach(() => {
-    (useTranslation as jest.Mock).mockReturnValue({
-      t: (key, defaultValue, options) =>
-        options?.operationTypeOrName ? `Do you want to ${options.operationTypeOrName}?` : defaultValue || key,
-    });
-  });
-
   it('renders the component with provided props', () => {
-    const closeMock = jest.fn();
-    const confirmMock = jest.fn();
+    const closeMock = vi.fn();
+    const confirmMock = vi.fn();
     const operationName = 'refresh';
     const operationType = 'refreshed';
 
@@ -32,14 +21,14 @@ describe('OperationConfirmation', () => {
     );
 
     expect(screen.getByRole('heading', { name: 'Confirmation' })).toBeInTheDocument();
-    expect(screen.getByText('Do you want to refreshed?')).toBeInTheDocument();
+    expect(screen.getByText('Do you want to {{operationTypeOrName}}?')).toBeInTheDocument();
     expect(screen.getByText('No')).toBeInTheDocument();
     expect(screen.getByText('Yes')).toBeInTheDocument();
   });
 
   it('calls close when the No button is clicked', () => {
-    const closeMock = jest.fn();
-    const confirmMock = jest.fn();
+    const closeMock = vi.fn();
+    const confirmMock = vi.fn();
 
     render(
       <OperationConfirmation close={closeMock} confirm={confirmMock} operationName="delete" operationType="deleted" />,
@@ -53,8 +42,8 @@ describe('OperationConfirmation', () => {
   });
 
   it('calls confirm when the Yes button is clicked', () => {
-    const closeMock = jest.fn();
-    const confirmMock = jest.fn();
+    const closeMock = vi.fn();
+    const confirmMock = vi.fn();
 
     render(
       <OperationConfirmation close={closeMock} confirm={confirmMock} operationName="delete" operationType="deleted" />,

package/src/components/dashboard/dashboard.component.tsx

@@ -12,6 +12,7 @@ import {
 } from '../logs-table/operation-log-resource';
 import LogTable from '../logs-table/operation-log-table.component';
 import { showModal, showSnackbar } from '@openmrs/esm-framework';
+import { extractErrorMessagesFromResponse } from '../locations/helpers';
 
 const Dashboard: React.FC = () => {
   const { t } = useTranslation();
@@ -59,7 +60,9 @@ const Dashboard: React.FC = () => {
         } catch (error) {
           showSnackbar({
             title: t('operationError', '{{operationName}} failed', { operationName }),
-            subtitle: t('operationErrorSubtitle', 'An error occurred during the operation.'),
+            subtitle: t('operationErrorSubtitle', 'An error occurred during the operation. {{error}}', {
+              error: extractErrorMessagesFromResponse(error),
+            }),
             kind: 'error',
             isLowContrast: true,
           });

package/src/components/empty-state/empty-state-log.test.tsx

@@ -1,12 +1,11 @@
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
+import { vi, describe, it, expect } from 'vitest';
 import EmptyState from './empty-state-log.components';
 import React from 'react';
 
-// Mock the EmptyDataIllustration component
-jest.mock('@openmrs/esm-patient-common-lib', () => ({
-  EmptyDataIllustration: jest.fn(() => <div>Mocked EmptyDataIllustration</div>),
+vi.mock('@openmrs/esm-patient-common-lib', () => ({
+  EmptyDataIllustration: vi.fn(() => <div>Mocked EmptyDataIllustration</div>),
 }));
 
 describe('EmptyState', () => {

package/src/components/facility-setup/constant/index.ts

@@ -0,0 +1,3 @@
+import { restBaseUrl } from '@openmrs/esm-framework';
+
+export const facilityRegistryUrl = `${restBaseUrl}/virtualclaims/facility-registry`;

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

@@ -1,91 +1,123 @@
-import { Button, Column, Grid, InlineLoading, Layer, Tag, Tile } from '@carbon/react';
+import { Button, Column, Grid, InlineLoading, Tag, Tile } from '@carbon/react';
+import { Renew, Phone, Email } from '@carbon/react/icons';
 import { formatDate, parseDate, showSnackbar } from '@openmrs/esm-framework';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocalFacilityInfo, useShaFacilityInfo } from '../hook/useFacilityInfo';
 import styles from './facility-info.scss';
-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 { SectionCard } from './shared/custom-section-card.component';
 import { StatusTag } from './shared/custom-status-tag.component';
+import { syncFacilityRegistry, useFacilityRegistry } from './useFacilityRegistry';
+import { FacilityRegistryRecord } from './type';
+import { CardHeader } from '@openmrs/esm-patient-common-lib';
+import EmptyState from '../empty-state/empty-state-log.components';
 
-const FacilityInfo: React.FC = () => {
+const FacilityRegistryView: React.FC = () => {
   const { t } = useTranslation();
-  const [shouldSynchronize, setShouldSynchronize] = useState(false);
-
-  const {
-    shaFacility,
-    isLoading: isShaLoading,
-    error: shaError,
-    mutate: mutateSha,
-  } = useShaFacilityInfo(shouldSynchronize);
-  const { localFacility, isLoading: isLocalLoading, mutate: mutateLocal } = useLocalFacilityInfo();
-
-  const mutateFacility = useCallback(async () => {
-    const [defaultFacility, sha] = await Promise.all([mutateLocal(), mutateSha()]);
-    return { shaFacility: sha, defaultFacility };
-  }, [mutateLocal, mutateSha]);
+  const { facility, isLoading, error, notYetSynced, mutate } = useFacilityRegistry();
+  const [isSyncing, setIsSyncing] = React.useState(false);
 
-  const isLoading = isShaLoading || isLocalLoading;
-
-  const synchronizeFacilityData = useCallback(async () => {
+  const handleSync = useCallback(async () => {
+    setIsSyncing(true);
     try {
-      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: t('hieSyncFailed', 'HIE sync failed. Pulling local info.'),
-          isLowContrast: true,
-        });
-      }
-      await syncPackagesAndInterventions();
-    } catch (error) {
+      const result = await syncFacilityRegistry();
+      await mutate();
       showSnackbar({
-        title: t('syncingHieError', 'Syncing with HIE failed'),
+        title: t('facilityRegistrySyncSuccess', 'Facility synced'),
+        subtitle: t('facilityRegistrySyncedFrom', 'Pulled {{name}} from the facility registry', {
+          name: result.official_name,
+        }),
+        kind: 'success',
+        isLowContrast: true,
+      });
+    } catch (err: any) {
+      showSnackbar({
+        title: t('facilityRegistrySyncFailed', 'Sync failed'),
         subtitle:
-          error?.responseBody?.error?.message ??
-          t('hieSynchronizationError', 'An error occurred while synchronizing with HIE'),
+          err?.responseBody?.error ??
+          err?.message ??
+          t('facilityRegistrySyncError', 'Unable to reach the facility registry'),
         kind: 'error',
         isLowContrast: true,
       });
+    } finally {
+      setIsSyncing(false);
     }
-  }, [mutateFacility, t]);
+  }, [mutate, t]);
+
+  if (isLoading) {
+    return (
+      <div className={styles.root}>
+        <InlineLoading description={t('loadingFacility', 'Loading facility…')} />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={styles.root}>
+        <Tile className={styles.errorTile}>
+          <p>{t('facilityRegistryLoadError', 'Failed to load the facility record.')}</p>
+          <Button kind="secondary" size="sm" renderIcon={Renew} onClick={handleSync} disabled={isSyncing}>
+            {isSyncing ? t('syncing', 'Syncing…') : t('retry', 'Retry sync')}
+          </Button>
+        </Tile>
+      </div>
+    );
+  }
+
+  if (notYetSynced || !facility) {
+    return (
+      <div>
+        <CardHeader title={t('facilityDetails', 'Facility details')}>
+          <Button kind="primary" size="sm" renderIcon={Renew} onClick={handleSync} disabled={isSyncing}>
+            {isSyncing ? t('syncing', 'Syncing…') : t('syncNow', 'Sync now')}
+          </Button>
+        </CardHeader>
+        <EmptyState
+          subTitle={t(
+            'facilityRegistryNotSyncedBody',
+            'This facility has not been pulled from the registry. Click sync to fetch the latest record.',
+          )}
+        />
+      </div>
+    );
+  }
 
   return (
     <div className={styles.root}>
       <div className={styles.pageHeader}>
         <div className={styles.pageActions}>
-          {isLoading ? (
-            <InlineLoading description={t('synchronizing', 'Synchronizing...')} />
+          {facility.last_synced_at && (
+            <span className={styles.lastSynced}>
+              {t('lastSynced', 'Last synced')}: {formatDate(parseDate(facility.last_synced_at))}
+            </span>
+          )}
+          {isSyncing ? (
+            <InlineLoading description={t('syncing', 'Syncing…')} />
           ) : (
-            <Button kind="secondary" size="sm" renderIcon={Renew} onClick={synchronizeFacilityData}>
-              {t('syncWithHie', 'Sync with HIE')}
+            <Button kind="secondary" size="sm" renderIcon={Renew} onClick={handleSync}>
+              {t('syncWithRegistry', 'Sync with facility registry')}
             </Button>
           )}
         </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('facilityName', 'Facility name')} value={facility.official_name} />
+            <InfoRow label={t('registrationNumber', 'Registration no.')} value={facility.registration_number} />
+            <InfoRow label={t('frCode', 'FR code')} value={facility.fr_code} />
+            <InfoRow label={t('fidCode', 'FID code')} value={facility.fid_code} />
+            <InfoRow label={t('kephLevel', 'KEPH level')} value={facility.keph_level} />
+            <InfoRow label={t('facilityType', 'Facility type')} value={facility.facility_type} />
+            <InfoRow label={t('facilityOwnership', 'Ownership')} value={facility.facility_ownership} />
             <InfoRow
               label={t('hubFacility', 'Hub facility')}
               value={
-                <Tag type={shaFacility?.isHub === 'true' ? 'blue' : 'gray'} size="sm">
-                  {shaFacility?.isHub === 'true' ? 'Yes' : 'No'}
+                <Tag type={facility.is_hub ? 'blue' : 'gray'} size="sm">
+                  {facility.is_hub ? t('yes', 'Yes') : t('no', 'No')}
                 </Tag>
               }
             />
@@ -94,49 +126,60 @@ const FacilityInfo: React.FC = () => {
 
         <Column sm={4} md={4} lg={8}>
           <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('licenseNumber', 'License no.')} value={facility.license_number} />
+            <InfoRow label={t('regulatoryBody', 'Regulatory body')} value={facility.regulatory_body} />
             <InfoRow
               label={t('licenseStatus', 'License status')}
-              value={<StatusTag value={shaFacility?.facilityLicenseStatus} />}
+              value={<StatusTag value={facility.license_status} />}
             />
             <InfoRow
               label={t('licenseStart', 'License start')}
-              value={formatDate(parseDate(shaFacility?.facilityLicenseStartDate)) ?? '—'}
+              value={facility.license_start_date ? formatDate(parseDate(facility.license_start_date)) : '—'}
             />
             <InfoRow
               label={t('licenseExpiry', 'License expiry')}
-              value={formatDate(parseDate(shaFacility?.shaFacilityExpiryDate)) ?? '—'}
+              value={facility.license_end_date ? formatDate(parseDate(facility.license_end_date)) : '—'}
             />
             <InfoRow
-              label={t('operationalStatus', 'Operational status')}
-              value={<StatusTag value={shaFacility?.operationalStatus} />}
+              label={t('regulatoryOperationalStatus', 'Regulatory status')}
+              value={<StatusTag value={facility.regulatory_operational_status} />}
+            />
+            <InfoRow
+              label={t('shaOperationalStatus', 'SHA status')}
+              value={<StatusTag value={facility.sha_operational_status} />}
             />
             <InfoRow
               label={t('shaContractStatus', 'SHA contract')}
               value={
-                shaFacility?.shaContractStatus &&
-                shaFacility.shaContractStatus !== '--' &&
-                shaFacility.shaContractStatus !== '' ? (
-                  <StatusTag value={shaFacility.shaContractStatus} />
+                facility.sha_contract_status && facility.sha_contract_status !== '' ? (
+                  <StatusTag value={facility.sha_contract_status} />
                 ) : (
                   <Tag type="gray" size="sm">
-                    Not contracted
+                    {t('notContracted', 'Not contracted')}
                   </Tag>
                 )
               }
             />
-            <InfoRow label={t('totalBeds', 'Total beds')} value={shaFacility?.totalBeds} />
+            {facility.bed_occupancy && (
+              <InfoRow label={t('totalBeds', 'Total beds')} value={facility.bed_occupancy.totalBeds?.toString()} />
+            )}
           </SectionCard>
         </Column>
 
         <Column sm={4} md={4} lg={8}>
           <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} />
+            <InfoRow label={t('country', 'Country')} value={facility.address?.country} />
+            <InfoRow label={t('county', 'County')} value={facility.address?.county} />
+            <InfoRow label={t('subCounty', 'Sub-county')} value={facility.address?.sub_county} />
+            <InfoRow label={t('town', 'Town')} value={facility.address?.town} />
+            <InfoRow label={t('physicalLocation', 'Physical location')} value={facility.address?.physical_location} />
+            <InfoRow label={t('postalAddress', 'Postal address')} value={facility.address?.postal_address} />
+            {facility.address?.latitude != null && facility.address?.longitude != null && (
+              <InfoRow
+                label={t('coordinates', 'Coordinates')}
+                value={`${facility.address.latitude}, ${facility.address.longitude}`}
+              />
+            )}
           </SectionCard>
         </Column>
 
@@ -145,10 +188,10 @@ const FacilityInfo: React.FC = () => {
             <InfoRow
               label={t('facilityPhone', 'Phone')}
               value={
-                shaFacility?.facilityPhoneNumber && shaFacility.facilityPhoneNumber !== '--' ? (
+                facility.facility_phone_number ? (
                   <span className={styles.contactValue}>
                     <Phone size={14} />
-                    {shaFacility.facilityPhoneNumber}
+                    {facility.facility_phone_number}
                   </span>
                 ) : undefined
               }
@@ -156,51 +199,39 @@ const FacilityInfo: React.FC = () => {
             <InfoRow
               label={t('facilityEmail', 'Email')}
               value={
-                shaFacility?.facilityEmail && shaFacility.facilityEmail !== '--' ? (
+                facility.facility_email ? (
                   <span className={styles.contactValue}>
                     <Email size={14} />
-                    {shaFacility.facilityEmail}
+                    {facility.facility_email}
                   </span>
                 ) : undefined
               }
             />
-            {shaFacility?.facilityAdministratorName && shaFacility.facilityAdministratorName !== '--' && (
+            {facility.facility_administrator_name && (
               <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>
+                  <p className={styles.adminName}>{facility.facility_administrator_name}</p>
+                  {facility.facility_administrator_phone && (
+                    <p className={styles.adminDetail}>{facility.facility_administrator_phone}</p>
+                  )}
+                  {facility.facility_administrator_email && (
+                    <p className={styles.adminDetail}>{facility.facility_administrator_email}</p>
+                  )}
                 </div>
               </div>
             )}
           </SectionCard>
         </Column>
 
+        <Column sm={4} md={8} lg={16}>
+          <SectionCard title={t('bedOccupancy', 'Bed occupancy')}>
+            <BedOccupancyView facility={facility} />
+          </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>;
-              }
-            })()}
+            <ServicesView facility={facility} />
           </SectionCard>
         </Column>
       </Grid>
@@ -208,4 +239,43 @@ const FacilityInfo: React.FC = () => {
   );
 };
 
-export default FacilityInfo;
+const BedOccupancyView: React.FC<{ facility: FacilityRegistryRecord }> = ({ facility }) => {
+  const { t } = useTranslation();
+  const bo = facility.bed_occupancy;
+  if (!bo) {
+    return <p className={styles.emptyState}>{t('noBedOccupancyData', 'No bed occupancy data')}</p>;
+  }
+  return (
+    <div className={styles.bedGrid}>
+      <InfoRow label={t('totalBeds', 'Total')} value={bo.totalBeds?.toString()} />
+      <InfoRow label={t('normalBeds', 'Normal')} value={bo.normalBeds?.toString()} />
+      <InfoRow label={t('icuBeds', 'ICU')} value={bo.icuBeds?.toString()} />
+      <InfoRow label={t('hduBeds', 'HDU')} value={bo.hduBeds?.toString()} />
+      <InfoRow label={t('dialysisBeds', 'Dialysis')} value={bo.dialysisBeds?.toString()} />
+      <InfoRow label={t('cots', 'Cots')} value={bo.numberOfCots?.toString()} />
+    </div>
+  );
+};
+
+const ServicesView: React.FC<{ facility: FacilityRegistryRecord }> = ({ facility }) => {
+  const { t } = useTranslation();
+  const services = facility.sha_contracted_services ?? [];
+  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, idx) => (
+        <Tag key={idx} type="teal" size="sm">
+          {typeof svc === 'string' ? svc : svc.name ?? JSON.stringify(svc)}
+        </Tag>
+      ))}
+    </div>
+  );
+};
+
+export default FacilityRegistryView;

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

@@ -11,6 +11,7 @@
   align-items: center;
   justify-content: space-between;
   margin-bottom: layout.$spacing-05;
+  margin-right: layout.$spacing-08;
 }
 
 .pageTitle {
@@ -24,7 +25,7 @@
   align-items: center;
   gap: layout.$spacing-03;
   margin-left: auto;
-  margin-right: layout.$spacing-09;
+  margin-right: layout.$spacing-12;
 }
 .grid {
   margin-top: 0;
@@ -128,3 +129,40 @@
   font-style: italic;
   margin: 0;
 }
+
+.pageMeta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.lastSynced {
+  font-size: 0.875rem;
+  color: var(--cds-text-secondary, #525252);
+  display: flex;
+  align-items: end;
+}
+
+.bedGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: layout.$spacing-04;
+
+  .infoRow {
+    display: flex;
+    justify-content: flex-start;
+    gap: layout.$spacing-03;
+    padding: layout.$spacing-02 layout.$spacing-03;
+    background: colors.$gray-10;
+    border-radius: 4px;
+    border-bottom: none;
+  }
+
+  .infoLabel {
+    margin-right: 0;
+  }
+
+  .infoValue {
+    text-align: left;
+  }
+}

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

@@ -1,9 +1,9 @@
 import { Layer } from '@carbon/react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import FacilityInfo from './facility-info.component';
 import styles from './facility-setup.scss';
 import Header from './header/header.component';
+import FacilityRegistryView from './facility-info.component';
 
 const FacilitySetup: React.FC = () => {
   const { t } = useTranslation();
@@ -12,7 +12,7 @@ const FacilitySetup: React.FC = () => {
       <Header title={t('facilityDetails', 'Facility Details')} />
 
       <Layer className={styles.tableLayer}>
-        <FacilityInfo />
+        <FacilityRegistryView />
       </Layer>
     </div>
   );