store/resources/js/components/admin/finance/payroll/data-table-actions.vue

32 lines
1.0 KiB
Vue

<script setup lang="ts">
import { SlidersHorizontal } from '@lucide/vue';
import { Button } from '@/components/ui/button';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { useCan } from '@/composables/useCan';
import type { PayrollListItem } from '@/types/payroll';
const props = defineProps<{
payroll: PayrollListItem;
}>();
const emit = defineEmits<{
adjust: [payroll: PayrollListItem];
}>();
const { can } = useCan();
</script>
<template>
<div class="flex items-center justify-end gap-1">
<Tooltip v-if="payroll.can_adjust && can('payroll.adjust')">
<TooltipTrigger as-child>
<Button variant="ghost" size="icon" class="size-8" @click="emit('adjust', payroll)">
<SlidersHorizontal class="size-4" />
<span class="sr-only">Sesuaikan</span>
</Button>
</TooltipTrigger>
<TooltipContent>Sesuaikan Gaji</TooltipContent>
</Tooltip>
</div>
</template>