@kenyaemr/esm-pharmacy-app 5.2.1-pre.724

package/src/pharamacy-forms/pharamacy-assignment-form.workspace.tsx

@@ -0,0 +1,121 @@
+import { Button, ButtonSet, Column, Form, RadioButton, RadioButtonGroup, Stack } from '@carbon/react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { DefaultWorkspaceProps, showSnackbar, showToast } from '@openmrs/esm-framework';
+import React from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { mutate } from 'swr';
+import { z } from 'zod';
+import { Autosuggest } from '../autosuggest/autosuggest.component';
+import { fetchPerson, fetchUser, pharmacyAssignmentFormSchema, saveMapping } from '../pharmacy.resources';
+import styles from './pharmacy-assignment-form.scss';
+
+type FormType = z.infer<typeof pharmacyAssignmentFormSchema>;
+
+interface PharmacyAssignmentFormProps extends DefaultWorkspaceProps {
+  type: 'org.openmrs.User' | 'org.openmrs.Patient';
+  pharmacyUuid: string;
+}
+
+const PharmacyAssignmentForm: React.FC<PharmacyAssignmentFormProps> = ({
+  closeWorkspace,
+  closeWorkspaceWithSavedChanges,
+  promptBeforeClosing,
+  type,
+  pharmacyUuid,
+}) => {
+  const form = useForm<FormType>({
+    defaultValues: {
+      basisIdentifier: pharmacyUuid,
+      entityIdentifier: '',
+      entityType: type,
+    },
+    resolver: zodResolver(pharmacyAssignmentFormSchema),
+  });
+  const { t } = useTranslation();
+  const onSubmit = async (values: FormType) => {
+    try {
+      const message = await saveMapping(values);
+      showSnackbar({ kind: 'success', subtitle: message, title: 'Success' });
+      closeWorkspace();
+      mutate((key) => {
+        return typeof key === 'string' && key.startsWith(`/ws/rest/v1/datafilter/search?type=${values.entityType}`);
+      });
+    } catch (error) {
+      showSnackbar({ kind: 'error', subtitle: error.message, title: 'Failure', isLowContrast: true });
+    }
+  };
+
+  const searchPatient = async (query: string) => {
+    const abortController = new AbortController();
+    return await fetchPerson(query, abortController);
+  };
+
+  const searchUser = async (query: string) => {
+    const abortController = new AbortController();
+    return await fetchUser(query, abortController);
+  };
+
+  const observableEntityType = form.watch('entityType');
+  return (
+    <Form style={{ height: '100%' }} onSubmit={form.handleSubmit(onSubmit, (err) => console.error(err))}>
+      <span className={styles.contactFormTitle}>{t('formTitle', 'Fill in the form details')}</span>
+      <Stack gap={4} className={styles.grid}>
+        <Column>
+          <Controller
+            control={form.control}
+            name="entityType"
+            render={({ field }) => (
+              <RadioButtonGroup
+                className={styles.radioButtonGroup}
+                legendText={t('entityType', 'Entity Type')}
+                {...field}
+                defaultSelected={field.value}
+                invalid={form.formState.errors[field.name]?.message}
+                invalidText={form.formState.errors[field.name]?.message}>
+                <RadioButton labelText={t('user', 'User')} value="org.openmrs.User" id="org.openmrs.User" />
+                <RadioButton labelText={t('user', 'Patient')} value="org.openmrs.Patient" id="org.openmrs.Patient" />
+              </RadioButtonGroup>
+            )}
+          />
+        </Column>
+        <Column>
+          <Controller
+            control={form.control}
+            name="entityIdentifier"
+            render={({ field }) => (
+              <Autosuggest
+                className={styles.input}
+                labelText={t('fullName', 'Full name')}
+                placeholder={t('fullNamePlaceHolder', 'Firstname Familyname')}
+                invalid={Boolean(form.formState.errors[field.name]?.message)}
+                invalidText={form.formState.errors[field.name]?.message}
+                getDisplayValue={(item) =>
+                  observableEntityType == 'org.openmrs.Patient' ? item.display : item.person.display
+                }
+                getFieldValue={(item) => item.uuid}
+                getSearchResults={observableEntityType == 'org.openmrs.Patient' ? searchPatient : searchUser}
+                onClear={() => field.onChange('')}
+                onSuggestionSelected={(field_, value) => {
+                  if (value) {
+                    field.onChange(value);
+                  }
+                }}
+              />
+            )}
+          />
+        </Column>
+      </Stack>
+      <ButtonSet className={styles.buttonSet}>
+        <Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
+          {t('discard', 'Discard')}
+        </Button>
+        <Button className={styles.button} kind="primary" type="submit">
+          {t('submit', 'Submit')}
+        </Button>
+      </ButtonSet>
+    </Form>
+  );
+};
+
+export default PharmacyAssignmentForm;

