@digihmis/esm-administration-app 1.0.0

package/src/location-management/tables/locations-table.component.tsx

@@ -0,0 +1,242 @@
+import React, { useMemo, useState } 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 { 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 } = 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>
+    </>
+  );
+};
+
+export default LocationsTable;

package/src/location-management/tables/locations-table.resource.ts

@@ -0,0 +1,26 @@
+import { useFhirFetchAll } from '@openmrs/esm-framework';
+import { type FHIRLocation, type LocationTagsResponse } from '../types';
+
+/**
+ * Custom hook that fetches all facilities with specified location tags.
+ * Uses the framework's useFhirFetchAll hook which handles pagination automatically.
+ *
+ * @param locationTags The location tags response containing tags to filter by
+ * @returns Object containing loading state, error, and the list of facilities
+ */
+export const useFacilitiesTagged = (locationTags: LocationTagsResponse) => {
+  const tagNames = locationTags?.results
+    ?.map((tag) => encodeURIComponent(tag.name || tag.display))
+    .filter(Boolean)
+    .join(',');
+
+  const url = tagNames ? `ws/fhir2/R4/Location?_summary=data&_tag=${tagNames}` : null;
+
+  const { data, isLoading, error } = useFhirFetchAll<FHIRLocation>(url);
+
+  return {
+    isLoading,
+    error,
+    facilityList: data?.map((resource) => ({ resource })) || [],
+  };
+};

package/src/location-management/tables/locations-table.scss

@@ -0,0 +1,114 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.widgetCard {
+  border: 1px solid colors.$gray-20;
+  margin-bottom: layout.$spacing-06;
+  margin-right: layout.$spacing-03;
+  margin-left: layout.$spacing-05;
+  margin-top: layout.$spacing-06;
+  background: var(--cds-field);
+}
+.expandedRow {
+  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 {
+  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/location-management/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/queue-management/queue-management-dashboard.component.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { ExtensionSlot, useConfig } from '@openmrs/esm-framework';
+import styles from './queue-management-dashboard.scss';
+import { CustomPageHeader } from '../components/custom-page-header/custom-page-header.component';
+import { ConfigObject } from '../config-schema';
+import { useTranslation } from 'react-i18next';
+import QueueManagementTable from './queue-management-table/queue-management-table.component';
+
+const QueueManagementDashboard: React.FC = () => {
+  const { t } = useTranslation();
+  const { queueManagementIcon } = useConfig<ConfigObject>();
+
+  return (
+    <div>
+      <div className={styles.dashboardContainer}>
+        <CustomPageHeader subTitle={t('manageQueues', 'Manage queues and rooms')} iconSrc={queueManagementIcon.src} />
+      </div>
+      <QueueManagementTable />
+    </div>
+  );
+};
+
+export default QueueManagementDashboard;

package/src/queue-management/queue-management-dashboard.scss

@@ -0,0 +1,8 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.menu {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}