Added progress.

src/components/Dashboard/common/WizardView.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import { useState } from 'react'
 import { useMediaQuery } from 'react-responsive'
-import { Typography, Flex, Steps, Divider } from 'antd'
+import { Typography, Flex, Steps, Divider, Progress } from 'antd'
 import NewObjectButtons from './NewObjectButtons'
 
 const { Title } = Typography
@@ -14,13 +14,14 @@ const WizardView = ({
   formValid,
   loading,
   sideBar = null,
-  submitText = 'Done'
+  submitText = 'Done',
+  progress = 0
 }) => {
   const [currentStep, setCurrentStep] = useState(0)
   const isMobile = useMediaQuery({ maxWidth: 768 })
 
   return (
-    <Flex gap='middle'>
+    <Flex gap='middle' style={{ width: '100%' }}>
       {!isMobile && showSteps == true ? (
         sideBar != null ? (
           sideBar
@@ -40,25 +41,40 @@ const WizardView = ({
         <Divider type='vertical' style={{ height: 'unset' }} />
       ) : null}
 
-      <Flex vertical justify='space-between' gap={'middle'}>
-        <Flex vertical gap='middle' style={{ flexGrow: 1 }}>
+      <Flex
+        vertical
+        justify='space-between'
+        gap={'middle'}
+        style={{ width: '100%' }}
+      >
+        <Flex vertical gap='middle' style={{ flexGrow: 1, width: '100%' }}>
           <Title level={2} style={{ margin: 0 }}>
             {title}
           </Title>
-          <div style={{ minHeight: '260px', marginBottom: 4 }}>
+          <div style={{ minHeight: '260px', marginBottom: 4, width: '100%' }}>
             {steps[currentStep].content}
           </div>
         </Flex>
-        <NewObjectButtons
-          currentStep={currentStep}
-          totalSteps={steps.length}
-          onPrevious={() => setCurrentStep((prev) => prev - 1)}
-          onNext={() => setCurrentStep((prev) => prev + 1)}
-          onSubmit={onSubmit}
-          formValid={formValid}
-          submitLoading={loading}
-          submitText={submitText}
-        />
+        <Flex gap={'middle'} align='center' justify='end'>
+          {progress > 0 ? (
+            <Progress
+              style={{ maxWidth: '160px' }}
+              showInfo={false}
+              percent={progress}
+            />
+          ) : null}
+
+          <NewObjectButtons
+            currentStep={currentStep}
+            totalSteps={steps.length}
+            onPrevious={() => setCurrentStep((prev) => prev - 1)}
+            onNext={() => setCurrentStep((prev) => prev + 1)}
+            onSubmit={onSubmit}
+            formValid={formValid}
+            submitLoading={loading}
+            submitText={submitText}
+          />
+        </Flex>
       </Flex>
     </Flex>
   )
@@ -72,7 +88,8 @@ WizardView.propTypes = {
   title: PropTypes.string,
   loading: PropTypes.bool,
   sideBar: PropTypes.node,
-  submitText: PropTypes.string
+  submitText: PropTypes.string,
+  progress: PropTypes.number
 }
 
 export default WizardView