@kenyaemr/esm-admin-app 5.4.4-pre.142 → 5.4.4-pre.15

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

@@ -0,0 +1,260 @@
+import React, { useEffect, useState } from 'react';
+import {
+  ResponsiveWrapper,
+  Workspace2,
+  showSnackbar,
+  useLayoutType,
+  type Workspace2DefinitionProps,
+} from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { Controller, useForm } from 'react-hook-form';
+import { Button, ButtonSet, ComboBox, Form, FormGroup, InlineLoading, Stack, TextArea, TextInput } from '@carbon/react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import classNames from 'classnames';
+
+import styles from './global-property.workspace.scss';
+import { type SystemSettings } from '../../../types';
+import { saveOrUpdateGlobalProperty } from '../hooks/useGlobalProperty';
+import {
+  createGlobalPropertyFormSchema,
+  openmrsCustomDatatypes,
+  type GlobalPropertyFormType,
+} from './global-property-form-schema';
+
+type GlobalPropertyWorkspaceProps = {
+  systemSetting?: SystemSettings | null;
+  mutateGlobalProperty: () => void;
+};
+
+const GlobalPropertyWorkspace: React.FC<Workspace2DefinitionProps<GlobalPropertyWorkspaceProps, {}, {}>> = ({
+  closeWorkspace,
+  workspaceProps: { systemSetting, mutateGlobalProperty },
+}) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const isEditMode = Boolean(systemSetting?.uuid);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+
+  const {
+    handleSubmit,
+    control,
+    formState: { isSubmitting, isDirty, errors },
+  } = useForm<GlobalPropertyFormType>({
+    resolver: zodResolver(createGlobalPropertyFormSchema(t)),
+    defaultValues: {
+      property: systemSetting?.property ?? '',
+      description: systemSetting?.description ?? '',
+      datatypeClassname: systemSetting?.datatypeClassname ?? '',
+      datatypeConfig: systemSetting?.datatypeConfig ?? '',
+      preferredHandlerClassname: systemSetting?.preferredHandlerClassname ?? '',
+      handlerConfig: systemSetting?.handlerConfig ?? '',
+      value: systemSetting?.value ?? '',
+    },
+  });
+
+  useEffect(() => {
+    setHasUnsavedChanges(isDirty);
+  }, [isDirty]);
+
+  const onSubmit = async (data: GlobalPropertyFormType) => {
+    const payload = {
+      property: data.property,
+      value: data.value,
+      description: data.description,
+      datatypeClassname: data.datatypeClassname,
+      datatypeConfig: data.datatypeConfig,
+      preferredHandlerClassname: data.preferredHandlerClassname,
+      handlerConfig: data.handlerConfig,
+    };
+    try {
+      await saveOrUpdateGlobalProperty(payload, systemSetting?.uuid);
+
+      showSnackbar({
+        title: t('success', 'Success'),
+        kind: 'success',
+        subtitle: isEditMode
+          ? t('gpUpdated', 'Global property {{property}} was updated successfully.', { property: data.property })
+          : t('gpCreated', 'Global property {{property}} was created successfully.', { property: data.property }),
+      });
+      mutateGlobalProperty();
+      closeWorkspace({ discardUnsavedChanges: true });
+    } catch (error: any) {
+      showSnackbar({
+        title: t('error', 'Error'),
+        kind: 'error',
+        subtitle: error?.message ?? t('gpSaveError', 'Error saving global property'),
+      });
+    }
+  };
+
+  const title = isEditMode
+    ? t('editGlobalProperty', 'Edit global property')
+    : t('addGlobalProperty', 'Add global property');
+
+  return (
+    <Workspace2 title={title} hasUnsavedChanges={hasUnsavedChanges}>
+      <Form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
+        <div className={styles.formContainer}>
+          <Stack gap={4}>
+            <ResponsiveWrapper>
+              <FormGroup legendText="">
+                <Controller
+                  control={control}
+                  name="property"
+                  render={({ field }) => (
+                    <TextInput
+                      id="gpProperty"
+                      labelText={t('property', 'Property (required)')}
+                      placeholder={t('gpPropertyPlaceholder', 'e.g. setting.name')}
+                      value={field.value}
+                      onChange={field.onChange}
+                      invalid={!!errors.property}
+                      invalidText={errors.property?.message}
+                      disabled={isEditMode}
+                    />
+                  )}
+                />
+              </FormGroup>
+            </ResponsiveWrapper>
+
+            <ResponsiveWrapper>
+              <FormGroup legendText="">
+                <Controller
+                  control={control}
+                  name="value"
+                  render={({ field }) => (
+                    <TextArea
+                      id="gpValue"
+                      labelText={t('value', 'Value (required)')}
+                      placeholder={t('gpValuePlaceholder', 'Enter value')}
+                      value={field.value}
+                      onChange={field.onChange}
+                      invalid={!!errors.value}
+                      invalidText={errors.value?.message}
+                      rows={3}
+                    />
+                  )}
+                />
+              </FormGroup>
+            </ResponsiveWrapper>
+
+            <ResponsiveWrapper>
+              <FormGroup legendText="">
+                <Controller
+                  control={control}
+                  name="description"
+                  render={({ field }) => (
+                    <TextArea
+                      id="gpDescription"
+                      labelText={t('description', 'Description')}
+                      placeholder={t('gpDescriptionPlaceholder', 'Optional description')}
+                      value={field.value ?? ''}
+                      onChange={field.onChange}
+                      rows={2}
+                    />
+                  )}
+                />
+              </FormGroup>
+            </ResponsiveWrapper>
+
+            <ResponsiveWrapper>
+              <FormGroup legendText="">
+                <Controller
+                  control={control}
+                  name="datatypeClassname"
+                  render={({ field }) => (
+                    <ComboBox
+                      id="datatypeClassname"
+                      invalidText={errors.datatypeClassname?.message}
+                      items={openmrsCustomDatatypes}
+                      onChange={function Zye() {}}
+                      titleText={t('datatypeClassname', 'Datatype classname')}
+                      typeahead
+                      placeholder={t('selectDatatypeClassname', 'Select datatype classname')}
+                    />
+                  )}
+                />
+              </FormGroup>
+            </ResponsiveWrapper>
+
+            <ResponsiveWrapper>
+              <FormGroup legendText="">
+                <Controller
+                  control={control}
+                  name="datatypeConfig"
+                  render={({ field }) => (
+                    <TextInput
+                      id="gpDatatypeConfig"
+                      labelText={t('datatypeConfig', 'Datatype config')}
+                      placeholder={t('gpDatatypeConfigPlaceholder', 'Optional datatype configuration')}
+                      value={field.value ?? ''}
+                      onChange={field.onChange}
+                    />
+                  )}
+                />
+              </FormGroup>
+            </ResponsiveWrapper>
+
+            <ResponsiveWrapper>
+              <FormGroup legendText="">
+                <Controller
+                  control={control}
+                  name="preferredHandlerClassname"
+                  render={({ field }) => (
+                    <TextInput
+                      id="gpPreferredHandlerClassname"
+                      labelText={t('preferredHandlerClassname', 'Preferred handler classname')}
+                      placeholder={t('gpPreferredHandlerPlaceholder', 'Optional preferred handler classname')}
+                      value={field.value ?? ''}
+                      onChange={field.onChange}
+                    />
+                  )}
+                />
+              </FormGroup>
+            </ResponsiveWrapper>
+
+            <ResponsiveWrapper>
+              <FormGroup legendText="">
+                <Controller
+                  control={control}
+                  name="handlerConfig"
+                  render={({ field }) => (
+                    <TextInput
+                      id="gpHandlerConfig"
+                      labelText={t('handlerConfig', 'Handler config')}
+                      placeholder={t('gpHandlerConfigPlaceholder', 'Optional handler configuration')}
+                      value={field.value ?? ''}
+                      onChange={field.onChange}
+                    />
+                  )}
+                />
+              </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>
+  );
+};
+
+export default GlobalPropertyWorkspace;

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/logs-table/operation-log-table.component.tsx

