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

package/src/root.scss

@@ -0,0 +1,174 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import "~carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/type/styles";
+@import "~carbon-components/src/globals/scss/vendor/@carbon/layout/scss/generated/spacing";
+@import "~carbon-components/src/globals/scss/vendor/@carbon/layout/scss/generated/layout";
+@import "carbon-components/scss/globals/scss/typography.scss";
+@import "~@openmrs/esm-styleguide/src/vars";
+
+$ui-01: #f4f4f4;
+$ui-02: #ffffff;
+$ui-03: #e0e0e0;
+$ui-05: #161616;
+$ui-background: #ffffff;
+$color-gray-70: #525252;
+$color-blue-60-2: #0f62fe;
+$color-yellow-50: #feecae;
+$inverse-support-03: #f1c21b;
+$warning-background: #fff8e1;
+$openmrs-background-grey: #f4f4f4;
+$danger: #da1e28;
+$interactive-01: #0f62fe;
+$brand-teal-01: #3197D9;
+$button-primary: #0078A6;
+
+.productiveHeading01 {
+  @include carbon--type-style("productive-heading-01");
+}
+
+.productiveHeading02 {
+  @include carbon--type-style("productive-heading-02");
+}
+
+.productiveHeading03 {
+  @include carbon--type-style("productive-heading-03");
+}
+
+.productiveHeading04 {
+  @include carbon--type-style("productive-heading-04");
+}
+
+.productiveHeading05 {
+  @include carbon--type-style("productive-heading-05");
+}
+
+.productiveHeading06 {
+  @include carbon--type-style("productive-heading-06");
+}
+
+.bodyShort01 {
+  @include carbon--type-style("body-short-01");
+}
+
+.helperText01 {
+  @include carbon--type-style("helper-text-01");
+}
+
+.bodyShort02 {
+  @include carbon--type-style("body-short-02");
+}
+
+.bodyLong01 {
+  @include carbon--type-style("body-long-01");
+}
+
+.bodyLong02 {
+  @include carbon--type-style("body-long-02");
+}
+
+.label01 {
+  @include carbon--type-style("label-01");
+}
+
+.text01 {
+  color: $text-01;
+}
+
+.text02 {
+  color: $text-02;
+}
+
+aside {
+  background-color: $ui-02 !important;
+}
+
+// Login Overrides
+
+div[class*='-esm-login__styles__center'] > img {
+  width: 140px; // design has 120px
+}
+
+:global(.tab-12rem) > button {
+  width: 12rem !important;
+}
+
+:global(.tab-14rem) > button {
+  width: 14rem !important;
+}
+
+:global(.tab-16rem) > button {
+  width: 16rem !important;
+}
+
+:global(.bx--overflow-menu) > div {
+  width: 15rem !important;
+}
+
+nav :global(.bx--accordion__title) {
+  color: #525252;
+  font-weight: 600 !important;
+}
+
+nav :global(.bx--accordion__content) {
+  padding-bottom: 0 !important;
+  padding-top: 0 !important;
+}
+
+nav :global(.bx--accordion__content) > a {
+  background-color: #cecece !important;
+  color: #161616 !important;
+  border-left-color: var(--brand-01) !important;
+}
+
+.container {
+  padding: spacing.$spacing-07;
+}
+
+.welcome {
+  @include type.type-style('heading-04');
+  margin: spacing.$spacing-05 0;
+}
+
+.explainer {
+  margin-bottom: 2rem;
+}
+
+.noMargin {
+  margin: 0 !important;
+}
+
+.noPadding {
+  margin: 0 !important;
+}
+
+.noSpacing {
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.section {
+  margin: spacing.$spacing-03;
+}
+
+:global(.cds--table-sort__description) {
+  display: none;
+}
+
+.formContainer {
+  height: calc(100vh - 100px) !important;
+  overflow: scroll;
+  padding: 0 1rem;
+}
+
+.verticalForm {
+  display: flex;
+  grid-row-gap: 2em;
+  padding-top: 1rem;
+  align-content: space-between;
+  flex-direction: column;
+
+  :global(.cds--form-item) {
+    flex: none !important;
+  }
+}
+

package/src/routes.json

@@ -0,0 +1,53 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "fhir2": "^1.2.0",
+    "webservices.rest": "^2.24.0"
+  },
+  "extensions": [
+    {
+      "name": "stock-management-dashboard",
+      "slot": "stock-management-dashboard-slot",
+      "component": "stockManagementDashboard"
+    },
+    {
+      "name": "stock-management-admin-card-link",
+      "slot": "system-admin-page-card-link-slot",
+      "component": "stockManagementAdminCardLink"
+    },
+    {
+      "name": "stock-operation-dialog",
+      "component": "stockOperationDialog"
+    },
+    {
+      "name": "import-bulk-stock-items",
+      "component": "importBulkStockItemsDialog"
+    },
+    {
+      "name": "delete-stock-modal",
+      "component": "deleteStockModal"
+    },
+    {
+      "name": "delete-stock-user-scope-modal",
+      "component": "deleteUserScopeModal"
+    },
+    {
+      "name": "stock-management-app-menu-item",
+      "component": "stockManagementAppMenuItem",
+      "slot": "app-menu-item-slot",
+      "meta": {
+        "name": " Stock Management"
+      }
+    },
+    {
+      "name": "delete-stock-rule-modal",
+      "component": "deleteStockRuleModal"
+    }
+  ],
+  "pages": [
+    {
+      "component": "stockManagement",
+      "route": "stock-management"
+    }
+  ]
+}

