From 27d2792a9c57bb701d4eb470c8b6ecf46fb309da Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 16 Oct 2025 09:24:00 +0700
Subject: [PATCH] refactor(FE-114): enhance layout and structure of
 RecordingForm component

---
 .../flock/recording/form/RecordingForm.tsx    | 240 +++++++++---------
 1 file changed, 122 insertions(+), 118 deletions(-)

diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index d8656b2b..a133e437 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/src/components/pages/flock/recording/form/RecordingForm.tsx
@@ -346,125 +346,129 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
         >
           {/* Basic Info Card */}
           <div className='card bg-base-100 shadow mb-4'>
-            <div className='card-body'>
-              <div className='flex gap-4'>
-                {/*<SelectInput*/}
-                {/*  required*/}
-                {/*  label='Flock'*/}
-                {/*  value={*/}
-                {/*    formik.values.flock_id*/}
-                {/*      ? {*/}
-                {/*          value: formik.values.flock_id,*/}
-                {/*          label: initialValues?.flock?.name,*/}
-                {/*        }*/}
-                {/*      : null*/}
-                {/*  }*/}
-                {/*  onChange={(val) => {*/}
-                {/*    formik.setFieldValue(*/}
-                {/*      'flock_id',*/}
-                {/*      (val as OptionType)?.value*/}
-                {/*    );*/}
-                {/*  }}*/}
-                {/*  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'}*/}
-                {/*  isClearable*/}
-                {/*/>*/}
-                <SelectInput
-                  required
-                  label='Flock'
-                  value={formik.values.flock ?? undefined}
-                  onChange={(val) => {
-                    formik.setFieldValue('flock', val);
-                    formik.setFieldValue(
-                      'flock_id',
-                      (val as OptionType)?.value
-                    );
-                  }}
-                  options={flockOptions}
-                  onInputChange={(val) => {
-                    return val;
-                  }}
-                  isLoading={false}
-                  isError={
-                    formik.touched.flock_id && Boolean(formik.errors.flock_id)
-                  }
-                  errorMessage={formik.errors.flock_id as string}
-                  isDisabled={type === 'detail'}
-                  isClearable
-                />
-                <TextInput
-                  required
-                  label='Tanggal Recording'
-                  type='date'
-                  name='tanggal_recording'
-                  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)
-                      : new Date();
-                    formik.setFieldValue('tanggal_recording', date);
-                  }}
-                  onBlur={formik.handleBlur}
-                  isError={
-                    formik.touched.recording_date &&
-                    Boolean(formik.errors.recording_date)
-                  }
-                  errorMessage={formik.errors.recording_date as string}
-                  readOnly={type === 'detail'}
-                />
-              </div>
-              <div className='flex gap-4'>
-                <SelectInput
-                  required
-                  label='Lokasi'
-                  value={formik.values.location ?? undefined}
-                  onChange={locationChangeHandler}
-                  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
-                />
+            <div className='card-body flex flex-col gap-6'>
+              <h2 className='card-title'>Flock</h2>
 
-                <SelectInput
-                  key={`coop-select-${formik.values.location_id || 'no-location'}`}
-                  required
-                  label='Kandang'
-                  value={formik.values.coop ?? undefined}
-                  onChange={coopChangeHandler}
-                  options={coopOptions}
-                  onInputChange={setCoopSelectInputValue}
-                  isLoading={isLoadingCoops}
-                  isError={
-                    formik.touched.coop_id && Boolean(formik.errors.coop_id)
-                  }
-                  errorMessage={formik.errors.coop_id as string}
-                  isDisabled={type === 'detail' || !formik.values.location_id}
-                  isClearable
-                  placeholder={
-                    !formik.values.location_id
-                      ? 'Pilih lokasi terlebih dahulu'
-                      : 'Pilih Kandang'
-                  }
-                />
-              </div>{' '}
+              <div className='flex flex-col gap-6'>
+                <div className='flex gap-4'>
+                  {/*<SelectInput*/}
+                  {/*  required*/}
+                  {/*  label='Flock'*/}
+                  {/*  value={*/}
+                  {/*    formik.values.flock_id*/}
+                  {/*      ? {*/}
+                  {/*          value: formik.values.flock_id,*/}
+                  {/*          label: initialValues?.flock?.name,*/}
+                  {/*        }*/}
+                  {/*      : null*/}
+                  {/*  }*/}
+                  {/*  onChange={(val) => {*/}
+                  {/*    formik.setFieldValue(*/}
+                  {/*      'flock_id',*/}
+                  {/*      (val as OptionType)?.value*/}
+                  {/*    );*/}
+                  {/*  }}*/}
+                  {/*  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'}*/}
+                  {/*  isClearable*/}
+                  {/*/>*/}
+                  <SelectInput
+                    required
+                    label='Flock'
+                    value={formik.values.flock ?? undefined}
+                    onChange={(val) => {
+                      formik.setFieldValue('flock', val);
+                      formik.setFieldValue(
+                        'flock_id',
+                        (val as OptionType)?.value
+                      );
+                    }}
+                    options={flockOptions}
+                    onInputChange={(val) => {
+                      return val;
+                    }}
+                    isLoading={false}
+                    isError={
+                      formik.touched.flock_id && Boolean(formik.errors.flock_id)
+                    }
+                    errorMessage={formik.errors.flock_id as string}
+                    isDisabled={type === 'detail'}
+                    isClearable
+                  />
+                  <TextInput
+                    required
+                    label='Tanggal Recording'
+                    type='date'
+                    name='tanggal_recording'
+                    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)
+                        : new Date();
+                      formik.setFieldValue('tanggal_recording', date);
+                    }}
+                    onBlur={formik.handleBlur}
+                    isError={
+                      formik.touched.recording_date &&
+                      Boolean(formik.errors.recording_date)
+                    }
+                    errorMessage={formik.errors.recording_date as string}
+                    readOnly={type === 'detail'}
+                  />
+                </div>
+                <div className='flex gap-4'>
+                  <SelectInput
+                    required
+                    label='Lokasi'
+                    value={formik.values.location ?? undefined}
+                    onChange={locationChangeHandler}
+                    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
+                  />
+
+                  <SelectInput
+                    key={`coop-select-${formik.values.location_id || 'no-location'}`}
+                    required
+                    label='Kandang'
+                    value={formik.values.coop ?? undefined}
+                    onChange={coopChangeHandler}
+                    options={coopOptions}
+                    onInputChange={setCoopSelectInputValue}
+                    isLoading={isLoadingCoops}
+                    isError={
+                      formik.touched.coop_id && Boolean(formik.errors.coop_id)
+                    }
+                    errorMessage={formik.errors.coop_id as string}
+                    isDisabled={type === 'detail' || !formik.values.location_id}
+                    isClearable
+                    placeholder={
+                      !formik.values.location_id
+                        ? 'Pilih lokasi terlebih dahulu'
+                        : 'Pilih Kandang'
+                    }
+                  />
+                </div>
+              </div>
             </div>
           </div>