@kenyaemr/esm-admin-app 5.4.4-pre.34 → 5.4.4-pre.340

package/src/components/users/manage-users/user-management.workspace.tsx

@@ -9,6 +9,8 @@ import {
   useConfig,
   showModal,
   parseDate,
+  Workspace2,
+  Workspace2DefinitionProps,
 } from '@openmrs/esm-framework';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import styles from './user-management.workspace.scss';
@@ -46,95 +48,144 @@ import {
 import UserManagementFormSchema from '../userManagementFormSchema';
 import { ChevronLeft, Query, ChevronRight } from '@carbon/react/icons';
 import { useSystemUserRoleConfigSetting } from '../../hook/useSystemRoleSetting';
-import { type CustomHIEPractitionerResponse, type PractitionerResponse, Provider, User } from '../../../types';
-import { searchHealthCareWork, HealthWorkerAdapter, NormalizedPractitioner } from '../../hook/healthWorkerAdapter';
-import { ROLE_CATEGORIES, SECTIONS, today } from '../../../constants';
+import { Provider, User } from '../../../types';
+import { ROLE_CATEGORIES, SECTIONS } from '../../../constants';
 import { ConfigObject } from '../../../config-schema';
 import { mutate } from 'swr';
 import { createProviderAttribute, updateProviderAttributes } from '../../modal/hwr-sync.resource';
 import { useUsers } from './user-list/user-list.resource';
+import { searchHealthCareWork, ProfessionalRegistryResponse } from '../../hook/healthWorkerRegistry';
+import {
+  useProfessionalRegistryIdentificationTypes,
+  useProfessionalRegistryRegulators,
+} from '../../hook/useProfessionalRegistryEnums';
 
 type ManageUserWorkspaceProps = DefaultWorkspaceProps & {
   initialUserValue?: User;
 };
 
-const MinDate: Date = today();
+/**
+ * Pick the active license: latest end-date that hasn't expired yet.
+ * Fall back to the most recently expired license if none are current,
+ * so the UI surfaces something concrete rather than nothing.
+ */
+const pickCurrentLicense = (licenses: ProfessionalRegistryResponse['professional']['licenses']) => {
+  if (!licenses || licenses.length === 0) {
+    return undefined;
+  }
+  const sorted = [...licenses]
+    .filter((l) => l.license_end)
+    .sort((a, b) => new Date(b.license_end).getTime() - new Date(a.license_end).getTime());
+  const now = Date.now();
+  return sorted.find((l) => new Date(l.license_end).getTime() >= now) ?? sorted[0];
+};
+
+/**
+ * Savannah returns "Male"/"Female"; OpenMRS uses "M"/"F".
+ * Normalize the upstream gender to the OpenMRS shape, or undefined if unknown.
+ */
+const normalizeGender = (upstream?: string): 'M' | 'F' | undefined => {
+  if (!upstream) {
+    return undefined;
+  }
+  const v = upstream.trim().toUpperCase();
+  if (v === 'MALE' || v === 'M') {
+    return 'M';
+  }
+  if (v === 'FEMALE' || v === 'F') {
+    return 'F';
+  }
+  return undefined;
+};
 
-const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
+const ManageUserWorkspace: React.FC<Workspace2DefinitionProps<ManageUserWorkspaceProps, {}, {}>> = ({
   closeWorkspace,
-  promptBeforeClosing,
-  closeWorkspaceWithSavedChanges,
-  initialUserValue = {} as User,
+  workspaceProps: { initialUserValue = {} as User },
 }) => {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
   const [activeSection, setActiveSection] = useState('demographic');
   const [currentIndex, setCurrentIndex] = useState(0);
-  const [healthWorker, setHealthWorker] = useState(null);
+  const [healthWorker, setHealthWorker] = useState<ProfessionalRegistryResponse | null>(null);
   const { provider = [], loadingProvider, providerError } = useProvider(initialUserValue.systemId);
   const { users, isLoading: isLoadingUsers, error: usersError } = useUsers();
   const usernames =
     users?.map((user) => user.username).filter((username) => username !== initialUserValue?.username) || [];
   const isInitialValuesEmpty = Object.keys(initialUserValue).length === 0;
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
 
   const { userManagementFormSchema } = UserManagementFormSchema(usernames);
-
   const { providerAttributeType = [] } = useProviderAttributeType();
-
   const { roles = [], isLoading } = useRoles();
   const { rolesConfig, error } = useSystemUserRoleConfigSetting();
+
   const {
-    identifierTypes,
-    regulatorOptions,
-    licenseBodyUuid,
+    providerNationalIdUuid,
     passportNumberUuid,
-    personEmailAttributeUuid,
-    personPhonenumberAttributeUuid,
+    providerUniqueIdentifierAttributeTypeUuid,
+    externalProviderIdentifierUuid,
+    licenseNumberUuid,
+    licenseExpiryDateUuid,
+    licenseBodyUuid,
+    qualificationUuid,
+    specialtyUuid,
+    providerCadreUuid,
+    practiceTypeUuid,
     phoneNumberUuid,
     providerAddressUuid,
     providerHieFhirReference,
-    qualificationUuid,
-    providerNationalIdUuid,
-    licenseNumberUuid,
-    licenseExpiryDateUuid,
-    providerUniqueIdentifierAttributeTypeUuid,
+    personEmailAttributeUuid,
+    personPhonenumberAttributeUuid,
   } = useConfig<ConfigObject>();
+
+  const { regulators } = useProfessionalRegistryRegulators();
+  const { identificationTypes } = useProfessionalRegistryIdentificationTypes();
+
   const [searchHWR, setSearchHWR] = useState({
-    identifierType: identifierTypes[0]?.key ?? '',
-    regulator: regulatorOptions[0]?.key ?? '',
+    identifierType: '',
+    regulator: '',
     identifier: '',
     isHWRLoading: false,
   });
-  const defaultIdentifierType = identifierTypes.find((item) => item.key === searchHWR.identifierType);
-  const defaultRegulator = regulatorOptions.find((item) => item.key === searchHWR.regulator);
 
   const attributeTypeMapping = useMemo(() => {
     return {
-      licenseNumber: providerAttributeType.find((type) => type.uuid === licenseNumberUuid)?.uuid || '',
-      licenseExpiry: providerAttributeType.find((type) => type.uuid === licenseExpiryDateUuid)?.uuid || '',
       providerNationalId: providerAttributeType.find((type) => type.uuid === providerNationalIdUuid)?.uuid || '',
+      passportNumber: providerAttributeType.find((type) => type.uuid === passportNumberUuid)?.uuid || '',
+      providerUniqueIdentifier:
+        providerAttributeType.find((type) => type.uuid === providerUniqueIdentifierAttributeTypeUuid)?.uuid || '',
+      externalProviderIdentifier:
+        providerAttributeType.find((type) => type.uuid === externalProviderIdentifierUuid)?.uuid || '',
       providerHieFhirReference:
         providerAttributeType.find((type) => type.uuid === providerHieFhirReference)?.uuid || '',
-      qualification: providerAttributeType.find((type) => type.uuid === qualificationUuid)?.uuid || '',
+
+      licenseNumber: providerAttributeType.find((type) => type.uuid === licenseNumberUuid)?.uuid || '',
+      licenseExpiry: providerAttributeType.find((type) => type.uuid === licenseExpiryDateUuid)?.uuid || '',
       licenseBody: providerAttributeType.find((type) => type.uuid === licenseBodyUuid)?.uuid || '',
+      qualification: providerAttributeType.find((type) => type.uuid === qualificationUuid)?.uuid || '',
+      specialty: providerAttributeType.find((type) => type.uuid === specialtyUuid)?.uuid || '',
+      providerCadre: providerAttributeType.find((type) => type.uuid === providerCadreUuid)?.uuid || '',
+      practiceType: providerAttributeType.find((type) => type.uuid === practiceTypeUuid)?.uuid || '',
+
       phoneNumber: providerAttributeType.find((type) => type.uuid === phoneNumberUuid)?.uuid || '',
       providerAddress: providerAttributeType.find((type) => type.uuid === providerAddressUuid)?.uuid || '',
-      passportNumber: providerAttributeType.find((type) => type.uuid === passportNumberUuid)?.uuid || '',
-      providerUniqueIdentifier:
-        providerAttributeType.find((type) => type.uuid === providerUniqueIdentifierAttributeTypeUuid)?.uuid || '',
     };
   }, [
-    licenseBodyUuid,
-    licenseExpiryDateUuid,
-    licenseNumberUuid,
-    passportNumberUuid,
-    phoneNumberUuid,
-    providerAddressUuid,
     providerAttributeType,
-    providerHieFhirReference,
     providerNationalIdUuid,
-    qualificationUuid,
+    passportNumberUuid,
     providerUniqueIdentifierAttributeTypeUuid,
+    externalProviderIdentifierUuid,
+    providerHieFhirReference,
+    licenseNumberUuid,
+    licenseExpiryDateUuid,
+    licenseBodyUuid,
+    qualificationUuid,
+    specialtyUuid,
+    providerCadreUuid,
+    practiceTypeUuid,
+    phoneNumberUuid,
+    providerAddressUuid,
   ]);
 
   const providerAttributes = useMemo(() => provider.flatMap((item) => item.attributes || []), [provider]);
@@ -166,7 +217,7 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
     () => getProviderAttributeValue(attributeTypeMapping.passportNumber),
     [attributeTypeMapping, getProviderAttributeValue],
   );
-  const registrationNumber = useMemo(
+  const licenseBody = useMemo(
     () => getProviderAttributeValue(attributeTypeMapping.licenseBody),
     [attributeTypeMapping, getProviderAttributeValue],
   );
@@ -182,25 +233,37 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
     () => getProviderAttributeValue(attributeTypeMapping.providerUniqueIdentifier),
     [attributeTypeMapping, getProviderAttributeValue],
   );
+  const specialty = useMemo(
+    () => getProviderAttributeValue(attributeTypeMapping.specialty),
+    [attributeTypeMapping, getProviderAttributeValue],
+  );
+  const providerCadre = useMemo(
+    () => getProviderAttributeValue(attributeTypeMapping.providerCadre),
+    [attributeTypeMapping, getProviderAttributeValue],
+  );
+  const practiceType = useMemo(
+    () => getProviderAttributeValue(attributeTypeMapping.practiceType),
+    [attributeTypeMapping, getProviderAttributeValue],
+  );
+
   type UserFormSchema = z.infer<typeof userManagementFormSchema>;
+
   const formDefaultValues = useMemo(() => {
     if (isInitialValuesEmpty) {
       return {};
     }
     const extractNameParts = (display = '') => {
       const nameParts = display.split(' ');
-
       const [givenName = '', middleName = '', familyName = ''] =
         nameParts.length === 3 ? nameParts : [nameParts[0], '', nameParts[1] || ''];
-
       return { givenName, middleName, familyName };
     };
 
     return {
       ...initialUserValue,
       ...extractNameParts(initialUserValue.person?.display || ''),
-      phoneNumber: phoneNumber,
-      email: email,
+      phoneNumber,
+      email,
       roles:
         initialUserValue.roles?.map((role) => ({
           uuid: role.uuid,
@@ -210,11 +273,14 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
       gender: initialUserValue.person?.gender,
       providerLicense: providerLicenseNumber,
       licenseExpiryDate: licenseExpiryDate ? new Date(licenseExpiryDate) : undefined,
-      qualification: qualification,
-      nationalId: nationalId,
-      passportNumber: passportNumber,
-      registrationNumber: registrationNumber,
-      providerUniqueIdentifier: providerUniqueIdentifier,
+      qualification,
+      nationalId,
+      passportNumber,
+      licenseBody,
+      providerUniqueIdentifier,
+      specialty,
+      providerCadre,
+      practiceType,
     };
   }, [
     isInitialValuesEmpty,
@@ -226,8 +292,11 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
     qualification,
     nationalId,
     passportNumber,
-    registrationNumber,
+    licenseBody,
     providerUniqueIdentifier,
+    specialty,
+    providerCadre,
+    practiceType,
   ]);
 
   const userFormMethods = useForm<UserFormSchema>({
@@ -237,7 +306,6 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
   });
 
   const { reset, setValue } = userFormMethods;
-
   const { errors, isSubmitting, isDirty } = userFormMethods.formState;
 
   useEffect(() => {
@@ -248,58 +316,63 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
 
   useEffect(() => {
     if (isDirty) {
-      promptBeforeClosing(() => isDirty);
+      setHasUnsavedChanges(true);
+    }
+  }, [isDirty, setHasUnsavedChanges]);
+
+  const setHealthWorkerValues = (response: ProfessionalRegistryResponse) => {
+    const { membership, contacts, identifiers, professional_details, licenses } = response.professional;
+    const currentLicense = pickCurrentLicense(licenses);
+    const gender = normalizeGender(membership.gender);
+
+    setValue('givenName', membership.first_name || '');
+    setValue('middleName', membership.middle_name || '');
+    setValue('familyName', membership.last_name || '');
+
+    if (gender) {
+      setValue('gender', gender, {
+        shouldDirty: true,
+        shouldTouch: true,
+        shouldValidate: true,
+      });
     }
-  }, [isDirty, promptBeforeClosing]);
-
-  const setPractitionerValuesFromNormalized = (normalized: NormalizedPractitioner) => {
-    setValue('givenName', normalized.firstName || '');
-    setValue('middleName', normalized.middleName || '');
-    setValue('familyName', normalized.lastName || '');
-    setValue('nationalId', normalized.nationalId || '');
-    setValue('providerLicense', normalized.licenseNumber || '');
-    setValue('registrationNumber', normalized.registrationId || '');
-    setValue('providerUniqueIdentifier', normalized.providerUniqueIdentifier || '');
-    setValue('phoneNumber', normalized.phoneNumber || '');
-    setValue('email', normalized.email || '');
-    setValue('qualification', normalized.qualification || '');
-    setValue('passportNumber', normalized.passportNumber || '');
-    setValue(
-      'licenseExpiryDate',
-      normalized.licenseEndDate ? parseDate(normalized.licenseEndDate) : parseDate(t('unknown', 'Unknown')),
-    );
+
+    setValue('nationalId', identifiers?.identification_number || '');
+    setValue('passportNumber', '');
+    setValue('providerLicense', currentLicense?.external_reference_id || '');
+    setValue('licenseBody', membership.licensing_body || '');
+    setValue('providerUniqueIdentifier', membership.id || '');
+    setValue('phoneNumber', contacts?.phone || '');
+    setValue('email', contacts?.email || '');
+    setValue('qualification', professional_details?.educational_qualifications || '');
+    setValue('specialty', membership.specialty || '');
+    setValue('providerCadre', professional_details?.professional_cadre || '');
+    setValue('practiceType', professional_details?.practice_type || '');
+    setValue('licenseExpiryDate', currentLicense?.license_end ? parseDate(currentLicense.license_end) : undefined);
   };
 
   const handleSearch = async () => {
     try {
-      setSearchHWR({ ...searchHWR, isHWRLoading: true });
-      const unifiedResponse = await searchHealthCareWork(
-        searchHWR.identifierType,
-        searchHWR.identifier,
-        searchHWR.regulator,
-      );
-
-      const normalizedData = HealthWorkerAdapter.normalize(unifiedResponse);
+      setSearchHWR((prev) => ({ ...prev, isHWRLoading: true }));
+      const response = await searchHealthCareWork(searchHWR.identifierType, searchHWR.identifier, searchHWR.regulator);
 
-      if (!normalizedData) {
+      if (!response?.professional) {
         showModal('hwr-empty-modal', { errorCode: t('noResults', 'No results found') });
         return;
       }
 
       const dispose = showModal('hwr-confirmation-modal', {
-        healthWorker: unifiedResponse.data,
-        normalizedData: normalizedData,
-        fhirFormat: unifiedResponse.fhirFormat,
+        healthWorker: response,
         onConfirm: () => {
           dispose();
-          setPractitionerValuesFromNormalized(normalizedData);
-          setHealthWorker(unifiedResponse.data);
+          setHealthWorkerValues(response);
+          setHealthWorker(response);
         },
       });
-    } catch (error) {
-      showModal('hwr-empty-modal', { errorCode: error.message });
+    } catch (err: any) {
+      showModal('hwr-empty-modal', { errorCode: err?.message ?? t('searchFailed', 'Search failed') });
     } finally {
-      setSearchHWR({ ...searchHWR, isHWRLoading: false });
+      setSearchHWR((prev) => ({ ...prev, isHWRLoading: false }));
     }
   };
 
@@ -315,35 +388,27 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
           attributeType: attributeTypeMapping.licenseExpiry,
           value: data.licenseExpiryDate ? data.licenseExpiryDate.toISOString() : '',
         },
-        { attributeType: attributeTypeMapping.licenseBody, value: data.registrationNumber },
-        {
-          attributeType: attributeTypeMapping?.providerHieFhirReference,
-          value: JSON.stringify(healthWorker),
-        },
-        {
-          attributeType: attributeTypeMapping.providerUniqueIdentifier,
-          value: data.providerUniqueIdentifier,
-        },
-        {
-          attributeType: attributeTypeMapping.providerNationalId,
-          value: data.nationalId,
-        },
-        {
-          attributeType: attributeTypeMapping.qualification,
-          value: data.qualification,
-        },
-        {
-          attributeType: attributeTypeMapping.passportNumber,
-          value: data.passportNumber,
-        },
+        { attributeType: attributeTypeMapping.licenseBody, value: data.licenseBody },
+
+        { attributeType: attributeTypeMapping.providerUniqueIdentifier, value: data.providerUniqueIdentifier },
         {
-          attributeType: attributeTypeMapping.phoneNumber,
-          value: data.phoneNumber,
+          attributeType: attributeTypeMapping.externalProviderIdentifier,
+          value: healthWorker?.professional?.membership?.external_reference_id ?? '',
         },
         {
-          attributeType: attributeTypeMapping.providerAddress,
-          value: data.email,
+          attributeType: attributeTypeMapping.providerHieFhirReference,
+          value: healthWorker?.professional?.membership?.id ?? '',
         },
+        { attributeType: attributeTypeMapping.providerNationalId, value: data.nationalId },
+        { attributeType: attributeTypeMapping.passportNumber, value: data.passportNumber },
+
+        { attributeType: attributeTypeMapping.qualification, value: data.qualification },
+        { attributeType: attributeTypeMapping.specialty, value: data.specialty },
+        { attributeType: attributeTypeMapping.providerCadre, value: data.providerCadre },
+        { attributeType: attributeTypeMapping.practiceType, value: data.practiceType },
+
+        { attributeType: attributeTypeMapping.phoneNumber, value: data.phoneNumber },
+        { attributeType: attributeTypeMapping.providerAddress, value: data.email },
       ].filter((attr) => attr.value),
     };
 
@@ -388,7 +453,7 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
             if (providerResponse.ok) {
               showSnackbarMessage(t('providerSaved', 'Provider saved successfully'), '', 'success');
             }
-          } catch (error) {
+          } catch {
             showSnackbarMessage(
               t('providerFail', 'Failed to save provider'),
               t('providerFailedSubtitle', 'An error occurred while creating provider'),
@@ -396,27 +461,20 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
             );
           }
         }
+
         if (editProvider) {
           const updatableAttributes = [
+            { attributeType: licenseBodyUuid, value: data?.licenseBody },
+            { attributeType: providerNationalIdUuid, value: data?.nationalId },
+            { attributeType: licenseNumberUuid, value: data?.providerLicense },
+            { attributeType: passportNumberUuid, value: data?.passportNumber },
+            { attributeType: providerUniqueIdentifierAttributeTypeUuid, value: data?.providerUniqueIdentifier },
+            { attributeType: specialtyUuid, value: data?.specialty },
+            { attributeType: providerCadreUuid, value: data?.providerCadre },
+            { attributeType: practiceTypeUuid, value: data?.practiceType },
             {
-              attributeType: licenseBodyUuid,
-              value: data?.registrationNumber,
-            },
-            {
-              attributeType: providerNationalIdUuid,
-              value: data?.nationalId,
-            },
-            {
-              attributeType: licenseNumberUuid,
-              value: data?.providerLicense,
-            },
-            {
-              attributeType: passportNumberUuid,
-              value: data?.passportNumber,
-            },
-            {
-              attributeType: providerUniqueIdentifierAttributeTypeUuid,
-              value: data?.providerUniqueIdentifier,
+              attributeType: externalProviderIdentifierUuid,
+              value: healthWorker?.professional?.membership?.external_reference_id,
             },
           ].filter((attr) => attr?.value !== undefined && attr?.value !== null && attr?.value !== '');
 
@@ -426,15 +484,15 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
                 (at) => at?.attributeType?.uuid === attr?.attributeType,
               )?.uuid;
 
-              const payload = {
+              const attrPayload = {
                 attributeType: attr?.attributeType,
                 value: attr?.value,
               };
 
               if (!existingAttributes) {
-                return createProviderAttribute(payload, providerUUID);
+                return createProviderAttribute(attrPayload, providerUUID);
               }
-              return updateProviderAttributes(payload, providerUUID, existingAttributes);
+              return updateProviderAttributes(attrPayload, providerUUID, existingAttributes);
             }),
           );
           showSnackbar({
@@ -446,10 +504,11 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
       } else {
         throw new Error('User creation failed');
       }
+
       handleMutation(`${restBaseUrl}/user`);
       mutate((key) => typeof key === 'string' && key.startsWith(`${restBaseUrl}/provider`));
-      closeWorkspaceWithSavedChanges();
-    } catch (error) {
+      closeWorkspace({ discardUnsavedChanges: true });
+    } catch (err) {
       showSnackbarMessage(
         t('userSaveFailed', 'Failed to save user'),
         t('userCreationFailedSubtitle', 'An error occurred while saving user form '),
@@ -458,12 +517,14 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
     }
   };
 
