@openmrs/esm-stock-management-app 1.0.1-pre.327

package/src/core/components/carbon/controlled-dropdown/controlled-dropdown.component.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { Control, Controller, FieldValues } from "react-hook-form";
+import {
+  DropdownProps,
+  OnChangeData,
+} from "@carbon/react/lib/components/Dropdown/Dropdown";
+import { TextInput } from "@carbon/react";
+
+interface ControlledDropdownProps<T, K> extends DropdownProps<K> {
+  controllerName: string;
+  name: string;
+  control: Control<FieldValues, T>;
+}
+
+const ControlledDropdown = <T, K>(props: ControlledDropdownProps<T, K>) => {
+  return (
+    <Controller
+      name={props.controllerName}
+      control={props.control}
+      render={({ field: { onChange, value, ref } }) => (
+        <TextInput
+          {...props}
+          onChange={(e: OnChangeData<K>) => {
+            onChange(e);
+
+            // Fire prop change
+            if (props.onChange) {
+              props.onChange(e);
+            }
+          }}
+          id={props.name}
+          ref={ref}
+          value={value}
+        />
+      )}
+    />
+  );
+};
+
+export default ControlledDropdown;

package/src/core/components/carbon/controlled-dropdown/controlled-dropdown.test.tsx

@@ -0,0 +1,8 @@
+import { cleanup } from "@testing-library/react";
+
+describe("Test the controlled dropdown", () => {
+  afterEach(cleanup);
+  it(`renders without dying`, () => {
+    // render(<ControlledDropdown />);
+  });
+});

package/src/core/components/carbon/controlled-number-input/controlled-number-input.component.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { Control, Controller, FieldValues } from "react-hook-form";
+import { NumberInputProps } from "@carbon/react/lib/components/NumberInput/NumberInput";
+import { NumberInput } from "@carbon/react";
+import { StockItemPackagingUOMDTO } from "../../../api/types/stockItem/StockItemPackagingUOM";
+
+interface ControlledNumberInputProps<T> extends NumberInputProps {
+  row?: StockItemPackagingUOMDTO;
+  controllerName: string;
+  name: string;
+  control: Control<FieldValues, T>;
+}
+
+const ControlledNumberInput = <T,>(props: ControlledNumberInputProps<T>) => {
+  return (
+    <Controller
+      name={props.controllerName}
+      control={props.control}
+      render={({ field: { onChange, value, ref } }) => (
+        <NumberInput
+          id={`${props.name}-${props.row?.id}-${props.row?.uuid}`}
+          value={props.row?.factor ?? value}
+          ref={ref}
+          onChange={(
+            event: React.MouseEvent<HTMLButtonElement>,
+            state: {
+              value: number | string;
+              direction: string;
+            }
+          ) => {
+            onChange(event, state);
+
+            // Fire prop change if props.onChange is defined
+            if (props.onChange) {
+              props.onChange(event, state);
+            }
+          }}
+        />
+      )}
+    />
+  );
+};
+
+export default ControlledNumberInput;

package/src/core/components/carbon/controlled-number-input/controlled-number-input.test.tsx

@@ -0,0 +1,8 @@
+import { cleanup } from "@testing-library/react";
+
+describe("Test the controlled number input", () => {
+  afterEach(cleanup);
+  it(`renders without dying`, () => {
+    // render(<ControlledNumberInput />);
+  });
+});

package/src/core/components/carbon/controlled-radio-button-group/controlled-radio-button-group.component.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { RadioButtonGroupProps } from "@carbon/react/lib/components/RadioButtonGroup/RadioButtonGroup";
+import { Control, Controller, FieldValues } from "react-hook-form";
+import { RadioButtonGroup, RadioButton } from "@carbon/react";
+import { RadioOption } from "../../../../stock-items/add-stock-item/stock-item-details/stock-item-details.resource";
+
+interface ControlledRadioButtonGroupProps<T> extends RadioButtonGroupProps {
+  controllerName: string;
+  name: string;
+  control: Control<FieldValues, T>;
+  options: RadioOption[]; // Change the type to RadioOption[]
+}
+
+const ControlledRadioButtonGroup = <T,>(
+  props: ControlledRadioButtonGroupProps<T>
+) => {
+  return (
+    <Controller
+      name={props.controllerName}
+      control={props.control}
+      render={({ field: { onChange, value, ref } }) => (
+        <RadioButtonGroup
+          {...props}
+          onChange={(selection: boolean, name: string, event: unknown) => {
+            onChange(selection, name, event);
+
+            // Fire prop change
+            if (props.onChange) {
+              props.onChange(selection, name, event);
+            }
+          }}
+          id={props.name}
+          ref={ref}
+          defaultSelected={props.id}
+          value={value}
+        >
+          {props.options.map((option, index) => (
+            <RadioButton
+              key={`${index}-${props.name}-${option.value}`}
+              id={`${props.name}-${option.value}`}
+              labelText={option.label}
+              value={option.value}
+              checked={value === option.value}
+              onChange={() => onChange(option.value)}
+              ref={ref}
+            />
+          ))}
+        </RadioButtonGroup>
+      )}
+    />
+  );
+};
+
+export default ControlledRadioButtonGroup;

