@kenyaemr/esm-admin-app 5.4.4-pre.5 → 5.4.4-pre.501

package/src/components/global-property/workspace/upload-logo.workspace.tsx

@@ -0,0 +1,191 @@
+import React, { useEffect, useState } from 'react';
+import { showSnackbar, useLayoutType, Workspace2, type Workspace2DefinitionProps } from '@openmrs/esm-framework';
+import {
+  Button,
+  ButtonSet,
+  FileUploader,
+  Form,
+  FormGroup,
+  InlineLoading,
+  InlineNotification,
+  RadioButton,
+  RadioButtonGroup,
+  Stack,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import classNames from 'classnames';
+
+import styles from './upload-logo.workspace.scss';
+import { ALLOWED_LOGO_TYPES, MAX_LOGO_SIZE_BYTES, type LogoTarget, uploadLogo } from '../hooks/useLogoUpload';
+
+type UploadLogoWorkspaceProps = {
+  mutateGlobalProperty?: () => void;
+};
+
+const UploadLogoWorkspace: React.FC<Workspace2DefinitionProps<UploadLogoWorkspaceProps, {}, {}>> = ({
+  closeWorkspace,
+  workspaceProps,
+}) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const mutateGlobalProperty = workspaceProps?.mutateGlobalProperty;
+
+  const [target, setTarget] = useState<LogoTarget>('prescription');
+  const [file, setFile] = useState<File | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [validationError, setValidationError] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  useEffect(() => {
+    if (!file) {
+      setPreviewUrl(null);
+      return;
+    }
+    const url = URL.createObjectURL(file);
+    setPreviewUrl(url);
+    return () => URL.revokeObjectURL(url);
+  }, [file]);
+
+  const handleFileChange = (selected: File | null) => {
+    setValidationError(null);
+    if (!selected) {
+      setFile(null);
+      return;
+    }
+    if (!ALLOWED_LOGO_TYPES.includes(selected.type)) {
+      setValidationError(t('unsupportedImageType', 'Unsupported file type. Accepted: JPEG, PNG, GIF, BMP or WebP.'));
+      setFile(null);
+      return;
+    }
+    if (selected.size > MAX_LOGO_SIZE_BYTES) {
+      setValidationError(t('imageTooLarge', 'File exceeds the 2 MB maximum size.'));
+      setFile(null);
+      return;
+    }
+    setFile(selected);
+  };
+
+  const onSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    if (!file) {
+      setValidationError(t('selectImageFirst', 'Please select an image to upload.'));
+      return;
+    }
+    setIsSubmitting(true);
+    try {
+      const { savedPath } = await uploadLogo(file, target);
+      const fileName = savedPath?.split(/[\\/]/).pop() ?? file.name;
+      showSnackbar({
+        title: t('success', 'Success'),
+        kind: 'success',
+        subtitle: t('logoUploaded', 'Image "{{fileName}}" uploaded successfully', { fileName }),
+        timeoutInMs: 5000,
+      });
+      mutateGlobalProperty?.();
+      closeWorkspace({ discardUnsavedChanges: true });
+    } catch (error: any) {
+      showSnackbar({
+        title: t('error', 'Error'),
+        kind: 'error',
+        subtitle: error?.message ?? t('logoUploadError', 'Error uploading image'),
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Workspace2 title={t('uploadImage', 'Upload image')} hasUnsavedChanges={Boolean(file)}>
+      <Form onSubmit={onSubmit} className={styles.form}>
+        <div className={styles.formContainer}>
+          <Stack gap={5}>
+            <InlineNotification
+              kind="info"
+              lowContrast
+              hideCloseButton
+              title={t('logoUploadTitle', 'Printed documents logo')}
+              subtitle={t(
+                'logoUploadDesc',
+                'Upload a logo used in printed documents. JPEG, PNG, GIF, BMP or WebP, up to 2 MB.',
+              )}
+            />
+
+            <FormGroup legendText={t('logoTarget', 'Logo destination')}>
+              <RadioButtonGroup
+                name="logo-target"
+                legendText=""
+                valueSelected={target}
+                onChange={(value: string) => setTarget(value as LogoTarget)}
+                disabled={isSubmitting}>
+                <RadioButton
+                  labelText={t('prescriptionLogo', 'Prescription logo')}
+                  value="prescription"
+                  id="logo-target-prescription"
+                />
+                <RadioButton labelText={t('receiptLogo', 'Receipt logo')} value="receipt" id="logo-target-receipt" />
+              </RadioButtonGroup>
+            </FormGroup>
+
+            <FormGroup legendText={t('image', 'Image')}>
+              <FileUploader
+                labelTitle=""
+                labelDescription={t('logoUploaderHint', 'Max file size is 2 MB. Supported: JPEG, PNG, GIF, BMP, WebP.')}
+                buttonLabel={t('addFile', 'Add file')}
+                buttonKind="tertiary"
+                size="md"
+                filenameStatus="edit"
+                accept={ALLOWED_LOGO_TYPES}
+                multiple={false}
+                disabled={isSubmitting}
+                onChange={(e: { target: HTMLInputElement; addedFiles?: File[] }) => {
+                  const selected = e.addedFiles?.[0] ?? e.target?.files?.[0] ?? null;
+                  handleFileChange(selected);
+                }}
+                onDelete={() => handleFileChange(null)}
+              />
+            </FormGroup>
+
+            {validationError && (
+              <InlineNotification
+                kind="error"
+                lowContrast
+                hideCloseButton
+                title={t('invalidImage', 'Invalid image')}
+                subtitle={validationError}
+              />
+            )}
+
+            {previewUrl && (
+              <div className={styles.previewContainer}>
+                <span className={styles.previewLabel}>{t('preview', 'Preview')}</span>
+                <img src={previewUrl} alt={t('imagePreview', 'Image preview')} className={styles.preview} />
+              </div>
+            )}
+          </Stack>
+        </div>
+
+        <ButtonSet
+          className={classNames({
+            [styles.tablet]: isTablet,
+            [styles.desktop]: !isTablet,
+          })}>
+          <Button className={styles.buttonContainer} kind="secondary" onClick={() => closeWorkspace()}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button className={styles.buttonContainer} disabled={!file || isSubmitting} kind="primary" type="submit">
+            {isSubmitting ? (
+              <span className={styles.inlineLoading}>
+                {t('uploading', 'Uploading...')}
+                <InlineLoading status="active" iconDescription="Loading" />
+              </span>
+            ) : (
+              t('upload', 'Upload')
+            )}
+          </Button>
+        </ButtonSet>
+      </Form>
+    </Workspace2>
+  );
+};
+
+export default UploadLogoWorkspace;

package/src/components/hook/healthWorkerRegistry.ts

@@ -0,0 +1,78 @@
+import { FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { HWR_API_NO_CREDENTIALS, PROVIDER_NOT_FOUND, RESOURCE_NOT_FOUND, UNKNOWN } from '../../constants';
+
+export interface ProfessionalRegistryResponse {
+  success: boolean;
+  regulator: string;
+  identification_type: string;
+  identification_number: string;
+  professional: {
+    membership: {
+      id: string;
+      full_name: string;
+      gender: string;
+      first_name: string;
+      middle_name: string;
+      last_name: string;
+      registration_id: string;
+      external_reference_id: string;
+      licensing_body: string;
+      specialty: string;
+      is_active: number;
+    };
+    licenses?: Array<{
+      id: string;
+      external_reference_id: string;
+      license_type: string;
+      license_start: string;
+      license_end: string;
+    }>;
+    professional_details?: {
+      professional_cadre?: string;
+      practice_type?: string;
+      educational_qualifications?: string;
+    };
+    contacts?: {
+      phone?: string;
+      email?: string;
+      postal_address?: string;
+    };
+    identifiers?: {
+      identification_type?: string;
+      identification_number?: string;
+    };
+  };
+}
+
+export const searchHealthCareWork = async (
+  identifierType: string,
+  identifierNumber: string,
+  regulator: string,
+): Promise<ProfessionalRegistryResponse> => {
+  const url = `${restBaseUrl}/virtualclaims/professional-registry?${new URLSearchParams({
+    identification_number: identifierNumber,
+    identification_type: identifierType,
+    regulator,
+  }).toString()}`;
+
+  try {
+    const response = await openmrsFetch<ProfessionalRegistryResponse>(url);
+    if (!response.data?.success || !response.data?.professional) {
+      throw new Error(PROVIDER_NOT_FOUND);
+    }
+    return response.data;
+  } catch (err: any) {
+    if (err?.message === PROVIDER_NOT_FOUND) {
+      throw err;
+    }
+    const status = err?.response?.status;
+    if (status === 401) {
+      throw new Error(HWR_API_NO_CREDENTIALS);
+    }
+    if (status === 404) {
+      throw new Error(RESOURCE_NOT_FOUND);
+    }
+    throw new Error(UNKNOWN);
+  }
+};

package/src/components/hook/useProfessionalRegistryEnums.ts

@@ -0,0 +1,59 @@
+import { FetchResponse, openmrsFetch, restBaseUrl, useSession } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+
+export type EnumEntry = {
+  code: string;
+  label: string;
+};
+
+type RegulatorsResponse = {
+  count: number;
+  regulators: Array<EnumEntry>;
+};
+
+type IdentificationTypesResponse = {
+  count: number;
+  identification_types: Array<EnumEntry>;
+};
+
+const ONE_DAY_MS = 24 * 60 * 60 * 1000;
+
+export const useProfessionalRegistryRegulators = () => {
+  const { authenticated } = useSession();
+  const url = `${restBaseUrl}/virtualclaims/professional-registry/regulators`;
+
+  const { data, error, isLoading } = useSWR<FetchResponse<RegulatorsResponse>>(
+    authenticated ? url : null,
+    openmrsFetch,
+    {
+      revalidateOnFocus: false,
+      dedupingInterval: ONE_DAY_MS,
+    },
+  );
+
+  return {
+    regulators: data?.data?.regulators ?? [],
+    isLoading,
+    error,
+  };
+};
+
+export const useProfessionalRegistryIdentificationTypes = () => {
+  const { authenticated } = useSession();
+  const url = `${restBaseUrl}/virtualclaims/professional-registry/identification-types`;
+
+  const { data, error, isLoading } = useSWR<FetchResponse<IdentificationTypesResponse>>(
+    authenticated ? url : null,
+    openmrsFetch,
+    {
+      revalidateOnFocus: false,
+      dedupingInterval: ONE_DAY_MS,
+    },
+  );
+
+  return {
+    identificationTypes: data?.data?.identification_types ?? [],
+    isLoading,
+    error,
+  };
+};

package/src/components/locations/forms/add-location/add-location.workspace.tsx

@@ -1,35 +1,36 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import {
-  type DefaultWorkspaceProps,
   ResponsiveWrapper,
-  useLayoutType,
-  showSnackbar,
-  useConfig,
+  Workspace2,
   restBaseUrl,
+  showSnackbar,
+  useLayoutType,
+  type Workspace2DefinitionProps,
 } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 import { Controller, useForm } from 'react-hook-form';
 import {
-  ButtonSet,
   Button,
-  InlineLoading,
-  TextInput,
+  ButtonSet,
+  FilterableMultiSelect,
+  Form,
   FormGroup,
+  InlineLoading,
   Stack,
-  Form,
-  FilterableMultiSelect,
+  TextInput,
 } from '@carbon/react';
-import classNames from 'classnames';
-import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import classNames from 'classnames';
+import { mutate } from 'swr';
+
 import styles from './add-location.workspace.scss';
 import { type LocationResponse } from '../../types';
 import { extractErrorMessagesFromResponse } from '../../helpers';
 import { useLocationTags } from '../../hooks/useLocationTags';
-import { mutate } from 'swr';
 import { saveOrUpdateLocation } from '../../hooks/useLocation';
 
-type AddLocationWorkspaceProps = DefaultWorkspaceProps & {
+type AddLocationWorkspaceProps = {
   location?: LocationResponse;
 };
 
@@ -46,16 +47,14 @@ const locationFormSchema = z.object({
 
 type LocationFormType = z.infer<typeof locationFormSchema>;
 
-const AddLocationWorkspace: React.FC<AddLocationWorkspaceProps> = ({
+const AddLocationWorkspace: React.FC<Workspace2DefinitionProps<AddLocationWorkspaceProps, {}, {}>> = ({
   closeWorkspace,
-  closeWorkspaceWithSavedChanges,
-  promptBeforeClosing,
-  location,
+  workspaceProps: { location = {} as LocationResponse },
 }) => {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
   const { locationTagList: Tags } = useLocationTags();
-
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
   const hasLocationAttributes = useMemo(() => {
     return location?.attributes && location.attributes.length > 0;
   }, [location?.attributes]);
@@ -105,7 +104,7 @@ const AddLocationWorkspace: React.FC<AddLocationWorkspaceProps> = ({
             }),
       });
       handleMutation();
-      closeWorkspaceWithSavedChanges();
+      closeWorkspace({ discardUnsavedChanges: true });
     } catch (error: any) {
       const errorMessages = extractErrorMessagesFromResponse(error);
       showSnackbar({
@@ -117,83 +116,85 @@ const AddLocationWorkspace: React.FC<AddLocationWorkspaceProps> = ({
   };
 
   useEffect(() => {
-    promptBeforeClosing(() => isDirty);
-  }, [isDirty, promptBeforeClosing]);
+    setHasUnsavedChanges(true);
+  }, [isDirty, setHasUnsavedChanges]);
 
   return (
-    <Form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
-      <div className={styles.formContainer}>
-        <Stack gap={3}>
-          <ResponsiveWrapper>
-            <FormGroup legendText="">
-              <Controller
-                control={control}
-                name="name"
-                render={({ field }) => (
-                  <TextInput
-                    id="locationName"
-                    placeholder={t('locationPlaceholder', 'Add a location')}
-                    labelText={t('locationName', 'Location Name')}
-                    value={field.value}
-                    onChange={field.onChange}
-                    invalid={!!errors.name?.message}
-                    invalidText={errors.name?.message}
-                    disabled={hasLocationAttributes}
-                  />
-                )}
-              />
-            </FormGroup>
-          </ResponsiveWrapper>
-
-          <ResponsiveWrapper>
-            <FormGroup legendText="">
-              <Controller
-                control={control}
-                name="tags"
-                render={({ field: { onChange, value, ref } }) => (
-                  <FilterableMultiSelect
-                    id="locationTags"
-                    titleText={t('selectTags', 'Select tag(s)')}
-                    placeholder={t('selectTagPlaceholder', 'Select a tag')}
-                    items={Tags || []}
-                    selectedItems={(value || []).map(
-                      (selected) => Tags?.find((tag) => tag.uuid === selected.uuid) || selected,
-                    )}
-                    onChange={({ selectedItems }) => onChange(selectedItems || [])}
-                    itemToString={(item) => (item && typeof item === 'object' ? item.display : '')}
-                    selectionFeedback="top-after-reopen"
-                    invalid={!!errors.tags?.message}
-                    invalidText={errors.tags?.message}
-                    disabled={!Tags?.length}
-                    ref={ref}
-                  />
-                )}
-              />
-            </FormGroup>
-          </ResponsiveWrapper>
-        </Stack>
-      </div>
-
-      <ButtonSet
-        className={classNames({
-          [styles.tablet]: isTablet,
-          [styles.desktop]: !isTablet,
-        })}>
-        <Button className={styles.buttonContainer} kind="secondary" onClick={() => closeWorkspace()}>
-          {t('cancel', 'Cancel')}
-        </Button>
-        <Button className={styles.buttonContainer} disabled={isSubmitting || !isDirty} kind="primary" type="submit">
-          {isSubmitting ? (
-            <span className={styles.inlineLoading}>
-              {t('submitting', 'Submitting' + '...')}
-              <InlineLoading status="active" iconDescription="Loading" />
-            </span>
-          ) : (
-            t('saveAndClose', 'Save & close')
-          )}
-        </Button>
-      </ButtonSet>
-    </Form>
+    <Workspace2 title={t('addLocation', 'Add Location')} hasUnsavedChanges={hasUnsavedChanges}>
+      <Form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
+        <div className={styles.formContainer}>
+          <Stack gap={3}>
+            <ResponsiveWrapper>
+              <FormGroup legendText="">
+                <Controller
+                  control={control}
+                  name="name"
+                  render={({ field }) => (
+                    <TextInput
+                      id="locationName"
+                      placeholder={t('locationPlaceholder', 'Add a location')}
+                      labelText={t('locationName', 'Location Name')}
+                      value={field.value}
+                      onChange={field.onChange}
+                      invalid={!!errors.name?.message}
+                      invalidText={errors.name?.message}
+                      disabled={hasLocationAttributes}
+                    />
+                  )}
+                />
+              </FormGroup>
+            </ResponsiveWrapper>
+
+            <ResponsiveWrapper>
+              <FormGroup legendText="">
+                <Controller
+                  control={control}
+                  name="tags"
+                  render={({ field: { onChange, value, ref } }) => (
+                    <FilterableMultiSelect
+                      id="locationTags"
+                      titleText={t('selectTags', 'Select tag(s)')}
+                      placeholder={t('selectTagPlaceholder', 'Select a tag')}
+                      items={Tags || []}
+                      selectedItems={(value || []).map(
+                        (selected) => Tags?.find((tag) => tag.uuid === selected.uuid) || selected,
+                      )}
+                      onChange={({ selectedItems }) => onChange(selectedItems || [])}
+                      itemToString={(item) => (item && typeof item === 'object' ? item.display : '')}
+                      selectionFeedback="top-after-reopen"
+                      invalid={!!errors.tags?.message}
+                      invalidText={errors.tags?.message}
+                      disabled={!Tags?.length}
+                      ref={ref}
+                    />
+                  )}
+                />
+              </FormGroup>
+            </ResponsiveWrapper>
+          </Stack>
+        </div>
+
+        <ButtonSet
+          className={classNames({
+            [styles.tablet]: isTablet,
+            [styles.desktop]: !isTablet,
+          })}>
+          <Button className={styles.buttonContainer} kind="secondary" onClick={() => closeWorkspace()}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button className={styles.buttonContainer} disabled={isSubmitting || !isDirty} kind="primary" type="submit">
+            {isSubmitting ? (
+              <span className={styles.inlineLoading}>
+                {t('submitting', 'Submitting' + '...')}
+                <InlineLoading status="active" iconDescription="Loading" />
+              </span>
+            ) : (
+              t('saveAndClose', 'Save & close')
+            )}
+          </Button>
+        </ButtonSet>
+      </Form>
+    </Workspace2>
   );
 };