feat(tbrs): contract tab

src/api/tbr.js

@@ -14,3 +14,8 @@ export const updateTbr = async (id, payload) => {
   const { data } = await api.put(`/tbr/${id}`, payload);
   return data.payload;
 };
+
+export const getFranchiseeTbrs = async () => {
+  const { data } = await api.get("/franchisee-tbr");
+  return data.payload;
+};

src/pages/tbr/TbrPage.vue

@@ -4,15 +4,15 @@ import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
 import CustomTabComponent from "src/components/shared/CustomTabComponent.vue";
 
 const SettingsTab = defineAsyncComponent(() => import("./tabs/SettingsTab.vue"));
-const BillingGenerationTab = defineAsyncComponent(() => import("./tabs/BillingGenerationTab.vue"));
-const GeneratedBillingsTab = defineAsyncComponent(() => import("./tabs/GeneratedBillingsTab.vue"));
+const ContractsTab = defineAsyncComponent(() => import("./tabs/ContractsTab.vue"));
+const BillingsTab = defineAsyncComponent(() => import("./tabs/BillingsTab.vue"));
 
 const currentTab = ref("settings");
 
 const tabs = [
   { name: "settings", label: "Configurações" },
-  { name: "billing-generation", label: "Geração de Cobranças" },
-  { name: "generated-billings", label: "Ver Cobranças Geradas" },
+  { name: "contracts", label: "Contratos" },
+  { name: "billings", label: "Cobranças" },
 ];
 </script>
 
@@ -27,12 +27,12 @@ const tabs = [
         <SettingsTab />
       </div>
 
-      <div v-show="currentTab === 'billing-generation'">
-        <BillingGenerationTab />
+      <div v-show="currentTab === 'contracts'">
+        <ContractsTab />
       </div>
 
-      <div v-show="currentTab === 'generated-billings'">
-        <GeneratedBillingsTab />
+      <div v-show="currentTab === 'billings'">
+        <BillingsTab />
       </div>
     </div>
   </div>

src/pages/tbr/tabs/BillingGenerationTab.vue

@@ -1,8 +0,0 @@
-<script setup>
-</script>
-
-<template>
-  <div>
-    <h6>Geração de Cobranças</h6>
-  </div>
-</template>

src/pages/tbr/tabs/ContractsTab.vue

@@ -0,0 +1,70 @@
+<template>
+  <DefaultTable
+    v-model:rows="rows"
+    :columns="columns"
+    title="Contratos TBR"
+    description="contratos"
+    :female="false"
+    :no-api-call="true"
+    :show-search-field="true"
+  >
+    <template #body-cell-tbr_value="{ row }">
+      <q-td>{{ formatToBRLCurrency(row.tbr_value) }}</q-td>
+    </template>
+
+    <template #body-cell-royalties="{ row }">
+      <q-td>{{ formatPercentage(row.base_royalties_percentage) }}</q-td>
+    </template>
+
+    <template #body-cell-fnm="{ row }">
+      <q-td>{{ formatPercentage(row.base_fnm_percentage) }}</q-td>
+    </template>
+
+    <template #body-cell-maintenance="{ row }">
+      <q-td>{{ formatPercentage(row.maintenance_percentage) }}</q-td>
+    </template>
+
+    <template #body-cell-ref_month="{ row }">
+      <q-td>{{ formatRefMonth(row.contract_month_current, row.contract_validity_months) }}</q-td>
+    </template>
+
+    <template #body-cell-actions>
+      <q-td align="center">
+        <q-btn flat round dense icon="mdi-eye-outline" size="sm" />
+      </q-td>
+    </template>
+  </DefaultTable>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import DefaultTable from "src/components/defaults/DefaultTable.vue";
+import { getFranchiseeTbrs } from "src/api/tbr";
+import { formatToBRLCurrency, formatPercentage } from "src/helpers/utils";
+
+const rows = ref([]);
+
+const columns = [
+  { name: "id", label: "ID", field: "id", align: "left" },
+  { name: "unit_name", label: "Unidade", field: "unit_name", align: "left" },
+  { name: "tbr_value", label: "TBR", field: "tbr_value", align: "left" },
+  { name: "royalties", label: "Royalties", field: "base_royalties_percentage", align: "left" },
+  { name: "fnm", label: "FNM", field: "base_fnm_percentage", align: "left" },
+  { name: "maintenance", label: "Manutenção", field: "maintenance_percentage", align: "left" },
+  { name: "ref_month", label: "Ref. Mês", field: "contract_month_current", align: "left" },
+  { name: "actions", label: "Ações", field: "actions", align: "center" },
+];
+
+function formatRefMonth(current, total) {
+  if (current == null || total == null) return "—";
+  const pad = (n) => String(n).padStart(2, "0");
+  return `${pad(current)}/${pad(total)}`;
+}
+
+async function loadData() {
+  const result = await getFranchiseeTbrs();
+  rows.value = result?.data ?? result ?? [];
+}
+
+onMounted(loadData);
+</script>