feat: add tbr table

src/pages/tbr/tabs/SettingsTab.vue

@@ -1,18 +1,31 @@
 <script setup>
 import { ref, onMounted } from "vue";
-import DefaultInput from "src/components/defaults/DefaultInput.vue";
+import DefaultTable from "src/components/defaults/DefaultTable.vue";
 import {
   getRoyaltiesBaseBrackets,
   getFnmBaseBrackets,
   getMaintenanceBaseBrackets,
 } from "src/api/tbr";
 
-const royaltiesBrackets = ref([]);
-const fnmBrackets = ref([]);
-const maintenanceBrackets = ref([]);
+const rows = ref([]);
 
-function bracketRangeLabel(bracket) {
-  return `Meses ${bracket.start_month} a ${bracket.end_month}`;
+const columns = [
+  { name: "id", label: "ID", field: "id", align: "left" },
+  { name: "year", label: "Ano", field: "start_month", align: "left" },
+  { name: "tbr", label: "TBR", field: "royalties_percentage", align: "left" },
+  { name: "royalties", label: "Royalties", field: "royalties_percentage", align: "left" },
+  { name: "fnm", label: "FNM", field: "fnm_percentage", align: "left" },
+  { name: "maintenance", label: "Manutenção", field: "maintenance_percentage", align: "left" },
+  { name: "actions", label: "Ações", field: "actions", align: "center" },
+];
+
+function formatPercentage(value) {
+  if (value == null) return "—";
+  return `${(value * 100).toFixed(0)}%`;
+}
+
+function formatMonthRange(start, end) {
+  return end ? `Mês ${start} - ${end}` : `Mês ${start}+`;
 }
 
 onMounted(async () => {
@@ -22,52 +35,60 @@ onMounted(async () => {
     getMaintenanceBaseBrackets(),
   ]);
 
-  royaltiesBrackets.value = royalties;
-  fnmBrackets.value = fnm;
-  maintenanceBrackets.value = maintenance;
+  rows.value = royalties.map((r, i) => ({
+    id: r.id,
+    start_month: r.start_month,
+    end_month: r.end_month,
+    royalties_percentage: r.percentage,
+    fnm_percentage: fnm[i]?.percentage ?? null,
+    maintenance_percentage: maintenance[i]?.percentage ?? null,
+  }));
 });
+
+function onAdd() {
+  // TODO
+}
 </script>
 
 <template>
-  <div class="q-pa-sm">
-    <p class="text-subtitle2 q-mb-md">Definir Faixa (Mês de Contrato)</p>
+  <DefaultTable
+    v-model:rows="rows"
+    :columns="columns"
+    title="Configurações TBR"
+    description="faixas"
+    :female="false"
+    :no-api-call="true"
+    :show-search-field="true"
+    :add-item="true"
+    @on-add-item="onAdd"
+  >
+    <template #body-cell-year="{ row }">
+      <q-td>{{ formatMonthRange(row.start_month, row.end_month) }}</q-td>
+    </template>
+
+    <template #body-cell-tbr="{ row }">
+      <q-td>{{ formatPercentage(row.royalties_percentage) }}</q-td>
+    </template>
 
-    <div
-      v-for="(royalties, index) in royaltiesBrackets"
-      :key="royalties.id"
-      class="row q-col-gutter-md q-mb-sm"
-    >
-      <div class="col-12 col-md-3">
-        <DefaultInput
-          :model-value="bracketRangeLabel(royalties)"
-          label="Faixa (mês de contrato)"
-          readonly
-        />
-      </div>
+    <template #body-cell-royalties="{ row }">
+      <q-td>{{ formatPercentage(row.royalties_percentage) }}</q-td>
+    </template>
 
-      <div class="col-12 col-md-3">
-        <DefaultInput
-          :model-value="royalties.description"
-          label="Royalties"
-          readonly
-        />
-      </div>
+    <template #body-cell-fnm="{ row }">
+      <q-td>{{ formatPercentage(row.fnm_percentage) }}</q-td>
+    </template>
 
-      <div class="col-12 col-md-3">
-        <DefaultInput
-          :model-value="fnmBrackets[index]?.description"
-          label="FNM"
-          readonly
-        />
-      </div>
+    <template #body-cell-maintenance="{ row }">
+      <q-td>{{ formatPercentage(row.maintenance_percentage) }}</q-td>
+    </template>
 
-      <div class="col-12 col-md-3">
-        <DefaultInput
-          :model-value="maintenanceBrackets[index]?.description"
-          label="Taxa de Manutenção"
-          readonly
-        />
-      </div>
-    </div>
-  </div>
+    <template #body-cell-actions="{ row }">
+      <q-td auto-width>
+        <div class="row no-wrap" style="gap: 4px">
+          <q-btn flat round dense icon="mdi-eye-outline" size="sm" />
+          <q-btn flat round dense icon="mdi-file-edit-outline" size="sm" />
+        </div>
+      </q-td>
+    </template>
+  </DefaultTable>
 </template>