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

package/src/stock-locations/stock-locations-table.resource.tsx

@@ -0,0 +1,73 @@
+import { StockOperationFilter } from "../stock-operations/stock-operations.resource";
+import { useMemo, useState } from "react";
+import { usePagination } from "@openmrs/esm-framework";
+import { useTranslation } from "react-i18next";
+import { useStockLocations } from "../stock-lookups/stock-lookups.resource";
+
+export function useStockLocationPages(filter: StockOperationFilter) {
+  const { locations, isErrorLocation, isLoadingLocations } =
+    useStockLocations(filter);
+
+  const pageSizes = [10, 20, 30, 40, 50];
+  const [currentPageSize, setPageSize] = useState(10);
+
+  const {
+    goTo,
+    results: paginatedQueueEntries,
+    currentPage,
+  } = usePagination(locations.results, currentPageSize);
+
+  const { t } = useTranslation();
+
+  const tableHeaders = useMemo(
+    () => [
+      {
+        id: 0,
+        header: t("name", "Name"),
+        key: "name",
+      },
+      {
+        id: 1,
+        header: t("tags", "Tags"),
+        key: "tags",
+      },
+      {
+        id: 2,
+        header: t("childLocations", "Child Locations"),
+        key: "childLocations",
+      },
+      {
+        id: 3,
+        header: t("actions", "Actions"),
+        key: "actions",
+      },
+    ],
+    [t]
+  );
+
+  const tableRows = useMemo(() => {
+    return locations?.results?.map((location) => ({
+      id: location?.uuid,
+      key: `key-${location?.uuid}`,
+      uuid: `${location?.uuid}`,
+      name: `${location?.name}`,
+      tags: location?.tags?.map((p) => p.display)?.join(", ") ?? "",
+      childLocations:
+        location?.childLocations?.map((p) => p.display)?.join(", ") ?? "",
+    }));
+  }, [locations?.results]);
+
+  return {
+    items: locations.results,
+    currentPage,
+    currentPageSize,
+    paginatedQueueEntries,
+    goTo,
+    pageSizes,
+    isLoadingLocations,
+    isErrorLocation,
+    setPageSize,
+    tableHeaders,
+    tableRows,
+  };
+}

package/src/stock-locations/stock-locations.component.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import StockLocationsItems from "./stock-locations-table.component";
+
+function StockLocations() {
+  return (
+    <div style={{ margin: "5px" }}>
+      <StockLocationsItems />
+    </div>
+  );
+}
+
+export default StockLocations;

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

