@kenyaemr/esm-admin-app 5.4.4-pre.50 → 5.4.4-pre.502

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

@@ -2,86 +2,167 @@
 @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;
+  margin-right: layout.$spacing-08;
+}
+
+.pageTitle {
+  @include type.type-style('heading-03');
+  color: colors.$gray-100;
+  margin: 0;
 }
 
-.btnLayer {
+.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-12;
+}
+.grid {
+  margin-top: 0;
+}
+
+.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;
 }
 
-.tableLayer {
-  padding-left: layout.$spacing-05;
-  padding-right: layout.$spacing-05;
-  background: white;
-  padding-top: layout.$spacing-01;
+.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;
 }
 
-.loading {
+.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;
+}
+
+.emptyState {
+  @include type.type-style('body-01');
+  color: colors.$gray-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;
 }
 
-.cardContent strong {
-  min-width: 150px;
-  display: inline-block;
-  color: #393939;
+.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>
   );

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/components/facility-setup/type/index.ts

@@ -0,0 +1,61 @@
+export type FacilityRegistryAddress = {
+  country?: string;
+  county_code?: string;
+  county?: string;
+  sub_county_code?: string;
+  sub_county?: string;
+  postal_address?: string;
+  physical_location?: string;
+  town?: string;
+  latitude?: number | null;
+  longitude?: number | null;
+};
+
+export type FacilityRegistryBedOccupancy = {
+  totalBeds?: number;
+  normalBeds?: number;
+  icuBeds?: number;
+  hduBeds?: number;
+  dialysisBeds?: number;
+  numberOfCots?: number;
+};
+
+export type FacilityRegistryRecord = {
+  fr_code: string;
+  fid_code?: string;
+  registration_number?: string;
+  official_name?: string;
+  keph_level?: string;
+  facility_type?: string;
+  facility_ownership?: string;
+  license_status?: string;
+  license_number?: string;
+  license_start_date?: string | null;
+  license_end_date?: string | null;
+  regulatory_body?: string;
+  sha_contract_status?: string;
+  sha_contract_start_date?: string | null;
+  sha_contract_end_date?: string | null;
+  is_hub?: boolean;
+  facility_phone_number?: string;
+  facility_email?: string;
+  facility_administrator_name?: string;
+  facility_administrator_email?: string;
+  facility_administrator_phone?: string;
+  facility_administrator_identifier?: string;
+  address?: FacilityRegistryAddress;
+  regulatory_operational_status?: string;
+  sha_operational_status?: string;
+  bed_occupancy?: FacilityRegistryBedOccupancy;
+  sha_contracted_services?: Array<{ name?: string } | string>;
+  last_synced_at?: string;
+  last_sync_status?: 'SUCCESS' | 'FAILURE';
+};
+
+export type FacilityRegistrySyncResult = {
+  success: boolean;
+  fr_code: string;
+  official_name: string;
+  last_synced_at: string;
+  last_sync_status: 'SUCCESS' | 'FAILURE';
+};

package/src/components/facility-setup/useFacilityRegistry.ts

@@ -0,0 +1,29 @@
+import useSWR from 'swr';
+import { openmrsFetch, restBaseUrl, type FetchResponse } from '@openmrs/esm-framework';
+import { FacilityRegistryRecord, FacilityRegistrySyncResult } from './type';
+import { facilityRegistryUrl } from './constant';
+
+export const useFacilityRegistry = () => {
+  const { data, error, isLoading, mutate } = useSWR<FetchResponse<FacilityRegistryRecord>>(
+    facilityRegistryUrl,
+    openmrsFetch,
+    {
+      revalidateOnFocus: false,
+    },
+  );
+
+  const notYetSynced = error?.response?.status === 404;
+
+  return {
+    facility: data?.data,
+    isLoading,
+    error: notYetSynced ? null : error,
+    notYetSynced,
+    mutate,
+  };
+};
+
+export const syncFacilityRegistry = async (): Promise<FacilityRegistrySyncResult> => {
+  const response = await openmrsFetch<FacilityRegistrySyncResult>(facilityRegistryUrl + '/sync', { method: 'POST' });
+  return response.data;
+};

package/src/components/global-property/dashboard/global-property-dashboard.component.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { PageHeader, FacilityPictogram } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+
+import GlobalPropertyTable from '../table/global-property-table.component';
+import styles from './global-property-dashboard.scss';
+
+const GlobalPropertyDashboard: React.FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <PageHeader
+        className={styles.pageHeader}
+        title={t('globalProperty', 'Global Property')}
+        illustration={<FacilityPictogram />}
+      />
+      <GlobalPropertyTable />
+    </div>
+  );
+};
+
+export default GlobalPropertyDashboard;

package/src/components/global-property/dashboard/global-property-dashboard.scss

@@ -0,0 +1,6 @@
+@use '@carbon/layout';
+@use '@carbon/colors';
+
+.pageHeader {
+  border-bottom: 1px solid colors.$gray-10;
+}

package/src/components/global-property/hooks/useGlobalProperty.ts

