gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-20 21:41:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(FE-337): slicing ui form add finance

Browse Source
This commit is contained in:
randy-ar
2025-12-24 18:45:33 +07:00
parent 8c95dc8327
commit 4ddd1dc8e3
12 changed files with 499 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/finance/FinanceTable.tsx
+23 -21
View File
@@ -264,7 +264,7 @@ const FinanceTable = () => {
<Button color='info' className='text-white min-w-24'>
Saldo Awal
</Button>
<Button color='primary' className='min-w-24'>
<Button color='primary' className='min-w-24' href='/finance/add'>
Tambah
</Button>
</div>
@@ -300,26 +300,28 @@ const FinanceTable = () => {
onChange={transactionTypeChangeHandler}
isClearable
/>
{isResponseSuccess(bankRawData) && (
<SelectInput
options={bankOptions.map((bank) => ({
label:
bankRawData.data.find((data) => data.id === bank.value)
?.alias +
' - ' +
bankRawData.data.find((data) => data.id === bank.value)
?.account_number +
' - ' +
bankRawData.data.find((data) => data.id === bank.value)
?.owner,
value: bank.value,
}))}
label='Bank'
value={selectedBank}
onChange={bankChangeHandler}
isClearable
/>
)}
<SelectInput
options={
isResponseSuccess(bankRawData)
? bankOptions.map((bank) => ({
label:
bankRawData.data.find((data) => data.id === bank.value)
?.alias +
' - ' +
bankRawData.data.find((data) => data.id === bank.value)
?.account_number +
' - ' +
bankRawData.data.find((data) => data.id === bank.value)
?.owner,
value: bank.value,
}))
: []
}
label='Bank'
value={selectedBank}
onChange={bankChangeHandler}
isClearable
/>
<SelectInput
options={partyTypeOptions}
label='Pihak'
src/components/pages/finance/add/FormFinanceAdd.schema.ts
+75
View File
@@ -0,0 +1,75 @@
import * as Yup from 'yup';
import { OptionType } from '@/components/input/SelectInput';
/**
* API Payload format:
* {
"party_id": 1,
"party_type": "CUSTOMER",
"payment_date": "2025-11-21",
"payment_method": "Transfer",
"bank_id": 1,
"reference_number": "DO.MBU.123",
"nominal": 25000000,
"notes": "Pembayaran piutang penjualan telur"
}
*/
// Type for API payload (what gets sent to the server)
export type FinancePayload = {
party_id: number;
party_type: string;
payment_date: string;
payment_method: string;
bank_id: number;
reference_number: string;
nominal: number;
notes: string;
};
// Type for form values (includes option objects for SelectInput)
export type FinanceFormValues = {
party_type_option: OptionType | null;
party_id_option: OptionType | null;
party_account_number: string;
payment_date: string;
payment_method_option: OptionType | null;
bank_id_option: OptionType | null;
reference_number: string;
nominal: string;
notes: string;
};
export const FinanceFormSchema = Yup.object().shape({
party_type_option: Yup.object({
label: Yup.string().required('Wajib Diisi'),
value: Yup.string().required('Wajib Diisi'),
})
.nullable()
.required('Jenis transaksi wajib diisi'),
party_id_option: Yup.object({
label: Yup.string().required('Wajib Diisi'),
value: Yup.number().required('Wajib Diisi'),
})
.nullable()
.required('Pihak wajib diisi'),
party_account_number: Yup.string().required('Nomor rekening wajib diisi'),
payment_date: Yup.string().required('Tanggal pembayaran wajib diisi'),
payment_method_option: Yup.object({
label: Yup.string().required('Wajib Diisi'),
value: Yup.string().required('Wajib Diisi'),
})
.nullable()
.required('Metode pembayaran wajib diisi'),
bank_id_option: Yup.object({
label: Yup.string().required('Wajib Diisi'),
value: Yup.number().required('Wajib Diisi'),
})
.nullable()
.required('Bank wajib diisi'),
reference_number: Yup.string().required('Nomor referensi wajib diisi'),
nominal: Yup.string().required('Nominal wajib diisi'),
notes: Yup.string().required('Catatan wajib diisi'),
});
export const UpdateFinanceFormSchema = FinanceFormSchema;
src/components/pages/finance/add/FormFinanceAdd.tsx
+378
View File
@@ -0,0 +1,378 @@
'use client';
import Button from '@/components/Button';
import Card from '@/components/Card';
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 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 { FinanceApi } from '@/services/api/finance';
import { BankApi, CustomerApi, SupplierApi } from '@/services/api/master-data';
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 FormFinanceAddProps {
type?: 'add' | 'edit';
initialValues?: FinanceFormValues & { id?: number };
}
const FormFinanceAdd = ({
type = 'add',
initialValues,
}: FormFinanceAddProps) => {
const router = useRouter();
// ===== Formik =====
const formikInitialValues = useMemo((): FinanceFormValues => {
return {
party_type_option: initialValues?.party_type_option || null,
party_id_option: initialValues?.party_id_option || null,
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 || '',
reference_number: initialValues?.reference_number || '',
nominal: initialValues?.nominal || '',
notes: initialValues?.notes || '',
};
}, [initialValues]);
const formik = useFormik<FinanceFormValues>({
initialValues: formikInitialValues,
validationSchema: FinanceFormSchema,
onSubmit: async (values) => {
const payload = transformFormValuesToPayload(values);
switch (type) {
case 'add':
await createFinance(payload);
break;
case 'edit':
if (initialValues?.id) {
await updateFinance(initialValues.id, payload);
}
break;
}
},
});
// ===== Options =====
const { options: partyOptions, isLoadingOptions: isLoadingPartyOptions } =
useSelect(
formik.values.party_type_option?.value === 'CUSTOMER'
? CustomerApi.basePath
: SupplierApi.basePath,
'id',
'name',
'',
{ limit: 'limit' }
);
const {
options: bankOptions,
rawData: bankRawData,
isLoadingOptions: isLoadingBankOptions,
} = useSelect<Bank>(BankApi.basePath, 'id', 'name', '', { limit: 'limit' });
// ===== Helper Functions =====
const transformFormValuesToPayload = (
values: FinanceFormValues
): FinancePayload => {
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_method: (values.payment_method_option?.value as string) || '',
bank_id: Number(values.bank_id_option?.value) || 0,
reference_number: values.reference_number,
nominal: Number(values.nominal.replace(/\D/g, '')) || 0,
notes: values.notes,
};
};
// ===== Handler =====
const createFinance = useCallback(
async (payload: FinancePayload) => {
const response = await FinanceApi.create(payload);
if (isResponseError(response)) {
toast.error(response.message);
return;
}
toast.success('Data berhasil ditambahkan');
router.refresh();
router.push('/finance');
},
[router]
);
const updateFinance = useCallback(
async (financeId: number, payload: FinancePayload) => {
const response = await FinanceApi.update(financeId, payload);
if (isResponseError(response)) {
toast.error(response.message);
return;
}
toast.success('Data 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='Tambah Data Keuangan' />
<form className='flex flex-col gap-4' onSubmit={formik.handleSubmit}>
<SelectInput
label='Jenis Transaksi'
placeholder='Pilih jenis transaksi'
options={FINANCE_PARTY_TYPE_OPTIONS}
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 &&
formik.errors.party_type_option
)
}
errorMessage={
formik.touched.party_type_option &&
formik.errors.party_type_option
? String(formik.errors.party_type_option)
: ''
}
required
isClearable
/>
<SelectInput
label={
formik.values.party_type_option?.value
? formatTitleCase(
formik.values.party_type_option.value as string
)
: 'Pilih Jenis Transaksi Dahulu'
}
placeholder={`Pilih ${formik.values.party_type_option?.value ? formatTitleCase(formik.values.party_type_option.value as string) : 'jenis transaksi dahulu'}`}
options={partyOptions}
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
)
}
errorMessage={
formik.touched.party_id_option && formik.errors.party_id_option
? String(formik.errors.party_id_option)
: ''
}
required
isClearable
isDisabled={!formik.values.party_type_option?.value}
/>
<DateInput
label='Tanggal'
placeholder='Pilih tanggal'
name='payment_date'
value={formik.values.payment_date}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
isError={
!!(formik.touched.payment_date && formik.errors.payment_date)
}
errorMessage={
formik.touched.payment_date && formik.errors.payment_date
? formik.errors.payment_date
: ''
}
required
/>
<SelectInput
label='Metode Pembayaran'
placeholder='Pilih metode pembayaran'
options={FINANCE_PAYMENT_METHOD_OPTIONS}
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 &&
formik.errors.payment_method_option
)
}
errorMessage={
formik.touched.payment_method_option &&
formik.errors.payment_method_option
? String(formik.errors.payment_method_option)
: ''
}
required
isClearable
/>
<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);
formik.setFieldTouched('bank_id_option', true);
}}
isLoading={isLoadingBankOptions}
isError={
!!(
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)
: ''
}
required
isClearable
/>
<TextInput
label={`Nomor Rekening ${formik.values.party_type_option?.value ? formatTitleCase(formik.values.party_type_option.value as string) : 'Pihak'}`}
placeholder={`Masukkan nomor rekening ${formik.values.party_type_option?.value ? formatTitleCase(formik.values.party_type_option.value as string) : 'pihak'}`}
name='party_account_number'
value={formik.values.party_account_number}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
isError={
!!(
formik.touched.party_account_number &&
formik.errors.party_account_number
)
}
errorMessage={
formik.touched.party_account_number &&
formik.errors.party_account_number
? formik.errors.party_account_number
: ''
}
required
/>
<TextInput
label='Nomor Referensi'
placeholder='Masukkan nomor referensi'
name='reference_number'
value={formik.values.reference_number}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
isError={
!!(
formik.touched.reference_number &&
formik.errors.reference_number
)
}
errorMessage={
formik.touched.reference_number &&
formik.errors.reference_number
? formik.errors.reference_number
: ''
}
required
/>
<NumberInput
label='Nominal'
placeholder='Masukkan nominal'
name='nominal'
value={formik.values.nominal}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
isError={!!(formik.touched.nominal && formik.errors.nominal)}
errorMessage={
formik.touched.nominal && formik.errors.nominal
? formik.errors.nominal
: ''
}
required
/>
<TextArea
label='Catatan'
placeholder='Masukkan catatan'
name='notes'
value={formik.values.notes}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
isError={!!(formik.touched.notes && formik.errors.notes)}
errorMessage={
formik.touched.notes && formik.errors.notes
? formik.errors.notes
: ''
}
/>
<div className='flex justify-center gap-4'>
<Button
type='reset'
color='warning'
className='w-min-24'
onClick={() => formik.resetForm()}
>
Reset
</Button>
<Button type='submit' className='w-min-24'>
Submit
</Button>
</div>
</form>
</div>
</section>
</>
);
};
export default FormFinanceAdd;
src/components/pages/finance/add/initial-balance/FinanceAddInitialBalance.tsx
View File
src/components/pages/finance/add/FinanceAdd.schema.ts → src/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance.schema.ts
View File
src/components/pages/finance/add/FinanceAdd.tsx → src/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance.tsx
View File
src/components/pages/finance/adjust/FinanceAdjust.schema.ts
View File
src/components/pages/finance/adjust/FinanceAdjust.tsx
-5
View File
@@ -1,5 +0,0 @@
const FinanceAdjust = () => {
return <div>Finance Adjust</div>;
};
export default FinanceAdjust;
src/components/pages/finance/add/initial-balance/FinanceAddInitialBalance.schema.ts → src/components/pages/finance/adjust/FormFinanceAdjust.schema.ts
View File
src/components/pages/finance/adjust/FormFinanceAdjust.tsx
+5
View File
@@ -0,0 +1,5 @@
const FormFinanceAdjust = () => {
return <div>Finance Adjust</div>;
};
export default FormFinanceAdjust;