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

src/app/finance/add/page.tsx

@@ -1,5 +1,7 @@
-const FinanceAdd = () => {
+import FormFinanceAdd from '@/components/pages/finance/add/FormFinanceAdd';
-  return <div>Finance Add</div>;
+
+const FinanceAddPage = () => {
+  return <FormFinanceAdd />;
 };
 
-export default FinanceAdd;
+export default FinanceAddPage;

src/components/pages/finance/FinanceTable.tsx

@@ -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
-            <SelectInput
+            options={
-              options={bankOptions.map((bank) => ({
+              isResponseSuccess(bankRawData)
-                label:
+                ? bankOptions.map((bank) => ({
-                  bankRawData.data.find((data) => data.id === bank.value)
+                    label:
-                    ?.alias +
+                      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)
-                  ' - ' +
+                        ?.account_number +
-                  bankRawData.data.find((data) => data.id === bank.value)
+                      ' - ' +
-                    ?.owner,
+                      bankRawData.data.find((data) => data.id === bank.value)
-                value: bank.value,
+                        ?.owner,
-              }))}
+                    value: bank.value,
-              label='Bank'
+                  }))
-              value={selectedBank}
+                : []
-              onChange={bankChangeHandler}
+            }
-              isClearable
+            label='Bank'
-            />
+            value={selectedBank}
-          )}
+            onChange={bankChangeHandler}
+            isClearable
+          />
           <SelectInput
             options={partyTypeOptions}
             label='Pihak'

src/components/pages/finance/add/FormFinanceAdd.schema.ts

@@ -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

@@ -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/adjust/FinanceAdjust.tsx

@@ -1,5 +0,0 @@
-const FinanceAdjust = () => {
-  return <div>Finance Adjust</div>;
-};
-
-export default FinanceAdjust;

src/components/pages/finance/adjust/FormFinanceAdjust.tsx

@@ -0,0 +1,5 @@
+const FormFinanceAdjust = () => {
+  return <div>Finance Adjust</div>;
+};
+
+export default FormFinanceAdjust;

src/config/constant.ts

@@ -234,6 +234,19 @@ export const RECORDING_FLAG_OPTIONS = [
   { label: 'Ayam Mati', value: 'Ayam Mati' },
 ];
 
+export const FINANCE_PARTY_TYPE_OPTIONS = [
+  { label: 'Customer', value: 'CUSTOMER' },
+  { label: 'Supplier', value: 'SUPPLIER' },
+];
+
+export const FINANCE_PAYMENT_METHOD_OPTIONS = [
+  { label: 'Transfer', value: 'TRANSFER' },
+  { label: 'Cash', value: 'CASH' },
+  { label: 'Card', value: 'CARD' },
+  { label: 'Cheque', value: 'CHEQUE' },
+  { label: 'Saldo', value: 'SALDO' },
+];
+
 export const APPROVAL_WORKFLOWS = [
   {
     key: 'PROJECT_FLOCKS',