feat(FE-193): add existing documents link

src/components/pages/expense/form/ExpenseRequestForm.tsx

@@ -6,6 +6,7 @@ import { useFormik } from 'formik';
 import { toast } from 'react-hot-toast';
 
 import { Icon } from '@iconify/react';
+import Link from 'next/link';
 import Button from '@/components/Button';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
@@ -151,20 +152,26 @@ const ExpenseRequestForm = ({
   const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
     formik.setFieldTouched('location', true);
     formik.setFieldValue('location', val);
+
+    formik.setFieldValue('kandangs', []);
+    formik.setFieldValue('kandangExpenses', []);
   };
 
   const kandangsChangeHandler = (kandangs: { id: number; name: string }[]) => {
     formik.setFieldTouched('kandangs', true);
     formik.setFieldValue('kandangs', kandangs);
 
+    const newKandangExpenses = [...(formik.values.kandangExpenses ?? [])];
+
+    // add new kandangExpenses
     kandangs.forEach((kandangItem) => {
-      const isKandangExistInKandangExpense = formik.values.kandangExpenses.find(
+      const isKandangExistInKandangExpense = newKandangExpenses.find(
         (kandangExpenseItem) => kandangExpenseItem.kandangId === kandangItem.id
       );
 
       if (isKandangExistInKandangExpense) return;
 
-      formik.values.kandangExpenses.push({
+      newKandangExpenses.push({
         kandangId: kandangItem.id,
         expenses: [
           {
@@ -176,6 +183,24 @@ const ExpenseRequestForm = ({
         ],
       });
     });
+
+    // prune kandangExpenses
+    const kandangIds = new Set(kandangs.map((kandang) => kandang.id));
+    const deletedKandangExpensesIdx: number[] = [];
+
+    newKandangExpenses.forEach((kandangExpense, idx) => {
+      const isKandangExpenseValid = kandangIds.has(kandangExpense.kandangId);
+
+      if (!isKandangExpenseValid) {
+        deletedKandangExpensesIdx.push(idx);
+      }
+    });
+
+    deletedKandangExpensesIdx.forEach((deletedKandangExpenseIdx) => {
+      newKandangExpenses.splice(deletedKandangExpenseIdx, 1);
+    });
+
+    formik.setFieldValue('kandangExpenses', newKandangExpenses);
   };
 
   const vendorChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -218,10 +243,6 @@ const ExpenseRequestForm = ({
     formikSetValues(getExpenseFormInitialValues(initialValues));
   }, [formikSetValues, getExpenseFormInitialValues, initialValues]);
 
-  useEffect(() => {
-    formik.setFieldValue('kandangs', undefined);
-  }, [formik.values.location]);
-
   return (
     <>
       <section className='w-full max-w-5xl'>
@@ -308,6 +329,34 @@ const ExpenseRequestForm = ({
               }}
             />
 
+            {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>
+              )}
+
             <ExpenseRequestKandangDetailExpense
               formik={formik}
               className={{