package/src/pharamacy-forms/pharmacy-assignment-form.scss

@@ -0,0 +1,125 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@carbon/layout';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.heading {
+  @include type.type-style('heading-compact-01');
+  margin: spacing.$spacing-05 0 spacing.$spacing-05;
+}
+
+.warningContainer {
+  background-color: $carbon--red-50;
+  padding: spacing.$spacing-04;
+  margin: spacing.$spacing-03 0 spacing.$spacing-03;
+  display: flex;
+  justify-content: space-between;
+  .warning {
+    @include type.type-style('heading-compact-01');
+    color: $ui-05;
+  }
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 50%;
+}
+
+.grid {
+  margin: 0 spacing.$spacing-05;
+  padding: 0rem;
+  row-gap: 1rem;
+}
+
+.inputRow {
+  margin-top: spacing.$spacing-05;
+  width: 50%; // Adjust width as per your design requirements
+}
+
+.datePickersRow {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: spacing.$spacing-05; // Adjust gap between columns
+  align-items: center;
+}
+
+.datePickerInput {
+  width: 100%;
+}
+
+.button {
+  height: spacing.$spacing-10;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 20%;
+}
+
+.inlineActions {
+  display: flex;
+  gap: spacing.$spacing-05; /* Adjust the spacing as needed */
+}
+
+.contactFormTitle {
+  @include type.type-style('heading-02');
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: spacing.$spacing-05;
+  row-gap: 1.5rem;
+  position: relative;
+
+  &::after {
+    content: '';
+    display: block;
+    width: 2rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+    position: absolute;
+    bottom: -0.75rem;
+    left: 0;
+  }
+
+  & > span {
+    @include type.type-style('body-01');
+  }
+}
+
+.sectionHeader {
+  @include type.type-style('heading-02');
+}
+
+:global(.omrs-breakpoint-lt-desktop) {
+  .form {
+    height: var(--tablet-workspace-window-height);
+  }
+}
+
+.buttonSet {
+  width: 100%;
+  padding-top: spacing.$spacing-05;
+  background-color: $ui-02;
+  justify-content: space-between;
+  bottom: 0;
+  position: absolute;
+  & > button {
+    max-width: 50% !important;
+    width: 50%;
+  }
+}
+
+/* New Styles for Facility and Visit Type */
+.facilityVisitRow {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: spacing.$spacing-05; /* Adjust gap between columns */
+}
+
+.facilityColumn {
+  flex: 1 1 0%; /* Makes columns take up equal space */
+}
+
+.radioButtonGroup {
+  margin-top: spacing.$spacing-04;
+}

package/src/pharmacy-component/pharmacy.component.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { PhamacyHeader } from '../pharmacy-header/pharmacy-header.component';
+import PharmaciesTable from '../pharmacy-tables/pharmacy-table.component';
+
+const PharmacyComponent: React.FC = () => {
+  return (
+    <div className={`omrs-main-content`}>
+      <PhamacyHeader title={'Pharmacy'} />
+      <PharmaciesTable />
+    </div>
+  );
+};
+
+export default PharmacyComponent;

package/src/pharmacy-detail/pharmacy-detail.component.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import PharmacyDetailHeader from '../pharmacy-detail-header/pharmacy-detail-header.component';
+import { PharmacyTabs } from '../pharmacy-tabs/pharmacy-tabs-component';
+
+const PharmacyDetail = () => {
+  return (
+    <div>
+      <PharmacyDetailHeader />
+      <PharmacyTabs />
+    </div>
+  );
+};
+
+export default PharmacyDetail;

