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

package/src/stock-home/stock-home-inventory-expiry.resource.tsx

@@ -0,0 +1,32 @@
+import { ResourceRepresentation } from "../core/api/api";
+import { useEffect, useMemo, useState } from "react";
+import {
+  StockBatchFilter,
+  StockItemInventoryFilter,
+  useStockBatches,
+  useStockItemInventory,
+} from "../stock-items/stock-items.resource";
+
+export function useStockInventory() {
+  const [stockItemFilter, setStockItemFilter] = useState<StockBatchFilter>({
+    startIndex: 0,
+    v: ResourceRepresentation.Default,
+    q: null,
+    includeStockItemName: "true",
+  });
+
+  useEffect(() => {
+    setStockItemFilter({
+      v: ResourceRepresentation.Default,
+      includeStockItemName: "true",
+    });
+  }, []);
+
+  const { items, isLoading, isError } = useStockBatches(stockItemFilter);
+
+  return {
+    items: items.results ?? [],
+    isLoading,
+    isError,
+  };
+}

package/src/stock-home/stock-home-inventory-items.resource.tsx

@@ -0,0 +1,28 @@
+import {
+  StockItemFilter,
+  useStockItems,
+} from "../stock-items/stock-items.resource";
+import { useEffect, useState } from "react";
+import { ResourceRepresentation } from "../core/api/api";
+export function useStockInventoryItems(v?: ResourceRepresentation) {
+  const [stockItemFilter, setStockItemFilter] = useState<StockItemFilter>({
+    v: v || ResourceRepresentation.Default,
+    q: null,
+    totalCount: true,
+  });
+
+  const { items, isLoading, isError } = useStockItems(stockItemFilter);
+
+  useEffect(() => {
+    setStockItemFilter({
+      v: ResourceRepresentation.Default,
+      totalCount: true,
+    });
+  }, []);
+
+  return {
+    items: items?.results ?? [],
+    isLoading,
+    isError,
+  };
+}

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

@@ -0,0 +1,84 @@
+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 { ResourceRepresentation } from "../core/api/api";
+import { DocumentImport } from "@carbon/react/icons";
+import { useStockIssuing } from "./stock-home-issuing.resource";
+
+const StockHomeIssuingCard = () => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === "tablet";
+
+  const { items, isLoading } = useStockIssuing({
+    v: ResourceRepresentation.Full,
+    totalCount: true,
+  });
+
+  if (isLoading) return <></>;
+
+  if (items.length === 0) {
+    return (
+      <>
+        <p className={styles.content}>
+          {t("issuingNull", "No issued to display")}
+        </p>
+      </>
+    );
+  }
+
+  const itemsToDisplay = items.map((item, index) => {
+    // Assuming you are using 'stockOperationItems' from each 'item'
+    const stockItems = item?.stockOperationItems || [];
+
+    // Assuming you are using some properties from 'stock' in your code
+    const formattedStockItems = stockItems.map((stock, stockIndex) => ({
+      status: item?.status,
+      sourceName: item?.sourceName,
+      destinationName: item?.destinationName,
+      stockItemName: stock?.stockItemName,
+      stockItemPackagingUOMName: stock?.stockItemPackagingUOMName,
+      quantity: stock?.quantity,
+      key: `${index}-${stockIndex}`,
+    }));
+
+    return formattedStockItems;
+  });
+
+  const flattenedItemsToDisplay = itemsToDisplay.flat().slice(0, 10);
+
+  return (
+    <>
+      {flattenedItemsToDisplay.map((item, index) => (
+        <div className={styles.card} key={index}>
+          <div className={styles.colorLineGreen} />
+          <div className={styles.icon}>
+            <DocumentImport size={40} color={"#198038"} />
+          </div>
+          <div className={styles.cardText}>
+            <p>
+              {item?.status} · {item?.sourceName} · {item?.destinationName}
+            </p>
+            <p>
+              <strong>{item?.stockItemName}</strong>{" "}
+              {item?.stockItemPackagingUOMName}, {item?.quantity}
+            </p>
+          </div>
+        </div>
+      ))}
+      <Button
+        onClick={() => {
+          navigate({
+            to: `${window.getOpenmrsSpaBase()}stock-management/requisitions`,
+          });
+        }}
+        kind="ghost"
+      >
+        View All
+      </Button>
+    </>
+  );
+};
+
+export default StockHomeIssuingCard;

package/src/stock-home/stock-home-issuing.resource.tsx

