@kenyaemr/esm-bed-management-app 1.0.1-pre.11

package/i18next-parser.config.js

@@ -0,0 +1,89 @@
+module.exports = {
+  contextSeparator: "_",
+  // Key separator used in your translation keys
+
+  createOldCatalogs: false,
+  // Save the \_old files
+
+  defaultNamespace: "translations",
+  // Default namespace used in your i18next config
+
+  defaultValue: "",
+  // Default value to give to empty keys
+  // You may also specify a function accepting the locale, namespace, and key as arguments
+
+  indentation: 2,
+  // Indentation of the catalog files
+
+  keepRemoved: false,
+  // Keep keys from the catalog that are no longer in code
+
+  keySeparator: ".",
+  // Key separator used in your translation keys
+  // If you want to use plain english keys, separators such as `.` and `:` will conflict. You might want to set `keySeparator: false` and `namespaceSeparator: false`. That way, `t('Status: Loading...')` will not think that there are a namespace and three separator dots for instance.
+
+  // see below for more details
+  lexers: {
+    hbs: ["HandlebarsLexer"],
+    handlebars: ["HandlebarsLexer"],
+
+    htm: ["HTMLLexer"],
+    html: ["HTMLLexer"],
+
+    mjs: ["JavascriptLexer"],
+    js: ["JavascriptLexer"], // if you're writing jsx inside .js files, change this to JsxLexer
+    ts: ["JavascriptLexer"],
+    jsx: ["JsxLexer"],
+    tsx: ["JsxLexer"],
+
+    default: ["JavascriptLexer"],
+  },
+
+  lineEnding: "auto",
+  // Control the line ending. See options at https://github.com/ryanve/eol
+
+  locales: ["en"],
+  // An array of the locales in your applications
+
+  namespaceSeparator: ":",
+  // Namespace separator used in your translation keys
+  // If you want to use plain english keys, separators such as `.` and `:` will conflict. You might want to set `keySeparator: false` and `namespaceSeparator: false`. That way, `t('Status: Loading...')` will not think that there are a namespace and three separator dots for instance.
+
+  output: "$NAMESPACE/$LOCALE.json",
+  // Supports $LOCALE and $NAMESPACE injection
+  // Supports JSON (.json) and YAML (.yml) file formats
+  // Where to write the locale files relative to process.cwd()
+
+  pluralSeparator: "_",
+  // Plural separator used in your translation keys
+  // If you want to use plain english keys, separators such as `_` might conflict. You might want to set `pluralSeparator` to a different string that does not occur in your keys.
+
+  input: undefined,
+  // An array of globs that describe where to look for source files
+  // relative to the location of the configuration file
+
+  sort: true,
+  // Whether or not to sort the catalog
+
+  useKeysAsDefaultValue: false,
+  // Whether to use the keys as the default value; ex. "Hello": "Hello", "World": "World"
+  // This option takes precedence over the `defaultValue` and `skipDefaultValues` options
+  // You may also specify a function accepting the locale and namespace as arguments
+
+  verbose: false,
+  // Display info about the parsing including some stats
+
+  failOnWarnings: false,
+  // Exit with an exit code of 1 on warnings
+
+  customValueTemplate: null,
+  // If you wish to customize the value output the value as an object, you can set your own format.
+  // ${defaultValue} is the default value you set in your translation function.
+  // Any other custom property will be automatically extracted.
+  //
+  // Example:
+  // {
+  //   message: "${defaultValue}",
+  //   description: "${maxLength}", // t('my-key', {maxLength: 150})
+  // }
+};

package/package.json