package/src/pharmacy-detail-header/pharmacy-detail-header.component.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import styles from '../pharmacy-header/pharmacy-header.scss';
+import { Calendar, Location } from '@carbon/react/icons';
+import { formatDate, useSession } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { usePharmacy } from '../hooks';
+import { useParams } from 'react-router-dom';
+import { SkeletonText } from '@carbon/react';
+
+const PharmacyDetailHeader = () => {
+  const { t } = useTranslation();
+  const userSession = useSession();
+  const userLocation = userSession?.sessionLocation?.display;
+  const { pharmacyUuid } = useParams();
+  const { error, isLoading, pharmacy } = usePharmacy(pharmacyUuid);
+
+  if (isLoading) {
+    return <SkeletonText style={{ height: '40px' }} />;
+  }
+  return (
+    <div className={styles.header}>
+      <div className={styles['left-justified-items']}>
+        <div className={styles['page-labels']}>
+          <p>{t('pharmacy', 'Community pharmacy')}</p>
+          <p className={styles['page-name']}>{pharmacy.name}</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>
+  );
+};
+
+export default PharmacyDetailHeader;

package/src/pharmacy-header/pharmacy-header.component.tsx

@@ -0,0 +1,36 @@
+import { Calendar, Location } from '@carbon/react/icons';
+import { formatDate, useSession } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './pharmacy-header.scss';
+import PharmacyIllustration from './pharmacy-illustration.component';
+
+interface PharmacyHeaderProps {
+  title: string;
+}
+export const PhamacyHeader: React.FC<PharmacyHeaderProps> = ({ title }) => {
+  const { t } = useTranslation();
+  const userSession = useSession();
+  const userLocation = userSession?.sessionLocation?.display;
+
+  return (
+    <div className={styles.header}>
+      <div className={styles['left-justified-items']}>
+        <PharmacyIllustration />
+        <div className={styles['page-labels']}>
+          <p>{t('pharmacy', 'Commity pharmacy')}</p>
+          <p className={styles['page-name']}>{title}</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/pharmacy-header/pharmacy-header.scss

@@ -0,0 +1,71 @@
+@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: $text-02;
+  height: spacing.$spacing-12;
+  background-color: $ui-02;
+  border: 1px solid $ui-03;
+  border-left: 0px;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 2rem;
+}
+
+.left-justified-items {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-left: 0.75rem;
+}
+
+.right-justified-items {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  padding-top: 1rem;
+}
+
+.page-name {
+  @include type.type-style('heading-04');
+}
+
+.page-labels {
+  margin-left: 1rem;
+
+  p:first-of-type {
+    margin-bottom: 0.25rem;
+  }
+}
+
+.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');
+}
+
+svg.iconOverrides {
+  width: 72 !important;
+  height: 72 !important;
+  fill: var(--brand-03);
+}
+
+.svgContainer svg {
+  width: 72px;
+  height: 72px;
+  fill: var(--brand-03);
+}

package/src/pharmacy-header/pharmacy-illustration.component.tsx

@@ -0,0 +1,13 @@
+import { Hospital } from '@carbon/react/icons';
+import React from 'react';
+import styles from './pharmacy-header.scss';
+
+const PharmacyIllustration: React.FC = () => {
+  return (
+    <div className={styles.svgContainer}>
+      <Hospital className={styles.iconOverrides} />
+    </div>
+  );
+};
+
+export default PharmacyIllustration;

package/src/pharmacy-left-panel/pharmacy-left-panel-link.component.tsx

@@ -0,0 +1,40 @@
+import { ConfigurableLink } from '@openmrs/esm-framework';
+import last from 'lodash-es/last';
+import React, { useMemo } from 'react';
+import { BrowserRouter, useLocation } from 'react-router-dom';
+
+export interface LinkConfig {
+  name: string;
+  title: string;
+}
+
+export function LinkExtension({ config }: { config: LinkConfig }) {
+  const { name, title } = config;
+  const location = useLocation();
+  const spaBasePath = window.getOpenmrsSpaBase() + 'home';
+
+  let urlSegment = useMemo(() => decodeURIComponent(last(location.pathname.split('/'))), [location.pathname]);
+
+  const isUUID = (value) => {
+    const regex = /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/;
+    return regex.test(value);
+  };
+
+  if (isUUID(urlSegment)) {
+    urlSegment = 'pharmacy';
+  }
+  return (
+    <ConfigurableLink
+      to={spaBasePath + '/' + name}
+      className={`cds--side-nav__link ${name === urlSegment && 'active-left-nav-link'}`}>
+      {title}
+    </ConfigurableLink>
+  );
+}
+
+export const createLeftPanelLink = (config: LinkConfig) => () =>
+  (
+    <BrowserRouter>
+      <LinkExtension config={config} />
+    </BrowserRouter>
+  );