feat: add FinancialTab component with billing details and data fetching

src/pages/unit/UnitActionPage.vue

@@ -18,6 +18,8 @@
 
       <ContractsTab v-show="activeTab === 'contracts'" :unit-id="unitId" />
 
+      <FinancialTab v-if="canViewFinancial" v-show="activeTab === 'financial'" />
+
       <HistoryTab v-show="activeTab === 'history'" :unit-id="unitId" />
 
       <MediasTab v-show="activeTab === 'medias'" :unit-id="unitId" />
@@ -28,17 +30,23 @@
 <script setup>
 import { computed, ref } from "vue";
 import { userStore } from "src/stores/user";
+import { permissionStore } from "src/stores/permission";
 
 import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
 import CustomTabComponent from "src/components/shared/CustomTabComponent.vue";
 
 import ContractsTab from "src/pages/unit/tabs/ContractsTab.vue";
+import FinancialTab from "src/pages/unit/tabs/FinancialTab.vue";
 import HistoryTab from "src/pages/unit/tabs/HistoryTab.vue";
 import MediasTab from "src/pages/unit/tabs/MediasTab.vue";
 import PartnersTab from "src/pages/unit/tabs/PartnersTab.vue";
 import UnitDataTab from "src/pages/unit/tabs/UnitDataTab.vue";
 
 const store = userStore();
+const permissions = permissionStore();
+const canViewFinancial = computed(() =>
+  permissions.getAccess("franchisee_financial", "view"),
+);
 
 const activeTab = ref("unit_data");
 
@@ -48,6 +56,9 @@ const allTabs = computed(() => [
   { name: "unit_data", label: "Dados da Unidade" },
   { name: "partners", label: "Sócios" },
   { name: "contracts", label: "Contratos" },
+  ...(canViewFinancial.value
+    ? [{ name: "financial", label: "Financeiro" }]
+    : []),
   { name: "history", label: "Histórico" },
   { name: "medias", label: "Mídias" },
 ]);

src/pages/unit/tabs/FinancialTab.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="financial-tab q-pa-md">
+    <q-scroll-area class="unit-form-tab-scroll-area">
+      <div class="column q-gutter-lg">
+        <div>
+          <div class="text-subtitle1 text-weight-medium q-mb-sm">
+            Dados para Faturamento
+          </div>
+
+          <div class="row q-col-gutter-md">
+            <DefaultSelect
+              :model-value="form.billing_method"
+              class="col-12 col-md-6"
+              disable
+              emit-value
+              label="Forma de Cobrança"
+              map-options
+              outlined
+              :options="billingMethodOptions"
+            />
+
+            <DefaultInputDatePicker
+              :model-value="form.due_date"
+              class="col-12 col-md-6"
+              disable
+              label="Data de Vencimento"
+            />
+
+            <DefaultInput
+              :model-value="form.financial_email"
+              class="col-12"
+              disable
+              label="E-mail Financeiro"
+              outlined
+            />
+          </div>
+        </div>
+      </div>
+    </q-scroll-area>
+  </div>
+</template>
+
+<script setup>
+import { getFinancialMe } from "src/api/unit_financial";
+
+import { onMounted, reactive } from "vue";
+
+import DefaultInput from "src/components/defaults/DefaultInput.vue";
+import DefaultInputDatePicker from "src/components/defaults/DefaultInputDatePicker.vue";
+import DefaultSelect from "src/components/defaults/DefaultSelect.vue";
+
+const form = reactive({
+  billing_method: null,
+  due_date: null,
+  financial_email: null,
+});
+
+const billingMethodOptions = [
+  { label: "Selecione", value: null },
+  { label: "Boleto", value: "boleto" },
+  { label: "Débito Automático", value: "debit" },
+  { label: "PIX", value: "pix" },
+  { label: "Cartão de Crédito", value: "credit_card" },
+];
+
+const fetchData = async () => {
+  try {
+    const data = await getFinancialMe();
+
+    if (data) Object.assign(form, data);
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+onMounted(fetchData);
+</script>
+
+<style scoped>
+.financial-tab {
+  box-sizing: border-box;
+  min-height: 0;
+}
+
+.unit-form-tab-scroll-area {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+</style>