@kenyaemr/esm-admin-app 5.4.4-pre.34 → 5.4.4-pre.340

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}],"workspaces":[{"name":"manage-user-workspace","component":"manageUserWorkspace","title":"Manage User Workspace","type":"other-form","canMaximize":true,"width":"extra-wide"},{"name":"user-role-scope-workspace","component":"userRoleScopeWorkspace","title":"User Rple Scope Workspace","type":"other-form","canMaximize":true,"width":"extra-wide"},{"name":"add-location-workspace","title":"Add Location","component":"addLocation","type":"workspace"},{"name":"search-location-workspace","title":"Search Location","component":"searchLocationWorkspace","type":"workspace"},{"name":"hwr-sync-workspace","title":"HWR Sync Workspace","component":"hwrSyncWorkspace","type":"other-form"},{"name":"hwr-sync-modal","title":"HWR Sync Modal","component":"hwrSyncModal","type":"modal"}],"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"}],"pages":[{"component":"root","route":"admin"}],"version":"5.4.4-pre.34"}
+{"$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"}],"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.4-pre.340"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-admin-app",
-  "version": "5.4.4-pre.34",
+  "version": "5.4.4-pre.340",
   "description": "Facilitates the management of ETL tables",
   "keywords": [
     "openmrs"
@@ -18,16 +18,14 @@
   "source": true,
   "browser": "dist/kenyaemr-esm-admin-app.js",
   "scripts": {
-    "analyze": "rspack --mode=production --env analyze=true",
+    "analyze": "rspack build --mode=production --analyze",
     "build": "rspack --mode=production",
-    "coverage": "yarn test --coverage",
+    "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",
-    "test": "cross-env TZ=UTC jest --config jest.config.js --verbose false --passWithNoTests",
-    "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js",
     "typescript": "tsc"
   },
   "browserslist": [
@@ -39,7 +37,7 @@
   },
   "peerDependencies": {
     "@carbon/react": "1.x",
-    "@openmrs/esm-framework": "8.x",
+    "@openmrs/esm-framework": "9.x",
     "react": "^18.1.0",
     "react-i18next": "11.x",
     "react-router-dom": "6.x",

package/rspack.config.js

@@ -1 +1 @@
-module.exports = require('openmrs/default-rspack-config');
+module.exports = require('../../tools/rs-pack-code-spliting');

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,142 +1,281 @@
-import { Button, Column, Grid, InlineLoading, Layer, 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 Card from './card.component';
-import dayjs from 'dayjs';
-import { syncPackagesAndInterventions } from './facility-setup.resource';
+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/src';
+import EmptyState from '../empty-state/empty-state-log.components';
 
-const FacilityInfo: React.FC = () => {
+const FacilityRegistryView: React.FC = () => {
   const { t } = useTranslation();
-  const [shouldSynchronize, setshouldSynchronize] = useState<boolean>(false);
-  const {
-    shaFacility,
-    isLoading: isShaFacilityLoading,
-    error: shaFacilityError,
-    mutate: mutateShafacility,
-  } = useShaFacilityInfo(shouldSynchronize);
-  const {
-    localFacility,
-    isLoading: isLocalFacilityLoading,
-    mutate: mutateLocalFacility,
-    error: localFacilityError,
-  } = 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 { facility, isLoading, error, notYetSynced, mutate } = useFacilityRegistry();
+  const [isSyncing, setIsSyncing] = React.useState(false);
 
-  const synchronizeFacilityData = useCallback(async () => {
+  const handleSync = useCallback(async () => {
+    setIsSyncing(true);
     try {
-      setshouldSynchronize(true);
-      const { shaFacility } = await mutateFacility();
+      const result = await syncFacilityRegistry();
+      await mutate();
       showSnackbar({
-        title: t('syncingHieSuccess', 'Synchronization Complete'),
+        title: t('facilityRegistrySyncSuccess', 'Facility synced'),
+        subtitle: t('facilityRegistrySyncedFrom', 'Pulled {{name}} from the facility registry', {
+          name: result.official_name,
+        }),
         kind: 'success',
         isLowContrast: true,
       });
-      if (shaFacility.data?.source != 'HIE') {
-        showSnackbar({
-          kind: 'warning',
-          title: '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');
+    } catch (err: any) {
       showSnackbar({
-        title: t('syncingHieError', 'Syncing with HIE Failed'),
-        subtitle: errorMessage,
+        title: t('facilityRegistrySyncFailed', 'Sync failed'),
+        subtitle:
+          err?.responseBody?.error ??
+          err?.message ??
+          t('facilityRegistrySyncError', 'Unable to reach the facility registry'),
         kind: 'error',
         isLowContrast: true,
       });
+    } finally {
+      setIsSyncing(false);
     }
-  }, [mutateFacility, t]);
+  }, [mutate, t]);
 
-  return (
-    <div className={styles.facilityInfoContainer}>
+  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>
-        <Layer className={styles.btnLayer}>
-          {isShaFacilityLoading || isLocalFacilityLoading ? (
-            <InlineLoading
-              description={t('synchronizingFacilityData', 'Please wait, Synchronizing Info.')}
-              className={styles.loading}
-            />
+        <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}>
+          {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="primary" onClick={synchronizeFacilityData}>
-              {t('synchronizeWithHie', 'Synchronize with HIE')}
+            <Button kind="secondary" size="sm" renderIcon={Renew} onClick={handleSync}>
+              {t('syncWithRegistry', 'Sync with facility registry')}
             </Button>
           )}
-        </Layer>
+        </div>
       </div>
 
-      <Grid narrow>
-        {/* General Info Column */}
+      <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={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={facility.is_hub ? 'blue' : 'gray'} size="sm">
+                  {facility.is_hub ? t('yes', 'Yes') : t('no', 'No')}
+                </Tag>
+              }
+            />
+          </SectionCard>
+        </Column>
+
+        <Column sm={4} md={4} lg={8}>
+          <SectionCard title={t('licenseAndShaStatus', 'License & SHA status')}>
+            <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={facility.license_status} />}
+            />
+            <InfoRow
+              label={t('licenseStart', 'License start')}
+              value={facility.license_start_date ? formatDate(parseDate(facility.license_start_date)) : '—'}
+            />
+            <InfoRow
+              label={t('licenseExpiry', 'License expiry')}
+              value={facility.license_end_date ? formatDate(parseDate(facility.license_end_date)) : '—'}
+            />
+            <InfoRow
+              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={
+                facility.sha_contract_status && facility.sha_contract_status !== '' ? (
+                  <StatusTag value={facility.sha_contract_status} />
+                ) : (
+                  <Tag type="gray" size="sm">
+                    {t('notContracted', 'Not contracted')}
+                  </Tag>
+                )
+              }
+            />
+            {facility.bed_occupancy && (
+              <InfoRow label={t('totalBeds', 'Total beds')} value={facility.bed_occupancy.totalBeds?.toString()} />
+            )}
+          </SectionCard>
+        </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('location', 'Location')}>
+            <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>
 
-        {/* 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('contactAndAdministrator', 'Contact & administrator')}>
+            <InfoRow
+              label={t('facilityPhone', 'Phone')}
+              value={
+                facility.facility_phone_number ? (
+                  <span className={styles.contactValue}>
+                    <Phone size={14} />
+                    {facility.facility_phone_number}
+                  </span>
+                ) : undefined
+              }
+            />
+            <InfoRow
+              label={t('facilityEmail', 'Email')}
+              value={
+                facility.facility_email ? (
+                  <span className={styles.contactValue}>
+                    <Email size={14} />
+                    {facility.facility_email}
+                  </span>
+                ) : undefined
+              }
+            />
+            {facility.facility_administrator_name && (
+              <div className={styles.adminCard}>
+                <div>
+                  <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>
-            </Tile>
-          </Layer>
+            )}
+          </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')}>
+            <ServicesView facility={facility} />
+          </SectionCard>
         </Column>
       </Grid>
     </div>
   );
 };
 
-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;