@openmrs/esm-dispensing-app 1.0.0-pre.21 → 1.0.0-pre.28

package/src/components/order-expanded.component.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { PatientUuid } from "@openmrs/esm-framework";
+import { Tab, Tabs } from "carbon-components-react";
+import { useTranslation } from "react-i18next";
+import HistoryAndComments from "./history-and-comments.component";
+import styles from "./order-expanded.scss";
+import PatientDetails from "./patient-details.component";
+import PrescriptionDetails from "./prescription-details.component";
+
+interface TabItem {
+  name: string;
+  component: JSX.Element;
+}
+
+const OrderExpanded: React.FC<{
+  encounterUuid: string;
+  patientUuid: PatientUuid;
+}> = ({ encounterUuid, patientUuid }) => {
+  const { t } = useTranslation();
+
+  const tabs: TabItem[] = [
+    {
+      name: t("prescriptionDetails", "Prescription details"),
+      component: <PrescriptionDetails encounterUuid={encounterUuid} />,
+    },
+    {
+      name: t("historyComments", "History and comments"),
+      component: <HistoryAndComments />,
+    },
+    {
+      name: t("patientDetails", "Patient details"),
+      component: <PatientDetails patientUuid={patientUuid} />,
+    },
+    // {
+    //   name: t("billing", "Billing"),
+    //   component: <div>Billing</div>,
+    // },
+  ];
+
+  return (
+    <div className={styles.expandedContainer}>
+      <Tabs className={styles.tabsContainer}>
+        {tabs.map((tab: TabItem, index: number) => (
+          <Tab key={index} label={tab.name} className={styles.orderTabs}>
+            {tab.component}
+          </Tab>
+        ))}
+      </Tabs>
+    </div>
+  );
+};
+
+export default OrderExpanded;

package/src/components/order-expanded.scss