@@ -0,0 +1,112 @@
+{
+  "name": "@kenyaemr/esm-bed-management-app",
+  "version": "1.0.1-pre.11",
+  "license": "MPL-2.0",
+  "description": "A frontend module for managing beds in UgandaEMR+",
+  "browser": "dist/esm-kenyaemr-bed-management-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "scripts": {
+    "start": "openmrs develop",
+    "serve": "webpack serve --mode=development",
+    "build": "webpack --mode production",
+    "analyze": "webpack --mode=production --env analyze=true",
+    "lint": "TIMING=1 eslint src --ext js,jsx,ts,tsx",
+    "prettier": "prettier --write \"src/**/*.{ts,tsx}\"",
+    "typescript": "tsc",
+    "test": "jest --config jest.config.js --passWithNoTests",
+    "verify": "turbo lint typescript coverage",
+    "coverage": "yarn test --coverage",
+    "prepare": "husky install",
+    "extract-translations": "i18next 'src/**/*.component.tsx' --config ./i18next-parser.config.js"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged && yarn verify"
+    }
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "keywords": [
+    "openmrs",
+    "microfrontends"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mets-programme/esm-ugandaemr-bed-management-app.git"
+  },
+  "homepage": "https://github.com/mets-programme/esm-ugandaemr-bed-management-app#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://github.com/mets-programme/esm-ugandaemr-bed-management-app/issues"
+  },
+  "dependencies": {
+    "@carbon/react": "^1.33.1",
+    "@hookform/resolvers": "^3.3.1",
+    "@openmrs/openmrs-form-engine-lib": "^1.0.0-pre.44",
+    "classnames": "^2.3.2",
+    "dayjs": "^1.11.9",
+    "lodash-es": "^4.17.21",
+    "react-hook-form": "^7.47.0",
+    "react-image-annotate": "^1.8.0",
+    "zod": "^3.22.2"
+  },
+  "peerDependencies": {
+    "@openmrs/esm-framework": "*",
+    "@openmrs/openmrs-form-engine-lib": "5.x",
+    "react": "18.x",
+    "react-i18next": "11.x",
+    "react-router-dom": "6.x",
+    "rxjs": "6.x"
+  },
+  "devDependencies": {
+    "@openmrs/esm-framework": "next",
+    "@openmrs/esm-patient-common-lib": "next",
+    "@openmrs/esm-styleguide": "next",
+    "@swc/cli": "^0.1.62",
+    "@swc/core": "^1.3.68",
+    "@swc/jest": "^0.2.26",
+    "@testing-library/dom": "^8.20.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^28.1.8",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "@types/react-router": "^5.1.20",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/webpack-env": "^1.18.1",
+    "@typescript-eslint/eslint-plugin": "^5.61.0",
+    "@typescript-eslint/parser": "^5.61.0",
+    "css-loader": "^6.8.1",
+    "eslint": "^8.44.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-ts-react-important-stuff": "^3.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "husky": "^8.0.0",
+    "i18next": "^23.2.8",
+    "i18next-parser": "^8.0.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^28.1.3",
+    "jest-cli": "^28.1.3",
+    "jest-environment-jsdom": "^28.1.3",
+    "openmrs": "next",
+    "prettier": "^2.8.8",
+    "pretty-quick": "^3.1.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^11.18.6",
+    "react-router-dom": "^6.14.1",
+    "rxjs": "^6.6.7",
+    "swc-loader": "^0.2.3",
+    "turbo": "^1.10.7",
+    "typescript": "^4.9.5",
+    "webpack": "^5.88.1",
+    "webpack-cli": "^5.1.4"
+  },
+  "packageManager": "yarn@3.6.3",
+  "stableVersion": "1.0.0"
+}

package/src/__mocks__/react-i18next.js

