sfp_vue_franchisor_ginastica_cerebro/src/pages/tbr/TbrPage.vue

<template>
  <div class="tab-page-layout">
    <DefaultHeaderPage title="TBR - Configurações" :show-filter-icon="false" />

    <div class="tab-page-body q-px-sm">
      <CustomTabComponent
        v-model:active-tab="currentTab"
        class="q-mb-md"
        :tabs="tabs"
      />

      <q-scroll-area class="tab-page-scroll-area">
        <div v-show="currentTab === 'settings'">
          <SettingsTab />
        </div>

        <div v-show="currentTab === 'contracts'">
          <ContractsTab />
        </div>

        <div v-show="currentTab === 'billings'">
          <BillingsTab />
        </div>

        <div v-show="currentTab === 'inhabitant_classifications'">
          <InhabitantClassificationsTab />
        </div>
      </q-scroll-area>
    </div>
  </div>
</template>

<script setup>
import { defineAsyncComponent, ref } from "vue";

import CustomTabComponent from "src/components/shared/CustomTabComponent.vue";

import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";

const SettingsTab = defineAsyncComponent(
  () => import("./tabs/SettingsTab.vue"),
);
const ContractsTab = defineAsyncComponent(
  () => import("./tabs/ContractsTab.vue"),
);
const BillingsTab = defineAsyncComponent(
  () => import("./tabs/BillingsTab.vue"),
);

const InhabitantClassificationsTab = defineAsyncComponent(
  () => import("./tabs/InhabitantClassificationsTab.vue"),
);

const currentTab = ref("settings");

const tabs = [
  { name: "settings", label: "Configurações" },
  { name: "inhabitant_classifications", label: "Faixas" },
  { name: "contracts", label: "Contratos" },
  { name: "billings", label: "Cobranças" },
];
</script>