@kenyaemr/esm-admin-app 5.4.1-pre.1908 → 5.4.1-pre.1912

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/.turbo/turbo-build.log +31 -24
  2. package/dist/102.js +2 -0
  3. package/dist/102.js.map +1 -0
  4. package/dist/{325.js → 137.js} +2 -2
  5. package/dist/{325.js.map → 137.js.map} +1 -1
  6. package/dist/294.js +2 -0
  7. package/dist/294.js.LICENSE.txt +32 -0
  8. package/dist/294.js.map +1 -0
  9. package/dist/300.js +1 -1
  10. package/dist/654.js +1 -0
  11. package/dist/654.js.map +1 -0
  12. package/dist/675.js +2 -0
  13. package/dist/{485.js.map → 675.js.map} +1 -1
  14. package/dist/{493.js → 719.js} +1 -1
  15. package/dist/{493.js.map → 719.js.map} +1 -1
  16. package/dist/893.js +1 -1
  17. package/dist/893.js.map +1 -1
  18. package/dist/913.js +1 -1
  19. package/dist/913.js.LICENSE.txt +4 -27
  20. package/dist/913.js.map +1 -1
  21. package/dist/kenyaemr-esm-admin-app.js +1 -1
  22. package/dist/kenyaemr-esm-admin-app.js.buildmanifest.json +117 -114
  23. package/dist/kenyaemr-esm-admin-app.js.map +1 -1
  24. package/dist/main.js +1 -1
  25. package/dist/main.js.map +1 -1
  26. package/dist/routes.json +1 -1
  27. package/package.json +1 -1
  28. package/src/components/hook/useHWR.ts +22 -0
  29. package/src/components/modal/hwr-confirmation.modal.scss +21 -0
  30. package/src/components/modal/hwr-confirmation.modal.tsx +130 -0
  31. package/src/components/modal/hwr-empty.modal.component.tsx +54 -0
  32. package/src/components/users/manage-users/user-list/user-list.component.tsx +27 -22
  33. package/src/components/users/manage-users/user-management.workspace.scss +36 -0
  34. package/src/components/users/manage-users/user-management.workspace.tsx +388 -193
  35. package/src/components/users/userManagementFormSchema.tsx +5 -1
  36. package/src/config-schema.ts +55 -3
  37. package/src/constants.ts +26 -0
  38. package/src/index.ts +5 -0
  39. package/src/routes.json +8 -0
  40. package/src/types/index.ts +97 -0
  41. package/translations/en.json +7 -0
  42. package/dist/373.js +0 -2
  43. package/dist/373.js.map +0 -1
  44. package/dist/387.js +0 -2
  45. package/dist/387.js.LICENSE.txt +0 -15
  46. package/dist/387.js.map +0 -1
  47. package/dist/485.js +0 -2
  48. package/dist/778.js +0 -1
  49. package/dist/778.js.map +0 -1
  50. /package/dist/{373.js.LICENSE.txt → 102.js.LICENSE.txt} +0 -0
  51. /package/dist/{325.js.LICENSE.txt → 137.js.LICENSE.txt} +0 -0
  52. /package/dist/{485.js.LICENSE.txt → 675.js.LICENSE.txt} +0 -0
package/src/components/users/manage-users/user-management.workspace.tsx CHANGED
@@ -7,6 +7,9 @@ import {
7
7
  showSnackbar,
8
8
  useLayoutType,
9
9
  formatDatetime,
10
+ useConfig,
11
+ showModal,
12
+ parseDate,
10
13
  } from '@openmrs/esm-framework';
11
14
  import { Controller, FormProvider, useForm } from 'react-hook-form';
12
15
  import styles from './user-management.workspace.scss';
@@ -28,6 +31,8 @@ import {
28
31
  DatePickerInput,
29
32
  DatePicker,
30
33
  Tile,
34
+ Search,
35
+ Row,
31
36
  } from '@carbon/react';
32
37
  import { z } from 'zod';
33
38
  import { zodResolver } from '@hookform/resolvers/zod';
@@ -48,10 +53,12 @@ import {
48
53
  } from '../../../user-management.resources';
49
54
  import UserManagementFormSchema from '../userManagementFormSchema';
