refactor: add campos ajustados conforme figma

src/pages/tbr/TbrPage.vue

@@ -14,9 +14,9 @@ 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" },
-  { name: "inhabitant_classifications", label: "Faixa de Habitantes" },
 ];
 </script>
 

src/pages/tbr/components/AddEditInhabitantClassificationDialog.vue

@@ -18,12 +18,37 @@
           />
 
           <DefaultInput
-            v-model="form.acronym"
-            v-model:error="validationErrors.acronym"
+            v-model="form.start"
+            v-model:error="validationErrors.start"
+            class="col-6"
+            label="Início"
+            min="1"
+            type="number"
+            :error-message="validationErrors.start"
+            :rules="[inputRules.required]"
+          />
+
+          <DefaultInput
+            v-model="form.end"
+            v-model:error="validationErrors.end"
+            class="col-6"
+            label="Fim"
+            min="1"
+            type="number"
+            :error-message="validationErrors.end"
+            :rules="[inputRules.required]"
+          />
+
+          <DefaultInput
+            v-model="form.tbr_percentage"
+            v-model:error="validationErrors.tbr_percentage"
             class="col-12"
-            label="Sigla"
-            maxlength="2"
-            :error-message="validationErrors.acronym"
+            label="%"
+            max="100"
+            min="0"
+            step="0.01"
+            type="number"
+            :error-message="validationErrors.tbr_percentage"
             :rules="[inputRules.required]"
           />
         </q-card-section>
@@ -85,7 +110,10 @@ const {
 const formRef = useTemplateRef("formRef");
 
 const { form, getUpdatedFields } = useFormUpdateTracker({
-  description: item?.description ?? "", acronym: item?.acronym ?? "",
+  description:    item?.description ?? "",
+  start:          item?.start ?? null,
+  end:            item?.end   ?? null,
+  tbr_percentage: item ? Number(item.tbr_percentage) * 100 : null,
 });
 
 const { loading, validationErrors, execute } = useSubmitHandler({
@@ -94,12 +122,21 @@ const { loading, validationErrors, execute } = useSubmitHandler({
 });
 
 const onOKClick = async () => {
-  if (item) {
-    console.log(getUpdatedFields.value);
+  const payload = {
+    description:    form.description,
+    start:          form.start,
+    end:            form.end,
+    tbr_percentage: (form.tbr_percentage ?? 0) / 100,
+  };
+
+  if (getUpdatedFields.value.tbr_percentage !== undefined) {
+    getUpdatedFields.value.tbr_percentage /= 100;
+  }
 
+  if (item) {
     await execute(() => updateInhabitantClassification(item.id, getUpdatedFields.value));
   } else {
-    await execute(() => createInhabitantClassification(form));
+    await execute(() => createInhabitantClassification(payload));
   }
 }
 </script>

src/pages/tbr/components/ViewInhabitantClassificationDialog.vue

@@ -15,10 +15,24 @@
         />
 
         <DefaultInput
-          :model-value="item.acronym"
+          :model-value="item.start"
+          class="col-6"
+          disable
+          label="Início"
+        />
+
+        <DefaultInput
+          :model-value="item.end"
+          class="col-6"
+          disable
+          label="Fim"
+        />
+
+        <DefaultInput
+          :model-value="formatPercentage(item.tbr_percentage)"
           class="col-12"
           disable
-          label="Sigla"
+          label="%"
         />
       </q-card-section>
 
@@ -36,6 +50,7 @@
 
 <script setup>
 import { useDialogPluginComponent } from "quasar";
+import { formatPercentage } from "src/helpers/utils";
 
 import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
 import DefaultInput from "src/components/defaults/DefaultInput.vue";

src/pages/tbr/tabs/InhabitantClassificationsTab.vue

@@ -2,7 +2,7 @@
   <DefaultTable
     v-model:rows="rows"
     description="faixas"
-    title="Faixa de Habitantes"
+    title="Faixas"
     :add-item="true"
     :columns="columns"
     :female="true"
@@ -21,6 +21,7 @@
             size="sm"
             @click="onView(row)"
           />
+
           <q-btn
             dense
             flat
@@ -50,10 +51,12 @@ const $q = useQuasar();
 const rows = ref([]);
 
 const columns = [
-  { name: "id", label: "ID", field: "id", align: "left" },
-  { name: "description", label: "Descrição", field: "description", align: "left" },
-  { name: "acronym", label: "Sigla", field: "acronym", align: "left" },
-  { name: "actions", label: "Ações", field: "actions", align: "center" },
+  { name: "id",             label: "ID",        field: "id",             align: "left" },
+  { name: "description",    label: "Descrição", field: "description",    align: "left" },
+  { name: "start",          label: "Início",    field: "start",          align: "left" },
+  { name: "end",            label: "Fim",       field: "end",            align: "left" },
+  { name: "tbr_percentage", label: "%",         field: "tbr_percentage", align: "left", format: (val) => `${(val * 100).toFixed(2)}%` },
+  { name: "actions",        label: "Ações",     field: "actions",        align: "center" },
 ];
 
 const loadData = async () => {