@openmrs/esm-stock-management-app 3.1.1-pre.1177 → 3.1.1-pre.1184

package/src/stock-reports/report-list/stock-reports.component.tsx

@@ -165,7 +165,7 @@ const StockReports: React.FC = () => {
               type="button"
               size="sm"
               className="submitButton clear-padding-margin"
-              iconDescription={'Edit'}
+              iconDescription={t('edit', 'Edit')}
               kind="ghost"
               renderIcon={View}
               // onClick={(e) => onViewItem(batchJob.uuid, e)}
@@ -194,7 +194,7 @@ const StockReports: React.FC = () => {
         </div>
       ),
     }));
-  }, [reports, onDownloadReportClick]);
+  }, [reports, onDownloadReportClick, t]);
 
   if (isLoading) {
     return <DataTableSkeleton role="progressbar" />;
@@ -203,12 +203,8 @@ const StockReports: React.FC = () => {
   return (
     <div className={styles.container}>
       <h2 className={styles.tableHeader}>{t('stockReportsTableHeader', 'List of reports requested by users.')}</h2>
-      <DataTable
-        rows={tableRows}
-        headers={tableHeaders}
-        isSortable={true}
-        useZebraStyles={true}
-        render={({ rows, headers, getHeaderProps, getTableProps, getRowProps, onInputChange }) => (
+      <DataTable rows={tableRows} headers={tableHeaders} isSortable useZebraStyles>
+        {({ rows, headers, getHeaderProps, getTableProps, getRowProps, onInputChange }) => (
           <TableContainer>
             <TableToolbar
               style={{
@@ -288,7 +284,7 @@ const StockReports: React.FC = () => {
             ) : null}
           </TableContainer>
         )}
-      ></DataTable>
+      </DataTable>
       <Pagination
         page={currentPage}
         pageSize={currentPageSize}

package/src/stock-reports/stock-reports.resource.ts

@@ -5,7 +5,7 @@ import { useState } from 'react';
 
 export function useReportTypes() {
   const apiUrl = `${restBaseUrl}/stockmanagement/report?v=default`;
-  const { data, error, isLoading } = useSWR<{ data: { results: ReportType } }, Error>(apiUrl, openmrsFetch);
+  const { data, error, isLoading } = useSWR<{ data: { results: ReportType[] } }, Error>(apiUrl, openmrsFetch);
   return {
     reportTypes: data?.data?.results ?? [],
     isLoading,

package/src/stock-sources/add-stock-sources/add-stock-sources.workspace.tsx

@@ -1,15 +1,15 @@
-import { Button, Form, Select, TextInput, SelectItem, ButtonSet, FormGroup, Stack } from '@carbon/react';
 import React, { type ChangeEvent, useCallback, useState } from 'react';
 import classNames from 'classnames';
+import { Button, Form, Select, TextInput, SelectItem, ButtonSet, FormGroup, Stack } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { Save } from '@carbon/react/icons';
 import {
   getCoreTranslation,
   restBaseUrl,
   showSnackbar,
-  type DefaultWorkspaceProps,
   useConfig,
   useLayoutType,
+  type DefaultWorkspaceProps,
 } from '@openmrs/esm-framework';
 import { useConcept } from '../../stock-lookups/stock-lookups.resource';
 import { type StockSource } from '../../core/api/types/stockOperation/StockSource';
@@ -62,8 +62,7 @@ const StockSourcesAddOrUpdate: React.FC<AddStockSourceProps> = ({ model, closeWo
               isLowContrast: true,
               title: t('addedSource', 'Add Source'),
               kind: 'success',
-              subtitle: t('stockSourceAddedSuccessfully', 'Stock Source Added Successfully'),
-              timeoutInMs: 5000,
+              subtitle: t('stockSourceAddedSuccessfully', 'Stock source added successfully'),
             });
 
             handleMutate(`${restBaseUrl}/stockmanagement/stocksource`);
@@ -84,6 +83,7 @@ const StockSourcesAddOrUpdate: React.FC<AddStockSourceProps> = ({ model, closeWo
     },
     [formModel, model, t, closeWorkspace],
   );
+
   return (
     <Form className={styles.container}>
       <Stack className={styles.form} gap={5}>
@@ -112,7 +112,7 @@ const StockSourcesAddOrUpdate: React.FC<AddStockSourceProps> = ({ model, closeWo
         <Select
           name="sourceType"
           className="select-field"
-          labelText={t('sourceType', 'Source Type')}
+          labelText={t('sourceType', 'Source type')}
           id="sourceType"
           value={formModel?.sourceType ? formModel.sourceType.uuid : ''}
           onChange={onSourceTypeChange}
@@ -129,7 +129,7 @@ const StockSourcesAddOrUpdate: React.FC<AddStockSourceProps> = ({ model, closeWo
           [styles.desktop]: !isTablet,
         })}
       >
-        <Button kind="secondary" onClick={closeWorkspace} className={styles.button}>
+        <Button kind="secondary" onClick={() => closeWorkspace()} className={styles.button}>
           {getCoreTranslation('cancel')}
         </Button>
         <Button type="submit" className={styles.button} onClick={handleSave} kind="primary" renderIcon={Save}>

package/src/stock-sources/stock-sources-items-table.component.tsx

@@ -21,11 +21,12 @@ import { useTranslation } from 'react-i18next';
 import { isDesktop, restBaseUrl } from '@openmrs/esm-framework';
 import { handleMutate } from '../utils';
 import { ResourceRepresentation } from '../core/api/api';
-import useStockSourcesPage from './stock-sources-items-table.resource';
+import { type CustomTableHeader } from '../core/components/table/types';
 import AddStockSourceActionButton from './add-stock-source-button.component';
 import EditStockSourceActionsMenu from './edit-stock-source/edit-stock-source.component';
 import StockSourcesDeleteActionMenu from './stock-sources-delete/stock-sources-delete.component';
 import StockSourcesFilter from './stock-sources-filter/stock-sources-filter.component';
+import useStockSourcesPage from './stock-sources-items-table.resource';
 import styles from './stock-sources.scss';
 
 const StockSourcesItems: React.FC = () => {
@@ -83,12 +84,8 @@ const StockSourcesItems: React.FC = () => {
       <h2 className={styles.tableHeader}>
         {t('stockSourcesTableHeader', 'List of partners who provide stock to the facility.')}
       </h2>
-      <DataTable
-        rows={filteredTableRows}
-        headers={tableHeaders}
-        isSortable
-        useZebraStyles
-        render={({ rows, headers, getHeaderProps, getTableProps, getRowProps, onInputChange }) => (
+      <DataTable rows={filteredTableRows} headers={tableHeaders} isSortable useZebraStyles>
+        {({ rows, headers, getHeaderProps, getTableProps, getRowProps, onInputChange }) => (
           <TableContainer>
             <TableToolbar
               style={{
@@ -125,12 +122,19 @@ const StockSourcesItems: React.FC = () => {
                         <TableHeader
                           {...getHeaderProps({
                             header,
-                            isSortable: header.isSortable,
+                            isSortable: (header as CustomTableHeader).isSortable,
                           })}
                           className={isDesktop ? styles.desktopHeader : styles.tabletHeader}
                           key={`${header.key}`}
                         >
-                          {header.header?.content ?? header.header}
+                          {(() => {
+                            const customHeader = header as CustomTableHeader;
+                            return typeof customHeader.header === 'object' &&
+                              customHeader.header !== null &&
+                              'content' in customHeader.header
+                              ? (customHeader.header.content as React.ReactNode)
+                              : (customHeader.header as React.ReactNode);
+                          })()}
                         </TableHeader>
                       ),
                   )}
@@ -164,7 +168,7 @@ const StockSourcesItems: React.FC = () => {
             ) : null}
           </TableContainer>
         )}
-      ></DataTable>
+      </DataTable>
       <Pagination
         page={currentPage}
         pageSize={currentPageSize}

package/src/stock-user-role-scopes/add-stock-user-scope/add-stock-user-role-scope.workspace.tsx

@@ -42,7 +42,7 @@ import {
   DATE_PICKER_CONTROL_FORMAT,
   DATE_PICKER_FORMAT,
   formatForDatePicker,
-  INVENTORY_ADMNISTRATOR_ROLE_UUID,
+  INVENTORY_ADMINISTRATOR_ROLE_UUID,
   INVENTORY_CLERK_ROLE_UUID,
   INVENTORY_DISPENSING_ROLE_UUID,
   INVENTORY_MANAGER_ROLE_UUID,
@@ -124,6 +124,7 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({ model, ed
       setFilteredItems(filtered);
     }
   };
+
   useEffect(() => {
     if (model?.userUuid) {
       setSelectedUserUuid(model.userUuid);
@@ -133,6 +134,7 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({ model, ed
   const handleSearchQueryChange = (query: string) => {
     filterItems(query);
   };
+
   const onStockOperationTypeChanged = (event: React.ChangeEvent<HTMLInputElement>): void => {
     const operationType = formModel?.operationTypes?.find((x) => x.operationTypeUuid === event?.target?.value);
     if (operationType) {
@@ -187,7 +189,7 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({ model, ed
       INVENTORY_MANAGER_ROLE_UUID,
       INVENTORY_DISPENSING_ROLE_UUID,
       INVENTORY_REPORTING_ROLE_UUID,
-      INVENTORY_ADMNISTRATOR_ROLE_UUID,
+      INVENTORY_ADMINISTRATOR_ROLE_UUID,
     ];
 
     const filteredStockRoles = data.selectedItem?.roles
@@ -226,7 +228,7 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({ model, ed
           isLowContrast: true,
           title: t('addUserRole', 'Add User role'),
           kind: 'success',
-          subtitle: t('successfullysaved', 'You have successfully saved user role scope'),
+          subtitle: t('successfullySaved', 'You have successfully saved user role scope'),
         });
         closeWorkspace();
       },
@@ -242,32 +244,36 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({ model, ed
       },
     );
   };
+
   if (isLoading || loadingRoles || loadingUsers) {
     return (
       <InlineLoading status="active" iconDescription="Loading" description={t('loadingData', 'Loading data...')} />
     );
   }
+
   return (
     <Form className={styles.container}>
       <Stack className={styles.form} gap={5}>
         <div>
           {users?.results?.length > 0 && (
-            <>
-              <FormGroup legendText={t('user', 'User')}>
-                <ComboBox
-                  id="userName"
-                  initialSelectedItem={usersResults.find((user) => user.uuid === model?.userUuid) ?? null}
-                  items={filteredItems.length ? filteredItems : usersResults}
-                  itemToString={(item) => `${item?.person?.display ?? item?.display ?? ''}`}
-                  labelText={t('user', 'User')}
-                  onChange={onUserChanged}
-                  onInputChange={handleSearchQueryChange}
-                  placeholder="Filter..."
-                  shouldFilterItem={() => true}
-                  size="md"
-                />
-              </FormGroup>
-            </>
+            <FormGroup legendText={t('user', 'User')}>
+              <ComboBox
+                id="userName"
+                initialSelectedItem={usersResults.find((user) => user.uuid === model?.userUuid) ?? null}
+                items={filteredItems.length ? filteredItems : usersResults}
+                itemToString={(item) => {
+                  if (!item || typeof item !== 'object') return '';
+                  const itemWithPerson = item as { person?: { display?: string }; display?: string };
+                  return `${itemWithPerson?.person?.display ?? itemWithPerson?.display ?? ''}`;
+                }}
+                titleText={t('user', 'User')}
+                onChange={onUserChanged}
+                onInputChange={handleSearchQueryChange}
+                placeholder={t('filterUsers', 'Filter users')}
+                shouldFilterItem={() => true}
+                size="md"
+              />
+            </FormGroup>
           )}
         </div>
         <Select
@@ -286,13 +292,13 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({ model, ed
             })
           )}
         </Select>
-        <CheckboxGroup className={styles.checkboxGrid}>
+        <CheckboxGroup className={styles.checkboxGrid} legendText="">
           <Checkbox
             checked={formModel?.enabled}
             id="chk-userEnabled"
             labelText={t('enabled', 'Enabled')}
             onChange={onEnabledChanged}
-            value={model?.enabled}
+            value={model?.enabled ? 'true' : 'false'}
           />
           <Checkbox
             checked={formModel?.permanent}
@@ -300,35 +306,29 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({ model, ed
             labelText={t('permanent', 'Permanent')}
             name="isPermanent"
             onChange={onPermanentChanged}
-            value={model?.permanent}
+            value={model?.permanent ? 'true' : 'false'}
           />
 
           {!formModel?.permanent && (
-            <>
-              <DatePicker
-                dateFormat={DATE_PICKER_CONTROL_FORMAT}
-                datePickerType="range"
-                light
-                locale="en"
-                minDate={formatForDatePicker(MinDate)}
-                onChange={onActiveDatesChange}
-              >
-                <DatePickerInput
-                  id="date-picker-input-id-start"
-                  labelText={t('activeFrom', 'Active From')}
-                  name="activeFrom"
-                  placeholder={DATE_PICKER_FORMAT}
-                  value={formatForDatePicker(formModel?.activeFrom)}
-                />
-                <DatePickerInput
-                  id="date-picker-input-id-finish"
-                  labelText={t('activeTo', 'Active To')}
-                  name="activeTo"
-                  placeholder={DATE_PICKER_FORMAT}
-                  value={formatForDatePicker(formModel?.activeTo)}
-                />
-              </DatePicker>
-            </>
+            <DatePicker
+              dateFormat={DATE_PICKER_CONTROL_FORMAT}
+              datePickerType="range"
+              light
+              locale="en"
+              minDate={formatForDatePicker(MinDate)}
+              onChange={onActiveDatesChange}
+            >
+              <DatePickerInput
+                id="date-picker-input-id-start"
+                labelText={t('activeFrom', 'Active From')}
+                placeholder={DATE_PICKER_FORMAT}
+              />
+              <DatePickerInput
+                id="date-picker-input-id-finish"
+                labelText={t('activeTo', 'Active To')}
+                placeholder={DATE_PICKER_FORMAT}
+              />
+            </DatePicker>
           )}
         </CheckboxGroup>
         <FormGroup legendText={t('stockOperations', 'Stock operations')}>
@@ -336,7 +336,7 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({ model, ed
             {t('roleDescription', 'The role will be applicable to only selected stock operations.')}
           </span>
         </FormGroup>
-        <CheckboxGroup className={styles.checkboxGrid}>
+        <CheckboxGroup className={styles.checkboxGrid} legendText="">
           {stockOperations?.length > 0 &&
             stockOperations.map((type) => {
               return (
@@ -358,7 +358,7 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({ model, ed
             {t('toggleMessage', 'Use the toggle to apply this scope to the locations under the selected location.')}
           </span>
         </FormGroup>
-        <CheckboxGroup className={styles.checkboxGrid}>
+        <CheckboxGroup className={styles.checkboxGrid} legendText="">
           {stockLocations?.length > 0 &&
             stockLocations.map((type) => {
               const checkedLocation = findCheckedLocation(type);
@@ -386,9 +386,8 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({ model, ed
                       hideLabel
                       id={`tg-loc-child-${type.id}`}
                       key={`tg-loc-child-key-${type.id}`}
-                      onToggleClick={getToggledValue(type.id)}
+                      toggled={getToggledValue(type.id)}
                       size="sm"
-                      value={type.id}
                     />
                   )}
                 </div>
@@ -402,10 +401,10 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({ model, ed
           [styles.desktop]: !isTablet,
         })}
       >
-        <Button kind="secondary" onClick={closeWorkspace} className={styles.button}>
+        <Button kind="secondary" onClick={() => closeWorkspace()} className={styles.button}>
           {getCoreTranslation('cancel')}
         </Button>
-        <Button type="submit" className={styles.button} onClick={addStockUserRole} renderIcon={Save}>
+        <Button type="submit" className={styles.button} renderIcon={Save}>
           {getCoreTranslation('save')}
         </Button>
       </ButtonSet>

package/src/stock-user-role-scopes/delete-stock-user-scope/delete-stock-user-scope.component.tsx

@@ -29,7 +29,7 @@ const StockUserScopeDeleteActionMenu: React.FC<StockUserScopDeleteActionMenuProp
               setDeletingUserScope(false);
               showSnackbar({
                 isLowContrast: true,
-                title: t('deletingstockUserScope', 'Delete Stock User Scope'),
+                title: t('deletingStockUserScope', 'Delete Stock User Scope'),
                 kind: 'success',
                 subtitle: t('stockUserScopeDeletedSuccessfully', 'Stock User Scope Deleted Successfully'),
               });

package/src/stock-user-role-scopes/delete-stock-user-scope.modal.tsx

@@ -22,7 +22,10 @@ const DeleteStockUserScopeModal: React.FC<DeleteStockUserScopeModalProps> = ({ c
       </ModalHeader>
       <ModalBody>
         <p className={styles.bodyLong01}>
-          {t('deleteConfirmationText', "Are you sure you want to delete this User Scope? This action can't be undone.")}
+          {t(
+            'deleteUserScopeConfirmation',
+            "Are you sure you want to delete this User Scope? This action can't be undone.",
+          )}
         </p>
       </ModalBody>
       <ModalFooter>

package/src/stock-user-role-scopes/stock-user-role-scopes-items-table.component.tsx

@@ -61,12 +61,12 @@ function StockUserRoleScopesItems() {
       },
       {
         id: 2,
-        header: t('location', 'Location(s)'),
+        header: t('locations', 'Locations'),
         key: 'locations',
       },
       {
         id: 3,
-        header: t('stockOperations', 'Stock Operations'),
+        header: t('stockOperations', 'Stock operations'),
         key: 'stockOperations',
       },
       {
@@ -76,7 +76,7 @@ function StockUserRoleScopesItems() {
       },
       {
         id: 5,
-        header: t('ActiveFrom', 'Active From '),
+        header: t('activeFrom', 'Active From'),
         key: 'activeFrom',
       },
       {
@@ -86,7 +86,7 @@ function StockUserRoleScopesItems() {
       },
       {
         id: 7,
-        header: t('enabled', 'Enabled ?'),
+        header: t('enabled', 'Enabled'),
         key: 'enabled',
       },
       {
@@ -111,7 +111,7 @@ function StockUserRoleScopesItems() {
             `${userRoleScope?.userFamilyName} ${userRoleScope.userGivenName}`
           ) : (
             <Link
-              to={URL_USER_ROLE_SCOPE(userRoleScope?.uuid)}
+              href={URL_USER_ROLE_SCOPE(userRoleScope?.uuid)}
             >{`${userRoleScope?.userFamilyName} ${userRoleScope.userGivenName}`}</Link>
           ),
 
@@ -164,12 +164,8 @@ function StockUserRoleScopesItems() {
           'To access stock management features, users must have assigned roles specifying location and stock operation type scopes.',
         )}
       </h2>
-      <DataTable
-        headers={tableHeaders}
-        isSortable
-        rows={tableRows ?? []}
-        useZebraStyles
-        render={({ rows, headers, getHeaderProps, getTableProps, getRowProps, onInputChange }) => (
+      <DataTable headers={tableHeaders} isSortable rows={tableRows ?? []} useZebraStyles>
+        {({ rows, headers, getHeaderProps, getTableProps, getRowProps, onInputChange }) => (
           <TableContainer>
             <TableToolbar
               style={{
@@ -238,7 +234,7 @@ function StockUserRoleScopesItems() {
             ) : null}
           </TableContainer>
         )}
-      ></DataTable>
+      </DataTable>
       <Pagination
         page={currentPage}
         pageSize={currentPageSize}