fix(FE): skeleton for input skenario sales order

src/components/pages/marketing/SalesOrderFormModal.tsx

@@ -650,7 +650,7 @@ const SalesOrderFormModal = ({
                   </Button>
                 </RequirePermission>
               </div>
-              <div className='flex flex-1 flex-col p-4'>
+              <div className='flex flex-1 flex-col'>
                 <MemoizedSalesOrderProductForm
                   onSubmitForm={handleAddSubmitSO}
                   initialValues={selectedMarketingProduct ?? undefined}

src/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema.ts

@@ -19,6 +19,23 @@ type SalesOrderProductSchemaType = {
   total_price: string | number | undefined;
   vehicle_number?: string | undefined;
   uom?: string | null | undefined;
+  convertion_unit?: {
+    value: string;
+    label: string;
+  } | null;
+  weight_per_convertion?: number | null | undefined;
+  price_per_convertion?: number | null | undefined;
+  marketing_type?: {
+    value: string;
+    label: string;
+  } | null;
+  total_peti?: number | null | undefined;
+  sisa_berat?: number | null | undefined;
+  price_sisa_berat?: number | null | undefined;
+  weeks?: {
+    value: number;
+    label: string;
+  } | null;
 };
 
 export const SalesOrderProductSchema: Yup.ObjectSchema<SalesOrderProductSchemaType> =
@@ -59,6 +76,23 @@ export const SalesOrderProductSchema: Yup.ObjectSchema<SalesOrderProductSchemaTy
       .min(1, 'Total Penjualan wajib diisi!')
       .required('Total Penjualan wajib diisi!'),
     uom: Yup.string().nullable().optional().notRequired(),
+    convertion_unit: Yup.object({
+      value: Yup.string().required('Konversi Satuan wajib diisi!'),
+      label: Yup.string().required('Konversi Satuan wajib diisi!'),
+    }).nullable(),
+    weight_per_convertion: Yup.number().nullable().optional().notRequired(),
+    marketing_type: Yup.object({
+      value: Yup.string().required('Kategori Penjualan wajib diisi!'),
+      label: Yup.string().required('Kategori Penjualan wajib diisi!'),
+    }).nullable(),
+    price_per_convertion: Yup.number().nullable().optional().notRequired(),
+    total_peti: Yup.number().nullable().optional().notRequired(),
+    sisa_berat: Yup.number().nullable().optional().notRequired(),
+    price_sisa_berat: Yup.number().nullable().optional().notRequired(),
+    weeks: Yup.object({
+      value: Yup.number().required('Minggu wajib diisi!'),
+      label: Yup.string().required('Minggu wajib diisi!'),
+    }).nullable(),
   });
 
 export type SalesOrderProductFormValues = Yup.InferType<

src/components/pages/marketing/form/repeater/sales-order/SalesOrderProductForm.tsx

@@ -14,12 +14,22 @@ import { ProductWarehouseApi } from '@/services/api/inventory';
 import NumberInput from '@/components/input/NumberInput';
 import Button from '@/components/Button';
 import { isResponseSuccess } from '@/lib/api-helper';
-import { formatNumber, formatVechicleNumber } from '@/lib/helper';
+import {
+  formatNumber,
+  formatTitleCase,
+  formatVechicleNumber,
+} from '@/lib/helper';
 import PatternInput from '@/components/input/PatternInput';
 import Alert from '@/components/Alert';
 import AlertErrorList from '@/components/helper/form/FormErrors';
 import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 import SelectInputRadio from '@/components/input/SelectInputRadio';
+import {
+  MARKETING_CONVERTION_UNIT_OPTIONS,
+  MARKETING_TYPE_OPTIONS,
+} from '@/config/constant';
+import { Icon } from '@iconify/react';
+import Dropdown from '@/components/Dropdown';
 
 const roundWeight = (value: number) => Number(value.toFixed(2));
 const roundPrice = (value: number) => Math.round(value);
