refactor(FE): Use memoized IDs and badges for standards

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

@@ -284,39 +284,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     return () => observer.disconnect();
   }, [productionStandardModal.ref]);
 
-  const { data: fcr, isLoading: isLoadingFcrStandards } = useSWR(
-    isFcrModalOpen && initialValues?.project_flock?.fcr?.id
-      ? `fcr-detail-${initialValues.project_flock.fcr.id}`
-      : null,
-    () => FcrApi.getSingle(initialValues!.project_flock!.fcr!.id!)
-  );
-
-  useEffect(() => {
-    if (fcr?.status === 'success') {
-      setFcrStandards((fcr.data as FcrWithStandards).fcr_standards || []);
-    }
-  }, [fcr]);
-
-  const { data: productionStandard, isLoading: isLoadingProductionStandards } =
-    useSWR(
-      isProductionStandardModalOpen &&
-        initialValues?.project_flock?.production_standart?.id
-        ? `production-standard-detail-${initialValues.project_flock.production_standart.id}`
-        : null,
-      () =>
-        ProductionStandardApi.getSingle(
-          initialValues!.project_flock!.production_standart!.id!
-        )
-    );
-
-  useEffect(() => {
-    if (productionStandard?.status === 'success') {
-      setProductionStandards(
-        productionStandard.data as ProductionStandard | null
-      );
-    }
-  }, [productionStandard]);
-
   const isRecordingApproved = useCallback((recording?: Recording) => {
     return (
       recording?.approval?.action === 'APPROVED' &&
@@ -465,6 +432,47 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
       ? projectFlockKandangLookupData.data
       : undefined;
 
+  const fcrId = useMemo(() => {
+    if (type === 'add') {
+      return projectFlockKandangLookup?.project_flock?.fcr?.id;
+    }
+    return initialValues?.project_flock?.fcr?.id;
+  }, [type, projectFlockKandangLookup, initialValues]);
+
+  const { data: fcr, isLoading: isLoadingFcrStandards } = useSWR(
+    isFcrModalOpen && fcrId ? `fcr-detail-${fcrId}` : null,
+    () => FcrApi.getSingle(fcrId!)
+  );
+
+  useEffect(() => {
+    if (fcr?.status === 'success') {
+      setFcrStandards((fcr.data as FcrWithStandards).fcr_standards || []);
+    }
+  }, [fcr]);
+
+  const productionStandardId = useMemo(() => {
+    if (type === 'add') {
+      return projectFlockKandangLookup?.project_flock?.production_standard_id;
+    }
+    return initialValues?.project_flock?.production_standart?.id;
+  }, [type, projectFlockKandangLookup, initialValues]);
+
+  const { data: productionStandard, isLoading: isLoadingProductionStandards } =
+    useSWR(
+      isProductionStandardModalOpen && productionStandardId
+        ? `production-standard-detail-${productionStandardId}`
+        : null,
+      () => ProductionStandardApi.getSingle(productionStandardId!)
+    );
+
+  useEffect(() => {
+    if (productionStandard?.status === 'success') {
+      setProductionStandards(
+        productionStandard.data as ProductionStandard | null
+      );
+    }
+  }, [productionStandard]);
+
   const projectFlockKandangDetailUrl = useMemo(() => {
     if (
       type === 'add' ||
@@ -1686,23 +1694,45 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   </div>
                   <div>
                     <span className='text-sm text-gray-600'>Standard FCR</span>
-                    <p className='font-semibold'>
+                    <div className='mt-1'>
-                      {projectFlockKandangLookup?.project_flock?.fcr?.name ||
+                      <Badge
-                        initialValues?.project_flock?.fcr?.name ||
+                        variant='soft'
-                        '-'}
+                        color='primary'
-                    </p>
+                        className={{
+                          badge:
+                            'cursor-pointer hover:opacity-80 transition-opacity whitespace-nowrap',
+                        }}
+                        onClick={() => fcrStandardModal.openModal()}
+                      >
+                        {projectFlockKandangLookup?.project_flock?.fcr?.name ||
+                          initialValues?.project_flock?.fcr?.name ||
+                          '-'}
+                      </Badge>
+                    </div>
                   </div>
                   <div>
                     <span className='text-sm text-gray-600'>
                       Standard Produksi
                     </span>
-                    <p className='font-semibold'>
+                    <div className='mt-1'>
-                      {projectFlockKandangLookup?.project_flock
+                      <Badge
-                        ?.production_standard_id
+                        variant='soft'
-                        ? `ID: ${projectFlockKandangLookup.project_flock.production_standard_id}`
+                        color='primary'
-                        : initialValues?.project_flock?.production_standart
+                        className={{
-                            ?.name || '-'}
+                          badge:
-                    </p>
+                            'cursor-pointer hover:opacity-80 transition-opacity whitespace-nowrap',
+                        }}
+                        onClick={() => productionStandardModal.openModal()}
+                      >
+                        {productionStandards?.name ||
+                          initialValues?.project_flock?.production_standart
+                            ?.name ||
+                          (projectFlockKandangLookup?.project_flock
+                            ?.production_standard_id
+                            ? `Production Standard ${projectFlockKandangLookup.project_flock.production_standard_id}`
+                            : '-')}
+                      </Badge>
+                    </div>
                   </div>
                 </div>
               )}