<template>
  <div class="dashboard-view">
    <total-card v-if="checkAuth('shop.admin.dashboard.total')" />
    <chart-card v-if="checkAuth('shop.admin.dashboard.chart')" />
    <ranking-card v-if="checkAuth('shop.admin.dashboard.ranking')" />
  </div>
</template>

<script>
  export default {
    name: 'shop.admin.dashboard',
  };
</script>

<script setup>
  import { checkAuth } from '@/sheep/directives/auth';
  import TotalCard from './components/total/index.vue';
  import ChartCard from './components/chart/index.vue';
  import RankingCard from './components/ranking/index.vue';
</script>

<style lang="scss" scoped>
  .dashboard-view {
    --sa-padding: 16px;
    padding-top: var(--sa-padding);
    :deep() {
      .card {
        background: var(--sa-background-assist);
        border-radius: 8px;
        border: 1px solid var(--sa-space);
        box-shadow: 0 2px 6px rgba(140, 140, 140, 0.12);
        margin-bottom: var(--sa-padding);
      }
    }
  }
</style>
