From 3f76cb58fe5edbf3edc62de8a8a9a911463e7e6a Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 23 Oct 2025 17:15:17 +0700
Subject: [PATCH] refactor(FE-114): improve alignment and styling of checkbox
 inputs in RecordingForm

---
 .../recording/form/RecordingForm.tsx          | 48 ++++++++-----------
 1 file changed, 20 insertions(+), 28 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 120cddb8..45f0cbf5 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -812,19 +812,18 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   {formik.values.feed_data?.map((feed, idx) => (
                     <tr key={`feed-${idx}`}>
                       {type !== 'detail' && (
-                        <td>
-                          <div className='flex justify-center'>
+                        <td className="!align-middle">
                             <CheckboxInput
                               name={`feed-${idx}`}
                               checked={selectedFeed.includes(idx)}
                               onChange={(
-                                e: React.ChangeEvent<HTMLInputElement>
+                                e: React.ChangeEvent<HTMLInputElement>,
                               ) => {
                                 if (e.target.checked) {
                                   setSelectedFeed([...selectedFeed, idx]);
                                 } else {
                                   setSelectedFeed(
-                                    selectedFeed.filter((i) => i !== idx)
+                                    selectedFeed.filter((i) => i !== idx),
                                   );
                                 }
                               }}
@@ -833,11 +832,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 checkbox: 'checkbox checkbox-sm',
                               }}
                             />
-                          </div>
                         </td>
                       )}
                       <td>
-                        <SelectInput
+                      <SelectInput
                           required
                           value={
                             pakanOptions.find(
@@ -1004,7 +1002,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   <tr>
                     {type !== 'detail' && (
                       <th>
-                        <div className='flex justify-center'>
+                        <div className='flex justify-center items-center h-full'>
                           <CheckboxInput
                             name='select-all-weight'
                             checked={
@@ -1026,7 +1024,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                               }
                             }}
                             classNames={{
-                              wrapper: 'flex justify-center',
+                              wrapper: 'flex justify-center items-center h-full',
                               checkbox: 'checkbox checkbox-sm',
                             }}
                           />
@@ -1067,8 +1065,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   {formik.values.body_weight?.map((weight, idx) => (
                     <tr key={`weight-${idx}`}>
                       {type !== 'detail' && (
-                        <td>
-                          <div className='flex justify-center'>
+                        <td className='!align-middle'>
                             <CheckboxInput
                               name={`weight-${idx}`}
                               checked={selectedWeight.includes(idx)}
@@ -1084,11 +1081,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 }
                               }}
                               classNames={{
-                                wrapper: 'flex justify-center',
+                                wrapper: 'flex justify-center items-center',
                                 checkbox: 'checkbox checkbox-sm',
                               }}
                             />
-                          </div>
                         </td>
                       )}
                       <td>
@@ -1257,7 +1253,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   <tr>
                     {type !== 'detail' && (
                       <th>
-                        <div className='flex justify-center'>
+                        <div className='flex justify-center items-center h-full'>
                           <CheckboxInput
                             name='select-all-vaccine'
                             checked={
@@ -1279,7 +1275,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                               }
                             }}
                             classNames={{
-                              wrapper: 'flex justify-center',
+                              wrapper: 'flex justify-center items-center h-full',
                               checkbox: 'checkbox checkbox-sm',
                             }}
                           />
@@ -1312,19 +1308,18 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   {formik.values.vaccination?.map((vaccine, idx) => (
                     <tr key={`vaccine-${idx}`}>
                       {type !== 'detail' && (
-                        <td>
-                          <div className='flex justify-center'>
+                        <td className="!align-middle">
                             <CheckboxInput
                               name={`vaccine-${idx}`}
                               checked={selectedVaccine.includes(idx)}
                               onChange={(
-                                e: React.ChangeEvent<HTMLInputElement>
+                                e: React.ChangeEvent<HTMLInputElement>,
                               ) => {
                                 if (e.target.checked) {
                                   setSelectedVaccine([...selectedVaccine, idx]);
                                 } else {
                                   setSelectedVaccine(
-                                    selectedVaccine.filter((i) => i !== idx)
+                                    selectedVaccine.filter((i) => i !== idx),
                                   );
                                 }
                               }}
@@ -1333,11 +1328,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 checkbox: 'checkbox checkbox-sm',
                               }}
                             />
-                          </div>
                         </td>
                       )}
                       <td>
-                        <SelectInput
+                      <SelectInput
                           required
                           value={
                             ovkOptions.find(
@@ -1520,7 +1514,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   <tr>
                     {type !== 'detail' && (
                       <th>
-                        <div className='flex justify-center'>
+                        <div className='flex justify-center items-center h-full'>
                           <CheckboxInput
                             name='select-all-mortality'
                             checked={
@@ -1542,7 +1536,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                               }
                             }}
                             classNames={{
-                              wrapper: 'flex justify-center',
+                              wrapper: 'flex justify-center items-center h-full',
                               checkbox: 'checkbox checkbox-sm',
                             }}
                           />
@@ -1574,13 +1568,12 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   {formik.values.mortality?.map((mortality, idx) => (
                     <tr key={`mortality-${idx}`}>
                       {type !== 'detail' && (
-                        <td>
-                          <div className='flex justify-center'>
+                        <td className="!align-middle">
                             <CheckboxInput
                               name={`mortality-${idx}`}
                               checked={selectedMortality.includes(idx)}
                               onChange={(
-                                e: React.ChangeEvent<HTMLInputElement>
+                                e: React.ChangeEvent<HTMLInputElement>,
                               ) => {
                                 if (e.target.checked) {
                                   setSelectedMortality([
@@ -1589,7 +1582,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                   ]);
                                 } else {
                                   setSelectedMortality(
-                                    selectedMortality.filter((i) => i !== idx)
+                                    selectedMortality.filter((i) => i !== idx),
                                   );
                                 }
                               }}
@@ -1598,11 +1591,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 checkbox: 'checkbox checkbox-sm',
                               }}
                             />
-                          </div>
                         </td>
                       )}
                       <td>
-                        <SelectInput
+                      <SelectInput
                           required
                           value={RECORDING_FLAG_OPTIONS.find(
                             (opt) => opt.value === mortality.condition