jws-frontend/src/pages/01_branch-management/MainPage.vue

<script setup lang="ts">
import AppBox from 'components/app/AppBox.vue';
import BtnAddComponet from 'components/01_branch-management/BtnAddComponet.vue';
import StatCardComponet from 'components/StatCardComponet.vue';
import TooltipComponet from 'src/components/TooltipComponet.vue';
import { ref } from 'vue';

const branchStat = ref<
  {
    amount: string;
    label: string;
  }[]
>([
  {
    amount: '1',
    label: 'สำนักงานใหญ่ 1',
  },

  {
    amount: '2',
    label: 'สำนักงานใหญ่ 2',
  },
  {
    amount: '3',
    label: 'สำนักงานใหญ่ 3',
  },
  {
    amount: '4',
    label: 'สำนักงานใหญ่ 4',
  },
  {
    amount: '5',
    label: 'สำนักงานใหญ่ 5',
  },
]);
</script>
<template>
  <div class="column">
    <div class="row text-h6 text-weight-bold q-mb-md">
      {{ $t('branchManagement') }}
    </div>

    <app-box bordered class="q-mb-md">
      <stat-card-componet :branch="branchStat" />
    </app-box>

    <app-box bordered style="width: 100%; height: 500px">
      <div class="column" style="height: 100%">
        <div class="col-1 self-end">
          <div class="row">
            <tooltip-componet imgSrc="img-table-" />
          </div>
        </div>

        <div
          class="col test self-center"
          style="display: flex; align-items: center"
        >
          <btn-add-componet
            :label="'สร้างสำนักงานใหญ่'"
            @trigger="
              () => {
                console.log('test');
              }
            "
          />
        </div>
      </div>
    </app-box>
  </div>
</template>

<style scoped></style>