sfp_vue_franchisor_ginastica_cerebro/src/pages/tbr/TbrPage.vue

<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>

<template>
  <div>
    <DefaultHeaderPage title="TBR - Configurações" />

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

      <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>
    </div>
  </div>
</template>