@openmrs/esm-bed-management-app 7.1.1-pre.3735

package/src/bed-administration/bed-administration-form.component.tsx

@@ -0,0 +1,292 @@
+import React, { useState } from 'react';
+import capitalize from 'lodash-es/capitalize';
+import { z } from 'zod';
+import { useForm, Controller } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  Button,
+  ComboBox,
+  ComposedModal,
+  Form,
+  FormGroup,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  NumberInput,
+  Select,
+  SelectItem,
+  Stack,
+  TextArea,
+  TextInput,
+  InlineNotification,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { type Location } from '@openmrs/esm-framework';
+import type { BedType, BedFormData } from '../types';
+import { type BedAdministrationData } from './bed-administration-types';
+
+const numberInString = z.string().transform((val, ctx) => {
+  const parsed = parseInt(val);
+  if (isNaN(parsed) || parsed < 1) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: 'Please enter a valid number',
+    });
+    return z.NEVER;
+  }
+  return val;
+});
+
+const BedAdministrationSchema = z.object({
+  bedId: z.string().max(255),
+  description: z.string().max(255),
+  bedRow: numberInString,
+  bedColumn: numberInString,
+  location: z
+    .object({ display: z.string(), uuid: z.string() })
+    .refine((value) => value.display != '', 'Please select a valid location'),
+  occupancyStatus: z.string().refine((value) => value != '', 'Please select a valid occupied status'),
+  bedType: z.string().refine((value) => value != '', 'Please select a valid bed type'),
+});
+
+interface BedAdministrationFormProps {
+  showModal: boolean;
+  onModalChange: (showModal: boolean) => void;
+  availableBedTypes: Array<BedType>;
+  allLocations: Location[];
+  handleCreateQuestion?: (formData: BedAdministrationData) => void;
+  headerTitle: string;
+  occupancyStatuses: string[];
+  initialData: BedFormData;
+}
+
+interface ErrorType {
+  message: string;
+}
+
+const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
+  showModal,
+  onModalChange,
+  availableBedTypes,
+  allLocations,
+  handleCreateQuestion,
+  headerTitle,
+  occupancyStatuses,
+  initialData,
+}) => {
+  const { t } = useTranslation();
+  const [occupancyStatus, setOccupancyStatus] = useState(capitalize(initialData.status));
+  const [selectedBedType] = useState(initialData.bedType?.name ?? '');
+  const [showErrorNotification, setShowErrorNotification] = useState(false);
+  const [formStateError, setFormStateError] = useState('');
+
+  const filterLocationNames = (location) => {
+    return location.item.display?.toLowerCase().includes(location?.inputValue?.toLowerCase()) ?? [];
+  };
+
+  const {
+    handleSubmit,
+    control,
+    formState: { isDirty },
+  } = useForm<BedAdministrationData>({
+    mode: 'all',
+    resolver: zodResolver(BedAdministrationSchema),
+    defaultValues: {
+      bedId: initialData.bedNumber ?? '',
+      description: initialData.bedType?.description ?? '',
+      bedRow: initialData.row.toString() ?? '0',
+      bedColumn: initialData.column.toString() ?? '0',
+      location: initialData.location ?? {},
+      occupancyStatus: capitalize(initialData.status) ?? occupancyStatus,
+      bedType: initialData.bedType?.name ?? '',
+    },
+  });
+
+  const onSubmit = (formData: BedAdministrationData) => {
+    const result = BedAdministrationSchema.safeParse(formData);
+    if (result.success) {
+      setShowErrorNotification(false);
+      handleCreateQuestion(formData);
+    }
+  };
+
+  const onError = (error: { [key: string]: ErrorType }) => {
+    setFormStateError(Object.entries(error)[0][1].message);
+    setShowErrorNotification(true);
+  };
+
+  return (
+    <ComposedModal open={showModal} onClose={() => onModalChange(false)} preventCloseOnClickOutside>
+      <ModalHeader title={headerTitle} />
+      <Form onSubmit={handleSubmit(onSubmit, onError)}>
+        <ModalBody hasScrollingContent>
+          <Stack gap={3}>
+            <FormGroup legendText={''}>
+              <Controller
+                name="bedId"
+                control={control}
+                render={({ field, fieldState }) => (
+                  <>
+                    <TextInput
+                      id="bedId"
+                      labelText={t('bedId', 'Bed number')}
+                      placeholder={t('bedIdPlaceholder', 'e.g. BMW-201')}
+                      invalidText={fieldState.error?.message}
+                      {...field}
+                    />
+                  </>
+                )}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <Controller
+                name="description"
+                control={control}
+                render={({ field, fieldState }) => (
+                  <>
+                    <TextArea
+                      rows={2}
+                      id="description"
+                      invalidText={fieldState?.error?.message}
+                      labelText={t('description', 'Bed description')}
+                      {...field}
+                      placeholder={t('description', 'Enter the bed description')}
+                    />
+                  </>
+                )}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <Controller
+                name="bedRow"
+                control={control}
+                render={({ fieldState, field }) => (
+                  <NumberInput
+                    hideSteppers
+                    id="bedRow"
+                    label="Bed row"
+                    labelText="Bed row"
+                    invalidText={fieldState?.error?.message}
+                    {...field}
+                  />
+                )}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <Controller
+                name="bedColumn"
+                control={control}
+                render={({ field, fieldState }) => (
+                  <NumberInput
+                    hideSteppers
+                    id="bedColumn"
+                    label="Bed column"
+                    labelText="Bed column"
+                    invalidText={fieldState.error?.message}
+                    {...field}
+                  />
+                )}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <Controller
+                name="location"
+                control={control}
+                render={({ fieldState, field: { onChange, onBlur, value, ref } }) => (
+                  <ComboBox
+                    aria-label={t('location', 'Location')}
+                    shouldFilterItem={filterLocationNames}
+                    id="location"
+                    label={t('location', 'Location')}
+                    invalidText={fieldState?.error?.message}
+                    items={allLocations}
+                    onBlur={onBlur}
+                    ref={ref}
+                    selectedItem={value}
+                    onChange={({ selectedItem }) => onChange(selectedItem)}
+                    itemToString={(location) => location?.display ?? ''}
+                    placeholder={t('selectBedLocation', 'Select a bed location')}
+                    titleText={t('bedLocation', 'Location')}
+                  />
+                )}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <Controller
+                name="occupancyStatus"
+                control={control}
+                render={({ field, fieldState }) => (
+                  <Select
+                    id="occupancyStatus"
+                    labelText={t('occupancyStatus', 'Occupied Status')}
+                    invalidText={fieldState.error?.message}
+                    defaultValue={occupancyStatus}
+                    onChange={(event) => setOccupancyStatus(event.target.value)}
+                    value={occupancyStatus}
+                    {...field}>
+                    <SelectItem text={t('chooseOccupiedStatus', 'Choose occupied status')} value="" />
+                    {occupancyStatuses.map((occupancyStatus, index) => (
+                      <SelectItem
+                        text={t('occupancyStatus', `${occupancyStatus}`)}
+                        value={t('occupancyStatus', `${occupancyStatus}`)}
+                        key={`occupancyStatus-${index}`}
+                      />
+                    ))}
+                  </Select>
+                )}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <Controller
+                name="bedType"
+                control={control}
+                render={({ field }) => (
+                  <Select
+                    id="bedType"
+                    labelText={t('bedType', 'Bed type')}
+                    invalidText={t('required', 'Required')}
+                    defaultValue={selectedBedType}
+                    {...field}>
+                    <SelectItem text={t('chooseBedtype', 'Choose a bed type')} />
+                    {availableBedTypes.map((bedType, index) => (
+                      <SelectItem text={bedType.name} value={bedType.name} key={`bedType-${index}`}>
+                        {bedType.name}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                )}
+              />
+            </FormGroup>
+            {showErrorNotification && (
+              <InlineNotification
+                lowContrast
+                title={t('error', 'Error')}
+                style={{ minWidth: '100%', margin: '0rem', padding: '0rem' }}
+                role="alert"
+                kind="error"
+                subtitle={t('pleaseFillField', formStateError) + '.'}
+                onClose={() => setShowErrorNotification(false)}
+              />
+            )}
+          </Stack>
+        </ModalBody>
+        <ModalFooter>
+          <Button onClick={() => onModalChange(false)} kind="secondary">
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button disabled={!isDirty} type="submit">
+            <span>{t('save', 'Save')}</span>
+          </Button>
+        </ModalFooter>
+      </Form>
+    </ComposedModal>
+  );
+};
+
+export default BedAdministrationForm;

package/src/bed-administration/bed-administration-table.component.tsx

@@ -0,0 +1,258 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  Dropdown,
+  InlineLoading,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tag,
+  Tile,
+} from '@carbon/react';
+import { Add, Edit } from '@carbon/react/icons';
+import { ErrorState, isDesktop as desktopLayout, useLayoutType, usePagination } from '@openmrs/esm-framework';
+import type { BedFormData } from '../types';
+import { useBedsGroupedByLocation } from '../summary/summary.resource';
+import EditBedForm from './edit-bed-form.component';
+import Header from '../header/header.component';
+import NewBedForm from './new-bed-form.component';
+import styles from './bed-administration-table.scss';
+import { CardHeader } from '../card-header/card-header.component';
+
+const BedAdministrationTable: React.FC = () => {
+  const { t } = useTranslation();
+  const headerTitle = t('wardAllocation', 'Ward Allocation');
+  const layout = useLayoutType();
+  const isTablet = layout === 'tablet';
+  const responsiveSize = isTablet ? 'lg' : 'sm';
+  const isDesktop = desktopLayout(layout);
+
+  const {
+    data: wardsGroupedByLocations,
+    isLoading: isLoadingBeds,
+    isValidating,
+    mutate,
+    error,
+  } = useBedsGroupedByLocation();
+  const [showAddBedModal, setShowAddBedModal] = useState(false);
+  const [showEditBedModal, setShowEditBedModal] = useState(false);
+  const [editData, setEditData] = useState<BedFormData>();
+  const [filterOption, setFilterOption] = useState('ALL');
+
+  function CustomTag({ condition }: { condition: boolean }) {
+    const { t } = useTranslation();
+
+    if (condition) {
+      return (
+        <Tag type="green" size="md">
+          {t('yes', 'Yes')}
+        </Tag>
+      );
+    }
+
+    return (
+      <Tag type="red" size="md">
+        {t('no', 'No')}
+      </Tag>
+    );
+  }
+
+  const handleBedStatusChange = ({ selectedItem }: { selectedItem: string }) =>
+    setFilterOption(selectedItem.trim().toUpperCase());
+
+  const [pageSize, setPageSize] = useState(10);
+  const { results, currentPage, totalPages, goTo } = usePagination(
+    filterOption === 'ALL'
+      ? wardsGroupedByLocations
+      : wardsGroupedByLocations.filter((bed) => bed.status === filterOption) ?? [],
+    pageSize,
+  );
+
+  const tableHeaders = [
+    {
+      key: 'bedNumber',
+      header: t('bedId', 'Bed ID'),
+    },
+    {
+      key: 'location',
+      header: t('location', 'Location'),
+    },
+    {
+      key: 'occupancyStatus',
+      header: t('occupancyStatus', 'Occupied'),
+    },
+    {
+      key: 'allocationStatus',
+      header: t('allocationStatus', 'Allocated'),
+    },
+    {
+      key: 'actions',
+      header: t('actions', 'Actions'),
+    },
+  ];
+
+  const tableRows = useMemo(() => {
+    return results.flat().map((bed) => ({
+      id: bed.uuid,
+      bedNumber: bed.bedNumber,
+      location: bed.location.display,
+      occupancyStatus: <CustomTag condition={bed?.status === 'OCCUPIED'} />,
+      allocationStatus: <CustomTag condition={Boolean(bed.location?.uuid)} />,
+      actions: (
+        <>
+          <Button
+            enterDelayMs={300}
+            renderIcon={Edit}
+            onClick={(e) => {
+              e.preventDefault();
+              setEditData(bed);
+              setShowEditBedModal(true);
+              setShowAddBedModal(false);
+            }}
+            kind={'ghost'}
+            iconDescription={t('editBed', 'Edit Bed')}
+            hasIconOnly
+            size={responsiveSize}
+            tooltipAlignment="start"
+          />
+        </>
+      ),
+    }));
+  }, [responsiveSize, results, t]);
+
+  if (isLoadingBeds && !wardsGroupedByLocations.length) {
+    return (
+      <>
+        <Header route="Ward Allocation" />
+        <div className={styles.widgetCard}>
+          <DataTableSkeleton role="progressbar" compact={isDesktop} zebra />
+        </div>
+      </>
+    );
+  }
+
+  if (error) {
+    return (
+      <>
+        <Header route="Ward Allocation" />
+        <div className={styles.widgetCard}>
+          <ErrorState error={error} headerTitle={headerTitle} />
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Header route="Ward Allocation" />
+      <div className={styles.flexContainer}>
+        {results?.length ? (
+          <div className={styles.filterContainer}>
+            <Dropdown
+              id="occupancyStatus"
+              initialSelectedItem={'All'}
+              label=""
+              titleText={t('filterByOccupancyStatus', 'Filter by occupancy status') + ':'}
+              type="inline"
+              items={['All', 'Available', 'Occupied']}
+              onChange={handleBedStatusChange}
+            />
+          </div>
+        ) : null}
+      </div>
+      <div className={styles.widgetCard}>
+        {showAddBedModal ? (
+          <NewBedForm onModalChange={setShowAddBedModal} showModal={showAddBedModal} mutate={mutate} />
+        ) : null}
+        {showEditBedModal ? (
+          <EditBedForm
+            onModalChange={setShowEditBedModal}
+            showModal={showEditBedModal}
+            editData={editData}
+            mutate={mutate}
+          />
+        ) : null}
+        <CardHeader title={headerTitle}>
+          <span className={styles.backgroundDataFetchingIndicator}>
+            <span>{isValidating ? <InlineLoading /> : null}</span>
+          </span>
+          {results?.length ? (
+            <Button
+              kind="ghost"
+              renderIcon={(props) => <Add size={16} {...props} />}
+              onClick={() => setShowAddBedModal(true)}>
+              {t('addBed', 'Add bed')}
+            </Button>
+          ) : null}
+        </CardHeader>
+        <DataTable rows={tableRows} headers={tableHeaders} isSortable size={isTablet ? 'lg' : 'sm'} useZebraStyles>
+          {({ rows, headers, getTableProps }) => (
+            <TableContainer>
+              <Table {...getTableProps()}>
+                <TableHead>
+                  <TableRow>
+                    {headers.map((header) => (
+                      <TableHeader>{header.header?.content ?? header.header}</TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row) => (
+                    <TableRow key={row.id}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id}>{cell.value?.content ?? 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}>{t('No data', 'No data to display')}</p>
+                      <p className={styles.helper}>{t('checkFilters', 'Check the filters above')}</p>
+                    </div>
+                    <p className={styles.separator}>{t('or', 'or')}</p>
+                    <Button
+                      kind="ghost"
+                      size="sm"
+                      renderIcon={(props) => <Add size={16} {...props} />}
+                      onClick={() => setShowAddBedModal(true)}>
+                      {t('addBed', 'Add bed')}
+                    </Button>
+                  </Tile>
+                </div>
+              ) : null}
+              <Pagination
+                backwardText="Previous page"
+                forwardText="Next page"
+                page={currentPage}
+                pageNumberText="Page Number"
+                pageSize={totalPages}
+                pageSizes={[10, 20, 30, 40, 50]}
+                totalItems={wardsGroupedByLocations.length}
+                onChange={({ pageSize, page }) => {
+                  setPageSize(pageSize);
+                  if (page !== currentPage) {
+                    goTo(page);
+                  }
+                }}
+              />
+            </TableContainer>
+          )}
+        </DataTable>
+      </div>
+    </>
+  );
+};
+
+export default BedAdministrationTable;

package/src/bed-administration/bed-administration-table.scss

@@ -0,0 +1,111 @@
+@use '@carbon/colors';
+@use '@carbon/type';
+
+.widgetCard {
+  border: 1px solid colors.$gray-20;
+  margin: 1.5rem;
+
+  :global(.cds--modal-content) {
+    margin-bottom: unset;
+  }
+
+  @media (min-width: 66rem) {
+    :global(.cds--modal-container) {
+      max-height: 100%;
+      width: 60%;
+    }
+  }
+
+  @media (min-width: 42rem) {
+    :global(.cds--modal-container) {
+      max-height: 100%;
+    }
+  }
+}
+
+.flexContainer {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 1rem;
+  margin-top: 2rem;
+  margin-left: 0.5rem;
+}
+
+.filterContainer {
+  flex: 1;
+
+  :global(.cds--dropdown__wrapper--inline) {
+    gap: 0;
+  }
+
+  :global(.cds--list-box__menu-icon) {
+    height: 1rem;
+  }
+}
+
+.backgroundDataFetchingIndicator {
+  align-items: center;
+  display: flex;
+  justify-content: end;
+}
+
+.tileContainer {
+  background-color: colors.$white-0;
+  border-top: 1px solid colors.$gray-20;
+  padding: 3rem 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: 0.5rem;
+}
+
+.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: 1.5rem 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: 0.5rem;
+    margin-left: -50%;
+  }
+
+  &::after {
+    left: 0.5rem;
+    margin-right: -50%;
+  }
+}

package/src/bed-administration/bed-administration-types.ts

@@ -0,0 +1,20 @@
+export interface BedAdministrationData {
+  bedId: string;
+  description: string;
+  bedRow: string;
+  bedColumn: string;
+  location: {
+    display: string;
+    uuid: string;
+  };
+  occupancyStatus: string;
+  bedType: string;
+}
+export interface BedTypeDataAdministration {
+  name: string;
+  displayName: string;
+  description: string;
+}
+export interface BedTagDataAdministration {
+  name: string;
+}