-  const handleError = (error, response) => {
+  const handleError = (err, response) => {
     showSnackbar({
-      title: t('userSaveFailed', 'Fail to save {{error}}', response),
-      subtitle: t('userCreationFailedSubtitle', 'An error occurred while creating user {{errorMessage}}', {
-        errorMessage: JSON.stringify(error, null, 2),
-      }),
+      title: String(t('userSaveFailed', 'Fail to save {{error}}', response)),
+      subtitle: String(
+        t('userCreationFailedSubtitle', 'An error occurred while creating user {{errorMessage}}', {
+          errorMessage: JSON.stringify(err, null, 2),
+        }),
+      ),
       kind: 'error',
       isLowContrast: true,
     });
@@ -493,12 +554,9 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
   const hasProviderAccount = activeSection === SECTIONS.PROVIDER;
 
   const isSaveAndClose = () => !(hasDemographicInfo || hasLoginInfo || hasProviderAccount);
-
   const getSubmitButtonText = () =>
     t(isSaveAndClose() ? 'saveAndClose' : 'next', isSaveAndClose() ? 'Save & close' : 'Next');
-
   const getSubmitButtonType = () => (isSaveAndClose() ? 'submit' : 'button');
-
   const getSubmitButtonIcon = () => (isSaveAndClose() ? ChevronLeft : ChevronRight);
 
   const handleBackClick = () => {
@@ -519,364 +577,425 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
   };
 
   return (
-    <div className={styles.leftContainer}>
-      <div>
-        <div className={styles.leftLayout}>
-          <ProgressIndicator
-            currentIndex={currentIndex}
-            spaceEqually={true}
-            vertical={true}
-            className={styles.progressIndicator}
-            onChange={(newIndex) => {
-              if (!searchHWR.isHWRLoading) {
-                toggleSection(steps[newIndex].id);
-                setCurrentIndex(newIndex);
-              }
-            }}>
-            {steps.map((step, index) => (
-              <ProgressStep key={step.id} label={step.label} className={styles.ProgresStep} />
-            ))}
-          </ProgressIndicator>
-          <div className={styles.sections}>
-            <FormProvider {...userFormMethods}>
-              <form onSubmit={userFormMethods.handleSubmit(onSubmit, handleError)} className={styles.form}>
-                <div className={styles.formContainer}>
-                  <Stack className={styles.formStackControl} gap={7}>
-                    {hasDemographicInfo && (
-                      <ResponsiveWrapper>
-                        <span className={styles.formHeaderSection}>
-                          {t('healthWorkVerify', 'Health worker registry verification')}
-                        </span>
-                        {searchHWR.isHWRLoading ? (
-                          <InlineLoading
-                            className={styles.formLoading}
-                            description={t('pullDetailsfromHWR', 'Pulling data from Health worker registry...')}
-                          />
-                        ) : (
-                          <>
+    <Workspace2 title={t('manageUserWorkspace', 'Manage User Workspace')} hasUnsavedChanges={hasUnsavedChanges}>
+      <div className={styles.leftContainer}>
+        <div>
+          <div className={styles.leftLayout}>
+            <ProgressIndicator
+              currentIndex={currentIndex}
+              spaceEqually={true}
+              vertical={true}
+              className={styles.progressIndicator}
+              onChange={(newIndex) => {
+                if (!searchHWR.isHWRLoading) {
+                  toggleSection(steps[newIndex].id);
+                  setCurrentIndex(newIndex);
+                }
+              }}>
+              {steps.map((step) => (
+                <ProgressStep key={step.id} label={step.label} className={styles.ProgresStep} />
+              ))}
+            </ProgressIndicator>
+            <div className={styles.sections}>
+              <FormProvider {...userFormMethods}>
+                <form onSubmit={userFormMethods.handleSubmit(onSubmit, handleError)} className={styles.form}>
+                  <div className={styles.formContainer}>
+                    <Stack className={styles.formStackControl} gap={7}>
+                      {hasDemographicInfo && (
+                        <ResponsiveWrapper>
+                          {isInitialValuesEmpty && (
                             <>
-                              <Column>
-                                <ComboBox
-                                  onChange={({ selectedItem }) => {
-                                    setSearchHWR({ ...searchHWR, identifierType: selectedItem?.key ?? '' });
-                                  }}
-                                  id="formIdentifierType"
-                                  titleText={t('identificationType', 'Identification Type')}
-                                  placeholder={t('chooseIdentifierType', 'Choose identifier type')}
-                                  initialSelectedItem={defaultIdentifierType}
-                                  items={identifierTypes}
-                                  itemToString={(item) => (item ? item.name : '')}
-                                />
-                              </Column>
-                              <Column>
-                                <ComboBox
-                                  onChange={({ selectedItem }) => {
-                                    setSearchHWR({ ...searchHWR, regulator: selectedItem?.key ?? '' });
-                                  }}
-                                  id="formRegulatorOptions"
-                                  titleText={t('regulator', 'Regulator')}
-                                  placeholder={t('chooseRegulatorType', 'Choose regulator option')}
-                                  initialSelectedItem={defaultRegulator}
-                                  items={regulatorOptions}
-                                  itemToString={(item) => (item ? item.name : '')}
+                              <span className={styles.formHeaderSection}>
+                                {t('healthWorkVerify', 'Health worker registry verification')}
+                              </span>
+
+                              {searchHWR.isHWRLoading ? (
+                                <InlineLoading
+                                  className={styles.formLoading}
+                                  description={t('pullDetailsfromHWR', 'Pulling data from Health worker registry...')}
                                 />
-                              </Column>
-                              <Column>
-                                <span className={styles.formIdentifierType}>
-                                  {t('identifierNumber', 'Identifier number*')}
-                                </span>
-                                <Row className={styles.formRow}>
-                                  <Search
-                                    labelText={t('enterIdentifierNumber', 'Enter identifier number')}
-                                    className={styles.formSearch}
-                                    defaultValue={searchHWR.identifier}
-                                    placeholder={t('enterIdentifierNumber', 'Enter identifier number')}
-                                    id="formSearchHealthWorkers"
-                                    onChange={(value) => {
-                                      setSearchHWR({ ...searchHWR, identifier: value.target.value });
-                                    }}
-                                  />
-                                  <Button
-                                    kind="secondary"
-                                    size="md"
-                                    renderIcon={Query}
-                                    disabled={
-                                      !searchHWR.identifier ||
-                                      searchHWR.isHWRLoading ||
-                                      !searchHWR.identifierType ||
-                                      !searchHWR.regulator
-                                    }
-                                    iconDescription={t('search', 'Search')}
-                                    hasIconOnly
-                                    className={styles.formSearchButton}
-                                    onClick={handleSearch}
-                                  />
-                                </Row>
-                              </Column>
-                            </>
-                            <span className={styles.formHeaderSection}>{t('demographicInfo', 'Demographic info')}</span>
-                            <ResponsiveWrapper>
-                              <Controller
-                                name="givenName"
-                                control={userFormMethods.control}
-                                render={({ field }) => (
-                                  <TextInput
-                                    {...field}
-                                    id="givenName"
-                                    type="text"
-                                    labelText={t('givenName', 'Given Name')}
-                                    placeholder={t('userGivenName', 'Enter Given Name')}
-                                    invalid={!!errors.givenName}
-                                    invalidText={errors.givenName?.message}
-                                  />
-                                )}
-                              />
-                            </ResponsiveWrapper>
-                            <ResponsiveWrapper>
-                              <Controller
-                                name="middleName"
-                                control={userFormMethods.control}
-                                render={({ field }) => (
-                                  <TextInput
-                                    {...field}
-                                    id="middleName"
-                                    labelText={t('middleName', 'Middle Name')}
-                                    placeholder={t('middleName', 'Middle Name')}
-                                  />
-                                )}
-                              />
-                            </ResponsiveWrapper>
-                            <ResponsiveWrapper>
-                              <Controller
-                                name="familyName"
-                                control={userFormMethods.control}
-                                render={({ field }) => (
-                                  <TextInput
-                                    {...field}
-                                    id="familyName"
-                                    labelText={t('familyName', 'Family Name')}
-                                    placeholder={t('familyName', 'Family Name')}
-                                    invalid={!!errors.familyName}
-                                    invalidText={errors.familyName?.message}
-                                  />
-                                )}
-                              />
-                            </ResponsiveWrapper>
-                            <ResponsiveWrapper>
-                              <Controller
-                                name="phoneNumber"
-                                control={userFormMethods.control}
-                                render={({ field }) => (
-                                  <TextInput
-                                    {...field}
-                                    id="phoneNumber"
-                                    type="text"
-                                    disabled={isInitialValuesEmpty}
-                                    labelText={t('phoneNumber', 'Phone Number')}
-                                    placeholder={t('phoneNumber', 'Enter Phone Number')}
-                                    invalid={!!errors.phoneNumber}
-                                    invalidText={errors.phoneNumber?.message}
-                                  />
-                                )}
-                              />
-                            </ResponsiveWrapper>
-                            <ResponsiveWrapper>
-                              <Controller
-                                name="email"
-                                control={userFormMethods.control}
-                                render={({ field }) => (
-                                  <TextInput
-                                    {...field}
-                                    id="email"
-                                    type="email"
-                                    disabled={isInitialValuesEmpty}
-                                    labelText={t('email', 'Email')}
-                                    placeholder={t('email', 'Enter Email')}
-                                    invalid={!!errors.email}
-                                    invalidText={errors.email?.message}
-                                    className={styles.checkboxLabelSingleLine}
-                                  />
-                                )}
-                              />
-                            </ResponsiveWrapper>
-                            <ResponsiveWrapper>
-                              <Controller
-                                name="gender"
-                                control={userFormMethods.control}
-                                render={({ field }) => (
-                                  <RadioButtonGroup
-                                    {...field}
-                                    legendText={t('sex', 'Sex')}
-                                    orientation="vertical"
-                                    invalid={!!errors.gender}
-                                    invalidText={errors.gender?.message}>
-                                    <RadioButton
-                                      value="M"
-                                      id="M"
-                                      labelText={t('male', 'Male')}
-                                      checked={field.value === 'M'}
+                              ) : (
+                                <>
+                                  <Column>
+                                    <ComboBox
+                                      onChange={({ selectedItem }) => {
+                                        setSearchHWR({
+                                          ...searchHWR,
+                                          identifierType: selectedItem?.code ?? '',
+                                        });
+                                      }}
+                                      id="formIdentifierType"
+                                      titleText={t('identificationType', 'Identification Type')}
+                                      placeholder={t('chooseIdentifierType', 'Choose identifier type')}
+                                      items={identificationTypes}
+                                      itemToString={(item) => item?.label ?? ''}
                                     />
-                                    <RadioButton
-                                      value="F"
-                                      id="F"
-                                      labelText={t('female', 'Female')}
-                                      checked={field.value === 'F'}
+                                  </Column>
+                                  <Column>
+                                    <ComboBox
+                                      onChange={({ selectedItem }) => {
+                                        setSearchHWR({
+                                          ...searchHWR,
+                                          regulator: selectedItem?.code ?? '',
+                                        });
+                                      }}
+                                      id="formRegulatorOptions"
+                                      titleText={t('regulator', 'Regulator')}
+                                      placeholder={t('chooseRegulatorType', 'Choose regulator option')}
+                                      items={regulators}
+                                      itemToString={(item) => item?.label ?? ''}
                                     />
-                                  </RadioButtonGroup>
-                                )}
-                              />
-                            </ResponsiveWrapper>
-                          </>
-                        )}
-                      </ResponsiveWrapper>
-                    )}
-                    {hasProviderAccount && (
-                      <ResponsiveWrapper>
-                        <span className={styles.formHeaderSection}>{t('providerDetails', 'Provider details')}</span>
-                        <ResponsiveWrapper>
-                          <Controller
-                            name="providerUniqueIdentifier"
-                            control={userFormMethods.control}
-                            render={({ field }) => (
-                              <TextInput
-                                {...field}
-                                id="providerUniqueIdentifier"
-                                type="text"
-                                labelText={t('providerUniqueIdentifier', 'Provider Unique Identifier')}
-                                placeholder={t(
-                                  'providerUniqueIdentifierPlaceholder',
-                                  'Enter Provider Unqiue Identifier',
-                                )}
-                                invalid={!!errors.providerUniqueIdentifier}
-                                invalidText={errors.providerUniqueIdentifier?.message}
-                              />
-                            )}
-                          />
-                        </ResponsiveWrapper>
-                        <ResponsiveWrapper>
-                          <Controller
-                            name="nationalId"
-                            control={userFormMethods.control}
-                            render={({ field }) => (
-                              <TextInput
-                                {...field}
-                                id="nationalId"
-                                disabled={isInitialValuesEmpty}
-                                type="text"
-                                labelText={t('nationalID', 'National id')}
-                                placeholder={t('nationalID', 'National id')}
-                                invalid={!!errors.nationalId}
-                                invalidText={errors.nationalId?.message}
-                                className={styles.checkboxLabelSingleLine}
-                              />
-                            )}
-                          />
-                        </ResponsiveWrapper>
-                        <ResponsiveWrapper>
-                          <Controller
-                            name="passportNumber"
-                            control={userFormMethods.control}
-                            render={({ field }) => (
-                              <TextInput
-                                {...field}
-                                id="passportNumber"
-                                disabled={isInitialValuesEmpty}
-                                type="text"
-                                labelText={t('passportNumber', 'Passport number')}
-                                placeholder={t('passportNumber', 'Passport number')}
-                                invalid={!!errors.nationalId}
-                                invalidText={errors.nationalId?.message}
-                                className={styles.checkboxLabelSingleLine}
-                              />
-                            )}
-                          />
-                        </ResponsiveWrapper>
-                        <ResponsiveWrapper>
-                          <Controller
-                            name="providerLicense"
-                            control={userFormMethods.control}
-                            render={({ field }) => (
-                              <TextInput
-                                {...field}
-                                id="providerLicense"
-                                type="text"
-                                disabled={isInitialValuesEmpty}
-                                labelText={t('providerLicense', 'License Number')}
-                                placeholder={t('providerLicense', 'License Number')}
-                                className={styles.checkboxLabelSingleLine}
-                              />
-                            )}
-                          />
-                        </ResponsiveWrapper>
-                        <ResponsiveWrapper>
-                          <Controller
-                            name="registrationNumber"
-                            control={userFormMethods.control}
-                            render={({ field }) => (
-                              <TextInput
-                                {...field}
-                                id="registrationNumber"
-                                type="text"
-                                disabled={isInitialValuesEmpty}
-                                labelText={t('registrationNumber', 'Registration Number')}
-                                placeholder={t('registrationNumber', 'Registration Number')}
-                                className={styles.checkboxLabelSingleLine}
-                              />
-                            )}
-                          />
-                        </ResponsiveWrapper>
-                        <ResponsiveWrapper>
-                          <Controller
-                            name="qualification"
-                            control={userFormMethods.control}
-                            render={({ field }) => (
-                              <TextInput
-                                {...field}
-                                id="qualification"
-                                type="qualification"
-                                disabled
-                                labelText={t('qualification', 'Qualification')}
-                                placeholder={t('qualification', 'Qualification')}
-                                invalid={!!errors.qualification}
-                                invalidText={errors.qualification?.message}
-                                className={styles.checkboxLabelSingleLine}
-                              />
-                            )}
-                          />
+                                  </Column>
+                                  <Column>
+                                    <span className={styles.formIdentifierType}>
+                                      {t('identifierNumber', 'Identifier number*')}
+                                    </span>
+                                    <Row className={styles.formRow}>
+                                      <Search
+                                        labelText={t('enterIdentifierNumber', 'Enter identifier number')}
+                                        className={styles.formSearch}
+                                        defaultValue={searchHWR.identifier}
+                                        placeholder={t('enterIdentifierNumber', 'Enter identifier number')}
+                                        id="formSearchHealthWorkers"
+                                        onChange={(value) => {
+                                          setSearchHWR({ ...searchHWR, identifier: value.target.value });
+                                        }}
+                                      />
+                                      <Button
+                                        kind="secondary"
+                                        size="md"
+                                        renderIcon={Query}
+                                        disabled={
+                                          !searchHWR.identifier ||
+                                          searchHWR.isHWRLoading ||
+                                          !searchHWR.identifierType ||
+                                          !searchHWR.regulator
+                                        }
+                                        iconDescription={t('search', 'Search')}
+                                        hasIconOnly
+                                        className={styles.formSearchButton}
+                                        onClick={handleSearch}
+                                      />
+                                    </Row>
+                                  </Column>
+                                </>
+                              )}
+                            </>
+                          )}
+
+                          <span className={styles.formHeaderSection}>{t('demographicInfo', 'Demographic info')}</span>
+                          <ResponsiveWrapper>
+                            <Controller
+                              name="givenName"
+                              control={userFormMethods.control}
+                              render={({ field }) => (
+                                <TextInput
+                                  {...field}
+                                  id="givenName"
+                                  type="text"
+                                  labelText={t('givenName', 'Given Name')}
+                                  placeholder={t('userGivenName', 'Enter Given Name')}
+                                  invalid={!!errors.givenName}
+                                  invalidText={errors.givenName?.message}
+                                />
+                              )}
+                            />
+                          </ResponsiveWrapper>
+                          <ResponsiveWrapper>
+                            <Controller
+                              name="middleName"
+                              control={userFormMethods.control}
+                              render={({ field }) => (
+                                <TextInput
+                                  {...field}
+                                  id="middleName"
+                                  labelText={t('middleName', 'Middle Name')}
+                                  placeholder={t('middleName', 'Middle Name')}
+                                />
+                              )}
+                            />
+                          </ResponsiveWrapper>
+                          <ResponsiveWrapper>
+                            <Controller
+                              name="familyName"
+                              control={userFormMethods.control}
+                              render={({ field }) => (
+                                <TextInput
+                                  {...field}
+                                  id="familyName"
+                                  labelText={t('familyName', 'Family Name')}
+                                  placeholder={t('familyName', 'Family Name')}
+                                  invalid={!!errors.familyName}
+                                  invalidText={errors.familyName?.message}
+                                />
+                              )}
+                            />
+                          </ResponsiveWrapper>
+                          <ResponsiveWrapper>
+                            <Controller
+                              name="phoneNumber"
+                              control={userFormMethods.control}
+                              render={({ field }) => (
+                                <TextInput
+                                  {...field}
+                                  id="phoneNumber"
+                                  type="text"
+                                  disabled={isInitialValuesEmpty}
+                                  labelText={t('phoneNumber', 'Phone Number')}
+                                  placeholder={t('phoneNumber', 'Enter Phone Number')}
+                                  invalid={!!errors.phoneNumber}
+                                  invalidText={errors.phoneNumber?.message}
+                                />
+                              )}
+                            />
+                          </ResponsiveWrapper>
+                          <ResponsiveWrapper>
+                            <Controller
+                              name="email"
+                              control={userFormMethods.control}
+                              render={({ field }) => (
+                                <TextInput
+                                  {...field}
+                                  id="email"
+                                  type="email"
+                                  disabled={isInitialValuesEmpty}
+                                  labelText={t('email', 'Email')}
+                                  placeholder={t('email', 'Enter Email')}
+                                  invalid={!!errors.email}
+                                  invalidText={errors.email?.message}
+                                  className={styles.checkboxLabelSingleLine}
+                                />
+                              )}
+                            />
+                          </ResponsiveWrapper>
+                          <ResponsiveWrapper>
+                            <Controller
+                              name="gender"
+                              control={userFormMethods.control}
+                              render={({ field: { onChange, value } }) => (
+                                <RadioButtonGroup
+                                  legendText={t('sex', 'Sex')}
+                                  orientation="vertical"
+                                  name="gender"
+                                  valueSelected={value ?? ''}
+                                  key={value ?? 'empty'}
+                                  onChange={(selected) => onChange(selected)}
+                                  invalid={!!errors.gender}
+                                  invalidText={errors.gender?.message}>
+                                  <RadioButton value="M" id="genderMale" labelText={t('male', 'Male')} />
+                                  <RadioButton value="F" id="genderFemale" labelText={t('female', 'Female')} />
+                                </RadioButtonGroup>
+                              )}
+                            />
+                          </ResponsiveWrapper>
                         </ResponsiveWrapper>
+                      )}
 
+                      {hasProviderAccount && (
                         <ResponsiveWrapper>
-                          <Controller
-                            name="licenseExpiryDate"
-                            control={userFormMethods.control}
-                            render={({ field }) => (
-                              <DatePicker
-                                datePickerType="single"
-                                className={styles.formDatePicker}
-                                onChange={(event) => {
-                                  if (event.length) {
-                                    field.onChange(event[0]);
-                                  }
-                                }}
-                                value={field.value ? new Date(field.value) : ''}>
-                                <DatePickerInput
-                                  className={styles.formDatePicker}
-                                  placeholder="mm/dd/yyyy"
-                                  labelText={t('licenseExpiryDate', 'License Expiry Date')}
-                                  id="formLicenseDatePicker"
-                                  size="md"
+                          <span className={styles.formHeaderSection}>{t('providerDetails', 'Provider details')}</span>
+
+                          <ResponsiveWrapper>
+                            <Controller
+                              name="providerUniqueIdentifier"
+                              control={userFormMethods.control}
+                              render={({ field }) => (
+                                <TextInput
+                                  {...field}
+                                  id="providerUniqueIdentifier"
+                                  type="text"
                                   disabled
-                                  invalid={!!errors.licenseExpiryDate}
-                                  invalidText={errors.licenseExpiryDate?.message}
+                                  labelText={t('providerUniqueIdentifier', 'Provider Unique Identifier')}
+                                  placeholder={t('providerUniqueIdentifierPlaceholder', 'e.g. PUID-0002011-6')}
+                                  invalid={!!errors.providerUniqueIdentifier}
+                                  invalidText={errors.providerUniqueIdentifier?.message}
                                 />
-                              </DatePicker>
-                            )}
-                          />
-                        </ResponsiveWrapper>
-                        {loadingProvider || providerError ? (
-                          <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />
-                        ) : provider.length > 0 ? (
-                          <>
+                              )}
+                            />
+                          </ResponsiveWrapper>
+
+                          <ResponsiveWrapper>
+                            <Controller
+                              name="nationalId"
+                              control={userFormMethods.control}
+                              render={({ field }) => (
+                                <TextInput
+                                  {...field}
+                                  id="nationalId"
+                                  disabled={isInitialValuesEmpty}
+                                  type="text"
+                                  labelText={t('nationalID', 'National ID')}
+                                  placeholder={t('nationalID', 'National ID')}
+                                  invalid={!!errors.nationalId}
+                                  invalidText={errors.nationalId?.message}
+                                  className={styles.checkboxLabelSingleLine}
+                                />
+                              )}
+                            />
+                          </ResponsiveWrapper>
+
+                          <ResponsiveWrapper>
+                            <Controller
+                              name="passportNumber"
+                              control={userFormMethods.control}
+                              render={({ field }) => (
+                                <TextInput
+                                  {...field}
+                                  id="passportNumber"
+                                  disabled={isInitialValuesEmpty}
+                                  type="text"
+                                  labelText={t('passportNumber', 'Passport number')}
+                                  placeholder={t('passportNumber', 'Passport number')}
+                                  invalid={!!errors.passportNumber}
+                                  invalidText={errors.passportNumber?.message}
+                                  className={styles.checkboxLabelSingleLine}
+                                />
+                              )}
+                            />
+                          </ResponsiveWrapper>
+
+                          <ResponsiveWrapper>
+                            <Controller
+                              name="providerLicense"
+                              control={userFormMethods.control}
+                              render={({ field }) => (
+                                <TextInput
+                                  {...field}
+                                  id="providerLicense"
+                                  type="text"
+                                  disabled
+                                  labelText={t('providerLicense', 'License Number')}
+                                  placeholder={t('providerLicensePlaceholder', 'e.g. GP/2026/638333')}
+                                  className={styles.checkboxLabelSingleLine}
+                                />
+                              )}
+                            />
+                          </ResponsiveWrapper>
+
+                          <ResponsiveWrapper>
+                            <Controller
+                              name="licenseBody"
+                              control={userFormMethods.control}
+                              render={({ field }) => (
+                                <TextInput
+                                  {...field}
+                                  id="licenseBody"
+                                  type="text"
+                                  disabled
+                                  labelText={t('licenseBody', 'License body')}
+                                  placeholder={t('licenseBodyPlaceholder', 'e.g. KMPDC')}
+                                  className={styles.checkboxLabelSingleLine}
+                                />
+                              )}
+                            />
+                          </ResponsiveWrapper>
+
+                          <ResponsiveWrapper>
+                            <Controller
+                              name="qualification"
+                              control={userFormMethods.control}
+                              render={({ field }) => (
+                                <TextInput
+                                  {...field}
+                                  id="qualification"
+                                  type="text"
+                                  disabled
+                                  labelText={t('qualification', 'Qualification')}
+                                  placeholder={t('qualificationPlaceholder', 'e.g. MBChB(UON)2009')}
+                                  invalid={!!errors.qualification}
+                                  invalidText={errors.qualification?.message}
+                                  className={styles.checkboxLabelSingleLine}
+                                />
+                              )}
+                            />
+                          </ResponsiveWrapper>
+
+                          <ResponsiveWrapper>
+                            <Controller
+                              name="specialty"
+                              control={userFormMethods.control}
+                              render={({ field }) => (
+                                <TextInput
+                                  {...field}
+                                  id="specialty"
+                                  type="text"
+                                  disabled
+                                  labelText={t('specialty', 'Specialty')}
+                                  placeholder={t('specialtyPlaceholder', 'e.g. MEDICAL DOCTOR')}
+                                  className={styles.checkboxLabelSingleLine}
+                                />
+                              )}
+                            />
+                          </ResponsiveWrapper>
+
+                          <ResponsiveWrapper>
+                            <Controller
+                              name="providerCadre"
+                              control={userFormMethods.control}
+                              render={({ field }) => (
+                                <TextInput
+                                  {...field}
+                                  id="providerCadre"
+                                  type="text"
+                                  disabled
+                                  labelText={t('providerCadre', 'Provider cadre')}
+                                  placeholder={t('providerCadrePlaceholder', 'e.g. MEDICINE')}
+                                  className={styles.checkboxLabelSingleLine}
+                                />
+                              )}
+                            />
+                          </ResponsiveWrapper>
+
+                          <ResponsiveWrapper>
+                            <Controller
+                              name="practiceType"
+                              control={userFormMethods.control}
+                              render={({ field }) => (
+                                <TextInput
+                                  {...field}
+                                  id="practiceType"
+                                  type="text"
+                                  disabled
+                                  labelText={t('practiceType', 'Practice type')}
+                                  placeholder={t('practiceTypePlaceholder', 'e.g. Clinical Practice')}
+                                  className={styles.checkboxLabelSingleLine}
+                                />
+                              )}
+                            />
+                          </ResponsiveWrapper>
+
+                          <ResponsiveWrapper>
+                            <Controller
+                              name="licenseExpiryDate"
+                              control={userFormMethods.control}
+                              render={({ field }) => (
+                                <DatePicker
+                                  datePickerType="single"
+                                  className={styles.formDatePicker}
+                                  onChange={(event) => {
+                                    if (event.length) {
+                                      field.onChange(event[0]);
+                                    }
+                                  }}
+                                  value={field.value ? new Date(field.value) : ''}>
+                                  <DatePickerInput
+                                    className={styles.formDatePicker}
+                                    placeholder="mm/dd/yyyy"
+                                    labelText={t('licenseExpiryDate', 'License Expiry Date')}
+                                    id="formLicenseDatePicker"
+                                    size="md"
+                                    disabled
+                                    invalid={!!errors.licenseExpiryDate}
+                                    invalidText={errors.licenseExpiryDate?.message}
+                                  />
+                                </DatePicker>
+                              )}
+                            />
+                          </ResponsiveWrapper>
+
+                          {loadingProvider || providerError ? (
+                            <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />
+                          ) : provider.length > 0 ? (
                             <ResponsiveWrapper>
                               <Controller
                                 name="systemId"
@@ -912,9 +1031,7 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
                                 )}
                               />
                             </ResponsiveWrapper>
-                          </>
-                        ) : (
-                          <>
+                          ) : (
                             <Controller
                               name="providerIdentifiers"
                               control={userFormMethods.control}
@@ -932,208 +1049,204 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
                                 </CheckboxGroup>
                               )}
                             />
-                          </>
-                        )}
-                      </ResponsiveWrapper>
-                    )}
-                    {hasLoginInfo && (
-                      <ResponsiveWrapper>
-                        <span className={styles.formHeaderSection}>{t('loginInfo', 'Login Info')}</span>
-                        <ResponsiveWrapper>
-                          <Controller
-                            name="username"
-                            control={userFormMethods.control}
-                            render={({ field }) => (
-                              <TextInput
-                                {...field}
-                                id="username"
-                                labelText={t('username', 'Username')}
-                                invalid={!!errors.username}
-                                invalidText={errors.username?.message}
-                              />
-                            )}
-                          />
+                          )}
                         </ResponsiveWrapper>
+                      )}
 
+                      {hasLoginInfo && (
                         <ResponsiveWrapper>
-                          <Controller
-                            name="password"
-                            control={userFormMethods.control}
-                            rules={
-                              isInitialValuesEmpty
-                                ? {
-                                    required: 'Password is required',
-                                    minLength: { value: 8, message: 'Password must be at least 8 characters long' },
-                                    pattern: {
-                                      value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/,
-                                      message: 'Password must include uppercase, lowercase, and a number',
-                                    },
-                                  }
-                                : {}
-                            }
-                            render={({ field }) => (
-                              <PasswordInput
-                                {...field}
-                                id="password"
-                                labelText="Password"
-                                invalid={!!errors.password}
-                                invalidText={errors.password?.message}
-                              />
-                            )}
-                          />
-                        </ResponsiveWrapper>
-                        <ResponsiveWrapper>
-                          <Controller
-                            name="confirmPassword"
-                            control={userFormMethods.control}
-                            rules={
-                              isInitialValuesEmpty
-                                ? {
-                                    required: 'Please confirm your password',
-                                    validate: (value) =>
-                                      value === userFormMethods.watch('password') || 'Passwords do not match',
-                                  }
-                                : {}
-                            }
-                            render={({ field }) => (
-                              <PasswordInput
-                                {...field}
-                                id="confirmPassword"
-                                labelText="Confirm Password"
-                                invalid={!!errors.confirmPassword}
-                                invalidText={errors.confirmPassword?.message}
-                              />
-                            )}
-                          />
-                        </ResponsiveWrapper>
-                        <ResponsiveWrapper>
-                          <Controller
-                            name="forcePasswordChange"
-                            control={userFormMethods.control}
-                            render={({ field }) => (
-                              <CheckboxGroup
-                                legendText={t('forcePasswordChange', 'Force Password Change')}
-                                className={styles.checkboxGroupGrid}>
-                                <Checkbox
-                                  className={styles.multilineCheckboxLabel}
-                                  id="forcePasswordChange"
-                                  labelText={t(
-                                    'forcePasswordChangeHelper',
-                                    'Optionally require this user to change their password on next login',
-                                  )}
-                                  checked={!!field.value || false}
-                                  onChange={(e) => field.onChange(e.target.checked)}
+                          <span className={styles.formHeaderSection}>{t('loginInfo', 'Login Info')}</span>
+                          <ResponsiveWrapper>
+                            <Controller
+                              name="username"
+                              control={userFormMethods.control}
+                              render={({ field }) => (
+                                <TextInput
+                                  {...field}
+                                  id="username"
+                                  labelText={t('username', 'Username')}
+                                  invalid={!!errors.username}
+                                  invalidText={errors.username?.message}
                                 />
-                              </CheckboxGroup>
-                            )}
-                          />
+                              )}
+                            />
+                          </ResponsiveWrapper>
+                          <ResponsiveWrapper>
+                            <Controller
+                              name="password"
+                              control={userFormMethods.control}
+                              rules={
+                                isInitialValuesEmpty
+                                  ? {
+                                      required: 'Password is required',
+                                      minLength: { value: 8, message: 'Password must be at least 8 characters long' },
+                                      pattern: {
+                                        value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/,
+                                        message: 'Password must include uppercase, lowercase, and a number',
+                                      },
+                                    }
+                                  : {}
+                              }
+                              render={({ field }) => (
+                                <PasswordInput
+                                  {...field}
+                                  id="password"
+                                  labelText="Password"
+                                  invalid={!!errors.password}
+                                  invalidText={errors.password?.message}
+                                />
+                              )}
+                            />
+                          </ResponsiveWrapper>
+                          <ResponsiveWrapper>
+                            <Controller
+                              name="confirmPassword"
+                              control={userFormMethods.control}
+                              rules={
+                                isInitialValuesEmpty
+                                  ? {
+                                      required: 'Please confirm your password',
+                                      validate: (value) =>
+                                        value === userFormMethods.watch('password') || 'Passwords do not match',
+                                    }
+                                  : {}
+                              }
+                              render={({ field }) => (
+                                <PasswordInput
+                                  {...field}
+                                  id="confirmPassword"
+                                  labelText="Confirm Password"
+                                  invalid={!!errors.confirmPassword}
+                                  invalidText={errors.confirmPassword?.message}
+                                />
+                              )}
+                            />
+                          </ResponsiveWrapper>
+                          <ResponsiveWrapper>
+                            <Controller
+                              name="forcePasswordChange"
+                              control={userFormMethods.control}
+                              render={({ field }) => (
+                                <CheckboxGroup
+                                  legendText={t('forcePasswordChange', 'Force Password Change')}
+                                  className={styles.checkboxGroupGrid}>
+                                  <Checkbox
+                                    className={styles.multilineCheckboxLabel}
+                                    id="forcePasswordChange"
+                                    labelText={t(
+                                      'forcePasswordChangeHelper',
+                                      'Optionally require this user to change their password on next login',
+                                    )}
+                                    checked={!!field.value || false}
+                                    onChange={(e) => field.onChange(e.target.checked)}
+                                  />
+                                </CheckboxGroup>
+                              )}
+                            />
+                          </ResponsiveWrapper>
                         </ResponsiveWrapper>
-                      </ResponsiveWrapper>
-                    )}
+                      )}
 