@@ -0,0 +1,306 @@
+import {
+  FetchResponse,
+  OpenmrsResource,
+  fhirBaseUrl,
+  openmrsFetch,
+  useSession,
+} from "@openmrs/esm-framework";
+import { ResourceFilterCriteria, toQueryParams } from "../core/api/api";
+import { PageableResult } from "../core/api/types/PageableResult";
+import {
+  OpenMRSLocation,
+  OpenMRSLocationTag,
+} from "../core/api/types/Location";
+import useSWR from "swr";
+import { Role } from "../core/api/types/identity/Role";
+import { User } from "../core/api/types/identity/User";
+import { StockOperationType } from "../core/api/types/stockOperation/StockOperationType";
+import { Concept } from "../core/api/types/concept/Concept";
+import { Party } from "../core/api/types/Party";
+import { Drug } from "../core/api/types/concept/Drug";
+import { Patient } from "../core/api/types/identity/Patient";
+import { useMemo } from "react";
+import { uniqBy } from "lodash-es";
+
+export type PatientFilterCriteria = ResourceFilterCriteria;
+
+export type UserFilterCriteria = ResourceFilterCriteria;
+
+export type DrugFilterCriteria = ResourceFilterCriteria;
+
+export type ConceptFilterCriteria = ResourceFilterCriteria;
+
+export type LocationFilterCriteria = ResourceFilterCriteria;
+interface FHIRResponse {
+  entry: Array<{ resource: fhir.Location }>;
+  total: number;
+  type: string;
+  resourceType: string;
+}
+
+// getLocations
+export function useStockLocations(filter: LocationFilterCriteria) {
+  const apiUrl = `ws/rest/v1/location${toQueryParams(filter, false)}`;
+  const { data, error, isLoading } = useSWR<
+    {
+      data: PageableResult<OpenMRSLocation>;
+    },
+    Error
+  >(apiUrl, openmrsFetch);
+  return {
+    locations: data?.data || <PageableResult<OpenMRSLocation>>{},
+    isErrorLocation: error,
+    isLoadingLocations: isLoading,
+  };
+}
+/* Get locations tagged to perform stock related activities.
+   Unless a location is tag as main store, main pharmacy or dispensing, it will not be fetched.
+*/
+export function useStockTagLocations() {
+  const apiUrl = `${fhirBaseUrl}/Location?_summary=data&_tag=main store,main pharmacy,dispensary `;
+  const { data, error, isLoading } = useSWR<{ data: FHIRResponse }>(
+    apiUrl,
+    openmrsFetch
+  );
+  const stockLocations = useMemo(
+    () => data?.data?.entry?.map((response) => response.resource) ?? [],
+    [data?.data?.entry]
+  );
+  return {
+    stockLocations: uniqBy(stockLocations, "id") ?? [],
+    isLoading,
+    error,
+  };
+}
+
+// getLocationWithIdByUuid
+export function useLocationWithIdByUuid(id: string) {
+  const apiUrl = `ws/rest/v1/stockmanagement/location/${id}`;
+  const { data, error, isLoading } = useSWR<
+    {
+      data: PageableResult<OpenMRSLocation>;
+    },
+    Error
+  >(apiUrl, openmrsFetch);
+  return {
+    items: data.data ? data.data : [],
+    isLoading,
+    isError: error,
+  };
+}
+
+//  deleteLocation
+export function deleteLocation(id: string) {
+  const apiUrl = `ws/rest/v1/stockmanagement/location/${id}`;
+  const abortController = new AbortController();
+  return openmrsFetch(apiUrl, {
+    method: "DELETE",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    signal: abortController.signal,
+  });
+}
+
+// getLocationTags
+export function useLocationTags(q: string) {
+  const apiUrl = `ws/rest/v1/locationtag?v=default${
+    q && q.length > 0 ? "&q=" + encodeURIComponent(q) : ""
+  }`;
+  const { data, error, isLoading } = useSWR<
+    {
+      data: PageableResult<OpenMRSLocationTag>;
+    },
+    Error
+  >(apiUrl, openmrsFetch);
+  return {
+    items: data.data ? data.data : [],
+    isLoading,
+    isError: error,
+  };
+}
+
+// getRoles
+export function useRoles(filter: ResourceFilterCriteria) {
+  const apiUrl = `ws/rest/v1/role${toQueryParams(filter)}`;
+  const { data, error, isLoading } = useSWR<
+    {
+      data: PageableResult<Role>;
+    },
+    Error
+  >(apiUrl, openmrsFetch);
+  return {
+    items: data?.data || <PageableResult<Role>>{},
+    isLoading,
+    isError: error,
+  };
+}
+
+// getStockOperationTypes
+export function useStockOperationTypes() {
+  const apiUrl = `ws/rest/v1/stockmanagement/stockoperationtype?v=default`;
+  const { data, isLoading, error } = useSWR<
+    {
+      data: PageableResult<StockOperationType>;
+    },
+    Error
+  >(apiUrl, openmrsFetch);
+  return {
+    types: data?.data || <PageableResult<StockOperationType>>{},
+    isLoading,
+    isError: error,
+  };
+}
+
+export function getStockOperationTypes(): Promise<
+  FetchResponse<PageableResult<StockOperationType>>
+> {
+  const apiUrl = `ws/rest/v1/stockmanagement/stockoperationtype?v=default`;
+  return openmrsFetch(apiUrl);
+}
+
+// getUsers
+export function useUsers(filter: UserFilterCriteria) {
+  const apiUrl = `ws/rest/v1/user${toQueryParams(filter)}`;
+  const { data, error, isLoading } = useSWR<
+    {
+      data: PageableResult<User>;
+    },
+    Error
+  >(apiUrl, openmrsFetch);
+  return {
+    items: data?.data || <PageableResult<User>>{},
+    isLoading,
+    isError: error,
+  };
+}
+
+// getUser
+export function useUser(id: string) {
+  const apiUrl = `ws/rest/v1/user${id}`;
+  const { data, error, isLoading } = useSWR<
+    {
+      data: User;
+    },
+    Error
+  >(apiUrl, openmrsFetch);
+  return {
+    data: data?.data || <User>{},
+    isLoading,
+    isError: error,
+  };
+}
+
+// getConceptById
+export function useConceptById(id: string) {
+  const apiUrl = `ws/rest/v1/concept/${id}`;
+  const { data, error, isLoading } = useSWR<
+    {
+      data: Concept;
+    },
+    Error
+  >(apiUrl, openmrsFetch);
+  return {
+    items: data?.data || <Concept>{},
+    isLoading,
+    isError: error,
+  };
+}
+
+// getParties
+export function useParties() {
+  const apiUrl = `ws/rest/v1/stockmanagement/party?v=default`;
+  const { data, error, isLoading } = useSWR<
+    {
+      data: PageableResult<Party>;
+    },
+    Error
+  >(apiUrl, openmrsFetch);
+  return {
+    items: data?.data || <PageableResult<Party>>{},
+    isLoading,
+    isError: error,
+  };
+}
+
+export function getParties(): Promise<FetchResponse<PageableResult<Party>>> {
+  const apiUrl = `ws/rest/v1/stockmanagement/party?v=default`;
+  return openmrsFetch(apiUrl);
+}
+
+// getDrugs
+export function useDrugs(filter: DrugFilterCriteria) {
+  const apiUrl = `ws/rest/v1/drug${toQueryParams(filter)}`;
+  const { data, error, isLoading } = useSWR<
+    {
+      data: PageableResult<Drug>;
+    },
+    Error
+  >(apiUrl, openmrsFetch);
+  return {
+    items: data?.data || <PageableResult<Drug>>{},
+    isLoading,
+    isError: error,
+  };
+}
+
+// getConcepts
+export function useConcepts(filter: ConceptFilterCriteria) {
+  const apiUrl = `ws/rest/v1/concept${toQueryParams(filter)}`;
+  const { data, error, isLoading } = useSWR<
+    {
+      data: PageableResult<Concept>;
+    },
+    Error
+  >(apiUrl, openmrsFetch);
+  return {
+    items: data?.data || <PageableResult<Concept>>{},
+    isLoading,
+    isError: error,
+  };
+}
+
+// getPatients
+export function usePatients(filter: ConceptFilterCriteria) {
+  const apiUrl = `ws/rest/v1/patient${toQueryParams(filter)}`;
+  const { data, error, isLoading } = useSWR<
+    {
+      data: PageableResult<Patient>;
+    },
+    Error
+  >(apiUrl, openmrsFetch);
+  return {
+    items: data.data ? data.data : [],
+    isLoading,
+    isError: error,
+  };
+}
+
+type UserRole = {
+  results: Array<{
+    userUuid: string;
+    locations: Array<OpenmrsResource>;
+    operationTypes: Array<{
+      uuid: string;
+      operationTypeName: string;
+      operationTypeUuid: string;
+    }>;
+  }>;
+};
+
+export const useUserRoles = () => {
+  const { user: loggedInUser } = useSession();
+  const url = `/ws/rest/v1/stockmanagement/userrolescope`;
+  const { data, isLoading, error } = useSWR<{ data: UserRole }>(
+    url,
+    openmrsFetch
+  );
+  const currentUserRoles = data?.data?.results.find(
+    (user) => user.userUuid === loggedInUser.uuid
+  );
+  return {
+    userRoles: currentUserRoles,
+    isLoading,
+    error,
+  };
+};

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

