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

2026-05-24 07:15:44 +00:00 · 2025-12-28 04:28:02 +07:00
parent 6ea25aa3b1
commit 731bec5a94
21 changed files with 1522 additions and 192 deletions
@@ -15,18 +15,6 @@ import { OptionType } from '@/components/input/SelectInput';
  }
 */

-// 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;
@@ -41,32 +29,36 @@ export type FinanceFormValues = {
 };

 export const FinanceFormSchema = Yup.object().shape({
-  party_type_option: Yup.object({
-    label: Yup.string().required('Wajib Diisi'),
-    value: Yup.string().required('Wajib Diisi'),
-  })
+  party_type_option: Yup.mixed()
    .nullable()
-    .required('Jenis transaksi wajib diisi'),
-  party_id_option: Yup.object({
-    label: Yup.string().required('Wajib Diisi'),
-    value: Yup.number().required('Wajib Diisi'),
-  })
+    .test(
+      'is-valid-option',
+      'Jenis transaksi wajib diisi',
+      (value) => value !== null && value !== undefined
+    ),
+  party_id_option: Yup.mixed()
    .nullable()
-    .required('Pihak wajib diisi'),
+    .test(
+      'is-valid-option',
+      'Pihak wajib diisi',
+      (value) => value !== null && value !== undefined
+    ),
  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'),
-  })
+  payment_method_option: Yup.mixed()
    .nullable()
-    .required('Metode pembayaran wajib diisi'),
-  bank_id_option: Yup.object({
-    label: Yup.string().required('Wajib Diisi'),
-    value: Yup.number().required('Wajib Diisi'),
-  })
+    .test(
+      'is-valid-option',
+      'Metode pembayaran wajib diisi',
+      (value) => value !== null && value !== undefined
+    ),
+  bank_id_option: Yup.mixed()
    .nullable()
-    .required('Bank wajib diisi'),
+    .test(
+      'is-valid-option',
+      'Bank wajib diisi',
+      (value) => value !== null && value !== undefined
+    ),
  reference_number: Yup.string().required('Nomor referensi wajib diisi'),
  nominal: Yup.string().required('Nominal wajib diisi'),
  notes: Yup.string().required('Catatan wajib diisi'),