@@ -0,0 +1,18 @@
+import {
+  StockOperationFilter,
+  useStockOperations,
+} from "../stock-operations/stock-operations.resource";
+
+export function useStockIssuing(filter: StockOperationFilter) {
+  const { items, isLoading, isError } = useStockOperations(filter);
+
+  const receivedItems = items?.results?.filter(
+    (item) =>
+      item?.operationType === "stockissue" && item?.status !== "COMPLETED"
+  );
+  return {
+    items: receivedItems,
+    isLoading,
+    isError,
+  };
+}

package/src/stock-home/stock-home-landing-page-component.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { StockManagementHeader } from "../stock-management-header/stock-management-header.component";
+import StockManagementMetrics from "./stock-home-metrics";
+import StockHomeDetailCards from "./stock-home-detail-cards.component";
+
+export default function StockHomeLandingPage() {
+  const basePath = `${window.getOpenmrsSpaBase()}stock-management`;
+  return (
+    <div style={{ backgroundColor: "white" }}>
+      <StockManagementMetrics />
+      <StockHomeDetailCards />
+    </div>
+  );
+}

package/src/stock-home/stock-home-metrics.tsx

@@ -0,0 +1,112 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { InlineLoading } from "@carbon/react";
+import { ErrorState } from "@openmrs/esm-framework";
+import styles from "./stock-home.scss";
+import MetricsCard from "../core/components/card/metrics-card-component";
+import useStockList from "./useStockList";
+
+import { StockOperationFilter } from "../stock-operations/stock-operations.resource";
+import { useDisposalList } from "./useDisposalList";
+import { ResourceRepresentation } from "../core/api/api";
+import { useStockInventoryItems } from "./stock-home-inventory-items.resource";
+import { useStockInventory } from "./stock-home-inventory-expiry.resource";
+
+const StockManagementMetrics: React.FC = (filter: StockOperationFilter) => {
+  const { t } = useTranslation();
+
+  const { stockList: allStocks, isLoading, error } = useStockList();
+
+  const { items: expiryItems, isLoading: inventoryLoading } =
+    useStockInventory();
+  const { items: stockItems } = useStockInventoryItems();
+
+  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;
+    const expirationDate: any = new Date(item.expiration);
+    const differenceInDays = Math.ceil(
+      (expirationDate - currentDate) / (1000 * 60 * 60 * 24)
+    );
+
+    return differenceInDays <= expiryNotice || differenceInDays < 0;
+  });
+
+  const { items } = useDisposalList({
+    v: ResourceRepresentation.Full,
+    totalCount: true,
+  });
+
+  if (isLoading) {
+    return (
+      <InlineLoading
+        role="progressbar"
+        description={t("loading", "Loading...")}
+      />
+    );
+  }
+  if (error) {
+    return <ErrorState headerTitle={t("errorStockMetric")} error={error} />;
+  }
+
+  const sevenDaysExpiryStocks = allStocks.filter(
+    (stock) => stock.hasExpiration && stock.ExpiryNotice <= 7
+  );
+  const thirtyDaysExpiryStocks = allStocks.filter(
+    (stock) => stock.hasExpiration && stock.ExpiryNotice <= 30
+  );
+
+  const filteredItems =
+    items &&
+    items.filter(
+      (item) =>
+        item.reasonName === "Drug not available due to expired medication"
+    );
+  const filteredItemsPoorquality =
+    items && items.filter((item) => item.reasonName === "Poor Quality");
+
+  return (
+    <>
+      <div className={styles.cardContainer}>
+        <MetricsCard
+          label={t("stocks", "Expiring stock")}
+          value={filteredData?.length || 0}
+          headerLabel={t("expiringStock", "Expiring Stock")}
+          view="items"
+          count={{
+            expiry7days: sevenDaysExpiryStocks,
+            expiry30days: thirtyDaysExpiryStocks,
+          }}
+        />
+        <MetricsCard
+          label={t("outofstock", "Out of Stock")}
+          value={allStocks?.length}
+          headerLabel={t("highestServiceVolume", "Out of Stock ")}
+          view="items"
+          outofstockCount={{
+            itemsbelowmin: sevenDaysExpiryStocks,
+            itemsabovemax: thirtyDaysExpiryStocks,
+          }}
+        />
+        <MetricsCard
+          label={t("disposedstock", "Disposed Stock")}
+          value={items?.length || 0}
+          headerLabel={t("providersAvailableToday", "Disposed Stock ")}
+          view="items"
+          disposedCount={{
+            expired: filteredItems,
+            poorquality: filteredItemsPoorquality,
+          }}
+        />
+      </div>
+    </>
+  );
+};
+export default StockManagementMetrics;

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

