refactor(FE): Refactor InventoryAdjustmentForm layout for better

responsiveness

src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx

@@ -550,77 +550,80 @@ const InventoryAdjustmentForm = ({
         <form
           onSubmit={handleFormSubmit}
           onReset={formik.handleReset}
-          className='w-full mt-8 flex flex-col gap-6'
+          className='mt-4'
         >
-          <div className='flex flex-col gap-4'>
-            {/* Select Input Location */}
-            <SelectInput
-              required
-              label='Lokasi'
-              value={selectedLocation}
-              onChange={locationChangeHandler}
-              onInputChange={setLocationInputValue}
-              options={locationOptions}
-              onMenuScrollToBottom={loadMoreLocations}
-              isLoading={isLoadingLocationOptions}
-              isError={
-                formik.touched.location_id && Boolean(formik.errors.location_id)
-              }
-              errorMessage={formik.errors.location_id as string}
-              isDisabled={type === 'detail'}
-              placeholder='Pilih Lokasi'
-              isClearable
-              isSearchable
-            />
+          <div className=''>
+            <div className='grid sm:grid-cols-3 grid-cols-1 sm:gap-4'>
+              {/* Select Input Location */}
+              <SelectInput
+                required
+                label='Lokasi'
+                value={selectedLocation}
+                onChange={locationChangeHandler}
+                onInputChange={setLocationInputValue}
+                options={locationOptions}
+                onMenuScrollToBottom={loadMoreLocations}
+                isLoading={isLoadingLocationOptions}
+                isError={
+                  formik.touched.location_id &&
+                  Boolean(formik.errors.location_id)
+                }
+                errorMessage={formik.errors.location_id as string}
+                isDisabled={type === 'detail'}
+                placeholder='Pilih Lokasi'
+                isClearable
+                isSearchable
+              />
 
-            {/* Select Input Project Flock */}
-            <SelectInput
-              required
-              label='Project Flock'
-              value={selectedProjectFlock}
-              onChange={projectFlockChangeHandler}
-              onInputChange={setProjectFlockInputValue}
-              options={projectFlockOptions}
-              onMenuScrollToBottom={loadMoreProjectFlocks}
-              isLoading={isLoadingProjectFlockOptions}
-              isError={
-                formik.touched.project_flock_id &&
-                Boolean(formik.errors.project_flock_id)
-              }
-              errorMessage={formik.errors.project_flock_id as string}
-              isDisabled={type === 'detail' || !selectedLocation}
-              placeholder={
-                selectedLocation
-                  ? 'Pilih Project Flock'
-                  : 'Pilih Lokasi terlebih dahulu'
-              }
-              isClearable
-              isSearchable
-            />
+              {/* Select Input Project Flock */}
+              <SelectInput
+                required
+                label='Project Flock'
+                value={selectedProjectFlock}
+                onChange={projectFlockChangeHandler}
+                onInputChange={setProjectFlockInputValue}
+                options={projectFlockOptions}
+                onMenuScrollToBottom={loadMoreProjectFlocks}
+                isLoading={isLoadingProjectFlockOptions}
+                isError={
+                  formik.touched.project_flock_id &&
+                  Boolean(formik.errors.project_flock_id)
+                }
+                errorMessage={formik.errors.project_flock_id as string}
+                isDisabled={type === 'detail' || !selectedLocation}
+                placeholder={
+                  selectedLocation
+                    ? 'Pilih Project Flock'
+                    : 'Pilih Lokasi terlebih dahulu'
+                }
+                isClearable
+                isSearchable
+              />
 
-            {/* Select Input Kandang */}
-            <SelectInput
-              required
-              label='Kandang'
-              value={selectedKandang}
-              onChange={kandangChangeHandler}
-              onInputChange={setKandangInputValue}
-              options={kandangOptions}
-              onMenuScrollToBottom={loadMoreKandangs}
-              isLoading={isLoadingKandangOptions}
-              isError={
-                formik.touched.kandang_id && Boolean(formik.errors.kandang_id)
-              }
-              errorMessage={formik.errors.kandang_id as string}
-              isDisabled={type === 'detail' || !selectedProjectFlock}
-              placeholder={
-                selectedProjectFlock
-                  ? 'Pilih Kandang'
-                  : 'Pilih Project Flock terlebih dahulu'
-              }
-              isClearable
-              isSearchable
-            />
+              {/* Select Input Kandang */}
+              <SelectInput
+                required
+                label='Kandang'
+                value={selectedKandang}
+                onChange={kandangChangeHandler}
+                onInputChange={setKandangInputValue}
+                options={kandangOptions}
+                onMenuScrollToBottom={loadMoreKandangs}
+                isLoading={isLoadingKandangOptions}
+                isError={
+                  formik.touched.kandang_id && Boolean(formik.errors.kandang_id)
+                }
+                errorMessage={formik.errors.kandang_id as string}
+                isDisabled={type === 'detail' || !selectedProjectFlock}
+                placeholder={
+                  selectedProjectFlock
+                    ? 'Pilih Kandang'
+                    : 'Pilih Project Flock terlebih dahulu'
+                }
+                isClearable
+                isSearchable
+              />
+            </div>
 
             {/* Select Input Product */}
             <SelectInput
@@ -667,7 +670,7 @@ const InventoryAdjustmentForm = ({
             {/* Select Input Transaction Subtype */}
             <SelectInput
               required
-              label='Sub Tipe Transaksi'
+              label='Jenis Transaksi'
               value={selectedTransactionSubtype}
               onChange={transactionSubtypeChangeHandler}
               options={transactionSubtypeOptions}
@@ -719,6 +722,7 @@ const InventoryAdjustmentForm = ({
               isError={formik.touched.price && Boolean(formik.errors.price)}
               errorMessage={formik.errors.price as string}
               readOnly={type === 'detail'}
+              inputPrefix={'Rp'}
             />
 
             {/* Text Area Input Notes */}
@@ -735,13 +739,13 @@ const InventoryAdjustmentForm = ({
             />
           </div>
           <AlertErrorList formErrorList={formErrorList} onClose={close} />
-          <div className='flex flex-row justify-between gap-2 flex-wrap'>
+          <div className='flex flex-col sm:flex-row sm:justify-end gap-2 mt-4'>
             {type !== 'detail' && (
-              <div className='flex flex-row justify-end gap-2'>
+              <>
                 <Button
                   type='button'
                   color='warning'
-                  className='px-4'
+                  className='px-4 w-full sm:w-auto'
                   onClick={resetHandler}
                 >
                   Reset
@@ -751,11 +755,11 @@ const InventoryAdjustmentForm = ({
                   color='primary'
                   isLoading={formik.isSubmitting}
                   disabled={formik.isSubmitting}
-                  className='px-4'
+                  className='px-4 w-full sm:w-auto'
                 >
                   Submit
                 </Button>
-              </div>
+              </>
             )}
           </div>
           {InventoryAdjustmentFormErrorMessage && (