diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index bcf3a0cf..8c166700 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -31,6 +31,7 @@ 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';
+import Card from '@/components/Card';
 
 interface RecordingFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -634,463 +635,521 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
           className='w-full mt-8 flex flex-col gap-6'
         >
           {/* Basic Info Card */}
-          <div className='card bg-base-100 shadow mb-4'>
-            <div className='card-body flex flex-col gap-6'>
-              <h2 className='card-title'>Informasi Recording</h2>
+          <Card
+            title='Informasi Recording'
+            className={{
+              wrapper: 'w-full mb-4 shadow',
+              body: 'flex flex-col gap-6',
+            }}
+          >
+            <div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
+              <SelectInput
+                required
+                label='Lokasi'
+                value={formik.values.location ?? undefined}
+                onChange={(val) => {
+                  locationChangeHandler(val);
+                  setTimeout(() => {
+                    formik.setFieldTouched('location', true);
+                    formik.setFieldTouched('location_id', true);
+                  }, 0);
+                }}
+                options={locationOptions}
+                onInputChange={setLocationSelectInputValue}
+                isLoading={isLoadingLocations}
+                isError={
+                  formik.touched.location_id &&
+                  Boolean(formik.errors.location_id)
+                }
+                errorMessage={formik.errors.location_id as string}
+                isDisabled={type === 'detail'}
+                isClearable
+                placeholder='Pilih lokasi terlebih dahulu'
+              />
 
-              <div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
-                <SelectInput
-                  required
-                  label='Lokasi'
-                  value={formik.values.location ?? undefined}
-                  onChange={(val) => {
-                    locationChangeHandler(val);
-                    setTimeout(() => {
-                      formik.setFieldTouched('location', true);
-                      formik.setFieldTouched('location_id', true);
-                    }, 0);
-                  }}
-                  options={locationOptions}
-                  onInputChange={setLocationSelectInputValue}
-                  isLoading={isLoadingLocations}
-                  isError={
-                    formik.touched.location_id &&
-                    Boolean(formik.errors.location_id)
-                  }
-                  errorMessage={formik.errors.location_id as string}
-                  isDisabled={type === 'detail'}
-                  isClearable
-                  placeholder='Pilih lokasi terlebih dahulu'
-                />
+              <TextInput
+                required
+                label='Tanggal Recording'
+                type='date'
+                name='recording_date'
+                value={
+                  formik.values.recording_date instanceof Date
+                    ? formik.values.recording_date
+                        .toISOString()
+                        .substring(0, 10)
+                    : ''
+                }
+                onChange={(e) => {
+                  const date = e.target.value ? new Date(e.target.value) : null;
+                  formik.setFieldValue('recording_date', date);
+                }}
+                onBlur={formik.handleBlur}
+                isError={
+                  formik.touched.recording_date &&
+                  Boolean(formik.errors.recording_date)
+                }
+                errorMessage={formik.errors.recording_date as string}
+                readOnly={type === 'detail'}
+              />
 
-                <TextInput
-                  required
-                  label='Tanggal Recording'
-                  type='date'
-                  name='recording_date'
-                  value={
-                    formik.values.recording_date instanceof Date
-                      ? formik.values.recording_date
-                          .toISOString()
-                          .substring(0, 10)
-                      : ''
-                  }
-                  onChange={(e) => {
-                    const date = e.target.value
-                      ? new Date(e.target.value)
-                      : null;
-                    formik.setFieldValue('recording_date', date);
-                  }}
-                  onBlur={formik.handleBlur}
-                  isError={
-                    formik.touched.recording_date &&
-                    Boolean(formik.errors.recording_date)
-                  }
-                  errorMessage={formik.errors.recording_date as string}
-                  readOnly={type === 'detail'}
-                />
+              <SelectInput
+                required
+                label='Flock'
+                value={formik.values.flock ?? undefined}
+                onChange={(val) => {
+                  flockChangeHandler(val);
+                  setTimeout(() => {
+                    formik.setFieldTouched('flock', true);
+                    formik.setFieldTouched('flock_id', true);
+                  }, 0);
+                }}
+                options={flockOptions}
+                onInputChange={setFlockSelectInputValue}
+                isLoading={isLoadingFlocks}
+                isError={
+                  formik.touched.flock_id && Boolean(formik.errors.flock_id)
+                }
+                errorMessage={formik.errors.flock_id as string}
+                isDisabled={type === 'detail' || !formik.values.location_id}
+                isClearable
+                placeholder={
+                  !formik.values.location_id
+                    ? 'Pilih lokasi terlebih dahulu'
+                    : 'Pilih Flock'
+                }
+              />
 
