From 0de4f9d7450b815a051224d9e31c21094628665b Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 15 Jan 2026 16:07:17 +0700
Subject: [PATCH] feat(FE): Display FCR standards table in RecordingForm

---
 .../recording/form/RecordingForm.tsx          | 100 +++++++++++++++---
 1 file changed, 84 insertions(+), 16 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 40c2e64f..3ea4ae42 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -22,12 +22,16 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
 import Modal, { useModal } from '@/components/Modal';
 import AlertErrorList from '@/components/helper/form/FormErrors';
+import Table from '@/components/Table';
+import { type ColumnDef } from '@tanstack/react-table';
 
 import {
   ProjectFlockKandangApi,
   RecordingApi,
   ProjectFlockApi,
 } from '@/services/api/production';
+import { FcrApi } from '@/services/api/master-data';
+import { FcrWithStandards, FcrStandard } from '@/types/api/master-data/fcr';
 import { LocationApi } from '@/services/api/master-data';
 import { ProductWarehouseApi } from '@/services/api/inventory';
 import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
@@ -76,6 +80,24 @@ interface RecordingFormProps {
   initialValues?: Recording;
 }
 
+const fcrStandardColumns: ColumnDef<FcrStandard>[] = [
+  {
+    accessorKey: 'weight',
+    header: 'Weight',
+    cell: (props) => formatNumber(props.getValue() as number),
+  },
+  {
+    accessorKey: 'fcr_number',
+    header: 'FCR Number',
+    cell: (props) => formatNumber(props.getValue() as number),
+  },
+  {
+    accessorKey: 'mortality',
+    header: 'Mortality',
+    cell: (props) => formatNumber(props.getValue() as number),
+  },
+];
+
 const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   // ===== HOOKS & ROUTER =====
   const router = useRouter();
@@ -124,6 +146,42 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   const fcrStandardModal = useModal();
   const productionStandardModal = useModal();
 
+  const [fcrStandards, setFcrStandards] = useState<FcrStandard[]>([]);
+
+  const [isFcrModalOpen, setIsFcrModalOpen] = useState(false);
+
+  useEffect(() => {
+    const checkFcrModalOpen = () => {
+      const isOpen = fcrStandardModal.ref.current?.open || false;
+      setIsFcrModalOpen(isOpen);
+    };
+
+    checkFcrModalOpen();
+
+    const observer = new MutationObserver(checkFcrModalOpen);
+    if (fcrStandardModal.ref.current) {
+      observer.observe(fcrStandardModal.ref.current, {
+        attributes: true,
+        attributeFilter: ['open'],
+      });
+    }
+
+    return () => observer.disconnect();
+  }, [fcrStandardModal.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 isRecordingApproved = useCallback((recording?: Recording) => {
     return (
       recording?.approval?.action === 'APPROVED' &&
@@ -2735,23 +2793,33 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               <Icon icon='heroicons:x-mark' width={20} height={20} />
             </Button>
           </div>
-          <div className='space-y-4 px-4 pb-4'>
-            <div>
-              <span className='text-sm text-gray-600'>Nama Standard</span>
-              <p className='font-semibold'>
-                {initialValues?.project_flock?.fcr?.name || '-'}
+          <div className='px-4 pb-4'>
+            {isLoadingFcrStandards ? (
+              <div className='flex justify-center py-8'>
+                <span className='loading loading-spinner loading-lg'></span>
+              </div>
+            ) : fcrStandards.length > 0 ? (
+              <Table<FcrStandard>
+                data={fcrStandards}
+                columns={fcrStandardColumns}
+                className={{
+                  tableWrapperClassName: 'overflow-x-auto',
+                  tableClassName: 'w-full table-auto text-sm',
+                  headerRowClassName: 'border-b border-b-gray-200',
+                  headerColumnClassName:
+                    'px-4 py-3 text-xs font-semibold text-gray-500 whitespace-nowrap border-l border-l-gray-200 border-r border-r-gray-200 border-t border-t-gray-200 border-gray-200 border-b-0',
+                  bodyRowClassName:
+                    'hover:bg-gray-50 transition-colors border-b border-gray-200 first:border-t first:border-t-gray-200 border-l border-l-gray-200 border-r border-r-gray-200',
+                  bodyColumnClassName:
+                    'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+                  paginationClassName: 'hidden',
+                }}
+              />
+            ) : (
+              <p className='text-sm text-gray-500'>
+                Tidak ada data FCR standards
               </p>
-            </div>
-            <div>
-              <span className='text-sm text-gray-600'>FCR Standard</span>
-              <p className='font-semibold'>
-                {initialValues?.project_flock?.fcr?.fcr_std != null
-                  ? formatNumber(
-                      initialValues?.project_flock?.fcr?.fcr_std || 0
-                    )
-                  : '-'}
-              </p>
-            </div>
+            )}
           </div>
         </div>
       </Modal>