add address & expedisi di page quotation - template stepper approval

1 files changed, 64 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..54243946
--- /dev/null
+++ b/src/lib/transaction/components/stepper.jsx
@@ -0,0 +1,64 @@
+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', description: 'Contact Info', layer_approval: 1 },
+    { title: 'Manager', description: 'Date & Time', layer_approval: 2 },
+    { title: 'Director', description: 'Select Rooms', 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>
+            <StepDescription className='md:text-[8px]'>{step.description}</StepDescription>
+          </Box>
+        </Step>
+      ))}
+    </Stepper>
+  );
+};
+
+export default StepApproval;