-                <SelectInput
-                  required
-                  label='Flock'
-                  value={formik.values.flock ?? undefined}
-                  onChange={(val) => {
-                    flockChangeHandler(val);
-                    setTimeout(() => {
-                      formik.setFieldTouched('flock', true);
-                      formik.setFieldTouched('flock_id', true);
-                    }, 0);
-                  }}
-                  options={flockOptions}
-                  onInputChange={setFlockSelectInputValue}
-                  isLoading={isLoadingFlocks}
-                  isError={
-                    formik.touched.flock_id && Boolean(formik.errors.flock_id)
-                  }
-                  errorMessage={formik.errors.flock_id as string}
-                  isDisabled={type === 'detail' || !formik.values.location_id}
-                  isClearable
-                  placeholder={
-                    !formik.values.location_id
-                      ? 'Pilih lokasi terlebih dahulu'
-                      : 'Pilih Flock'
-                  }
-                />
-
-                <SelectInput
-                  key={`coop-select-${formik.values.flock_id || 'no-flock'}`}
-                  required
-                  label='Kandang'
-                  value={formik.values.coop ?? undefined}
-                  onChange={(val) => {
-                    coopChangeHandler(val);
-                    setTimeout(() => {
-                      formik.setFieldTouched('coop', true);
-                      formik.setFieldTouched('coop_id', true);
-                    }, 0);
-                  }}
-                  options={coopOptions}
-                  isError={
-                    formik.touched.coop_id && Boolean(formik.errors.coop_id)
-                  }
-                  errorMessage={formik.errors.coop_id as string}
-                  isDisabled={type === 'detail' || !selectedProjectFlock}
-                  isClearable
-                  placeholder={
-                    !selectedProjectFlock
-                      ? 'Pilih flock terlebih dahulu'
-                      : 'Pilih Kandang'
-                  }
-                />
-              </div>
+              <SelectInput
+                key={`coop-select-${formik.values.flock_id || 'no-flock'}`}
+                required
+                label='Kandang'
+                value={formik.values.coop ?? undefined}
+                onChange={(val) => {
+                  coopChangeHandler(val);
+                  setTimeout(() => {
+                    formik.setFieldTouched('coop', true);
+                    formik.setFieldTouched('coop_id', true);
+                  }, 0);
+                }}
+                options={coopOptions}
+                isError={
+                  formik.touched.coop_id && Boolean(formik.errors.coop_id)
+                }
+                errorMessage={formik.errors.coop_id as string}
+                isDisabled={type === 'detail' || !selectedProjectFlock}
+                isClearable
+                placeholder={
+                  !selectedProjectFlock
+                    ? 'Pilih flock terlebih dahulu'
+                    : 'Pilih Kandang'
+                }
+              />
             </div>
-          </div>
+          </Card>
 
           {/* Feed Data Table */}
