Merge branch 'promotion-program' into feature/all-promotion

1 files changed, 83 insertions, 0 deletions

diff --git a/src/lib/transaction/components/stepper.jsx b/src/lib/transaction/components/stepper.jsx
new file mode 100644
index 00000000..9b0da0d9
--- /dev/null
+++ b/src/lib/transaction/components/stepper.jsx
@@ -0,0 +1,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;