From ac2f2469882b5dea0ce3ac7ee545f07f93489b44 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 20 Oct 2025 20:00:43 +0700
Subject: [PATCH] refactor(FE-114): integrate FieldMessage component for
 improved field feedback in checkboxes

---
 .../flock/recording/form/RecordingForm.tsx    | 244 ++++++++++--------
 1 file changed, 136 insertions(+), 108 deletions(-)

diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index 2e137031..c4db3b94 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/src/components/pages/flock/recording/form/RecordingForm.tsx
@@ -26,6 +26,7 @@ import { ProductWarehouseApi } from '@/services/api/inventory';
 import { ProjectFlock } from '@/types/api/production/project-flock';
 import { Warehouse } from '@/types/api/master-data/warehouse';
 import { LocationApi } from '@/services/api/master-data';
+import FieldMessage from '@/components/helper/FieldMessage';
 
 interface RecordingFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -588,26 +589,29 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     <tr>
                       {type !== 'detail' && (
                         <th>
-                          <input
-                            type='checkbox'
-                            className='checkbox'
-                            checked={
-                              formik.values.feed_data?.length ===
-                                selectedFeed.length &&
-                              formik.values.feed_data?.length > 0
-                            }
-                            onChange={(e) => {
-                              if (e.target.checked) {
-                                setSelectedFeed(
-                                  formik.values.feed_data?.map(
-                                    (_, idx) => idx
-                                  ) ?? []
-                                );
-                              } else {
-                                setSelectedFeed([]);
+                          <div className='flex flex-col items-start gap-2'>
+                            <input
+                              type='checkbox'
+                              className='checkbox'
+                              checked={
+                                formik.values.feed_data?.length ===
+                                  selectedFeed.length &&
+                                formik.values.feed_data?.length > 0
                               }
-                            }}
-                          />
+                              onChange={(e) => {
+                                if (e.target.checked) {
+                                  setSelectedFeed(
+                                    formik.values.feed_data?.map(
+                                      (_, idx) => idx
+                                    ) ?? []
+                                  );
+                                } else {
+                                  setSelectedFeed([]);
+                                }
+                              }}
+                            />
+                            <FieldMessage message={null} isVisible={false} />
+                          </div>
                         </th>
                       )}
                       <th>Feed Name</th>
@@ -741,17 +745,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         </td>
                         {type !== 'detail' && (
                           <td>
-                            <Button
-                              type='button'
-                              color='error'
-                              onClick={() => removeFeedData(idx)}
-                            >
-                              <Icon
-                                icon='material-symbols:delete-outline-rounded'
-                                width={24}
-                                height={24}
-                              />
-                            </Button>
+                            <div className='flex flex-col items-start gap-2'>
+                              <Button
+                                type='button'
+                                color='error'
+                                onClick={() => removeFeedData(idx)}
+                              >
+                                <Icon
+                                  icon='material-symbols:delete-outline-rounded'
+                                  width={24}
+                                  height={24}
+                                />
+                              </Button>
+                              <FieldMessage message={null} isVisible={false} />
+                            </div>
                           </td>
                         )}
                       </tr>
@@ -834,20 +841,23 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       <tr key={`weight-${idx}`}>
                         {type !== 'detail' && (
                           <td>
-                            <input
-                              type='checkbox'
-                              className='checkbox'
-                              checked={selectedWeight.includes(idx)}
-                              onChange={(e) => {
-                                if (e.target.checked) {
-                                  setSelectedWeight([...selectedWeight, idx]);
-                                } else {
-                                  setSelectedWeight(
-                                    selectedWeight.filter((i) => i !== idx)
-                                  );
-                                }
-                              }}
-                            />
+                            <div className='flex flex-col items-start gap-2'>
+                              <input
+                                type='checkbox'
+                                className='checkbox'
+                                checked={selectedWeight.includes(idx)}
+                                onChange={(e) => {
+                                  if (e.target.checked) {
+                                    setSelectedWeight([...selectedWeight, idx]);
+                                  } else {
+                                    setSelectedWeight(
+                                      selectedWeight.filter((i) => i !== idx)
+                                    );
+                                  }
+                                }}
+                              />
+                              <FieldMessage message={null} isVisible={false} />
+                            </div>
                           </td>
                         )}
                         <td>
@@ -944,17 +954,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         </td>
                         {type !== 'detail' && (
                           <td>
-                            <Button
-                              type='button'
-                              color='error'
-                              onClick={() => removeBodyWeight(idx)}
-                            >
-                              <Icon
-                                icon='material-symbols:delete-outline-rounded'
-                                width={24}
-                                height={24}
-                              />
-                            </Button>
+                            <div className='flex flex-col items-start gap-2'>
+                              <Button
+                                type='button'
+                                color='error'
+                                onClick={() => removeBodyWeight(idx)}
+                              >
+                                <Icon
+                                  icon='material-symbols:delete-outline-rounded'
+                                  width={24}
+                                  height={24}
+                                />
+                              </Button>
+                              <FieldMessage message={null} isVisible={false} />
+                            </div>
                           </td>
                         )}
                       </tr>
@@ -1037,20 +1050,26 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       <tr key={`vaccine-${idx}`}>
                         {type !== 'detail' && (
                           <td>
-                            <input
-                              type='checkbox'
-                              className='checkbox'
-                              checked={selectedVaccine.includes(idx)}
-                              onChange={(e) => {
-                                if (e.target.checked) {
-                                  setSelectedVaccine([...selectedVaccine, idx]);
-                                } else {
-                                  setSelectedVaccine(
-                                    selectedVaccine.filter((i) => i !== idx)
-                                  );
-                                }
-                              }}
-                            />
+                            <div className='flex flex-col items-start gap-2'>
+                              <input
+                                type='checkbox'
+                                className='checkbox'
+                                checked={selectedVaccine.includes(idx)}
+                                onChange={(e) => {
+                                  if (e.target.checked) {
+                                    setSelectedVaccine([
+                                      ...selectedVaccine,
+                                      idx,
+                                    ]);
+                                  } else {
+                                    setSelectedVaccine(
+                                      selectedVaccine.filter((i) => i !== idx)
+                                    );
+                                  }
+                                }}
+                              />
+                              <FieldMessage message={null} isVisible={false} />
+                            </div>
                           </td>
                         )}
                         <td>
@@ -1163,17 +1182,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         </td>
                         {type !== 'detail' && (
                           <td>
-                            <Button
-                              type='button'
-                              color='error'
-                              onClick={() => removeVaccination(idx)}
-                            >
-                              <Icon
-                                icon='material-symbols:delete-outline-rounded'
-                                width={24}
-                                height={24}
-                              />
-                            </Button>
+                            <div className='flex flex-col items-start gap-2'>
+                              <Button
+                                type='button'
+                                color='error'
+                                onClick={() => removeVaccination(idx)}
+                              >
+                                <Icon
+                                  icon='material-symbols:delete-outline-rounded'
+                                  width={24}
+                                  height={24}
+                                />
+                              </Button>
+                              <FieldMessage message={null} isVisible={false} />
+                            </div>
                           </td>
                         )}
                       </tr>
@@ -1255,23 +1277,26 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       <tr key={`mortality-${idx}`}>
                         {type !== 'detail' && (
                           <td>
-                            <input
-                              type='checkbox'
-                              className='checkbox'
-                              checked={selectedMortality.includes(idx)}
-                              onChange={(e) => {
-                                if (e.target.checked) {
-                                  setSelectedMortality([
-                                    ...selectedMortality,
-                                    idx,
-                                  ]);
-                                } else {
-                                  setSelectedMortality(
-                                    selectedMortality.filter((i) => i !== idx)
-                                  );
-                                }
-                              }}
-                            />
+                            <div className='flex flex-col items-start gap-2'>
+                              <input
+                                type='checkbox'
+                                className='checkbox'
+                                checked={selectedMortality.includes(idx)}
+                                onChange={(e) => {
+                                  if (e.target.checked) {
+                                    setSelectedMortality([
+                                      ...selectedMortality,
+                                      idx,
+                                    ]);
+                                  } else {
+                                    setSelectedMortality(
+                                      selectedMortality.filter((i) => i !== idx)
+                                    );
+                                  }
+                                }}
+                              />
+                              <FieldMessage message={null} isVisible={false} />
+                            </div>
                           </td>
                         )}
                         <td>
@@ -1335,17 +1360,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         </td>
                         {type !== 'detail' && (
                           <td>
-                            <Button
-                              type='button'
-                              color='error'
-                              onClick={() => removeMortality(idx)}
-                            >
-                              <Icon
-                                icon='material-symbols:delete-outline-rounded'
-                                width={24}
-                                height={24}
-                              />
-                            </Button>
+                            <div className='flex flex-col items-start gap-2'>
+                              <Button
+                                type='button'
+                                color='error'
+                                onClick={() => removeMortality(idx)}
+                              >
+                                <Icon
+                                  icon='material-symbols:delete-outline-rounded'
+                                  width={24}
+                                  height={24}
+                                />
+                              </Button>
+                              <FieldMessage message={null} isVisible={false} />
+                            </div>
                           </td>
                         )}
                       </tr>