59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
import * as React from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Stepper from '@mui/material/Stepper';
|
|
import Step from '@mui/material/Step';
|
|
import StepLabel from '@mui/material/StepLabel';
|
|
import { useEffect, useState } from 'react';
|
|
import ClearIcon from '@mui/icons-material/Clear';
|
|
|
|
const steps = [
|
|
'Request',
|
|
'Review',
|
|
'Approval',
|
|
'Decline',
|
|
];
|
|
|
|
export default function HorizontalLinearAlternativeLabelStepper({data}) {
|
|
const [active, setActive] = useState(0);
|
|
const [status, SetStatus] = useState(null);
|
|
let updatedSteps = [...steps];
|
|
useEffect(() => {
|
|
if (data && data.data) {
|
|
if (data.data.status.status === 'requested') {
|
|
setActive(1);
|
|
updatedSteps = updatedSteps.filter(step => step !== 'Decline');
|
|
}
|
|
else if (data.data.status.status === 'reviewed') {
|
|
setActive(2);
|
|
updatedSteps = updatedSteps.filter(step => step !== 'Decline');
|
|
}
|
|
else if (data.data.status.status === 'approved')
|
|
{
|
|
setActive(3);
|
|
updatedSteps = updatedSteps.filter(step => step !== 'Decline');
|
|
}
|
|
else if(data.data.status.status === 'declined')
|
|
{
|
|
setActive(4)
|
|
updatedSteps = updatedSteps.filter(step => step !== 'Approval');
|
|
}
|
|
}
|
|
SetStatus(updatedSteps);
|
|
}, [data]);
|
|
|
|
|
|
|
|
|
|
return (
|
|
<Box sx={{ width: '100%', marginBottom: 2 }}>
|
|
<Stepper activeStep={active} alternativeLabel>
|
|
{status?.map((label) => (
|
|
<Step key={label}>
|
|
<StepLabel icon={label==='Decline' ? <ClearIcon sx={{ color: 'white', backgroundColor: 'red', borderRadius: '50%' }} /> : ''}>{label}</StepLabel>
|
|
</Step>
|
|
))}
|
|
</Stepper>
|
|
</Box>
|
|
);
|
|
}
|