mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
feat: create FinanceForm component
This commit is contained in:
ValdiANS
@@ -0,0 +1,386 @@
|
||||
'use client';
|
||||
|
||||
import { useModal } from '@/components/Modal';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { FinanceApi } from '@/services/api/finance';
|
||||
import {
|
||||
Finance,
|
||||
CreateFinancePayload,
|
||||
UpdateFinancePayload,
|
||||
} from '@/types/api/finance';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
import { useFormik } from 'formik';
|
||||
import Button from '@/components/Button';
|
||||
import { Icon } from '@iconify/react';
|
||||
import TextInput from '@/components/input/TextInput';
|
||||
import NumberInput from '@/components/input/NumberInput';
|
||||
import { cn } from '@/lib/helper';
|
||||
import ConfirmationModal from '@/components/modal/ConfirmationModal';
|
||||
import TextArea from '@/components/input/TextArea';
|
||||
import SelectInput, {
|
||||
OptionType,
|
||||
useSelect,
|
||||
} from '@/components/input/SelectInput';
|
||||
import DateInput from '@/components/input/DateInput';
|
||||
import { BankApi, CustomerApi } from '@/services/api/master-data';
|
||||
import { Customer } from '@/types/api/master-data/customer';
|
||||
import { Bank } from '@/types/api/master-data/bank';
|
||||
import {
|
||||
FINANCE_PAYMENT_METHOD_OPTIONS,
|
||||
FINANCE_TRANSACTION_TYPE_OPTIONS,
|
||||
} from '@/config/constant';
|
||||
import { FinanceFormSchema, FinanceFormValues } from './FinanceForm.schema';
|
||||
import Link from 'next/link';
|
||||
|
||||
interface FinanceFormProps {
|
||||
formType?: 'add' | 'edit' | 'detail';
|
||||
initialValues?: Finance;
|
||||
}
|
||||
|
||||
const FinanceForm = ({ formType = 'add', initialValues }: FinanceFormProps) => {
|
||||
const router = useRouter();
|
||||
const deleteModal = useModal();
|
||||
|
||||
const [financeFormErrorMessage, fileFormErrorMessage] = useState('');
|
||||
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
||||
|
||||
// API Options
|
||||
const {
|
||||
options: customerOptions,
|
||||
isLoadingOptions: isLoadingCustomerOptions,
|
||||
setInputValue: setCustomerInputValue,
|
||||
} = useSelect<Customer>(CustomerApi.basePath, 'id', 'name');
|
||||
|
||||
const {
|
||||
options: bankOptions,
|
||||
isLoadingOptions: isLoadingBankOptions,
|
||||
setInputValue: setBankInputValue,
|
||||
} = useSelect<Bank>(BankApi.basePath, 'id', 'name');
|
||||
|
||||
const createFinanceHandler = useCallback(
|
||||
async (payload: CreateFinancePayload) => {
|
||||
const createFinanceRes = await FinanceApi.create(payload);
|
||||
|
||||
if (isResponseError(createFinanceRes)) {
|
||||
fileFormErrorMessage(createFinanceRes.message);
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success(createFinanceRes?.message as string);
|
||||
router.push('/finance');
|
||||
},
|
||||
[router]
|
||||
);
|
||||
|
||||
// Note: Update and Delete handlers are not strictly needed for "add" page but good practice to structure for future
|
||||
const deleteFinanceHandler = () => {
|
||||
deleteModal.openModal();
|
||||
};
|
||||
|
||||
const confirmationModalDeleteclickHandler = async () => {
|
||||
// Implement delete logic if needed
|
||||
setIsDeleteLoading(true);
|
||||
// await FinanceApi.delete(initialValues?.id as number);
|
||||
deleteModal.closeModal();
|
||||
setIsDeleteLoading(false);
|
||||
router.push('/finance');
|
||||
};
|
||||
|
||||
const formikInitialValues = useMemo<FinanceFormValues>(() => {
|
||||
return {
|
||||
transactionType: initialValues
|
||||
? {
|
||||
value: initialValues.transaction_type,
|
||||
label: initialValues.transaction_type,
|
||||
} // Should map properly if labels differ
|
||||
: null,
|
||||
customerId: initialValues ? null : null, // ID not directly in BaseFinance without processing, assume add mode mostly
|
||||
customer: initialValues
|
||||
? { value: 0, label: initialValues.customer_name }
|
||||
: null,
|
||||
paymentDate: initialValues?.payment_date ?? '',
|
||||
paymentMethod: প্রাথমিকMethods(initialValues?.payment_method),
|
||||
bankId: null,
|
||||
bank: initialValues ? { value: 0, label: initialValues.bank_name } : null,
|
||||
supplierBankAccountNumber: '',
|
||||
referenceNumber: initialValues?.reference_number ?? '',
|
||||
amount: initialValues
|
||||
? String(initialValues.revenue_amount || initialValues.expense_amount)
|
||||
: '',
|
||||
notes: '',
|
||||
};
|
||||
}, [initialValues]);
|
||||
|
||||
function প্রাথমিকMethods(method?: string) {
|
||||
if (!method) return null;
|
||||
return (
|
||||
FINANCE_PAYMENT_METHOD_OPTIONS.find((o) => o.value === method) ?? {
|
||||
value: method,
|
||||
label: method,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
const formik = useFormik<FinanceFormValues>({
|
||||
initialValues: formikInitialValues,
|
||||
validationSchema: FinanceFormSchema,
|
||||
onSubmit: async (values) => {
|
||||
fileFormErrorMessage('');
|
||||
|
||||
const payload: CreateFinancePayload = {
|
||||
transaction_type: (values.transactionType as OptionType)
|
||||
.value as string,
|
||||
customer_id: values.customer ? (values.customer.value as number) : 0,
|
||||
payment_date: values.paymentDate,
|
||||
payment_method: (values.paymentMethod as OptionType).value as string,
|
||||
bank_id: values.bank ? (values.bank.value as number) : 0,
|
||||
supplier_bank_account_number: values.supplierBankAccountNumber,
|
||||
reference_number: values.referenceNumber,
|
||||
amount: Number(values.amount),
|
||||
notes: values.notes,
|
||||
};
|
||||
|
||||
if (formType === 'add') {
|
||||
await createFinanceHandler(payload);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const { setValues: formikSetValues } = formik;
|
||||
|
||||
useEffect(() => {
|
||||
if (formType !== 'add' && initialValues) {
|
||||
// Hydrate logic would go here if editing
|
||||
}
|
||||
}, [formType, initialValues]);
|
||||
|
||||
// Helper for select changes
|
||||
const handleSelectChange = (
|
||||
fieldName: keyof FinanceFormValues,
|
||||
val: OptionType | null
|
||||
) => {
|
||||
formik.setFieldValue(fieldName, val);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className='w-full max-w-xl'>
|
||||
<header className='flex flex-col gap-4'>
|
||||
<Button
|
||||
href='/finance'
|
||||
variant='link'
|
||||
className='w-fit p-0 text-primary'
|
||||
>
|
||||
<Icon icon='uil:arrow-left' width={24} height={24} />
|
||||
Kembali
|
||||
</Button>
|
||||
|
||||
<h1 className='text-2xl font-bold text-center'>
|
||||
{formType === 'add' && 'Tambah Keuangan'}
|
||||
{formType === 'edit' && 'Ubah Keuangan'}
|
||||
{formType === 'detail' && 'Detail Keuangan'}
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
<form
|
||||
onSubmit={formik.handleSubmit}
|
||||
className='w-full mt-8 flex flex-col gap-6'
|
||||
>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<SelectInput
|
||||
required
|
||||
label='Pilih Jenis Transaksi'
|
||||
placeholder='Pilih Jenis Transaksi'
|
||||
options={FINANCE_TRANSACTION_TYPE_OPTIONS}
|
||||
value={formik.values.transactionType}
|
||||
onChange={(val) =>
|
||||
handleSelectChange('transactionType', val as OptionType)
|
||||
}
|
||||
isError={
|
||||
formik.touched.transactionType &&
|
||||
Boolean(formik.errors.transactionType)
|
||||
}
|
||||
errorMessage={formik.errors.transactionType as string}
|
||||
isDisabled={formType === 'detail'}
|
||||
/>
|
||||
|
||||
<SelectInput
|
||||
required
|
||||
label='Customer'
|
||||
placeholder='Pilih Customer'
|
||||
options={customerOptions}
|
||||
isLoading={isLoadingCustomerOptions}
|
||||
onInputChange={setCustomerInputValue}
|
||||
value={formik.values.customer}
|
||||
onChange={(val) =>
|
||||
handleSelectChange('customer', val as OptionType)
|
||||
}
|
||||
isError={
|
||||
formik.touched.customer && Boolean(formik.errors.customer)
|
||||
}
|
||||
errorMessage={formik.errors.customer as string} // Schema logic handles this validation conditionally
|
||||
isDisabled={formType === 'detail'}
|
||||
/>
|
||||
|
||||
<DateInput
|
||||
required
|
||||
label='Tanggal Pembayaran'
|
||||
name='paymentDate'
|
||||
placeholder='Pilih Tanggal Pembayaran'
|
||||
value={formik.values.paymentDate}
|
||||
onChange={(e) =>
|
||||
formik.setFieldValue('paymentDate', e.target.value)
|
||||
}
|
||||
isError={
|
||||
formik.touched.paymentDate && Boolean(formik.errors.paymentDate)
|
||||
}
|
||||
errorMessage={formik.errors.paymentDate}
|
||||
readOnly={formType === 'detail'}
|
||||
/>
|
||||
|
||||
<SelectInput
|
||||
required
|
||||
label='Metode Pembayaran'
|
||||
placeholder='Pilih Metode Pembayaran'
|
||||
options={FINANCE_PAYMENT_METHOD_OPTIONS}
|
||||
value={formik.values.paymentMethod}
|
||||
onChange={(val) =>
|
||||
handleSelectChange('paymentMethod', val as OptionType)
|
||||
}
|
||||
isError={
|
||||
formik.touched.paymentMethod &&
|
||||
Boolean(formik.errors.paymentMethod)
|
||||
}
|
||||
errorMessage={formik.errors.paymentMethod as string}
|
||||
isDisabled={formType === 'detail'}
|
||||
/>
|
||||
|
||||
<SelectInput
|
||||
label='Nomor Rekening'
|
||||
placeholder='Pilih Bank'
|
||||
options={bankOptions}
|
||||
isLoading={isLoadingBankOptions}
|
||||
onInputChange={setBankInputValue}
|
||||
value={formik.values.bank}
|
||||
onChange={(val) => handleSelectChange('bank', val as OptionType)}
|
||||
isError={formik.touched.bank && Boolean(formik.errors.bank)} // Actually controlled by bankId in schema but logic applies
|
||||
errorMessage={formik.errors.bankId as string} // bankId error mapping
|
||||
isDisabled={formType === 'detail'}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
required
|
||||
label='Nomor Rekening Customer' // As per screenshot
|
||||
name='supplierBankAccountNumber'
|
||||
placeholder='Nomor Rekening'
|
||||
value={formik.values.supplierBankAccountNumber}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={
|
||||
formik.touched.supplierBankAccountNumber &&
|
||||
Boolean(formik.errors.supplierBankAccountNumber)
|
||||
}
|
||||
errorMessage={formik.errors.supplierBankAccountNumber}
|
||||
readOnly={formType === 'detail'}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label='Nomor Referensi'
|
||||
name='referenceNumber'
|
||||
placeholder='Nomor Referensi'
|
||||
value={formik.values.referenceNumber}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={
|
||||
formik.touched.referenceNumber &&
|
||||
Boolean(formik.errors.referenceNumber)
|
||||
}
|
||||
errorMessage={formik.errors.referenceNumber}
|
||||
readOnly={formType === 'detail'}
|
||||
/>
|
||||
|
||||
<NumberInput
|
||||
required
|
||||
label='Nominal'
|
||||
name='amount'
|
||||
placeholder='Nominal'
|
||||
value={Number(formik.values.amount)}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={formik.touched.amount && Boolean(formik.errors.amount)}
|
||||
errorMessage={formik.errors.amount}
|
||||
readOnly={formType === 'detail'}
|
||||
inputPrefix={
|
||||
<span className='text-gray-600 font-medium'>Rp</span>
|
||||
}
|
||||
/>
|
||||
|
||||
<TextArea
|
||||
required
|
||||
label='Catatan'
|
||||
name='notes'
|
||||
placeholder='Catatan'
|
||||
value={formik.values.notes}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={formik.touched.notes && Boolean(formik.errors.notes)}
|
||||
errorMessage={formik.errors.notes}
|
||||
readOnly={formType === 'detail'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-row gap-2'>
|
||||
<Button
|
||||
type='submit'
|
||||
color='primary'
|
||||
isLoading={formik.isSubmitting}
|
||||
disabled={!formik.isValid || !formik.dirty || formik.isSubmitting}
|
||||
className='w-24'
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
<Button
|
||||
type='button'
|
||||
variant='outline'
|
||||
color='warning'
|
||||
href='/finance'
|
||||
className='w-24'
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
</div>
|
||||
{financeFormErrorMessage && (
|
||||
<div role='alert' className='alert alert-error'>
|
||||
<Icon
|
||||
icon='material-symbols:error-outline'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
<span>{financeFormErrorMessage}</span>
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
</section>
|
||||
{formType !== 'add' && (
|
||||
<ConfirmationModal
|
||||
ref={deleteModal.ref}
|
||||
type='error'
|
||||
text={`Apakah anda yakin ingin menghapus data ini?`}
|
||||
secondaryButton={{
|
||||
text: 'Tidak',
|
||||
}}
|
||||
primaryButton={{
|
||||
text: 'Ya',
|
||||
color: 'error',
|
||||
onClick: confirmationModalDeleteclickHandler,
|
||||
isLoading: isDeleteLoading,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default FinanceForm;
|
||||
Reference in New Issue
Block a user