gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-20 13:32:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement paid off expense feature

Browse Source
This commit is contained in:
ValdiANS
2026-05-12 11:09:25 +07:00
parent 67c7e85ba8
commit 5767a078d9
2 changed files with 175 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/expense/ExpenseRequestContent.tsx
+85 -1
View File
@@ -2,6 +2,7 @@
import { useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { useSWRConfig } from 'swr';
import { useFormik } from 'formik';
import toast from 'react-hot-toast';
@@ -19,6 +20,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
import ExpensePDFPreviewButton from '@/components/pages/expense//pdf/ExpensePDFButton';
import RequirePermission from '@/components/helper/RequirePermission';
import StatusBadge from '@/components/helper/StatusBadge';
import { Expense } from '@/types/api/expense';
import { formatCurrency, formatDate } from '@/lib/helper';
@@ -26,7 +28,7 @@ import {
UploadRequestDocumentsFormSchema,
UploadRequestDocumentsFormValues,
} from '@/components/pages/expense/form/ExpenseRequestForm.schema';
import { ACCEPTED_FILE_TYPE, S3_PUBLIC_BASE_URL } from '@/config/constant';
import { ACCEPTED_FILE_TYPE } from '@/config/constant';
import { ExpenseApi } from '@/services/api/expense';
import { isResponseSuccess } from '@/lib/api-helper';
import { EXPENSE_REQUEST_APPROVAL_LINE } from '@/config/approval-line';
@@ -46,6 +48,11 @@ const ExpenseRequestContent = ({
const router = useRouter();
const searchParams = useSearchParams();
const returnTo = getExpenseListReturnTo(searchParams);
const { mutate } = useSWRConfig();
const refreshExpense = () => {
mutate((key) => Array.isArray(key) && key[0] === 'expense-detail');
};
const { approvals: approvalHistory, isLoading: isLoadingApprovalHistory } =
useApprovalSteps({
@@ -95,17 +102,24 @@ const ExpenseRequestContent = ({
!isLatestApprovalRejected &&
initialValues?.latest_approval.step_number === 4;
const isExpensePaidOff = initialValues?.is_paid;
const showPaidOffButton =
!isExpensePaidOff && (initialValues?.latest_approval.step_number ?? 0) > 4;
// Modal hooks
const deleteModal = useModal();
const completeModal = useModal();
const approveModal = useModal();
const rejectModal = useModal();
const paidOffModal = useModal();
// Modal loading state
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const [isCompleteLoading, setIsCompleteLoading] = useState(false);
const [isApproveLoading, setIsApproveLoading] = useState(false);
const [isRejectLoading, setIsRejectLoading] = useState(false);
const [isPaidOffLoading, setIsPaidOffLoading] = useState(false);
const [, setApprovalNotes] = useState('');
const formik = useFormik<UploadRequestDocumentsFormValues>({
@@ -146,7 +160,31 @@ const ExpenseRequestContent = ({
rejectModal.openModal();
};
const paidOffClickHandler = () => {
paidOffModal.openModal();
};
// Modal confirm click handler
const confirmationModalPaidOffClickHandler = async () => {
setIsPaidOffLoading(true);
const paidOffResponse = await ExpenseApi.setExpensePaidOff(
initialValues?.id as number
);
if (isResponseSuccess(paidOffResponse)) {
toast.success('Berhasil menandai biaya operasional sebagai lunas!');
refreshExpense();
} else {
toast.error(
'Gagal menandai biaya operasional sebagai lunas!: ' +
paidOffResponse?.message
);
}
paidOffModal.closeModal();
setIsPaidOffLoading(false);
};
const confirmationModalDeleteClickHandler = async () => {
setIsDeleteLoading(true);
@@ -388,6 +426,24 @@ const ExpenseRequestContent = ({
</RequirePermission>
)}
{showPaidOffButton && (
<RequirePermission permissions='lti.expense.create.realization'>
<Button
variant='outline'
color='success'
onClick={paidOffClickHandler}
className='w-full sm:w-fit'
>
<Icon
icon='material-symbols:check-circle-outline'
width={24}
height={24}
/>
Tandai Lunas
</Button>
</RequirePermission>
)}
<div className='w-full sm:w-fit sm:ml-2 flex flex-row gap-2 items-center'>
{showEditButton && (
<RequirePermission permissions='lti.expense.update'>
@@ -533,6 +589,19 @@ const ExpenseRequestContent = ({
/>
</td>
</tr>
<tr>
<th>Status Lunas</th>
<th>:</th>
<td>
<StatusBadge
color={initialValues?.is_paid ? 'primary' : 'warning'}
text={initialValues?.is_paid ? 'Lunas' : 'Belum Lunas'}
className={{
badge: 'w-fit whitespace-nowrap',
}}
/>
</td>
</tr>
<tr>
<th>Dokumen Pengajuan</th>
<th>:</th>
@@ -752,6 +821,21 @@ const ExpenseRequestContent = ({
onClick: confirmationModalRejectClickHandler,
}}
/>
<ConfirmationModal
ref={paidOffModal.ref}
type='success'
text='Apakah anda yakin ingin menandai biaya operasional ini sebagai lunas?'
secondaryButton={{
text: 'Tidak',
}}
primaryButton={{
text: 'Ya',
color: 'success',
isLoading: isPaidOffLoading,
onClick: confirmationModalPaidOffClickHandler,
}}
/>
</>
);
};
src/components/pages/expense/ExpensesTable.tsx
+90
View File
@@ -36,6 +36,7 @@ import ButtonFilter from '@/components/helper/ButtonFilter';
import ExpensesFilterModal from '@/components/pages/expense/filter/ExpensesFilterModal';
import ExpenseTableSkeleton from '@/components/pages/expense/skeleton/ExpenseTableSkeleton';
import Dropdown from '@/components/dropdown/Dropdown';
import StatusBadge from '@/components/helper/StatusBadge';
import { Expense } from '@/types/api/expense';
import { ExpenseApi } from '@/services/api/expense';
@@ -87,10 +88,12 @@ const RowOptionsMenu = ({
popoverPosition = 'bottom',
props,
deleteClickHandler,
paidOffClickHandler,
}: {
popoverPosition: 'bottom' | 'top';
props: CellContext<Expense, unknown>;
deleteClickHandler: () => void;
paidOffClickHandler: () => void;
}) => {
const popoverId = `expense#${props.row.original.id}`;
const popoverAnchorName = `--anchor-expense#${props.row.original.id}`;
@@ -112,6 +115,11 @@ const RowOptionsMenu = ({
props.row.original.latest_approval.step_number === 4
: false;
const showPaidOffButton = props.row.original.latest_approval
? props.row.original.latest_approval.step_number > 4 &&
!props.row.original.is_paid
: false;
return (
<div className='relative'>
<PopoverButton
@@ -179,6 +187,28 @@ const RowOptionsMenu = ({
</RequirePermission>
)}
{showPaidOffButton && (
<RequirePermission permissions='lti.expense.create.realization'>
<Button
onClick={() => {
paidOffClickHandler();
closePopover();
}}
variant='ghost'
color='none'
className='p-3 justify-start text-sm font-semibold w-full'
>
<Icon
icon='material-symbols:check-circle-outline'
width={20}
height={20}
className='text-success'
/>
Tandai Lunas
</Button>
</RequirePermission>
)}
<RequirePermission permissions='lti.expense.delete'>
<Button
onClick={() => {
@@ -264,6 +294,7 @@ const ExpensesTable = () => {
const deleteModal = useModal();
const approveModal = useModal();
const rejectModal = useModal();
const paidOffModal = useModal();
const bulkApproveFormModal = useModal();
const exportProgressInputModal = useModal();
@@ -276,6 +307,7 @@ const ExpensesTable = () => {
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const [isApproveLoading, setIsApproveLoading] = useState(false);
const [isRejectLoading, setIsRejectLoading] = useState(false);
const [isPaidOffLoading, setIsPaidOffLoading] = useState(false);
const [isLoadingExportingToExcel, setIsLoadingExportingToExcel] =
useState(false);
const [isExportProgressLoading, setIsExportProgressLoading] = useState(false);
@@ -432,6 +464,20 @@ const ExpensesTable = () => {
<ExpenseStatusBadge approval={props.row.original.latest_approval} />
),
},
{
header: 'Status Lunas',
cell: (props) => {
return (
<StatusBadge
color={props.row.original.is_paid ? 'primary' : 'warning'}
text={props.row.original.is_paid ? 'Lunas' : 'Belum Lunas'}
className={{
badge: 'w-fit whitespace-nowrap',
}}
/>
);
},
},
{
header: 'Aksi',
cell: (props) => {
@@ -447,11 +493,17 @@ const ExpensesTable = () => {
deleteModal.openModal();
};
const paidOffClickHandler = () => {
setSelectedExpense(props.row.original);
paidOffModal.openModal();
};
return (
<RowOptionsMenu
popoverPosition={isLast2Rows ? 'top' : 'bottom'}
props={props}
deleteClickHandler={deleteClickHandler}
paidOffClickHandler={paidOffClickHandler}
/>
);
},
@@ -593,6 +645,29 @@ const ExpensesTable = () => {
setIsDeleteLoading(false);
};
const confirmationModalPaidOffClickHandler = async () => {
setIsPaidOffLoading(true);
const paidOffResponse = await ExpenseApi.setExpensePaidOff(
selectedExpense?.id as number
);
if (isResponseSuccess(paidOffResponse)) {
refreshExpenses();
paidOffModal.closeModal();
toast.success('Berhasil menandai biaya operasional sebagai lunas!');
refreshExpenses();
} else {
paidOffModal.closeModal();
toast.error(
'Gagal menandai biaya operasional sebagai lunas!: ' +
paidOffResponse?.message
);
}
setIsPaidOffLoading(false);
};
const confirmationModalApproveClickHandler = async (notes: string) => {
setIsApproveLoading(true);
@@ -1105,6 +1180,21 @@ const ExpensesTable = () => {
}}
/>
<ConfirmationModal
ref={paidOffModal.ref}
type='success'
text='Apakah anda yakin ingin menandai biaya operasional ini sebagai lunas?'
secondaryButton={{
text: 'Tidak',
}}
primaryButton={{
text: 'Ya',
color: 'success',
isLoading: isPaidOffLoading,
onClick: confirmationModalPaidOffClickHandler,
}}
/>
<ConfirmationModalWithNotes
ref={approveModal.ref}
type='success'