package/src/core/components/carbon/controlled-radio-button-group/controlled-radio-button-group.test.tsx

@@ -0,0 +1,8 @@
+import { cleanup } from "@testing-library/react";
+
+describe("Test the controlled radio button group", () => {
+  afterEach(cleanup);
+  it(`renders without dying`, () => {
+    // render(<ControlledRadioButtonGroup />);
+  });
+});

package/src/core/components/carbon/controlled-text-area/controlled-text-area.component.tsx

@@ -0,0 +1,37 @@
+import React, { ChangeEvent } from "react";
+import { Control, Controller, FieldValues } from "react-hook-form";
+import { TextAreaProps } from "@carbon/react/lib/components/TextArea/TextArea";
+import { TextArea } from "@carbon/react";
+
+interface ControlledTextAreaProps<T> extends TextAreaProps {
+  controllerName: string;
+  name: string;
+  control: Control<FieldValues, T>;
+}
+
+const ControlledTextArea = <T,>(props: ControlledTextAreaProps<T>) => {
+  return (
+    <Controller
+      name={props.controllerName}
+      control={props.control}
+      render={({ field: { onChange, value, ref } }) => (
+        <TextArea
+          {...props}
+          onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {
+            onChange(e.target.value);
+
+            // Fire prop change
+            if (props.onChange) {
+              props.onChange(e);
+            }
+          }}
+          id={props.name}
+          ref={ref}
+          value={value}
+        />
+      )}
+    />
+  );
+};
+
+export default ControlledTextArea;

package/src/core/components/carbon/controlled-text-area/controlled-text-area.test.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+import { render, cleanup } from "@testing-library/react";
+import ControlledTextArea from "./controlled-text-area.component";
+
+describe("Test the controlled text area", () => {
+  afterEach(cleanup);
+  it(`renders without dying`, () => {
+    // render(<ControlledTextArea />);
+  });
+});

package/src/core/components/carbon/controlled-text-input/controlled-text-input.component.tsx

@@ -0,0 +1,37 @@
+import React, { ChangeEvent } from "react";
+import { Control, Controller, FieldValues } from "react-hook-form";
+import { TextInput } from "@carbon/react";
+import { TextInputProps } from "@carbon/react/lib/components/TextInput/TextInput";
+
+interface ControlledTextInputProps<T> extends TextInputProps {
+  controllerName: string;
+  name: string;
+  control: Control<FieldValues, T>;
+}
+
+const ControlledTextInput = <T,>(props: ControlledTextInputProps<T>) => {
+  return (
+    <Controller
+      name={props.controllerName}
+      control={props.control}
+      render={({ field: { onChange, value, ref } }) => (
+        <TextInput
+          {...props}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => {
+            onChange(e.target.value);
+
+            // Fire prop change
+            if (props.onChange) {
+              props.onChange(e);
+            }
+          }}
+          id={props.name}
+          ref={ref}
+          value={value}
+        />
+      )}
+    />
+  );
+};
+
+export default ControlledTextInput;

package/src/core/components/carbon/controlled-text-input/controlled-text-input.test.tsx

@@ -0,0 +1,8 @@
+import { cleanup } from "@testing-library/react";
+
+describe("Test the controlled text input", () => {
+  afterEach(cleanup);
+  it(`renders without dying`, () => {
+    // render(<ControlledTextInput  />);
+  });
+});

package/src/core/components/carbon/types.ts

@@ -0,0 +1,7 @@
+import { Control, FieldValues } from "react-hook-form";
+
+export interface Controlled<T> {
+  controllerName: string;
+  name: string;
+  control: Control<FieldValues, T>;
+}

package/src/core/components/card/metrics-card-component.tsx