50
55
  import { CardHeader } from '@openmrs/esm-patient-common-lib/src';
51
- import { ChevronSortUp, ChevronRight } from '@carbon/react/icons';
56
+ import { ChevronSortUp, Query, ChevronRight } from '@carbon/react/icons';
52
57
  import { useSystemUserRoleConfigSetting } from '../../hook/useSystemRoleSetting';
53
- import { Provider, User, UserRoleScope } from '../../../config-schema';
58
+ import { ConfigObject, Provider, User, UserRoleScope } from '../../../config-schema';
54
59
  import { DATE_PICKER_CONTROL_FORMAT, DATE_PICKER_FORMAT, formatNewDate, today } from '../../../constants';
60
+ import { type PractitionerResponse } from '../../../types';
61
+ import { searchHealthCareWork } from '../../hook/useHWR';
55
62
 
56
63
  type ManageUserWorkspaceProps = DefaultWorkspaceProps & {
57
64
  initialUserValue?: User;
@@ -69,6 +76,7 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
69
76
  const isTablet = useLayoutType() === 'tablet';
70
77
  const [activeSection, setActiveSection] = useState('demographic');
71
78
  const [currentIndex, setCurrentIndex] = useState(0);
79
+ const [healthWorker, setHealthWorker] = useState(null);
72
80
  const { provider = [], loadingProvider, providerError } = useProvider(initialUserValue.systemId);
73
81
  const { location, loadingLocation } = useLocation();
74
82
 
@@ -83,6 +91,20 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
83
91
 
84
92
  const { roles = [], isLoading } = useRoles();
85
93
  const { rolesConfig, error } = useSystemUserRoleConfigSetting();
94
+ const {
95
+ identifierTypes,
96
+ licenseBodyUuid,
97
+ passportNumberUuid,
98
+ providerHieFhirReference,
99
+ qualificationUuid,
100
+ providerNationalIdUuid,
101
+ } = useConfig<ConfigObject>();
102
+ const [searchHWR, setSearchHWR] = useState({
103
+ identifierType: identifierTypes[0]?.key ?? '',
104
+ identifier: '',
105
+ isHWRLoading: false,
106
+ });
107
+ const defaultIdentifierType = identifierTypes.find((item) => item.key === searchHWR.identifierType);
86
108
 
87
109
  const userRoleScope = useMemo(
88
110
  () => items?.results?.find((user) => user.userUuid === initialUserValue.uuid) || null,
@@ -96,8 +118,13 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
96
118
  providerAttributeType.find((type) => type.uuid === '00539959-a1c7-4848-a5ed-8941e9d5e835')?.uuid || '',
97
119
  primaryFacility:
98
120
  providerAttributeType.find((type) => type.uuid === '5a53dddd-b382-4245-9bf1-03bce973f24b')?.uuid || '',
121
+ providerNationalId: providerAttributeType.find((type) => type.uuid === providerNationalIdUuid)?.uuid || '',
122
+ providerHieFhirReference:
123
+ providerAttributeType.find((type) => type.uuid === providerHieFhirReference)?.uuid || '',
124
+ qualification: providerAttributeType.find((type) => type.uuid === qualificationUuid)?.uuid || '',
125
+ licenseBodyUuid: providerAttributeType.find((type) => type.uuid === licenseBodyUuid)?.uuid || '',
99
126
  };
100
- }, [providerAttributeType]);
127
+ }, [licenseBodyUuid, providerAttributeType, providerHieFhirReference, providerNationalIdUuid, qualificationUuid]);
101
128
 
102
129
  const providerAttributes = useMemo(() => provider.flatMap((item) => item.attributes || []), [provider]);
103
130
 
@@ -187,7 +214,7 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
187
214
  defaultValues: formDefaultValues,
188
215
  });
189
216
 
190
- const { reset } = userFormMethods;
217
+ const { reset, setValue } = userFormMethods;
191
218
 
192
219
  const { errors, isSubmitting, isDirty } = userFormMethods.formState;
193
220
 
@@ -203,6 +230,90 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
203
230
  }
204
231
  }, [isDirty, promptBeforeClosing]);
205
232
 
