@digihmis/esm-administration-app 1.0.0

package/src/routes.json

@@ -0,0 +1,157 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "fhir2": ">=1.2",
+    "webservices.rest": "^2.24.0"
+  },
+  "extensions": [
+    {
+      "name": "system-info-management-dashboard-link",
+      "slot": "administration-dashboard-slot",
+      "component": "systemInfoLeftPanelLink",
+      "meta": {
+        "name": "system-info-management",
+        "slot": "system-info-management-homepage-dashboard-slot",
+        "title": "System Info"
+      }
+    },
+    {
+      "name": "queue-management-dashboard-link",
+      "slot": "administration-dashboard-slot",
+      "component": "queueLeftPanelLink",
+      "meta": {
+        "name": "queue-management",
+        "slot": "queue-management-homepage-dashboard-slot",
+        "title": "Queue Management"
+      }
+    },
+    {
+      "name": "location-management-dashboard-link",
+      "slot": "administration-dashboard-slot",
+      "component": "locationLeftPanelLink",
+      "meta": {
+        "name": "location-management",
+        "slot": "location-management-homepage-dashboard-slot",
+        "title": "Location Management"
+      }
+    },
+    {
+      "name": "bed-management-dashboard-link",
+      "slot": "administration-dashboard-slot",
+      "component": "bedLeftPanelLink",
+      "meta": {
+        "name": "bed-management",
+        "slot": "bed-management-homepage-dashboard-slot",
+        "title": "Bed Management"
+      }
+    },
+    {
+      "name": "form-builder-dashboard-link",
+      "slot": "administration-dashboard-slot",
+      "component": "formBuilderLeftPanelLink",
+      "meta": {
+        "name": "form-builder",
+        "slot": "form-builder-homepage-dashboard-slot",
+        "title": "Form Builder"
+      }
+    },
+    {
+      "name": "billing-management-dashboard-link",
+      "slot": "administration-dashboard-slot",
+      "component": "billingLeftPanelLink",
+      "meta": {
+        "name": "billing-management",
+        "slot": "billing-management-homepage-dashboard-slot",
+        "title": "Billing Management"
+      }
+    },
+    {
+      "name": "queue-management-dashboard-content",
+      "slot": "queue-management-homepage-dashboard-slot",
+      "component": "queueManagementDashboard"
+    },
+    {
+      "name": "location-management-dashboard-content",
+      "slot": "location-management-homepage-dashboard-slot",
+      "component": "locationManagementDashboard"
+    },
+    {
+      "name": "bed-management-dashboard-content",
+      "slot": "bed-management-homepage-dashboard-slot",
+      "component": "bedManagementDashboard"
+    },
+    {
+      "name": "form-builder-dashboard-content",
+      "slot": "form-builder-homepage-dashboard-slot",
+      "component": "formBuilderDashboard"
+    },
+    {
+      "name": "billing-management-dashboard-content",
+      "slot": "billing-management-homepage-dashboard-slot",
+      "component": "billingManagementDashboard"
+    },
+    {
+      "name": "system-info-management-dashboard-content",
+      "slot": "system-info-management-homepage-dashboard-slot",
+      "component": "systemInfoDashboard"
+    }
+  ],
+  "workspaces": [
+       {
+      "name": "service-queues-service-form",
+      "title": "addNewQueueService",
+      "component": "addNewQueueServiceWorkspace",
+      "type": "service-queues"
+    },
+    {
+      "name": "service-queues-room-workspace",
+      "title": "addNewQueueServiceRoom",
+      "component": "addNewQueueServiceRoomWorkspace",
+      "type": "service-queues"
+    },{
+      "name": "add-location-workspace",
+      "title": "addNewLocationWorkspace",
+      "component": "addNewLocationWorkspace",
+      "type": "location-management"
+    },{
+      "name": "search-location-workspace",
+      "title": "searchLocationWorkspace",
+      "component": "searchLocationWorkspace",
+      "type": "location-management"
+    },{
+      "name": "payment-mode-workspace",
+      "title": "paymentModeWorkspace",
+      "component": "paymentModeWorkspace",
+      "type": "billing-management"
+    },{
+      "name": "payment-point-workspace",
+      "title": "paymentPointWorkspace",
+      "component": "paymentPointWorkspace",
+      "type": "billing-management"
+    },{
+      "name": "billing-charge-service-workspace",
+      "title": "addServiceItem",
+      "component": "billableServiceForm",
+      "type": "billing-management"
+    },{
+      "name": "billing-charge-item-workspace",
+      "title": "addCommodityItem",
+      "component": "commodityForm",
+      "type": "billing-management"
+    }
+  ],
+  "modals": [
+    {
+      "name": "delete-payment-mode-modal",
+      "component": "deletePaymentModeModal"
+    },
+    {
+      "name": "delete-payment-point-modal",
+      "component": "deletePaymentPointModal"
+    },
+    {
+      "name": "delete-billable-service-modal",
+      "component": "deleteBillableService"
+    }
+  ]
+}

