(fix) Various fixes to the stock management dashboard

README.md

@@ -1,3 +1,3 @@
 # UgandaEMR Stock Management
 
-A frontend module that handles stock management in UgandaEMR+. This frontend module uses the [Community backend module](https://github.com/METS-Programme/openmrs-module-ugandaemr-commodity).
+A frontend module that handles stock management in UgandaEMR+. This frontend module uses the [Community backend module](https://github.com/METS-Programme/openmrs-module-ugandaemr-stock-management).

package.json

@@ -7,7 +7,7 @@
   "main": "src/index.ts",
   "source": true,
   "scripts": {
-    "start": "openmrs develop --backend https://ugandaemr-backend.mets.or.ug",
+    "start": "openmrs develop",
     "serve": "webpack serve --mode=development",
     "build": "webpack --mode production",
     "analyze": "webpack --mode=production --env analyze=true",

src/index.ts

@@ -15,18 +15,18 @@ export const importTranslation = require.context(
   "lazy"
 );
 
-export const stockManagement = getAsyncLifecycle(
-  () => import("./stock-management.component"),
+export const stockManagementAdminCardLink = getAsyncLifecycle(
+  () => import("./stock-management-admin-card-link.component"),
   options
 );
 
-export const stockManagementLink = getAsyncLifecycle(
-  () => import("./stock-management-link.component"),
+export const stockManagement = getAsyncLifecycle(
+  () => import("./stock-management.component"),
   options
 );
 
 export const stockManagementDashboard = getAsyncLifecycle(
-  () => import("./dashbooard/stock-management-dashboard.component"),
+  () => import("./dashboard/stock-management-dashboard.component"),
   options
 );
 

src/routes.json

@@ -14,6 +14,11 @@
       "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"
     }
   ],
   "pages": [

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

@@ -3,14 +3,13 @@ import { useTranslation } from "react-i18next";
 import { Layer, ClickableTile } from "@carbon/react";
 import { ArrowRight } from "@carbon/react/icons";
 
-const StockManagementAdminCardLink: React.FC = () => {
+const StockManagementCardLink: React.FC = () => {
   const { t } = useTranslation();
-  const header = t("manageForms", "Manage Forms");
+  const header = t("manageStock", "Manage stock");
   return (
     <Layer>
       <ClickableTile
-        href={`${window.spaBase}/stock-management`}
-        target="_blank"
+        href={window.getOpenmrsSpaBase() + "stock-management"}
         rel="noopener noreferrer"
       >
         <div>
@@ -27,4 +26,4 @@ const StockManagementAdminCardLink: React.FC = () => {
   );
 };
 
-export default StockManagementAdminCardLink;
+export default StockManagementCardLink;

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

@@ -3,8 +3,8 @@ import React from "react";
 const StockManagementIllustration: React.FC = () => {
   return (
     <svg
-      width="62"
-      height="58"
+      width="72"
+      height="72"
       viewBox="0 0 62 58"
       xmlns="http://www.w3.org/2000/svg"
     >

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

@@ -15,15 +15,15 @@ export const StockManagementHeader: React.FC = () => {
       <div className={styles["left-justified-items"]}>
         <StockManagementIllustration />
         <div className={styles["page-labels"]}>
-          <Location size={16} />
-          <span className={styles.value}>{userLocation}</span>
-          <p className={styles["page-name"]}>
-            {t("appName", "Stock Management")}{" "}
-          </p>
+          <p>{t("stockManagement", "Stock Management")}</p>
+          <p className={styles["page-name"]}>{t("home", "Home")}</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" })}

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

@@ -16,23 +16,25 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  cursor: pointer;
 }
 
 .right-justified-items {
   @include type.type-style('body-compact-02');
   color: $text-02;
-  padding-top: 1rem;
+  margin: 0.5rem;
 }
 
 .page-name {
   @include type.type-style('heading-04');
 }
 
 .page-labels {
-  margin-left: 8px;
-  p:first-of-type {
-    margin-bottom: 0.25rem;
-  }
+  margin: 1rem;
+}
+
+.middot {
+  margin: 0 0.5rem;
 }
 
 .date-and-location {