233
+ const handleSearch = async () => {
234
+ try {
235
+ setSearchHWR({ ...searchHWR, isHWRLoading: true });
236
+ const fetchedHealthWorker: PractitionerResponse = await searchHealthCareWork(
237
+ searchHWR.identifierType,
238
+ searchHWR.identifier,
239
+ );
240
+ if (!fetchedHealthWorker?.entry || fetchedHealthWorker.entry.length === 0) {
241
+ showModal('hwr-empty-modal', { errorCode: t('noResults', 'No results found') });
242
+ return;
243
+ }
244
+
245
+ const dispose = showModal('hwr-confirmation-modal', {
246
+ healthWorker: fetchedHealthWorker,
247
+ onConfirm: () => {
248
+ dispose();
249
+ const fullName = fetchedHealthWorker?.entry[0]?.resource?.name[0]?.text;
250
+
251
+ const nameParts = fullName.split(' ');
252
+
253
+ const hasTitle = nameParts[0].endsWith('.');
254
+ const nameWithoutTitle = hasTitle ? nameParts.slice(1) : nameParts;
255
+
256
+ const givenName = nameWithoutTitle[0];
257
+ const middleName = nameWithoutTitle.slice(1, -1).join(' ');
258
+ const familyName = nameWithoutTitle[nameWithoutTitle.length - 1];
259
+
260
+ setValue('givenName', givenName);
261
+ setValue('middleName', middleName);
262
+ setValue('familyName', familyName);
263
+ setValue(
264
+ 'nationalId',
265
+ fetchedHealthWorker?.entry[0]?.resource?.identifier?.find((id) =>
266
+ id.type?.coding?.some((code) => code.code === 'national-id'),
267
+ )?.value,
268
+ );
269
+ setValue(
270
+ 'providerLicense',
271
+ fetchedHealthWorker?.entry[0]?.resource?.identifier?.find((id) =>
272
+ id.type?.coding?.some((code) => code.code === 'license-number'),
273
+ )?.value,
274
+ );
275
+ setValue(
276
+ 'registrationNumber',
277
+ fetchedHealthWorker?.entry[0]?.resource?.identifier?.find((id) =>
278
+ id.type?.coding?.some((code) => code.code === 'board-registration-number'),
279
+ )?.value,
280
+ );
281
+ setValue(
282
+ 'phoneNumber',
283
+ fetchedHealthWorker?.entry[0]?.resource?.telecom?.find((contact) => contact.system === 'phone')?.value ||
284
+ '',
285
+ );
286
+ setValue(
287
+ 'qualification',
288
+ fetchedHealthWorker?.entry[0]?.resource?.qualification?.[0]?.code?.coding?.[0]?.display ||
289
+ fetchedHealthWorker?.entry[0]?.resource?.extension?.find(
290
+ (ext) => ext.url === 'https://ts.kenya-hie.health/Codesystem/specialty',
291
+ )?.valueCodeableConcept?.coding?.[0]?.display ||
292
+ '',
293
+ );
294
+ setValue(
295
+ 'email',
296
+ fetchedHealthWorker?.entry[0]?.resource?.telecom?.find((contact) => contact.system === 'email')?.value ||
297
+ '',
298
+ );
299
+ setValue(
300
+ 'licenseExpiryDate',
301
+ parseDate(
302
+ fetchedHealthWorker?.entry[0]?.resource?.identifier?.find((id) =>
303
+ id.type?.coding?.some((code) => code.code === 'license-number'),
304
+ )?.period?.end || t('unknown', 'Unknown'),
305
+ ),
306
+ );
307
+ setHealthWorker(fetchedHealthWorker);
308
+ },
309
+ });
310
+ } catch (error) {
311
+ showModal('hwr-empty-modal', { errorCode: error.message });
312
+ } finally {
313
+ setSearchHWR({ ...searchHWR, isHWRLoading: false });
314
+ }
315
+ };
316
+
206
317
  const onSubmit = async (data: UserFormSchema) => {
207
318
  const emailAttribute = 'b8d0b331-1d2d-4a9a-b741-1816f498bdb6';
208
319
  const telephoneAttribute = 'b2c38640-2603-4629-aebd-3b54f33f1e3a';
@@ -239,7 +350,17 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
239
350
  attributes: [
240
351
  { attributeType: attributeTypeMapping.primaryFacility, value: data.primaryFacility?.split(' ').pop() || '' },
241
352
  { attributeType: attributeTypeMapping.licenseNumber, value: data.providerLicense },
242
- { attributeType: attributeTypeMapping.licenseExpiry, value: data.licenseExpiryDate },
353
+ { attributeType: attributeTypeMapping.licenseExpiry, value: data.licenseExpiryDate.toISOString() },
354
+ { attributeType: attributeTypeMapping.licenseBodyUuid, value: data.registrationNumber },
355
+ { attributeType: attributeTypeMapping.providerHieFhirReference, value: JSON.stringify(healthWorker) },
356
+ {
357
+ attributeType: attributeTypeMapping.providerNationalId,
358
+ value: data.nationalId,
359
+ },
360
+ {
361
+ attributeType: attributeTypeMapping.qualification,
362
+ value: data.qualification,
363
+ },
243
364
  ].filter((attr) => attr.value),
244
365
  };
