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

src/app/finance/add/initial-balance/page.tsx

@@ -1,5 +1,7 @@
-const FinanceAddInitialBalance = () => {
+import FormFinanceAddInitialBalance from '@/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance';
-  return <div>Initial Balance</div>;
+
+const FinanceAddInitialBalancePage = () => {
+  return <FormFinanceAddInitialBalance type='add' />;
 };
 
-export default FinanceAddInitialBalance;
+export default FinanceAddInitialBalancePage;

src/app/finance/add/injection/page.tsx

@@ -0,0 +1,7 @@
+import FormFinanceInjection from '@/components/pages/finance/add/injection/FormFinanceInjection';
+
+const FinanceAddInjectionPage = () => {
+  return <FormFinanceInjection type='add' />;
+};
+
+export default FinanceAddInjectionPage;

src/app/finance/detail/edit/initial-balance/page.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+import { FinanceApi } from '@/services/api/finance';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import FormFinanceAddInitialBalance from '@/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance';
+
+const EditFinanceInitialBalancePage = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const financeId = searchParams.get('financeId');
+
+  const { data: finance, isLoading: isLoadingFinance } = useSWR(
+    financeId,
+    (id: number) => FinanceApi.getSingle(id)
+  );
+
+  if (!financeId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  if (!isLoadingFinance && (!finance || isResponseError(finance))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingFinance && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+
+      {!isLoadingFinance && (
+        <FormFinanceAddInitialBalance
+          type='edit'
+          initialValues={isResponseSuccess(finance) ? finance.data : undefined}
+        />
+      )}
+    </div>
+  );
+};
+
+export default EditFinanceInitialBalancePage;

src/app/finance/detail/edit/injection/page.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+import { FinanceApi } from '@/services/api/finance';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import FormFinanceInjection from '@/components/pages/finance/add/injection/FormFinanceInjection';
+
+const EditFinanceInjectionPage = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const financeId = searchParams.get('financeId');
+
+  const { data: finance, isLoading: isLoadingFinance } = useSWR(
+    financeId,
+    (id: number) => FinanceApi.getSingle(id)
+  );
+
+  if (!financeId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  if (!isLoadingFinance && (!finance || isResponseError(finance))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingFinance && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+
+      {!isLoadingFinance && (
+        <FormFinanceInjection
+          type='edit'
+          initialValues={isResponseSuccess(finance) ? finance.data : undefined}
+        />
+      )}
+    </div>
+  );
+};
+
+export default EditFinanceInjectionPage;

src/app/finance/detail/edit/page.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+import { FinanceApi } from '@/services/api/finance';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import FormFinanceAdd from '@/components/pages/finance/add/FormFinanceAdd';
+import FormFinanceAddInitialBalance from '@/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance';
+
+const EditFinanceTransactionPage = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const financeId = searchParams.get('financeId');
+
+  const { data: finance, isLoading: isLoadingFinance } = useSWR(
+    financeId,
+    (id: number) => FinanceApi.getSingle(id)
+  );
+
+  if (!financeId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  if (!isLoadingFinance && (!finance || isResponseError(finance))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingFinance && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+
+      {!isLoadingFinance && (
+        <FormFinanceAdd
+          type='edit'
+          initialValues={isResponseSuccess(finance) ? finance.data : undefined}
+        />
+      )}
+    </div>
+  );
+};
+
+export default EditFinanceTransactionPage;

src/components/pages/finance/FinanceDetail.tsx

@@ -1,11 +1,27 @@
+import Button from '@/components/Button';
 import Card from '@/components/Card';
 import { FormHeader } from '@/components/helper/form/FormHeader';
+import RequirePermission from '@/components/helper/RequirePermission';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import Table from '@/components/Table';
-import { formatCurrency, formatTitleCase } from '@/lib/helper';
+import {
+  FINANCE_INITIAL_BALANCE_STATUS,
+  FINANCE_TRANSACTION_STATUS,
+} from '@/config/constant';
+import { formatCurrency, formatDate, formatTitleCase } from '@/lib/helper';
+import { FinanceApi } from '@/services/api/finance';
 import { Finance } from '@/types/api/finance/finance';
+import { Icon } from '@iconify/react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
 
 const FinanceDetail = ({ finance }: { finance: Finance }) => {
+  const router = useRouter();
+  const deleteModal = useModal();
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const informasiUmum = [
     {
       label: 'ID',
@@ -21,7 +37,7 @@ const FinanceDetail = ({ finance }: { finance: Finance }) => {
     },
     {
       label: 'Tanggal',
-      value: finance.payment_date,
+      value: formatDate(finance.payment_date, 'DD MMM yyyy'),
     },
     {
       label: 'Metode Pembayaran',
@@ -54,6 +70,18 @@ const FinanceDetail = ({ finance }: { finance: Finance }) => {
       value: formatCurrency(finance.income_amount),
     },
   ];
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await FinanceApi.delete(finance.id as number);
+    router.back();
+
+    deleteModal.closeModal();
+    toast.success('Successfully delete Finance!');
+    setIsDeleteLoading(false);
+  };
+
   return (
     <div className='flex flex-col gap-6 p-6'>
       <FormHeader title='' backUrl='/finance' />
@@ -108,6 +136,57 @@ const FinanceDetail = ({ finance }: { finance: Finance }) => {
           />
         </div>
       </Card>
+
+      <div className='flex flex-row gap-2 justify-end'>
+        {FINANCE_TRANSACTION_STATUS.includes(finance.transaction_type) && (
+          <RequirePermission permissions='lti.finance.payments.update'>
+            <Button
+              color='warning'
+              className='min-w-24'
+              href={`/finance/detail/edit?financeId=${finance.id}`}
+            >
+              <Icon icon='mdi:pencil-outline' />
+              Edit
+            </Button>
+          </RequirePermission>
+        )}
+        {FINANCE_INITIAL_BALANCE_STATUS.includes(finance.transaction_type) && (
+          <RequirePermission permissions='lti.finance.initial_balances.update'>
+            <Button
+              color='warning'
+              className='min-w-24'
+              href={`/finance/detail/edit/initial-balance?financeId=${finance.id}`}
+            >
+              <Icon icon='mdi:pencil-outline' />
+              Edit
+            </Button>
+          </RequirePermission>
+        )}
+        <RequirePermission permissions='lti.finance.transaction.delete'>
+          <Button
+            color='error'
+            className='min-w-24'
+            onClick={() => deleteModal.openModal()}
+          >
+            <Icon icon='mdi:delete-outline' />
+            Delete
+          </Button>
+        </RequirePermission>
+      </div>
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Finance ini (${finance?.payment_code})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
     </div>
   );
 };

src/components/pages/finance/FinanceTable.tsx

@@ -1,5 +1,5 @@
 import { ChangeEventHandler, useMemo, useState } from 'react';
-import { Row } from '@tanstack/react-table';
+import { CellContext, Row } from '@tanstack/react-table';
 import { useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 
@@ -16,14 +16,118 @@ import Menu from '@/components/menu/Menu';
 import MenuItem from '@/components/menu/MenuItem';
 import Table from '@/components/Table';
 import Tooltip from '@/components/Tooltip';
-import { formatCurrency, formatDate } from '@/lib/helper';
+import { formatCurrency, formatDate, formatTitleCase } from '@/lib/helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { Finance } from '@/types/api/finance/finance';
-import { ROWS_OPTIONS } from '@/config/constant';
+import {
+  FINANCE_INITIAL_BALANCE_STATUS,
+  FINANCE_INJECTION_STATUS,
+  FINANCE_TRANSACTION_STATUS,
+  ROWS_OPTIONS,
+} from '@/config/constant';
 import { FinanceApi } from '@/services/api/finance';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { BankApi, CustomerApi, SupplierApi } from '@/services/api/master-data';
 import { Bank } from '@/types/api/master-data/bank';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import toast from 'react-hot-toast';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
+import { Icon } from '@iconify/react';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+
+const RowOptionsMenu = ({
+  type = 'dropdown',
+  props,
+  deleteClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<Finance, unknown>;
+  deleteClickHandler: () => void;
+}) => {
+  return (
+    <RowOptionsMenuWrapper type={type}>
+      <RequirePermission permissions='lti.finance.transaction.detail'>
+        <Button
+          href={`/finance/detail?financeId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
+
+      {FINANCE_TRANSACTION_STATUS.includes(
+        props.row.original.transaction_type
+      ) && (
+        <RequirePermission permissions='lti.finance.payments.update'>
+          <Button
+            href={`/finance/detail/edit?financeId=${props.row.original.id}`}
+            variant='ghost'
+            color='warning'
+            className='justify-start text-sm'
+          >
+            <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+            Edit
+          </Button>
+        </RequirePermission>
+      )}
+
+      {FINANCE_INITIAL_BALANCE_STATUS.includes(
+        props.row.original.transaction_type
+      ) && (
+        <RequirePermission permissions='lti.finance.initial_balances.update'>
+          <Button
+            href={`/finance/detail/edit/initial-balance?financeId=${props.row.original.id}`}
+            variant='ghost'
+            color='warning'
+            className='justify-start text-sm'
+          >
+            <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+            Edit
+          </Button>
+        </RequirePermission>
+      )}
+
+      {FINANCE_INJECTION_STATUS.includes(
+        props.row.original.transaction_type
+      ) && (
+        <RequirePermission permissions='lti.finance.injections.update'>
+          <Button
+            href={`/finance/detail/edit/injection?financeId=${props.row.original.id}`}
+            variant='ghost'
+            color='warning'
+            className='justify-start text-sm'
+          >
+            <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+            Edit
+          </Button>
+        </RequirePermission>
+      )}
+
+      <RequirePermission permissions='lti.finance.transaction.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='text-error hover:text-inherit'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
+    </RowOptionsMenuWrapper>
+  );
+};
 
 const FinanceTable = () => {
   const {
@@ -56,6 +160,7 @@ const FinanceTable = () => {
 
   // ===== State =====
   const [searchParams, setSearchParams] = useSearchParams();
+  const deleteModal = useModal();
   const [pendingFilters, setPendingFilters] = useState({
     search: '',
     transactionType: '',
@@ -72,6 +177,8 @@ const FinanceTable = () => {
     null
   );
   const [selectedSortBy, setSelectedSortBy] = useState<OptionType | null>(null);
+  const [selectedFinance, setSelectedFinance] = useState<Finance | null>(null);
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   // ===== Fetch Data =====
   const {
@@ -79,7 +186,7 @@ const FinanceTable = () => {
     isLoading,
     mutate: refreshFinances,
   } = useSWR(
-    `${FinanceApi.basePath}${getTableFilterQueryString()}`,
+    `${FinanceApi.basePath}/transactions${getTableFilterQueryString()}`,
     FinanceApi.getAllFetcher
   );
 
@@ -193,6 +300,16 @@ const FinanceTable = () => {
     updateFilter('startDate', '');
     updateFilter('endDate', '');
   };
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await FinanceApi.delete(selectedFinance?.id as number);
+    refreshFinances();
+
+    deleteModal.closeModal();
+    toast.success('Successfully delete Finance!');
+    setIsDeleteLoading(false);
+  };
 
   const columns = useMemo(() => {
     return [
@@ -203,14 +320,30 @@ const FinanceTable = () => {
       {
         header: 'References Number',
         accessorKey: 'reference_number',
+        cell: (props: CellContext<Finance, unknown>) => {
+          const value = props.row.original.reference_number;
+          return <span>{value ?? '-'}</span>;
+        },
       },
       {
         header: 'Jenis Transaksi',
         accessorKey: 'transaction_type',
+        cell: (props: CellContext<Finance, unknown>) => {
+          const value = props.row.original.transaction_type
+            .split('_')
+            .join(' ');
+          return <span>{formatTitleCase(value)}</span>;
+        },
       },
       {
         header: 'Pihak',
         accessorFn: (finance: Finance) => finance.party.name,
+        cell: (props: CellContext<Finance, unknown>) => {
+          if (props.row.original.party.id) {
+            return <span>{props.row.original.party.name}</span>;
+          }
+          return <span>{'-'}</span>;
+        },
       },
       {
         header: 'Tanggal',
@@ -220,6 +353,10 @@ const FinanceTable = () => {
       {
         header: 'Metode Pembayaran',
         accessorKey: 'payment_method',
+        cell: (props: CellContext<Finance, unknown>) => {
+          const value = props.row.original.payment_method.split('_').join(' ');
+          return <span>{formatTitleCase(value)}</span>;
+        },
       },
       {
         header: 'Bank',
@@ -237,36 +374,73 @@ const FinanceTable = () => {
       },
       {
         header: 'Aksi',
-        cell: ({ row }: { row: Row<Finance> }) => (
+        cell: (props: CellContext<Finance, unknown>) => {
-          <Dropdown
+          const currentPageSize =
-            trigger={<Button variant='ghost'>...</Button>}
+            props.table.getPaginationRowModel().rows.length;
-            direction='bottom'
+          const currentPageRows = props.table.getPaginationRowModel().flatRows;
-            align='end'
+          const currentRowRelativeIndex =
-          >
+            currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
-            <Menu>
+
-              <MenuItem
+          const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
-                title='Detail'
+
-                href={`/finance/detail?financeId=${row.original.id}`}
+          const deleteClickHandler = () => {
-                className='hover:bg-primary hover:text-primary-content'
+            setSelectedFinance(props.row.original);
+            deleteModal.openModal();
+          };
+
+          return (
+            <>
+              {currentPageSize > 2 && (
+                <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                  <RowOptionsMenu
+                    type='dropdown'
+                    props={props}
+                    deleteClickHandler={deleteClickHandler}
                   />
-            </Menu>
+                </RowDropdownOptions>
-          </Dropdown>
+              )}
-        ),
+
+              {currentPageSize <= 2 && (
+                <RowCollapseOptions>
+                  <RowOptionsMenu
+                    type='collapse'
+                    props={props}
+                    deleteClickHandler={deleteClickHandler}
+                  />
+                </RowCollapseOptions>
+              )}
+            </>
+          );
+        },
       },
     ];
   }, []);
   return (
     <section className='size-full p-6 flex flex-col gap-6'>
       <div className='flex justify-end gap-2'>
-        <Button color='warning' className='min-w-24'>
+        <RequirePermission permissions='lti.finance.injections.create'>
+          <Button
+            color='warning'
+            className='min-w-24'
+            href='/finance/add/injection'
+          >
             Injection Saldo Bank
           </Button>
-        <Button color='info' className='text-white min-w-24'>
+        </RequirePermission>
+        <RequirePermission permissions='lti.finance.initial_balances.create'>
+          <Button
+            color='info'
+            className='text-white min-w-24'
+            href='/finance/add/initial-balance'
+          >
             Saldo Awal
           </Button>
+        </RequirePermission>
+        <RequirePermission permissions='lti.finance.payments.create'>
           <Button color='primary' className='min-w-24' href='/finance/add'>
             Tambah
           </Button>
+        </RequirePermission>
       </div>
       <Card
         variant='bordered'
@@ -363,8 +537,26 @@ const FinanceTable = () => {
         pageSize={tableFilterState.pageSize}
         page={tableFilterState.page}
         onPageChange={setPage}
+        onPageSizeChange={setPageSize}
+        totalItems={
+          isResponseSuccess(finances) ? finances.meta?.total_results : 0
+        }
         isLoading={isLoading}
       />
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Finance ini (${selectedFinance?.payment_code})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
     </section>
   );
 };

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

@@ -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({
+  party_type_option: Yup.mixed()
-    label: Yup.string().required('Wajib Diisi'),
-    value: Yup.string().required('Wajib Diisi'),
-  })
     .nullable()
-    .required('Jenis transaksi wajib diisi'),
+    .test(
-  party_id_option: Yup.object({
+      'is-valid-option',
-    label: Yup.string().required('Wajib Diisi'),
+      'Jenis transaksi wajib diisi',
-    value: Yup.number().required('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({
+  payment_method_option: Yup.mixed()
-    label: Yup.string().required('Wajib Diisi'),
-    value: Yup.string().required('Wajib Diisi'),
-  })
     .nullable()
-    .required('Metode pembayaran wajib diisi'),
+    .test(
-  bank_id_option: Yup.object({
+      'is-valid-option',
-    label: Yup.string().required('Wajib Diisi'),
+      'Metode pembayaran wajib diisi',
-    value: Yup.number().required('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'),

src/components/pages/finance/add/FormFinanceAdd.tsx

@@ -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_type_option:
-      party_id_option: initialValues?.party_id_option || null,
+        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,
+      payment_method_option:
-      bank_id_option: initialValues?.bank_id_option || null,
+        FINANCE_PAYMENT_METHOD_OPTIONS.find(
-      party_account_number: initialValues?.party_account_number || '',
+          (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={
+              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={
+              isError={Boolean(
-                !!(
+                formik.touched.party_id_option && formik.errors.party_id_option
-                  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={
+              isError={Boolean(
-                !!(formik.touched.payment_date && formik.errors.payment_date)
+                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={
+              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={
+              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={
+              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={
+              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>

src/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance.schema.ts

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

src/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance.tsx

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

src/components/pages/finance/add/injection/FormFinanceInjection.schema.ts

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

src/components/pages/finance/add/injection/FormFinanceInjection.tsx

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

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

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

src/components/pages/inventory/adjustment/InventoryAdjustmentTable.tsx

@@ -79,18 +79,6 @@ const InventoryAdjustmentTable = () => {
           year: 'numeric',
         }),
     },
-    // {
-    //   id: 'before_quantity',
-    //   header: 'Stok Sebelum',
-    //   accessorFn: (row) =>
-    //     formatNumber(String(row.product_warehouse?.quantity)),
-    // },
-    // {
-    //   id: 'after_quantity',
-    //   header: 'Stok Sesudah',
-    //   accessorFn: (row) =>
-    //     formatNumber(String(row.product_warehouse?.quantity)),
-    // },
     {
       id: 'quantity',
       header: 'Kuantitas',
@@ -187,14 +175,6 @@ const InventoryAdjustmentTable = () => {
                   Tambah
                 </Button>
               </RequirePermission>
-
-              {/* <DebouncedTextInput
-                name='search'
-                placeholder='Cari Stock Adjustment'
-                value={tableFilterState.search}
-                onChange={searchChangeHandler}
-                className={{ wrapper: 'sm:max-w-3xs' }}
-              /> */}
             </div>
 
             <div className='flex flex-row justify-end'>

src/config/constant.ts

@@ -300,6 +300,17 @@ export const FINANCE_PAYMENT_METHOD_OPTIONS = [
   { label: 'Saldo', value: 'SALDO' },
 ];
 
+export const FINANCE_INITIAL_BALANCE_TYPE_OPTIONS = [
+  { label: 'Saldo Awal Positif', value: 'POSITIVE' },
+  { label: 'Saldo Awal Negatif', value: 'NEGATIVE' },
+];
+
+export const FINANCE_TRANSACTION_STATUS = ['PENJUALAN', 'BIAYA'];
+
+export const FINANCE_INITIAL_BALANCE_STATUS = ['SALDO_AWAL'];
+
+export const FINANCE_INJECTION_STATUS = ['INJECTION'];
+
 export const APPROVAL_WORKFLOWS = [
   {
     key: 'PROJECT_FLOCKS',

src/config/route-permission.ts

@@ -68,6 +68,28 @@ export const ROUTE_PERMISSIONS: Record<string, string[]> = {
   '/expense/realization/': ['lti.expense.create.realization'],
   '/expense/realization/edit/': ['lti.expense.update.realization'],
 
+  // Finance
+  // // ===== FINANCE =====
+  // 		"lti.finance.transaction.list",
+  // 		"lti.finance.transaction.detail",
+  // 		"lti.finance.transaction.delete",
+  // 		"lti.finance.payments.create",
+  // 		"lti.finance.payments.update",
+  // 		"lti.finance.initial_balances.create",
+  // 		"lti.finance.initial_balances.update",
+  // 		"lti.finance.injections.create",
+  // 		"lti.finance.injections.update",
+  '/finance/': ['lti.finance.transaction.list'],
+  '/finance/detail/': ['lti.finance.transaction.detail'],
+  '/finance/add/': ['lti.finance.payments.create'],
+  '/finance/detail/edit/': ['lti.finance.payments.update'],
+  '/finance/add/initial-balance/': ['lti.finance.initial_balances.create'],
+  '/finance/detail/edit/initial-balance/': [
+    'lti.finance.initial_balances.update',
+  ],
+  '/finance/add/injection/': ['lti.finance.injections.create'],
+  '/finance/detail/edit/injection/': ['lti.finance.injections.update'],
+
   // Closing
   '/closing/': ['lti.closing.list'],
   '/closing/detail/': ['lti.closing.detail'],

src/services/api/finance.ts

@@ -1,11 +1,16 @@
 import axios from 'axios';
 import { BaseApiService } from '@/services/api/base';
 import { BaseApiResponse } from '@/types/api/api-general';
-import { httpClient } from '@/services/http/client';
+import { httpClient, httpClientFetcher } from '@/services/http/client';
-import { Finance } from '@/types/api/finance/finance';
+import {
-// DUMMY_START
+  CreateFinancePayment,
-import { getAllFetcher, getFetcher } from '@/dummy/finance/finance.dummy';
+  CreateInitialBalance,
-// DUMMY_END
+  CreateInjection,
+  Finance,
+  UpdateFinancePayment,
+  UpdateInitialBalance,
+  UpdateInjection,
+} from '@/types/api/finance/finance';
 
 export class FinanceApiService extends BaseApiService<
   Finance,
@@ -16,41 +21,173 @@ export class FinanceApiService extends BaseApiService<
     super(basePath);
   }
 
-  async getAllFetcher(): Promise<BaseApiResponse<Finance[]>> {
-    // DUMMY_START
-    return await getAllFetcher();
-    // DUMMY_END
-
-    // LIVE_START
-    // try {
-    //   const path = `${this.basePath}/`;
-    //   return await httpClient<BaseApiResponse<Finance[]>>(path);
-    // } catch (error) {
-    //   if (axios.isAxiosError<BaseApiResponse<Finance[]>>(error)) {
-    //     return error.response?.data;
-    //   }
-    //   return undefined;
-    // }
-    // LIVE_END
-  }
-
   async getSingle(id: number): Promise<BaseApiResponse<Finance>> {
-    // DUMMY_START
+    return await httpClientFetcher<BaseApiResponse<Finance>>(
-    return await getFetcher(id);
+      `${this.basePath}/transactions/${id}`
-    // DUMMY_END
+    );
+  }
 
-    // LIVE_START
+  async create(payload: CreateFinancePayment) {
-    // try {
+    const isFormData =
-    //   const path = `${this.basePath}/`;
+      typeof FormData !== 'undefined' && payload instanceof FormData;
-    //   return await httpClient<BaseApiResponse<Finance[]>>(path);
+    try {
-    // } catch (error) {
+      const headers = isFormData
-    //   if (axios.isAxiosError<BaseApiResponse<Finance[]>>(error)) {
+        ? { ...(this.header ?? {}) }
-    //     return error.response?.data;
+        : { 'Content-Type': 'application/json', ...(this.header ?? {}) };
-    //   }
+
-    //   return undefined;
+      const createRes = await httpClient<BaseApiResponse<Finance>>(
-    // }
+        `${this.basePath}/payments`,
-    // LIVE_END
+        {
+          method: 'POST',
+          body: payload,
+          headers,
+        }
+      );
+      return createRes;
+    } catch (error: unknown) {
+      if (axios.isAxiosError<BaseApiResponse<Finance>>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
     }
   }
 
-export const FinanceApi = new FinanceApiService('/finances');
+  async createInitialBalances(payload: CreateInitialBalance) {
+    const isFormData =
+      typeof FormData !== 'undefined' && payload instanceof FormData;
+    try {
+      const headers = isFormData
+        ? { ...(this.header ?? {}) }
+        : { 'Content-Type': 'application/json', ...(this.header ?? {}) };
+
+      const createRes = await httpClient<BaseApiResponse<Finance>>(
+        `${this.basePath}/initial-balances`,
+        {
+          method: 'POST',
+          body: payload,
+          headers,
+        }
+      );
+      return createRes;
+    } catch (error: unknown) {
+      if (axios.isAxiosError<BaseApiResponse<Finance>>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
+
+  async createInjections(payload: CreateInjection) {
+    const isFormData =
+      typeof FormData !== 'undefined' && payload instanceof FormData;
+    try {
+      const headers = isFormData
+        ? { ...(this.header ?? {}) }
+        : { 'Content-Type': 'application/json', ...(this.header ?? {}) };
+
+      const createRes = await httpClient<BaseApiResponse<Finance>>(
+        `${this.basePath}/injections`,
+        {
+          method: 'POST',
+          body: payload,
+          headers,
+        }
+      );
+      return createRes;
+    } catch (error: unknown) {
+      if (axios.isAxiosError<BaseApiResponse<Finance>>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
+
+  async update(id: number, payload: UpdateFinancePayment) {
+    const isFormData =
+      typeof FormData !== 'undefined' && payload instanceof FormData;
+    try {
+      const updatePath = `${this.basePath}/payments/${id}`;
+
+      const headers = isFormData
+        ? { ...(this.header ?? {}) }
+        : { 'Content-Type': 'application/json', ...(this.header ?? {}) };
+
+      const updateRes = await httpClient<BaseApiResponse<Finance>>(updatePath, {
+        method: 'PATCH',
+        body: payload,
+        headers,
+      });
+      return updateRes;
+    } catch (error: unknown) {
+      if (axios.isAxiosError<BaseApiResponse<Finance>>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
+
+  async updateInitialBalances(id: number, payload: UpdateInitialBalance) {
+    const isFormData =
+      typeof FormData !== 'undefined' && payload instanceof FormData;
+    try {
+      const updatePath = `${this.basePath}/initial-balances/${id}`;
+
+      const headers = isFormData
+        ? { ...(this.header ?? {}) }
+        : { 'Content-Type': 'application/json', ...(this.header ?? {}) };
+
+      const updateRes = await httpClient<BaseApiResponse<Finance>>(updatePath, {
+        method: 'PATCH',
+        body: payload,
+        headers,
+      });
+      return updateRes;
+    } catch (error: unknown) {
+      if (axios.isAxiosError<BaseApiResponse<Finance>>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
+
+  async updateInjections(id: number, payload: UpdateInjection) {
+    const isFormData =
+      typeof FormData !== 'undefined' && payload instanceof FormData;
+    try {
+      const updatePath = `${this.basePath}/injections/${id}`;
+
+      const headers = isFormData
+        ? { ...(this.header ?? {}) }
+        : { 'Content-Type': 'application/json', ...(this.header ?? {}) };
+
+      const updateRes = await httpClient<BaseApiResponse<Finance>>(updatePath, {
+        method: 'PATCH',
+        body: payload,
+        headers,
+      });
+      return updateRes;
+    } catch (error: unknown) {
+      if (axios.isAxiosError<BaseApiResponse<Finance>>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
+
+  async delete(id: number) {
+    try {
+      const deletePath = `${this.basePath}/transactions/${id}`;
+      const deleteRes = await httpClient<BaseApiResponse>(deletePath, {
+        method: 'DELETE',
+      });
+      return deleteRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
+}
+
+export const FinanceApi = new FinanceApiService('/finance');

src/types/api/finance/finance.d.ts

@@ -1,4 +1,4 @@
-export interface Finance {
+export type Finance = {
   id: number;
   payment_code: string;
   reference_number: string;
@@ -12,18 +12,49 @@ export interface Finance {
   income_amount: number;
   nominal: number;
   notes: string;
-}
+};
 
-export interface FinanceParty {
+export type FinanceParty = {
   id: number;
   name: string;
   type: string;
   account_number: string;
-}
+};
-export interface FinanceBank {
+export type FinanceBank = {
   id: number;
   name: string;
   alias: string;
   owner: string;
   account_number: string;
-}
+};
+export type CreateFinancePayment = {
+  party_id: number;
+  party_type: string;
+  payment_date: string;
+  payment_method: string;
+  bank_id: number;
+  reference_number: string;
+  nominal: number;
+  notes: string;
+};
+
+export type UpdateFinancePayment = CreateFinancePayment;
+export type CreateInitialBalance = {
+  party_type: string;
+  party_id: number;
+  bank_id: number;
+  reference_number: string;
+  initial_balance_type: string;
+  nominal: number;
+  note: string;
+};
+
+export type UpdateInitialBalance = CreateInitialBalance;
+export type CreateInjection = {
+  bank_id: number;
+  adjustment_date: string;
+  nominal: number;
+  notes: string;
+};
+
+export type UpdateInjection = CreateInjection;