<script setup lang="ts">
import { useRouter } from "vue-router";

/** component */
import Salary from "@/modules/10_registry/03_Salary/01_Salary.vue";
import Nopaid from "@/modules/10_registry/03_Salary/02_Nopaid.vue";

const router = useRouter();
</script>
<template>
  <div v-if="!$q.screen.gt.xs" class="col-xs-12 col-sm-12 col-md-11">
    <div class="toptitle text-white col-12 row items-center">
      <q-btn
        icon="mdi-arrow-left"
        unelevated
        round
        dense
        flat
        color="primary"
        class="q-mr-sm"
        @click="router.push('/registry')"
      />
      <div>ข้อมูลเงินเดือน/ค่าจ้าง</div>
    </div>
  </div>

  <div :class="`row q-my-sm ${$q.screen.gt.xs ? '' : 'mobileClass'}`">
    <Salary />
    <Nopaid />
  </div>
</template>
<style scoped>
.mobileClass {
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
}
</style>