@@ -12,7 +12,6 @@ import {
   TableRow,
   Tag,
   DataTableSkeleton,
-  InlineLoading,
 } from '@carbon/react';
 import { CardHeader, PatientChartPagination } from '@openmrs/esm-patient-common-lib';
 import { useLayoutType, usePagination, formatDate } from '@openmrs/esm-framework';
@@ -21,13 +20,14 @@ import { ETLResponse } from '../../types';
 import EmptyState from '../empty-state/empty-state-log.components';
 
 interface LogTableProps {
-  logData: ETLResponse[];
+  logData: Array<ETLResponse>;
   isLoading: boolean;
 }
 
+const PAGE_SIZE = 10;
+
 const LogTable: React.FC<LogTableProps> = ({ logData, isLoading }) => {
   const { t } = useTranslation();
-  const pageSize = 10;
   const isTablet = useLayoutType() === 'tablet';
 
   const headers = [
@@ -37,82 +37,94 @@ const LogTable: React.FC<LogTableProps> = ({ logData, isLoading }) => {
     { header: t('completionStatus', 'Completion status'), key: 'status' },
   ];
 
-  const rows = logData?.map((item, index) => ({
-    id: index.toString(),
-    script_name: item.script_name,
-    start_time: item?.start_time ? formatDate(new Date(item?.start_time)) : '--',
-    stop_time: item?.stop_time ? formatDate(new Date(item?.stop_time)) : '--',
-    status: item.status,
-  }));
+  const rows =
+    logData?.map((item, index) => ({
+      id: index.toString(),
+      script_name: item.script_name,
+      start_time: item?.start_time ? formatDate(new Date(item.start_time)) : '--',
+      stop_time: item?.stop_time ? formatDate(new Date(item.stop_time)) : '--',
+      status: item.status,
+    })) ?? [];
+
+  const { results: paginatedData, currentPage, goTo } = usePagination(rows, PAGE_SIZE);
+
+  const renderTable = ({ rows, headers, getHeaderProps, getTableProps }: any) => (
+    <TableContainer className={styles.tableContainer}>
+      <Table {...getTableProps()}>
+        <TableHead>
+          <TableRow>
+            {headers.map((header: any) => (
+              <TableHeader
+                className={classNames(styles.productiveHeading01, styles.text02)}
+                {...getHeaderProps({ header })}>
+                {header.header}
+              </TableHeader>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row: any) => (
+            <TableRow key={row.id}>
+              {row.cells.map((cell: any) => (
+                <TableCell key={cell.id}>
+                  {cell.info.header === 'status' ? (
+                    <Tag size="md" type={cell.value === 'Success' ? 'green' : 'red'}>
+                      {cell.value}
+                    </Tag>
+                  ) : (
+                    cell.value
+                  )}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+
+  const renderContent = () => {
+    if (isLoading && logData.length === 0) {
+      return (
+        <DataTableSkeleton
+          headers={headers}
+          aria-label="etl table"
+          showToolbar={false}
+          showHeader={false}
+          rowCount={4}
+          zebra
+          columnCount={3}
+          className={styles.dataTableSkeleton}
+        />
+      );
+    }
+
+    if (logData.length === 0) {
+      return <EmptyState subTitle={t('noRecordsFound', 'No ETL Operation logs found')} />;
+    }
 
-  const { results: paginatedData, currentPage, goTo } = usePagination(rows, pageSize);
+    return (
+      <>
+        <DataTable rows={paginatedData} headers={headers} isSortable size={isTablet ? 'lg' : 'sm'} useZebraStyles>
+          {renderTable}
+        </DataTable>
+        <PatientChartPagination
+          currentItems={paginatedData.length}
+          totalItems={rows.length}
+          onPageNumberChange={({ page }: { page: number }) => goTo(page)}
+          pageNumber={currentPage}
+          pageSize={PAGE_SIZE}
+        />
+      </>
+    );
+  };
 
   return (
     <div className={styles.table}>
-      <CardHeader title={t('facilityInfo', 'Facility Info')} children={''} />
-      <div className={styles.logTable}>
-        {isLoading && logData.length === 0 ? (
-          <DataTableSkeleton
-            headers={headers}
-            aria-label="etl table"
-            showToolbar={false}
-            showHeader={false}
-            rowCount={4}
-            zebra
-            columnCount={3}
-            className={styles.dataTableSkeleton}
-          />
-        ) : logData.length === 0 ? (
-          <EmptyState subTitle={t('noRecordsFound', 'No ETL Operation logs found')} />
-        ) : (
-          <>
-            <DataTable rows={paginatedData} headers={headers} isSortable size={isTablet ? 'lg' : 'sm'} useZebraStyles>
-              {({ rows, headers, getHeaderProps, getTableProps }) => (
-                <TableContainer className={styles.tableContainer}>
-                  <Table {...getTableProps()}>
-                    <TableHead>
-                      <TableRow>
-                        {headers.map((header) => (
-                          <TableHeader
-                            key={header.key}
-                            className={classNames(styles.productiveHeading01, styles.text02)}
-                            {...getHeaderProps({ header })}>
-                            {header.header}
-                          </TableHeader>
-                        ))}
-                      </TableRow>
-                    </TableHead>
-                    <TableBody>
-                      {rows.map((row) => (
-                        <TableRow key={row.id}>
-                          {row.cells.map((cell) => (
-                            <TableCell key={cell.id}>
-                              {cell.info.header === 'status' ? (
-                                <Tag size="md" type={cell.value === 'Success' ? 'green' : 'red'}>
-                                  {cell.value}
-                                </Tag>
-                              ) : (
-                                cell.value
-                              )}
-                            </TableCell>
-                          ))}
-                        </TableRow>
-                      ))}
-                    </TableBody>
-                  </Table>
-                </TableContainer>
-              )}
-            </DataTable>
-            <PatientChartPagination
-              currentItems={paginatedData.length}
-              totalItems={rows.length}
-              onPageNumberChange={({ page }) => goTo(page)}
-              pageNumber={currentPage}
-              pageSize={pageSize}
-            />
-          </>
-        )}
-      </div>
+      <CardHeader title={t('facilityInfo', 'Facility Info')}>
+        <></>
+      </CardHeader>
+      <div className={styles.logTable}>{renderContent()}</div>
     </div>
   );
 };