package/src/setup-tests.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/extend-expect";

package/src/stock-app-menu-item/item.component.tsx

@@ -0,0 +1,21 @@
+import { ClickableTile } from "@carbon/react";
+import React from "react";
+import styles from "./item.scss";
+import { Report } from "@carbon/react/icons";
+
+const Item = () => {
+  // items
+  const openmrsSpaBase = window["getOpenmrsSpaBase"]();
+
+  return (
+    <ClickableTile
+      className={styles.customTile}
+      id="menu-item"
+      href={`${openmrsSpaBase}stock-management`}
+    >
+      <div className="customTileTitle">{<Report size={24} />}</div>
+      <div>Stock Management</div>
+    </ClickableTile>
+  );
+};
+export default Item;

package/src/stock-app-menu-item/item.scss

@@ -0,0 +1,17 @@
+
+.customTile {
+    background-color: #f0f0f0;
+    border-radius: 4px;
+    padding: 20px;
+    width: 50px;
+    height: 100px;
+    text-align: center;
+    margin: 2px;
+  }
+  
+  .customTileTitle {
+    font-size: 14px;
+    color: #333;
+  }
+  
+  

package/src/stock-batch/stock-batch.resource.ts

@@ -0,0 +1,79 @@
+import useSWR from "swr";
+import { ResourceFilterCriteria, toQueryParams } from "../core/api/api";
+import { BatchJob, BatchJobType } from "../core/api/types/BatchJob";
+import { PageableResult } from "../core/api/types/PageableResult";
+import { openmrsFetch } from "@openmrs/esm-framework";
+import { ReportType } from "../stock-reports/ReportType";
+
+export interface BatchJobFilter extends ResourceFilterCriteria {
+  batchJobType?: BatchJobType | null | undefined;
+  status?: string | null;
+  locationScopeUuid?: string | null;
+  dateCreatedMin?: string | null | undefined;
+  dateCreatedMax?: string | null | undefined;
+  completedDateMin?: string | null | undefined;
+  completedDateMax?: string | null | undefined;
+}
+
+// getBatchJobs
+export function useBatchJobs(filter: BatchJobFilter) {
+  const apiUrl = `ws/rest/v1/stockmanagement/batchjob${toQueryParams(filter)}`;
+  const { data, error, isLoading } = useSWR<
+    { data: PageableResult<BatchJob> },
+    Error
+  >(apiUrl, openmrsFetch);
+
+  return {
+    items: data.data ? data.data : [],
+    isLoading,
+    isError: error,
+  };
+}
+
+// cancelBatchJobs
+export function cancelBatchJobs(ids: string[]) {
+  let otherIds = ids.reduce((p, c, i) => {
+    if (i === 0) return p;
+    p += (p.length > 0 ? "," : "") + encodeURIComponent(c);
+    return p;
+  }, "");
+  if (otherIds.length > 0) {
+    otherIds = "?ids=" + otherIds;
+  }
+  const apiUrl = `ws/rest/v1/stockmanagement/batchjob/${ids[0]}${otherIds}`;
+  const abortController = new AbortController();
+  return openmrsFetch(apiUrl, {
+    method: "DELETE",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    signal: abortController.signal,
+  });
+}
+
+// createBatchJob
+export function createBatchJob(item: BatchJob) {
+  const apiUrl = `ws/rest/v1/stockmanagement/batchjob`;
+  const abortController = new AbortController();
+  return openmrsFetch(apiUrl, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    signal: abortController.signal,
+    body: item,
+  });
+}
+// getReportTypes
+export function useReportTypes() {
+  const apiUrl = `ws/rest/v1/stockmanagement/report?v=default`;
+  const { data, error, isLoading } = useSWR<
+    { data: PageableResult<ReportType> },
+    Error
+  >(apiUrl, openmrsFetch);
+  return {
+    items: data.data ? data.data : [],
+    isLoading,
+    isError: error,
+  };
+}

