feat(FE): adding temporary perhitungan sapronak

src/components/pages/production/project-flock/detail/ProjectFlockDetail.tsx

@@ -20,6 +20,10 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import { ProjectFlockApi } from '@/services/api/production/project-flock';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import toast from 'react-hot-toast';
+import ApprovalSteps, {
+  useApprovalSteps,
+} from '@/components/pages/ApprovalSteps';
+import { PROJECT_FLOCK_APPROVAL_LINE } from '@/config/approval-line';
 
 const ProjectFlockDetail = ({
   projectFlock,
@@ -38,6 +42,17 @@ const ProjectFlockDetail = ({
     (kandang) => kandang.id === Number(selectedKandangId)
   );
 
+  const {
+    approvals,
+    isLoading: approvalsLoading,
+    refresh: refreshApprovals,
+  } = useApprovalSteps({
+    latestApproval: projectFlock?.approval,
+    approvalLines: PROJECT_FLOCK_APPROVAL_LINE,
+    moduleName: 'PROJECT_FLOCKS',
+    moduleId: projectFlock?.id.toString() ?? '',
+  });
+
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
     const deleteProjectFlockRes = await ProjectFlockApi.delete(
@@ -90,6 +105,12 @@ const ProjectFlockDetail = ({
         <div className='border-t-1 border-gray-300'>
           <div className='p-4 flex flex-col gap-4'>
             <h2 className='text-2xl font-semibold'>Informasi Umum</h2>
+            {/* Status Approval */}
+            {approvals && !approvalsLoading && (
+              <div className='text-sm my-3'>
+                <ApprovalSteps approvals={approvals} />
+              </div>
+            )}
             {/* Badge Row  */}
             <div className='flex flex-row gap-2'>
               <Badge
@@ -151,7 +172,7 @@ const ProjectFlockDetail = ({
                 </Badge>
               </div>
 
-              <div className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2'>
+              {/* <div className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2'>
                 <Icon width={14} height={14} icon={'mdi:clock'} /> History
               </div>
               <div className='col-span-2'>
@@ -163,7 +184,7 @@ const ProjectFlockDetail = ({
                     height={11}
                   />
                 </Button>
-              </div>
+              </div> */}
 
               {/* BARIS 1 */}
               <div