1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
import {
Box,
Step,
StepDescription,
StepIcon,
StepIndicator,
StepNumber,
StepSeparator,
StepStatus,
StepTitle,
Stepper,
useSteps,
} from '@chakra-ui/react';
import Image from 'next/image';
const StepApproval = ({ layer, status }) => {
const steps = [
{ title: 'Indoteknik', layer_approval: 1 },
{ title: 'Manager', layer_approval: 2 },
{ title: 'Director', layer_approval: 3 },
];
const { activeStep } = useSteps({
index: layer,
count: steps.length,
});
return (
<Stepper size='md' index={layer} colorScheme='green'>
{steps.map((step, index) => (
<Step key={index}>
<StepIndicator>
{layer === step.layer_approval && status === 'cancel' ? (
<StepStatus
complete={
<Image
src='/images/remove.png'
width={20}
height={20}
alt=''
className='w-full'
/>
}
incomplete={<StepNumber />}
active={<StepNumber />}
/>
) : (
<StepStatus
complete={<StepIcon />}
incomplete={<StepNumber />}
active={<StepNumber />}
/>
)}
</StepIndicator>
<Box flexShrink='0'>
<StepTitle className='md:text-xs'>{step.title}</StepTitle>
{status === 'cancel' ? (
layer > step.layer_approval ? (
<StepDescription className='md:text-[8px]'>
Approved
</StepDescription>
) : (
<StepDescription className='md:text-[8px]'>
Rejected
</StepDescription>
)
) : layer > step.layer_approval ? (
<StepDescription className='md:text-[8px]'>
Approved
</StepDescription>
) : (
<StepDescription className='md:text-[8px]'>
Pending
</StepDescription>
)}
</Box>
<StepSeparator _horizontal={{ ml: '0' }} />
</Step>
))}
</Stepper>
);
};
export default StepApproval;
|
