mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-24 15:25:46 +00:00
feat(FE-337): slicing ui form finance and API integration
This commit is contained in:
randy-ar
@@ -0,0 +1,251 @@
|
||||
'use client';
|
||||
|
||||
import Button from '@/components/Button';
|
||||
import { FormHeader } from '@/components/helper/form/FormHeader';
|
||||
import DateInput from '@/components/input/DateInput';
|
||||
import NumberInput from '@/components/input/NumberInput';
|
||||
import SelectInput, {
|
||||
OptionType,
|
||||
useSelect,
|
||||
} from '@/components/input/SelectInput';
|
||||
import TextArea from '@/components/input/TextArea';
|
||||
import {
|
||||
InjectionFormSchema,
|
||||
InjectionFormValues,
|
||||
} from '@/components/pages/finance/add/injection/FormFinanceInjection.schema';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { formatDate } from '@/lib/helper';
|
||||
import { FinanceApi } from '@/services/api/finance';
|
||||
import { BankApi } from '@/services/api/master-data';
|
||||
import {
|
||||
CreateInjection,
|
||||
Finance,
|
||||
UpdateInjection,
|
||||
} from '@/types/api/finance/finance';
|
||||
import { Bank } from '@/types/api/master-data/bank';
|
||||
import { useFormik } from 'formik';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
interface FormFinanceInjectionProps {
|
||||
type?: 'add' | 'edit';
|
||||
initialValues?: Finance;
|
||||
}
|
||||
|
||||
const FormFinanceInjection = ({
|
||||
type = 'add',
|
||||
initialValues,
|
||||
}: FormFinanceInjectionProps) => {
|
||||
const router = useRouter();
|
||||
|
||||
// ===== Formik =====
|
||||
const formikInitialValues = useMemo((): InjectionFormValues => {
|
||||
return {
|
||||
bank_id_option: initialValues?.bank
|
||||
? {
|
||||
label: initialValues.bank.name,
|
||||
value: initialValues.bank.id,
|
||||
}
|
||||
: null,
|
||||
adjustment_date: initialValues?.payment_date || '',
|
||||
nominal: initialValues?.nominal?.toString() || '',
|
||||
note: initialValues?.notes || '',
|
||||
};
|
||||
}, [initialValues]);
|
||||
|
||||
const formik = useFormik<InjectionFormValues>({
|
||||
initialValues: formikInitialValues,
|
||||
validationSchema: InjectionFormSchema,
|
||||
validateOnChange: true,
|
||||
validateOnBlur: true,
|
||||
onSubmit: async (values) => {
|
||||
const payload = transformFormValuesToPayload(values);
|
||||
|
||||
switch (type) {
|
||||
case 'add':
|
||||
await createInjection(payload);
|
||||
break;
|
||||
|
||||
case 'edit':
|
||||
if (initialValues?.id) {
|
||||
await updateInjection(initialValues.id, payload);
|
||||
}
|
||||
break;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// ===== Options =====
|
||||
const {
|
||||
options: bankOptions,
|
||||
rawData: bankRawData,
|
||||
isLoadingOptions: isLoadingBankOptions,
|
||||
} = useSelect<Bank>(BankApi.basePath, 'id', 'name', '', { limit: 'limit' });
|
||||
|
||||
// ===== Helper Functions =====
|
||||
const transformFormValuesToPayload = (
|
||||
values: InjectionFormValues
|
||||
): CreateInjection => {
|
||||
return {
|
||||
bank_id: Number(values.bank_id_option?.value) || 0,
|
||||
adjustment_date: formatDate(values.adjustment_date, 'YYYY-MM-DD'),
|
||||
nominal: Number(values.nominal.replace(/\D/g, '')) || 0,
|
||||
notes: values.note,
|
||||
};
|
||||
};
|
||||
|
||||
// ===== Handler =====
|
||||
const createInjection = useCallback(
|
||||
async (payload: CreateInjection) => {
|
||||
const response = await FinanceApi.createInjections(payload);
|
||||
|
||||
if (isResponseError(response)) {
|
||||
toast.error(response.message);
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success('Injeksi dana berhasil ditambahkan');
|
||||
router.refresh();
|
||||
router.push('/finance');
|
||||
},
|
||||
[router]
|
||||
);
|
||||
|
||||
const updateInjection = useCallback(
|
||||
async (financeId: number, payload: UpdateInjection) => {
|
||||
const response = await FinanceApi.updateInjections(financeId, payload);
|
||||
|
||||
if (isResponseError(response)) {
|
||||
toast.error(response.message);
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success('Injeksi dana berhasil diperbarui');
|
||||
router.refresh();
|
||||
router.push('/finance');
|
||||
},
|
||||
[router]
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className='w-full max-w-xl mx-auto'>
|
||||
<div className='flex flex-col gap-6 p-6'>
|
||||
<FormHeader
|
||||
title={`${type === 'add' ? 'Tambah' : 'Ubah'} Injeksi Dana`}
|
||||
backUrl='/finance'
|
||||
/>
|
||||
<form className='flex flex-col gap-4' onSubmit={formik.handleSubmit}>
|
||||
<SelectInput
|
||||
label='Bank'
|
||||
placeholder='Pilih bank'
|
||||
options={
|
||||
isResponseSuccess(bankRawData)
|
||||
? bankOptions.map((option) => ({
|
||||
label:
|
||||
bankRawData.data?.find(
|
||||
(item) => item.id === option.value
|
||||
)?.alias +
|
||||
' - ' +
|
||||
bankRawData.data?.find(
|
||||
(item) => item.id === option.value
|
||||
)?.account_number +
|
||||
' - ' +
|
||||
bankRawData.data?.find(
|
||||
(item) => item.id === option.value
|
||||
)?.owner,
|
||||
value: option.value,
|
||||
}))
|
||||
: []
|
||||
}
|
||||
value={formik.values.bank_id_option}
|
||||
onChange={(value) => {
|
||||
formik.setFieldValue('bank_id_option', value);
|
||||
}}
|
||||
isLoading={isLoadingBankOptions}
|
||||
isError={Boolean(
|
||||
formik.touched.bank_id_option && formik.errors.bank_id_option
|
||||
)}
|
||||
errorMessage={
|
||||
formik.touched.bank_id_option && formik.errors.bank_id_option
|
||||
? formik.errors.bank_id_option
|
||||
: ''
|
||||
}
|
||||
required
|
||||
isClearable
|
||||
/>
|
||||
<DateInput
|
||||
label='Tanggal Penyesuaian'
|
||||
placeholder='Pilih tanggal penyesuaian'
|
||||
name='adjustment_date'
|
||||
value={formik.values.adjustment_date}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={Boolean(
|
||||
formik.touched.adjustment_date && formik.errors.adjustment_date
|
||||
)}
|
||||
errorMessage={
|
||||
formik.touched.adjustment_date && formik.errors.adjustment_date
|
||||
? formik.errors.adjustment_date
|
||||
: ''
|
||||
}
|
||||
required
|
||||
/>
|
||||
<NumberInput
|
||||
label='Nominal'
|
||||
placeholder='Masukkan nominal'
|
||||
name='nominal'
|
||||
value={formik.values.nominal}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={Boolean(formik.touched.nominal && formik.errors.nominal)}
|
||||
errorMessage={
|
||||
formik.touched.nominal && formik.errors.nominal
|
||||
? formik.errors.nominal
|
||||
: ''
|
||||
}
|
||||
allowNegative={true}
|
||||
required
|
||||
/>
|
||||
<TextArea
|
||||
label='Catatan'
|
||||
placeholder='Masukkan catatan'
|
||||
name='note'
|
||||
value={formik.values.note}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={Boolean(formik.touched.note && formik.errors.note)}
|
||||
errorMessage={
|
||||
formik.touched.note && formik.errors.note
|
||||
? formik.errors.note
|
||||
: ''
|
||||
}
|
||||
required
|
||||
/>
|
||||
<div className='flex justify-center gap-4'>
|
||||
<Button
|
||||
type='reset'
|
||||
color='warning'
|
||||
className='w-min-24'
|
||||
onClick={() => formik.resetForm()}
|
||||
disabled={formik.isSubmitting}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
<Button
|
||||
type='submit'
|
||||
className='w-min-24'
|
||||
disabled={formik.isSubmitting || !formik.isValid}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default FormFinanceInjection;
|
||||
Reference in New Issue
Block a user