From a67d353bcbe34e18d37568fad55128f7d9cc1bcc 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    | 234 ++++++++++--------
 1 file changed, 131 insertions(+), 103 deletions(-)

diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index 2e137031..b75a49d7 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';
@@ -621,20 +622,23 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       <tr key={`feed-${idx}`}>
                         {type !== 'detail' && (
                           <td>
-                            <input
-                              type='checkbox'
-                              className='checkbox'
-                              checked={selectedFeed.includes(idx)}
-                              onChange={(e) => {
-                                if (e.target.checked) {
-                                  setSelectedFeed([...selectedFeed, idx]);
-                                } else {
-                                  setSelectedFeed(
-                                    selectedFeed.filter((i) => i !== idx)
-                                  );
-                                }
-                              }}
-                            />
+                            <div className='flex flex-col items-start gap-2'>
+                              <input
+                                type='checkbox'
+                                className='checkbox'
+                                checked={selectedFeed.includes(idx)}
+                                onChange={(e) => {
+                                  if (e.target.checked) {
+                                    setSelectedFeed([...selectedFeed, idx]);
+                                  } else {
+                                    setSelectedFeed(
+                                      selectedFeed.filter((i) => i !== idx)
+                                    );
+                                  }
+                                }}
+                              />
+                              <FieldMessage message={null} isVisible={false} />
+                            </div>
                           </td>
                         )}
                         <td>
@@ -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>