feat(FE-137): integrate Badge component to display project flock period in RecordingForm

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

@@ -34,6 +34,7 @@ import { useModal } from '@/components/Modal';
 import toast from 'react-hot-toast';
 
 import Card from '@/components/Card';
+import Badge from '@/components/Badge';
 
 interface RecordingFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -123,8 +124,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
       projectFlock.kandangs.forEach((kandang) => {
         const isAlreadyRecorded = recordedProjectFlockIds.has(projectFlock.id);
         const label = isAlreadyRecorded
-          ? `${projectFlock.flock.name} -  ${kandang.name} (Sudah Direcord)`
-          : `${projectFlock.flock.name} -  ${kandang.name}`;
+          ? `${projectFlock.flock.name} - ${kandang.name} (Sudah Direcord)`
+          : `${projectFlock.flock.name} - ${kandang.name}`;
 
         options.push({
           value: projectFlock.id,
@@ -323,6 +324,36 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     [formik.values.stocks, getAvailableStock, type]
   );
 
+  const getProjectFlockBadgeAdornment = useCallback(
+    (projectFlockId: number) => {
+      if (!isResponseSuccess(projectFlocks)) return null;
+
+      const projectFlock = projectFlocks.data.find(pf => pf.id === projectFlockId);
+      if (!projectFlock) return null;
+
+      const isAlreadyRecorded = recordedProjectFlockIds.has(projectFlockId);
+      let color: 'neutral' | 'success' | 'warning' | 'error' = 'neutral';
+
+      if (isAlreadyRecorded) {
+        color = 'warning';
+      } else {
+        color = 'success';
+      }
+
+      return (
+        <Badge
+          variant="soft"
+          color={color}
+          size="sm"
+          className={{ badge: 'whitespace-nowrap font-semibold text-xs px-2 py-0.5' }}
+        >
+          Periode {projectFlock.period}
+        </Badge>
+      );
+    },
+    [projectFlocks, recordedProjectFlockIds]
+  );
+
   const hasExceededStock = useMemo(() => {
     if (type === 'detail') return false;
     return (
@@ -712,6 +743,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   }
                   isClearable
                   isSearchable
+                  startAdornment={
+                    formik.values.project_flock_kandang_id
+                      ? getProjectFlockBadgeAdornment(formik.values.project_flock_kandang_id)
+                      : undefined
+                  }
                 />
               </div>
             </div>