@@ -0,0 +1,29 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Layer, ClickableTile } from "@carbon/react";
+import { ArrowRight } from "@carbon/react/icons";
+
+const StockManagementCardLink: React.FC = () => {
+  const { t } = useTranslation();
+  const header = t("manageStock", "Manage Stock");
+  return (
+    <Layer>
+      <ClickableTile
+        href={window.getOpenmrsSpaBase() + "stock-management"}
+        rel="noopener noreferrer"
+      >
+        <div>
+          <div className="heading">{header}</div>
+          <div className="content">
+            {t("stockManagement", "Stock Management")}
+          </div>
+        </div>
+        <div className="iconWrapper">
+          <ArrowRight size={16} />
+        </div>
+      </ClickableTile>
+    </Layer>
+  );
+};
+
+export default StockManagementCardLink;

package/src/stock-management-header/stock-management-Illustration.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+const StockManagementIllustration: React.FC = () => {
+  return (
+    <svg
+      width="72"
+      height="72"
+      viewBox="0 0 62 58"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <path id="whv9q6f4ta" d="M0 0h62v30.508H0z" />
+        <path id="hp71ojgcnc" d="M0 0h24.603v26.571H0z" />
+      </defs>
+      <g fill="none">
+        <g opacity=".193" transform="matrix(-1 0 0 1 62 26.571)">
+          <path
+            d="M62 0c0 16.85-13.916 30.508-31.037 30.508S0 16.849 0 0h62z"
+            fill="var(--brand-03)"
+            mask="url(#rt0c8mo6eb)"
+          />
+        </g>
+        <g opacity=".396" transform="matrix(-1 0 0 1 60.032 0)">
+          <path
+            d="m24.603 26.571-13.35-23.51C9.592.141 5.884-.869 3.011.817.138 2.503-.855 6.272.804 9.193l9.874 17.378"
+            fill="var(--brand-03)"
+            mask="url(#hgianthqwd)"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default StockManagementIllustration;

package/src/stock-management-header/stock-management-header.component.tsx

@@ -0,0 +1,37 @@
+import { formatDate, useSession } from "@openmrs/esm-framework";
+import React from "react";
+import styles from "./stock-management-header.scss";
+import StockManagementIllustration from "./stock-management-Illustration";
+import { Calendar, Location } from "@carbon/react/icons";
+import { useTranslation } from "react-i18next";
+
+export const StockManagementHeader: React.FC = () => {
+  const { t } = useTranslation();
+  const userSession = useSession();
+  const userLocation = userSession?.sessionLocation?.display;
+
+  return (
+    <div className={styles.header}>
+      <div className={styles["left-justified-items"]}>
+        <StockManagementIllustration />
+        <div className={styles["page-labels"]}>
+          <p>{t("home", "Home")}</p>
+          <p className={styles["page-name"]}>
+            {t("stockManagement", "Stock Management")}
+          </p>
+        </div>
+      </div>
+      <div className={styles["right-justified-items"]}>
+        <div className={styles["date-and-location"]}>
+          <Location size={16} />
+          <span className={styles.value}>{userLocation}</span>
+          <span className={styles.middot}>&middot;</span>
+          <Calendar size={16} />
+          <span className={styles.value}>
+            {formatDate(new Date(), { mode: "standard" })}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/stock-management-header/stock-management-header.scss

@@ -0,0 +1,58 @@
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.header {
+  @include type.type-style('body-compact-02');
+  color: colors.$gray-70;
+  height: spacing.$spacing-12;
+  background-color: $ui-02;
+  display: flex;
+  padding-left: 8px;
+  justify-content: space-between;
+}
+
+.left-justified-items {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+}
+
+.right-justified-items {
+  @include type.type-style('body-compact-02');
+  color: colors.$gray-70;
+  margin: 0.5rem;
+}
+
+.page-name {
+  @include type.type-style('heading-04');
+}
+
+.page-labels {
+  margin: 1rem;
+}
+
+.middot {
+  margin: 0 0.5rem;
+}
+
+.date-and-location {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-right: 1rem;
+}
+
+.value {
+  margin-left: 0.25rem;
+}
+
+.middot {
+  margin: 0 0.5rem;
+}
+
+.view {
+  @include type.type-style('label-01');
+}

package/src/stock-management.component.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+import { ExtensionSlot } from "@openmrs/esm-framework";
+
+export default function StockManagement() {
+  return <ExtensionSlot name="stock-management-dashboard-slot" />;
+}