@@ -0,0 +1,102 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Tile } from "@carbon/react";
+import { ArrowRight } from "@carbon/react/icons";
+import styles from "./metrics-card.scss";
+import { ConfigurableLink } from "@openmrs/esm-framework";
+import isEmpty from "lodash-es/isEmpty";
+import dayjs from "dayjs";
+import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
+dayjs.extend(isSameOrBefore);
+
+interface MetricsCardProps {
+  label: string;
+  value: number;
+  headerLabel: string;
+  children?: React.ReactNode;
+  view: string;
+  count?: { expiry7days: Array<any>; expiry30days: Array<any> };
+  outofstockCount?: { itemsbelowmin: Array<any>; itemsabovemax: Array<any> };
+  disposedCount?: { expired: Array<any>; poorquality: Array<any> };
+}
+const MetricsCard: React.FC<MetricsCardProps> = ({
+  label,
+  value,
+  headerLabel,
+  children,
+  view,
+  count,
+  outofstockCount,
+  disposedCount,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Tile className={styles.tileContainer}>
+      <div className={styles.tileHeader}>
+        <div className={styles.headerLabelContainer}>
+          <label className={styles.headerLabel}>{headerLabel}</label>
+          {children}
+        </div>
+        {view && (
+          <ConfigurableLink
+            className={styles.link}
+            to={`\${openmrsSpaBase}/stock-management/orders`}
+          >
+            <span style={{ fontSize: "0.825rem", marginRight: "0.325rem" }}>
+              {t("view", "View")}
+            </span>{" "}
+            <ArrowRight size={16} className={styles.viewListBtn} />
+          </ConfigurableLink>
+        )}
+      </div>
+      <div className={styles.metricsGrid}>
+        <div>
+          <label className={styles.totalsLabel}>{label}</label>
+          <p className={styles.totalsValue}>{value}</p>
+        </div>
+        {!isEmpty(count) && (
+          <div className={styles.countGrid}>
+            <span style={{ color: "#DA1E28" }}>
+              {t("in7days", "In 7 days")}
+            </span>
+            <span style={{ color: " #FABA5F" }}>
+              {t("in30days", "In 30 days")}
+            </span>
+            <p style={{ color: "#DA1E28" }}>{count.expiry7days?.length}</p>
+            <p style={{ color: "#FABA5F" }}>{count.expiry30days?.length}</p>
+          </div>
+        )}
+        {!isEmpty(outofstockCount) && (
+          <div className={styles.countGrid}>
+            <span style={{ color: "#DA1E28" }}>
+              {t("itemsbelowmin", "Items Below Min")}
+            </span>
+            <span style={{ color: "#319227" }}>
+              {t("itemsabovemax", "Items Above Max")}
+            </span>
+            <p style={{ color: "#DA1E28" }}>
+              {outofstockCount.itemsbelowmin?.length}
+            </p>
+            <p style={{ color: "#319227" }}>
+              {outofstockCount.itemsabovemax?.length}
+            </p>
+          </div>
+        )}
+        {!isEmpty(disposedCount) && (
+          <div className={styles.countGrid}>
+            <span style={{ color: "#DA1E28" }}>{t("expired", "Expired")}</span>
+            <span style={{ color: "#FABA5F" }}>
+              {t("poorquality", "Poor Quality")}
+            </span>
+            <p style={{ color: "#DA1E28" }}>{disposedCount.expired?.length}</p>
+            <p style={{ color: "#FABA5F" }}>
+              {disposedCount.poorquality?.length}
+            </p>
+          </div>
+        )}
+      </div>
+    </Tile>
+  );
+};
+export default MetricsCard;

package/src/core/components/card/metrics-card.scss

@@ -0,0 +1,78 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@carbon/colors';
+@import '~@openmrs/esm-styleguide/src/vars';
+.tileContainer {
+  border: 0.0625rem solid $ui-03;
+  flex-grow: 1;
+  height: 7.875rem;
+  padding: 0 spacing.$spacing-04;
+  background-color: colors.$white;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-bottom: 20px;
+
+}
+.tileHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: spacing.$spacing-03;
+}
+.headerLabel {
+  @include type.type-style('label-02');
+  color: colors.$gray-70;
+}
+.totalsLabel {
+  @include type.type-style('label-01');
+  color: $text-02;
+}
+.totalsValue {
+  @include type.type-style('heading-04');
+  color: $ui-05;
+}
+.headerLabelContainer {
+  display: flex;
+  align-items: center;
+  height: spacing.$spacing-07;
+  justify-content: space-between;
+  width: 100%;
+}
+.link {
+  text-decoration: none;
+  display: flex;
+  align-items: flex-end;
+}
+.metricsGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+.countGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  justify-self: flex-end;
+  column-gap: spacing.$spacing-03;
+  & > span {
+    font-size: 0.625rem !important;
+    margin: 0;
+    color: colors.$gray-70;
+  }
+  & > p {
+    margin: 0;
+  }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+

package/src/core/components/overlay/hook.ts