@@ -0,0 +1,66 @@
+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 { Delivery } from "@carbon/react/icons";
+import { ResourceRepresentation } from "../core/api/api";
+import { useStockReceiving } from "./stock-home-receiving.resource";
+
+const StockHomeReceivingCard = () => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === "tablet";
+
+  const { items, isLoading } = useStockReceiving({
+    v: ResourceRepresentation.Full,
+    totalCount: true,
+  });
+
+  if (isLoading) return <></>;
+
+  if (items.length === 0) {
+    return (
+      <>
+        <p className={styles.content}>
+          {t("receivedNull", "No received to display")}
+        </p>
+      </>
+    );
+  }
+
+  return (
+    <>
+      {items.map((item, index) =>
+        item?.stockOperationItems.map((stock) => (
+          <div className={styles.card} key={index}>
+            <div className={styles.colorLineBlue} />
+            <div className={styles.icon}>
+              <Delivery size={40} color={"#0F62FE"} />
+            </div>
+            <div className={styles.cardText}>
+              <p>
+                {item?.status} · {item?.sourceName} · {item?.destinationName}
+              </p>
+              <p>
+                <strong>{stock?.stockItemName}</strong>{" "}
+                {stock?.stockItemPackagingUOMName}, {stock?.quantity}
+              </p>
+            </div>
+          </div>
+        ))
+      )}
+      <Button
+        onClick={() => {
+          navigate({
+            to: `${window.getOpenmrsSpaBase()}stock-management/orders`,
+          });
+        }}
+        kind="ghost"
+      >
+        {t("receivedView", "View All")}
+      </Button>
+    </>
+  );
+};
+
+export default StockHomeReceivingCard;

package/src/stock-home/stock-home-receiving.resource.tsx

@@ -0,0 +1,17 @@
+import {
+  StockOperationFilter,
+  useStockOperations,
+} from "../stock-operations/stock-operations.resource";
+
+export function useStockReceiving(filter: StockOperationFilter) {
+  const { items, isLoading, isError } = useStockOperations(filter);
+
+  const receivedItems = items?.results?.filter(
+    (item) => item?.operationType === "receipt" && item?.status !== "COMPLETED"
+  );
+  return {
+    items: receivedItems,
+    isLoading,
+    isError,
+  };
+}

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

@@ -0,0 +1,13 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@carbon/colors';
+@import '~@openmrs/esm-styleguide/src/vars';
+.cardContainer {
+  background-color: colors.$white;
+  display: flex;
+  justify-content: space-between;
+  margin: 0 spacing.$spacing-05 0 spacing.$spacing-05;
+  flex-flow: row wrap;
+  column-gap: spacing.$spacing-05;
+  row-gap: spacing.$spacing-05;
+}

package/src/stock-home/useDisposalList.tsx

@@ -0,0 +1,18 @@
+import {
+  StockOperationFilter,
+  useStockOperations,
+} from "../stock-operations/stock-operations.resource";
+
+export function useDisposalList(filter: StockOperationFilter) {
+  const { items, isLoading, isError } = useStockOperations(filter);
+
+  const receivedItems = items?.results?.filter(
+    (item) => item?.operationType === "disposed"
+  );
+
+  return {
+    items: receivedItems,
+    isLoading,
+    isError,
+  };
+}

package/src/stock-home/useStockList.tsx

@@ -0,0 +1,36 @@
+import useSWR from "swr";
+import { openmrsFetch } from "@openmrs/esm-framework";
+
+interface StockList {
+  uuid: string;
+  hasExpiration: boolean;
+  ExpiryNotice: number;
+  results: {
+    uuid: string;
+    hasExpiration: boolean;
+    ExpiryNotice: number;
+  };
+}
+
+const useStockList = () => {
+  const url = `/ws/rest/v1/stockmanagement/stockitem`;
+
+  const { data, error } = useSWR<{ data: { results: Array<StockList> } }>(
+    url,
+    openmrsFetch
+  );
+
+  const stocks = data?.data.results.map((stock) => ({
+    uuid: stock.uuid,
+    hasExpiration: stock.hasExpiration,
+    ExpiryNotice: stock.ExpiryNotice,
+  }));
+
+  return {
+    stockList: (stocks as Array<any>) ?? [],
+    isLoading: !data && !error,
+    error,
+  };
+};
+
+export default useStockList;

package/src/stock-items/add-bulk-stock-item/add-stock-items-bulk-import-action-button.component.tsx

