From 1d79e8de1de43b38b81c25deeeed908a50d71427 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 3 Nov 2025 10:45:36 +0700
Subject: [PATCH] refactor(FE-Storyless): streamline RecordingForm component by
 native card and optimizing layout for better usability

---
 .../inventory/movement/form/MovementForm.tsx  | 1566 ++++++++---------
 1 file changed, 776 insertions(+), 790 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 28148706..438c09c6 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -32,6 +32,7 @@ import { MovementApi } from '@/services/api/inventory';
 import FileInput from '@/components/input/FileInput';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import Badge from '@/components/Badge';
+import Card from '@/components/Card';
 
 interface MovementFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -768,216 +769,270 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           className='w-full mt-8 flex flex-col gap-6'
         >
           {/* Top card - Movement details */}
-          <div className='card bg-base-100 shadow mb-4'>
-            <div className='card-body'>
-              <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
-                <TextInput
-                  required
-                  label='Alasan Transfer'
-                  name='transfer_reason'
-                  placeholder='Masukkan alasan transfer...'
-                  value={formik.values.transfer_reason}
-                  onChange={formik.handleChange}
-                  onBlur={formik.handleBlur}
-                  isError={
-                    formik.touched.transfer_reason &&
-                    Boolean(formik.errors.transfer_reason)
-                  }
-                  errorMessage={formik.errors.transfer_reason}
-                  readOnly={type === 'detail'}
-                />
-                <TextInput
-                  required
-                  label='Tanggal Transfer'
-                  type='date'
-                  name='transfer_date'
-                  value={formik.values.transfer_date}
-                  onChange={formik.handleChange}
-                  onBlur={formik.handleBlur}
-                  isError={
-                    formik.touched.transfer_date &&
-                    Boolean(formik.errors.transfer_date)
-                  }
-                  errorMessage={formik.errors.transfer_date}
-                  readOnly={type === 'detail'}
-                />
-              </div>
+          <Card
+            title='Detail Movement'
+            className={{
+              wrapper: 'w-full mb-4 shadow',
+              body: 'flex flex-col gap-6',
+            }}
+          >
+            <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
+              <TextInput
+                required
+                label='Alasan Transfer'
+                name='transfer_reason'
+                placeholder='Masukkan alasan transfer...'
+                value={formik.values.transfer_reason}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                isError={
+                  formik.touched.transfer_reason &&
+                  Boolean(formik.errors.transfer_reason)
+                }
+                errorMessage={formik.errors.transfer_reason}
+                readOnly={type === 'detail'}
+              />
+              <TextInput
+                required
+                label='Tanggal Transfer'
+                type='date'
+                name='transfer_date'
+                value={formik.values.transfer_date}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                isError={
+                  formik.touched.transfer_date &&
+                  Boolean(formik.errors.transfer_date)
+                }
+                errorMessage={formik.errors.transfer_date}
+                readOnly={type === 'detail'}
+              />
             </div>
-          </div>
+          </Card>
 
           {/* Warehouse cards */}
           <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mb-4'>