245
366
 
@@ -254,7 +375,7 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
254
375
  { attributeType: emailAttribute, value: data.email },
255
376
  ],
256
377
  },
257
- roles: data.roles.map((role) => ({
378
+ roles: data.roles?.map((role) => ({
258
379
  uuid: role.uuid,
259
380
  name: role.display,
260
381
  description: role.description || '',
@@ -270,11 +391,6 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
270
391
  if (response.uuid) {
271
392
  showSnackbarMessage(t('userSaved', 'User saved successfully'), '', 'success');
272
393
 
273
- handleMutation(
274
- `${restBaseUrl}/user?v=custom:(uuid,username,display,systemId,retired,person:(uuid,display,gender,names:(givenName,familyName,middleName),attributes:(uuid,display)),roles:(uuid,description,display,name))`,
275
- );
276
- closeWorkspaceWithSavedChanges();
277
-
278
394
  if (userRoleScopePayload !== null && hasValidRoleConditions) {
279
395
  try {
280
396
  const userRoleScopeUrl = userRoleScope?.uuid
@@ -323,6 +439,8 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
323
439
  } else {
324
440
  throw new Error('User creation failed');
325
441
  }
442
+ handleMutation(`${restBaseUrl}/user`);
443
+ closeWorkspaceWithSavedChanges();
326
444
  } catch (error) {
327
445
  showSnackbarMessage(
328
446
  t('userSaveFailed', 'Failed to save user'),
@@ -388,136 +506,198 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
388
506
  <Stack className={styles.formStackControl} gap={7}>
389
507
  {activeSection === 'demographic' && (
390
508
  <ResponsiveWrapper>
391
- <CardHeader title="Demographic Info">
392
- <ChevronSortUp />
393
- </CardHeader>
394
-
395
- <ResponsiveWrapper>
396
- <Controller
397
- name="givenName"
398
- control={userFormMethods.control}
399
- render={({ field }) => (
400
- <TextInput
401
- {...field}
402
- id="givenName"
403
- type="text"
404
- labelText={t('givenName', 'Given Name')}
405
- placeholder={t('userGivenName', 'Enter Given Name')}
406
- invalid={!!errors.givenName}
407
- invalidText={errors.givenName?.message}
408
- />
409
- )}
509
+ <span className={styles.formHeaderSection}>
510
+ {t('healthWorkVerify', 'Health worker registry verification')}
511
+ </span>
512
+ {searchHWR.isHWRLoading ? (
513
+ <InlineLoading
514
+ className={styles.formLoading}
515
+ active={searchHWR.isHWRLoading}
516
+ description={t('pullDetailsfromHWR', 'Pulling data from Health worker registry...')}
410
517
  />
411
- </ResponsiveWrapper>
412
-
413
- <ResponsiveWrapper>
414
- <Controller
415
- name="middleName"
416
- control={userFormMethods.control}
417
- render={({ field }) => (
418
- <TextInput
419
- {...field}
420
- id="middleName"
421
- labelText={t('middleName', 'Middle Name')}
422
- placeholder={t('middleName', 'Middle Name')}
518
+ ) : (
519
+ <>
520
+ <>
521
+ <Column>
522
+ <ComboBox
523
+ onChange={({ selectedItem }) => {
524
+ setSearchHWR({ ...searchHWR, identifierType: selectedItem?.key ?? '' });
525
+ }}
526
+ id="formIdentifierType"
527
+ titleText={t('identificationType', 'Identification Type')}
528
+ placeholder={t('chooseIdentifierType', 'Choose identifier type')}
529
+ initialSelectedItem={defaultIdentifierType}
530
+ items={identifierTypes}
531
+ itemToString={(item) => (item ? item.name : '')}
532
+ />
533
+ </Column>
534
+ <Column>
535
+ <span className={styles.formIdentifierType}>
536
+ {t('identifierNumber', 'Identifier number*')}
537
+ </span>
538
+ <Row className={styles.formRow}>
539
+ <Search
540
+ className={styles.formSearch}
541
+ defaultValue={searchHWR.identifier}
542
+ placeholder={t('enterIdentifierNumber', 'Enter identifier number')}
543
+ id="formSearchHealthWorkers"
544
+ onChange={(value) => {
545
+ setSearchHWR({ ...searchHWR, identifier: value.target.value });
546
+ }}
547
+ />
548
+ <Button
549
+ kind="secondary"
550
+ size="md"
551
+ renderIcon={Query}
552
+ hasIconOnly
553
+ className={styles.formSearchButton}
554
+ onClick={handleSearch}
555
+ />
556
+ </Row>
557
+ </Column>
558
+ </>
559
+ <span className={styles.formHeaderSection}>{t('demographicInfo', 'Demographic info')}</span>
560
+ <ResponsiveWrapper>
561
+ <Controller
562
+ name="givenName"
563
+ control={userFormMethods.control}
564
+ render={({ field }) => (
565
+ <TextInput
566
+ {...field}
567
+ id="givenName"
568
+ type="text"
569
+ labelText={t('givenName', 'Given Name')}
570
+ placeholder={t('userGivenName', 'Enter Given Name')}
571
+ invalid={!!errors.givenName}
572
+ invalidText={errors.givenName?.message}
573
+ />
574
+ )}
423
575
  />
424
- )}
425
- />
426
- </ResponsiveWrapper>
427
-
428
- <ResponsiveWrapper>
429
- <Controller
430
- name="familyName"
431
- control={userFormMethods.control}
432
- render={({ field }) => (
433
- <TextInput
434
- {...field}
435
- id="familyName"
436
- labelText={t('familyName', 'Family Name')}
437
- placeholder={t('familyName', 'Family Name')}
438
- invalid={!!errors.familyName}
439
- invalidText={errors.familyName?.message}
576
+ </ResponsiveWrapper>
577
+ <ResponsiveWrapper>
578
+ <Controller
579
+ name="middleName"
580
+ control={userFormMethods.control}
581
+ render={({ field }) => (
582
+ <TextInput
583
+ {...field}
584
+ id="middleName"
585
+ labelText={t('middleName', 'Middle Name')}
586
+ placeholder={t('middleName', 'Middle Name')}
587
+ />
588
+ )}
440
589
  />
441
- )}
442
- />
443
- </ResponsiveWrapper>
444
-
445
- <ResponsiveWrapper>
446
- <Controller
447
- name="phoneNumber"
448
- control={userFormMethods.control}
449
- render={({ field }) => (
450
- <TextInput
451
- {...field}
452
- id="phoneNumber"
453
- type="text"
454
- labelText={t('phoneNumber', 'Phone Number')}
455
- placeholder={t('phoneNumber', 'Enter Phone Number')}
456
- invalid={!!errors.phoneNumber}
457
- invalidText={errors.phoneNumber?.message}
590
+ </ResponsiveWrapper>
591
+ <ResponsiveWrapper>
592
+ <Controller
593
+ name="familyName"
594
+ control={userFormMethods.control}
595
+ render={({ field }) => (
596
+ <TextInput
597
+ {...field}
598
+ id="familyName"
599
+ labelText={t('familyName', 'Family Name')}
600
+ placeholder={t('familyName', 'Family Name')}
601
+ invalid={!!errors.familyName}
602
+ invalidText={errors.familyName?.message}
603
+ />
604
+ )}
458
605
  />
459
- )}
460
- />
461
- </ResponsiveWrapper>
462
-
463
- <ResponsiveWrapper>
464
- <Controller
465
- name="email"
466
- control={userFormMethods.control}
467
- render={({ field }) => (
468
- <TextInput
469
- {...field}
470
- id="email"
471
- type="email"
472
- labelText={t('email', 'Email')}
473
- placeholder={t('email', 'Enter Email')}
474
- invalid={!!errors.email}
475
- invalidText={errors.email?.message}
476
- className={styles.checkboxLabelSingleLine}
606
+ </ResponsiveWrapper>
607
+ <ResponsiveWrapper>
608
+ <Controller
609
+ name="phoneNumber"
610
+ control={userFormMethods.control}
611
+ render={({ field }) => (
612
+ <TextInput
613
+ {...field}
614
+ id="phoneNumber"
615
+ type="text"
616
+ disabled
617
+ labelText={t('phoneNumber', 'Phone Number')}
618
+ placeholder={t('phoneNumber', 'Enter Phone Number')}
619
+ invalid={!!errors.phoneNumber}
620
+ invalidText={errors.phoneNumber?.message}
621
+ />
622
+ )}
477
623
  />
478
- )}
479
- />
480
- </ResponsiveWrapper>
481
-
482
- <ResponsiveWrapper>
483
- <Controller
484
- name="gender"
485
- control={userFormMethods.control}
486
- render={({ field }) => (
487
- <RadioButtonGroup
488
- {...field}
489
- legendText={t('gender', 'Gender')}
490
- orientation="vertical"
491
- invalid={!!errors.gender}
492
- invalidText={errors.gender?.message}>
493
- <RadioButton
494
- value="M"
495
- id="M"
496
- labelText={t('male', 'Male')}
497
- checked={field.value === 'M'}
498
- />
499
- <RadioButton
500
- value="F"
501
- id="F"
502
- labelText={t('female', 'Female')}
503
- checked={field.value === 'F'}
504
- />
505
- </RadioButtonGroup>
506
- )}
507
- />
508
- </ResponsiveWrapper>
624
+ </ResponsiveWrapper>
625
+ <ResponsiveWrapper>
626
+ <Controller
627
+ name="email"
628
+ control={userFormMethods.control}
629
+ render={({ field }) => (
630
+ <TextInput
631
+ {...field}
632
+ id="email"
633
+ disabled
634
+ type="email"
635
+ labelText={t('email', 'Email')}
636
+ placeholder={t('email', 'Enter Email')}
637
+ invalid={!!errors.email}
638
+ invalidText={errors.email?.message}
639
+ className={styles.checkboxLabelSingleLine}
640
+ />
641
+ )}
642
+ />
643
+ </ResponsiveWrapper>
644
+ <ResponsiveWrapper>
645
+ <Controller
646
+ name="gender"
647
+ control={userFormMethods.control}
648
+ render={({ field }) => (
649
+ <RadioButtonGroup
650
+ {...field}
651
+ legendText={t('gender', 'Gender')}
652
+ orientation="vertical"
653
+ invalid={!!errors.gender}
654
+ invalidText={errors.gender?.message}>
655
+ <RadioButton
656
+ value="M"
657
+ id="M"
658
+ labelText={t('male', 'Male')}
659
+ checked={field.value === 'M'}
660
+ />
661
+ <RadioButton
662
+ value="F"
663
+ id="F"
664
+ labelText={t('female', 'Female')}
665
+ checked={field.value === 'F'}
666
+ />
667
+ </RadioButtonGroup>
668
+ )}
669
+ />
670
+ </ResponsiveWrapper>
671
+ </>
672
+ )}
509
673
  </ResponsiveWrapper>
510
674
  )}
511
675
  {activeSection === 'provider' && (
512
676
  <ResponsiveWrapper>
513
- <CardHeader title="Provider Details">
514
- <ChevronSortUp />
515
- </CardHeader>
516
-
677
+ <span className={styles.formHeaderSection}>{t('providerDetails', 'Provider details')}</span>
517
678
  {loadingProvider || providerError ? (
518
679
  <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />
519
680
  ) : provider.length > 0 ? (
520
681
  <>
682
+ <ResponsiveWrapper>
683
+ <Controller
684
+ name="registrationNumber"
685
+ control={userFormMethods.control}
686
+ render={({ field }) => (
687
+ <TextInput
688
+ {...field}
689
+ id="registrationNumber"
690
+ type="registrationNumber"
691
+ disabled
692
+ labelText={t('registrationNumber', 'Registration number')}
693
+ placeholder={t('registrationNumber', 'Registration number')}
694
+ invalid={!!errors.registrationNumber}
695
+ invalidText={errors.registrationNumber?.message}
696
+ className={styles.checkboxLabelSingleLine}
697
+ />
698
+ )}
699
+ />
700
+ </ResponsiveWrapper>
521
701
  <ResponsiveWrapper>
522
702
  <Controller
523
703
  name="systemId"
@@ -529,8 +709,8 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
529
709
  type="text"
530
710
  labelText={t('providerId', 'Provider Id')}
531
711
  placeholder={t('providerId', 'Provider Id')}
532
- invalid={!!errors.email}
533
- invalidText={errors.email?.message}
712
+ invalid={!!errors.systemId}
713
+ invalidText={errors.systemId?.message}
534
714
  className={styles.checkboxLabelSingleLine}
535
715
  />
536
716
  )}
@@ -580,15 +760,41 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
580
760
  </ResponsiveWrapper>
581
761
  <ResponsiveWrapper>
582
762
  <Controller
583
- name="providerLicense"
763
+ name="isEditProvider"
764
+ control={userFormMethods.control}
765
+ render={({ field }) => (
766
+ <CheckboxGroup
767
+ legendText={t('editProvider', 'Edit Provider Details')}
768
+ className={styles.multilineCheckboxLabel}>
769
+ <Checkbox
770
+ className={styles.checkboxLabelSingleLine}
771
+ {...field}
772
+ id="isEditProvider"
773
+ labelText={t('EditProviderDetails', 'Edit provider details?')}
774
+ checked={field.value || false}
775
+ onChange={(e) => field.onChange(e.target.checked)}
776
+ />
777
+ </CheckboxGroup>
778
+ )}
779
+ />
780
+ </ResponsiveWrapper>
781
+ </>
782
+ ) : (
783
+ <>
784
+ <ResponsiveWrapper>
785
+ <Controller
786
+ name="nationalId"
584
787
  control={userFormMethods.control}
585
788
  render={({ field }) => (
586
789
  <TextInput
587
790
  {...field}
588
- id="providerLicense"
589
- type="text"
590
- labelText={t('providerLicense', 'Provider License Number')}
591
- placeholder={t('providerLicense', 'Provider License Number')}
791
+ id="email"
792
+ disabled
793
+ type="email"
794
+ labelText={t('nationalID', 'National id')}
795
+ placeholder={t('nationalID', 'National id')}
796
+ invalid={!!errors.nationalId}
797
+ invalidText={errors.nationalId?.message}
592
798
  className={styles.checkboxLabelSingleLine}
593
799
  />
594
800
  )}
@@ -596,15 +802,18 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
596
802
  </ResponsiveWrapper>
597
803
  <ResponsiveWrapper>
598
804
  <Controller
599
- name="licenseExpiryDate"
805
+ name="qualification"
600
806
  control={userFormMethods.control}
601
807
  render={({ field }) => (
602
808
  <TextInput
603
809
  {...field}
604
- id="licenseExpiryDate"
605
- type="date"
606
- labelText={t('licenseExpiryDate', 'License Expiry Date')}
607
- placeholder={t('licenseExpiryDate', 'License Expiry Date')}
810
+ id="qualification"
811
+ type="qualification"
812
+ disabled
813
+ labelText={t('qualification', 'Qualification')}
814
+ placeholder={t('qualification', 'Qualification')}
815
+ invalid={!!errors.qualification}
816
+ invalidText={errors.qualification?.message}
608
817
  className={styles.checkboxLabelSingleLine}
609
818
  />
610
819
  )}
@@ -612,27 +821,49 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
612
821
  </ResponsiveWrapper>
613
822
  <ResponsiveWrapper>
614
823
  <Controller
615
- name="isEditProvider"
824
+ name="providerLicense"
616
825
  control={userFormMethods.control}
617
826
  render={({ field }) => (
618
- <CheckboxGroup
619
- legendText={t('editProvider', 'Edit Provider Details')}
620
- className={styles.multilineCheckboxLabel}>
621
- <Checkbox
622
- className={styles.checkboxLabelSingleLine}
623
- {...field}
624
- id="isEditProvider"
625
- labelText={t('EditProviderDetails', 'Edit provider details?')}
626
- checked={field.value || false}
627
- onChange={(e) => field.onChange(e.target.checked)}
827
+ <TextInput
828
+ {...field}
829
+ id="providerLicense"
830
+ type="text"
831
+ disabled
832
+ labelText={t('providerLicense', 'License Number')}
833
+ placeholder={t('providerLicense', 'License Number')}
834
+ className={styles.checkboxLabelSingleLine}
835
+ />
836
+ )}
837
+ />
838
+ </ResponsiveWrapper>
839
+ <ResponsiveWrapper>
840
+ <Controller
841
+ name="licenseExpiryDate"
842
+ control={userFormMethods.control}
843
+ render={({ field }) => (
844
+ <DatePicker
845
+ datePickerType="single"
846
+ className={styles.formDatePicker}
847
+ onChange={(event) => {
848
+ if (event.length) {
849
+ field.onChange(event[0]);
850
+ }
851
+ }}
852
+ value={field.value}>
853
+ <DatePickerInput
854
+ className={styles.formDatePicker}
855
+ placeholder="mm/dd/yyyy"
856
+ labelText={t('licenseExpiryDate', 'License Expiry Date')}
857
+ id="formLicenseDatePicker"
858
+ size="md"
859
+ disabled
860
+ invalid={!!errors.licenseExpiryDate}
861
+ invalidText={errors.licenseExpiryDate?.message}
628
862
  />
629
- </CheckboxGroup>
863
+ </DatePicker>
630
864
  )}
631
865
  />
632
866
  </ResponsiveWrapper>
633
- </>
634
- ) : (
635
- <>
636
867
  <Controller
637
868
  name="providerIdentifiers"
638
869
  control={userFormMethods.control}
@@ -699,38 +930,6 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
699
930
  />
700
931
  )}
701
932
  </ResponsiveWrapper>
702
- <ResponsiveWrapper>
703
- <Controller
704
- name="providerLicense"
705
- control={userFormMethods.control}
706
- render={({ field }) => (
707
- <TextInput
708
- {...field}
709
- id="providerLicense"
710
- type="text"
711
- labelText={t('providerLicense', 'Provider License Number')}
712
- placeholder={t('providerLicense', 'Provider License Number')}
713
- className={styles.checkboxLabelSingleLine}
714
- />
715
- )}
716
- />
717
- </ResponsiveWrapper>
718
- <ResponsiveWrapper>
719
- <Controller
720
- name="licenseExpiryDate"
721
- control={userFormMethods.control}
722
- render={({ field }) => (
723
- <TextInput
724
- {...field}
725
- id="licenseExpiryDate"
726
- type="date"
727
- labelText={t('licenseExpiryDate', 'License Expiry Date')}
728
- placeholder={t('licenseExpiryDate', 'License Expiry Date')}
729
- className={styles.checkboxLabelSingleLine}
730
- />
731
- )}
732
- />
733
- </ResponsiveWrapper>
734
933
  </>
735
934
  )}
736
935
  </>
@@ -739,9 +938,7 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
739
938
  )}
740
939
  {activeSection === 'login' && (
741
940
  <ResponsiveWrapper>
742
- <CardHeader title="Login Info">
743
- <ChevronSortUp />
744
- </CardHeader>
941
+ <span className={styles.formHeaderSection}>{t('loginInfo', 'Login Info')}</span>
745
942
  <ResponsiveWrapper>
746
943
  <Controller
747
944
  name="username"
@@ -837,9 +1034,7 @@ const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
837
1034
 
838
1035
  {activeSection === 'roles' && (
839
1036
  <ResponsiveWrapper>
840
- <CardHeader title="Roles Info">
841
- <ChevronSortUp />
842
- </CardHeader>
1037
+ <span className={styles.formHeaderSection}>{t('rolesInfo', 'Roles Info')}</span>
843
1038
  <ResponsiveWrapper>
844
1039
  {rolesConfig
845
1040
  .filter((category) => category.category !== 'Inventory Roles')