added steps modal with next and previous buttons

- changes for improve app access setting flow

src/modules/users/components/MultipleUsersModal/MultipleUsersModal.tsx

@@ -2,11 +2,11 @@ import React, { useEffect, useState } from 'react';
 import _ from 'lodash';
 import { useFieldArray, useForm, useWatch } from 'react-hook-form';
 
-import { Banner, Modal, ProgressSteps } from 'src/components';
+import { Banner, StepsModal, ProgressSteps } from 'src/components';
 import { Select, TextArea } from 'src/components/Form';
 import { MultipleUsersData, UserRole, useUsers } from 'src/services/users';
 import { allAppAccessList } from 'src/components/UserModal/consts';
-import { ProgressStepInfo, ProgressStepStatus } from 'src/components/Steps/types';
+import { ProgressStepInfo, ProgressStepStatus } from 'src/components/ProgressSteps/types';
 import { initialMultipleUsersForm, MultipleUsersModalProps } from './types';
 
 export const MultipleUsersModal = ({ open, onClose }: MultipleUsersModalProps) => {
@@ -181,6 +181,8 @@ export const MultipleUsersModal = ({ open, onClose }: MultipleUsersModalProps) =
     onClose();
   };
 
+  const getActiveStepIndex = () => _.findIndex(steps, { status: ProgressStepStatus.Current });
+
   const updateStepsStatus = (nextIndex: number) => {
     const updatedSteps = [...steps];
     _.forEach(updatedSteps, (step, index) => {
@@ -200,17 +202,32 @@ export const MultipleUsersModal = ({ open, onClose }: MultipleUsersModalProps) =
     updateStepsStatus(activeStepIndex);
   };
 
-  const getActiveStepIndex = _.findIndex(steps, { status: ProgressStepStatus.Current });
-  const disableSave = _.isEmpty(csvDataWatch) || _.some(steps, { status: ProgressStepStatus.Upcoming });
+  const handleNext = () => {
+    const nextIndex = getActiveStepIndex() + 1;
+    updateStepsStatus(nextIndex);
+  };
+
+  const handlePrevious = () => {
+    const nextIndex = getActiveStepIndex() - 1;
+    updateStepsStatus(nextIndex);
+  };
+
+  const activeStepIndex = getActiveStepIndex();
+  const showSave = !_.some(steps, { status: ProgressStepStatus.Upcoming });
+  const showPrevious = _.some(steps, { status: ProgressStepStatus.Complete });
 
   return (
-    <Modal
+    <StepsModal
       onClose={handleClose}
       open={open}
       onSave={handleSave}
+      onNext={handleNext}
+      onPrevious={handlePrevious}
+      showPreviousButton={showPrevious}
       isLoading={userModalLoading}
       useCancelButton
-      saveButtonDisabled={disableSave}
+      showSaveButton={showSave}
+      saveButtonDisabled={_.isEmpty(csvDataWatch)}
     >
       <div className="bg-white px-4">
         <div className="space-y-10 divide-y divide-gray-200">
@@ -220,12 +237,12 @@ export const MultipleUsersModal = ({ open, onClose }: MultipleUsersModalProps) =
             </div>
             <div className="sm:px-6 pt-6">
               <ProgressSteps steps={steps} onStepClick={handleStepClick}>
-                {getActiveStepIndex === 0 ? renderUsersCsvDataInput() : renderAppAccess()}
+                {activeStepIndex === 0 ? renderUsersCsvDataInput() : renderAppAccess()}
               </ProgressSteps>
             </div>
           </div>
         </div>
       </div>
-    </Modal>
+    </StepsModal>
   );
 };