@@ -0,0 +1,26 @@
+import { Button } from "@carbon/react";
+import React, { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { showModal } from "@openmrs/esm-framework";
+
+const AddStockItemsBulktImportActionButton: React.FC = () => {
+  const { t } = useTranslation();
+
+  const handleClick = useCallback(() => {
+    const dispose = showModal("import-bulk-stock-items", {
+      closeModal: () => dispose(),
+    });
+  }, []);
+
+  return (
+    <Button
+      kind="ghost"
+      onClick={handleClick}
+      iconDescription={t("import", "Import")}
+    >
+      {t("import", "Import")}
+    </Button>
+  );
+};
+
+export default AddStockItemsBulktImportActionButton;

package/src/stock-items/add-bulk-stock-item/stock-items-bulk-import.component.tsx

@@ -0,0 +1,109 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Button,
+  Form,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  FileUploader,
+} from "@carbon/react";
+import { UploadStockItems } from "./stock-items-bulk-import.resource";
+import { showNotification, showToast } from "@openmrs/esm-framework";
+
+export interface ImportDialogPopupProps {
+  closeModal: () => void;
+}
+
+const ImportDialogPopup: React.FC<ImportDialogPopupProps> = ({
+  closeModal,
+}) => {
+  const { t } = useTranslation();
+  const [selectedFile, setSelectedFile] = useState<any>();
+  const [hasHeader, setHasHeader] = useState(true);
+  const [fileNotSelected, setFileNotSelected] = useState(true);
+
+  const onConfirmUpload = () => {
+    if (!selectedFile) {
+      return;
+    }
+    const formData = new FormData();
+    if (selectedFile) {
+      formData.append("file", selectedFile, "Import_Stock_Items.csv");
+      formData.append("hasHeader", hasHeader ? "true" : "false");
+    }
+    UploadStockItems(formData).then(
+      (resp) => {
+        showToast({
+          critical: true,
+          title: t("rejectOrder", "Uploaded Order"),
+          kind: "success",
+          description: t(
+            "Successfully uploaded",
+            `You have successfully uploaded stock items`
+          ),
+        });
+        closeModal();
+      },
+      (err) => {
+        showNotification({
+          title: t(
+            `errorUploadingItems', 'An error occurred uploading stock items`
+          ),
+          kind: "error",
+          critical: true,
+          description: err?.message,
+        });
+      }
+    );
+  };
+
+  const onFileChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event?.target?.files?.[0];
+    if (file) {
+      setSelectedFile(file);
+      setFileNotSelected(false);
+    } else {
+      event.preventDefault();
+    }
+  };
+
+  const onFileDeleted = () => {
+    setFileNotSelected(true);
+  };
+
+  return (
+    <div>
+      <Form>
+        <ModalHeader
+          closeModal={closeModal}
+          title={t("importStockItems", "Import Stock Items")}
+        />
+        <ModalBody>
+          <FileUploader
+            accept={[".csv"]}
+            multiple={false}
+            name={"file"}
+            buttonLabel="Select file"
+            labelDescription="Only .csv files at 2mb or less"
+            filenameStatus="edit"
+            labelTitle=""
+            size="small"
+            onChange={onFileChanged}
+            onDelete={onFileDeleted}
+          />
+        </ModalBody>
+        <ModalFooter>
+          <Button kind="secondary" onClick={closeModal}>
+            {t("cancel", "Cancel")}
+          </Button>
+          <Button type="button" onClick={onConfirmUpload}>
+            {t("uploadStockItems", "Upload StockItems")}
+          </Button>
+        </ModalFooter>
+      </Form>
+    </div>
+  );
+};
+
+export default ImportDialogPopup;

package/src/stock-items/add-bulk-stock-item/stock-items-bulk-import.resource.ts

@@ -0,0 +1,14 @@
+import { openmrsFetch } from "@openmrs/esm-framework";
+
+export async function UploadStockItems(body: any) {
+  const abortController = new AbortController();
+
+  return openmrsFetch(`/ws/rest/v1/stockmanagement/stockitemimport`, {
+    method: "POST",
+    // headers: {
+    //   "Content-Type": "application/json",
+    // },
+    signal: abortController.signal,
+    body: body,
+  });
+}

package/src/stock-items/add-stock-item/add-stock-action-button.component.tsx

@@ -0,0 +1,21 @@
+import { Button } from "@carbon/react";
+import React, { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { initialValues } from "./add-stock-item.resource";
+import { launchAddOrEditDialog } from "../stock-item.utils";
+
+const AddStockItemActionButton: React.FC = () => {
+  const { t } = useTranslation();
+
+  const handleClick = useCallback(() => {
+    launchAddOrEditDialog(initialValues, false);
+  }, []);
+
+  return (
+    <Button onClick={handleClick} size="md" kind="primary">
+      {t("stockmanagement.addnew", "Add New")}
+    </Button>
+  );
+};
+
+export default AddStockItemActionButton;