chore: corrige alinhamento de texto

src/pages/tbr/tabs/SettingsTab.vue

@@ -1,3 +1,48 @@
+<template>
+  <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>
+
+    <template #body-cell-royalties="{ row }">
+      <q-td>{{ formatPercentage(row.royalties_percentage) }}</q-td>
+    </template>
+
+    <template #body-cell-fnm="{ row }">
+      <q-td>{{ formatPercentage(row.fnm_percentage) }}</q-td>
+    </template>
+
+    <template #body-cell-maintenance="{ row }">
+      <q-td align="center">{{
+        formatPercentage(row.maintenance_percentage)
+      }}</q-td>
+    </template>
+
+    <template #body-cell-actions>
+      <q-td align="center">
+        <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>
+
 <script setup>
 import { ref, onMounted } from "vue";
 import DefaultTable from "src/components/defaults/DefaultTable.vue";
@@ -10,12 +55,22 @@ import {
 const rows = ref([]);
 
 const columns = [
-  { name: "id", label: "ID", field: "id", align: "left" },
+  { name: "id", label: "ID", field: "id", align: "center" },
   { 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: "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: "maintenance",
+    label: "Manutenção",
+    field: "maintenance_percentage",
+    align: "center",
+  },
   { name: "actions", label: "Ações", field: "actions", align: "center" },
 ];
 
@@ -49,46 +104,3 @@ function onAdd() {
   // TODO
 }
 </script>
-
-<template>
-  <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>
-
-    <template #body-cell-royalties="{ row }">
-      <q-td>{{ formatPercentage(row.royalties_percentage) }}</q-td>
-    </template>
-
-    <template #body-cell-fnm="{ row }">
-      <q-td>{{ formatPercentage(row.fnm_percentage) }}</q-td>
-    </template>
-
-    <template #body-cell-maintenance="{ row }">
-      <q-td>{{ formatPercentage(row.maintenance_percentage) }}</q-td>
-    </template>
-
-    <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>