<script setup lang="ts">
    import { onMounted } from 'vue';
    import { date } from 'quasar';
    import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
    import { useTimesheetStore } from 'src/stores/timesheet-store';
    import EmployeeOverviewList from 'src/modules/timesheet-approval/components/employee-overview/overview-list.vue';
    import TimesheetApprovalDetailed from 'src/modules/timesheet-approval/pages/timesheet-approval-detailed.vue';
    import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';

    const timesheet_approval_api = useTimesheetApprovalApi();
    const timesheet_store = useTimesheetStore();

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

<template>
    <q-page 
        padding 
        class="q-pa-md bg-secondary "
    >
        <PageHeaderTemplate 
            title="timesheet_approvals.page_title"
            :start-date="timesheet_store.pay_period.period_start"
            :end-date="timesheet_store.pay_period.period_end"
        />
        
        <TimesheetApprovalDetailed
            :is-loading="timesheet_store.is_loading"
            :employee-overview="timesheet_store.pay_period_employee_overview"
            :employee-details="timesheet_store.pay_period_employee_details"
        />

        <EmployeeOverviewList />
    </q-page>
</template>