package/src/stock-home/stock-home-detail-card.scss

@@ -0,0 +1,211 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.container {
+  margin: 2rem 0;
+}
+
+.emptyStateContainer,
+.loaderContainer {
+  @extend .container;
+}
+
+.tilesContainer {
+  background-color: $ui-02;
+  border: 1px solid $ui-03;
+  border-bottom: none;
+  width: 100%;
+  margin: 0 auto;
+  max-width: 95vw;
+  padding-bottom: 0;
+}
+
+.headerContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: layout.$spacing-04 0 layout.$spacing-04 layout.$spacing-05;
+  background-color: $ui-02;
+}
+
+.backgroundDataFetchingIndicator {
+  align-items: center;
+  display: flex;
+  flex: 1 1 0%;
+  justify-content: center;
+}
+
+.tableContainer section {
+  position: relative;
+}
+
+.tableContainer a {
+  text-decoration: none;
+}
+
+.pagination {
+  overflow: hidden;
+
+  &:global(.cds--pagination) {
+    border-top: none;
+  }
+}
+
+.hiddenRow {
+  display: none;
+}
+
+.emptyRow {
+  padding: 0 1rem;
+  display: flex;
+  align-items: center;
+}
+
+.visitSummaryContainer {
+  width: 100%;
+  max-width: 768px;
+  margin: 1rem auto;
+}
+
+.expandedActiveVisitRow > td > div {
+  max-height: max-content !important;
+}
+
+.expandedActiveVisitRow td {
+  padding: 0 2rem;
+}
+
+.expandedActiveVisitRow th[colspan] td[colspan] > div:first-child {
+  padding: 0 1rem;
+}
+
+.action {
+  margin-bottom: layout.$spacing-03;
+}
+
+.illo {
+  margin-top: layout.$spacing-05;
+}
+
+.content {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
+}
+
+.desktopHeading,
+.tabletHeading {
+  text-align: left;
+  text-transform: capitalize;
+
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+
+    &:after {
+      content: '';
+      display: block;
+      width: 2rem;
+      padding-top: 3px;
+      border-bottom: 0.375rem solid;
+      @include brand-03(border-bottom-color);
+    }
+  }
+}
+
+.tile {
+  text-align: center;
+  border: 1px solid $ui-03;
+}
+
+.filterEmptyState {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: layout.$spacing-05;
+  margin: layout.$spacing-09;
+  text-align: center;
+}
+
+.filterEmptyStateTile {
+  margin: auto;
+}
+
+.filterEmptyStateContent {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: 0.5rem;
+}
+
+.filterEmptyStateHelper {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}
+
+.cardContainer {
+  display: flex;
+  margin: 0 auto;
+}
+
+.cardContainer > * {
+  flex: 1;
+  margin: 8px 8px ;
+}
+
+.cardContainerBig {
+  display: flex;
+  flex-direction: column;
+}
+
+.card {
+  display: flex;
+  border: 1px solid #ccc;
+  margin: 10px;
+  background-color: #F4F4F4;
+}
+
+.icon {
+  margin-right: 23px;
+}
+
+.colorLineYellow {
+  width: 5px;
+  background-color: #F1C21B;
+  margin-right: 10px;
+}
+
+.colorLineBlue {
+  width: 5px;
+  background-color: #0F62FE;
+  margin-right: 10px;
+}
+
+.colorLineOrange {
+  width: 5px;
+  background-color: #FF832B;
+  margin-right: 10px;
+}
+
+.colorLineGreen {
+  width: 5px;
+  background-color: #198038;
+  margin-right: 10px;
+}
+
+.colorLineRed {
+  width: 5px;
+  background-color: #DA1E28;
+  margin-right: 10px;
+}
+
+.cardText {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+.cardText p {
+  font-size: 0.9em;
+  color: #525252;
+}

package/src/stock-home/stock-home-detail-cards.component.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useLayoutType } from "@openmrs/esm-framework";
+import StockHomeInventoryCard from "./stock-home-inventory-card.component";
+import StockHomeReceivingCard from "./stock-home-receiving-card.component";
+import StockHomeIssuingCard from "./stock-home-issuing-card.component";
+import { Layer, Tile } from "@carbon/react";
+import styles from "./stock-home-detail-card.scss";
+
+const StockHomeDetailCards = () => {
+  const isTablet = useLayoutType() === "tablet";
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.cardContainer}>
+      <div className={styles.tilesContainer}>
+        <Layer>
+          <Tile>
+            <div
+              className={
+                isTablet ? styles.tabletHeading : styles.desktopHeading
+              }
+            >
+              <h4>{t("Inventory Alerts")}</h4>
+            </div>
+            <StockHomeInventoryCard />
+          </Tile>
+        </Layer>
+      </div>
+      <div className={styles.tilesContainer}>
+        <Layer>
+          <Tile>
+            <div
+              className={
+                isTablet ? styles.tabletHeading : styles.desktopHeading
+              }
+            >
+              <h4>{t("Receiving")}</h4>
+            </div>
+            <StockHomeReceivingCard />
+          </Tile>
+        </Layer>
+      </div>
+      <div className={styles.tilesContainer}>
+        <Layer>
+          <Tile>
+            <div
+              className={
+                isTablet ? styles.tabletHeading : styles.desktopHeading
+              }
+            >
+              <h4>{t("Issuing")}</h4>
+            </div>
+            <StockHomeIssuingCard />
+          </Tile>
+        </Layer>
+      </div>
+    </div>
+  );
+};
+
+export default StockHomeDetailCards;

