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

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>
   );
 };