Enhance WizardView component by adding sideBar and submitText props for improved customization; refactor layout for better responsiveness and structure.

src/components/Dashboard/common/WizardView.jsx

@@ -12,7 +12,9 @@ const WizardView = ({
   title = 'Wizard View',
   onSubmit,
   formValid,
-  loading
+  loading,
+  sideBar = null,
+  submitText = 'Done'
 }) => {
   const [currentStep, setCurrentStep] = useState(0)
   const isMobile = useMediaQuery({ maxWidth: 768 })
@@ -20,27 +22,33 @@ const WizardView = ({
   return (
     <Flex gap='middle'>
       {!isMobile && showSteps == true ? (
-        <div style={{ minWidth: '160px' }}>
-          <Steps
-            current={currentStep}
-            items={steps}
-            direction='vertical'
-            style={{ width: 'fit-content' }}
-          />
-        </div>
+        sideBar != null ? (
+          sideBar
+        ) : (
+          <div style={{ minWidth: '160px' }}>
+            <Steps
+              current={currentStep}
+              items={steps}
+              direction='vertical'
+              style={{ width: 'fit-content' }}
+            />
+          </div>
+        )
       ) : null}
 
       {!isMobile && showSteps == true ? (
         <Divider type='vertical' style={{ height: 'unset' }} />
       ) : null}
 
-      <Flex vertical gap='middle' style={{ flexGrow: 1 }}>
-        <Title level={2} style={{ margin: 0 }}>
-          {title}
-        </Title>
-        <div style={{ minHeight: '260px', marginBottom: 8 }}>
-          {steps[currentStep].content}
-        </div>
+      <Flex vertical justify='space-between' gap={'middle'}>
+        <Flex vertical gap='middle' style={{ flexGrow: 1 }}>
+          <Title level={2} style={{ margin: 0 }}>
+            {title}
+          </Title>
+          <div style={{ minHeight: '260px', marginBottom: 4 }}>
+            {steps[currentStep].content}
+          </div>
+        </Flex>
         <NewObjectButtons
           currentStep={currentStep}
           totalSteps={steps.length}
@@ -49,6 +57,7 @@ const WizardView = ({
           onSubmit={onSubmit}
           formValid={formValid}
           submitLoading={loading}
+          submitText={submitText}
         />
       </Flex>
     </Flex>
@@ -61,7 +70,9 @@ WizardView.propTypes = {
   steps: PropTypes.array.isRequired,
   showSteps: PropTypes.bool,
   title: PropTypes.string,
-  loading: PropTypes.bool
+  loading: PropTypes.bool,
+  sideBar: PropTypes.node,
+  submitText: PropTypes.string
 }
 
 export default WizardView