-                    {hasRoles && (
-                      <ResponsiveWrapper>
-                        <span className={styles.formHeaderSection}>{t('rolesInfo', 'Roles Info')}</span>
+                      {hasRoles && (
                         <ResponsiveWrapper>
-                          {filterRolesConfig(rolesConfig).map((category) => (
-                            <Column key={category.category} xsm={8} md={12} lg={12} className={styles.checkBoxColumn}>
-                              <CheckboxGroup legendText={category.category} className={styles.checkboxGroupGrid}>
-                                {isLoading ? (
-                                  <InlineLoading
-                                    status="active"
-                                    iconDescription="Loading"
-                                    description="Loading data..."
-                                  />
-                                ) : (
-                                  <Controller
-                                    name="roles"
-                                    control={userFormMethods.control}
-                                    render={({ field }) => {
-                                      const selectedRoles = field.value || [];
-
-                                      return (
-                                        <>
-                                          {roles
-                                            .filter((role) => category.roles.includes(role.name))
-                                            .map((role) => {
-                                              const isSelected = selectedRoles.some(
-                                                (r) =>
-                                                  r.display === role.display &&
-                                                  r.description === role.description &&
-                                                  r.uuid === role.uuid,
-                                              );
-
-                                              return (
-                                                <label
-                                                  key={role.display}
-                                                  className={
-                                                    isSelected ? styles.checkboxLabelSelected : styles.checkboxLabel
-                                                  }>
-                                                  <input
-                                                    type="checkbox"
-                                                    id={role.display}
-                                                    checked={isSelected}
-                                                    onChange={(e) => {
-                                                      const updatedValue = e.target.checked
-                                                        ? [
-                                                            ...selectedRoles,
-                                                            {
-                                                              uuid: role.uuid,
-                                                              display: role.display,
-                                                              description: role.description ?? null,
-                                                            },
-                                                          ]
-                                                        : selectedRoles.filter(
-                                                            (selectedRole) => selectedRole.display !== role.display,
-                                                          );
-
-                                                      field.onChange(updatedValue);
-                                                    }}
-                                                  />
-                                                  {role.display}
-                                                </label>
-                                              );
-                                            })}
-                                        </>
-                                      );
-                                    }}
-                                  />
-                                )}
-                              </CheckboxGroup>
-                            </Column>
-                          ))}
+                          <span className={styles.formHeaderSection}>{t('rolesInfo', 'Roles Info')}</span>
+                          <ResponsiveWrapper>
+                            {filterRolesConfig(rolesConfig).map((category) => (
+                              <Column key={category.category} xsm={8} md={12} lg={12} className={styles.checkBoxColumn}>
+                                <CheckboxGroup legendText={category.category} className={styles.checkboxGroupGrid}>
+                                  {isLoading ? (
+                                    <InlineLoading
+                                      status="active"
+                                      iconDescription="Loading"
+                                      description="Loading data..."
+                                    />
+                                  ) : (
+                                    <Controller
+                                      name="roles"
+                                      control={userFormMethods.control}
+                                      render={({ field }) => {
+                                        const selectedRoles = field.value || [];
+                                        return (
+                                          <>
+                                            {roles
+                                              .filter((role) => category.roles.includes(role.name))
+                                              .map((role) => {
+                                                const isSelected = selectedRoles.some(
+                                                  (r) =>
+                                                    r.display === role.display &&
+                                                    r.description === role.description &&
+                                                    r.uuid === role.uuid,
+                                                );
+                                                return (
+                                                  <label
+                                                    key={role.display}
+                                                    className={
+                                                      isSelected ? styles.checkboxLabelSelected : styles.checkboxLabel
+                                                    }>
+                                                    <input
+                                                      type="checkbox"
+                                                      id={role.display}
+                                                      checked={isSelected}
+                                                      onChange={(e) => {
+                                                        const updatedValue = e.target.checked
+                                                          ? [
+                                                              ...selectedRoles,
+                                                              {
+                                                                uuid: role.uuid,
+                                                                display: role.display,
+                                                                description: role.description ?? null,
+                                                              },
+                                                            ]
+                                                          : selectedRoles.filter(
+                                                              (selectedRole) => selectedRole.display !== role.display,
+                                                            );
+                                                        field.onChange(updatedValue);
+                                                      }}
+                                                    />
+                                                    {role.display}
+                                                  </label>
+                                                );
+                                              })}
+                                          </>
+                                        );
+                                      }}
+                                    />
+                                  )}
+                                </CheckboxGroup>
+                              </Column>
+                            ))}
+                          </ResponsiveWrapper>
                         </ResponsiveWrapper>
-                      </ResponsiveWrapper>
-                    )}
-                  </Stack>
-                </div>
-                <ButtonSet className={classNames({ [styles.tablet]: isTablet, [styles.desktop]: !isTablet })}>
-                  <Button kind="secondary" onClick={handleBackClick} className={styles.btn}>
-                    {t(hasDemographicInfo ? 'cancel' : 'back', hasDemographicInfo ? 'Cancel' : 'Back')}
-                  </Button>
-
-                  <Button
-                    kind="primary"
-                    type={getSubmitButtonType()}
-                    disabled={isSubmitting || Object.keys(errors).length > 0 || searchHWR.isHWRLoading}
-                    renderIcon={getSubmitButtonIcon()}
-                    className={styles.btn}
-                    onClick={handleNextClick}>
-                    {isSubmitting ? (
-                      <span style={{ display: 'flex', alignItems: 'center' }}>
-                        {t('submitting', 'Submitting...')} <InlineLoading status="active" />
-                      </span>
-                    ) : (
-                      getSubmitButtonText()
-                    )}
-                  </Button>
-                </ButtonSet>
-              </form>
-            </FormProvider>
+                      )}
+                    </Stack>
+                  </div>
+                  <ButtonSet className={classNames({ [styles.tablet]: isTablet, [styles.desktop]: !isTablet })}>
+                    <Button kind="secondary" onClick={handleBackClick} className={styles.btn}>
+                      {t(hasDemographicInfo ? 'cancel' : 'back', hasDemographicInfo ? 'Cancel' : 'Back')}
+                    </Button>
+                    <Button
+                      kind="primary"
+                      type={getSubmitButtonType()}
+                      disabled={isSubmitting || Object.keys(errors).length > 0 || searchHWR.isHWRLoading}
+                      renderIcon={getSubmitButtonIcon()}
+                      className={styles.btn}
+                      onClick={handleNextClick}>
+                      {isSubmitting ? (
+                        <span style={{ display: 'flex', alignItems: 'center' }}>
+                          {t('submitting', 'Submitting...')} <InlineLoading status="active" />
+                        </span>
+                      ) : (
+                        getSubmitButtonText()
+                      )}
+                    </Button>
+                  </ButtonSet>
+                </form>
+              </FormProvider>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </Workspace2>
   );
 };