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,15 +41,29 @@ 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>
+        <Flex gap={'middle'} align='center' justify='end'>
+          {progress > 0 ? (
+            <Progress
+              style={{ maxWidth: '160px' }}
+              showInfo={false}
+              percent={progress}
+            />
+          ) : null}
+
           <NewObjectButtons
             currentStep={currentStep}
             totalSteps={steps.length}
@@ -61,6 +76,7 @@ const WizardView = ({
           />
         </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