-          <div className='card bg-base-100 shadow mb-4'>
-            <div className='card-body'>
-              <h2 className='card-title mb-4'>Data Pakan</h2>
-              <div className='overflow-x-auto'>
-                <table className='table'>
-                  <thead>
-                    <tr>
-                      {type !== 'detail' && (
-                        <th>
-                          <div className='flex justify-center'>
-                            <CheckboxInput
-                              name='select-all-feed'
-                              checked={
-                                formik.values.feed_data?.length ===
-                                  selectedFeed.length &&
-                                formik.values.feed_data?.length > 0
+          <Card
+            title='Data Pakan'
+            className={{
+              wrapper: 'w-full mb-4 shadow',
+              title: 'mb-4',
+            }}
+          >
+            <div className='overflow-x-auto'>
+              <table className='table'>
+                <thead>
+                  <tr>
+                    {type !== 'detail' && (
+                      <th>
+                        <div className='flex justify-center'>
+                          <CheckboxInput
+                            name='select-all-feed'
+                            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([]);
                               }
+                            }}
+                            naked={true}
+                            size='sm'
+                          />
+                        </div>
+                      </th>
+                    )}
+                    <th>
+                      Nama Pakan
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>Total Stock pada saat ini</th>
+                    <th>
+                      Jumlah Stock yang digunakan
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    {type !== 'detail' && <th>Action</th>}
+                  </tr>
+                </thead>
+                <tbody>
+                  {formik.values.feed_data?.map((feed, idx) => (
+                    <tr key={`feed-${idx}`}>
+                      {type !== 'detail' && (
+                        <td>
+                          <div className='flex flex-col items-center gap-2'>
+                            <CheckboxInput
+                              name={`feed-${idx}`}
+                              checked={selectedFeed.includes(idx)}
                               onChange={(e) => {
                                 if (e.target.checked) {
-                                  setSelectedFeed(
-                                    formik.values.feed_data?.map(
-                                      (_, idx) => idx
-                                    ) ?? []
-                                  );
+                                  setSelectedFeed([...selectedFeed, idx]);
                                 } else {
-                                  setSelectedFeed([]);
+                                  setSelectedFeed(
+                                    selectedFeed.filter((i) => i !== idx)
+                                  );
                                 }
                               }}
                               naked={true}
                               size='sm'
                             />
+                            <FieldMessage message={null} isVisible={false} />
                           </div>
-                        </th>
+                        </td>
                       )}
-                      <th>
-                        Nama Pakan
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>Total Stock pada saat ini</th>
-                      <th>
-                        Jumlah Stock yang digunakan
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      {type !== 'detail' && <th>Action</th>}
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {formik.values.feed_data?.map((feed, idx) => (
-                      <tr key={`feed-${idx}`}>
-                        {type !== 'detail' && (
-                          <td>
-                            <div className='flex flex-col items-center gap-2'>
-                              <CheckboxInput
-                                name={`feed-${idx}`}
-                                checked={selectedFeed.includes(idx)}
-                                onChange={(e) => {
-                                  if (e.target.checked) {
-                                    setSelectedFeed([...selectedFeed, idx]);
-                                  } else {
-                                    setSelectedFeed(
-                                      selectedFeed.filter((i) => i !== idx)
-                                    );
-                                  }
-                                }}
-                                naked={true}
-                                size='sm'
-                              />
-                              <FieldMessage message={null} isVisible={false} />
-                            </div>
-                          </td>
-                        )}
-                        <td>
-                          <SelectInput
-                            required
-                            value={
-                              pakanOptions.find(
-                                (opt: OptionType) =>
-                                  Number(opt.value) === Number(feed.feed_id)
-                              ) ?? null
-                            }
-                            onChange={(val) => {
-                              const productWarehouseId =
-                                (val as OptionType)?.value ?? 0;
-                              const stock = productWarehouseId
-                                ? (pakanStockMap.get(
-                                    productWarehouseId as number
-                                  ) ?? '')
-                                : '';
+                      <td>
+                        <SelectInput
+                          required
+                          value={
+                            pakanOptions.find(
+                              (opt: OptionType) =>
+                                Number(opt.value) === Number(feed.feed_id)
+                            ) ?? null
+                          }
+                          onChange={(val) => {
+                            const productWarehouseId =
+                              (val as OptionType)?.value ?? 0;
+                            const stock = productWarehouseId
+                              ? (pakanStockMap.get(
+                                  productWarehouseId as number
+                                ) ?? '')
+                              : '';
 
-                              formik.setFieldValue(
+                            formik.setFieldValue(`feed_data.${idx}.feed`, val);
+                            formik.setFieldValue(
+                              `feed_data.${idx}.feed_id`,
+                              productWarehouseId || ''
+                            );
+                            formik.setFieldValue(
+                              `feed_data.${idx}.feed_qty`,
+                              stock
+                            );
+                            formik.setFieldValue(
+                              `feed_data.${idx}.feed_stock`,
+                              0
+                            );
+                            setTimeout(() => {
+                              formik.setFieldTouched(
                                 `feed_data.${idx}.feed`,
-                                val
+                                true
                               );
-                              formik.setFieldValue(
+                              formik.setFieldTouched(
                                 `feed_data.${idx}.feed_id`,
-                                productWarehouseId || ''
+                                true
                               );
-                              formik.setFieldValue(
-                                `feed_data.${idx}.feed_qty`,
-                                stock
-                              );
-                              formik.setFieldValue(
-                                `feed_data.${idx}.feed_stock`,
-                                0
-                              );
-                              setTimeout(() => {
-                                formik.setFieldTouched(
-                                  `feed_data.${idx}.feed`,
-                                  true
-                                );
-                                formik.setFieldTouched(
-                                  `feed_data.${idx}.feed_id`,
-                                  true
-                                );
-                              }, 0);
-                            }}
-                            options={pakanOptions}
-                            isLoading={isLoadingPakan}
-                            isError={
-                              isRepeaterInputError('feed_data', 'feed_id', idx)
-                                .isError
-                            }
-                            errorMessage={
-                              isRepeaterInputError('feed_data', 'feed_id', idx)
-                                .errorMessage
-                            }
-                            isDisabled={type === 'detail'}
-                            isClearable
-                            className={{
-                              wrapper:
-                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                          />
-                        </td>
+                            }, 0);
+                          }}
+                          options={pakanOptions}
+                          isLoading={isLoadingPakan}
+                          isError={
+                            isRepeaterInputError('feed_data', 'feed_id', idx)
+                              .isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError('feed_data', 'feed_id', idx)
+                              .errorMessage
+                          }
+                          isDisabled={type === 'detail'}
+                          isClearable
+                          className={{
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <TextInput
+                          type='text'
+                          name={`feed_data.${idx}.feed_qty`}
+                          value={
+                            feed.feed_qty === '' || feed.feed_qty === undefined
+                              ? ''
+                              : String(feed.feed_qty)
+                          }
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          readOnly={true}
+                          placeholder='Pilih pakan terlebih dahulu'
+                          className={{
+                            wrapper: 'w-full min-w-24',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <NumberInput
+                          required
+                          name={`feed_data.${idx}.feed_stock`}
+                          value={feed.feed_stock}
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          maskType='number'
+                          decimals={0}
+                          min={0}
+                          isError={
+                            isRepeaterInputError('feed_data', 'feed_stock', idx)
+                              .isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError('feed_data', 'feed_stock', idx)
+                              .errorMessage
+                          }
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-24',
+                          }}
+                        />
+                      </td>
+                      {type !== 'detail' && (
                         <td>
-                          <TextInput
-                            type='text'
-                            name={`feed_data.${idx}.feed_qty`}
-                            value={
-                              feed.feed_qty === '' ||
-                              feed.feed_qty === undefined
-                                ? ''
-                                : String(feed.feed_qty)
-                            }
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            readOnly={true}
-                            placeholder='Pilih pakan terlebih dahulu'
-                            className={{
-                              wrapper: 'w-full min-w-24',
-                            }}
-                          />
+                          <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>
-                        <td>
-                          <NumberInput
-                            required
-                            name={`feed_data.${idx}.feed_stock`}
-                            value={feed.feed_stock}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            maskType='number'
-                            decimals={0}
-                            min={0}
-                            isError={
-                              isRepeaterInputError(
-                                'feed_data',
-                                'feed_stock',
-                                idx
-                              ).isError
-                            }
-                            errorMessage={
-                              isRepeaterInputError(
-                                'feed_data',
-                                'feed_stock',
-                                idx
-                              ).errorMessage
-                            }
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper: 'w-full min-w-24',
-                            }}
-                          />
-                        </td>
-                        {type !== 'detail' && (
-                          <td>
-                            <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>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-              {type !== 'detail' && (
-                <div className='flex justify-center items-center mt-4 gap-4'>
-                  {selectedFeed.length > 0 && (
-                    <Button
-                      type='button'
-                      color='error'
-                      onClick={removeSelectedFeedData}
-                      disabled={selectedFeed.length === 0}
-                      className='w-fit'
-                    >
-                      <Icon
-                        icon='material-symbols:delete-outline-rounded'
-                        width={24}
-                        height={24}
-                      />
-                      Delete Selected Feed Data ({selectedFeed.length})
-                    </Button>
-                  )}
+                      )}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            {type !== 'detail' && (
+              <div className='flex justify-center items-center mt-4 gap-4'>
+                {selectedFeed.length > 0 && (
                   <Button
                     type='button'
-                    color='success'
-                    onClick={addFeedData}
+                    color='error'
+                    onClick={removeSelectedFeedData}
+                    disabled={selectedFeed.length === 0}
                     className='w-fit'
                   >
-                    <Icon icon='ic:round-plus' width={24} height={24} />
-                    Add Feed Data
+                    <Icon
+                      icon='material-symbols:delete-outline-rounded'
+                      width={24}
+                      height={24}
+                    />
+                    Delete Selected Feed Data ({selectedFeed.length})
                   </Button>
-                </div>
-              )}
-            </div>
-          </div>
+                )}
+                <Button
+                  type='button'
+                  color='success'
+                  onClick={addFeedData}
+                  className='w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Add Feed Data
+                </Button>
+              </div>
+            )}
+          </Card>
 
           {/* Body Weight Table */}
-          <div className='card bg-base-100 shadow mb-4'>
-            <div className='card-body'>
-              <h2 className='card-title mb-4'>Berat Ayam</h2>
-              <div className='overflow-x-auto'>
-                <table className='table'>
-                  <thead>
-                    <tr>
-                      {type !== 'detail' && (
-                        <th>
-                          <div className='flex justify-center'>
-                            <CheckboxInput
-                              name='select-all-weight'
-                              checked={
-                                formik.values.body_weight?.length ===
-                                  selectedWeight.length &&
-                                formik.values.body_weight?.length > 0
+          <Card
+            title='Berat Ayam'
+            className={{
+              wrapper: 'w-full mb-4 shadow',
+              title: 'mb-4',
+            }}
+          >
+            <div className='overflow-x-auto'>
+              <table className='table'>
+                <thead>
+                  <tr>
+                    {type !== 'detail' && (
+                      <th>
+                        <div className='flex justify-center'>
+                          <CheckboxInput
+                            name='select-all-weight'
+                            checked={
+                              formik.values.body_weight?.length ===
+                                selectedWeight.length &&
+                              formik.values.body_weight?.length > 0
+                            }
+                            onChange={(e) => {
+                              if (e.target.checked) {
+                                setSelectedWeight(
+                                  formik.values.body_weight?.map(
+                                    (_, idx) => idx
+                                  ) ?? []
+                                );
+                              } else {
+                                setSelectedWeight([]);
                               }
+                            }}
+                            naked={true}
+                            size='sm'
+                          />
+                        </div>
+                      </th>
+                    )}
+                    <th>
+                      Berat (Gram)
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Jumlah Ayam
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Rata-rata berat Ayam
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    {type !== 'detail' && <th>Action</th>}
+                  </tr>
+                </thead>
+                <tbody>
+                  {formik.values.body_weight?.map((weight, idx) => (
+                    <tr key={`weight-${idx}`}>
+                      {type !== 'detail' && (
+                        <td>
+                          <div className='flex flex-col items-center gap-2'>
+                            <CheckboxInput
+                              name={`weight-${idx}`}
+                              checked={selectedWeight.includes(idx)}
                               onChange={(e) => {
                                 if (e.target.checked) {
-                                  setSelectedWeight(
-                                    formik.values.body_weight?.map(
-                                      (_, idx) => idx
-                                    ) ?? []
-                                  );
+                                  setSelectedWeight([...selectedWeight, idx]);
                                 } else {
-                                  setSelectedWeight([]);
+                                  setSelectedWeight(
+                                    selectedWeight.filter((i) => i !== idx)
+                                  );
                                 }
                               }}
                               naked={true}
                               size='sm'
                             />
+                            <FieldMessage message={null} isVisible={false} />
                           </div>
-                        </th>
+                        </td>
                       )}
-                      <th>
-                        Berat (Gram)
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>
-                        Jumlah Ayam
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>
-                        Rata-rata berat Ayam
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      {type !== 'detail' && <th>Action</th>}
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {formik.values.body_weight?.map((weight, idx) => (
-                      <tr key={`weight-${idx}`}>
-                        {type !== 'detail' && (
-                          <td>
-                            <div className='flex flex-col items-center gap-2'>
-                              <CheckboxInput
-                                name={`weight-${idx}`}
-                                checked={selectedWeight.includes(idx)}
-                                onChange={(e) => {
-                                  if (e.target.checked) {
-                                    setSelectedWeight([...selectedWeight, idx]);
-                                  } else {
-                                    setSelectedWeight(
-                                      selectedWeight.filter((i) => i !== idx)
-                                    );
-                                  }
-                                }}
-                                naked={true}
-                                size='sm'
-                              />
-                              <FieldMessage message={null} isVisible={false} />
-                            </div>
-                          </td>
-                        )}
-                        <td>
+                      <td>
+                        <NumberInput
+                          required
+                          name={`body_weight.${idx}.chicken_weight`}
+                          value={weight.chicken_weight}
+                          onChange={handleChickenWeightChangeWrapper(idx)}
+                          onBlur={formik.handleBlur}
+                          maskType='weight'
+                          weightUnit='gram'
+                          decimals={0}
+                          min={0}
+                          isError={
+                            isRepeaterInputError(
+                              'body_weight',
+                              'chicken_weight',
+                              idx
+                            ).isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError(
+                              'body_weight',
+                              'chicken_weight',
+                              idx
+                            ).errorMessage
+                          }
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-24',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <NumberInput
+                          required
+                          name={`body_weight.${idx}.chicken_count`}
+                          value={weight.chicken_count}
+                          onChange={handleChickenCountChangeWrapper(idx)}
+                          onBlur={formik.handleBlur}
+                          maskType='number'
+                          decimals={0}
+                          min={0}
+                          isError={
+                            isRepeaterInputError(
+                              'body_weight',
+                              'chicken_count',
+                              idx
+                            ).isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError(
+                              'body_weight',
+                              'chicken_count',
+                              idx
+                            ).errorMessage
+                          }
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-24',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <div className='relative'>
                           <NumberInput
                             required
-                            name={`body_weight.${idx}.chicken_weight`}
-                            value={weight.chicken_weight}
-                            onChange={handleChickenWeightChangeWrapper(idx)}
+                            name={`body_weight.${idx}.average_chicken_weight`}
+                            value={weight.average_chicken_weight || ''}
+                            onChange={handleAverageWeightChangeWrapper(idx)}
                             onBlur={formik.handleBlur}
                             maskType='weight'
                             weightUnit='gram'
@@ -1099,14 +1158,14 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             isError={
                               isRepeaterInputError(
                                 'body_weight',
-                                'chicken_weight',
+                                'average_chicken_weight',
                                 idx
                               ).isError
                             }
                             errorMessage={
                               isRepeaterInputError(
                                 'body_weight',
-                                'chicken_weight',
+                                'average_chicken_weight',
                                 idx
                               ).errorMessage
                             }
@@ -1114,587 +1173,518 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             className={{
                               wrapper: 'w-full min-w-24',
                             }}
+                            placeholder=''
                           />
-                        </td>
+                        </div>
+                      </td>
+                      {type !== 'detail' && (
                         <td>
-                          <NumberInput
-                            required
-                            name={`body_weight.${idx}.chicken_count`}
-                            value={weight.chicken_count}
-                            onChange={handleChickenCountChangeWrapper(idx)}
-                            onBlur={formik.handleBlur}
-                            maskType='number'
-                            decimals={0}
-                            min={0}
-                            isError={
-                              isRepeaterInputError(
-                                'body_weight',
-                                'chicken_count',
-                                idx
-                              ).isError
-                            }
-                            errorMessage={
-                              isRepeaterInputError(
-                                'body_weight',
-                                'chicken_count',
-                                idx
-                              ).errorMessage
-                            }
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper: 'w-full min-w-24',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <div className='relative'>
-                            <NumberInput
-                              required
-                              name={`body_weight.${idx}.average_chicken_weight`}
-                              value={weight.average_chicken_weight || ''}
-                              onChange={handleAverageWeightChangeWrapper(idx)}
-                              onBlur={formik.handleBlur}
-                              maskType='weight'
-                              weightUnit='gram'
-                              decimals={0}
-                              min={0}
-                              isError={
-                                isRepeaterInputError(
-                                  'body_weight',
-                                  'average_chicken_weight',
-                                  idx
-                                ).isError
-                              }
-                              errorMessage={
-                                isRepeaterInputError(
-                                  'body_weight',
-                                  'average_chicken_weight',
-                                  idx
-                                ).errorMessage
-                              }
-                              readOnly={type === 'detail'}
-                              className={{
-                                wrapper: 'w-full min-w-24',
-                              }}
-                              placeholder=''
-                            />
+                          <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>
-                        {type !== 'detail' && (
-                          <td>
-                            <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>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-              {type !== 'detail' && (
-                <div className='flex justify-center items-center mt-4 gap-4'>
-                  {selectedWeight.length > 0 && (
-                    <Button
-                      type='button'
-                      color='error'
-                      onClick={removeSelectedBodyWeight}
-                      disabled={selectedWeight.length === 0}
-                      className='w-fit'
-                    >
-                      <Icon
-                        icon='material-symbols:delete-outline-rounded'
-                        width={24}
-                        height={24}
-                      />
-                      Delete Selected Body Weight ({selectedWeight.length})
-                    </Button>
-                  )}
+                      )}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            {type !== 'detail' && (
+              <div className='flex justify-center items-center mt-4 gap-4'>
+                {selectedWeight.length > 0 && (
                   <Button
                     type='button'
-                    color='success'
-                    onClick={addBodyWeight}
+                    color='error'
+                    onClick={removeSelectedBodyWeight}
+                    disabled={selectedWeight.length === 0}
                     className='w-fit'
                   >
-                    <Icon icon='ic:round-plus' width={24} height={24} />
-                    Add Body Weight Data
+                    <Icon
+                      icon='material-symbols:delete-outline-rounded'
+                      width={24}
+                      height={24}
+                    />
+                    Delete Selected Body Weight ({selectedWeight.length})
                   </Button>
-                </div>
-              )}
-            </div>
-          </div>
+                )}
+                <Button
+                  type='button'
+                  color='success'
+                  onClick={addBodyWeight}
+                  className='w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Add Body Weight Data
+                </Button>
+              </div>
+            )}
+          </Card>
 
           {/* Vaccination Table */}
-          <div className='card bg-base-100 shadow mb-4'>
-            <div className='card-body'>
-              <h2 className='card-title mb-4'>Vaccination</h2>
-              <div className='overflow-x-auto'>
-                <table className='table'>
-                  <thead>
-                    <tr>
-                      {type !== 'detail' && (
-                        <th>
-                          <div className='flex justify-center'>
-                            <CheckboxInput
-                              name='select-all-vaccine'
-                              checked={
-                                formik.values.vaccination?.length ===
-                                  selectedVaccine.length &&
-                                formik.values.vaccination?.length > 0
+          <Card
+            title='Vaccination'
+            className={{
+              wrapper: 'w-full mb-4 shadow',
+              title: 'mb-4',
+            }}
+          >
+            <div className='overflow-x-auto'>
+              <table className='table'>
+                <thead>
+                  <tr>
+                    {type !== 'detail' && (
+                      <th>
+                        <div className='flex justify-center'>
+                          <CheckboxInput
+                            name='select-all-vaccine'
+                            checked={
+                              formik.values.vaccination?.length ===
+                                selectedVaccine.length &&
+                              formik.values.vaccination?.length > 0
+                            }
+                            onChange={(e) => {
+                              if (e.target.checked) {
+                                setSelectedVaccine(
+                                  formik.values.vaccination?.map(
+                                    (_, idx) => idx
+                                  ) ?? []
+                                );
+                              } else {
+                                setSelectedVaccine([]);
                               }
+                            }}
+                            naked={true}
+                            size='sm'
+                          />
+                        </div>
+                      </th>
+                    )}
+                    <th>
+                      Name Vaksin
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>Total Stock pada saat ini</th>
+                    <th>
+                      Jumlah Stock yang digunakan
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    {type !== 'detail' && <th>Action</th>}
+                  </tr>
+                </thead>
+                <tbody>
+                  {formik.values.vaccination?.map((vaccine, idx) => (
+                    <tr key={`vaccine-${idx}`}>
+                      {type !== 'detail' && (
+                        <td>
+                          <div className='flex flex-col items-center gap-2'>
+                            <CheckboxInput
+                              name={`vaccine-${idx}`}
+                              checked={selectedVaccine.includes(idx)}
                               onChange={(e) => {
                                 if (e.target.checked) {
+                                  setSelectedVaccine([...selectedVaccine, idx]);
+                                } else {
                                   setSelectedVaccine(
-                                    formik.values.vaccination?.map(
-                                      (_, idx) => idx
-                                    ) ?? []
+                                    selectedVaccine.filter((i) => i !== idx)
                                   );
-                                } else {
-                                  setSelectedVaccine([]);
                                 }
                               }}
                               naked={true}
                               size='sm'
                             />
+                            <FieldMessage message={null} isVisible={false} />
                           </div>
-                        </th>
+                        </td>
                       )}
-                      <th>
-                        Name Vaksin
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>Total Stock pada saat ini</th>
-                      <th>
-                        Jumlah Stock yang digunakan
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      {type !== 'detail' && <th>Action</th>}
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {formik.values.vaccination?.map((vaccine, idx) => (
-                      <tr key={`vaccine-${idx}`}>
-                        {type !== 'detail' && (
-                          <td>
-                            <div className='flex flex-col items-center gap-2'>
-                              <CheckboxInput
-                                name={`vaccine-${idx}`}
-                                checked={selectedVaccine.includes(idx)}
-                                onChange={(e) => {
-                                  if (e.target.checked) {
-                                    setSelectedVaccine([
-                                      ...selectedVaccine,
-                                      idx,
-                                    ]);
-                                  } else {
-                                    setSelectedVaccine(
-                                      selectedVaccine.filter((i) => i !== idx)
-                                    );
-                                  }
-                                }}
-                                naked={true}
-                                size='sm'
-                              />
-                              <FieldMessage message={null} isVisible={false} />
-                            </div>
-                          </td>
-                        )}
-                        <td>
-                          <SelectInput
-                            required
-                            value={
-                              ovkOptions.find(
-                                (opt: OptionType) =>
-                                  Number(opt.value) ===
-                                  Number(vaccine.vaccine_id)
-                              ) ?? null
-                            }
-                            onChange={(val) => {
-                              const productWarehouseId =
-                                (val as OptionType)?.value ?? 0;
-                              const stock = productWarehouseId
-                                ? (ovkStockMap.get(
-                                    productWarehouseId as number
-                                  ) ?? '')
-                                : '';
-                              formik.setFieldValue(
-                                `vaccination.${idx}.vaccine`,
-                                val
-                              );
-                              formik.setFieldValue(
-                                `vaccination.${idx}.vaccine_id`,
-                                productWarehouseId || ''
-                              );
-                              formik.setFieldValue(
-                                `vaccination.${idx}.total_stock`,
-                                stock
-                              );
-                              formik.setFieldValue(
-                                `vaccination.${idx}.used_stock`,
-                                0
-                              );
-                              // Set touched after setting values to trigger validation
-                              setTimeout(() => {
-                                formik.setFieldTouched(
-                                  `vaccination.${idx}.vaccine`,
-                                  true
-                                );
-                                formik.setFieldTouched(
-                                  `vaccination.${idx}.vaccine_id`,
-                                  true
-                                );
-                              }, 0);
-                            }}
-                            options={ovkOptions}
-                            isLoading={isLoadingOvk}
-                            isError={
-                              isRepeaterInputError(
-                                'vaccination',
-                                'vaccine_id',
-                                idx
-                              ).isError
-                            }
-                            errorMessage={
-                              isRepeaterInputError(
-                                'vaccination',
-                                'vaccine_id',
-                                idx
-                              ).errorMessage
-                            }
-                            isDisabled={type === 'detail'}
-                            isClearable
-                            className={{
-                              wrapper:
-                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            type='text'
-                            name={`vaccination.${idx}.total_stock`}
-                            value={
-                              vaccine.total_stock === '' ||
-                              vaccine.total_stock === undefined
-                                ? ''
-                                : String(vaccine.total_stock)
-                            }
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            readOnly={true}
-                            placeholder='Pilih vaksin terlebih dahulu'
-                            className={{
-                              wrapper: 'w-full min-w-24',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <NumberInput
-                            required
-                            name={`vaccination.${idx}.used_stock`}
-                            value={vaccine.used_stock}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            maskType='number'
-                            decimals={0}
-                            min={0}
-                            isError={
-                              isRepeaterInputError(
-                                'vaccination',
-                                'used_stock',
-                                idx
-                              ).isError
-                            }
-                            errorMessage={
-                              isRepeaterInputError(
-                                'vaccination',
-                                'used_stock',
-                                idx
-                              ).errorMessage
-                            }
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper: 'w-full min-w-24',
-                            }}
-                          />
-                        </td>
-                        {type !== 'detail' && (
-                          <td>
-                            <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>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-              {type !== 'detail' && (
-                <div className='flex justify-center items-center mt-4 gap-4'>
-                  {selectedVaccine.length > 0 && (
-                    <Button
-                      type='button'
-                      color='error'
-                      onClick={removeSelectedVaccination}
-                      disabled={selectedVaccine.length === 0}
-                      className='w-fit'
-                    >
-                      <Icon
-                        icon='material-symbols:delete-outline-rounded'
-                        width={24}
-                        height={24}
-                      />
-                      Delete Selected Vaccination ({selectedVaccine.length})
-                    </Button>
-                  )}
-                  <Button
-                    type='button'
-                    color='success'
-                    onClick={addVaccination}
-                    className='w-fit'
-                  >
-                    <Icon icon='ic:round-plus' width={24} height={24} />
-                    Add Vaccination Data
-                  </Button>
-                </div>
-              )}
-            </div>
-          </div>
-
-          {/* Mortality Table */}
-          <div className='card bg-base-100 shadow mb-4'>
-            <div className='card-body'>
-              <h2 className='card-title mb-4'>Mortalitas</h2>
-              <div className='overflow-x-auto'>
-                <table className='table'>
-                  <thead>
-                    <tr>
-                      {type !== 'detail' && (
-                        <th>
-                          <div className='flex justify-center'>
-                            <CheckboxInput
-                              name='select-all-mortality'
-                              checked={
-                                formik.values.mortality?.length ===
-                                  selectedMortality.length &&
-                                formik.values.mortality?.length > 0
-                              }
-                              onChange={(e) => {
-                                if (e.target.checked) {
-                                  setSelectedMortality(
-                                    formik.values.mortality?.map(
-                                      (_, idx) => idx
-                                    ) ?? []
-                                  );
-                                } else {
-                                  setSelectedMortality([]);
-                                }
-                              }}
-                              naked={true}
-                              size='sm'
-                            />
-                          </div>
-                        </th>
-                      )}
-                      <th>
-                        Kondisi/Alasan Mortalitas
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>
-                        Jumlah
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      {type !== 'detail' && <th>Action</th>}
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {formik.values.mortality?.map((mortality, idx) => (
-                      <tr key={`mortality-${idx}`}>
-                        {type !== 'detail' && (
-                          <td>
-                            <div className='flex flex-col items-center gap-2'>
-                              <CheckboxInput
-                                name={`mortality-${idx}`}
-                                checked={selectedMortality.includes(idx)}
-                                onChange={(e) => {
-                                  if (e.target.checked) {
-                                    setSelectedMortality([
-                                      ...selectedMortality,
-                                      idx,
-                                    ]);
-                                  } else {
-                                    setSelectedMortality(
-                                      selectedMortality.filter((i) => i !== idx)
-                                    );
-                                  }
-                                }}
-                                naked={true}
-                                size='sm'
-                              />
-                              <FieldMessage message={null} isVisible={false} />
-                            </div>
-                          </td>
-                        )}
-                        <td>
-                          <SelectInput
-                            required
-                            value={RECORDING_FLAG_OPTIONS.find(
-                              (opt) => opt.value === mortality.condition
-                            )}
-                            onChange={(val) => {
+                      <td>
+                        <SelectInput
+                          required
+                          value={
+                            ovkOptions.find(
+                              (opt: OptionType) =>
+                                Number(opt.value) === Number(vaccine.vaccine_id)
+                            ) ?? null
+                          }
+                          onChange={(val) => {
+                            const productWarehouseId =
+                              (val as OptionType)?.value ?? 0;
+                            const stock = productWarehouseId
+                              ? (ovkStockMap.get(
+                                  productWarehouseId as number
+                                ) ?? '')
+                              : '';
+                            formik.setFieldValue(
+                              `vaccination.${idx}.vaccine`,
+                              val
+                            );
+                            formik.setFieldValue(
+                              `vaccination.${idx}.vaccine_id`,
+                              productWarehouseId || ''
+                            );
+                            formik.setFieldValue(
+                              `vaccination.${idx}.total_stock`,
+                              stock
+                            );
+                            formik.setFieldValue(
+                              `vaccination.${idx}.used_stock`,
+                              0
+                            );
+                            // Set touched after setting values to trigger validation
+                            setTimeout(() => {
                               formik.setFieldTouched(
-                                `mortality.${idx}.condition`,
+                                `vaccination.${idx}.vaccine`,
                                 true
                               );
-                              formik.setFieldValue(
-                                `mortality.${idx}.condition`,
-                                (val as OptionType)?.value
+                              formik.setFieldTouched(
+                                `vaccination.${idx}.vaccine_id`,
+                                true
                               );
-                            }}
-                            isError={
-                              isRepeaterInputError(
-                                'mortality',
-                                'condition',
-                                idx
-                              ).isError
-                            }
-                            errorMessage={
-                              isRepeaterInputError(
-                                'mortality',
-                                'condition',
-                                idx
-                              ).errorMessage
-                            }
-                            options={RECORDING_FLAG_OPTIONS}
-                            isDisabled={type === 'detail'}
-                            isClearable
-                            className={{
-                              wrapper:
-                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                          />
-                        </td>
+                            }, 0);
+                          }}
+                          options={ovkOptions}
+                          isLoading={isLoadingOvk}
+                          isError={
+                            isRepeaterInputError(
+                              'vaccination',
+                              'vaccine_id',
+                              idx
+                            ).isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError(
+                              'vaccination',
+                              'vaccine_id',
+                              idx
+                            ).errorMessage
+                          }
+                          isDisabled={type === 'detail'}
+                          isClearable
+                          className={{
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <TextInput
+                          type='text'
+                          name={`vaccination.${idx}.total_stock`}
+                          value={
+                            vaccine.total_stock === '' ||
+                            vaccine.total_stock === undefined
+                              ? ''
+                              : String(vaccine.total_stock)
+                          }
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          readOnly={true}
+                          placeholder='Pilih vaksin terlebih dahulu'
+                          className={{
+                            wrapper: 'w-full min-w-24',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <NumberInput
+                          required
+                          name={`vaccination.${idx}.used_stock`}
+                          value={vaccine.used_stock}
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          maskType='number'
+                          decimals={0}
+                          min={0}
+                          isError={
+                            isRepeaterInputError(
+                              'vaccination',
+                              'used_stock',
+                              idx
+                            ).isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError(
+                              'vaccination',
+                              'used_stock',
+                              idx
+                            ).errorMessage
+                          }
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-24',
+                          }}
+                        />
+                      </td>
+                      {type !== 'detail' && (
                         <td>
-                          <NumberInput
-                            required
-                            name={`mortality.${idx}.count`}
-                            value={mortality.count}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            maskType='number'
-                            decimals={0}
-                            min={0}
-                            isError={
-                              isRepeaterInputError('mortality', 'count', idx)
-                                .isError
-                            }
-                            errorMessage={
-                              isRepeaterInputError('mortality', 'count', idx)
-                                .errorMessage
-                            }
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper: 'w-full min-w-24',
-                            }}
-                          />
+                          <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>
-                        {type !== 'detail' && (
-                          <td>
-                            <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>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-              {type !== 'detail' && (
-                <div className='flex justify-center items-center mt-4 gap-4'>
-                  {selectedMortality.length > 0 && (
-                    <Button
-                      type='button'
-                      color='error'
-                      onClick={removeSelectedMortality}
-                      disabled={selectedMortality.length === 0}
-                      className='w-fit'
-                    >
-                      <Icon
-                        icon='material-symbols:delete-outline-rounded'
-                        width={24}
-                        height={24}
-                      />
-                      Delete Selected Mortality ({selectedMortality.length})
-                    </Button>
-                  )}
+                      )}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            {type !== 'detail' && (
+              <div className='flex justify-center items-center mt-4 gap-4'>
+                {selectedVaccine.length > 0 && (
                   <Button
                     type='button'
-                    color='success'
-                    onClick={addMortality}
+                    color='error'
+                    onClick={removeSelectedVaccination}
+                    disabled={selectedVaccine.length === 0}
                     className='w-fit'
                   >
-                    <Icon icon='ic:round-plus' width={24} height={24} />
-                    Add Mortality Data
+                    <Icon
+                      icon='material-symbols:delete-outline-rounded'
+                      width={24}
+                      height={24}
+                    />
+                    Delete Selected Vaccination ({selectedVaccine.length})
                   </Button>
-                </div>
-              )}
+                )}
+                <Button
+                  type='button'
+                  color='success'
+                  onClick={addVaccination}
+                  className='w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Add Vaccination Data
+                </Button>
+              </div>
+            )}
+          </Card>
+
+          {/* Mortality Table */}
+          <Card
+            title='Mortalitas'
+            className={{
+              wrapper: 'w-full mb-4 shadow',
+              title: 'mb-4',
+            }}
+          >
+            <div className='overflow-x-auto'>
+              <table className='table'>
+                <thead>
+                  <tr>
+                    {type !== 'detail' && (
+                      <th>
+                        <div className='flex justify-center'>
+                          <CheckboxInput
+                            name='select-all-mortality'
+                            checked={
+                              formik.values.mortality?.length ===
+                                selectedMortality.length &&
+                              formik.values.mortality?.length > 0
+                            }
+                            onChange={(e) => {
+                              if (e.target.checked) {
+                                setSelectedMortality(
+                                  formik.values.mortality?.map(
+                                    (_, idx) => idx
+                                  ) ?? []
+                                );
+                              } else {
+                                setSelectedMortality([]);
+                              }
+                            }}
+                            naked={true}
+                            size='sm'
+                          />
+                        </div>
+                      </th>
+                    )}
+                    <th>
+                      Kondisi/Alasan Mortalitas
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Jumlah
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    {type !== 'detail' && <th>Action</th>}
+                  </tr>
+                </thead>
+                <tbody>
+                  {formik.values.mortality?.map((mortality, idx) => (
+                    <tr key={`mortality-${idx}`}>
+                      {type !== 'detail' && (
+                        <td>
+                          <div className='flex flex-col items-center gap-2'>
+                            <CheckboxInput
+                              name={`mortality-${idx}`}
+                              checked={selectedMortality.includes(idx)}
+                              onChange={(e) => {
+                                if (e.target.checked) {
+                                  setSelectedMortality([
+                                    ...selectedMortality,
+                                    idx,
+                                  ]);
+                                } else {
+                                  setSelectedMortality(
+                                    selectedMortality.filter((i) => i !== idx)
+                                  );
+                                }
+                              }}
+                              naked={true}
+                              size='sm'
+                            />
+                            <FieldMessage message={null} isVisible={false} />
+                          </div>
+                        </td>
+                      )}
+                      <td>
+                        <SelectInput
+                          required
+                          value={RECORDING_FLAG_OPTIONS.find(
+                            (opt) => opt.value === mortality.condition
+                          )}
+                          onChange={(val) => {
+                            formik.setFieldTouched(
+                              `mortality.${idx}.condition`,
+                              true
+                            );
+                            formik.setFieldValue(
+                              `mortality.${idx}.condition`,
+                              (val as OptionType)?.value
+                            );
+                          }}
+                          isError={
+                            isRepeaterInputError('mortality', 'condition', idx)
+                              .isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError('mortality', 'condition', idx)
+                              .errorMessage
+                          }
+                          options={RECORDING_FLAG_OPTIONS}
+                          isDisabled={type === 'detail'}
+                          isClearable
+                          className={{
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <NumberInput
+                          required
+                          name={`mortality.${idx}.count`}
+                          value={mortality.count}
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          maskType='number'
+                          decimals={0}
+                          min={0}
+                          isError={
+                            isRepeaterInputError('mortality', 'count', idx)
+                              .isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError('mortality', 'count', idx)
+                              .errorMessage
+                          }
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-24',
+                          }}
+                        />
+                      </td>
+                      {type !== 'detail' && (
+                        <td>
+                          <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>
+                  ))}
+                </tbody>
+              </table>
             </div>
-          </div>
+            {type !== 'detail' && (
+              <div className='flex justify-center items-center mt-4 gap-4'>
+                {selectedMortality.length > 0 && (
+                  <Button
+                    type='button'
+                    color='error'
+                    onClick={removeSelectedMortality}
+                    disabled={selectedMortality.length === 0}
+                    className='w-fit'
+                  >
+                    <Icon
+                      icon='material-symbols:delete-outline-rounded'
+                      width={24}
+                      height={24}
+                    />
+                    Delete Selected Mortality ({selectedMortality.length})
+                  </Button>
+                )}
+                <Button
+                  type='button'
+                  color='success'
+                  onClick={addMortality}
+                  className='w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Add Mortality Data
+                </Button>
+              </div>
+            )}
+          </Card>
 
           {/* Action buttons */}
           <FormActions<RecordingFormValues>