<script setup>
import PageTitle from "@/components/global/PageTitle.vue";
import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import { useRouter } from 'vue-router'
import StatisticsSubPageWrapper from "@/views/dashboards/superUserDashboard/statistics/StatisticsSubPageWrapper.vue";
import StatisticsBookings from "@/views/dashboards/superUserDashboard/statistics/displays/StatisticsBookings.vue";

// Get the department from the route
const router = useRouter()
</script>

<template>
  <RestrictedPageWrapper :hasPermission="SessionUser.canAccessSuperUser()">
    <StatisticsSubPageWrapper>
      <template #title>
        <PageTitle title="Statistikker" subtitle="Se hvordan dine afdelinger klarer sig" />
      </template>
      <div>
        <StatisticsBookings :labels="SessionUser.adminUser.statistics.labels.value" :datasets="SessionUser.adminUser.statistics.datasets.value" />
      </div>
    </StatisticsSubPageWrapper>
  </RestrictedPageWrapper>
</template>

<style scoped>

</style>