feat(FE-170): implement form steps and navigation for daily recording form

src/components/pages/production/recording/form/RecordingForm.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useMemo, useState, useEffect, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
 import { useFormik } from 'formik';
 import useSWR from 'swr';
 import { Icon } from '@iconify/react';
@@ -11,7 +12,6 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import { FormHeader } from '@/components/helper/form/FormHeader';
-import { FormActions } from '@/components/helper/form/FormActions';
 import { RecordingApi } from '@/services/api/production';
 import {
   CreateGrowingRecordingPayload,
@@ -20,7 +20,7 @@ import {
   UpdateLayingRecordingPayload,
   Recording,
 } from '@/types/api/production/recording';
-import { type BaseApiResponse } from '@/types/api/api-general';
+import { type BaseApiResponse, FormStepStatus } from '@/types/api/api-general';
 import {
   RecordingGrowingFormSchema,
   RecordingLayingFormSchema,
@@ -36,14 +36,15 @@ import { ProjectFlockApi } from '@/services/api/production';
 import { LocationApi } from '@/services/api/master-data';
 import { ProductWarehouseApi } from '@/services/api/inventory';
 import { isResponseSuccess } from '@/lib/api-helper';
-import {
+import { cn } from '@/lib/helper';
-  ProjectFlockKandangLookup,
+import { ProjectFlockKandangLookup } from '@/types/api/production/project-flock';
-} from '@/types/api/production/project-flock';
 import { useModal } from '@/components/Modal';
 import toast from 'react-hot-toast';
 
 import Card from '@/components/Card';
 import Badge from '@/components/Badge';
+import Steps from '@/components/steps/Steps';
+import StepItem from '@/components/steps/StepItem';
 import { Kandang } from '@/types/api/master-data/kandang';
 
 interface RecordingFormProps {
@@ -52,6 +53,7 @@ interface RecordingFormProps {
 }
 
 const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
+  const router = useRouter();
   const [selectedBodyWeights, setSelectedBodyWeights] = useState<number[]>([]);
   const [selectedStocks, setSelectedStocks] = useState<number[]>([]);
   const [selectedDepletions, setSelectedDepletions] = useState<number[]>([]);
@@ -75,6 +77,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   const [isApproveLoading, setIsApproveLoading] = useState(false);
   const [isRejectLoading, setIsRejectLoading] = useState(false);
+  const [formSteps, setFormSteps] = useState<FormStepStatus[] | null>(null);
 
   const approveModal = useModal();
   const rejectModal = useModal();
@@ -152,7 +155,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     RecordingApi.getAllFetcher
   );
 
-  
   const { data: stockProducts, isLoading: isLoadingStockProducts } = useSWR(
     stockProductsUrl,
     ProductWarehouseApi.getAllFetcher
@@ -526,8 +528,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   );
 
   const getProjectFlockBadgeAdornment = useCallback(() => {
-    if (!projectFlockKandangLookup)
+    if (!projectFlockKandangLookup) return null;
-      return null;
 
     const isAlreadyRecorded = recordedProjectFlockKandangIds.has(
       projectFlockKandangLookup.project_flock_kandang_id
@@ -552,10 +553,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
         Periode {projectFlockKandangLookup.project_flock?.period}
       </Badge>
     );
-  }, [
+  }, [recordedProjectFlockKandangIds, projectFlockKandangLookup]);
-    recordedProjectFlockKandangIds,
-    projectFlockKandangLookup,
-  ]);
 
   const getProductFlagBadgeAdornment = useCallback(
     (productWarehouseId: number) => {
@@ -713,9 +711,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     if (isResponseSuccess(approveResponse)) {
       toast.success('Recording berhasil disetujui!');
       approveModal.closeModal();
-      if (typeof window !== 'undefined') {
+      router.push('/production/recording');
-        window.location.href = '/production/recording';
-      }
     } else {
       toast.error(
         (approveResponse?.message as string) || 'Gagal menyetujui recording'
@@ -743,9 +739,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     if (isResponseSuccess(rejectResponse)) {
       toast.success('Recording berhasil ditolak!');
       rejectModal.closeModal();
-      if (typeof window !== 'undefined') {
+      router.push('/production/recording');
-        window.location.href = '/production/recording';
-      }
     } else {
       toast.error(
         (rejectResponse?.message as string) || 'Gagal menolak recording'
@@ -978,6 +972,26 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     }
   }, [isLayingCategory, type, formik]);
 
+  useEffect(() => {
+    if (isLayingCategory) {
+      const steps: FormStepStatus[] = [
+        {
+          name: 'Recording',
+          isCompleted: type === 'detail',
+          isCurrent: type !== 'detail',
+        },
+        {
+          name: 'Grading',
+          isCompleted: false,
+          isCurrent: type === 'detail',
+        },
+      ];
+      setFormSteps(steps);
+    } else {
+      setFormSteps(null);
+    }
+  }, [isLayingCategory, type]);
+
   useEffect(() => {
     if (formik.values.body_weights && editingAverageIndex === null) {
       const updatedBodyWeights = formik.values.body_weights.map(
@@ -1023,16 +1037,79 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
         {/* Project Flock Info Card */}
         {projectFlockKandangLookup && (
-          <Badge
+          <div className='flex items-center gap-2 mb-4'>
-            variant='soft'
+            <Badge
-            color='info'
+              variant='soft'
-            size='md'
+              color='info'
-            className={{
+              size='md'
-              badge: 'whitespace-nowrap font-semibold text-xs px-2',
+              className={{
-            }}
+                badge: 'whitespace-nowrap font-semibold text-xs px-2',
-          >
+              }}
-            {projectFlockKandangLookup.project_flock.category}
+            >
-          </Badge>
+              {projectFlockKandangLookup.project_flock.category}
+            </Badge>
+
+            {/* Form Steps for LAYING Category */}
+            {formSteps && (
+              <div className='flex-1 mt-4'>
+                <div className='w-full'>
+                  <ul className='steps w-full'>
+                    {formSteps.map((step, idx) => (
+                      <StepItem
+                        key={idx}
+                        color={
+                          step.isCompleted
+                            ? 'success'
+                            : step.isCurrent
+                              ? 'primary'
+                              : undefined
+                        }
+                        icon={
+                          step.isCompleted ? (
+                            <Icon
+                              icon='material-symbols:check-rounded'
+                              width={24}
+                              height={24}
+                            />
+                          ) : (
+                            idx + 1
+                          )
+                        }
+                      >
+                        {step.name}
+                      </StepItem>
+                    ))}
+                  </ul>
+                </div>
+
+                {/* Action buttons for multi-form navigation */}
+                {type === 'detail' && (
+                  <div className='mt-4 flex gap-2'>
+                    <Button
+                      type='button'
+                      color='primary'
+                      onClick={() => {
+                        toast.success('Akan dialihkan ke form Grading');
+                      }}
+                    >
+                      Lanjut ke Grading
+                    </Button>
+                    <Button
+                      type='button'
+                      color='success'
+                      onClick={() => {
+                        toast.success(
+                          'Semua form akan disubmit untuk approval'
+                        );
+                      }}
+                    >
+                      Submit Semua Form
+                    </Button>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
         )}
 
         <form
@@ -2006,22 +2083,135 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
           )}
 
           {/* Action buttons */}
-          <FormActions<RecordingGrowingFormValues>
+          <div className='flex flex-row justify-between gap-2 flex-wrap'>
-            type={type}
+            {type !== 'add' && (
-            formik={formik}
+              <div className='flex flex-row justify-start gap-2'>
-            editUrl={
+                {deleteRecordingClickHandler && (
-              initialValues
+                  <Button
-                ? `/production/recording/detail/edit/?recordingId=${initialValues.id}`
+                    type='button'
-                : undefined
+                    color='error'
-            }
+                    onClick={deleteRecordingClickHandler}
-            onDelete={deleteRecordingClickHandler}
+                    className='px-4'
-            onApprove={() => approveModal.openModal()}
+                  >
-            onReject={() => rejectModal.openModal()}
+                    <Icon
-            isApproveLoading={isApproveLoading}
+                      icon='material-symbols:delete-outline-rounded'
-            isRejectLoading={isRejectLoading}
+                      width={24}
-            showApproveReject={type === 'detail'}
+                      height={24}
-            disableSubmit={hasExceededStock}
+                      className='justify-start text-sm'
-          />
+                    />
+                    Delete
+                  </Button>
+                )}
+                {type !== 'edit' && initialValues && (
+                  <Button
+                    type='button'
+                    color='warning'
+                    href={`/production/recording/detail/edit/?recordingId=${initialValues.id}`}
+                    className='px-4'
+                  >
+                    <Icon
+                      icon='material-symbols:edit-outline'
+                      width={24}
+                      height={24}
+                      className='justify-start text-sm'
+                    />
+                    Edit
+                  </Button>
+                )}
+                {type === 'detail' && (
+                  <>
+                    <Button
+                      type='button'
+                      color='success'
+                      onClick={() => approveModal.openModal()}
+                      className='px-4'
+                      isLoading={isApproveLoading}
+                    >
+                      <Icon
+                        icon='material-symbols:check-circle-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Approve
+                    </Button>
+                    <Button
+                      type='button'
+                      color='error'
+                      onClick={() => rejectModal.openModal()}
+                      className='px-4'
+                      isLoading={isRejectLoading}
+                    >
+                      <Icon
+                        icon='material-symbols:cancel-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Reject
+                    </Button>
+                  </>
+                )}
+              </div>
+            )}
+            {type !== 'detail' && (
+              <div
+                className={cn('flex flex-row justify-end gap-2', {
+                  'w-full': type === 'add',
+                })}
+              >
+                <Button
+                  type='reset'
+                  color='warning'
+                  className='px-4'
+                  onClick={(e) => {
+                    formik.handleReset(e);
+                    formik.validateForm();
+                  }}
+                >
+                  Reset
+                </Button>
+                <Button
+                  type='submit'
+                  color='primary'
+                  className='px-4'
+                  isLoading={formik.isSubmitting}
+                  disabled={
+                    hasExceededStock || !formik.isValid || formik.isSubmitting
+                  }
+                >
+                  Submit
+                </Button>
+                {isLayingCategory && (
+                  <Button
+                    type='button'
+                    color='info'
+                    className='px-4'
+                    isLoading={formik.isSubmitting}
+                    disabled={
+                      hasExceededStock || !formik.isValid || formik.isSubmitting
+                    }
+                    onClick={async () => {
+                      await formik.submitForm();
+                      if (
+                        formik.isValid &&
+                        !formik.isSubmitting &&
+                        !hasExceededStock
+                      ) {
+                        toast.success(
+                          'Recording berhasil disimpan! Mengalihkan ke form Grading...'
+                        );
+                        // TODO: Redirect ke grading form setelah submit berhasil
+                        // router.push('/production/grading/add?recording_id=xxx');
+                      }
+                    }}
+                  >
+                    Next Step: Grading
+                  </Button>
+                )}
+              </div>
+            )}
+          </div>
           {recordingFormErrorMessage && (
             <div role='alert' className='alert alert-error'>
               <Icon