mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
feat(FE-331): implement permission guard in expense
This commit is contained in:
ValdiANS
@@ -19,6 +19,7 @@ import { useModal } from '@/components/Modal';
|
||||
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 { Expense } from '@/types/api/expense';
|
||||
import { formatCurrency, formatDate } from '@/lib/helper';
|
||||
@@ -255,100 +256,119 @@ const ExpenseRequestContent = ({
|
||||
|
||||
<div className='w-full max-w-5xl mx-auto flex flex-col sm:flex-row justify-end gap-2'>
|
||||
{isCurrentApprovalOnManager && (
|
||||
<Button
|
||||
variant='outline'
|
||||
color='info'
|
||||
onClick={approveClickHandler}
|
||||
className='w-full sm:w-fit'
|
||||
>
|
||||
<Icon icon='lucide-lab:farm' width={24} height={24} />
|
||||
Approve Manager
|
||||
</Button>
|
||||
<RequirePermission permissions='lti.expense.approve.manager'>
|
||||
<Button
|
||||
variant='outline'
|
||||
color='info'
|
||||
onClick={approveClickHandler}
|
||||
className='w-full sm:w-fit'
|
||||
>
|
||||
<Icon icon='lucide-lab:farm' width={24} height={24} />
|
||||
Approve Manager
|
||||
</Button>
|
||||
</RequirePermission>
|
||||
)}
|
||||
|
||||
{isCurrentApprovalOnFinance && (
|
||||
<Button
|
||||
variant='outline'
|
||||
color='success'
|
||||
onClick={approveClickHandler}
|
||||
className='w-full sm:w-fit'
|
||||
>
|
||||
<Icon icon='tdesign:money' width={24} height={24} />
|
||||
Approve Finance
|
||||
</Button>
|
||||
<RequirePermission permissions='lti.expense.approve.finance'>
|
||||
<Button
|
||||
variant='outline'
|
||||
color='success'
|
||||
onClick={approveClickHandler}
|
||||
className='w-full sm:w-fit'
|
||||
>
|
||||
<Icon icon='tdesign:money' width={24} height={24} />
|
||||
Approve Finance
|
||||
</Button>
|
||||
</RequirePermission>
|
||||
)}
|
||||
|
||||
{isCurrentApprovalOnRealization && (
|
||||
<Button
|
||||
variant='outline'
|
||||
color='success'
|
||||
onClick={completeExpenseClickHandler}
|
||||
className='w-full sm:w-fit'
|
||||
>
|
||||
<Icon
|
||||
icon='material-symbols:done-all-rounded'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
Selesai
|
||||
</Button>
|
||||
<RequirePermission permissions='lti.expense.complete.expense'>
|
||||
<Button
|
||||
variant='outline'
|
||||
color='success'
|
||||
onClick={completeExpenseClickHandler}
|
||||
className='w-full sm:w-fit'
|
||||
>
|
||||
<Icon
|
||||
icon='material-symbols:done-all-rounded'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
Selesai
|
||||
</Button>
|
||||
</RequirePermission>
|
||||
)}
|
||||
|
||||
{showRejectButton && (
|
||||
<Button
|
||||
variant='outline'
|
||||
color='error'
|
||||
onClick={rejectClickHandler}
|
||||
className='w-full:w-fit'
|
||||
<RequirePermission
|
||||
permissions={[
|
||||
'lti.expense.approve.manager',
|
||||
'lti.expense.approve.finance',
|
||||
]}
|
||||
>
|
||||
<Icon icon='material-symbols:close' width={24} height={24} />
|
||||
Reject
|
||||
</Button>
|
||||
<Button
|
||||
variant='outline'
|
||||
color='error'
|
||||
onClick={rejectClickHandler}
|
||||
className='w-full:w-fit'
|
||||
>
|
||||
<Icon icon='material-symbols:close' width={24} height={24} />
|
||||
Reject
|
||||
</Button>
|
||||
</RequirePermission>
|
||||
)}
|
||||
|
||||
{isExpenseCanBeRealized && (
|
||||
<Button
|
||||
variant='outline'
|
||||
color='info'
|
||||
href={`/expense/realization/?expenseId=${initialValues?.id}`}
|
||||
className='w-full sm:w-fit'
|
||||
>
|
||||
<Icon
|
||||
icon='material-symbols:money-bag-rounded'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
Realisasi
|
||||
</Button>
|
||||
<RequirePermission permissions='lti.expense.create.realization'>
|
||||
<Button
|
||||
variant='outline'
|
||||
color='info'
|
||||
href={`/expense/realization/?expenseId=${initialValues?.id}`}
|
||||
className='w-full sm:w-fit'
|
||||
>
|
||||
<Icon
|
||||
icon='material-symbols:money-bag-rounded'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
Realisasi
|
||||
</Button>
|
||||
</RequirePermission>
|
||||
)}
|
||||
|
||||
<div className='w-full sm:w-fit sm:ml-2 flex flex-row gap-2 items-center'>
|
||||
{showEditButton && (
|
||||
<Button
|
||||
type='button'
|
||||
color='warning'
|
||||
href={`/expense/detail/edit/?expenseId=${initialValues?.id}`}
|
||||
className='px-4 grow sm:grow-0'
|
||||
>
|
||||
<Icon icon='mdi:pencil-outline' width={24} height={24} />
|
||||
Edit
|
||||
</Button>
|
||||
<RequirePermission permissions='lti.expense.update'>
|
||||
<Button
|
||||
type='button'
|
||||
color='warning'
|
||||
href={`/expense/detail/edit/?expenseId=${initialValues?.id}`}
|
||||
className='px-4 grow sm:grow-0'
|
||||
>
|
||||
<Icon icon='mdi:pencil-outline' width={24} height={24} />
|
||||
Edit
|
||||
</Button>
|
||||
</RequirePermission>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={deleteExpenseClickHandler}
|
||||
className='px-4 grow sm:grow-0'
|
||||
>
|
||||
<Icon
|
||||
icon='material-symbols:delete-outline-rounded'
|
||||
width={24}
|
||||
height={24}
|
||||
className='justify-start text-sm'
|
||||
/>
|
||||
Delete
|
||||
</Button>
|
||||
<RequirePermission permissions='lti.expense.delete'>
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={deleteExpenseClickHandler}
|
||||
className='px-4 grow sm:grow-0'
|
||||
>
|
||||
<Icon
|
||||
icon='material-symbols:delete-outline-rounded'
|
||||
width={24}
|
||||
height={24}
|
||||
className='justify-start text-sm'
|
||||
/>
|
||||
Delete
|
||||
</Button>
|
||||
</RequirePermission>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -485,36 +505,42 @@ const ExpenseRequestContent = ({
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col gap-2'>
|
||||
<DropFileInput
|
||||
name='documents'
|
||||
values={formik.values.documents}
|
||||
onChange={requestDocumentsChangeHandler}
|
||||
onDelete={requestDocumentsDeleteHandler}
|
||||
accept={{
|
||||
...ACCEPTED_FILE_TYPE.PDF,
|
||||
...ACCEPTED_FILE_TYPE.IMAGE,
|
||||
}}
|
||||
maxFiles={10}
|
||||
className={{
|
||||
wrapper: 'mt-2',
|
||||
inputWrapper: 'flex items-center',
|
||||
}}
|
||||
/>
|
||||
<RequirePermission permissions='lti.expense.document'>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<DropFileInput
|
||||
name='documents'
|
||||
values={formik.values.documents}
|
||||
onChange={requestDocumentsChangeHandler}
|
||||
onDelete={requestDocumentsDeleteHandler}
|
||||
accept={{
|
||||
...ACCEPTED_FILE_TYPE.PDF,
|
||||
...ACCEPTED_FILE_TYPE.IMAGE,
|
||||
}}
|
||||
maxFiles={10}
|
||||
className={{
|
||||
wrapper: 'mt-2',
|
||||
inputWrapper: 'flex items-center',
|
||||
}}
|
||||
/>
|
||||
|
||||
{formik.values.documents &&
|
||||
formik.values.documents.length > 0 && (
|
||||
<Button
|
||||
onClick={formik.submitForm}
|
||||
disabled={formik.isSubmitting}
|
||||
isLoading={formik.isSubmitting}
|
||||
className='w-fit self-end'
|
||||
>
|
||||
<Icon icon='ic:round-plus' width={24} height={24} />
|
||||
Tambah
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{formik.values.documents &&
|
||||
formik.values.documents.length > 0 && (
|
||||
<Button
|
||||
onClick={formik.submitForm}
|
||||
disabled={formik.isSubmitting}
|
||||
isLoading={formik.isSubmitting}
|
||||
className='w-fit self-end'
|
||||
>
|
||||
<Icon
|
||||
icon='ic:round-plus'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
Tambah
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</RequirePermission>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
Reference in New Issue
Block a user