@@ -0,0 +1,55 @@
+/** At present, this entire mock is boilerplate. */
+import "react";
+import "react-i18next";
+
+const hasChildren = (node) =>
+  node && (node.children || (node.props && node.props.children));
+
+const getChildren = (node) =>
+  node && node.children ? node.children : node.props && node.props.children;
+
+const renderNodes = (reactNodes) => {
+  if (typeof reactNodes === "string") {
+    return reactNodes;
+  }
+
+  return Object.keys(reactNodes).map((key, i) => {
+    const child = reactNodes[key];
+    const isElement = React.isValidElement(child);
+
+    if (typeof child === "string") {
+      return child;
+    }
+    if (hasChildren(child)) {
+      const inner = renderNodes(getChildren(child));
+      return React.cloneElement(child, { ...child.props, key: i }, inner);
+    }
+    if (typeof child === "object" && !isElement) {
+      return Object.keys(child).reduce(
+        (str, childKey) => `${str}${child[childKey]}`,
+        ""
+      );
+    }
+
+    return child;
+  });
+};
+
+const useMock = [(k) => k, {}];
+useMock.t = (k, o) => (o && o.defaultValue) || (typeof o === "string" ? o : k);
+useMock.i18n = {};
+
+module.exports = {
+  // this mock makes sure any components using the translate HoC receive the t function as a prop
+  Trans: ({ children }) => renderNodes(children),
+  Translation: ({ children }) => children((k) => k, { i18n: {} }),
+  useTranslation: () => useMock,
+
+  // mock if needed
+  I18nextProvider: reactI18next.I18nextProvider,
+  initReactI18next: reactI18next.initReactI18next,
+  setDefaults: reactI18next.setDefaults,
+  getDefaults: reactI18next.getDefaults,
+  setI18n: reactI18next.setI18n,
+  getI18n: reactI18next.getI18n,
+};

package/src/admin-card-link.component.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Layer, ClickableTile } from "@carbon/react";
+import { ArrowRight } from "@carbon/react/icons";
+
+const BedManagementAdminCardLink: React.FC = () => {
+  const { t } = useTranslation();
+  const header = t("manageBeds", "Manage Beds");
+  return (
+    <Layer>
+      <ClickableTile
+        href={window.getOpenmrsSpaBase() + "bed-management/summary"}
+        rel="noopener noreferrer"
+      >
+        <div>
+          <div className="heading">{header}</div>
+          <div className="content">{t("bedManagement", "Bed Management")}</div>
+        </div>
+        <div className="iconWrapper">
+          <ArrowRight size={16} />
+        </div>
+      </ClickableTile>
+    </Layer>
+  );
+};
+
+export default BedManagementAdminCardLink;

package/src/assets/logo.svg

