@kenyaemr/esm-admin-app 5.4.2-pre.2269 → 5.4.2-pre.2272

package/src/components/locations/hooks/useLocation.ts

@@ -0,0 +1,24 @@
+import { restBaseUrl, openmrsFetch } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+
+export const saveLocation = async (locationPayload) => {
+  const url = `${restBaseUrl}/location`;
+  return await openmrsFetch(url, {
+    method: 'POST',
+    body: locationPayload,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};
+
+export const editLocation = async (locationUuid, locationPayload) => {
+  const url = `${restBaseUrl}/location/${locationUuid}`;
+  return await openmrsFetch(url, {
+    method: 'POST',
+    body: locationPayload,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};

package/src/components/locations/hooks/useLocationTags.ts

@@ -0,0 +1,15 @@
+import { type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { type LocationTagsResponse } from '../types/index';
+
+export const useLocationTags = () => {
+  const customPresentation = 'custom:(uuid,display,name,description)';
+  const url = `${restBaseUrl}/locationtag?v=${customPresentation}`;
+  const { isLoading, error, data } = useSWR<FetchResponse<LocationTagsResponse>>(url, openmrsFetch);
+
+  return {
+    isLoading,
+    error,
+    locationTagList: data?.data?.results || [],
+  };
+};

package/src/components/locations/tables/locations-table.component.tsx

@@ -0,0 +1,243 @@
+import React, { useMemo, useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  InlineLoading,
+  Pagination,
+  Search,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+  Tag,
+} from '@carbon/react';
+import { Add } from '@carbon/react/icons';
+import { WorkspaceContainer, isDesktop as desktopLayout, launchWorkspace, useLayoutType } from '@openmrs/esm-framework';
+import styles from './locations-table.scss';
+import { CardHeader } from '@openmrs/esm-patient-common-lib';
+import { useFacilitiesTagged } from './locations-table.resource';
+import { useLocationTags } from '../hooks/useLocationTags';
+
+const LocationsTable: React.FC = () => {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+  const isTablet = layout === 'tablet';
+  const isDesktop = desktopLayout(layout);
+  const [pageSize, setPageSize] = useState(10);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const { locationTagList, isLoading: tagsLoading, error: tagsError } = useLocationTags();
+  const { facilityList, isLoading: taggedLoading } = useFacilitiesTagged({ results: locationTagList });
+
+  const handleAddLocationWorkspace = () => {
+    launchWorkspace('add-location-workspace', {
+      workspaceTitle: t('addLocation', 'Add Location'),
+    });
+  };
+
+  const handleSearchLocationWorkspace = () => {
+    launchWorkspace('search-location-workspace', {
+      workspaceTitle: t('tagLocation', 'Tag Location'),
+    });
+  };
+
+  const tableHeaders = [
+    {
+      key: 'name',
+      header: t('locationName', 'Location Name'),
+    },
+    {
+      key: 'description',
+      header: t('description', 'Description'),
+    },
+    {
+      key: 'tags',
+      header: t('tags', 'Tags'),
+    },
+  ];
+
+  const getLocationTags = (resource) => {
+    if (!resource?.meta?.tag) {
+      return [];
+    }
+
+    return resource.meta.tag.filter((tag) => tag.system && tag.system.includes('location-tag')).map((tag) => tag.code);
+  };
+
+  const rows = useMemo(() => {
+    const uniqueFacilities = new Map();
+
+    facilityList.forEach((facility) => {
+      const resource = facility.resource;
+      const uuid = resource?.id;
+
+      if (uuid && !uniqueFacilities.has(uuid)) {
+        uniqueFacilities.set(uuid, facility);
+      }
+    });
+
+    return Array.from(uniqueFacilities.values()).map((facility) => {
+      const resource = facility.resource;
+      const tags = getLocationTags(resource);
+
+      return {
+        id: resource?.id,
+        name: resource?.name || resource?.partOf?.display || '--',
+        description: resource?.description || '--',
+        tags: tags.length > 0 ? tags.join(', ') : '--',
+      };
+    });
+  }, [facilityList]);
+
+  const filteredRows = useMemo(() => {
+    if (!searchTerm) {
+      return rows;
+    }
+
+    return rows.filter(
+      (row) =>
+        row.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        row.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        row.tags.toLowerCase().includes(searchTerm.toLowerCase()),
+    );
+  }, [rows, searchTerm]);
+
+  const paginatedRows = useMemo(() => {
+    const startIndex = (currentPage - 1) * pageSize;
+    const endIndex = startIndex + pageSize;
+    return filteredRows.slice(startIndex, endIndex);
+  }, [filteredRows, currentPage, pageSize]);
+
+  if (tagsLoading || (taggedLoading && !facilityList.length)) {
+    return (
+      <>
+        <div className={styles.widgetCard}>
+          <DataTableSkeleton role="progressbar" compact={isDesktop} zebra />
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <div className={styles.widgetCard}>
+        <CardHeader title={t('locations', 'Locations')}>
+          <span className={styles.backgroundDataFetchingIndicator}>
+            <span>{tagsLoading ? <InlineLoading /> : null}</span>
+          </span>
+          <div className={styles.headerActions}>
+            <>
+              <div className={styles.filterContainer}>
+                <Search
+                  onChange={(e) => {
+                    setSearchTerm(e.target.value);
+                    setCurrentPage(1);
+                  }}
+                  placeholder={t('search', 'Search location')}
+                  value={searchTerm}
+                  labelText={t('search', 'Search location')}
+                />
+              </div>
+              <Button
+                kind="ghost"
+                renderIcon={(props) => <Add size={16} {...props} />}
+                onClick={handleAddLocationWorkspace}>
+                {t('addLocation', 'Add Location')}
+              </Button>
+              <Button
+                kind="ghost"
+                renderIcon={(props) => <Add size={16} {...props} />}
+                onClick={handleSearchLocationWorkspace}>
+                {t('tagLocation', 'Tag Location')}
+              </Button>
+            </>
+          </div>
+        </CardHeader>
+
+        <DataTable rows={paginatedRows} headers={tableHeaders} isSortable size={isTablet ? 'lg' : 'sm'} useZebraStyles>
+          {({ rows, headers, getTableProps }) => {
+            return (
+              <TableContainer>
+                <Table {...getTableProps()}>
+                  <TableHead>
+                    <TableRow>
+                      {headers.map((header) => (
+                        <TableHeader key={header.key}>{header.header}</TableHeader>
+                      ))}
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {rows.map((row) => (
+                      <TableRow key={row.id}>
+                        {row.cells.map((cell) => (
+                          <TableCell key={cell.id}>
+                            {cell.id.includes('tags') && cell.value !== 'No tags' ? (
+                              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px' }}>
+                                {cell.value.split(', ').map((tag, index) => (
+                                  <Tag key={index} type="blue" size="sm">
+                                    {tag}
+                                  </Tag>
+                                ))}
+                              </div>
+                            ) : (
+                              cell.value
+                            )}
+                          </TableCell>
+                        ))}
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+                {rows.length === 0 ? (
+                  <div className={styles.tileContainer}>
+                    <Tile className={styles.tile}>
+                      <div className={styles.tileContent}>
+                        <p className={styles.content}>
+                          {searchTerm
+                            ? t('noSearchResults', `No results found for "${searchTerm}"`)
+                            : t('noData', 'No data to display')}
+                        </p>
+                        <p className={styles.helper}>
+                          {searchTerm
+                            ? t('tryDifferentSearch', 'Try a different search term')
+                            : t('checkFilters', 'Check the filters above')}
+                        </p>
+                      </div>
+                    </Tile>
+                  </div>
+                ) : null}
+                <Pagination
+                  backwardText="Previous page"
+                  forwardText="Next page"
+                  page={currentPage}
+                  pageSize={pageSize}
+                  pageSizes={[10, 20, 30, 40, 50]}
+                  totalItems={filteredRows.length}
+                  onChange={({ pageSize: newPageSize, page }) => {
+                    if (newPageSize !== pageSize) {
+                      setPageSize(newPageSize);
+                      setCurrentPage(1);
+                    }
+                    if (page !== currentPage) {
+                      setCurrentPage(page);
+                    }
+                  }}
+                />
+              </TableContainer>
+            );
+          }}
+        </DataTable>
+      </div>
+      <WorkspaceContainer contextKey="locations" />
+    </>
+  );
+};
+
+export default LocationsTable;

package/src/components/locations/tables/locations-table.resource.ts

@@ -0,0 +1,41 @@
+import { FetchResponse, fhirBaseUrl, openmrsFetch } from '@openmrs/esm-framework';
+import { type FHIRBundle, FHIRLocation, LocationTagsResponse } from '../types';
+import useSWR from 'swr';
+
+/**
+ * Fetches facilities that are tagged with any of the specified location tags.
+ *
+ * @param locationTags The location tags to filter facilities by
+ * @returns A promise that resolves to the data object containing the matching FHIR locations
+ * @throws {Error} If the API request fails
+ */
+export async function getFacilitiesByLocationTags(
+  locationTags: LocationTagsResponse,
+): Promise<{ results: Array<FHIRLocation> }> {
+  const tagNames = locationTags.results
+    .map((tag) => encodeURIComponent(tag.name || tag.display))
+    .filter(Boolean)
+    .join(',');
+
+  const url = `${fhirBaseUrl}/Location?_summary=data&_tag=${tagNames}`;
+  const response = await openmrsFetch<FHIRBundle>(url);
+
+  const locations = response.data?.entry?.map((entry) => entry.resource) ?? [];
+
+  return { results: locations };
+}
+
+export const useFacilitiesTagged = (locationTags: LocationTagsResponse) => {
+  const tagNames = locationTags.results
+    .map((tag) => encodeURIComponent(tag.name || tag.display))
+    .filter(Boolean)
+    .join(',');
+  const url = `${fhirBaseUrl}/Location?_summary=data&_tag=${tagNames}`;
+  const { isLoading, error, data } = useSWR<FetchResponse<FHIRBundle>>(url, openmrsFetch);
+
+  return {
+    isLoading,
+    error,
+    facilityList: data?.data?.entry || [],
+  };
+};

package/src/components/locations/tables/locations-table.scss

@@ -0,0 +1,115 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.widgetCard {
+  background-color: colors.$white-0;
+  border: 1px solid colors.$gray-20;
+  margin-bottom: layout.$spacing-06;
+  margin-right: layout.$spacing-03;
+  margin-left: layout.$spacing-05;
+}
+.expandedRow {
+  background-color: colors.$white-0;
+  border: 1px solid colors.$gray-20;
+  margin-bottom: layout.$spacing-06;
+  margin-right: layout.$spacing-03;
+  margin-left: layout.$spacing-05;
+}
+.flexContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: layout.$spacing-05;
+}
+
+.filterContainer {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-05;
+}
+
+.headerActions {
+  display: flex;
+  gap: layout.$spacing-03;
+  align-items: center;
+}
+
+.filterContainer {
+  flex: 1;
+
+  :global(.cds--dropdown__wrapper--inline) {
+    gap: 0;
+  }
+
+  :global(.cds--list-box__menu-icon) {
+    height: layout.$spacing-05;
+  }
+}
+
+.backgroundDataFetchingIndicator {
+  align-items: center;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.tileContainer {
+  background-color: colors.$white-0;
+  border-top: 1px solid colors.$gray-20;
+  padding: layout.$spacing-09 0;
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-70;
+  margin-bottom: layout.$spacing-03;
+}
+
+.helper {
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-70;
+}
+
+.separator {
+  @include type.type-style('body-compact-02');
+  color: colors.$gray-70;
+  width: 80%;
+  margin: layout.$spacing-06 auto;
+  overflow: hidden;
+  text-align: center;
+
+  &::before,
+  &::after {
+    background-color: colors.$gray-40;
+    content: '';
+    display: inline-block;
+    height: 1px;
+    position: relative;
+    vertical-align: middle;
+    width: 50%;
+  }
+
+  &::before {
+    right: layout.$spacing-03;
+    margin-left: -50%;
+  }
+
+  &::after {
+    left: layout.$spacing-03;
+    margin-right: -50%;
+  }
+}

package/src/components/locations/types/index.ts

@@ -0,0 +1,120 @@
+export interface AdmissionLocationResponse {
+  uuid: string;
+  wardName: string;
+  totalBeds: number;
+  occupiedBeds: number;
+  availableBeds: number;
+  ward: {
+    uuid: string;
+    display: string;
+    name: string;
+    tags: Array<{
+      uuid: string;
+      display: string;
+    }>;
+    parentLocation: {
+      uuid: string;
+      display: string;
+    };
+  };
+}
+
+export interface LocationTagsResponse {
+  results: Array<{
+    uuid: string;
+    display: string;
+    name: string;
+    description: string;
+  }>;
+}
+
+// OpenMRS format (legacy)
+export interface LocationResponse {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  stateProvince: string;
+  country: string;
+  countyDistrict: string;
+  address5: string;
+  address6: string;
+  tags: Array<{
+    uuid: string;
+    display: string;
+    name: string;
+    description: string;
+  }>;
+  attributes: Array<{
+    display: string;
+    uuid: string;
+    attributeType: {
+      uuid: string;
+      display: string;
+    };
+    value: string;
+  }>;
+}
+
+export interface FHIRLocation {
+  resourceType: 'Location';
+  id: string;
+  meta?: {
+    versionId?: string;
+    lastUpdated?: string;
+    tag?: Array<{
+      system: string;
+      code: string;
+      display: string;
+    }>;
+  };
+  status: string;
+  name: string;
+  description?: string;
+  address?: {
+    extension?: Array<{
+      url: string;
+      extension?: Array<{
+        url: string;
+        valueString: string;
+      }>;
+    }>;
+    line?: string[];
+    city?: string;
+    district?: string;
+    state?: string;
+    country?: string;
+  };
+  identifier?: Array<{
+    system: string;
+    value: string;
+  }>;
+  partOf?: {
+    reference: string;
+    type: string;
+    display: string;
+  };
+}
+
+export interface FHIRBundle {
+  resourceType: 'Bundle';
+  id: string;
+  meta?: {
+    lastUpdated?: string;
+    tag?: Array<{
+      system: string;
+      code: string;
+      display: string;
+    }>;
+  };
+  type: string;
+  total?: number;
+  link?: Array<{
+    relation: string;
+    url: string;
+  }>;
+  entry?: Array<{
+    fullUrl: string;
+    resource: FHIRLocation;
+  }>;
+}

package/src/components/locations/utils/index.ts

@@ -0,0 +1,5 @@
+import { makeUrl } from '@openmrs/esm-framework';
+
+export function makeUrlUrl(path: string) {
+  return new URL(makeUrl(path), window.location.toString());
+}

package/src/index.ts

@@ -9,6 +9,8 @@ import HWRConfirmModal from './components/modal/hwr-confirmation.modal';
 import HWREmptyModal from './components/modal/hwr-empty.modal.component';
 import UserRoleScopeWorkspace from './components/users/manage-users/manage-user-role-scope/user-role-scope-workspace/user-role-scope.workspace';
 import HWRSyncModal from './components/modal/hwr-sync.modal';
+import AddLocationWorkspace from './components/locations/forms/add-location/add-location.workspace';
+import SearchLocationWorkspace from './components/locations/forms/search-location/search-location.workspace';
 
 const options = {
   featureName: 'esm-admin-app',
@@ -36,6 +38,10 @@ export const etlAdministrationLeftPannelLink = getSyncLifecycle(
   createLeftPanelLink({ title: 'ETL Administration', name: 'etl-administration' }),
   options,
 );
+export const locationsLeftPanelLink = getSyncLifecycle(
+  createLeftPanelLink({ title: 'Locations', name: 'locations' }),
+  options,
+);
 export const facilitySetupLeftPanelLink = getSyncLifecycle(
   createLeftPanelLink({ title: 'Facility Details', name: 'facility-setup' }),
   options,
@@ -44,3 +50,6 @@ export const facilitySetupLeftPanelLink = getSyncLifecycle(
 export const hwrConfirmationModal = getSyncLifecycle(HWRConfirmModal, options);
 export const hwrEmptyModal = getSyncLifecycle(HWREmptyModal, options);
 export const hwrSyncModal = getSyncLifecycle(HWRSyncModal, options);
+
+export const addLocation = getSyncLifecycle(AddLocationWorkspace, options);
+export const searchLocationWorkspace = getSyncLifecycle(SearchLocationWorkspace, options);

package/src/root.component.tsx

@@ -6,6 +6,7 @@ import LeftPanel from './components/side-menu/left-pannel.component';
 import UserManagentLandingPage from './components/users/manage-users/manage-user.component';
 import EtlAdminDashboard from './components/dashboard/etl-dashboard.component';
 import FacilitySetup from './components/facility-setup/facility-setup.component';
+import HomeComponent from './components/locations/home/home-locations.component';
 
 const Root: React.FC = () => {
   const spaBasePath = window.spaBase;
@@ -28,6 +29,7 @@ const Root: React.FC = () => {
           <Route path="/user-management" element={<UserManagentLandingPage />} />
           <Route path="/etl-administration" element={<EtlAdminDashboard />} />
           <Route path="/facility-setup" element={<FacilitySetup />} />
+          <Route path="/locations" element={<HomeComponent />} />
         </Routes>
       </main>
     </BrowserRouter>

package/src/routes.json

@@ -13,10 +13,10 @@
       "component": "userManagementLeftPannelLink",
       "name": "user-management-left-panel-link",
       "slot": "admin-left-panel-slot"
-    },
+    }, 
     {
-      "component": "etlAdministrationLeftPannelLink",
-      "name": "etl-administration-left-panel-link",
+      "component": "locationsLeftPanelLink",
+      "name": "locations-left-panel-link",
       "slot": "admin-left-panel-slot"
     },
     {
@@ -41,6 +41,30 @@
       "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": [