From 4f375a4f0bb254437fabc6518d985e88204753b7 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Mon, 24 Nov 2025 09:43:20 +0700
Subject: [PATCH] feat(FE-200,204): create Expense Realization Form

---
 .../expense/form/ExpenseRealizationForm.tsx   | 410 ++++++++++++++++++
 1 file changed, 410 insertions(+)
 create mode 100644 src/components/pages/expense/form/ExpenseRealizationForm.tsx

diff --git a/src/components/pages/expense/form/ExpenseRealizationForm.tsx b/src/components/pages/expense/form/ExpenseRealizationForm.tsx
new file mode 100644
index 00000000..5baa2a45
--- /dev/null
+++ b/src/components/pages/expense/form/ExpenseRealizationForm.tsx
@@ -0,0 +1,410 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useFormik } from 'formik';
+import toast from 'react-hot-toast';
+
+import Link from 'next/link';
+import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import DateInput from '@/components/input/DateInput';
+import DropFileInput from '@/components/input/DropFileInput';
+import ExpenseKandangsTable from '@/components/pages/expense/form/ExpenseKandangsTable';
+import ExpenseRealizationKandangDetailExpense from '@/components/pages/expense/form/ExpenseRealizationKandangDetailExpense';
+
+import {
+  CreateExpenseRealizationPayload,
+  Expense,
+  UpdateExpenseRealizationPayload,
+} from '@/types/api/expense';
+import {
+  ExpenseRealizationFormSchema,
+  ExpenseRealizationFormValues,
+  getExpenseRealizationFormInitialValues,
+  UpdateExpenseRealizationFormSchema,
+} from '@/components/pages/expense/form/ExpenseRealizationForm.schema';
+import { ExpenseApi } from '@/services/api/expense';
+import { isResponseError } from '@/lib/api-helper';
+import { LocationApi, SupplierApi } from '@/services/api/master-data';
+import { Supplier } from '@/types/api/master-data/supplier';
+import { ACCEPTED_FILE_TYPE } from '@/config/constant';
+import { cn } from '@/lib/helper';
+
+interface ExpenseRealizationFormProps {
+  type?: 'add' | 'edit' | 'detail';
+  initialValues?: Expense;
+}
+
+const ExpenseRealizationForm = ({
+  type = 'add',
+  initialValues,
+}: ExpenseRealizationFormProps) => {
+  const router = useRouter();
+
+  const [expenseFormErrorMessage, setExpenseFormErrorMessage] = useState('');
+
+  const createExpenseHandler = useCallback(
+    async (payload: CreateExpenseRealizationPayload) => {
+      const createExpenseRes = await ExpenseApi.createRealization(
+        initialValues?.id as number,
+        ExpenseApi.convertExpenseRealizationPayloadToFormData(payload)
+      );
+
+      if (isResponseError(createExpenseRes)) {
+        setExpenseFormErrorMessage(createExpenseRes.message);
+        return;
+      }
+
+      toast.success(createExpenseRes?.message as string);
+      router.push('/expense');
+    },
+    [router]
+  );
+
+  const updateExpenseHandler = useCallback(
+    async (expenseId: number, payload: UpdateExpenseRealizationPayload) => {
+      const updateExpenseRes = await ExpenseApi.updateRealization(
+        expenseId,
+        ExpenseApi.convertExpenseRealizationPayloadToFormData(payload)
+      );
+
+      if (updateExpenseRes?.status === 'error') {
+        setExpenseFormErrorMessage(updateExpenseRes.message);
+        return;
+      }
+
+      toast.success(updateExpenseRes?.message as string);
+      router.refresh();
+      router.push('/expense');
+    },
+    [router]
+  );
+
+  const formik = useFormik<ExpenseRealizationFormValues>({
+    initialValues: getExpenseRealizationFormInitialValues(initialValues),
+    validationSchema:
+      type === 'edit'
+        ? UpdateExpenseRealizationFormSchema
+        : ExpenseRealizationFormSchema,
+    onSubmit: async (values) => {
+      setExpenseFormErrorMessage('');
+
+      const realizations: CreateExpenseRealizationPayload['realizations'] = [];
+
+      values.realizations.forEach((realization) => {
+        realization.cost_items.forEach((costItem) => {
+          const unitPrice =
+            parseFloat(String(costItem.total_cost)) /
+            parseFloat(String(costItem.quantity));
+
+          const realizationItem = {
+            expense_nonstock_id: costItem.nonstock?.value as number,
+            qty: parseFloat(String(costItem.quantity)) as number,
+            unit_price: unitPrice,
+            total_price: parseFloat(String(costItem.total_cost)) as number,
+            notes: costItem.notes ?? '',
+          };
+
+          realizations.push(realizationItem);
+        });
+      });
+
+      const expensePayload: CreateExpenseRealizationPayload = {
+        realization_date: values.realization_date as string,
+        documents: values.documents as File[],
+        realizations,
+      };
+
+      switch (type) {
+        case 'add':
+          await createExpenseHandler(expensePayload);
+          break;
+
+        case 'edit':
+          await updateExpenseHandler(
+            initialValues?.id as number,
+            expensePayload
+          );
+          break;
+      }
+    },
+  });
+
+  const { setValues: formikSetValues } = formik;
+
+  const {
+    setInputValue: setLocationInputValue,
+    options: locationOptions,
+    isLoadingOptions: isLoadingLocationOptions,
+  } = useSelect<Location>(LocationApi.basePath, 'id', 'name');
+
+  const {
+    setInputValue: setVendorInputValue,
+    options: vendorOptions,
+    isLoadingOptions: isLoadingVendorOptions,
+  } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name');
+
+  const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldTouched('location', true);
+    formik.setFieldValue('location', val);
+
+    formik.setFieldValue('kandangs', []);
+    formik.setFieldValue('realizations', []);
+  };
+
+  const kandangsChangeHandler = (kandangs: { id: number; name: string }[]) => {
+    formik.setFieldTouched('kandangs', true);
+    formik.setFieldValue('kandangs', kandangs);
+
+    const newRealizations = [...(formik.values.realizations ?? [])];
+
+    // add new realizations
+    kandangs.forEach((kandangItem) => {
+      const isKandangExistInRealization = newRealizations.find(
+        (realizationItem) => realizationItem.kandang_id === kandangItem.id
+      );
+
+      if (isKandangExistInRealization) return;
+
+      newRealizations.push({
+        kandang_id: kandangItem.id,
+        cost_items: [
+          {
+            nonstock: undefined,
+            quantity: undefined,
+            total_cost: undefined,
+            notes: '',
+          },
+        ],
+      });
+    });
+
+    // prune realizations
+    const kandangIds = new Set(kandangs.map((kandang) => kandang.id));
+    const deletedRealizationsIdx: number[] = [];
+
+    newRealizations.forEach((realization, idx) => {
+      const isRealizationValid = kandangIds.has(realization.kandang_id);
+
+      if (!isRealizationValid) {
+        deletedRealizationsIdx.push(idx);
+      }
+    });
+
+    deletedRealizationsIdx.forEach((deletedRealizationIdx) => {
+      newRealizations.splice(deletedRealizationIdx, 1);
+    });
+
+    formik.setFieldValue('realizations', newRealizations);
+  };
+
+  const vendorChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldTouched('vendor', true);
+    formik.setFieldValue('vendor', val);
+  };
+
+  const realizationDocumentsChangeHandler = (val: File[]) => {
+    formik.setFieldTouched('documents', true);
+    formik.setFieldValue('documents', val);
+  };
+
+  const realizationDocumentsDeleteHandler = (deletedFileIdx: number) => {
+    const newRequestDocuments = formik.values.documents;
+
+    newRequestDocuments?.splice(deletedFileIdx, 1);
+
+    formik.setFieldValue('documents', newRequestDocuments);
+  };
+
+  useEffect(() => {
+    formikSetValues(getExpenseRealizationFormInitialValues(initialValues));
+  }, [formikSetValues, getExpenseRealizationFormInitialValues, initialValues]);
+
+  return (
+    <section className='w-full max-w-5xl'>
+      <header className='flex flex-col gap-4'>
+        <Button
+          href='/expense'
+          variant='link'
+          className='w-fit p-0 text-primary'
+        >
+          <Icon icon='uil:arrow-left' width={24} height={24} />
+          Kembali
+        </Button>
+
+        <h1 className='text-2xl font-bold text-center'>
+          Realisasi Biaya Operasional
+        </h1>
+      </header>
+
+      <form
+        onSubmit={formik.handleSubmit}
+        onReset={formik.handleReset}
+        className='w-full mt-8 flex flex-col gap-6'
+      >
+        <div className='grid grid-cols-12 gap-4'>
+          <SelectInput
+            label='Lokasi'
+            required
+            placeholder='Pilih Lokasi'
+            value={formik.values.location}
+            onChange={locationChangeHandler}
+            options={locationOptions}
+            isLoading={isLoadingLocationOptions}
+            onInputChange={setLocationInputValue}
+            isDisabled
+            className={{ wrapper: 'col-span-12 sm:col-span-6' }}
+          />
+
+          <DateInput
+            name='realization_date'
+            label='Tanggal Realisasi'
+            required
+            value={formik.values.realization_date}
+            onChange={formik.handleChange}
+            className={{
+              wrapper: 'col-span-12 sm:col-span-6',
+            }}
+          />
+
+          <ExpenseKandangsTable
+            type='detail'
+            locationId={formik.values.location?.value}
+            selectedKandangs={formik.values.kandangs ?? []}
+            onChange={kandangsChangeHandler}
+            className={{
+              wrapper: 'w-full col-span-12',
+            }}
+          />
+
+          <SelectInput
+            label='Vendor'
+            required
+            placeholder='Pilih Vendor'
+            value={formik.values.supplier}
+            onChange={vendorChangeHandler}
+            options={vendorOptions}
+            isLoading={isLoadingVendorOptions}
+            onInputChange={setVendorInputValue}
+            isDisabled
+            className={{ wrapper: 'col-span-12' }}
+          />
+
+          <DropFileInput
+            label='Dokumen Realisasi'
+            name='documents'
+            values={formik.values.documents}
+            onChange={realizationDocumentsChangeHandler}
+            onDelete={realizationDocumentsDeleteHandler}
+            accept={{
+              ...ACCEPTED_FILE_TYPE.PDF,
+              ...ACCEPTED_FILE_TYPE.IMAGE,
+            }}
+            className={{
+              wrapper: 'col-span-12',
+              inputWrapper: 'h-12 flex items-center',
+            }}
+          />
+
+          {formik.values.existing_documents &&
+            formik.values.existing_documents.length > 0 && (
+              <div className='w-full col-span-12'>
+                <ul className='pl-4 list-disc'>
+                  {formik.values.existing_documents.map(
+                    (existingDocument, existingDocumentIdx) => (
+                      <li key={existingDocumentIdx}>
+                        <Link
+                          href={existingDocument.url}
+                          target='_blank'
+                          rel='noopener noreferrer'
+                          className='text-blue-500 underline'
+                        >
+                          {existingDocument.name}{' '}
+                          <Icon
+                            icon='cuida:open-in-new-tab-outline'
+                            width={12}
+                            height={12}
+                            className='inline'
+                          />
+                        </Link>
+                      </li>
+                    )
+                  )}
+                </ul>
+              </div>
+            )}
+
+          <ExpenseRealizationKandangDetailExpense
+            formik={formik}
+            className={{
+              wrapper: 'col-span-12',
+            }}
+          />
+        </div>
+
+        {expenseFormErrorMessage && (
+          <div role='alert' className='alert alert-error w-full'>
+            <Icon
+              icon='material-symbols:error-outline'
+              width={24}
+              height={24}
+            />
+            <span>{expenseFormErrorMessage}</span>
+          </div>
+        )}
+
+        <div className='flex flex-row justify-between gap-2 flex-wrap'>
+          {type !== 'add' && (
+            <div className='flex flex-row justify-start gap-2'>
+              {type !== 'edit' && (
+                <Button
+                  type='button'
+                  color='warning'
+                  href={`/expense/detail/edit/?expenseId=${initialValues?.id}`}
+                  className='px-4'
+                >
+                  <Icon
+                    icon='material-symbols:edit-outline'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Edit
+                </Button>
+              )}
+            </div>
+          )}
+
+          {type !== 'detail' && (
+            <div
+              className={cn('flex flex-row justify-end gap-2', {
+                'w-full': type === 'add',
+              })}
+            >
+              <Button type='reset' color='warning' className='px-4'>
+                Reset
+              </Button>
+
+              <Button
+                type='submit'
+                color='primary'
+                isLoading={formik.isSubmitting}
+                disabled={!formik.isValid || formik.isSubmitting}
+                className='px-4'
+              >
+                Submit
+              </Button>
+            </div>
+          )}
+        </div>
+      </form>
+    </section>
+  );
+};
+
+export default ExpenseRealizationForm;