@@ -0,0 +1,57 @@
+@import 'carbon-components/css/carbon-components.css';
+@import 'carbon-components/scss/globals/scss/typography.scss';
+@import "~@openmrs/esm-styleguide/src/vars";
+
+
+.prescriptionContainer {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
+
+:global(.bx--tab-content) {
+  width: 100% !important;
+}
+
+:global(.bx--child-row-inner-container) > div {
+  display: flex;
+  flex-direction: row;
+}
+
+.tabsContainer {
+  margin: 1rem 0;
+  width: 20%;
+
+  &:global(.bx--tabs--scrollable .bx--tabs--scrollable__nav-item+.bx--tabs--scrollable__nav-item) {
+    margin-left: 0rem !important;
+  }
+
+  > ul {
+    flex-direction: column !important;
+  }
+
+  > ul > li button {
+    width: 12rem !important;
+  }
+
+  :global(.bx--tabs--scrollable__nav-item--selected) {
+      border-bottom: 0px !important;
+      border-left: 3px solid var(--brand-03) !important;
+  }
+}
+
+.orderTabs {
+  flex-direction: row;
+
+  button {
+    border-bottom: 0 !important;
+    border-left: 3px solid $ui-03 !important;
+  }
+
+  button,
+  button:focus,
+  button:active {
+    outline: 0 !important;
+    outline-offset: 0 !important;
+  }
+}

package/src/components/patient-details.component.tsx

@@ -0,0 +1,106 @@
+import React, { useEffect } from "react";
+import {
+  attach,
+  ConfigurableLink,
+  detach,
+  ExtensionSlot,
+  formatDate,
+  interpolateString,
+  parseDate,
+  PatientUuid,
+  useConfig,
+  usePatient,
+} from "@openmrs/esm-framework";
+import styles from "./patient-details.scss";
+import { useTranslation } from "react-i18next";
+import { Patient } from "../types";
+
+const PatientDetails: React.FC<{
+  patientUuid: PatientUuid;
+}> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  const config = useConfig();
+  const { patient } = usePatient(patientUuid);
+
+  const patientName = patient;
+  const patientPhotoSlotState = React.useMemo(
+    () => ({ patientUuid, patientName }),
+    [patientUuid, patientName]
+  );
+
+  const [showContactDetails, setShowContactDetails] = React.useState(false);
+  const toggleContactDetails = React.useCallback((event: MouseEvent) => {
+    event.stopPropagation();
+    setShowContactDetails((value) => !value);
+  }, []);
+
+  const patientAvatar = (
+    <div className={styles.patientAvatar} role="img">
+      <ExtensionSlot
+        extensionSlotName="patient-photo-slot"
+        state={patientPhotoSlotState}
+      />
+    </div>
+  );
+
+  const getGender = (gender) => {
+    switch (gender) {
+      case "M":
+        return t("male", "Male");
+      case "F":
+        return t("female", "Female");
+      case "O":
+        return t("other", "Other");
+      case "U":
+        return t("unknown", "Unknown");
+      default:
+        return gender;
+    }
+  };
+
+  useEffect(() => {
+    attach("dispensing-patient-banner-slot", "patient-banner");
+    attach("dispensing-patient-vitals-slot", "vitals-overview-widget");
+    attach("dispensing-patient-allergies-slot", "allergies-overview-widget");
+
+    return () => {
+      detach("dispensing-patient-banner-slot", "patient-banner");
+      detach("dispensing-patient-vitals-slot", "vitals-overview-widget");
+      detach("dispensing-patient-allergies-slot", "allergies-overview-widget");
+    };
+  }, []);
+
+  return (
+    <div>
+      {patient && (
+        <div className={styles.patientDetailsContainer}>
+          <ExtensionSlot
+            extensionSlotName="dispensing-patient-banner-slot"
+            state={{
+              patient,
+              patientUuid: patientUuid,
+            }}
+          />
+
+          <ExtensionSlot
+            extensionSlotName="dispensing-patient-vitals-slot"
+            state={{
+              patient,
+              patientUuid: patientUuid,
+            }}
+          />
+
+          <ExtensionSlot
+            extensionSlotName="dispensing-patient-allergies-slot"
+            state={{
+              patient,
+              patientUuid: patientUuid,
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PatientDetails;

package/src/components/patient-details.scss

@@ -0,0 +1,105 @@
+@import 'carbon-components/css/carbon-components.css';
+@import 'carbon-components/scss/globals/scss/typography.scss';
+@import "~@openmrs/esm-styleguide/src/vars";
+
+
+.patientDetailsContainer > div {
+  margin-bottom: 1rem;
+}
+
+
+
+
+
+
+
+.container {
+  border-bottom: 0.063rem solid $ui-03;
+  background-color: $ui-02;
+  display: grid;
+  grid-template-columns: 1fr auto;
+}
+
+.patientBanner {
+  text-decoration: none;
+  display: grid;
+  grid-template-columns: auto 1fr;
+}
+
+.patientName {
+  @include carbon--type-style('productive-heading-03');
+  margin-right: 0.25rem;
+  color: $text-01;
+}
+
+.patientAvatar {
+  width: 5rem;
+  height: 5rem;
+  margin: 1rem;
+  border-radius: 1px;
+}
+
+.patientAvatarButton {
+  cursor: pointer;
+  border: none;
+  padding: 0px;
+  background: none;
+}
+
+.patientInfo {
+  width: 100%;
+  padding-right: 1rem;
+}
+
+.demographics {
+  @include carbon--type-style('body-short-02');
+  color: $text-02;
+  margin-top: 0.375rem;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.patientNameRow {
+  margin-top: $spacing-05;
+}
+
+.flexRow {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+}
+
+.identifiers {
+  @include carbon--type-style('body-short-02');
+  color: $ui-04;
+  margin-top: 0.375rem;
+}
+
+.tooltipPadding {
+  padding: 0.25rem;
+}
+
+.tooltipSmallText {
+  font-size: 80%;
+}
+
+.actionsButtonText {
+  @include carbon--type-style('body-short-01');
+  color: $interactive-01;
+}
+
+:global(.bx--tooltip--definition .bx--tooltip__trigger) {
+  border-bottom: none;
+}
+
+.buttonCol {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+}

package/src/components/prescription-details.component.tsx

@@ -0,0 +1,47 @@
+import { DataTableSkeleton, Tile } from "carbon-components-react";
+import React from "react";
+import styles from "./prescription-details.scss";
+import { WarningFilled24 } from "@carbon/icons-react";
+import { useOrderDetails } from "../medication-request/medication-request.resource";
+import { useTranslation } from "react-i18next";
+import MedicationCard from "./medication-card.component";
+
+const PrescriptionDetails: React.FC<{ encounterUuid: string }> = ({
+  encounterUuid,
+}) => {
+  const { t } = useTranslation();
+  const { medications, isError, isLoading } = useOrderDetails(encounterUuid);
+
+  return (
+    <div className={styles.prescriptionContainer}>
+      <Tile className={styles.allergiesTile}>
+        <div className={styles.allergesContent}>
+          <div>
+            <WarningFilled24 className={styles.allergiesIcon} />
+            <p>
+              <b>3 allergies</b> Penicillin, Naproxen sodium, Ibuprofen
+            </p>
+            <a href={`dispensing`} onClick={(e) => e.preventDefault()}>
+              View
+            </a>
+          </div>
+        </div>
+      </Tile>
+
+      <h5
+        style={{ paddingTop: "8px", paddingBottom: "8px", fontSize: "0.9rem" }}
+      >
+        Prescribed
+      </h5>
+
+      {isLoading && <DataTableSkeleton role="progressbar" />}
+      {isError && <p>Error</p>}
+      {medications &&
+        medications.map((medication) => {
+          return <MedicationCard medication={medication} />;
+        })}
+    </div>
+  );
+};
+
+export default PrescriptionDetails;

package/src/components/prescription-details.scss

@@ -0,0 +1,56 @@
+@import 'carbon-components/css/carbon-components.css';
+@import 'carbon-components/scss/globals/scss/typography.scss';
+@import "~@openmrs/esm-styleguide/src/vars";
+
+.prescriptionContainer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-bottom: 1rem;
+
+  &:global(.bx--tile) {
+    min-height: 3rem !important;
+    padding-left: 10px !important;
+  }
+}
+
+.prescriptionContainer > :global(.bx--tile) {
+  min-height: 3rem !important;
+  padding-left: 10px !important;
+  margin: auto;
+}
+
+.allergiesTile {
+  width: 100%;
+  height: 24px;
+  padding: 0 8px 0 0;
+  border-left: 4px solid  #f1c21b;
+  background-color: rgba(253, 209, 58, 0.3);
+  margin: auto;
+}
+
+.allergesContent {
+  margin: auto;
+  padding-top: 10px;
+
+  div {
+    display: flex;
+    flex-direction: row;
+  }
+
+  p {
+    margin-left: 10px;
+    font-size: 0.9rem;
+  }
+
+  a {
+    margin: auto;
+    color: #0f62fe;
+    text-decoration: none;
+  }
+}
+
+svg.allergiesIcon {
+  fill: #f1c21b;
+  vertical-align: middle;
+}

package/src/constants.ts

@@ -0,0 +1,3 @@
+export const spaRoot = window["getOpenmrsSpaBase"];
+export const basePath = "/dispensing";
+export const dispensingBasePath = `${window.spaBase}${basePath}`;

package/src/dispensing-link.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { ConfigurableLink } from "@openmrs/esm-framework";
+import { useTranslation } from "react-i18next";
+import { dispensingBasePath } from "./constants";
+
+export default function DispensingLink() {
+  const { t } = useTranslation();
+  return (
+    <ConfigurableLink to={dispensingBasePath}>
+      {t("dispensing", "Dispensing")}
+    </ConfigurableLink>
+  );
+}

package/src/dispensing-tiles/dispensing-tile.component.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Tile, Button } from "carbon-components-react";
+import ArrowRight16 from "@carbon/icons-react/es/arrow--right/16";
+import styles from "./dispensing-tile.scss";
+
+interface DispensingTileProps {
+  label: string;
+  value: number;
+  headerLabel: string;
+  children?: React.ReactNode;
+}
+
+const DispensingTile: React.FC<DispensingTileProps> = ({
+  label,
+  value,
+  headerLabel,
+  children,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Tile className={styles.tileContainer} light={true}>
+      <div className={styles.tileHeader}>
+        <div className={styles.headerLabelContainer}>
+          <label className={styles.headerLabel}>{headerLabel}</label>
+          {children}
+        </div>
+        <Button
+          kind="ghost"
+          renderIcon={ArrowRight16}
+          iconDescription={t("view", "View")}
+        >
+          {t("view", "View")}
+        </Button>
+      </div>
+      <div>
+        <label className={styles.totalsLabel}>{label}</label>
+        <p className={styles.totalsValue}>{value}</p>
+      </div>
+    </Tile>
+  );
+};
+
+export default DispensingTile;

package/src/dispensing-tiles/dispensing-tile.scss

@@ -0,0 +1,39 @@
+@import "~@openmrs/esm-styleguide/src/vars";
+@import "~carbon-components/src/globals/scss/vars";
+@import "~carbon-components/src/globals/scss/mixins";
+
+.tileContainer {
+  border: 0.0625rem solid $ui-03;
+  flex-grow: 1;
+  height: 7.875rem;
+  padding: 0 $spacing-05;
+  margin: $spacing-03 $spacing-03;
+}
+
+.tileHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: $spacing-03;  
+}
+
+.headerLabel {
+  @include carbon--type-style("productive-heading-01");
+  color: $text-02;
+}
+
+.totalsLabel {
+  @include carbon--type-style("label-01");
+  color: $text-02;
+}
+
+.totalsValue {
+  @include carbon--type-style("productive-heading-04");
+  color: $ui-05;
+}
+
+.headerLabelContainer {
+  display: flex;
+  align-items: center;
+  height: $spacing-07;
+}

package/src/dispensing-tiles/dispensing-tiles.component.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { DataTableSkeleton } from "carbon-components-react";
+import { useMetrics } from "./dispensing-tiles.resource";
+import DispensingTile from "./dispensing-tile.component";
+import styles from "./dispensing-tiles.scss";
+
+const DispensingTiles: React.FC = () => {
+  const { t } = useTranslation();
+  const { metrics, isError, isLoading } = useMetrics();
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  return (
+    <>
+      <div className={styles.cardContainer}>
+        <DispensingTile
+          label={t("orders", "Orders")}
+          value={metrics.orders}
+          headerLabel={t(
+            "prescriptionsToFillToday",
+            "Prescriptions to fill today"
+          )}
+        />
+        <DispensingTile
+          label={t("today", "Today")}
+          value={metrics.orders_for_home_delivery}
+          headerLabel={t("ordersForHomeDelivery", "Orders for home delivery")}
+        />
+        <DispensingTile
+          label={t("last14Days", "Last 14 days")}
+          value={metrics.missed_collections}
+          headerLabel={t("missedCollections", "Missed collections")}
+        />
+      </div>
+    </>
+  );
+};
+
+export default DispensingTiles;

package/src/dispensing-tiles/dispensing-tiles.resource.tsx

@@ -0,0 +1,33 @@
+import useSWR from "swr";
+import useSWRImmutable from "swr/immutable";
+import { FetchResponse, openmrsFetch } from "@openmrs/esm-framework";
+
+export function useMetrics() {
+  const metrics = {
+    orders: 43,
+    orders_for_home_delivery: 4,
+    missed_collections: 12,
+  };
+  const { data, error } = useSWR<{ data: { results: {} } }, Error>(
+    `/ws/rest/v1/queue?`,
+    openmrsFetch
+  );
+
+  return {
+    metrics: metrics,
+    isError: error,
+    isLoading: !data && !error,
+  };
+}
+
+export function useServices() {
+  const serviceConceptSetUuid = "330c0ec6-0ac7-4b86-9c70-29d76f0ae20a";
+  const apiUrl = `/ws/rest/v1/concept/${serviceConceptSetUuid}`;
+  const { data } = useSWRImmutable<FetchResponse>(apiUrl, openmrsFetch);
+
+  return {
+    services: data
+      ? data?.data?.setMembers?.map((setMember) => setMember?.display)
+      : [],
+  };
+}

package/src/dispensing-tiles/dispensing-tiles.scss

@@ -0,0 +1,12 @@
+@import "~@openmrs/esm-styleguide/src/vars";
+@import "~carbon-components/src/globals/scss/vars";
+@import "~carbon-components/src/globals/scss/mixins";
+
+.cardContainer {
+  background-color: $ui-02 ;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 $spacing-05 $spacing-10 $spacing-03; 
+  flex-flow: row wrap;
+  margin-top: -$spacing-03;
+}

package/src/dispensing.component.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import styles from "./dispensing.scss";
+import { PharmacyHeader } from "./pharmacy-header/pharmacy-header.component";
+import DispensingTiles from "./dispensing-tiles/dispensing-tiles.component";
+import PrescriptionTabLists from "./prescriptions/prescription-tab-lists.component";
+
+export default function Dispensing() {
+  return (
+    <div className={`omrs-main-content ${styles.dispensingContainer}`}>
+      <PharmacyHeader />
+      <DispensingTiles />
+      <PrescriptionTabLists />
+    </div>
+  );
+}

package/src/dispensing.scss

@@ -1,3 +1,3 @@
-.container {
-  padding: 2em;
+.dispensingContainer {
+  //
 }

package/src/dispensing.test.tsx

@@ -22,7 +22,7 @@
  */
 import React from "react";
 import { render } from "@testing-library/react";
-import Dispensing from "./dispensing";
+import Dispensing from "./dispensing.component";
 
 describe("<div/>", () => {
   it("does nothing", () => {