package/src/setup-tests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/src/system-info/system-info.component.tsx

@@ -0,0 +1,338 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { formatDatetime } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import styles from './system-info.scss';
+import { useFrontendModules, useModules } from './system-info.resource';
+import {
+  ChevronDown,
+  ChevronUp,
+  Package,
+  Search,
+  CheckmarkFilled,
+  WarningAlt,
+  ArrowUp,
+  Renew,
+} from '@carbon/react/icons';
+import { IconButton, InlineLoading, SkeletonText } from '@carbon/react';
+const packageInfo = require('../../release-version.js');
+
+const compareVersions = (v1: string, v2: string): number => {
+  const parts1 = v1.replace(/^v/, '').split('.').map(Number);
+  const parts2 = v2.replace(/^v/, '').split('.').map(Number);
+
+  for (let i = 0; i < Math.max(parts1.length, parts2.length); i++) {
+    const part1 = parts1[i] || 0;
+    const part2 = parts2[i] || 0;
+
+    if (part1 > part2) {
+      return 1;
+    }
+    if (part1 < part2) {
+      return -1;
+    }
+  }
+  return 0;
+};
+
+const SystemInfoDashboard: React.FC = () => {
+  const { t } = useTranslation();
+  const { modules, isLoading } = useModules();
+  const kenyaEMR = modules.find(({ uuid }) => uuid === 'kenyaemr');
+  const { VERSION } = packageInfo;
+  const installedModules = useFrontendModules();
+
+  const [showModules, setShowModules] = useState(true);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [moduleVersions, setModuleVersions] = useState<Record<string, any>>({});
+  const [isCheckingVersions, setIsCheckingVersions] = useState(false);
+  const [hasCheckedOnMount, setHasCheckedOnMount] = useState(false);
+
+  const checkModuleVersions = useCallback(async () => {
+    if (installedModules.length === 0) {
+      return;
+    }
+
+    setIsCheckingVersions(true);
+    const versions: Record<string, any> = {};
+
+    for (const module of installedModules) {
+      try {
+        const packageName = module.fullName || module.name;
+
+        const response = await fetch(`https://registry.npmjs.org/${packageName}/latest`, {
+          signal: AbortSignal.timeout(5000),
+        });
+
+        if (response.ok) {
+          const data = await response.json();
+          versions[module.name] = {
+            latest: data.version,
+            packageName: packageName,
+            error: null,
+          };
+        } else {
+          versions[module.name] = {
+            latest: null,
+            error: 'Not found in registry',
+          };
+        }
+      } catch (err) {
+        versions[module.name] = {
+          latest: null,
+          error: 'Unable to check',
+        };
+      }
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    }
+
+    setModuleVersions(versions);
+    setIsCheckingVersions(false);
+  }, [installedModules]);
+
+  useEffect(() => {
+    if (installedModules.length > 0 && !hasCheckedOnMount) {
+      setHasCheckedOnMount(true);
+      checkModuleVersions();
+    }
+  }, [installedModules.length, hasCheckedOnMount, checkModuleVersions]);
+
+  const filteredModules = installedModules.filter((module) =>
+    module.name.toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
+  const getModuleStatus = (moduleName: string, currentVersion: string) => {
+    const versionInfo = moduleVersions[moduleName];
+
+    if (!versionInfo || !versionInfo.latest) {
+      return null;
+    }
+
+    const comparison = compareVersions(currentVersion, versionInfo.latest);
+
+    return { comparison, latestVersion: versionInfo.latest };
+  };
+
+  const updateStats = installedModules.reduce(
+    (acc, module) => {
+      const status = getModuleStatus(module.name, module.version);
+      if (status) {
+        if (status.comparison < 0) {
+          acc.outdated++;
+        } else if (status.comparison === 0) {
+          acc.upToDate++;
+        } else {
+          acc.ahead++;
+        }
+      }
+      return acc;
+    },
+    { outdated: 0, upToDate: 0, ahead: 0 },
+  );
+
+  const handleToggleModules = () => {
+    setShowModules(!showModules);
+  };
+
+  const handleKeyDownToggle = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleToggleModules();
+    }
+  };
+
+  return (
+    <div className={styles.main}>
+      <div className={styles.aboutPage}>
+        <div className={styles.container}>
+          <div className={styles.title}>
+            <h3>{t('SystemInformation', 'System Information')}</h3>
+          </div>
+          <div className={styles.aboutBody}>
+            <p>DigiHMIS Version</p>
+            <p>{`v${kenyaEMR?.version}`}</p>
+            <p>SPA Version</p>
+            <p>{`v${VERSION.version}`}</p>
+            <p>{t('BuildDateTime', 'Build date time')}</p>
+            <p>{formatDatetime(new Date(VERSION.buildDate), { mode: 'standard' })}</p>
+          </div>
+        </div>
+      </div>
+
+      <div className={styles.aboutPage}>
+        <div className={styles.container}>
+          <div
+            className={styles.cardHeader}
+            onClick={handleToggleModules}
+            onKeyDown={handleKeyDownToggle}
+            role="button"
+            tabIndex={0}
+            aria-expanded={showModules}
+            aria-controls="module-list-content">
+            <div className={styles.cardHeaderContent}>
+              <Package size={20} />
+              <h3>Installed Frontend Modules</h3>
+              <span className={styles.badge}>{installedModules.length}</span>
+              {isCheckingVersions && <span className={styles.checkingStatus}>Checking for updates...</span>}
+              {!isCheckingVersions && updateStats.outdated > 0 && (
+                <span className={styles.updatesAvailable}>
+                  {updateStats.outdated} update{updateStats.outdated !== 1 ? 's' : ''} available
+                </span>
+              )}
+            </div>
+            <div className={styles.cardHeaderActions}>
+              <IconButton
+                size="sm"
+                kind="ghost"
+                align="bottom"
+                label={t('checkForUpdates', 'Check for updates')}
+                disabled={isCheckingVersions}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  checkModuleVersions();
+                }}>
+                {isCheckingVersions ? <InlineLoading /> : <Renew />}
+              </IconButton>
+              {showModules ? <ChevronUp size={20} /> : <ChevronDown size={20} />}
+            </div>
+          </div>
+
+          {showModules && (
+            <div className={styles.cardBody} id="module-list-content">
+              <div className={styles.searchContainer}>
+                <Search size={16} className={styles.searchIcon} />
+                <input
+                  type="text"
+                  placeholder={t('searchModules', 'Search modules...')}
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className={styles.searchInput}
+                />
+                {searchTerm && (
+                  <button
+                    onClick={() => setSearchTerm('')}
+                    className={styles.clearButton}
+                    aria-label={t('clearSearch', 'Clear search')}>
+                    ×
+                  </button>
+                )}
+              </div>
+
+              <div className={styles.moduleList}>
+                {isCheckingVersions && Object.keys(moduleVersions).length === 0 ? (
+                  Array.from({ length: Math.min(5, installedModules.length) }).map((_, index) => (
+                    <div key={index} className={styles.moduleItem}>
+                      <div className={styles.moduleInfo}>
+                        <Package size={16} className={styles.moduleIcon} />
+                        <SkeletonText width="60%" />
+                      </div>
+                      <div className={styles.statusIndicator}>
+                        <SkeletonText width="50px" />
+                      </div>
+                    </div>
+                  ))
+                ) : filteredModules.length > 0 ? (
+                  filteredModules.map((module, index) => {
+                    const status = getModuleStatus(module.name, module.version);
+                    const isLoadingThisModule = isCheckingVersions && !moduleVersions[module.name];
+
+                    return (
+                      <div key={index} className={styles.moduleItem}>
+                        <div className={styles.moduleInfo}>
+                          <Package size={16} className={styles.moduleIcon} />
+                          <span className={styles.moduleName}>{module.name}</span>
+                        </div>
+                        <div className={styles.statusIndicator}>
+                          <span className={styles.moduleVersion}>v{module.version}</span>
+                          {isLoadingThisModule ? (
+                            <InlineLoading description="" />
+                          ) : (
+                            status && (
+                              <>
+                                {status.comparison === 0 && (
+                                  <CheckmarkFilled
+                                    size={16}
+                                    className={styles.statusIconUpToDate}
+                                    title={t('upToDate', 'Up to date')}
+                                  />
+                                )}
+                                {status.comparison < 0 && (
+                                  <div className={styles.statusIndicator}>
+                                    <ArrowUp
+                                      size={16}
+                                      className={styles.statusIconUpdate}
+                                      title={t('updateAvailable', 'Update available: v{{version}}', {
+                                        version: status.latestVersion,
+                                      })}
+                                    />
+                                    <span className={styles.latestVersion}>v{status.latestVersion}</span>
+                                  </div>
+                                )}
+                                {status.comparison > 0 && (
+                                  <WarningAlt
+                                    size={16}
+                                    className={styles.statusIconAhead}
+                                    title={t('aheadOfPublishedVersion', 'Ahead of published version')}
+                                  />
+                                )}
+                              </>
+                            )
+                          )}
+                        </div>
+                      </div>
+                    );
+                  })
+                ) : (
+                  <div className={styles.emptyState}>
+                    <Package size={32} />
+                    <p>{t('noModulesFound', "No modules found matching '{{searchTerm}}'", { searchTerm })}</p>
+                  </div>
+                )}
+              </div>
+
+              {searchTerm && filteredModules.length > 0 && (
+                <div className={styles.moduleSummary}>
+                  {t('showingModules', 'Showing {{count}} of {{total}} modules', {
+                    count: filteredModules.length,
+                    total: installedModules.length,
+                  })}
+                </div>
+              )}
+
+              {!searchTerm && !isCheckingVersions && Object.keys(moduleVersions).length > 0 && (
+                <div className={styles.moduleSummary}>
+                  {updateStats.upToDate > 0 && `${updateStats.upToDate} up to date`}
+                  {updateStats.upToDate > 0 && updateStats.outdated > 0 && ' • '}
+                  {updateStats.outdated > 0 &&
+                    `${updateStats.outdated} update${updateStats.outdated !== 1 ? 's' : ''} available`}
+                  {(updateStats.upToDate > 0 || updateStats.outdated > 0) && updateStats.ahead > 0 && ' • '}
+                  {updateStats.ahead > 0 && `${updateStats.ahead} ahead`}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className={styles.aboutPage}>
+        <div className={styles.container}>
+          <div className={styles.aboutBodyContact}>
+            <p>{t('AboutDigiHMIS', 'Made with ❤️ by the DigiHMIS Team')}</p>
+            <br />
+            <p>
+              {t('officialWebsite', 'Official Website:')} <a href="https://www.digihmis.org">www.digihmis.org</a>
+            </p>
+            <br />
+            <p>
+              {t('supportContact', 'For support, please contact us at')}{' '}
+              <a href="mailto:support@digihmis.org">support@digihmis.org</a>
+            </p>
+            <br />
+            <p>{t('telephoneSupport', 'Telephone Support:')} +254 707 000 000</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SystemInfoDashboard;

package/src/system-info/system-info.resource.ts

@@ -0,0 +1,40 @@
+import { OpenmrsResource, openmrsFetch } from '@openmrs/esm-framework';
+import { useMemo } from 'react';
+import useSWRImmutable from 'swr/immutable';
+import { FrontendModule } from '../type';
+
+interface Modules extends OpenmrsResource {
+  version: string;
+  name: string;
+}
+
+export function useModules() {
+  const { data, isLoading } = useSWRImmutable<{ data: { results: Array<Modules> } }>(
+    'ws/rest/v1/module?v=custom:(uuid,name,version)',
+    openmrsFetch,
+  );
+
+  return { modules: data?.data?.results ?? [], isLoading };
+}
+
+export function useFrontendModules() {
+  return useMemo<Array<FrontendModule>>(() => {
+    return (window.installedModules ?? [])
+      .filter((module) => Boolean(module) && Boolean(module[1]))
+      .map((module) => {
+        const fullName = module[0];
+        const version = module[1].version;
+
+        const firstSlash = fullName.indexOf('/');
+        const orgName = firstSlash > 0 ? fullName.substring(0, firstSlash) : null;
+        const moduleName = firstSlash > 0 ? fullName.substring(firstSlash + 1) : fullName;
+
+        return {
+          version,
+          name: moduleName,
+          fullName,
+          org: orgName,
+        };
+      });
+  }, []);
+}