@kenyaemr/esm-admin-app 5.4.4-pre.41 → 5.4.4-pre.410

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

@@ -1,75 +1,203 @@
+@use '@carbon/colors';
 @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;
+.providerDetailsContainer {
+  width: 100%;
+  background-color: colors.$gray-10;
+  padding: layout.$spacing-04;
 }
 
-.gender {
-  display: flex;
-  align-items: center;
-  color: colors.$gray-70;
-  gap: layout.$spacing-01;
-  margin-left: layout.$spacing-02;
-}
-.statusTag {
+.patientBanner {
   display: flex;
-  align-items: center;
-  color: colors.$gray-70;
-  gap: layout.$spacing-01;
-  margin-left: layout.$spacing-02;
+  gap: layout.$spacing-05;
+  padding: layout.$spacing-05 layout.$spacing-06;
+  background-color: colors.$white;
+  border-radius: 6px;
+  border: 1px solid colors.$gray-20;
 }
-.demographics {
+
+.patientAvatar {
+  flex-shrink: 0;
+  width: 4rem;
+  height: 4rem;
   display: flex;
   align-items: center;
-  margin-bottom: layout.$spacing-02;
-  color: $text-02;
-  text-transform: uppercase;
+  justify-content: center;
+  background-color: colors.$gray-10;
+  overflow: hidden;
+
+  :global(img) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 }
 
-.patientBanner {
+.patientInfo {
   display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  gap: layout.$spacing-04;
 }
 
-.patientInfo {
+.row {
   display: flex;
   flex-direction: column;
-  width: 100%;
+}
+
+.patientNameRow {
+  align-items: flex-start;
 }
 
 .flexRow {
   display: flex;
   flex-flow: row wrap;
   align-items: center;
-  margin-top: layout.$spacing-04;
+  gap: layout.$spacing-03;
+  row-gap: layout.$spacing-02;
 }
-.patientAvatar {
-  margin-top: layout.$spacing-06;
+
+.tagRow {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: layout.$spacing-02;
+}
+
+.patientName {
+  @include type.type-style('heading-03');
+  color: colors.$gray-100;
+  font-weight: 600;
+  margin: 0;
+}
+
+.gender {
+  @include type.type-style('body-01');
+  color: colors.$gray-70;
+}
+
+.statusTag {
+  display: inline-flex;
+  align-items: center;
+}
+
+.puidBadge {
+  @include type.type-style('label-02');
+  display: inline-block;
+  background-color: colors.$gray-10;
+  color: colors.$gray-90;
+  padding: layout.$spacing-02 layout.$spacing-03;
+  border-radius: 4px;
+  border: 1px solid colors.$gray-20;
+  align-self: flex-start;
+
+  strong {
+    color: colors.$gray-100;
+    font-weight: 600;
+  }
+}
+
+.spanField {
+  @include type.type-style('body-01');
+  display: inline-flex;
+  align-items: center;
+  gap: layout.$spacing-01;
+  color: colors.$gray-90;
+}
+
+.fieldLabel {
+  color: colors.$gray-70;
+  font-weight: 400;
+}
+
+.fieldValue {
+  color: colors.$gray-100;
+  font-weight: 500;
+}
+
+.middot {
+  color: colors.$gray-50;
+  user-select: none;
 }
+
+.demographics {
+  display: flex;
+  align-items: center;
+  margin-bottom: layout.$spacing-02;
+  color: $text-02;
+  text-transform: uppercase;
+}
+
 .viewRoles {
-  margin-top: layout.$spacing-06;
+  margin-top: layout.$spacing-04;
+  padding-top: layout.$spacing-04;
+  border-top: 1px solid colors.$gray-20;
+
+  :global(.cds--accordion) {
+    border-top: none;
+  }
+
+  :global(.cds--accordion__heading) {
+    @include type.type-style('label-02');
+    padding: layout.$spacing-03 0;
+  }
+
+  :global(.cds--accordion__title) {
+    color: colors.$gray-100;
+    font-weight: 600;
+  }
 }
+
 .roleContainer {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: layout.$spacing-02;
+  padding: layout.$spacing-03 0;
+}
+
+.roleName {
+  color: colors.$gray-100;
+  font-weight: 600;
 }
 
 .roleDescription {
+  @include type.type-style('body-01');
   margin: 0;
   color: colors.$gray-70;
-  font-size: type.type-scale(1);
+  font-size: 0.875rem;
+  line-height: 1.4;
+}
+
+@media (max-width: 768px) {
+  .patientBanner {
+    flex-direction: column;
+    gap: layout.$spacing-04;
+    padding: layout.$spacing-04;
+  }
+
+  .patientAvatar {
+    width: 3rem;
+    height: 3rem;
+  }
+
+  .patientName {
+    @include type.type-style('heading-02');
+  }
+
+  .flexRow {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: layout.$spacing-02;
+  }
+
+  .middot {
+    display: none;
+  }
+
+  .spanField {
+    width: 100%;
+  }
 }

package/src/components/users/manage-users/user-details/user-details.component.tsx

@@ -1,176 +1,184 @@
-import React, { useRef } from 'react';
-import styles from './user-detail.scss';
+import React, { useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Tag, Accordion, AccordionItem, ContainedList, ContainedListItem } from '@carbon/react';
-import { PatientPhoto } from '@openmrs/esm-framework';
+import { Tag, Accordion, AccordionItem, ContainedListItem } from '@carbon/react';
+import { PatientPhoto, useConfig } from '@openmrs/esm-framework';
 import dayjs from 'dayjs';
 import classNames from 'classnames';
 import capitalize from 'lodash/capitalize';
+
+import styles from './user-detail.scss';
 import { type ProviderResponse, type UserResponse } from '../../../../types';
+import { type ConfigObject } from '../../../../config-schema';
 
 interface UserDetailsProps {
   provider: ProviderResponse;
   user: UserResponse;
 }
 
-interface ProviderAttribute {
-  value: string;
-}
-
-interface ProviderAttributes {
-  licenseAttr?: ProviderAttribute;
-  nationalID?: ProviderAttribute;
-  dateAttr?: ProviderAttribute;
-  phoneNumber?: ProviderAttribute;
-  qualification?: ProviderAttribute;
-  registrationNumber?: ProviderAttribute;
-  emailAddress?: ProviderAttribute;
-  passportNumber: ProviderAttribute;
-  providerUniqueIdentifier: ProviderAttribute;
-}
-
 const UserDetails: React.FC<UserDetailsProps> = ({ provider, user }) => {
   const { t } = useTranslation();
-  const patientBannerRef = useRef(null);
-
-  const attributeMap = {
-    licenseAttr: 'Practising License Number',
-    nationalID: 'Provider National Id Number',
-    dateAttr: 'License Expiry Date',
-    phoneNumber: 'Provider Telephone',
-    qualification: 'Provider Qualification',
-    registrationNumber: 'License Body',
-    emailAddress: 'Provider Address',
-    passportNumber: 'Provider passport number',
-    providerUniqueIdentifier: 'Provider unique identifier',
-  };
-
-  const attributes: ProviderAttributes = Object.entries(attributeMap).reduce((acc, [key, display]) => {
-    const attr = provider?.attributes?.find((attr) => attr.attributeType.display === display);
-    if (attr) {
-      acc[key as keyof ProviderAttributes] = { value: attr.value };
-    }
-    return acc;
-  }, {} as ProviderAttributes);
+  const bannerRef = useRef<HTMLElement>(null);
 
   const {
-    licenseAttr,
-    nationalID,
-    dateAttr,
-    phoneNumber,
-    qualification,
-    registrationNumber,
-    emailAddress,
-    passportNumber,
-    providerUniqueIdentifier,
-  } = attributes;
-
-  const formattedExpiryDate = dateAttr?.value ? dayjs(dateAttr.value).format('YYYY-MM-DD') : null;
+    licenseNumberUuid,
+    licenseExpiryDateUuid,
+    licenseBodyUuid,
+    qualificationUuid,
+    specialtyUuid,
+    providerCadreUuid,
+    practiceTypeUuid,
+    providerNationalIdUuid,
+    passportNumberUuid,
+    providerUniqueIdentifierAttributeTypeUuid,
+    externalProviderIdentifierUuid,
+    phoneNumberUuid,
+    providerAddressUuid,
+  } = useConfig<ConfigObject>();
+
+  const attrByUuid = useMemo(() => {
+    const map: Record<string, string> = {};
+    provider?.attributes?.forEach((a) => {
+      const uuid = a?.attributeType?.uuid;
+      if (uuid && a.value != null) {
+        map[uuid] = typeof a.value === 'string' ? a.value : String(a.value);
+      }
+    });
+    return map;
+  }, [provider]);
+
+  const licenseNumber = attrByUuid[licenseNumberUuid];
+  const licenseExpiryRaw = attrByUuid[licenseExpiryDateUuid];
+  const licenseBody = attrByUuid[licenseBodyUuid];
+  const qualification = attrByUuid[qualificationUuid];
+  const specialty = attrByUuid[specialtyUuid];
+  const providerCadre = attrByUuid[providerCadreUuid];
+  const practiceType = attrByUuid[practiceTypeUuid];
+  const nationalId = attrByUuid[providerNationalIdUuid];
+  const passportNumber = attrByUuid[passportNumberUuid];
+  const providerUniqueIdentifier = attrByUuid[providerUniqueIdentifierAttributeTypeUuid];
+  const externalProviderIdentifier = attrByUuid[externalProviderIdentifierUuid];
+  const phoneNumber = attrByUuid[phoneNumberUuid];
+  const emailAddress = attrByUuid[providerAddressUuid];
+
   const today = dayjs();
-  const expiryDate = dateAttr?.value ? dayjs(dateAttr.value) : null;
+  const expiryDate = licenseExpiryRaw ? dayjs(licenseExpiryRaw) : null;
   const daysUntilExpiry = expiryDate ? expiryDate.diff(today, 'day') : null;
+  const formattedExpiryDate = expiryDate?.isValid() ? expiryDate.format('YYYY-MM-DD') : null;
 
   const getLicenseStatusTag = () => {
-    if (!licenseAttr?.value) {
+    if (!licenseNumber) {
       return <Tag type="red">{t('unlicensed', 'Unlicensed')}</Tag>;
     }
-
-    if (daysUntilExpiry < 0) {
-      return <Tag type="red">{t('licenseExpired', 'License has expired')}</Tag>;
-    } else if (daysUntilExpiry <= 3) {
-      return (
-        <>
-          <Tag type="cyan">{t('licenseExpiringSoon', 'License is expiring soon')}</Tag>
-        </>
-      );
-    } else {
-      return <Tag type="green">{t('active', 'Active')}</Tag>;
+    if (daysUntilExpiry !== null && daysUntilExpiry < 0) {
+      return <Tag type="red">{t('licenseExpired', 'License expired')}</Tag>;
+    }
+    if (daysUntilExpiry !== null && daysUntilExpiry <= 3) {
+      return <Tag type="warm-gray">{t('licenseExpiringSoon', 'License expiring soon')}</Tag>;
     }
+    return <Tag type="green">{t('active', 'Active')}</Tag>;
   };
 
+  const genderLabel =
+    provider?.person?.gender === 'M'
+      ? t('male', 'Male')
+      : provider?.person?.gender === 'F'
+      ? t('female', 'Female')
+      : '';
+
+  const Field = ({ label, value }: { label: string; value?: string | null }) => (
+    <span className={styles.spanField}>
+      <span className={styles.fieldLabel}>{label}:</span> <span className={styles.fieldValue}>{value || '--'}</span>
+    </span>
+  );
+
   return (
     <div className={styles.providerDetailsContainer}>
-      <header aria-label="patient banner" role="banner" ref={patientBannerRef}>
+      <header aria-label={t('providerBanner', 'Provider banner')} role="banner" ref={bannerRef}>
         <div className={styles.patientBanner}>
           <div className={styles.patientAvatar} role="img">
             <PatientPhoto patientUuid={provider?.uuid} patientName={provider?.person?.display} />
           </div>
+
           <div className={styles.patientInfo}>
             <div className={classNames(styles.row, styles.patientNameRow)}>
               <div className={styles.flexRow}>
-                <span className={styles.patientName}>{provider?.person?.display} </span> &middot;
-                <span className={styles.gender}>
-                  {provider?.person?.gender === 'M' ? 'Male' : provider?.person?.gender === 'F' ? 'Female' : ''}{' '}
-                  &middot;{' '}
-                </span>
-                <span className={styles.statusTag}>{getLicenseStatusTag()}</span>
-                <span className={styles.statusTag}>
-                  {qualification?.value && <Tag type="cyan">{capitalize(qualification?.value)}</Tag>}
-                </span>
-                <span className={styles.statusTag}>
-                  {providerUniqueIdentifier?.value && (
-                    <Tag type="cyan">{capitalize(providerUniqueIdentifier?.value)}</Tag>
-                  )}
+                <span className={styles.patientName}>{provider?.person?.display}</span>
+                {genderLabel && <span className={styles.gender}>{genderLabel}</span>}
+
+                <span className={styles.tagRow}>
+                  {getLicenseStatusTag()}
+                  {qualification && <Tag type="cyan">{capitalize(qualification)}</Tag>}
+                  {specialty && <Tag type="purple">{capitalize(specialty)}</Tag>}
+                  {providerCadre && <Tag type="teal">{capitalize(providerCadre)}</Tag>}
                 </span>
               </div>
             </div>
-
-            <div className={classNames(styles.row, styles.patientNameRow)}>
+            <div className={styles.row}>
               <div className={styles.flexRow}>
-                <span className={styles.spanField}>
-                  {t('phoneNumber', 'Phone number')}: {phoneNumber?.value ? phoneNumber.value : '--'}
-                </span>
-                <span className={styles.middot}>&middot; </span>
-
-                <span className={styles.spanField}>
-                  {t('emailAddress', 'Email address')}: {emailAddress?.value ? emailAddress.value : '--'}
-                </span>
+                <Field label={t('phoneNumber', 'Phone')} value={phoneNumber} />
+                <span className={styles.middot}>·</span>
+                <Field label={t('emailAddress', 'Email')} value={emailAddress} />
               </div>
             </div>
-            <div className={classNames(styles.row, styles.patientNameRow)}>
-              <div className={styles.flexRow}>
-                <span className={styles.spanField}>
-                  {t('nationalId', 'National ID')}: {nationalID?.value ? nationalID.value : '--'}
-                </span>
-                <span className={styles.middot}>&middot; </span>
 
-                <span className={styles.spanField}>
-                  {t('licenseNumber', 'License number')}: {licenseAttr?.value ? licenseAttr.value : '--'}
-                </span>
-                <span className={styles.middot}>&middot; </span>
-                <span className={styles.spanField}>
-                  {t('registrationNumber', 'Registration number')}:{' '}
-                  {registrationNumber?.value ? registrationNumber.value : '--'}
-                </span>
-                <span className={styles.middot}>&middot; </span>
-
-                <span className={styles.spanField}>
-                  {t('passportNumber', 'Passport number')}: {passportNumber?.value ? passportNumber.value : '--'}
-                </span>
-                <span className={styles.middot}>&middot; </span>
+            <div className={styles.row}>
+              <div className={styles.flexRow}>
+                <Field label={t('nationalId', 'National ID')} value={nationalId} />
+                <span className={styles.middot}>·</span>
+                <Field label={t('passportNumber', 'Passport')} value={passportNumber} />
+                <span className={styles.middot}>·</span>
+                <Field label={t('licenseNumber', 'License #')} value={licenseNumber} />
+                <span className={styles.middot}>·</span>
+                <Field label={t('licenseBody', 'License body')} value={licenseBody} />
+                <span className={styles.middot}>·</span>
+                <Field label={t('licenseExpiryDate', 'License expiry')} value={formattedExpiryDate} />
+              </div>
+            </div>
 
-                <span className={styles.spanField}>
-                  {t('licenseExpiryDate', 'License expiry date')}: {formattedExpiryDate ? formattedExpiryDate : '--'}
+            {/* Practice row */}
+            {practiceType && (
+              <div className={styles.row}>
+                <div className={styles.flexRow}>
+                  <Field label={t('practiceType', 'Practice')} value={practiceType} />
+                </div>
+              </div>
+            )}
+            {providerUniqueIdentifier && (
+              <div className={styles.row}>
+                <span className={styles.puidBadge}>
+                  {t('puid', 'PUID')}: <strong>{providerUniqueIdentifier}</strong>
+                  {externalProviderIdentifier && (
+                    <>
+                      <span className={styles.middot}>·</span>
+                      <span className={styles.fieldLabel}>{t('externalRef', 'External ref')}:</span>{' '}
+                      <strong>{externalProviderIdentifier}</strong>
+                    </>
+                  )}
                 </span>
               </div>
-              <div className={classNames(styles.row, styles.patientNameRow, styles.viewRoles)}>
-                <Accordion>
-                  <AccordionItem title={t('viewRoles', 'View roles')}>
-                    {user?.roles?.map((role, i) => (
+            )}
+
+            {/* Roles */}
+            <div className={classNames(styles.row, styles.viewRoles)}>
+              <Accordion>
+                <AccordionItem title={t('viewRoles', 'View roles ({{count}})', { count: user?.roles?.length ?? 0 })}>
+                  {user?.roles?.length ? (
+                    user.roles.map((role, i) => (
                       <ContainedListItem key={i}>
                         <div className={styles.roleContainer}>
-                          <strong>{role.display}</strong>
+                          <strong className={styles.roleName}>{role.display}</strong>
                           <p className={styles.roleDescription}>
                             {role.description || t('noDescriptionAvailable', 'No description available')}
                           </p>
                         </div>
                       </ContainedListItem>
-                    ))}
-                  </AccordionItem>
-                </Accordion>
-              </div>
+                    ))
+                  ) : (
+                    <p className={styles.roleDescription}>{t('noRolesAssigned', 'No roles assigned')}</p>
+                  )}
+                </AccordionItem>
+              </Accordion>
             </div>
-            <br />
           </div>
         </div>
       </header>

package/src/components/users/manage-users/user-list/user-list.component.tsx

@@ -29,6 +29,7 @@ import {
   isDesktop,
   usePagination,
   showModal,
+  launchWorkspace2,
 } from '@openmrs/esm-framework';
 import { CardHeader, usePaginationInfo } from '@openmrs/esm-patient-common-lib';
 import capitalize from 'lodash-es/capitalize';
@@ -261,10 +262,15 @@ const UserList: React.FC = () => {
             onClick={() => {
               const selectedUser = users.find((u) => u.uuid === user.uuid);
               if (selectedUser) {
-                launchWorkspace('manage-user-workspace', {
-                  workspaceTitle: t('editUser', 'Edit User'),
-                  initialUserValue: user,
-                });
+                launchWorkspace2(
+                  'manage-user-workspace',
+                  {
+                    workspaceTitle: t('editUser', 'Edit User'),
+                    initialUserValue: user,
+                  },
+                  {},
+                  {},
+                );
               } else {
                 console.error('User not found:', user.uuid);
               }
@@ -280,10 +286,15 @@ const UserList: React.FC = () => {
             hasDivider
             disabled={!userHasInventoryRole}
             onClick={() => {
-              launchWorkspace('user-role-scope-workspace', {
-                workspaceTitle: t('manageUserRoleScope', 'Manage user role scope'),
-                user: user,
-              });
+              launchWorkspace2(
+                'user-role-scope-workspace',
+                {
+                  workspaceTitle: t('manageUserRoleScope', 'Manage user role scope'),
+                  user: user,
+                },
+                {},
+                {},
+              );
             }}
             itemText={t('manageUserRoleScope', 'Manage user role scope')}
           />
@@ -317,7 +328,9 @@ const UserList: React.FC = () => {
               size={isDesktop(layout) ? 'lg' : 'sm'}
             />
             <Button
-              onClick={() => launchWorkspace('manage-user-workspace', { workspaceTitle: t('addUser', 'Add user') })}
+              onClick={() =>
+                launchWorkspace2('manage-user-workspace', { workspaceTitle: t('addUser', 'Add user') }, {}, {})
+              }
               className={styles.userManagementModeButton}
               renderIcon={UserFollow}
               size={isDesktop(layout) ? 'lg' : 'sm'}