@@ -41,6 +51,7 @@ const SalesOrderProductForm = ({
   const [currentInput, setCurrentInput] = useState<string>('');
   const [selectedProductWarehouse, setSelectedProductWarehouse] =
     useState<ProductWarehouse | null>(null);
+  const [hasSisaBerat, setHasSisaBerat] = useState<boolean>(false);
 
   // ============ Formik ============
   const formik = useFormik<SalesOrderProductFormValues>({
@@ -57,6 +68,13 @@ const SalesOrderProductForm = ({
       avg_weight: initialValues?.avg_weight || '',
       total_price: initialValues?.total_price || '',
       uom: initialValues?.uom || '',
+      weight_per_convertion:
+        initialValues?.weight_per_convertion != null
+          ? Number(initialValues.weight_per_convertion)
+          : null,
+      convertion_unit: initialValues?.convertion_unit || null,
+      marketing_type: initialValues?.marketing_type || null,
+      total_peti: initialValues?.total_peti ?? null,
     },
     validationSchema: SalesOrderProductSchema,
     onSubmit: async (values) => {
@@ -76,6 +94,14 @@ const SalesOrderProductForm = ({
     loadMore: loadMoreKandang,
   } = useSelect<Kandang>(WarehouseApi.basePath, 'id', 'name');
 
+  // Options Weeks dari minggu 1 - 22
+  const optionsWeeks = useMemo(() => {
+    return Array.from({ length: 22 }, (_, i) => ({
+      value: i + 1,
+      label: `Weeks ${i + 1}`,
+    }));
+  }, []);
+
   const {
     options: warehouseSourceOptions,
     rawData: warehouseSourceRawData,
@@ -89,6 +115,7 @@ const SalesOrderProductForm = ({
     '',
     {
       warehouse_id: formik.values.kandang_id?.toString() ?? '',
+      type: formik.values.marketing_type?.value.toLocaleUpperCase() ?? '',
     }
   );
 
@@ -279,13 +306,18 @@ const SalesOrderProductForm = ({
         onSubmit={handleFormSubmit}
         onReset={handleResetForm}
       >
+        <div className='flex flex-col gap-1.5 p-4 border-b border-base-content/10'>
           {formErrorMessage && (
-          <div onClick={() => setFormErrorMessage('')} className='my-3 w-full'>
+            <div
+              onClick={() => setFormErrorMessage('')}
+              className='my-3 w-full'
+            >
               <Alert color='error'>
                 {formErrorMessage ? formErrorMessage : ''}
               </Alert>
             </div>
           )}
+          {/* Nomor Polisi */}
           <PatternInput
             name='vehicle_number'
             label='No. Polisi'
@@ -304,9 +336,11 @@ const SalesOrderProductForm = ({
             }
             errorMessage={formik.errors.vehicle_number}
           />
+
+          {/* Gudang */}
           <SelectInputRadio
             required
-          label='Kandang'
+            label='Gudang'
             options={kandangSourceOptions}
             isLoading={isLoadingKandangSourceOptions}
             value={formik.values.kandang}
@@ -318,8 +352,29 @@ const SalesOrderProductForm = ({
               formik.touched.kandang_id && Boolean(formik.errors.kandang_id)
             }
             errorMessage={formik.errors.kandang_id}
-          placeholder='Pilih Kandang'
+            placeholder='Pilih Gudang'
           />
+
+          {/* Kategori */}
+          <SelectInputRadio
+            required
+            label='Kategori '
+            options={MARKETING_TYPE_OPTIONS}
+            value={formik.values.marketing_type}
+            onChange={(val) => {
+              formik.setFieldValue('marketing_type', val);
+              warehouseChangeHandler(null);
+              formik.setFieldValue('product_warehouse', null);
+              formik.setFieldValue('product_warehouse_id', null);
+              formik.setFieldValue('convertion_unit', null);
+              formik.setFieldValue('weight_per_convertion', null);
+              formik.setFieldValue('total_peti', null);
+            }}
+            isClearable
+            placeholder='Pilih Kategori'
+          />
+
+          {/* Produk */}
           <SelectInputRadio
             required
             label='Produk'
@@ -344,9 +399,195 @@ const SalesOrderProductForm = ({
             }
             errorMessage={formik.errors.product_warehouse_id}
           />
+
+          {/* Konversi Satuan Telur */}
+          {formik.values.marketing_type &&
+            formik.values.marketing_type.value.toLowerCase() === 'telur' &&
+            (!formik.values.convertion_unit ||
+              formik.values.convertion_unit.value.toLowerCase() !== 'peti') && (
+              <SelectInputRadio
+                required
+                label='Tipe Konversi'
+                options={MARKETING_CONVERTION_UNIT_OPTIONS}
+                value={formik.values.convertion_unit}
+                onChange={(val) => formik.setFieldValue('convertion_unit', val)}
+                isClearable
+                placeholder='Pilih Konversi Satuan'
+              />
+            )}
+          {formik.values.convertion_unit &&
+            formik.values.convertion_unit.value === 'peti' && (
+              <div className='flex flex-col'>
+                <label className='font-semibold text-xs py-2 leading-5'>
+                  Tipe Konversi <span className='text-error'>*</span>
+                </label>
+                <div className='flex items-center gap-2 border border-base-content/10 rounded-lg pe-3 text-sm text-base-content'>
+                  <div>
+                    <Dropdown
+                      align='start'
+                      direction='bottom'
+                      trigger={
+                        <div className='flex flex-row items-stretch gap-2 py-1 ps-3 text-sm'>
+                          <div className='py-1.5 flex items-center gap-2'>
+                            {formatTitleCase(
+                              formik.values.convertion_unit.value
+                            )}
+                            <Icon
+                              icon='heroicons:chevron-down-solid'
+                              className='my-auto'
+                            />
+                          </div>
+                          <div className='w-px border-none bg-base-content/10'></div>
+                        </div>
+                      }
+                      className={{
+                        wrapper: 'relative',
+                        content:
+                          'rounded-xl mt-1 border border-base-content/5 shadow-sm overflow-hidden min-w-68.5 sm:min-w-103.25 w-full',
+                      }}
+                    >
+                      <ul className='rounded-lg w-full'>
+                        {MARKETING_CONVERTION_UNIT_OPTIONS.map((option) => (
+                          <li className='w-full' key={option.value}>
+                            <Button
+                              variant='ghost'
+                              color='none'
+                              className='w-full p-3 gap-3 font-medium justify-start text-sm text-base-content/50'
+                              onClick={() =>
+                                formik.setFieldValue('convertion_unit', option)
+                              }
+                            >
+                              <input
+                                type='radio'
+                                checked={
+                                  formik.values.convertion_unit?.value ===
+                                  option.value
+                                }
+                                onChange={() => null}
+                                className='radio radio-md radio-primary pointer-events-none'
+                              />{' '}
+                              {option.label}
+                            </Button>
+                          </li>
+                        ))}
+                      </ul>
+                    </Dropdown>
+                  </div>
+                  <input
+                    type='number'
+                    className='w-full h-full focus:outline-none appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none'
+                    placeholder={`Berat ${
+                      formik.values.convertion_unit?.value === 'peti'
+                        ? 'kg'
+                        : ''
+                    } per ${formik.values.convertion_unit?.value}`}
+                    value={formik.values.weight_per_convertion ?? ''}
+                    onChange={(e) => {
+                      formik.setFieldValue(
+                        'weight_per_convertion',
+                        Number(e.target.value)
+                      );
+                      setCurrentInput(e.target.name);
+                    }}
+                  />
+                </div>
+              </div>
+            )}
+
+          {/* Konversi Satuan Weeks Pullet */}
+          {formik.values.marketing_type?.value.toLowerCase() ===
+            'ayam_pullet' && (
+            <SelectInputRadio
+              required
+              label='Minggu'
+              options={optionsWeeks}
+              value={formik.values.weeks}
+              onChange={(val) => {
+                formik.setFieldValue('weeks', val);
+              }}
+              placeholder='Pilih Weeks'
+            />
+          )}
+
+          {/* Total Peti */}
+          {formik.values.convertion_unit?.value === 'peti' && (
             <NumberInput
               required
-          label='Kuantitas'
+              label='Total Peti'
+              name='total_pet'
+              value={formik.values.total_peti ?? undefined}
+              onChange={(e) => {
+                formik.handleChange(e);
+                setCurrentInput(e.target.name);
+              }}
+              onBlur={() => handleBlurField('total_peti')}
+              isError={
+                formik.touched.total_peti && Boolean(formik.errors.total_peti)
+              }
+              errorMessage={formik.errors.total_peti}
+              placeholder='Masukan Total Peti'
+              endAdornment={
+                <div className='flex items-center gap-2'>
+                  <span className='text-sm text-base-content/50'>Kg</span>
+                </div>
+              }
+              bottomLabel={`1 ${formik.values.convertion_unit?.value} = ${formik.values.weight_per_convertion ?? 0} Kg`}
+            />
+          )}
+
+          {/* Avg. Bobot */}
+          {formik.values.marketing_type?.value.toLowerCase() === 'trading' ||
+            (formik.values.convertion_unit?.value.toLowerCase() !== 'peti' &&
+              formik.values.convertion_unit?.value.toLowerCase() !== 'kg' && (
+                <NumberInput
+                  required
+                  label='Avg. Bobot (Kg)'
+                  name='avg_weight'
+                  value={formik.values.avg_weight}
+                  onChange={(e) => {
+                    formik.handleChange(e);
+                    setCurrentInput(e.target.name);
+                  }}
+                  onBlur={() => handleBlurField('avg_weight')}
+                  isError={
+                    formik.touched.avg_weight &&
+                    Boolean(formik.errors.avg_weight)
+                  }
+                  errorMessage={formik.errors.avg_weight}
+                  placeholder='Masukan Bobot Rata-rata'
+                />
+              ))}
+
+          {/* Total Bobot */}
+          {formik.values.marketing_type?.value.toLowerCase() !== 'trading' && (
+            <NumberInput
+              required
+              label='Total Bobot (Kg)'
+              name='total_weight'
+              value={formik.values.total_weight}
+              onChange={(e) => {
+                formik.handleChange(e);
+                setCurrentInput(e.target.name);
+              }}
+              onBlur={() => handleBlurField('total_weight')}
+              isError={
+                formik.touched.total_weight &&
+                Boolean(formik.errors.total_weight)
+              }
+              errorMessage={formik.errors.total_weight}
+              placeholder='Masukan Total Bobot'
+            />
+          )}
+
+          {/* Kuantitas */}
+          <NumberInput
+            required
+            label={
+              formik.values.marketing_type &&
+              formik.values.marketing_type.value.toLowerCase() === 'telur'
+                ? `Total Butir Telur`
+                : `Total Kuantitas`
+            }
             name='qty'
             value={formik.values.qty}
             onChange={(e) => {
@@ -359,7 +600,7 @@ const SalesOrderProductForm = ({
             placeholder='Masukan Kuantitas'
             endAdornment={
               <div className='flex items-center gap-2'>
-              <span className='text-sm text-gray-500'>
+                <span className='text-sm text-base-content/50'>
                   {selectedProductWarehouse?.product?.uom?.name}
                 </span>
               </div>
@@ -375,6 +616,32 @@ const SalesOrderProductForm = ({
                 : ''
             }
           />
+
+          {/* Harga per convertion unit */}
+          {(formik.values.convertion_unit?.value.toLowerCase() === 'peti' ||
+            formik.values.convertion_unit?.value.toLowerCase() === 'kg') && (
+            <NumberInput
+              required
+              label={`Harga / ${formik.values.convertion_unit?.label ?? 'Produk'} (Rp)`}
+              name='price_per_convertion'
+              value={formik.values.price_per_convertion ?? undefined}
+              onChange={(e) => {
+                formik.handleChange(e);
+                setCurrentInput(e.target.name);
+              }}
+              onBlur={() => handleBlurField('price_per_convertion')}
+              isError={
+                formik.touched.price_per_convertion &&
+                Boolean(formik.errors.price_per_convertion)
+              }
+              errorMessage={formik.errors.price_per_convertion}
+              placeholder='Masukan Harga Satuan'
+            />
+          )}
+
+          {/* Harga Satuan per Uom Produk Warehouse */}
+          {formik.values.convertion_unit?.value.toLowerCase() !== 'peti' &&
+            formik.values.convertion_unit?.value.toLowerCase() !== 'kg' && (
               <NumberInput
                 required
                 label={`Harga / ${selectedProductWarehouse?.product?.uom?.name ?? 'Produk'} (Rp)`}
@@ -391,38 +658,71 @@ const SalesOrderProductForm = ({
                 errorMessage={formik.errors.unit_price}
                 placeholder='Masukan Harga Satuan'
               />
+            )}
+
+          {/* Sisa kg diluar peti */}
+          {formik.values.convertion_unit?.value.toLowerCase() === 'peti' && (
+            <div className='flex flex-col'>
+              <div className='py-2 gap-3 flex items-center'>
+                <input
+                  type='checkbox'
+                  name='sisa_berat'
+                  checked={hasSisaBerat}
+                  onChange={() => {
+                    setHasSisaBerat(!hasSisaBerat);
+                  }}
+                  onBlur={() => handleBlurField('sisa_berat')}
+                  className='toggle toggle-primary rounded-full before:rounded-full before:bg-base-content/50 border-base-content/50 checked:border-primary checked:bg-primary checked:before:bg-base-100'
+                />
+                <label className='text-sm text-base-content/50'>
+                  Apakah ada sisa berat di luar peti?
+                </label>
+              </div>
+              <span className='text-xs text-base-content/30 leading-4 pt-1.5'>
+                Jika ada, masukan berat di luar peti
+              </span>
+            </div>
+          )}
+
+          {hasSisaBerat && (
+            <>
               <NumberInput
                 required
-          label='Avg. Bobot (Kg)'
+                label='Sisa Berat (Kg)'
-          name='avg_weight'
+                name='sisa_berat'
-          value={formik.values.avg_weight}
+                value={formik.values.sisa_berat ?? undefined}
                 onChange={(e) => {
                   formik.handleChange(e);
                   setCurrentInput(e.target.name);
                 }}
-          onBlur={() => handleBlurField('avg_weight')}
+                onBlur={() => handleBlurField('sisa_berat')}
                 isError={
-            formik.touched.avg_weight && Boolean(formik.errors.avg_weight)
+                  formik.touched.sisa_berat && Boolean(formik.errors.sisa_berat)
                 }
-          errorMessage={formik.errors.avg_weight}
+                errorMessage={formik.errors.sisa_berat}
-          placeholder='Masukan Bobot Rata-rata'
+                placeholder='Masukan Sisa Berat'
               />
               <NumberInput
                 required
-          label='Total Bobot (Kg)'
+                label='Harga Sisa Berat (Rp)'
-          name='total_weight'
+                name='price_sisa_berat'
-          value={formik.values.total_weight}
+                value={formik.values.price_sisa_berat ?? undefined}
                 onChange={(e) => {
                   formik.handleChange(e);
                   setCurrentInput(e.target.name);
                 }}
-          onBlur={() => handleBlurField('total_weight')}
+                onBlur={() => handleBlurField('price_sisa_berat')}
                 isError={
-            formik.touched.total_weight && Boolean(formik.errors.total_weight)
+                  formik.touched.price_sisa_berat &&
+                  Boolean(formik.errors.price_sisa_berat)
                 }
-          errorMessage={formik.errors.total_weight}
+                errorMessage={formik.errors.price_sisa_berat}
-          placeholder='Masukan Total Bobot'
+                placeholder='Masukan Harga Sisa Berat'
               />
+            </>
+          )}
+
+          {/* Total Penjualan */}
           <NumberInput
             required
             label='Total Penjualan (Rp)'
@@ -440,13 +740,16 @@ const SalesOrderProductForm = ({
             placeholder='Masukan Total Penjualan'
           />
 
+          {formErrorList.length > 0 && (
             <div className='mt-4'>
               <AlertErrorList formErrorList={formErrorList} onClose={close} />
             </div>
+          )}
+        </div>
 
         <div className='h-18' />
 
-        <div className='absolute w-full bottom-0 right-0'>
+        <div className='absolute w-full bottom-0 right-0 p-4'>
           <Button
             type='submit'
             isLoading={formik.isSubmitting}

src/config/constant.ts

@@ -495,16 +495,35 @@ export const FILTER_TYPE_OPTIONS = [
 
 export const MARKETING_TYPE_OPTIONS = [
   {
-    label: 'Ayam',
+    label: 'Ayam Pullet',
-    value: 'ayam',
+    value: 'AYAM_PULLET',
   },
   {
-    label: 'Telur',
+    label: 'Ayam',
-    value: 'telur',
+    value: 'AYAM',
   },
   {
     label: 'Trading',
-    value: 'trading',
+    value: 'TRADING',
+  },
+  {
+    label: 'Telur',
+    value: 'TELUR',
+  },
+];
+
+export const MARKETING_CONVERTION_UNIT_OPTIONS = [
+  {
+    label: 'Kg',
+    value: 'kg',
+  },
+  {
+    label: 'Qty',
+    value: 'qty',
+  },
+  {
+    label: 'Peti',
+    value: 'peti',
   },
 ];
 

src/types/api/marketing/marketing.d.ts

@@ -110,6 +110,7 @@ export type BaseCreateMarketingProductPayload = {
   qty: string | number | undefined;
   avg_weight: string | number | undefined;
   total_price: string | number | undefined;
+  marketing_type: string;
 };
 
 /**