gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-24 15:25:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(FE-337): slicing ui form finance and API integration

Browse Source
This commit is contained in:
randy-ar
2025-12-28 04:28:02 +07:00
parent 6ea25aa3b1
commit 731bec5a94
21 changed files with 1522 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/finance/add/FormFinanceAdd.tsx
+71 -59
View File
@@ -14,16 +14,20 @@ import TextInput from '@/components/input/TextInput';
import {
FinanceFormSchema,
FinanceFormValues,
FinancePayload,
} from '@/components/pages/finance/add/FormFinanceAdd.schema';
import {
FINANCE_PARTY_TYPE_OPTIONS,
FINANCE_PAYMENT_METHOD_OPTIONS,
} from '@/config/constant';
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
import { formatTitleCase } from '@/lib/helper';
import { formatDate, formatTitleCase } from '@/lib/helper';
import { FinanceApi } from '@/services/api/finance';
import { BankApi, CustomerApi, SupplierApi } from '@/services/api/master-data';
import {
CreateFinancePayment,
Finance,
UpdateFinancePayment,
} from '@/types/api/finance/finance';
import { Bank } from '@/types/api/master-data/bank';
import { useFormik } from 'formik';
import { useRouter } from 'next/navigation';
@@ -32,7 +36,7 @@ import toast from 'react-hot-toast';
interface FormFinanceAddProps {
type?: 'add' | 'edit';
initialValues?: FinanceFormValues & { id?: number };
initialValues?: Finance;
}
const FormFinanceAdd = ({
@@ -44,14 +48,28 @@ const FormFinanceAdd = ({
// ===== Formik =====
const formikInitialValues = useMemo((): FinanceFormValues => {
return {
party_type_option: initialValues?.party_type_option || null,
party_id_option: initialValues?.party_id_option || null,
party_type_option:
FINANCE_PARTY_TYPE_OPTIONS.find(
(option) => option.value === initialValues?.party.type
) || null,
party_id_option: {
label: initialValues?.party.name || '',
value: initialValues?.party.id || 0,
},
payment_date: initialValues?.payment_date || '',
payment_method_option: initialValues?.payment_method_option || null,
bank_id_option: initialValues?.bank_id_option || null,
party_account_number: initialValues?.party_account_number || '',
payment_method_option:
FINANCE_PAYMENT_METHOD_OPTIONS.find(
(option) => option.value === initialValues?.payment_method
) || null,
bank_id_option: initialValues?.bank
? {
label: initialValues.bank.name,
value: initialValues.bank.id,
}
: null,
party_account_number: initialValues?.party.account_number || '',
reference_number: initialValues?.reference_number || '',
nominal: initialValues?.nominal || '',
nominal: initialValues?.nominal.toString() || '',
notes: initialValues?.notes || '',
};
}, [initialValues]);
@@ -59,6 +77,8 @@ const FormFinanceAdd = ({
const formik = useFormik<FinanceFormValues>({
initialValues: formikInitialValues,
validationSchema: FinanceFormSchema,
validateOnChange: true,
validateOnBlur: true,
onSubmit: async (values) => {
const payload = transformFormValuesToPayload(values);
@@ -96,11 +116,11 @@ const FormFinanceAdd = ({
// ===== Helper Functions =====
const transformFormValuesToPayload = (
values: FinanceFormValues
): FinancePayload => {
): CreateFinancePayment => {
return {
party_id: Number(values.party_id_option?.value) || 0,
party_type: (values.party_type_option?.value as string) || '',
payment_date: values.payment_date,
payment_date: formatDate(values.payment_date, 'YYYY-MM-DD'),
payment_method: (values.payment_method_option?.value as string) || '',
bank_id: Number(values.bank_id_option?.value) || 0,
reference_number: values.reference_number,
@@ -111,7 +131,7 @@ const FormFinanceAdd = ({
// ===== Handler =====
const createFinance = useCallback(
async (payload: FinancePayload) => {
async (payload: CreateFinancePayment) => {
const response = await FinanceApi.create(payload);
if (isResponseError(response)) {
@@ -126,7 +146,7 @@ const FormFinanceAdd = ({
[router]
);
const updateFinance = useCallback(
async (financeId: number, payload: FinancePayload) => {
async (financeId: number, payload: UpdateFinancePayment) => {
const response = await FinanceApi.update(financeId, payload);
if (isResponseError(response)) {
@@ -145,7 +165,10 @@ const FormFinanceAdd = ({
<>
<section className='w-full max-w-xl mx-auto'>
<div className='flex flex-col gap-6 p-6'>
<FormHeader title='Tambah Data Keuangan' />
<FormHeader
title={`${type === 'add' ? 'Tambah' : 'Ubah'} Data Keuangan`}
backUrl='/finance'
/>
<form className='flex flex-col gap-4' onSubmit={formik.handleSubmit}>
<SelectInput
label='Jenis Transaksi'
@@ -154,18 +177,15 @@ const FormFinanceAdd = ({
value={formik.values.party_type_option}
onChange={(value) => {
formik.setFieldValue('party_type_option', value);
formik.setFieldTouched('party_type_option', true);
}}
isError={
!!(
formik.touched.party_type_option &&
isError={Boolean(
formik.touched.party_type_option &&
formik.errors.party_type_option
)
}
)}
errorMessage={
formik.touched.party_type_option &&
formik.errors.party_type_option
? String(formik.errors.party_type_option)
? formik.errors.party_type_option
: ''
}
required
@@ -184,18 +204,14 @@ const FormFinanceAdd = ({
value={formik.values.party_id_option}
onChange={(value) => {
formik.setFieldValue('party_id_option', value);
formik.setFieldTouched('party_id_option', true);
}}
isLoading={isLoadingPartyOptions}
isError={
!!(
formik.touched.party_id_option &&
formik.errors.party_id_option
)
}
isError={Boolean(
formik.touched.party_id_option && formik.errors.party_id_option
)}
errorMessage={
formik.touched.party_id_option && formik.errors.party_id_option
? String(formik.errors.party_id_option)
? formik.errors.party_id_option
: ''
}
required
@@ -209,9 +225,9 @@ const FormFinanceAdd = ({
value={formik.values.payment_date}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
isError={
!!(formik.touched.payment_date && formik.errors.payment_date)
}
isError={Boolean(
formik.touched.payment_date && formik.errors.payment_date
)}
errorMessage={
formik.touched.payment_date && formik.errors.payment_date
? formik.errors.payment_date
@@ -226,18 +242,15 @@ const FormFinanceAdd = ({
value={formik.values.payment_method_option}
onChange={(value) => {
formik.setFieldValue('payment_method_option', value);
formik.setFieldTouched('payment_method_option', true);
}}
isError={
!!(
formik.touched.payment_method_option &&
isError={Boolean(
formik.touched.payment_method_option &&
formik.errors.payment_method_option
)
}
)}
errorMessage={
formik.touched.payment_method_option &&
formik.errors.payment_method_option
? String(formik.errors.payment_method_option)
? formik.errors.payment_method_option
: ''
}
required
@@ -268,17 +281,14 @@ const FormFinanceAdd = ({
value={formik.values.bank_id_option}
onChange={(value) => {
formik.setFieldValue('bank_id_option', value);
formik.setFieldTouched('bank_id_option', true);
}}
isLoading={isLoadingBankOptions}
isError={
!!(
formik.touched.bank_id_option && formik.errors.bank_id_option
)
}
isError={Boolean(
formik.touched.bank_id_option && formik.errors.bank_id_option
)}
errorMessage={
formik.touched.bank_id_option && formik.errors.bank_id_option
? String(formik.errors.bank_id_option)
? formik.errors.bank_id_option
: ''
}
required
@@ -291,12 +301,10 @@ const FormFinanceAdd = ({
value={formik.values.party_account_number}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
isError={
!!(
formik.touched.party_account_number &&
isError={Boolean(
formik.touched.party_account_number &&
formik.errors.party_account_number
)
}
)}
errorMessage={
formik.touched.party_account_number &&
formik.errors.party_account_number
@@ -312,12 +320,10 @@ const FormFinanceAdd = ({
value={formik.values.reference_number}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
isError={
!!(
formik.touched.reference_number &&
isError={Boolean(
formik.touched.reference_number &&
formik.errors.reference_number
)
}
)}
errorMessage={
formik.touched.reference_number &&
formik.errors.reference_number
@@ -333,7 +339,7 @@ const FormFinanceAdd = ({
value={formik.values.nominal}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
isError={!!(formik.touched.nominal && formik.errors.nominal)}
isError={Boolean(formik.touched.nominal && formik.errors.nominal)}
errorMessage={
formik.touched.nominal && formik.errors.nominal
? formik.errors.nominal
@@ -348,12 +354,13 @@ const FormFinanceAdd = ({
value={formik.values.notes}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
isError={!!(formik.touched.notes && formik.errors.notes)}
isError={Boolean(formik.touched.notes && formik.errors.notes)}
errorMessage={
formik.touched.notes && formik.errors.notes
? formik.errors.notes
: ''
}
required
/>
<div className='flex justify-center gap-4'>
<Button
@@ -361,10 +368,15 @@ const FormFinanceAdd = ({
color='warning'
className='w-min-24'
onClick={() => formik.resetForm()}
disabled={formik.isSubmitting}
>
Reset
</Button>
<Button type='submit' className='w-min-24'>
<Button
type='submit'
className='w-min-24'
disabled={formik.isSubmitting || !formik.isValid}
>
Submit
</Button>
</div>