@palladium-ethiopia/esm-admin-app 5.4.2-pre.100

package/src/components/users/manage-users/sections/demographic-section.component.tsx

@@ -0,0 +1,156 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Controller, Control, FieldErrors } from 'react-hook-form';
+import { ResponsiveWrapper } from '@openmrs/esm-framework';
+import { Column, TextInput, RadioButtonGroup, RadioButton, Button } from '@carbon/react';
+import { ProviderAutosuggest } from '../provider-autosuggest.component';
+import type { ProviderSearchResult } from '../provider-search.resource';
+import type { UserFormSchema } from '../hooks/useUserManagementForm';
+import styles from '../user-management.workspace.scss';
+
+interface DemographicSectionProps {
+  control: Control<UserFormSchema>;
+  errors: FieldErrors<UserFormSchema>;
+  isInitialValuesEmpty: boolean;
+  isProviderReadOnly?: boolean;
+  onProviderSelected: (providerData: ProviderSearchResult) => void;
+  onFormReset?: () => void;
+  showResetButton?: boolean;
+  formResetKey?: number;
+  isFormDirty?: boolean;
+}
+
+export const DemographicSection: React.FC<DemographicSectionProps> = ({
+  control,
+  errors,
+  isInitialValuesEmpty,
+  isProviderReadOnly = false,
+  onProviderSelected,
+  onFormReset,
+  showResetButton = false,
+  formResetKey = 0,
+  isFormDirty = false,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <ResponsiveWrapper>
+      {isInitialValuesEmpty && (
+        <Column>
+          <ProviderAutosuggest key={formResetKey} onProviderSelected={onProviderSelected} />
+          {showResetButton && onFormReset && (
+            <Button kind="ghost" size="sm" onClick={onFormReset} disabled={!isFormDirty}>
+              {t('reset', 'Reset')}
+            </Button>
+          )}
+        </Column>
+      )}
+      <span className={styles.formHeaderSection}>{t('demographicInfo', 'Demographic info')}</span>
+      <ResponsiveWrapper>
+        <Controller
+          name="givenName"
+          control={control}
+          render={({ field }) => (
+            <TextInput
+              {...field}
+              id="givenName"
+              type="text"
+              labelText={t('givenName', 'Given Name')}
+              placeholder={t('userGivenName', 'Enter Given Name')}
+              disabled={isProviderReadOnly}
+              invalid={!!errors.givenName}
+              invalidText={errors.givenName?.message}
+            />
+          )}
+        />
+      </ResponsiveWrapper>
+      <ResponsiveWrapper>
+        <Controller
+          name="middleName"
+          control={control}
+          render={({ field }) => (
+            <TextInput
+              {...field}
+              id="middleName"
+              labelText={t('middleName', 'Middle Name')}
+              placeholder={t('middleName', 'Middle Name')}
+              disabled={isProviderReadOnly}
+            />
+          )}
+        />
+      </ResponsiveWrapper>
+      <ResponsiveWrapper>
+        <Controller
+          name="familyName"
+          control={control}
+          render={({ field }) => (
+            <TextInput
+              {...field}
+              id="familyName"
+              labelText={t('familyName', 'Family Name')}
+              placeholder={t('familyName', 'Family Name')}
+              disabled={isProviderReadOnly}
+              invalid={!!errors.familyName}
+              invalidText={errors.familyName?.message}
+            />
+          )}
+        />
+      </ResponsiveWrapper>
+      <ResponsiveWrapper>
+        <Controller
+          name="phoneNumber"
+          control={control}
+          render={({ field }) => (
+            <TextInput
+              {...field}
+              id="phoneNumber"
+              type="text"
+              disabled={isProviderReadOnly}
+              labelText={t('phoneNumber', 'Phone Number')}
+              placeholder={t('phoneNumber', 'Enter Phone Number')}
+              invalid={!!errors.phoneNumber}
+              invalidText={errors.phoneNumber?.message}
+            />
+          )}
+        />
+      </ResponsiveWrapper>
+      <ResponsiveWrapper>
+        <Controller
+          name="email"
+          control={control}
+          render={({ field }) => (
+            <TextInput
+              {...field}
+              id="email"
+              type="email"
+              disabled={isProviderReadOnly}
+              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={control}
+          render={({ field }) => (
+            <RadioButtonGroup
+              {...field}
+              legendText={t('sex', 'Sex')}
+              orientation="vertical"
+              disabled={isProviderReadOnly}
+              invalid={!!errors.gender}
+              invalidText={errors.gender?.message}>
+              <RadioButton value="M" id="M" labelText={t('male', 'Male')} checked={field.value === 'M'} />
+              <RadioButton value="F" id="F" labelText={t('female', 'Female')} checked={field.value === 'F'} />
+            </RadioButtonGroup>
+          )}
+        />
+      </ResponsiveWrapper>
+    </ResponsiveWrapper>
+  );
+};

package/src/components/users/manage-users/sections/login-section.component.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Controller, Control, FieldErrors } from 'react-hook-form';
+import { ResponsiveWrapper } from '@openmrs/esm-framework';
+import { TextInput, PasswordInput } from '@carbon/react';
+import type { UserFormSchema } from '../hooks/useUserManagementForm';
+import styles from '../user-management.workspace.scss';
+
+interface LoginSectionProps {
+  control: Control<UserFormSchema>;
+  errors: FieldErrors<UserFormSchema>;
+}
+
+export const LoginSection: React.FC<LoginSectionProps> = ({ control, errors }) => {
+  const { t } = useTranslation();
+
+  return (
+    <ResponsiveWrapper>
+      <span className={styles.formHeaderSection}>{t('loginInfo', 'Login Info')}</span>
+      <ResponsiveWrapper>
+        <Controller
+          name="username"
+          control={control}
+          render={({ field }) => (
+            <TextInput
+              {...field}
+              id="username"
+              labelText={t('username', 'Username')}
+              invalid={!!errors.username}
+              invalidText={errors.username?.message}
+              onBlur={(e) => {
+                field.onBlur();
+                const trimmed = e.target.value?.trim() ?? '';
+                if (trimmed !== e.target.value) {
+                  field.onChange(trimmed);
+                }
+              }}
+            />
+          )}
+        />
+      </ResponsiveWrapper>
+      <ResponsiveWrapper>
+        <Controller
+          name="password"
+          control={control}
+          render={({ field }) => (
+            <PasswordInput
+              {...field}
+              id="password"
+              labelText={t('password', 'Password')}
+              invalid={!!errors.password}
+              invalidText={errors.password?.message}
+              onBlur={(e) => {
+                field.onBlur();
+                const trimmed = e.target.value?.trim() ?? '';
+                if (trimmed !== e.target.value) {
+                  field.onChange(trimmed);
+                }
+              }}
+            />
+          )}
+        />
+      </ResponsiveWrapper>
+      <ResponsiveWrapper>
+        <Controller
+          name="confirmPassword"
+          control={control}
+          render={({ field }) => (
+            <PasswordInput
+              {...field}
+              id="confirmPassword"
+              labelText={t('confirmPassword', 'Confirm Password')}
+              invalid={!!errors.confirmPassword}
+              invalidText={errors.confirmPassword?.message}
+              onBlur={(e) => {
+                field.onBlur();
+                const trimmed = e.target.value?.trim() ?? '';
+                if (trimmed !== e.target.value) {
+                  field.onChange(trimmed);
+                }
+              }}
+            />
+          )}
+        />
+      </ResponsiveWrapper>
+    </ResponsiveWrapper>
+  );
+};

package/src/components/users/manage-users/sections/provider-section.component.tsx

@@ -0,0 +1,270 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Controller, Control, FieldErrors } from 'react-hook-form';
+import { ResponsiveWrapper, useConfig } from '@openmrs/esm-framework';
+import { TextInput, CheckboxGroup, Checkbox, DatePicker, DatePickerInput, InlineLoading } from '@carbon/react';
+import type { UserFormSchema } from '../hooks/useUserManagementForm';
+import type { ProviderWithAttributes } from '../../../../user-management.resources';
+import type { ConfigObject } from '../../../../config-schema';
+import { extractAttributeFromProvider } from '../user-management.utils';
+import styles from '../user-management.workspace.scss';
+
+interface ProviderSectionProps {
+  control: Control<UserFormSchema>;
+  errors: FieldErrors<UserFormSchema>;
+  isInitialValuesEmpty: boolean;
+  isProviderReadOnly?: boolean;
+  loadingProvider: boolean;
+  providerError: unknown;
+  provider: ProviderWithAttributes[];
+}
+
+export const ProviderSection: React.FC<ProviderSectionProps> = ({
+  control,
+  errors,
+  isInitialValuesEmpty,
+  isProviderReadOnly = false,
+  loadingProvider,
+  providerError,
+  provider,
+}) => {
+  const { t } = useTranslation();
+  const config = useConfig<ConfigObject>();
+  const externalId =
+    provider.length > 0 ? extractAttributeFromProvider(provider[0], config.providerExternalIdAttributeTypeUuid) : '';
+  const ihrisIdentifier =
+    provider.length > 0
+      ? extractAttributeFromProvider(provider[0], config.providerIHRISIdentifierAttributeTypeUuid)
+      : '';
+
+  return (
+    <ResponsiveWrapper>
+      <span className={styles.formHeaderSection}>{t('providerDetails', 'Provider details')}</span>
+      <ResponsiveWrapper>
+        <Controller
+          name="providerUniqueIdentifier"
+          control={control}
+          render={({ field }) => (
+            <TextInput
+              {...field}
+              id="providerUniqueIdentifier"
+              type="text"
+              labelText={t('providerUniqueIdentifier', 'Provider Unique Identifier')}
+              placeholder={t('providerUniqueIdentifierPlaceholder', 'Enter Provider Unqiue Identifier')}
+              disabled={isProviderReadOnly}
+              invalid={!!errors.providerUniqueIdentifier}
+              invalidText={errors.providerUniqueIdentifier?.message}
+            />
+          )}
+        />
+      </ResponsiveWrapper>
+      {externalId && (
+        <ResponsiveWrapper>
+          <TextInput
+            id="externalId"
+            type="text"
+            labelText={t('externalId', 'External ID')}
+            value={externalId}
+            readOnly
+            className={styles.checkboxLabelSingleLine}
+          />
+        </ResponsiveWrapper>
+      )}
+      {ihrisIdentifier && (
+        <ResponsiveWrapper>
+          <TextInput
+            id="ihrisIdentifier"
+            type="text"
+            labelText={t('ihrisIdentifier', 'IHRIS Identifier')}
+            value={ihrisIdentifier}
+            readOnly
+            className={styles.checkboxLabelSingleLine}
+          />
+        </ResponsiveWrapper>
+      )}
+      <ResponsiveWrapper>
+        <Controller
+          name="nationalId"
+          control={control}
+          render={({ field }) => (
+            <TextInput
+              {...field}
+              id="nationalId"
+              disabled={isProviderReadOnly}
+              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={control}
+          render={({ field }) => (
+            <TextInput
+              {...field}
+              id="passportNumber"
+              disabled={isProviderReadOnly}
+              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={control}
+          render={({ field }) => (
+            <TextInput
+              {...field}
+              id="providerLicense"
+              type="text"
+              disabled={isProviderReadOnly}
+              labelText={t('providerLicense', 'License Number')}
+              placeholder={t('providerLicense', 'License Number')}
+              className={styles.checkboxLabelSingleLine}
+            />
+          )}
+        />
+      </ResponsiveWrapper>
+      <ResponsiveWrapper>
+        <Controller
+          name="registrationNumber"
+          control={control}
+          render={({ field }) => (
+            <TextInput
+              {...field}
+              id="registrationNumber"
+              type="text"
+              disabled={isProviderReadOnly}
+              labelText={t('registrationNumber', 'Registration Number')}
+              placeholder={t('registrationNumber', 'Registration Number')}
+              className={styles.checkboxLabelSingleLine}
+            />
+          )}
+        />
+      </ResponsiveWrapper>
+      <ResponsiveWrapper>
+        <Controller
+          name="qualification"
+          control={control}
+          render={({ field }) => (
+            <TextInput
+              {...field}
+              id="qualification"
+              type="qualification"
+              disabled={isProviderReadOnly}
+              labelText={t('qualification', 'Qualification')}
+              placeholder={t('qualification', 'Qualification')}
+              invalid={!!errors.qualification}
+              invalidText={errors.qualification?.message}
+              className={styles.checkboxLabelSingleLine}
+            />
+          )}
+        />
+      </ResponsiveWrapper>
+      <ResponsiveWrapper>
+        <Controller
+          name="licenseExpiryDate"
+          control={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={isProviderReadOnly}
+                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"
+              control={control}
+              render={({ field }) => (
+                <TextInput
+                  {...field}
+                  id="systemeId"
+                  type="text"
+                  labelText={t('providerId', 'Provider Id')}
+                  placeholder={t('providerId', 'Provider Id')}
+                  disabled={isProviderReadOnly}
+                  invalid={!!errors.systemId}
+                  invalidText={errors.systemId?.message}
+                  className={styles.checkboxLabelSingleLine}
+                />
+              )}
+            />
+            {!isProviderReadOnly && (
+              <Controller
+                name="isEditProvider"
+                control={control}
+                render={({ field }) => (
+                  <CheckboxGroup
+                    legendText={t('editProvider', 'Edit Provider Details')}
+                    className={styles.multilineCheckboxLabel}>
+                    <Checkbox
+                      className={styles.checkboxLabelSingleLine}
+                      id="isEditProvider"
+                      labelText={t('EditProviderDetails', 'Edit provider details?')}
+                      checked={field.value || false}
+                      onChange={(e) => field.onChange(e.target.checked)}
+                    />
+                  </CheckboxGroup>
+                )}
+              />
+            )}
+          </ResponsiveWrapper>
+        </>
+      ) : (
+        <>
+          <Controller
+            name="providerIdentifiers"
+            control={control}
+            render={({ field }) => (
+              <CheckboxGroup
+                legendText={t('providerIdentifiers', 'Provider Details')}
+                className={styles.multilineCheckboxLabel}>
+                <Checkbox
+                  className={styles.checkboxLabelSingleLine}
+                  id="providerIdentifiersa"
+                  labelText={t('providerIdentifiers', 'Create a Provider account for this user')}
+                  checked={field.value || false}
+                  onChange={(e) => field.onChange(e.target.checked)}
+                />
+              </CheckboxGroup>
+            )}
+          />
+        </>
+      )}
+    </ResponsiveWrapper>
+  );
+};

package/src/components/users/manage-users/sections/roles-section.component.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Controller, Control } from 'react-hook-form';
+import { ResponsiveWrapper } from '@openmrs/esm-framework';
+import { Column, CheckboxGroup, InlineLoading } from '@carbon/react';
+import { filterRolesConfig, RoleConfigCategory } from '../user-management.utils';
+import type { UserFormSchema } from '../hooks/useUserManagementForm';
+import type { Role } from '../../../../types';
+import styles from '../user-management.workspace.scss';
+
+interface RolesSectionProps {
+  control: Control<UserFormSchema>;
+  roles: Role[];
+  rolesConfig: RoleConfigCategory[];
+  isLoading: boolean;
+}
+
+export const RolesSection: React.FC<RolesSectionProps> = ({ control, roles, rolesConfig, isLoading }) => {
+  const { t } = useTranslation();
+  const filteredRolesConfig = filterRolesConfig(rolesConfig);
+
+  return (
+    <ResponsiveWrapper>
+      <span className={styles.formHeaderSection}>{t('rolesInfo', 'Roles Info')}</span>
+      <ResponsiveWrapper>
+        {filteredRolesConfig.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={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>
+  );
+};

package/src/components/users/manage-users/user-details/user-detail.scss

@@ -0,0 +1,75 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.patientName {
+  @include type.type-style('label-02');
+  color: colors.$gray-100;
+  font-weight: 800;
+  margin-left: layout.$spacing-04;
+  margin-right: layout.$spacing-01;
+}
+.middot {
+  margin: 0 layout.$spacing-01;
+}
+.spanField {
+  margin-left: layout.$spacing-04;
+  margin-right: layout.$spacing-01;
+}
+
+.gender {
+  display: flex;
+  align-items: center;
+  color: colors.$gray-70;
+  gap: layout.$spacing-01;
+  margin-left: layout.$spacing-02;
+}
+.statusTag {
+  display: flex;
+  align-items: center;
+  color: colors.$gray-70;
+  gap: layout.$spacing-01;
+  margin-left: layout.$spacing-02;
+}
+.demographics {
+  display: flex;
+  align-items: center;
+  margin-bottom: layout.$spacing-02;
+  color: $text-02;
+  text-transform: uppercase;
+}
+
+.patientBanner {
+  display: flex;
+}
+
+.patientInfo {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.flexRow {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  margin-top: layout.$spacing-04;
+}
+.patientAvatar {
+  margin-top: layout.$spacing-06;
+}
+.viewRoles {
+  margin-top: layout.$spacing-06;
+}
+.roleContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.roleDescription {
+  margin: 0;
+  color: colors.$gray-70;
+  font-size: type.type-scale(1);
+}