package/src/stock-home/stock-home-inventory-card.component.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "@carbon/react";
+import { navigate, useLayoutType } from "@openmrs/esm-framework";
+import styles from "./stock-home-detail-card.scss";
+import { WarningHex } from "@carbon/react/icons";
+import { useStockInventory } from "./stock-home-inventory-expiry.resource";
+import { useStockInventoryItems } from "./stock-home-inventory-items.resource";
+
+const StockHomeInventoryCard = () => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === "tablet";
+
+  // TODO: Pull low on stock
+  const { items: expiryItems, isLoading: inventoryLoading } =
+    useStockInventory();
+  const { items: stockItems, isLoading } = useStockInventoryItems();
+
+  if (isLoading) return <></>;
+
+  if (stockItems?.length === 0) {
+    return (
+      <>
+        <p className={styles.content}>
+          {t("inventoryAlertNull", "No inventory alerts to display")}
+        </p>
+      </>
+    );
+  }
+
+  const currentDate: any = new Date();
+  let mergedArray: any[] = expiryItems.map((batch) => {
+    const matchingItem = stockItems?.find(
+      (item2) => batch?.stockItemUuid === item2.uuid
+    );
+    return { ...batch, ...matchingItem };
+  });
+  mergedArray = mergedArray.filter((item) => item.hasExpiration);
+  const filteredData = mergedArray.filter((item) => {
+    const expiryNotice = item.expiryNotice || 0; // Default to 0 if expiryNotice is undefined or null
+    const expirationDate: any = new Date(item.expiration);
+    const differenceInDays = Math.ceil(
+      (expirationDate - currentDate) / (1000 * 60 * 60 * 24)
+    );
+
+    // Include items that have not expired yet or are within the expiry notice period
+    return differenceInDays <= expiryNotice || differenceInDays < 0;
+  });
+
+  return (
+    <>
+      {filteredData.map((item, index) => (
+        <div className={styles.card} key={index}>
+          <div className={styles.colorLineRed} />
+          <div className={styles.icon}>
+            <WarningHex size={40} color={"#DA1E28"} />
+          </div>
+          <div className={styles.cardText}>
+            <p>EXPIRING STOCK</p>
+            <p>
+              <strong>{item?.drugName}</strong> {item?.dispensingUnitName}
+            </p>
+          </div>
+        </div>
+      ))}
+      <Button
+        onClick={() => {
+          navigate({
+            to: `${window.getOpenmrsSpaBase()}stock-management/expired-stock`,
+          });
+        }}
+        kind="ghost"
+      >
+        View All
+      </Button>
+    </>
+  );
+};
+
+export default StockHomeInventoryCard;