@@ -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>
@@ -0,0 +1,62 @@
+import * as Yup from 'yup';
+import { OptionType } from '@/components/input/SelectInput';
+
+/**
+ * API Payload format for Initial Balance:
+ * {
+    "party_type": "CUSTOMER",
+    "party_id": 1,
+    "bank_id": 1,
+    "reference_number": "IB.MBU.001",
+    "initial_balance_type": "DEBIT",
+    "nominal": 5000000,
+    "note": "Saldo awal piutang customer"
+  }
+ */
+
+// Type for form values (includes option objects for SelectInput)
+export type InitialBalanceFormValues = {
+  party_type_option: OptionType | null;
+  party_id_option: OptionType | null;
+  bank_id_option: OptionType | null;
+  reference_number: string;
+  initial_balance_type_option: OptionType | null;
+  nominal: string;
+  note: string;
+};
+
+export const InitialBalanceFormSchema = Yup.object().shape({
+  party_type_option: Yup.mixed()
+    .nullable()
+    .test(
+      'is-valid-option',
+      'Jenis pihak wajib diisi',
+      (value) => value !== null && value !== undefined
+    ),
+  party_id_option: Yup.mixed()
+    .nullable()
+    .test(
+      'is-valid-option',
+      'Pihak wajib diisi',
+      (value) => value !== null && value !== undefined
+    ),
+  bank_id_option: Yup.mixed()
+    .nullable()
+    .test(
+      'is-valid-option',
+      'Bank wajib diisi',
+      (value) => value !== null && value !== undefined
+    ),
+  reference_number: Yup.string().required('Nomor referensi wajib diisi'),
+  initial_balance_type_option: Yup.mixed()
+    .nullable()
+    .test(
+      'is-valid-option',
+      'Tipe saldo awal wajib diisi',
+      (value) => value !== null && value !== undefined
+    ),
+  nominal: Yup.string().required('Nominal wajib diisi'),
+  note: Yup.string().required('Catatan wajib diisi'),
+});
+
+export const UpdateInitialBalanceFormSchema = InitialBalanceFormSchema;
@@ -0,0 +1,378 @@
+'use client';
+
+import Button from '@/components/Button';
+import { FormHeader } from '@/components/helper/form/FormHeader';
+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 {
+  InitialBalanceFormSchema,
+  InitialBalanceFormValues,
+} from '@/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance.schema';
+import {
+  FINANCE_INITIAL_BALANCE_TYPE_OPTIONS,
+  FINANCE_PARTY_TYPE_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 {
+  CreateInitialBalance,
+  Finance,
+  UpdateInitialBalance,
+} from '@/types/api/finance/finance';
+import { Bank } from '@/types/api/master-data/bank';
+import { Icon } from '@iconify/react';
+import { useFormik } from 'formik';
+import { useRouter } from 'next/navigation';
+import { useCallback, useMemo } from 'react';
+import toast from 'react-hot-toast';
+
+interface FormFinanceAddInitialBalanceProps {
+  type?: 'add' | 'edit';
+  initialValues?: Finance;
+}
+
+const FormFinanceAddInitialBalance = ({
+  type = 'add',
+  initialValues,
+}: FormFinanceAddInitialBalanceProps) => {
+  const router = useRouter();
+
+  // ===== Formik =====
+  const formikInitialValues = useMemo((): InitialBalanceFormValues => {
+    // Type assertion to handle potential initial_balance_type field
+    const extendedInitialValues = initialValues as Finance & {
+      initial_balance_type?: string;
+    };
+
+    return {
+      party_type_option:
+        FINANCE_PARTY_TYPE_OPTIONS.find(
+          (option) => option.value === initialValues?.party.type
+        ) || null,
+      party_id_option: initialValues?.party
+        ? {
+            label: initialValues.party.name,
+            value: initialValues.party.id,
+          }
+        : null,
+      bank_id_option: initialValues?.bank
+        ? {
+            label: initialValues.bank.name,
+            value: initialValues.bank.id,
+          }
+        : null,
+      reference_number: initialValues?.reference_number || '',
+      initial_balance_type_option:
+        (initialValues?.nominal ?? 0) < 0
+          ? FINANCE_INITIAL_BALANCE_TYPE_OPTIONS.find(
+              (option) => option.value === 'NEGATIVE'
+            ) || null
+          : FINANCE_INITIAL_BALANCE_TYPE_OPTIONS.find(
+              (option) => option.value === 'POSITIVE'
+            ) || null,
+      nominal: initialValues?.nominal?.toString() || '',
+      note: initialValues?.notes || '',
+    };
+  }, [initialValues]);
+
+  const formik = useFormik<InitialBalanceFormValues>({
+    initialValues: formikInitialValues,
+    validationSchema: InitialBalanceFormSchema,
+    validateOnChange: true,
+    validateOnBlur: true,
+    onSubmit: async (values) => {
+      const payload = transformFormValuesToPayload(values);
+
+      switch (type) {
+        case 'add':
+          await createInitialBalance(payload);
+          break;
+
+        case 'edit':
+          if (initialValues?.id) {
+            await updateInitialBalance(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: InitialBalanceFormValues
+  ): CreateInitialBalance => {
+    return {
+      party_type: (values.party_type_option?.value as string) || '',
+      party_id: Number(values.party_id_option?.value) || 0,
+      bank_id: Number(values.bank_id_option?.value) || 0,
+      reference_number: values.reference_number,
+      initial_balance_type:
+        (values.initial_balance_type_option?.value as string) || '',
+      nominal: Number(values.nominal.replace(/\D/g, '')) || 0,
+      note: values.note,
+    };
+  };
+
+  // ===== Handler =====
+  const createInitialBalance = useCallback(
+    async (payload: CreateInitialBalance) => {
+      const response = await FinanceApi.createInitialBalances(payload);
+
+      if (isResponseError(response)) {
+        toast.error(response.message);
+        return;
+      }
+
+      toast.success('Saldo awal berhasil ditambahkan');
+      router.refresh();
+      router.push('/finance');
+    },
+    [router]
+  );
+
+  const updateInitialBalance = useCallback(
+    async (financeId: number, payload: UpdateInitialBalance) => {
+      const response = await FinanceApi.updateInitialBalances(
+        financeId,
+        payload
+      );
+
+      if (isResponseError(response)) {
+        toast.error(response.message);
+        return;
+      }
+
+      toast.success('Saldo awal 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'} Saldo Awal`}
+            backUrl='/finance'
+          />
+          <form className='flex flex-col gap-4' onSubmit={formik.handleSubmit}>
+            <SelectInput
+              label='Jenis Pihak'
+              placeholder='Pilih jenis pihak'
+              options={FINANCE_PARTY_TYPE_OPTIONS}
+              value={formik.values.party_type_option}
+              onChange={(value) => {
+                formik.setFieldValue('party_type_option', value);
+              }}
+              isError={Boolean(
+                formik.touched.party_type_option &&
+                  formik.errors.party_type_option
+              )}
+              errorMessage={
+                formik.touched.party_type_option &&
+                formik.errors.party_type_option
+                  ? 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 Pihak Dahulu'
+              }
+              placeholder={`Pilih ${formik.values.party_type_option?.value ? formatTitleCase(formik.values.party_type_option.value as string) : 'jenis pihak dahulu'}`}
+              options={partyOptions}
+              value={formik.values.party_id_option}
+              onChange={(value) => {
+                formik.setFieldValue('party_id_option', value);
+              }}
+              isLoading={isLoadingPartyOptions}
+              isError={Boolean(
+                formik.touched.party_id_option && formik.errors.party_id_option
+              )}
+              errorMessage={
+                formik.touched.party_id_option && formik.errors.party_id_option
+                  ? formik.errors.party_id_option
+                  : ''
+              }
+              required
+              isClearable
+              isDisabled={!formik.values.party_type_option?.value}
+            />
+            <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
+            />
+            <TextInput
+              label='Nomor Referensi'
+              placeholder='Masukkan nomor referensi'
+              name='reference_number'
+              value={formik.values.reference_number}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={Boolean(
+                formik.touched.reference_number &&
+                  formik.errors.reference_number
+              )}
+              errorMessage={
+                formik.touched.reference_number &&
+                formik.errors.reference_number
+                  ? formik.errors.reference_number
+                  : ''
+              }
+              required
+            />
+            <SelectInput
+              label='Tipe Saldo Awal'
+              placeholder='Pilih tipe saldo awal'
+              options={FINANCE_INITIAL_BALANCE_TYPE_OPTIONS}
+              value={formik.values.initial_balance_type_option}
+              onChange={(value) => {
+                formik.setFieldValue('initial_balance_type_option', value);
+              }}
+              isError={Boolean(
+                formik.touched.initial_balance_type_option &&
+                  formik.errors.initial_balance_type_option
+              )}
+              errorMessage={
+                formik.touched.initial_balance_type_option &&
+                formik.errors.initial_balance_type_option
+                  ? formik.errors.initial_balance_type_option
+                  : ''
+              }
+              required
+              isClearable
+            />
+            <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={false}
+              startAdornment={
+                formik.values.initial_balance_type_option?.value ===
+                'POSITIVE' ? (
+                  <Icon icon='mdi:plus' />
+                ) : formik.values.initial_balance_type_option?.value ===
+                  'NEGATIVE' ? (
+                  <Icon icon='mdi:minus' />
+                ) : (
+                  ''
+                )
+              }
+              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 FormFinanceAddInitialBalance;
@@ -0,0 +1,25 @@
+import { OptionType } from '@/components/input/SelectInput';
+import * as Yup from 'yup';
+
+// Type for form values (includes option objects for SelectInput)
+export type InjectionFormValues = {
+  bank_id_option: OptionType | null;
+  adjustment_date: string;
+  nominal: string;
+  note: string;
+};
+
+export const InjectionFormSchema = Yup.object<InjectionFormValues>({
+  bank_id_option: Yup.mixed()
+    .nullable()
+    .test(
+      'is-valid-option',
+      'Bank wajib diisi',
+      (value) => value !== null && value !== undefined
+    ),
+  adjustment_date: Yup.string().required('Tanggal penyesuaian wajib diisi'),
+  nominal: Yup.string().required('Nominal wajib diisi'),
+  note: Yup.string().required('Catatan wajib diisi'),
+});
+
+export const UpdateInjectionFormSchema = InjectionFormSchema;
@@ -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;