60 lines
1.9 KiB
Vue
60 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { Head } from '@inertiajs/vue3';
|
|
import { ref } from 'vue';
|
|
import AttendanceCard from '@/components/card/AttendanceCard.vue';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import AdminLayout from '@/layouts/AdminLayout.vue';
|
|
import type { AttendanceListItem, CalendarRange, TodayAttendance } from '@/types/attendance';
|
|
import AttendanceWebcamModal from './form/AttendanceWebcamModal.vue';
|
|
import AttendanceCalendar from './table/AttendanceCalendar.vue';
|
|
|
|
defineProps<{
|
|
attendances: AttendanceListItem[];
|
|
todayAttendance: TodayAttendance;
|
|
isOnLeave: boolean;
|
|
canCheckIn: boolean;
|
|
canManageAll: boolean;
|
|
calendarRange: CalendarRange;
|
|
}>();
|
|
|
|
const webcamModalOpen = ref(false);
|
|
const webcamMode = ref<'check-in' | 'check-out'>('check-in');
|
|
|
|
function openCheckInModal() {
|
|
webcamMode.value = 'check-in';
|
|
webcamModalOpen.value = true;
|
|
}
|
|
|
|
function openCheckOutModal() {
|
|
webcamMode.value = 'check-out';
|
|
webcamModalOpen.value = true;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<Head title="Presensi" />
|
|
|
|
<AdminLayout>
|
|
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<div class="space-y-1">
|
|
<h2 class="text-2xl font-bold tracking-tight">
|
|
Presensi
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<AttendanceCard :today-attendance="todayAttendance" :is-on-leave="isOnLeave" :can-check-in="canCheckIn"
|
|
@check-in="openCheckInModal" @check-out="openCheckOutModal" />
|
|
|
|
<Card class="min-w-0 overflow-hidden">
|
|
<CardContent class="min-w-0">
|
|
<AttendanceCalendar :attendances="attendances" :calendar-range="calendarRange"
|
|
:can-manage-all="canManageAll" />
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<AttendanceWebcamModal v-if="canCheckIn" v-model:open="webcamModalOpen" :mode="webcamMode" />
|
|
</AdminLayout>
|
|
</template>
|