@@ -0,0 +1,64 @@
+import { openmrsFetch, restBaseUrl, useOpenmrsPagination } from '@openmrs/esm-framework';
+
+import { type SystemSettings } from '../../../types';
+
+export type GlobalPropertyPayload = {
+  property: string;
+  value: string;
+  description?: string | null;
+  datatypeClassname?: string | null;
+  datatypeConfig?: string | null;
+  preferredHandlerClassname?: string | null;
+  handlerConfig?: string | null;
+};
+
+export async function saveOrUpdateGlobalProperty(payload: GlobalPropertyPayload, uuid?: string): Promise<void> {
+  const url = uuid ? `${restBaseUrl}/systemsetting/${uuid}` : `${restBaseUrl}/systemsetting`;
+  const body: Record<string, unknown> = {
+    property: payload.property,
+    value: payload.value,
+  };
+  if (payload.description) {
+    body.description = payload.description;
+  }
+  if (payload.datatypeClassname) {
+    body.datatypeClassname = payload.datatypeClassname;
+  }
+  if (payload.datatypeConfig) {
+    body.datatypeConfig = payload.datatypeConfig;
+  }
+  if (payload.preferredHandlerClassname) {
+    body.preferredHandlerClassname = payload.preferredHandlerClassname;
+  }
+  if (payload.handlerConfig != null) {
+    body.handlerConfig = payload.handlerConfig;
+  }
+
+  const response = await openmrsFetch(url, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({}));
+    throw new Error(errorData?.error?.message ?? 'Failed to save global property');
+  }
+}
+
+export async function deleteGlobalProperty(uuid: string): Promise<void> {
+  const response = await openmrsFetch(`${restBaseUrl}/systemsetting/${uuid}?purge=true`, {
+    method: 'DELETE',
+  });
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({}));
+    throw new Error(errorData?.error?.message ?? 'Failed to delete global property');
+  }
+}
+
+export function useGlobalProperties(pageSize: number = 10, searchTerm?: string) {
+  const searchQuery = searchTerm ? `&q=${encodeURIComponent(searchTerm)}` : '';
+  const baseUrl = `${restBaseUrl}/systemsetting?v=default`;
+  const url = searchTerm ? `${baseUrl}${searchQuery}` : baseUrl;
+  return useOpenmrsPagination<SystemSettings>(url, pageSize);
+}

package/src/components/global-property/hooks/useLogoUpload.ts

@@ -0,0 +1,28 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+
+export const ALLOWED_LOGO_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/webp'];
+export const MAX_LOGO_SIZE_BYTES = 2 * 1024 * 1024; // 2 MB
+
+export type LogoTarget = 'prescription' | 'receipt';
+
+export type UploadLogoResponse = {
+  savedPath: string;
+  message: string;
+};
+
+export async function uploadLogo(file: File, target: LogoTarget = 'prescription'): Promise<UploadLogoResponse> {
+  const formData = new FormData();
+  formData.append('file', file);
+
+  const response = await openmrsFetch(`${restBaseUrl}/palladiumemr/logo?target=${target}`, {
+    method: 'POST',
+    body: formData,
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({}));
+    throw new Error(errorData?.error ?? errorData?.error?.message ?? 'Failed to upload image');
+  }
+
+  return response.json();
+}

package/src/components/global-property/index.ts

@@ -0,0 +1,14 @@
+import { getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
+import { createLeftPanelLink } from '../../left-pannel-link.component';
+import { moduleName } from '../../constants';
+
+// t('globalProperty','Global property')
+export const globalPropertyLink = getSyncLifecycle(
+  createLeftPanelLink({ title: 'globalProperty', name: 'global-property' }),
+  { moduleName, featureName: 'global-property' },
+);
+
+export const globalPropertyDashboard = getAsyncLifecycle(
+  () => import('./dashboard/global-property-dashboard.component'),
+  { moduleName, featureName: 'global-property' },
+);

package/src/components/global-property/modal/delete-global-property-modal.component.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { Button, InlineLoading } from '@carbon/react';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+
+import { deleteGlobalProperty } from '../hooks/useGlobalProperty';
+
+interface DeleteGlobalPropertyModalProps {
+  close: () => void;
+  property: string;
+  uuid: string;
+  onDeleted: () => void;
+}
+
+const DeleteGlobalPropertyModal: React.FC<DeleteGlobalPropertyModalProps> = ({ close, property, uuid, onDeleted }) => {
+  const { t } = useTranslation();
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const handleDelete = async () => {
+    setIsDeleting(true);
+    try {
+      await deleteGlobalProperty(uuid);
+      showSnackbar({
+        isLowContrast: true,
+        kind: 'success',
+        title: t('gpDeleted', 'Global property deleted'),
+        subtitle: t('gpDeletedSubtitle', '{{property}} was deleted successfully.', { property }),
+      });
+      onDeleted();
+      close();
+    } catch (error) {
+      showSnackbar({
+        kind: 'error',
+        title: t('gpDeleteError', 'Error deleting global property'),
+        subtitle: error?.message,
+      });
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <>
+      <div className="cds--modal-header">
+        <h3 className="cds--modal-header__heading">{t('deleteGlobalProperty', 'Delete global property')}</h3>
+      </div>
+      <div className="cds--modal-content">
+        <p>
+          {t(
+            'deleteGlobalPropertyConfirmation',
+            'Are you sure you want to delete the global property "{{property}}"?',
+            {
+              property,
+            },
+          )}
+        </p>
+        <p>{t('deleteGlobalPropertyWarning', 'This action cannot be undone.')}</p>
+      </div>
+      <div className="cds--modal-footer">
+        <Button kind="secondary" onClick={close} disabled={isDeleting}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button kind="danger" onClick={handleDelete} disabled={isDeleting}>
+          {isDeleting ? <InlineLoading description={t('deleting', 'Deleting...')} /> : t('delete', 'Delete')}
+        </Button>
+      </div>
+    </>
+  );
+};
+
+export default DeleteGlobalPropertyModal;