@@ -0,0 +1 @@
+<svg width="320" height="100" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="#409184" d="M0 0h320v100H0z"/><g fill-rule="nonzero"><path d="M57.97 55.541c0 6.26-5.85 9.37-12.48 9.37-6.63 0-12.49-3.11-12.49-9.37v-21.19s5.56 0 5.56 2.7v17.88c0 3.73 2.86 5.68 6.93 5.68s6.93-1.95 6.93-5.68v-20.58s5.56 0 5.56 2.7v18.49h-.01Zm48.45-6.14c0-1.49-.83-2.82-4.02-2.82-3.48 0-6.64 1.2-6.64 4.69-1.2-1.62-1.58-2.9-1.58-4.02 0-3.61 4.85-4.69 8.25-4.69 6.1 0 9.33 2.57 9.33 7.09v15.18c-1.08-.54-2.16-.66-3.19-.66-2.07 0-4.15.75-6.51.75-4.27 0-8.46-1.58-8.46-6.51 0-7.76 11.12-5.73 12.82-9.01Zm.12 4.23c-.95 2.2-7.59 1-7.59 4.69 0 1.87 1.37 2.82 3.73 2.82 2.2 0 3.86-.75 3.86-.75v-6.76Zm23.27-3.61c0-2.2-1.04-3.44-3.98-3.44-2.12 0-3.94.58-3.94.58v17.54s-5.39 0-5.39-2.7v-19.44s1.62.87 3.73.87c2.03 0 3.94-.87 6.18-.87 4.27 0 8.79 1.45 8.79 6.84v15.3s-5.39-.08-5.39-2.7v-11.98Zm23.27-17.21c.37 0 5.39-.04 5.39 3.11v28.99c-1.08-.54-2.2-.71-3.32-.71-2.2 0-4.31.71-6.05.71-5.93 0-9.33-2.61-9.33-7.22v-7.96c0-4.48 3.86-7.17 8.29-7.17 3.44 0 5.35 1.62 5.35 1.62s-.33-1.37-.33-2.41v-8.96Zm0 17.13c0-2.03-2.24-3.44-4.48-3.44-1.99 0-3.44 1.16-3.44 3.86v6.72c0 2.61 1 3.9 4.44 3.9 1.87 0 3.48-.5 3.48-.5v-10.54Zm22.44-.54c0-1.49-.83-2.82-4.02-2.82-3.48 0-6.64 1.2-6.64 4.69-1.2-1.62-1.58-2.9-1.58-4.02 0-3.61 4.85-4.69 8.25-4.69 6.1 0 9.33 2.57 9.33 7.09v15.18c-1.08-.54-2.16-.66-3.19-.66-2.07 0-4.15.75-6.51.75-4.27 0-8.46-1.58-8.46-6.51 0-7.76 11.12-5.73 12.82-9.01Zm.12 4.23c-.95 2.2-7.59 1-7.59 4.69 0 1.87 1.37 2.82 3.73 2.82 2.2 0 3.86-.75 3.86-.75v-6.76Zm17.3-2.53v8.29h14.81c0 .29-.08 5.02-3.86 5.02h-12.73s-5.35 0-5.35-3.19v-26.95h21.94s0 5.06-3.86 5.06h-10.95v6.72h7.8c4.11 0 5.35-.66 5.35-.66 0 2.86-.58 5.72-4.69 5.72h-8.46v-.01Zm41.93-.16c0-2.03.54-4.65.54-4.65l-6.3 13.4s-4.31 0-6.3-3.11l-4.44-10.04s.46 2.36.46 4.4v13.89s-7.13 0-7.13-3.19v-27.37h4.4c.25 0 3.36-.04 4.65 2.78l6.1 13.52 7.63-16.3c1.58 0 7.55 0 7.55 3.19v27.37s-7.13 0-7.13-3.19v-10.7h-.03Zm27 .41c5.23 3.44 6.68 8.38 9.75 12.73 0 0-2.53.66-3.53.66-1.74 0-4.15-.54-5.64-2.95-1.7-2.7-3.82-7.92-7.92-9.7v12.73s-7.13-.12-7.13-3.19v-27.36h10.41c6.72 0 11.57 1.91 11.57 7.88v1.24c0 4.35-2.7 7.88-7.51 7.96Zm-7.34-12.03v7.51h3.61c3.03 0 4.11-1.33 4.11-4.06 0-2.7-1.45-3.44-4.44-3.44h-3.28v-.01Z" fill="#FDFFFF"/><path d="M103.92 73.601c0-.59.07-1.22.07-1.22l-3.51 7.12s-.43 0-.83-.64l-3.09-6.52s.07.67.07 1.26v8.17s-.84 0-.84-.64v-9.57h.71s.57 0 .88.68l2.87 6.1 3.26-6.77s1.25.01 1.25.64v9.57s-.84 0-.84-.64v-7.54Zm9.66 6.76c0 1-1.44 1.45-2.73 1.45-1.67 0-2.74-.83-2.74-2.25v-3.01c0-1.41.94-2.25 2.67-2.25s2.73.84 2.73 2.1c0 1.15-.78 2.03-2.8 2.03-.94 0-1.8-.38-1.8-.38v1.29c0 1.09.46 1.68 1.94 1.68 1.32 0 2.39-.52 2.39-1.59.26.35.34.65.34.93Zm-4.66-3.05c-.06.03 1 .33 1.73.33 1.54 0 2.07-.48 2.07-1.25 0-.8-.48-1.35-1.9-1.35-1.54 0-1.9.64-1.9 1.71v.56Zm12.24-6.41c.13 0 .8-.01.8.77v10.03c-.26-.1-.52-.14-.77-.14-.59 0-1.32.25-2.04.25-1.67 0-2.64-.87-2.64-2.2v-3.1c0-1.38 1.09-2.19 2.36-2.19 2.03 0 2.45.9 2.45.9s-.16-.28-.16-1.52v-2.8Zm0 5.67c0-.9-1.06-1.51-2.1-1.51-1 0-1.75.51-1.75 1.65v2.67c0 1.12.51 1.67 2.1 1.67 1.07 0 1.75-.35 1.75-.35v-4.13Zm4.1-4.72h.75c.13 0 .16.12.16.2v.8h-.75c-.09 0-.16-.1-.16-.19v-.81Zm.06 2.52c.09 0 .8.03.8.64v6.73s-.8 0-.8-.64v-6.73Zm9.58 5.97c0 1.01-1.38 1.46-2.68 1.46-1.74 0-2.88-.83-2.88-2.25v-3.01c0-1.41 1.01-2.25 2.74-2.25 1.51 0 2.51.57 2.51 1.44 0 .28-.1.58-.32.87 0-.91-.81-1.52-2.22-1.52-1.48 0-1.91.71-1.91 1.62v2.71c0 .96.68 1.61 2.09 1.61 1.32 0 2.32-.52 2.32-1.59.22.33.35.65.35.91Zm7.22-3.81c0-.84-.36-1.45-1.83-1.45-1.41 0-2.23.61-2.23 1.52-.22-.29-.3-.61-.3-.87 0-.86 1.01-1.44 2.54-1.44 1.8 0 2.62.87 2.62 2.28v5.13c-.26-.1-.64-.14-.88-.14-.45 0-1.17.25-1.78.25-1.81 0-2.74-.86-2.74-2.06-.01-2.71 4.11-1.74 4.6-3.22Zm-1.75 4.54c1.07 0 1.75-.38 1.75-.38v-3.22c-.29 1.01-3.78.39-3.78 2.29 0 .76.59 1.31 2.03 1.31Zm5.76-10.21c.06 0 .8.01.8.64v7.8c0 1.12.25 2.16.94 2.16 0 0-.19.28-.57.28-.81 0-1.17-.88-1.17-2.06v-8.82Zm15.67 3.52c0 1.74-1.3 2.52-3.1 2.45 2.12.67 3.04 3.96 3.65 4.91-.67.09-.94.01-1.35-.77-1.23-2.41-1.87-3.94-4.41-4.13v4.93s-.84-.01-.84-.64v-9.57h2.81c1.87 0 3.23.62 3.23 2.38v.44h.01Zm-5.2-2.03v3.78h2.09c1.68 0 2.28-.71 2.28-1.97 0-1.28-.78-1.81-2.39-1.81h-1.98Zm13.45 8.01c0 1-1.44 1.45-2.73 1.45-1.67 0-2.74-.83-2.74-2.25v-3.01c0-1.41.94-2.25 2.67-2.25s2.73.84 2.73 2.1c0 1.15-.78 2.03-2.8 2.03-.94 0-1.8-.38-1.8-.38v1.29c0 1.09.46 1.68 1.94 1.68 1.32 0 2.39-.52 2.39-1.59.25.35.34.65.34.93Zm-4.67-3.05c-.06.03 1 .33 1.73.33 1.54 0 2.07-.48 2.07-1.25 0-.8-.48-1.35-1.9-1.35-1.54 0-1.9.64-1.9 1.71v.56Zm13.16 3.03c0 1.01-1.38 1.46-2.68 1.46-1.74 0-2.88-.83-2.88-2.25v-3.01c0-1.41 1.01-2.25 2.74-2.25 1.51 0 2.51.57 2.51 1.44 0 .28-.1.58-.32.87 0-.91-.81-1.52-2.22-1.52-1.48 0-1.91.71-1.91 1.62v2.71c0 .96.68 1.61 2.09 1.61 1.32 0 2.32-.52 2.32-1.59.22.33.35.65.35.91Zm8.67-.78c0 1.42-.94 2.25-2.94 2.25-2.01 0-2.96-.83-2.96-2.25v-3.01c0-1.41.94-2.25 2.96-2.25 2 0 2.94.84 2.94 2.25v3.01Zm-.8-2.8c0-1.07-.36-1.71-2.15-1.71-1.8 0-2.16.64-2.16 1.71v2.58c0 1.09.36 1.72 2.16 1.72 1.78 0 2.15-.64 2.15-1.72v-2.58Zm6.45-1.61c-.62 0-1.29.12-1.64.3v6.28s-.8 0-.8-.64v-6.68c.29.14.46.2.7.2.59 0 1.3-.32 2.06-.32 1.19 0 1.64.67 1.12 1.75-.03-.7-.7-.89-1.44-.89Zm8.49-4.25c.13 0 .8-.01.8.77v10.03c-.26-.1-.52-.14-.77-.14-.59 0-1.32.25-2.04.25-1.67 0-2.64-.87-2.64-2.2v-3.1c0-1.38 1.09-2.19 2.36-2.19 2.03 0 2.45.9 2.45.9s-.16-.28-.16-1.52v-2.8Zm0 5.67c0-.9-1.06-1.51-2.1-1.51-1 0-1.75.51-1.75 1.65v2.67c0 1.12.51 1.67 2.1 1.67 1.07 0 1.75-.35 1.75-.35v-4.13Zm3.73-.07c0-1.45.91-2.2 2.67-2.2 1.29 0 2.54.36 2.54 1.39 0 .3-.12.65-.35 1.07.01-.07.01-.16.01-.23 0-.87-.61-1.48-2.2-1.48-1.42 0-1.87.51-1.87 1.38 0 2.1 4.67-.12 4.67 3.25 0 1.25-.94 2.13-2.8 2.13-1.26 0-2.64-.3-2.64-1.46 0-.26.07-.55.22-.9 0 .91.71 1.61 2.42 1.61 1.58 0 2-.68 2-1.45 0-2.31-4.6-.15-4.67-3.11Zm17.1-5.12c1.52 0 3.3.33 3.3 1.67 0 .28-.09.64-.26 1.04 0-1.51-1.57-1.9-3.15-1.9-1.54 0-2.78.42-2.78 1.94 0 2.94 6.51.51 6.51 4.68 0 2.03-1.52 2.99-3.68 2.99-1.52 0-3.48-.45-3.48-1.7 0-.29.07-.65.23-1.06 0 1.46 1.67 1.94 3.33 1.94 1.83 0 2.72-.83 2.72-2.13 0-3.26-6.51-.91-6.51-4.65.01-2.17 1.8-2.82 3.77-2.82Zm11.01 6.16.26-2.45c.06-.59.55-.65.84-.7l-.28 2.8c-.19 1.97-1.26 3.15-2.07 3.77l-.57.44c-1.04.81-1.77 1.33-1.77 2.46 0 .36.12.78.33 1.29-.06.01-.15.03-.22.03-.39 0-.94-.23-.94-1.38 0-1.26 1-2.17 2.06-2.88-.7-.44-1.91-1.7-2.12-3.73l-.29-2.81s.77 0 .84.64l.29 2.52c.2 1.8 1.81 2.94 1.81 2.94s1.65-1.21 1.83-2.94Zm3.45-1.04c0-1.45.91-2.2 2.67-2.2 1.29 0 2.54.36 2.54 1.39 0 .3-.12.65-.35 1.07.01-.07.01-.16.01-.23 0-.87-.61-1.48-2.2-1.48-1.42 0-1.87.51-1.87 1.38 0 2.1 4.67-.12 4.67 3.25 0 1.25-.94 2.13-2.8 2.13-1.26 0-2.64-.3-2.64-1.46 0-.26.07-.55.22-.9 0 .91.71 1.61 2.42 1.61 1.58 0 2-.68 2-1.45 0-2.31-4.6-.15-4.67-3.11Zm8.39-3.93s.8.01.8.64v1.43h3.03s-.01.78-.54.78h-2.49v3.84c0 1.09.59 1.75 1.75 1.75.94 0 1.75-.59 1.75-1.48.19.35.26.61.26.87 0 .94-.99 1.39-2.03 1.39-1.39 0-2.54-.75-2.54-2.17v-7.05h.01Zm12.31 7.79c0 1-1.44 1.45-2.73 1.45-1.67 0-2.74-.83-2.74-2.25v-3.01c0-1.41.94-2.25 2.67-2.25s2.73.84 2.73 2.1c0 1.15-.78 2.03-2.8 2.03-.94 0-1.8-.38-1.8-.38v1.29c0 1.09.46 1.68 1.94 1.68 1.32 0 2.39-.52 2.39-1.59.25.35.34.65.34.93Zm-4.67-3.05c-.06.03 1 .33 1.73.33 1.54 0 2.07-.48 2.07-1.25 0-.8-.48-1.35-1.9-1.35-1.54 0-1.9.64-1.9 1.71v.56Zm12.39-.71c0-1.1-.62-1.52-1.93-1.52-1.22 0-1.93.35-1.93.35v6.31s-.8 0-.8-.62v-6.7s.36.2.65.2c.75 0 1.44-.32 2.28-.32 1.7 0 2.16.87 2.16.87.41-.38 1.2-.86 2.52-.86 1.17 0 2.49.58 2.49 2.09v5.33s-.8-.01-.8-.62v-4.55c0-1.03-.61-1.46-1.94-1.46-.91 0-1.91.46-1.91 1.26v5.38s-.8 0-.8-.62v-4.52h.01Z" fill="#FAFCFC"/><path d="M276.95 30.661c.3-.52.49-1.1.7-1.71.21-.63.43-1.28.78-1.89a5.25 5.25 0 0 1 1.93-1.9v-4.96c0-.63.12-3.99 0-6.2-1.85-.08-6.36 3.4-6.81 6.2v5.91h-5.91c-.63 0-1.14.51-1.14 1.14v4.54c0 .63.51 1.14 1.14 1.14h5.87c1.41-.17 2.74-1.03 3.44-2.27Z" fill="#FFF"/><path d="M286.28 26.811h-5.9c-.5.36-.93.82-1.24 1.36-.31.53-.51 1.12-.72 1.74-.21.62-.42 1.26-.76 1.85-.84 1.47-2.42 2.49-4.1 2.67v12.31c2.37-.49 6.93-2.44 6.81-7.21v-5.91h5.91c.63 0 1.14-.51 1.14-1.14v-4.54c-.01-.63-.52-1.13-1.14-1.13Z" fill="#FDFFFF"/><path d="M66.09 61.081c-1.51-1.46-2.36-4.37-2.36-6.45v-2.64c0-6.67 5.55-9.14 11.22-9.14 3.08 0 6 1.18 8.75 1.18 1.29 0 2.8-.34 4.77-1.12v11.72c0 6.22-4.32 9.93-12.34 9.93-4.21 0-7.07-1.57-7.07-1.57-.17.56-.34 1.46-.34 2.19 0 2.52 2.58 2.92 6.45 2.92h1.85c5.94 0 12.45-.06 12.45 7.96 0 5.94-4.21 9.93-13.35 9.93-7.63 0-12.28-2.41-12.28-6.11 0-1.46.56-2.97 1.91-4.71.5 4.43 5.16 5.5 9.87 5.5 4.99 0 6.73-1.63 6.73-4.21 0-2.63-2.24-2.92-5.5-2.92H74.1c-5.89 0-11.05-.73-11.05-6.39.01-2.25 1.25-3.94 3.04-6.07Zm10.04-1.85c4.15 0 5.1-1.96 5.1-5.44v-4.77s-2.52-.95-4.99-.95c-3.81 0-5.27 1.35-5.27 4.77v.95c0 3.48.95 5.44 5.16 5.44Z" fill="#FFF"/></g></g></svg>

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

@@ -0,0 +1,326 @@
+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 { Location } from "@openmrs/esm-framework";
+import type { BedType, InitialData } from "../types";
+import { 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().min(5).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: InitialData;
+}
+
+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.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;