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
This commit is contained in:
Rivaldi A N S
2025-12-30 02:47:23 +00:00
14 changed files with 161 additions and 98 deletions
@@ -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,
},
}
: null,
payment_date: initialValues?.payment_date || '',
payment_method_option:
FINANCE_PAYMENT_METHOD_OPTIONS.find(
@@ -97,8 +105,11 @@ const FormFinanceAdd = ({
});
// ===== Options =====
const { options: partyOptions, isLoadingOptions: isLoadingPartyOptions } =
useSelect(
const {
options: partyOptions,
isLoadingOptions: isLoadingPartyOptions,
rawData: partyRawData,
} = useSelect<PartyCommonProps>(
formik.values.party_type_option?.value === 'CUSTOMER'
? CustomerApi.basePath
: SupplierApi.basePath,
@@ -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'
@@ -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;
@@ -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>
@@ -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,
@@ -79,14 +79,14 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
uomId: initialValues?.uom_id ?? 0,
uom: initialValues?.uom
? {
value: initialValues?.uom.id,
label: initialValues?.uom.name,
value: initialValues?.uom?.id,
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,
})) ?? [],
@@ -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)
),
@@ -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' && formData) {
if (formType === 'add') {
// Don't use formData here - will be loaded via useEffect
return {
name: formData.name || '',
project_category: formData.project_category || '',
details: formData.details || [],
name: '',
project_category: '',
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)
// This allows:
// 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
// Load cached data only once on mount for add mode
const [isInitialized, setIsInitialized] = useState(false);
useEffect(() => {
if (formType === 'add' && formData) {
// For add mode, load from cache
if (formType === 'add' && formData && !isInitialized) {
// 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) {
// For detail mode, load from initialValue and convert the details
setIsInitialized(true);
}
// 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
}, [formData, initialValue?.id]); // Trigger when formData or initialValue.id changes
}, [initialValue?.id, formType]);
// ===== 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 newValues = (formik.values.details || []).filter(
(detail) => detail.week !== week
const handleRemoveRow = async (week: number) => {
// Access formik.values directly to get the latest values
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>
)}
<Tooltip
content={
formik.values.project_category === ''
? 'Isi kategori proyek terlebih dahulu'
: ''
}
>
<Button
type='submit'
color={editMode ? 'warning' : 'success'}
className='min-w-24'
disabled={isAddingRow}
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'
@@ -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!')
@@ -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 hatcheryCreatedOptions = hatcheryArrays.map((item) => ({
const hatcheryArrays = formikInitialValues.hatchery?.split(',');
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}
@@ -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',
}}
@@ -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!'),
@@ -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'
+9 -6
View File
@@ -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'];
+3
View File
@@ -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[];