feat(FE-170,175): implement form steps and navigation for LAYING category in RecordingForm

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

@@ -50,6 +50,7 @@ import {
 import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
 import { cn, formatDate } from '@/lib/helper';
 import toast from 'react-hot-toast';
+import StepItem from '@/components/steps/StepItem';
 
 interface RecordingFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -84,7 +85,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   const [isApproveLoading, setIsApproveLoading] = useState(false);
   const [isRejectLoading, setIsRejectLoading] = useState(false);
-  const [, setFormSteps] = useState<FormStepStatus[] | null>(null);
+  const [formSteps, setFormSteps] = useState<FormStepStatus[] | null>(null);
   const [recordingFormErrorMessage, setRecordingFormErrorMessage] =
     useState('');
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
@@ -950,6 +951,26 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     setIsRejectLoading(false);
   };
 
+  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]);
+
   // Body Weights Handlers
   const addBodyWeight = () => {
     const newBodyWeights = [
@@ -1290,6 +1311,63 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
           </h1>
         </header>
 
+        {/* Project Flock Info Card */}
+        {(projectFlockKandangLookup || projectFlockKandangDetail) && (
+          <div className='flex items-center gap-2 mb-4'>
+            {/* 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={() => {
+                        router.push(
+                          `/production/recording/grading/add?recording_id=${initialValues?.id}`
+                        );
+                      }}
+                    >
+                      Lanjut ke Grading
+                    </Button>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+
         <form
           onSubmit={formik.handleSubmit}
           className='w-full mt-8 flex flex-col gap-6'