refactor(FE): Refactor project flock api & implement approval component in project flock details

src/components/pages/production/project-flock/form/ProjectFlockForm.tsx

@@ -33,12 +33,18 @@ import toast from 'react-hot-toast';
 import TextInput from '@/components/input/TextInput';
 import { Kandang } from '@/types/api/master-data/kandang';
 import Collapse from '@/components/Collapse';
-import { ProjectFlockApi } from '@/services/api/production';
+import { ProjectFlockApi } from '@/services/api/production/project-flock';
 import { BaseApiResponse } from '@/types/api/api-general';
-import { FLOCK_CATEGORY_OPTIONS } from '@/config/constant';
+import { APPROVAL_WORKFLOWS, FLOCK_CATEGORY_OPTIONS } from '@/config/constant';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import ProjectFlockKandangTable from './ProjectFlockKandangTable';
+import ApprovalSteps from '@/components/pages/ApprovalSteps';
+import Steps from '@/components/steps/Steps';
+import StepItem from '@/components/steps/StepItem';
+import Tooltip from '@/components/Tooltip';
+import { id, is } from 'react-day-picker/locale';
+import { formatDate } from '@/lib/helper';
 
 interface ProjectFlockFormProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -55,20 +61,22 @@ const ProjectFlockForm = ({
 }: ProjectFlockFormProps) => {
   // State
   const router = useRouter();
+
+  const projectFlockSteps = APPROVAL_WORKFLOWS.find(
+    (step) => step.key === 'PROJECT_FLOCKS'
+  );
+
   const [projectFlockFormErrorMessage, setProjectFlockFormErrorMessage] =
     useState('');
   const [selectedArea, setSelectedArea] = useState('');
-
   const [selectedLocation, setSelectedLocation] = useState('');
   const [disabledLocation, setDisabledLocation] = useState(true);
-
   const [openSelectKandangs, setOpenSelectKandangs] = useState(
     initialValues?.kandangs && initialValues?.kandangs?.length > 0
   );
   const [optionsKandang, setOptionsKandang] = useState<Kandang[]>(
     initialValues?.kandangs ?? []
   );
-
   const [selectedFlock, setSelectedFlock] = useState<number>(
     initialValues?.flock?.id ?? 0
   );
@@ -141,15 +149,14 @@ const ProjectFlockForm = ({
     mutate: refreshKandang,
   } = useSWR(kandangUrl, KandangApi.getAllFetcher);
 
-  const getPeriodFlocksUrl = `flocks/${selectedFlock}/periods`;
-
   const { data: periodFlocks, isLoading: isLoadingPeriodFlocks } = useSWR(
-    getPeriodFlocksUrl,
-    () =>
-      ProjectFlockApi.customRequest<BaseApiResponse<PeriodFlock>, 'GET'>(
-        getPeriodFlocksUrl,
-        { method: 'GET' }
-      )
+    `${selectedFlock.toString()}/periods`,
+    (id: string) => ProjectFlockApi.getNextPeriod(id)
+  );
+
+  const { data: approvalLines, isLoading: isLoadingApprovalLines } = useSWR(
+    selectedFlock.toString(),
+    (id: number) => ProjectFlockApi.getApprovalLines(id)
   );
 
   useEffect(() => {
@@ -387,7 +394,10 @@ const ProjectFlockForm = ({
     if (isResponseSuccess(periodFlocks)) {
       formik.setFieldValue('period', periodFlocks.data.next_period);
     }
-  }, [periodFlocks]);
+    if (isResponseError(periodFlocks)) {
+      console.log(periodFlocks?.message as string);
+    }
+  }, [periodFlocks, toast]);
 
   useEffect(() => {
     const selectedRowIds = Object.keys(rowSelection)
@@ -485,6 +495,80 @@ const ProjectFlockForm = ({
             </div>
           </div>
         )}
+        {formType == 'detail' && isResponseSuccess(approvalLines) && (
+          <div className='w-full flex items-center gap-2 my-4'>
+            <Steps className='w-full'>
+              {projectFlockSteps?.steps.map((step, idx) => {
+                const approvalLogs = approvalLines.data.find(
+                  (approve) => approve.step_number == step.step_number
+                );
+                return (
+                  <StepItem
+                    key={step.step_number}
+                    color={
+                      step.step_number <=
+                      (initialValues?.approval.step_number ?? 0)
+                        ? 'success'
+                        : undefined
+                    }
+                    icon={
+                      <Tooltip
+                        color={
+                          step.step_number <=
+                          (initialValues?.approval.step_number ?? 0)
+                            ? 'success'
+                            : undefined
+                        }
+                        position='bottom'
+                        content={
+                          <ul>
+                            {approvalLogs &&
+                              approvalLogs.approvals.map((approval, idx) => {
+                                return (
+                                  <li className='mb-2' key={`key-logs-${idx}`}>
+                                    <div className='flex flex-col w-full text-start  text-base'>
+                                      <span>Status: {approval.step_name}</span>
+                                      <span>
+                                        Oleh: {approval.action_by.name}
+                                      </span>
+                                      <span>
+                                        Tanggal:{' '}
+                                        {formatDate(
+                                          approval.action_at,
+                                          'DD-MM-yyyy HH:mm:ss'
+                                        )}
+                                      </span>
+                                    </div>
+                                  </li>
+                                );
+                              })}
+                          </ul>
+                        }
+                      >
+                        {step.step_number <=
+                        (initialValues?.approval.step_number ?? 0) ? (
+                          <Icon
+                            icon='material-symbols:check-rounded'
+                            width={24}
+                            height={24}
+                          />
+                        ) : (
+                          <Icon
+                            icon='material-symbols:check-rounded'
+                            width={24}
+                            height={24}
+                          />
+                        )}
+                      </Tooltip>
+                    }
+                  >
+                    {step.step_name}
+                  </StepItem>
+                );
+              })}
+            </Steps>
+          </div>
+        )}
         {formType == 'detail' && (
           <div className='w-full flex flex-col sm:flex-row gap-2 py-4'>
             <Button