<script setup lang="ts">
import { date } from 'quasar';
import { onMounted } from 'vue';
import { useAuthStore } from 'src/stores/auth-store';
import { useTimesheetApi } from 'src/modules/timesheets/composables/api/use-timesheet-api';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
import TimesheetWrapper from 'src/modules/timesheets/components/timesheet-wrapper.vue';

const { user } = useAuthStore();
const timesheet_store = useTimesheetStore();
const timesheet_api = useTimesheetApi();

onMounted(async () => {
    await timesheet_api.getPayPeriodDetailsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
});
</script>

<template>
    <q-page
        padding
        class="q-pa-md bg-secondary"
    >
        <PageHeaderTemplate
            :title="$t('timesheet.page_header')"
            :start-date="timesheet_store.pay_period.period_start"
            :end-date="timesheet_store.pay_period.period_end"
        />

        <TimesheetWrapper :employee-email="user.email" />

    </q-page>
</template>