-            <div className='card bg-base-100 shadow'>
-              <div className='card-body space-y-4'>
-                <h3 className='card-title text-lg'>Gudang Asal</h3>
-                <SelectInput
-                  required
-                  label='Gudang'
-                  placeholder='Pilih gudang asal...'
-                  value={formik.values.source_warehouse}
-                  onChange={(val) => {
-                    formik.setFieldTouched('source_warehouse', true);
-                    formik.setFieldValue('source_warehouse', val);
-                    formik.setFieldTouched('source_warehouse_id', true);
-                    formik.setFieldValue(
-                      'source_warehouse_id',
-                      (val as WarehouseOptionType)?.value
-                    );
+            <Card
+              title='Gudang Asal'
+              className={{
+                wrapper: 'w-full shadow',
+                body: 'space-y-4',
+              }}
+            >
+              <SelectInput
+                required
+                label='Gudang'
+                placeholder='Pilih gudang asal...'
+                value={formik.values.source_warehouse}
+                onChange={(val) => {
+                  formik.setFieldTouched('source_warehouse', true);
+                  formik.setFieldValue('source_warehouse', val);
+                  formik.setFieldTouched('source_warehouse_id', true);
+                  formik.setFieldValue(
+                    'source_warehouse_id',
+                    (val as WarehouseOptionType)?.value
+                  );
+                }}
+                options={warehouseOptions}
+                onInputChange={setWarehouseSelectInputValue}
+                isLoading={isLoadingWarehouses}
+                isError={
+                  formik.touched.source_warehouse_id &&
+                  Boolean(formik.errors.source_warehouse_id)
+                }
+                errorMessage={formik.errors.source_warehouse_id as string}
+                isDisabled={type === 'detail'}
+                isClearable
+                startAdornment={
+                  formik.values.source_warehouse_id
+                    ? getWarehouseStockAdornment(
+                        formik.values.source_warehouse_id
+                      )
+                    : undefined
+                }
+              />
+
+              {/* Area and Location Info */}
+              <div className='space-y-4'>
+                <TextInput
+                  label='Area'
+                  name='source_warehouse_area'
+                  value={
+                    (formik.values.source_warehouse as WarehouseOptionType)
+                      ?.area || '-'
+                  }
+                  readOnly
+                  disabled
+                  className={{
+                    input: 'bg-base-200',
                   }}
-                  options={warehouseOptions}
-                  onInputChange={setWarehouseSelectInputValue}
-                  isLoading={isLoadingWarehouses}
-                  isError={
-                    formik.touched.source_warehouse_id &&
-                    Boolean(formik.errors.source_warehouse_id)
-                  }
-                  errorMessage={formik.errors.source_warehouse_id as string}
-                  isDisabled={type === 'detail'}
-                  isClearable
-                  startAdornment={
-                    formik.values.source_warehouse_id
-                      ? getWarehouseStockAdornment(
-                          formik.values.source_warehouse_id
-                        )
-                      : undefined
-                  }
                 />
-
-                {/* Area and Location Info */}
-                <div className='space-y-4'>
-                  <TextInput
-                    label='Area'
-                    name='source_warehouse_area'
-                    value={
-                      (formik.values.source_warehouse as WarehouseOptionType)
-                        ?.area || '-'
-                    }
-                    readOnly
-                    disabled
-                    className={{
-                      input: 'bg-base-200',
-                    }}
-                  />
-                  <TextInput
-                    label='Lokasi'
-                    name='source_warehouse_location'
-                    value={
-                      (formik.values.source_warehouse as WarehouseOptionType)
-                        ?.location || '-'
-                    }
-                    readOnly
-                    disabled
-                    className={{
-                      input: 'bg-base-200',
-                    }}
-                  />
-                </div>
-              </div>
-            </div>
-
-            <div className='card bg-base-100 shadow'>
-              <div className='card-body space-y-4'>
-                <h3 className='card-title text-lg'>Gudang Tujuan</h3>
-                <SelectInput
-                  required
-                  label='Gudang'
-                  placeholder='Pilih gudang tujuan...'
-                  value={formik.values.destination_warehouse}
-                  onChange={(val) => {
-                    formik.setFieldTouched('destination_warehouse', true);
-                    formik.setFieldValue('destination_warehouse', val);
-                    formik.setFieldTouched('destination_warehouse_id', true);
-                    formik.setFieldValue(
-                      'destination_warehouse_id',
-                      (val as WarehouseOptionType)?.value
-                    );
+                <TextInput
+                  label='Lokasi'
+                  name='source_warehouse_location'
+                  value={
+                    (formik.values.source_warehouse as WarehouseOptionType)
+                      ?.location || '-'
+                  }
+                  readOnly
+                  disabled
+                  className={{
+                    input: 'bg-base-200',
                   }}
-                  options={warehouseOptions}
-                  onInputChange={setWarehouseSelectInputValue}
-                  isLoading={isLoadingWarehouses}
-                  isError={
-                    formik.touched.destination_warehouse_id &&
-                    Boolean(formik.errors.destination_warehouse_id)
-                  }
-                  errorMessage={
-                    formik.errors.destination_warehouse_id as string
-                  }
-                  isDisabled={type === 'detail'}
-                  isClearable
-                  startAdornment={
-                    formik.values.destination_warehouse_id
-                      ? getWarehouseStockAdornment(
-                          formik.values.destination_warehouse_id
-                        )
-                      : undefined
-                  }
                 />
-
-                {/* Area and Location Info */}
-                <div className='space-y-4'>
-                  <TextInput
-                    label='Area'
-                    name='destination_warehouse_area'
-                    value={
-                      (
-                        formik.values
-                          .destination_warehouse as WarehouseOptionType
-                      )?.area || '-'
-                    }
-                    readOnly
-                    disabled
-                    className={{
-                      input: 'bg-base-200',
-                    }}
-                  />
-                  <TextInput
-                    label='Lokasi'
-                    name='destination_warehouse_location'
-                    value={
-                      (
-                        formik.values
-                          .destination_warehouse as WarehouseOptionType
-                      )?.location || '-'
-                    }
-                    readOnly
-                    disabled
-                    className={{
-                      input: 'bg-base-200',
-                    }}
-                  />
-                </div>
               </div>
-            </div>
+            </Card>
+
+            <Card
+              title='Gudang Tujuan'
+              className={{
+                wrapper: 'w-full shadow',
+                body: 'space-y-4',
+              }}
+            >
+              <SelectInput
+                required
+                label='Gudang'
+                placeholder='Pilih gudang tujuan...'
+                value={formik.values.destination_warehouse}
+                onChange={(val) => {
+                  formik.setFieldTouched('destination_warehouse', true);
+                  formik.setFieldValue('destination_warehouse', val);
+                  formik.setFieldTouched('destination_warehouse_id', true);
+                  formik.setFieldValue(
+                    'destination_warehouse_id',
+                    (val as WarehouseOptionType)?.value
+                  );
+                }}
+                options={warehouseOptions}
+                onInputChange={setWarehouseSelectInputValue}
+                isLoading={isLoadingWarehouses}
+                isError={
+                  formik.touched.destination_warehouse_id &&
+                  Boolean(formik.errors.destination_warehouse_id)
+                }
+                errorMessage={formik.errors.destination_warehouse_id as string}
+                isDisabled={type === 'detail'}
+                isClearable
+                startAdornment={
+                  formik.values.destination_warehouse_id
+                    ? getWarehouseStockAdornment(
+                        formik.values.destination_warehouse_id
+                      )
+                    : undefined
+                }
+              />
+
+              {/* Area and Location Info */}
+              <div className='space-y-4'>
+                <TextInput
+                  label='Area'
+                  name='destination_warehouse_area'
+                  value={
+                    (formik.values.destination_warehouse as WarehouseOptionType)
+                      ?.area || '-'
+                  }
+                  readOnly
+                  disabled
+                  className={{
+                    input: 'bg-base-200',
+                  }}
+                />
+                <TextInput
+                  label='Lokasi'
+                  name='destination_warehouse_location'
+                  value={
+                    (formik.values.destination_warehouse as WarehouseOptionType)
+                      ?.location || '-'
+                  }
+                  readOnly
+                  disabled
+                  className={{
+                    input: 'bg-base-200',
+                  }}
+                />
+              </div>
+            </Card>
           </div>
 
           {/* Products table */}
-          <div className='card bg-base-100 shadow mb-4'>
-            <div className='card-body'>
-              <h2 className='card-title mb-4'>Produk</h2>
-              <div className='overflow-x-auto'>
-                <table className='table'>
-                  <thead>
-                    <tr>
-                      {type !== 'detail' && (
-                        <th>
-                          <CheckboxInput
-                            name='select-all-products'
-                            checked={
-                              formik.values.products?.length ===
-                                selectedProducts.length &&
-                              formik.values.products?.length > 0
+          <Card
+            title='Produk'
+            className={{
+              wrapper: 'w-full mb-4 shadow',
+              title: 'mb-4',
+            }}
+          >
+            <div className='overflow-x-auto'>
+              <table className='table'>
+                <thead>
+                  <tr>
+                    {type !== 'detail' && (
+                      <th>
+                        <CheckboxInput
+                          name='select-all-products'
+                          checked={
+                            formik.values.products?.length ===
+                              selectedProducts.length &&
+                            formik.values.products?.length > 0
+                          }
+                          onChange={(
+                            e: React.ChangeEvent<HTMLInputElement>
+                          ) => {
+                            if (e.target.checked) {
+                              setSelectedProducts(
+                                formik.values.products?.map((_, idx) => idx) ??
+                                  []
+                              );
+                            } else {
+                              setSelectedProducts([]);
                             }
+                          }}
+                          classNames={{
+                            wrapper: 'flex justify-center',
+                            checkbox: 'checkbox checkbox-sm',
+                          }}
+                        />
+                      </th>
+                    )}
+                    <th>
+                      Produk
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Qty
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    {type !== 'detail' && <th>Aksi</th>}
+                  </tr>
+                </thead>
+                <tbody>
+                  {formik.values.products?.map((product, idx) => (
+                    <tr key={`product-row-${idx}-${product.product_id}`}>
+                      {type !== 'detail' && (
+                        <td className='!align-middle'>
+                          <CheckboxInput
+                            name={`product-${idx}`}
+                            checked={selectedProducts.includes(idx)}
                             onChange={(
                               e: React.ChangeEvent<HTMLInputElement>
                             ) => {
                               if (e.target.checked) {
-                                setSelectedProducts(
-                                  formik.values.products?.map(
-                                    (_, idx) => idx
-                                  ) ?? []
-                                );
+                                setSelectedProducts([...selectedProducts, idx]);
                               } else {
-                                setSelectedProducts([]);
+                                setSelectedProducts(
+                                  selectedProducts.filter((i) => i !== idx)
+                                );
                               }
                             }}
                             classNames={{
@@ -985,221 +1040,262 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                               checkbox: 'checkbox checkbox-sm',
                             }}
                           />
-                        </th>
+                        </td>
+                      )}
+                      <td>
+                        <SelectInput
+                          required
+                          value={product.product ?? undefined}
+                          onChange={(val) => {
+                            formik.setFieldTouched(
+                              `products.${idx}.product`,
+                              true
+                            );
+                            formik.setFieldValue(
+                              `products.${idx}.product`,
+                              val
+                            );
+                            formik.setFieldTouched(
+                              `products.${idx}.product_id`,
+                              true
+                            );
+                            formik.setFieldValue(
+                              `products.${idx}.product_id`,
+                              (val as ProductWarehouseOptionType)?.value
+                            );
+                          }}
+                          options={productWarehouseOptions}
+                          onInputChange={setProductWarehouseSelectInputValue}
+                          isLoading={isLoadingProductWarehouses}
+                          isDisabled={
+                            type === 'detail' ||
+                            !formik.values.source_warehouse_id
+                          }
+                          placeholder={
+                            !formik.values.source_warehouse_id
+                              ? 'Pilih gudang asal terlebih dahulu...'
+                              : 'Pilih produk...'
+                          }
+                          isClearable
+                          {...isRepeaterInputError(
+                            'products',
+                            'product_id',
+                            idx
+                          )}
+                          className={{
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <NumberInput
+                          required
+                          name={`products.${idx}.product_qty`}
+                          placeholder='Masukkan kuantitas...'
+                          value={product.product_qty ?? ''}
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          decimalScale={0}
+                          allowNegative={false}
+                          thousandSeparator=','
+                          decimalSeparator='.'
+                          bottomLabel={getProductQtyBottomLabel(idx)}
+                          isError={
+                            isRepeaterInputError('products', 'product_qty', idx)
+                              .isError || Boolean(getProductQtyError(idx))
+                          }
+                          errorMessage={
+                            isRepeaterInputError('products', 'product_qty', idx)
+                              .errorMessage ||
+                            getProductQtyError(idx) ||
+                            undefined
+                          }
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      {type !== 'detail' && (
+                        <td>
+                          <div className='flex flex-col items-start gap-2'>
+                            <Button
+                              type='button'
+                              color='error'
+                              onClick={() => removeProduct(idx)}
+                            >
+                              <Icon
+                                icon='material-symbols:delete-outline-rounded'
+                                width={24}
+                                height={24}
+                              />
+                            </Button>
+                          </div>
+                        </td>
                       )}
-                      <th>
-                        Produk
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>
-                        Qty
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      {type !== 'detail' && <th>Aksi</th>}
                     </tr>
-                  </thead>
-                  <tbody>
-                    {formik.values.products?.map((product, idx) => (
-                      <tr key={`product-row-${idx}-${product.product_id}`}>
-                        {type !== 'detail' && (
-                          <td className='!align-middle'>
-                            <CheckboxInput
-                              name={`product-${idx}`}
-                              checked={selectedProducts.includes(idx)}
-                              onChange={(
-                                e: React.ChangeEvent<HTMLInputElement>
-                              ) => {
-                                if (e.target.checked) {
-                                  setSelectedProducts([
-                                    ...selectedProducts,
-                                    idx,
-                                  ]);
-                                } else {
-                                  setSelectedProducts(
-                                    selectedProducts.filter((i) => i !== idx)
-                                  );
-                                }
-                              }}
-                              classNames={{
-                                wrapper: 'flex justify-center',
-                                checkbox: 'checkbox checkbox-sm',
-                              }}
-                            />
-                          </td>
-                        )}
-                        <td>
-                          <SelectInput
-                            required
-                            value={product.product ?? undefined}
-                            onChange={(val) => {
-                              formik.setFieldTouched(
-                                `products.${idx}.product`,
-                                true
-                              );
-                              formik.setFieldValue(
-                                `products.${idx}.product`,
-                                val
-                              );
-                              formik.setFieldTouched(
-                                `products.${idx}.product_id`,
-                                true
-                              );
-                              formik.setFieldValue(
-                                `products.${idx}.product_id`,
-                                (val as ProductWarehouseOptionType)?.value
-                              );
-                            }}
-                            options={productWarehouseOptions}
-                            onInputChange={setProductWarehouseSelectInputValue}
-                            isLoading={isLoadingProductWarehouses}
-                            isDisabled={
-                              type === 'detail' ||
-                              !formik.values.source_warehouse_id
-                            }
-                            placeholder={
-                              !formik.values.source_warehouse_id
-                                ? 'Pilih gudang asal terlebih dahulu...'
-                                : 'Pilih produk...'
-                            }
-                            isClearable
-                            {...isRepeaterInputError(
-                              'products',
-                              'product_id',
-                              idx
-                            )}
-                            className={{
-                              wrapper:
-                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <NumberInput
-                            required
-                            name={`products.${idx}.product_qty`}
-                            placeholder='Masukkan kuantitas...'
-                            value={product.product_qty ?? ''}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            decimalScale={0}
-                            allowNegative={false}
-                            thousandSeparator=','
-                            decimalSeparator='.'
-                            bottomLabel={getProductQtyBottomLabel(idx)}
-                            isError={
-                              isRepeaterInputError(
-                                'products',
-                                'product_qty',
-                                idx
-                              ).isError || Boolean(getProductQtyError(idx))
-                            }
-                            errorMessage={
-                              isRepeaterInputError(
-                                'products',
-                                'product_qty',
-                                idx
-                              ).errorMessage ||
-                              getProductQtyError(idx) ||
-                              undefined
-                            }
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper:
-                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                          />
-                        </td>
-                        {type !== 'detail' && (
-                          <td>
-                            <div className='flex flex-col items-start gap-2'>
-                              <Button
-                                type='button'
-                                color='error'
-                                onClick={() => removeProduct(idx)}
-                              >
-                                <Icon
-                                  icon='material-symbols:delete-outline-rounded'
-                                  width={24}
-                                  height={24}
-                                />
-                              </Button>
-                            </div>
-                          </td>
-                        )}
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-              {type !== 'detail' && (
-                <div className='flex justify-center items-center mt-4 gap-4'>
-                  {selectedProducts.length > 0 && (
-                    <Button
-                      type='button'
-                      color='error'
-                      onClick={bulkRemoveProduct}
-                      className='w-fit'
-                    >
-                      <Icon
-                        icon='material-symbols:delete-outline-rounded'
-                        width={24}
-                        height={24}
-                      />
-                      Hapus Produk Terpilih ({selectedProducts.length})
-                    </Button>
-                  )}
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            {type !== 'detail' && (
+              <div className='flex justify-center items-center mt-4 gap-4'>
+                {selectedProducts.length > 0 && (
                   <Button
                     type='button'
-                    color='success'
-                    onClick={addProduct}
+                    color='error'
+                    onClick={bulkRemoveProduct}
                     className='w-fit'
                   >
-                    <Icon icon='ic:round-plus' width={24} height={24} />
-                    Tambah Produk
+                    <Icon
+                      icon='material-symbols:delete-outline-rounded'
+                      width={24}
+                      height={24}
+                    />
+                    Hapus Produk Terpilih ({selectedProducts.length})
                   </Button>
-                </div>
-              )}
-            </div>
-          </div>
+                )}
+                <Button
+                  type='button'
+                  color='success'
+                  onClick={addProduct}
+                  className='w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah Produk
+                </Button>
+              </div>
+            )}
+          </Card>
 
           {/* Deliveries table */}
-          <div className='card bg-base-100 shadow mb-4'>
-            <div className='card-body'>
-              <h2 className='card-title mb-8'>Pengiriman</h2>
-              <div className='overflow-x-auto'>
-                <table className='table'>
-                  <thead>
-                    <tr>
-                      {type !== 'detail' && (
-                        <th>
-                          <CheckboxInput
-                            name='select-all-deliveries'
-                            checked={
-                              formik.values.deliveries?.length ===
-                                selectedDeliveries.length &&
-                              formik.values.deliveries?.length > 0
+          <Card
+            title='Pengiriman'
+            className={{
+              wrapper: 'w-full mb-4 shadow',
+              title: 'mb-8',
+            }}
+          >
+            <div className='overflow-x-auto'>
+              <table className='table'>
+                <thead>
+                  <tr>
+                    {type !== 'detail' && (
+                      <th>
+                        <CheckboxInput
+                          name='select-all-deliveries'
+                          checked={
+                            formik.values.deliveries?.length ===
+                              selectedDeliveries.length &&
+                            formik.values.deliveries?.length > 0
+                          }
+                          onChange={(
+                            e: React.ChangeEvent<HTMLInputElement>
+                          ) => {
+                            if (e.target.checked) {
+                              setSelectedDeliveries(
+                                formik.values.deliveries?.map(
+                                  (_, idx) => idx
+                                ) ?? []
+                              );
+                            } else {
+                              setSelectedDeliveries([]);
                             }
+                          }}
+                          classNames={{
+                            wrapper: 'flex justify-center',
+                            checkbox: 'checkbox checkbox-sm',
+                          }}
+                        />
+                      </th>
+                    )}
+                    <th>
+                      Produk
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Qty
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Supplier
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Plat Nomor
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>Dokumen</th>
+                    <th>
+                      Biaya Pengiriman (Rp.)
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Biaya Per Item (Rp.)
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Nama Sopir
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    {type !== 'detail' && <th>Aksi</th>}
+                  </tr>
+                </thead>
+                <tbody>
+                  {formik.values.deliveries?.map((delivery, idx) => (
+                    <tr key={`delivery-row-${idx}`}>
+                      {type !== 'detail' && (
+                        <td className='!align-middle'>
+                          <CheckboxInput
+                            name={`delivery-${idx}`}
+                            checked={selectedDeliveries.includes(idx)}
                             onChange={(
                               e: React.ChangeEvent<HTMLInputElement>
                             ) => {
                               if (e.target.checked) {
-                                setSelectedDeliveries(
-                                  formik.values.deliveries?.map(
-                                    (_, idx) => idx
-                                  ) ?? []
-                                );
+                                setSelectedDeliveries([
+                                  ...selectedDeliveries,
+                                  idx,
+                                ]);
                               } else {
-                                setSelectedDeliveries([]);
+                                setSelectedDeliveries(
+                                  selectedDeliveries.filter((i) => i !== idx)
+                                );
                               }
                             }}
                             classNames={{
@@ -1207,417 +1303,307 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                               checkbox: 'checkbox checkbox-sm',
                             }}
                           />
-                        </th>
+                        </td>
                       )}
-                      <th>
-                        Produk
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>
-                        Qty
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>
-                        Supplier
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>
-                        Plat Nomor
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>Dokumen</th>
-                      <th>
-                        Biaya Pengiriman (Rp.)
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>
-                        Biaya Per Item (Rp.)
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>
-                        Nama Sopir
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      {type !== 'detail' && <th>Aksi</th>}
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {formik.values.deliveries?.map((delivery, idx) => (
-                      <tr key={`delivery-row-${idx}`}>
-                        {type !== 'detail' && (
-                          <td className='!align-middle'>
-                            <CheckboxInput
-                              name={`delivery-${idx}`}
-                              checked={selectedDeliveries.includes(idx)}
-                              onChange={(
-                                e: React.ChangeEvent<HTMLInputElement>
-                              ) => {
-                                if (e.target.checked) {
-                                  setSelectedDeliveries([
-                                    ...selectedDeliveries,
-                                    idx,
-                                  ]);
-                                } else {
-                                  setSelectedDeliveries(
-                                    selectedDeliveries.filter((i) => i !== idx)
-                                  );
-                                }
-                              }}
-                              classNames={{
-                                wrapper: 'flex justify-center',
-                                checkbox: 'checkbox checkbox-sm',
-                              }}
-                            />
-                          </td>
-                        )}
-                        <td>
-                          <SelectInput
-                            required
-                            placeholder='Pilih produk...'
-                            value={delivery.products[0]?.product ?? undefined}
-                            onChange={(val) => {
-                              formik.setFieldTouched(
-                                `deliveries.${idx}.products.0.product`,
-                                true
-                              );
-                              formik.setFieldValue(
-                                `deliveries.${idx}.products.0.product`,
-                                val
-                              );
-                              formik.setFieldTouched(
-                                `deliveries.${idx}.products.0.product_id`,
-                                true
-                              );
-                              formik.setFieldValue(
-                                `deliveries.${idx}.products.0.product_id`,
-                                (val as OptionType)?.value
-                              );
-                            }}
-                            options={getFilteredProductWarehouseOptions()}
-                            isDisabled={type === 'detail'}
-                            isClearable
-                            isError={
-                              isDeliveryProductInputError(idx, 0, 'product_id')
-                                .isError
-                            }
-                            errorMessage={
-                              isDeliveryProductInputError(idx, 0, 'product_id')
-                                .errorMessage
-                            }
-                            className={{
-                              wrapper:
-                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <NumberInput
-                            required
-                            name={`deliveries.${idx}.products.0.product_qty`}
-                            placeholder='Masukkan kuantitas...'
-                            value={delivery.products[0]?.product_qty ?? ''}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            decimalScale={0}
-                            allowNegative={false}
-                            thousandSeparator=','
-                            decimalSeparator='.'
-                            isError={
-                              isDeliveryProductInputError(idx, 0, 'product_qty')
-                                .isError || Boolean(getDeliveryQtyError(idx, 0))
-                            }
-                            errorMessage={
-                              isDeliveryProductInputError(idx, 0, 'product_qty')
-                                .errorMessage ||
-                              getDeliveryQtyError(idx, 0) ||
-                              undefined
-                            }
-                            bottomLabel={getDeliveryProductQtyBottomLabel(
-                              idx,
-                              0
-                            )}
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper: 'w-full min-w-48',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <SelectInput
-                            required
-                            placeholder='Pilih supplier...'
-                            value={delivery.supplier}
-                            onChange={(val) => {
-                              formik.setFieldTouched(
-                                `deliveries.${idx}.supplier`,
-                                true
-                              );
-                              formik.setFieldValue(
-                                `deliveries.${idx}.supplier`,
-                                val
-                              );
-                              formik.setFieldTouched(
-                                `deliveries.${idx}.supplier_id`,
-                                true
-                              );
-                              formik.setFieldValue(
-                                `deliveries.${idx}.supplier_id`,
-                                (val as OptionType)?.value
-                              );
-                            }}
-                            options={supplierOptions}
-                            onInputChange={setSupplierSelectInputValue}
-                            isLoading={isLoadingSuppliers}
-                            isDisabled={type === 'detail'}
-                            isClearable
-                            {...isRepeaterInputError(
-                              'deliveries',
-                              'supplier_id',
-                              idx
-                            )}
-                            className={{
-                              wrapper:
-                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            required
-                            name={`deliveries.${idx}.vehicle_plate`}
-                            placeholder='Masukkan plat nomor...'
-                            value={delivery.vehicle_plate}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            {...isRepeaterInputError(
-                              'deliveries',
-                              'vehicle_plate',
-                              idx
-                            )}
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper:
-                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          {type === 'detail' ? (
-                            <>
-                              <div className='flex flex-col items-start gap-2'>
-                                <Button
-                                  color='primary'
-                                  className='w-full min-w-52 flex items-center justify-center gap-2'
-                                  disabled={!delivery.document_path}
-                                  href={delivery.document_path ?? undefined}
-                                  target='_blank'
-                                  rel='noopener noreferrer'
-                                >
-                                  {delivery.document_path ? (
-                                    <>
-                                      <Icon
-                                        icon='material-symbols:file-open-outline'
-                                        width={20}
-                                        height={20}
-                                      />
-                                      Lihat Dokumen
-                                    </>
-                                  ) : (
-                                    '-'
-                                  )}
-                                </Button>
-                              </div>
-                            </>
-                          ) : (
-                            <FileInput
-                              name={`deliveries.${idx}.document`}
-                              onChange={(e) => {
-                                const file = e.target.files?.[0];
-                                if (file) {
-                                  if (file.size > 2 * 1024 * 1024) {
-                                    toast.error(
-                                      'Ukuran dokumen maksimal 2 MB!'
-                                    );
-                                    e.target.value = '';
-                                    return;
-                                  }
-                                  formik.setFieldValue(
-                                    `deliveries.${idx}.document`,
-                                    file
-                                  );
-                                }
-                              }}
-                              {...isRepeaterInputError(
-                                'deliveries',
-                                'document',
-                                idx
-                              )}
-                              className={{
-                                wrapper:
-                                  'w-full min-w-72 md:w-min-80 lg:w-min-96',
-                              }}
-                            />
+                      <td>
+                        <SelectInput
+                          required
+                          placeholder='Pilih produk...'
+                          value={delivery.products[0]?.product ?? undefined}
+                          onChange={(val) => {
+                            formik.setFieldTouched(
+                              `deliveries.${idx}.products.0.product`,
+                              true
+                            );
+                            formik.setFieldValue(
+                              `deliveries.${idx}.products.0.product`,
+                              val
+                            );
+                            formik.setFieldTouched(
+                              `deliveries.${idx}.products.0.product_id`,
+                              true
+                            );
+                            formik.setFieldValue(
+                              `deliveries.${idx}.products.0.product_id`,
+                              (val as OptionType)?.value
+                            );
+                          }}
+                          options={getFilteredProductWarehouseOptions()}
+                          isDisabled={type === 'detail'}
+                          isClearable
+                          isError={
+                            isDeliveryProductInputError(idx, 0, 'product_id')
+                              .isError
+                          }
+                          errorMessage={
+                            isDeliveryProductInputError(idx, 0, 'product_id')
+                              .errorMessage
+                          }
+                          className={{
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <NumberInput
+                          required
+                          name={`deliveries.${idx}.products.0.product_qty`}
+                          placeholder='Masukkan kuantitas...'
+                          value={delivery.products[0]?.product_qty ?? ''}
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          decimalScale={0}
+                          allowNegative={false}
+                          thousandSeparator=','
+                          decimalSeparator='.'
+                          isError={
+                            isDeliveryProductInputError(idx, 0, 'product_qty')
+                              .isError || Boolean(getDeliveryQtyError(idx, 0))
+                          }
+                          errorMessage={
+                            isDeliveryProductInputError(idx, 0, 'product_qty')
+                              .errorMessage ||
+                            getDeliveryQtyError(idx, 0) ||
+                            undefined
+                          }
+                          bottomLabel={getDeliveryProductQtyBottomLabel(idx, 0)}
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-48',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <SelectInput
+                          required
+                          placeholder='Pilih supplier...'
+                          value={delivery.supplier}
+                          onChange={(val) => {
+                            formik.setFieldTouched(
+                              `deliveries.${idx}.supplier`,
+                              true
+                            );
+                            formik.setFieldValue(
+                              `deliveries.${idx}.supplier`,
+                              val
+                            );
+                            formik.setFieldTouched(
+                              `deliveries.${idx}.supplier_id`,
+                              true
+                            );
+                            formik.setFieldValue(
+                              `deliveries.${idx}.supplier_id`,
+                              (val as OptionType)?.value
+                            );
+                          }}
+                          options={supplierOptions}
+                          onInputChange={setSupplierSelectInputValue}
+                          isLoading={isLoadingSuppliers}
+                          isDisabled={type === 'detail'}
+                          isClearable
+                          {...isRepeaterInputError(
+                            'deliveries',
+                            'supplier_id',
+                            idx
                           )}
-                        </td>
-                        <td>
-                          <NumberInput
-                            required
-                            name={`deliveries.${idx}.delivery_cost`}
-                            placeholder='Masukkan biaya pengiriman...'
-                            value={delivery.delivery_cost || ''}
-                            onChange={handleDeliveryCostChangeWrapper(idx)}
-                            onBlur={formik.handleBlur}
-                            decimalScale={0}
-                            allowNegative={false}
-                            thousandSeparator=','
-                            decimalSeparator='.'
-                            inputPrefix='Rp'
-                            {...isRepeaterInputError(
-                              'deliveries',
-                              'delivery_cost',
-                              idx
-                            )}
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper:
-                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <NumberInput
-                            required
-                            name={`deliveries.${idx}.delivery_cost_per_item`}
-                            placeholder='Masukkan biaya per item...'
-                            value={delivery.delivery_cost_per_item || ''}
-                            onChange={handleDeliveryCostPerItemChangeWrapper(
-                              idx
-                            )}
-                            onBlur={formik.handleBlur}
-                            decimalScale={0}
-                            allowNegative={false}
-                            thousandSeparator=','
-                            decimalSeparator='.'
-                            inputPrefix='Rp'
-                            {...isRepeaterInputError(
-                              'deliveries',
-                              'delivery_cost_per_item',
-                              idx
-                            )}
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper:
-                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            required
-                            name={`deliveries.${idx}.driver_name`}
-                            placeholder='Masukkan nama sopir...'
-                            value={delivery.driver_name}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            {...isRepeaterInputError(
-                              'deliveries',
-                              'driver_name',
-                              idx
-                            )}
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper:
-                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                          />
-                        </td>
-                        {type !== 'detail' && (
-                          <td>
+                          className={{
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <TextInput
+                          required
+                          name={`deliveries.${idx}.vehicle_plate`}
+                          placeholder='Masukkan plat nomor...'
+                          value={delivery.vehicle_plate}
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          {...isRepeaterInputError(
+                            'deliveries',
+                            'vehicle_plate',
+                            idx
+                          )}
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        {type === 'detail' ? (
+                          <>
                             <div className='flex flex-col items-start gap-2'>
                               <Button
-                                type='button'
-                                color='error'
-                                onClick={() => removeDelivery(idx)}
+                                color='primary'
+                                className='w-full min-w-52 flex items-center justify-center gap-2'
+                                disabled={!delivery.document_path}
+                                href={delivery.document_path ?? undefined}
+                                target='_blank'
+                                rel='noopener noreferrer'
                               >
-                                <Icon
-                                  icon='material-symbols:delete-outline-rounded'
-                                  width={24}
-                                  height={24}
-                                />
+                                {delivery.document_path ? (
+                                  <>
+                                    <Icon
+                                      icon='material-symbols:file-open-outline'
+                                      width={20}
+                                      height={20}
+                                    />
+                                    Lihat Dokumen
+                                  </>
+                                ) : (
+                                  '-'
+                                )}
                               </Button>
                             </div>
-                          </td>
+                          </>
+                        ) : (
+                          <FileInput
+                            name={`deliveries.${idx}.document`}
+                            onChange={(e) => {
+                              const file = e.target.files?.[0];
+                              if (file) {
+                                if (file.size > 2 * 1024 * 1024) {
+                                  toast.error('Ukuran dokumen maksimal 2 MB!');
+                                  e.target.value = '';
+                                  return;
+                                }
+                                formik.setFieldValue(
+                                  `deliveries.${idx}.document`,
+                                  file
+                                );
+                              }
+                            }}
+                            {...isRepeaterInputError(
+                              'deliveries',
+                              'document',
+                              idx
+                            )}
+                            className={{
+                              wrapper:
+                                'w-full min-w-72 md:w-min-80 lg:w-min-96',
+                            }}
+                          />
                         )}
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-              {type !== 'detail' && (
-                <div className='flex justify-center items-center mt-4 gap-4'>
-                  {selectedDeliveries.length > 0 && (
-                    <Button
-                      type='button'
-                      color='error'
-                      onClick={bulkRemoveDelivery}
-                      className='w-fit'
-                    >
-                      <Icon
-                        icon='material-symbols:delete-outline-rounded'
-                        width={24}
-                        height={24}
-                      />
-                      Hapus Pengiriman Terpilih ({selectedDeliveries.length})
-                    </Button>
-                  )}
+                      </td>
+                      <td>
+                        <NumberInput
+                          required
+                          name={`deliveries.${idx}.delivery_cost`}
+                          placeholder='Masukkan biaya pengiriman...'
+                          value={delivery.delivery_cost || ''}
+                          onChange={handleDeliveryCostChangeWrapper(idx)}
+                          onBlur={formik.handleBlur}
+                          decimalScale={0}
+                          allowNegative={false}
+                          thousandSeparator=','
+                          decimalSeparator='.'
+                          inputPrefix='Rp'
+                          {...isRepeaterInputError(
+                            'deliveries',
+                            'delivery_cost',
+                            idx
+                          )}
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <NumberInput
+                          required
+                          name={`deliveries.${idx}.delivery_cost_per_item`}
+                          placeholder='Masukkan biaya per item...'
+                          value={delivery.delivery_cost_per_item || ''}
+                          onChange={handleDeliveryCostPerItemChangeWrapper(idx)}
+                          onBlur={formik.handleBlur}
+                          decimalScale={0}
+                          allowNegative={false}
+                          thousandSeparator=','
+                          decimalSeparator='.'
+                          inputPrefix='Rp'
+                          {...isRepeaterInputError(
+                            'deliveries',
+                            'delivery_cost_per_item',
+                            idx
+                          )}
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <TextInput
+                          required
+                          name={`deliveries.${idx}.driver_name`}
+                          placeholder='Masukkan nama sopir...'
+                          value={delivery.driver_name}
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          {...isRepeaterInputError(
+                            'deliveries',
+                            'driver_name',
+                            idx
+                          )}
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      {type !== 'detail' && (
+                        <td>
+                          <div className='flex flex-col items-start gap-2'>
+                            <Button
+                              type='button'
+                              color='error'
+                              onClick={() => removeDelivery(idx)}
+                            >
+                              <Icon
+                                icon='material-symbols:delete-outline-rounded'
+                                width={24}
+                                height={24}
+                              />
+                            </Button>
+                          </div>
+                        </td>
+                      )}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            {type !== 'detail' && (
+              <div className='flex justify-center items-center mt-4 gap-4'>
+                {selectedDeliveries.length > 0 && (
                   <Button
                     type='button'
-                    color='success'
-                    onClick={addDelivery}
+                    color='error'
+                    onClick={bulkRemoveDelivery}
                     className='w-fit'
                   >
-                    <Icon icon='ic:round-plus' width={24} height={24} />
-                    Tambah Pengiriman
+                    <Icon
+                      icon='material-symbols:delete-outline-rounded'
+                      width={24}
+                      height={24}
+                    />
+                    Hapus Pengiriman Terpilih ({selectedDeliveries.length})
                   </Button>
-                </div>
-              )}
-            </div>
-          </div>
+                )}
+                <Button
+                  type='button'
+                  color='success'
+                  onClick={addDelivery}
+                  className='w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah Pengiriman
+                </Button>
+              </div>
+            )}
+          </Card>
 
           {/* Action buttons */}
           <div className='flex flex-row justify-between gap-2 flex-wrap'>