Merge branch 'dev/randy' into 'fix/FE/master-data-and-production'

[FIX/FE][US#33-74] Fix issue in master data and adjusmen in project flock

See merge request mbugroup/lti-web-client!120

src/components/pages/finance/add/FormFinanceAdd.tsx

@@ -39,6 +39,12 @@ interface FormFinanceAddProps {
   initialValues?: Finance;
 }
 
+interface PartyCommonProps {
+  id: number;
+  name: string;
+  account_number: string;
+}
+
 const FormFinanceAdd = ({
   type = 'add',
   initialValues,
@@ -52,10 +58,12 @@ const FormFinanceAdd = ({
         FINANCE_PARTY_TYPE_OPTIONS.find(
           (option) => option.value === initialValues?.party.type
         ) || null,
-      party_id_option: {
+      party_id_option: initialValues?.party
-        label: initialValues?.party.name || '',
+        ? {
-        value: initialValues?.party.id || 0,
+            label: initialValues?.party.name || '',
-      },
+            value: initialValues?.party.id || 0,
+          }
+        : null,
       payment_date: initialValues?.payment_date || '',
       payment_method_option:
         FINANCE_PAYMENT_METHOD_OPTIONS.find(
@@ -97,16 +105,19 @@ const FormFinanceAdd = ({
   });
 
   // ===== Options =====
-  const { options: partyOptions, isLoadingOptions: isLoadingPartyOptions } =
+  const {
-    useSelect(
+    options: partyOptions,
-      formik.values.party_type_option?.value === 'CUSTOMER'
+    isLoadingOptions: isLoadingPartyOptions,
-        ? CustomerApi.basePath
+    rawData: partyRawData,
-        : SupplierApi.basePath,
+  } = useSelect<PartyCommonProps>(
-      'id',
+    formik.values.party_type_option?.value === 'CUSTOMER'
-      'name',
+      ? CustomerApi.basePath
-      '',
+      : SupplierApi.basePath,
-      { limit: 'limit' }
+    'id',
-    );
+    'name',
+    '',
+    { limit: 'limit' }
+  );
   const {
     options: bankOptions,
     rawData: bankRawData,
@@ -204,6 +215,14 @@ const FormFinanceAdd = ({
               value={formik.values.party_id_option}
               onChange={(value) => {
                 formik.setFieldValue('party_id_option', value);
+                if (isResponseSuccess(partyRawData) && value) {
+                  formik.setFieldValue(
+                    'party_account_number',
+                    partyRawData.data?.find(
+                      (item) => item.id === (value as OptionType)?.value
+                    )?.account_number || ''
+                  );
+                }
               }}
               isLoading={isLoadingPartyOptions}
               isError={Boolean(
@@ -312,6 +331,7 @@ const FormFinanceAdd = ({
                   : ''
               }
               required
+              readOnly
             />
             <TextInput
               label='Nomor Referensi'

src/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance.schema.ts

@@ -1,19 +1,6 @@
 import * as Yup from 'yup';
 import { OptionType } from '@/components/input/SelectInput';
 
-/**
- * API Payload format for Initial Balance:
- * {
-    "party_type": "CUSTOMER",
-    "party_id": 1,
-    "bank_id": 1,
-    "reference_number": "IB.MBU.001",
-    "initial_balance_type": "DEBIT",
-    "nominal": 5000000,
-    "note": "Saldo awal piutang customer"
-  }
- */
-
 // Type for form values (includes option objects for SelectInput)
 export type InitialBalanceFormValues = {
   party_type_option: OptionType | null;

src/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.tsx

@@ -174,19 +174,6 @@ const DeliveryOrderProductForm = ({
         }}
         onReset={handleResetForm}
       >
-        {/* <small className='block text-blue-500'>
-          {JSON.stringify(exisitingValues)}
-        </small>
-        <small className='block text-emerald-500'>
-          {JSON.stringify(formik.values)}
-        </small> */}
-        {/* <small className='block text-red-500'>
-          {JSON.stringify(formik.errors)}
-        </small>
-        <div className='hidden'>
-          {JSON.stringify(formik.values.marketing_product)}
-        </div> */}
-
         {formikErrorMessage && (
           <div onClick={() => setFormErrorMessage('')} className='my-3 w-full'>
             <Alert color='error'>{formikErrorMessage}</Alert>

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

@@ -11,7 +11,7 @@ import SelectInput, {
   useSelect,
 } from '@/components/input/SelectInput';
 import { Kandang } from '@/types/api/master-data/kandang';
-import { KandangApi } from '@/services/api/master-data';
+import { KandangApi, WarehouseApi } from '@/services/api/master-data';
 import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
 import { ProductWarehouseApi } from '@/services/api/inventory';
 import NumberInput from '@/components/input/NumberInput';
@@ -61,7 +61,7 @@ const SalesOrderProductForm = ({
   const {
     options: kandangSourceOptions,
     isLoadingOptions: isLoadingKandangSourceOptions,
-  } = useSelect<Kandang>(KandangApi.basePath, 'id', 'name');
+  } = useSelect<Kandang>(WarehouseApi.basePath, 'id', 'name');
 
   const {
     options: warehouseSourceOptions,

src/components/pages/master-data/nonstock/form/NonstockForm.tsx

@@ -79,14 +79,14 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
       uomId: initialValues?.uom_id ?? 0,
       uom: initialValues?.uom
         ? {
-            value: initialValues?.uom.id,
+            value: initialValues?.uom?.id,
-            label: initialValues?.uom.name,
+            label: initialValues?.uom?.name,
           }
         : null,
       supplierIds:
-        initialValues?.suppliers.map((supplier) => supplier.id) ?? [],
+        initialValues?.suppliers?.map((supplier) => supplier.id) ?? [],
       suppliers:
-        initialValues?.suppliers.map((supplier) => ({
+        initialValues?.suppliers?.map((supplier) => ({
           value: supplier.id,
           label: supplier.name,
         })) ?? [],

src/components/pages/master-data/production-standard/form/ProductionStandardForm.schema.ts

@@ -68,7 +68,9 @@ export const createProductionStandardRepeaterFormSchema = (
 export const createProductionStandardFormSchema = (category: string) => {
   return Yup.object({
     name: Yup.string().required('Nama wajib diisi!'),
-    project_category: Yup.string().required('Kategori proyek wajib diisi!'),
+    project_category: Yup.string()
+      .min(1, 'Kategori proyek wajib diisi!')
+      .required('Kategori proyek wajib diisi!'),
     details: Yup.array().of(
       createProductionStandardRepeaterFormSchema(category)
     ),

src/components/pages/master-data/production-standard/form/ProductionStandardForm.tsx

@@ -29,6 +29,7 @@ import toast from 'react-hot-toast';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import { useModal } from '@/components/Modal';
 import RequirePermission from '@/components/helper/RequirePermission';
+import Tooltip from '@/components/Tooltip';
 
 type TableRowsType = {
   customRow: boolean;
@@ -175,13 +176,15 @@ const ProductionStandardForm = ({
   } = useFormStore();
 
   // ===== Formik =====
+  // Initial values - only recalculate when initialValue changes (for edit/detail mode)
+  // For add mode, we load from cache via useEffect instead to avoid race conditions
   const formikInitialValues = useMemo(() => {
-    // For add mode, merge cached data with initial values
+    if (formType === 'add') {
-    if (formType === 'add' && formData) {
+      // Don't use formData here - will be loaded via useEffect
       return {
-        name: formData.name || '',
+        name: '',
-        project_category: formData.project_category || '',
+        project_category: '',
-        details: formData.details || [],
+        details: [],
       } as ProductionStandardFormValues;
     }
 
@@ -190,10 +193,11 @@ const ProductionStandardForm = ({
       project_category: initialValue?.project_category || '',
       details: convertStandardValueToFormValues(initialValue?.details || []),
     } as ProductionStandardFormValues;
-  }, [initialValue, formData, formType]);
+  }, [initialValue, formType]);
   const formik = useFormik<ProductionStandardFormValues>({
     initialValues: formikInitialValues as ProductionStandardFormValues,
-    enableReinitialize: true,
+    // Only enable reinitialize for edit/detail mode, not add mode
+    enableReinitialize: formType !== 'add',
     onSubmit: (values) => {
       switch (formType) {
         case 'add':
@@ -255,36 +259,38 @@ const ProductionStandardForm = ({
   const { setValues: repeaterFormikSetValues } = repeaterFormik;
 
   // ===== Effect =====
-  // Load initial values only when component mounts or when initialValue changes (for edit mode)
+  // Load cached data only once on mount for add mode
-  // This allows:
+  const [isInitialized, setIsInitialized] = useState(false);
-  // 1. Add mode: Load cached data from formData store
+
-  // 2. Edit mode: Load existing data from initialValue
-  // We use initialValue?.id as dependency to avoid infinite loops
   useEffect(() => {
-    if (formType === 'add' && formData) {
+    if (formType === 'add' && formData && !isInitialized) {
-      // For add mode, load from cache
+      // For add mode, load from cache only on initial mount
       formikSetValues({
         name: formData.name || '',
         project_category: formData.project_category || '',
         details: formData.details || [],
       } as ProductionStandardFormValues);
-    } else if (formType === 'detail' && initialValue) {
+      setIsInitialized(true);
-      // For detail mode, load from initialValue and convert the details
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Only run once on mount
+
+  // For edit/detail mode, update when initialValue changes
+  useEffect(() => {
+    if (formType === 'detail' && initialValue) {
       formikSetValues({
         name: initialValue.name || '',
         project_category: initialValue.project_category || '',
         details: convertStandardValueToFormValues(initialValue.details || []),
       } as ProductionStandardFormValues);
     } else if (formType === 'edit' && initialValue) {
-      // For edit mode, load from initialValue and convert the details
       formikSetValues({
         name: initialValue.name || '',
         project_category: initialValue.project_category || '',
         details: convertStandardValueToFormValues(initialValue.details || []),
       } as ProductionStandardFormValues);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialValue?.id, formType]);
-  }, [formData, initialValue?.id]); // Trigger when formData or initialValue.id changes
 
   // ===== Data Table =====
   const tableRows = useMemo(() => {
@@ -323,11 +329,6 @@ const ProductionStandardForm = ({
   }, [formik.values.details]);
   const columns = useMemo<ColumnDef<TableRowsType>[]>(() => {
     const baseColumns: ColumnDef<TableRowsType>[] = [
-      {
-        header: 'No',
-        accessorFn: (row, index) => index + 1,
-        enableSorting: false,
-      },
       {
         header: 'Minggu',
         accessorKey: 'week',
@@ -407,6 +408,7 @@ const ProductionStandardForm = ({
               variant='outline'
               color='warning'
               className='p-2'
+              type='button'
               onClick={() => handleEditClick(row.row.original.week)}
             >
               <Icon icon='mdi:pencil' />
@@ -415,6 +417,7 @@ const ProductionStandardForm = ({
               variant='outline'
               color='error'
               className='p-2'
+              type='button'
               onClick={() => handleRemoveRow(row.row.original.week)}
             >
               <Icon icon='mdi:delete' />
@@ -430,7 +433,7 @@ const ProductionStandardForm = ({
       ...uniformityColumns,
       ...(formType !== 'detail' ? [actionColumn] : []),
     ];
-  }, [formik.values.project_category, formType]);
+  }, [formik.values, formType]);
 
   // ===== Handler =====
   const handleAddRow = async (
@@ -488,9 +491,11 @@ const ProductionStandardForm = ({
     setIsAddingRow(false);
   };
 
-  const handleRemoveRow = (week: number) => {
+  const handleRemoveRow = async (week: number) => {
-    const newValues = (formik.values.details || []).filter(
+    // Access formik.values directly to get the latest values
-      (detail) => detail.week !== week
+    const currentDetails = formik.values.details || [];
+    const newValues = currentDetails.filter(
+      (detail) => Number(detail.week) !== Number(week)
     );
 
     const updatedFormValues = {
@@ -745,6 +750,7 @@ const ProductionStandardForm = ({
             }
             required
             isDisabled={formType === 'detail'}
+            isClearable
           />
         </div>
         <Table<TableRowsType>
@@ -1105,16 +1111,27 @@ const ProductionStandardForm = ({
                             <Icon icon='mdi:close' /> Batal
                           </Button>
                         )}
-                        <Button
+                        <Tooltip
-                          type='submit'
+                          content={
-                          color={editMode ? 'warning' : 'success'}
+                            formik.values.project_category === ''
-                          className='min-w-24'
+                              ? 'Isi kategori proyek terlebih dahulu'
-                          disabled={isAddingRow}
+                              : ''
-                          isLoading={isAddingRow}
+                          }
                         >
-                          <Icon icon={editMode ? 'mdi:pencil' : 'mdi:plus'} />{' '}
+                          <Button
-                          {editMode ? 'Edit Data' : 'Tambah Data'}
+                            type='submit'
-                        </Button>
+                            color={editMode ? 'warning' : 'success'}
+                            className='min-w-24'
+                            disabled={
+                              isAddingRow ||
+                              formik.values.project_category === ''
+                            }
+                            isLoading={isAddingRow}
+                          >
+                            <Icon icon={editMode ? 'mdi:pencil' : 'mdi:plus'} />{' '}
+                            {editMode ? 'Edit Data' : 'Tambah Data'}
+                          </Button>
+                        </Tooltip>
                         {/* Should not be absolute */}
                         <Button
                           type='button'

src/components/pages/master-data/supplier/form/SupplierForm.schema.ts

@@ -18,7 +18,7 @@ export const SupplierFormSchema = Yup.object({
     value: Yup.string().required(),
     label: Yup.string().required(),
   }).required('Tipe wajib diisi!'),
-  hatchery: Yup.string().required('Hatchery wajib diisi!'),
+  hatchery: Yup.string().optional(),
   phone: Yup.string()
     .matches(/^[0-9]+$/, 'Nomor telepon hanya boleh berisi angka!')
     .min(10, 'Nomor telepon minimal 10 digit!')

src/components/pages/master-data/supplier/form/SupplierForm.tsx

@@ -142,7 +142,7 @@ const SupplierForm = ({
         pic: values.pic,
         type: values.type.value,
         category: values.category.value,
-        hatchery: values.hatchery,
+        hatchery: values.hatchery ?? '',
         phone: values.phone,
         email: values.email,
         address: values.address,
@@ -171,12 +171,12 @@ const SupplierForm = ({
   useEffect(() => {
     formikSetValues(formikInitialValues);
     if (formType != 'add') {
-      const hatcheryArrays = formikInitialValues.hatchery.split(',');
+      const hatcheryArrays = formikInitialValues.hatchery?.split(',');
-      const hatcheryCreatedOptions = hatcheryArrays.map((item) => ({
+      const hatcheryCreatedOptions = hatcheryArrays?.map((item) => ({
         value: item,
         label: item,
       }));
-      setHatcheryOptionValues(hatcheryCreatedOptions);
+      setHatcheryOptionValues(hatcheryCreatedOptions ?? []);
     }
   }, [formikSetValues, formikInitialValues, setHatcheryOptionValues]);
   useEffect(() => {
@@ -302,7 +302,6 @@ const SupplierForm = ({
             <SelectInput
               isMulti
               createables
-              required
               placeholder='Pilih Hatchery'
               label='Hatchery'
               value={hatcheryOptionsValues}

src/components/pages/production/project-flock/ProjectFlockTable.tsx

@@ -618,7 +618,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
       <ConfirmationModal
         ref={deleteModal.ref}
         type='error'
-        text={`Apakah anda yakin ingin menghapus data Project Flock ini (${selectedProjectFlock?.flock_name})?`}
+        text={`Apakah anda yakin ingin menghapus data Project Flock ini (${selectedRowIds?.length} data)?`}
         secondaryButton={{
           text: 'Tidak',
         }}
@@ -633,7 +633,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
       <ConfirmationModalWithNotes
         ref={confirmModal.ref}
         type={approvalAction == 'APPROVED' ? 'success' : 'error'}
-        text={`Apakah anda yakin ingin ${approvalAction == 'APPROVED' ? 'approve' : 'reject'} data Project Flock ini (${selectedRowIds.length} data)?`}
+        text={`Apakah anda yakin ingin ${approvalAction == 'APPROVED' ? 'approve' : 'reject'} data Project Flock ini (${selectedRowIds?.length} data)?`}
         secondaryButton={{
           text: 'Tidak',
         }}

src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts

@@ -21,6 +21,11 @@ type ProjectFlockFormSchemaType = {
     label: string;
   } | null;
   fcr_id: number;
+  production_standard: {
+    value: number | string;
+    label: string;
+  } | null;
+  production_standard_id: number;
   location: {
     value: number | string;
     label: string;
@@ -100,6 +105,15 @@ export const ProjectFlockFormSchema: Yup.ObjectSchema<ProjectFlockFormSchemaType
       .min(1, 'FCR wajib diisi!')
       .required('FCR wajib diisi!'),
 
+    // Production Standard
+    production_standard: Yup.object({
+      value: Yup.number().required('ID Standar Produksi wajib diisi!'),
+      label: Yup.string().required('Nama Standar Produksi wajib diisi!'),
+    }).nullable(),
+    production_standard_id: Yup.number()
+      .min(1, 'Standar Produksi wajib diisi!')
+      .required('Standar Produksi wajib diisi!'),
+
     // Location
     location: Yup.object({
       value: Yup.number().required('ID Lokasi wajib diisi!'),

src/components/pages/production/project-flock/form/ProjectFlockForm.tsx

@@ -13,6 +13,7 @@ import {
   KandangApi,
   LocationApi,
   NonstockApi,
+  ProductionStandardApi,
 } from '@/services/api/master-data';
 import { Icon } from '@iconify/react';
 import { FormikErrors, useFormik } from 'formik';
@@ -136,6 +137,11 @@ const ProjectFlockForm = ({
     'name'
   );
 
+  const {
+    options: optionsProductionStandards,
+    isLoadingOptions: isLoadingProductionStandards,
+  } = useSelect(ProductionStandardApi.basePath, 'id', 'name');
+
   const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
     search: '',
     location_id: selectedLocation == '' ? '0' : selectedLocation,
@@ -341,6 +347,12 @@ const ProjectFlockForm = ({
             label: initialValues.fcr.name,
           }
         : null,
+      production_standard: initialValues?.production_standard
+        ? {
+            value: initialValues.production_standard?.id,
+            label: initialValues.production_standard.name,
+          }
+        : null,
       location: initialValues?.location
         ? {
             value: initialValues.location?.id,
@@ -356,6 +368,7 @@ const ProjectFlockForm = ({
         'GROWING' | 'LAYING' | undefined
       >,
       fcr_id: initialValues?.fcr?.id ?? 0,
+      production_standard_id: initialValues?.production_standard?.id ?? 0,
       location_id: initialValues?.location?.id ?? 0,
       kandang_ids: initialValues?.kandangs?.map(
         (k: Kandang) => k.id
@@ -400,6 +413,7 @@ const ProjectFlockForm = ({
         area_id: values.area_id as number,
         category: values.category as string,
         fcr_id: values.fcr_id as number,
+        production_standard_id: values.production_standard_id as number,
         location_id: values.location_id as number,
         kandang_ids: values.kandang_ids as number[],
         project_budgets: values.project_budgets.flatMap((budget) => {
@@ -858,6 +872,23 @@ const ProjectFlockForm = ({
                 isClearable
                 isDisabled={formType != 'add'}
               />
+              <SelectInput
+                required
+                label='Standar Produksi'
+                value={formik.values.production_standard as OptionType}
+                onChange={(val) => {
+                  optionChangeHandler(val, 'production_standard');
+                }}
+                options={optionsProductionStandards}
+                isLoading={isLoadingProductionStandards}
+                isError={
+                  formik.touched.production_standard &&
+                  Boolean(formik.errors.production_standard)
+                }
+                errorMessage={formik.errors.production_standard as string}
+                isClearable
+                isDisabled={formType != 'add'}
+              />
               <SelectInput
                 required
                 label='Kategori'

src/config/constant.ts

@@ -264,17 +264,20 @@ export const FLOCK_CATEGORY_OPTIONS = [
     value: 'LAYING',
   },
 ];
-
 export const PRODUCT_FLAG_OPTIONS = [
   { label: 'DOC', value: 'DOC' },
+  { label: 'EKSPEDISI', value: 'EKSPEDISI' },
+  { label: 'FINISHER', value: 'FINISHER' },
+  { label: 'ACTIVE', value: 'IS_ACTIVE' },
+  { label: 'KIMIA', value: 'KIMIA' },
+  { label: 'LAYER', value: 'LAYER' },
+  { label: 'OBAT', value: 'OBAT' },
+  { label: 'OVK', value: 'OVK' },
   { label: 'PAKAN', value: 'PAKAN' },
   { label: 'PRE-STARTER', value: 'PRE-STARTER' },
+  { label: 'PULLET', value: 'PULLET' },
   { label: 'STARTER', value: 'STARTER' },
-  { label: 'FINISHER', value: 'FINISHER' },
-  { label: 'OVK', value: 'OVK' },
-  { label: 'OBAT', value: 'OBAT' },
   { label: 'VITAMIN', value: 'VITAMIN' },
-  { label: 'KIMIA', value: 'KIMIA' },
 ];
 
 export const SUPPLIER_FLAG_OPTIONS = [
@@ -305,7 +308,7 @@ export const FINANCE_INITIAL_BALANCE_TYPE_OPTIONS = [
   { label: 'Saldo Awal Negatif', value: 'NEGATIVE' },
 ];
 
-export const FINANCE_TRANSACTION_STATUS = ['PENJUALAN', 'BIAYA'];
+export const FINANCE_TRANSACTION_STATUS = ['PENJUALAN', 'PEMBELIAN'];
 
 export const FINANCE_INITIAL_BALANCE_STATUS = ['SALDO_AWAL'];
 

src/types/api/production/project-flock.d.ts

@@ -16,6 +16,8 @@ export type BaseProjectFlock = {
   category: string;
   fcr: Fcr;
   fcr_id: number;
+  production_standard: ProductionStandard;
+  production_standard_id: number;
   location: Location;
   location_id: number;
   period: number;
@@ -48,6 +50,7 @@ export type CreateProjectFlockPayload = {
   area_id: number;
   category: string;
   fcr_id: number;
+  production_standard_id: number;
   location_id: number;
   kandang_ids: number[];
   project_budgets?: ProjectFlockBudget[];