@@ -0,0 +1,47 @@
+import { getGlobalStore } from "@openmrs/esm-framework";
+import { useEffect, useState } from "react";
+
+interface OverlayStore {
+  isOverlayOpen: boolean;
+  component?: any;
+  header: string;
+}
+
+const initialState = { isOverlayOpen: false, component: Function, header: "" };
+
+const getOverlayStore = () => {
+  return getGlobalStore("dispensing-store", initialState);
+};
+
+export const launchOverlay = (headerTitle: string, componentToRender) => {
+  const store = getOverlayStore();
+  store.setState({
+    isOverlayOpen: true,
+    component: componentToRender,
+    header: headerTitle,
+  });
+};
+
+export const closeOverlay = () => {
+  const store = getOverlayStore();
+  store.setState({ component: null, isOverlayOpen: false });
+};
+
+export const useOverlay = () => {
+  const [overlay, setOverlay] = useState<OverlayStore>();
+
+  useEffect(() => {
+    function update(state: OverlayStore) {
+      setOverlay(state);
+    }
+
+    update(getOverlayStore().getState());
+    getOverlayStore().subscribe(update);
+  }, []);
+
+  return {
+    isOverlayOpen: overlay?.isOverlayOpen,
+    component: overlay?.component,
+    header: overlay?.header,
+  };
+};

package/src/core/components/overlay/overlay.component.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Button, Header } from "@carbon/react";
+import { ArrowLeft, Close } from "@carbon/react/icons";
+import { useLayoutType } from "@openmrs/esm-framework";
+import styles from "./overlay.scss";
+import { useTranslation } from "react-i18next";
+import { closeOverlay, useOverlay } from "./hook";
+
+const Overlay: React.FC = () => {
+  const { header, component, isOverlayOpen } = useOverlay();
+  const layout = useLayoutType();
+  const { t } = useTranslation();
+  return (
+    <>
+      {isOverlayOpen && (
+        <div
+          className={
+            layout !== "tablet" ? styles.desktopOverlay : styles.tabletOverlay
+          }
+        >
+          {layout !== "tablet" ? (
+            <div className={styles.desktopHeader}>
+              <div className={styles.headerContent}>{header}</div>
+              <Button
+                className={styles.closePanelButton}
+                onClick={() => closeOverlay()}
+                kind="ghost"
+                hasIconOnly
+              >
+                <Close size={16} />
+              </Button>
+            </div>
+          ) : (
+            <Header
+              onClick={() => closeOverlay()}
+              aria-label={t("tabletOverlay", "Tablet overlay")}
+              className={styles.tabletOverlayHeader}
+            >
+              <Button hasIconOnly>
+                <ArrowLeft size={16} />
+              </Button>
+              <div className={styles.headerContent}>{header}</div>
+            </Header>
+          )}
+          <div>{component}</div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Overlay;

package/src/core/components/overlay/overlay.scss

@@ -0,0 +1,97 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.desktopOverlay {
+  position: fixed;
+  top: spacing.$spacing-09;
+  width: 100%;
+  right: 0;
+  bottom: 0;
+  border-left: 1px solid $text-03;
+  background-color: white;
+  overflow-y: auto;
+  height: calc(100vh - 3rem);
+}
+
+.desktopOverlay::after {
+  height: 100%;
+  border-left: 1px solid $text-03;
+}
+
+.tabletOverlay {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+  background-color: $ui-01;
+  overflow-y: scroll;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    width: 0;
+  }
+
+  & > div {
+    margin-top: spacing.$spacing-09;
+  }
+}
+
+.tabletOverlayHeader {
+  button {
+    @include brand-01(background-color);
+  }
+
+  .headerContent {
+    color: $ui-02;
+  }
+}
+
+.desktopHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: $ui-03;
+  border-bottom: 1px solid $text-03;
+  position: sticky;
+  position: -webkit-sticky;
+  width: 100%;
+  z-index: 1000;
+  top: 0;
+}
+
+.headerContent {
+  @include type.type-style('heading-compact-02');
+  padding: 0 spacing.$spacing-05;
+  color: $ui-05;
+}
+
+.closeButton {
+  background-color: $ui-background;
+  color: $ui-05;
+  fill: $ui-05;
+}
+
+/* Desktop */
+:global(.omrs-breakpoint-gt-tablet) {
+  .overlayContent {
+    padding: 0 0 0 0;
+    overflow-y: auto;
+  }
+}
+
+/* Tablet */
+:global(.omrs-breakpoint-lt-desktop) {
+  .overlayContent {
+    padding: 0 0 0 0;
+    overflow-y: auto;
+  }
+}
+
+/* Combo */
+:global(.cds--list-box__menu) {
+  z-index: 20000;
+}