Enhance WizardView component by adding support for custom action buttons, sideBarGrow functionality, and a disabled state. Refactor layout styles for better responsiveness and usability.

src/components/Dashboard/common/WizardView.jsx

@@ -1,7 +1,15 @@
 import PropTypes from 'prop-types'
 import { useState } from 'react'
 import { useMediaQuery } from 'react-responsive'
-import { Typography, Flex, Steps, Divider, Progress } from 'antd'
+import {
+  Typography,
+  Flex,
+  Steps,
+  Divider,
+  Progress,
+  Button,
+  Dropdown
+} from 'antd'
 import NewObjectButtons from './NewObjectButtons'
 
 const { Title } = Typography
@@ -15,7 +23,10 @@ const WizardView = ({
   loading,
   sideBar = null,
   submitText = 'Done',
-  progress = 0
+  progress = 0,
+  actions = [],
+  sideBarGrow = false,
+  disabled = false
 }) => {
   const [currentStep, setCurrentStep] = useState(0)
   const isMobile = useMediaQuery({ maxWidth: 768 })
@@ -26,7 +37,7 @@ const WizardView = ({
         sideBar != null ? (
           sideBar
         ) : (
-          <div style={{ minWidth: '160px' }}>
+          <div style={{ minWidth: sideBarGrow == true ? '100%' : '160px' }}>
             <Steps
               current={currentStep}
               items={steps}
@@ -45,7 +56,13 @@ const WizardView = ({
         vertical
         justify='space-between'
         gap={'middle'}
-        style={{ width: '100%' }}
+        style={
+          sideBarGrow == false
+            ? { width: '100%' }
+            : isMobile
+              ? { width: '100%' }
+              : { width: '400px' }
+        }
       >
         <Flex vertical gap='middle' style={{ flexGrow: 1, width: '100%' }}>
           <Title level={2} style={{ margin: 0 }}>
@@ -63,8 +80,37 @@ const WizardView = ({
               percent={progress}
             />
           ) : null}
+          {(actions || []).map((action) => {
+            if (action.steps.includes(steps[currentStep].key)) {
+              if (action.children) {
+                return (
+                  <Dropdown menu={{ items: action.children }} key={action.key}>
+                    <Button
+                      onClick={action?.onClick}
+                      disabled={action?.disabled || disabled}
+                      loading={action?.loading || false}
+                    >
+                      {action.label}
+                    </Button>
+                  </Dropdown>
+                )
+              }
+              return (
+                <Button
+                  key={action.key}
+                  onClick={action?.onClick}
+                  disabled={action?.disabled || disabled}
+                  loading={action?.loading || false}
+                >
+                  {action.label}
+                </Button>
+              )
+            }
+            return null
+          })}
 
           <NewObjectButtons
+            disabled={disabled}
             currentStep={currentStep}
             totalSteps={steps.length}
             onPrevious={() => setCurrentStep((prev) => prev - 1)}
@@ -87,9 +133,12 @@ WizardView.propTypes = {
   showSteps: PropTypes.bool,
   title: PropTypes.string,
   loading: PropTypes.bool,
+  disabled: PropTypes.bool,
   sideBar: PropTypes.node,
   submitText: PropTypes.string,
-  progress: PropTypes.number
+  progress: PropTypes.number,
+  actions: PropTypes.array,
+  sideBarGrow: PropTypes.bool
 }
 
 export default WizardView