validation step approval

2 files changed, 33 insertions, 18 deletions

diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index d4b0f92c..ab76c671 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -33,7 +33,8 @@ import useAuth from '@/core/hooks/useAuth';
 import StepApproval from './stepper';
 
 const Transaction = ({ id }) => {
-  const auth = { ...useAuth(), isApprovalState: true };
+  const auth = { ...useAuth(), web_role: 2, feature: { so_approval: true } };
+  const statusApprovalWeb = 1
   const { transaction } = useTransaction({ id });
   const { queryAirwayBill } = useAirwayBill({ orderId: id });
 
@@ -245,7 +246,7 @@ const Transaction = ({ id }) => {
 
           <Divider />
 
-          {!auth.isApprovalState && (
+          {!auth.feature.so_approval && (
             <div className='p-4 flex flex-col gap-y-4'>
               <DescriptionRow label='Purchase Order'>
                 {transaction.data?.purchaseOrderName || '-'}
@@ -311,13 +312,13 @@ const Transaction = ({ id }) => {
           <Divider />
 
           <div className='p-4 pt-0'>
-            {transaction.data?.status == 'draft' && auth.isApprovalState && (
+            {transaction.data?.status == 'draft' && auth.feature.so_approval && (
               <div className='flex gap-x-2'>
                 <button
                   className='btn-yellow w-full'
                   onClick={checkout}
                   disabled={
-                    transaction.data?.status === 'cancel' ? true : false
+                    transaction.data?.status === 'cancel' ? true : false  || auth.web_role === statusApprovalWeb ? true : false
                   }
                 >
                   Approve
@@ -326,14 +327,14 @@ const Transaction = ({ id }) => {
                   className='btn-solid-red px-7 w-full'
                   onClick={checkout}
                   disabled={
-                    transaction.data?.status === 'cancel' ? true : false
+                    transaction.data?.status === 'cancel' ? true : false  || auth.web_role === statusApprovalWeb ? true : false
                   }
                 >
                   Reject
                 </button>
               </div>
             )}
-            {transaction.data?.status == 'draft' && !auth.isApprovalState && (
+            {transaction.data?.status == 'draft' && !auth.feature.so_approval && (
               <button className='btn-yellow w-full mt-4' onClick={checkout}>
                 Lanjutkan Transaksi
               </button>
@@ -367,7 +368,13 @@ const Transaction = ({ id }) => {
                 <h1 className='text-title-sm font-semibold mb-6'>
                   Detail Transaksi
                 </h1>
-                <StepApproval layer={2} status={'cancel'} className='ml-auto' />
+                {auth.feature.so_approval && (
+                  <StepApproval
+                    layer={statusApprovalWeb}
+                    status={'cancel'}
+                    className='ml-auto'
+                  />
+                )}
               </div>
 
               <div className='flex items-center gap-x-2 mb-3'>
@@ -385,13 +392,13 @@ const Transaction = ({ id }) => {
                   Download
                 </button>
                 {transaction.data?.status == 'draft' &&
-                  auth.isApprovalState && (
+                  auth.feature.so_approval && auth.web_role && (
                     <div className='flex gap-x-2'>
                       <button
                         className='btn-yellow'
                         onClick={checkout}
                         disabled={
-                          transaction.data?.status === 'cancel' ? true : false
+                          transaction.data?.status === 'cancel' ? true : false || auth.web_role === statusApprovalWeb ? true : false
                         }
                       >
                         Approve
@@ -400,7 +407,7 @@ const Transaction = ({ id }) => {
                         className='btn-solid-red px-7'
                         onClick={checkout}
                         disabled={
-                          transaction.data?.status === 'cancel' ? true : false
+                          transaction.data?.status === 'cancel' ? true : false || auth.web_role === statusApprovalWeb ? true : false
                         }
                       >
                         Reject
@@ -408,7 +415,7 @@ const Transaction = ({ id }) => {
                     </div>
                   )}
                 {transaction.data?.status == 'draft' &&
-                  !auth.isApprovalState && (
+                  !auth.feature.so_approval && (
                     <button className='btn-yellow' onClick={checkout}>
                       Lanjutkan Transaksi
                     </button>
@@ -436,7 +443,7 @@ const Transaction = ({ id }) => {
                   <div>Ketentuan Pembayaran</div>
                   <div>: {transaction?.data?.paymentTerm}</div>
 
-                  {!auth.isApprovalState && (
+                  {!auth.feature.so_approval && (
                     <>
                       <div>Purchase Order</div>
                       <div>
@@ -455,7 +462,6 @@ const Transaction = ({ id }) => {
                             : 'Upload'}
                         </button>
                       </div>
-                      )
                     </>
                   )}
                 </div>
diff --git a/src/lib/transaction/components/stepper.jsx b/src/lib/transaction/components/stepper.jsx
index 54243946..bc3f6fd8 100644
--- a/src/lib/transaction/components/stepper.jsx
+++ b/src/lib/transaction/components/stepper.jsx
@@ -15,9 +15,9 @@ 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 },
+    { title: 'Indoteknik', layer_approval: 1 },
+    { title: 'Manager', layer_approval: 2 },
+    { title: 'Director', layer_approval: 3 },
   ];
   const { activeStep } = useSteps({
     index: layer,
@@ -28,7 +28,7 @@ const StepApproval = ({ layer, status }) => {
       {steps.map((step, index) => (
         <Step key={index}>
           <StepIndicator>
-            { layer === step.layer_approval && status === 'cancel' ? (
+            {layer === step.layer_approval && status === 'cancel' ? (
               <StepStatus
                 complete={
                   <Image
@@ -53,8 +53,17 @@ const StepApproval = ({ layer, status }) => {
 
           <Box flexShrink='0'>
             <StepTitle className='md:text-xs'>{step.title}</StepTitle>
-            <StepDescription className='md:text-[8px]'>{step.description}</StepDescription>
+            {layer > step.layer_approval && (
+              <StepDescription className='md:text-[8px]'>Approved</StepDescription>
+            )}
+            {layer === step.layer_approval && status === 'cancel' && (
+              <StepDescription className='md:text-[8px]'>Rejected</StepDescription>
+            )}
+            {layer < step.layer_approval && (
+              <StepDescription className='md:text-[8px]'>Pending</StepDescription>
+            )}
           </Box>
+          <StepSeparator _horizontal={{ ml: '0' }} />
         </Step>
       ))}
     </Stepper>