feat: Novo Layout de Finanças

src/pages/unit/tabs/FinancialTab.vue

@@ -1,258 +1,125 @@
 <template>
-  <div class="q-pa-md">
-    <div class="row q-col-gutter-lg">
-      <div class="col-12 col-md-6 column q-gutter-lg">
-        <section>
-          <div class="text-subtitle1 text-weight-medium q-mb-sm">
-            Dados Bancários
-          </div>
-
-          <div class="row q-col-gutter-sm">
-            <DefaultSelect
-              v-model="form.tax_regime"
-              class="col-12"
-              disable
-              emit-value
-              label="Regime Tributário"
-              map-options
-              outlined
-              :options="taxRegimeOptions"
-            />
-
-            <DefaultInput
-              v-model="form.bank"
-              class="col-12"
-              disable
-              label="Banco"
-              outlined
-            />
-
-            <DefaultInput
-              v-model="form.agency"
-              class="col-12"
-              disable
-              label="Agência"
-              outlined
-            />
-
-            <DefaultInput
-              v-model="form.account"
-              class="col-12"
-              disable
-              label="Conta"
-              outlined
-            />
-
-            <DefaultSelect
-              v-model="form.account_type"
-              class="col-12"
-              disable
-              emit-value
-              label="Tipo de Conta"
-              map-options
-              outlined
-              :options="accountTypeOptions"
-            />
-
-            <DefaultInput
-              v-model="form.account_holder"
-              class="col-12"
-              disable
-              label="Titular da Conta"
-              outlined
-            />
-
-            <DefaultInput
-              v-model="form.pix_key"
-              class="col-12"
-              disable
-              label="Chave Pix"
-              outlined
-            />
-          </div>
-        </section>
-
-        <section>
-          <div class="text-subtitle1 text-weight-medium q-mb-sm">
-            Dados para Faturamento
-          </div>
-
-          <div class="row q-col-gutter-sm">
-            <DefaultSelect
-              v-model="form.billing_method"
-              class="col-12"
-              disable
-              emit-value
-              label="Forma de Cobrança"
-              map-options
-              outlined
-              :options="billingMethodOptions"
-            />
-
-            <DefaultInputDatePicker
-              v-model="form.due_date"
-              class="col-12"
-              disable
-              label="Data de Vencimento"
-            />
-
-            <DefaultInput
-              v-model="form.financial_email"
-              class="col-12"
-              disable
-              label="E-mail Financeiro"
-              outlined
-            />
-          </div>
-        </section>
+  <div class="q-pa-md column q-gutter-lg">
+    <!-- Dados Bancários -->
+    <div>
+      <div class="text-subtitle1 text-weight-medium q-mb-sm">
+        Dados Bancários
       </div>
 
-      <div class="col-12 col-md-6 column q-gutter-lg">
-        <section>
-          <div class="text-subtitle1 text-weight-medium q-mb-sm">
-            Dados do Contrato
-          </div>
-
-          <div class="row q-col-gutter-sm">
-            <DefaultInput
-              :model-value="form.group"
-              class="col-12"
-              disable
-              label="Grupo"
-              outlined
-            />
-
-            <DefaultInput
-              :model-value="
-                formatPercent(currentContract?.tbr_fixed_value_percentage)
-              "
-              class="col-12"
-              disable
-              label="Royalties"
-              outlined
-            />
-
-            <DefaultInput
-              :model-value="
-                formatPercent(currentContract?.maintance_tax_percentage)
-              "
-              class="col-12"
-              disable
-              label="Taxa de Manutenção"
-              outlined
-            />
-
-            <DefaultInput
-              :model-value="
-                formatPercent(currentContract?.marketing_fund_percentage)
-              "
-              class="col-12"
-              disable
-              label="Fundo de Marketing"
-              outlined
-            />
-
-            <DefaultInput
-              :model-value="
-                formatToBRLCurrency(currentContract?.tbr_fixed_value)
-              "
-              class="col-12"
-              disable
-              label="TBR"
-              outlined
-            />
-          </div>
-        </section>
-
-        <section>
-          <div class="text-subtitle1 text-weight-medium q-mb-sm">
-            Histórico de Royalties
-          </div>
-
-          <q-table
-            dense
-            flat
-            :columns="royaltiesHistoryColumns"
-            :loading="loadingRoyaltiesHistory"
-            no-data-label="Nenhum histórico de royalties encontrado."
-            row-key="id"
-            :pagination="{ rowsPerPage: 5 }"
-            :rows="royaltiesHistory"
-          >
-            <template #body-cell-created_at="{ row }">
-              <q-td>{{ formatDate(row.created_at) }}</q-td>
-            </template>
-
-            <template #body-cell-tbr_fixed_value="{ row }">
-              <q-td>{{ formatToBRLCurrency(row.tbr_fixed_value) }}</q-td>
-            </template>
-
-            <template #body-cell-tbr_fixed_value_percentage="{ row }">
-              <q-td>{{ formatPercent(row.tbr_fixed_value_percentage) }}</q-td>
-            </template>
-
-            <template #body-cell-marketing_fund_percentage="{ row }">
-              <q-td>{{ formatPercent(row.marketing_fund_percentage) }}</q-td>
-            </template>
-
-            <template #body-cell-maintance_tax_percentage="{ row }">
-              <q-td>{{ formatPercent(row.maintance_tax_percentage) }}</q-td>
-            </template>
-          </q-table>
-        </section>
-
-        <section>
-          <div class="text-subtitle1 text-weight-medium q-mb-sm">
-            Dados de Contato
-          </div>
-
-          <div v-if="loadingPartners" class="row justify-center q-pa-md">
-            <q-spinner color="primary" size="32px" />
-          </div>
+      <div class="row q-col-gutter-sm">
+        <DefaultInput
+          v-model="form.account_holder"
+          label="Titular da Conta"
+          class="col-12 col-md-4"
+          outlined
+          disable
+        />
+        <DefaultInput
+          v-model="form.agency"
+          label="Agência"
+          class="col-12 col-md-4"
+          outlined
+          disable
+        />
+        <DefaultInput
+          v-model="form.account"
+          label="Conta"
+          class="col-12 col-md-4"
+          outlined
+          disable
+        />
+
+        <DefaultInput
+          v-model="form.bank"
+          label="Banco"
+          class="col-12 col-md-3"
+          outlined
+          disable
+        />
+        <DefaultInput
+          v-model="form.pix_key"
+          label="Chave Pix"
+          class="col-12 col-md-3"
+          outlined
+          disable
+        />
+        <DefaultSelect
+          v-model="form.tax_regime"
+          label="Regime Tributário"
+          :options="taxRegimeOptions"
+          class="col-12 col-md-3"
+          outlined
+          emit-value
+          map-options
+          disable
+        />
+        <DefaultSelect
+          v-model="form.account_type"
+          label="Tipo de Conta"
+          :options="accountTypeOptions"
+          class="col-12 col-md-3"
+          outlined
+          emit-value
+          map-options
+          disable
+        />
+      </div>
+    </div>
 
-          <template v-else>
-            <div class="row q-col-gutter-md">
-              <div
-                v-for="partner in partners"
-                :key="partner.id"
-                class="col-12 col-sm-6"
-              >
-                <PartnerCardComponent :editable="false" :partner="partner" />
-              </div>
+    <!-- Dados para Faturamento -->
+    <div>
+      <div class="text-subtitle1 text-weight-medium q-mb-sm">
+        Dados para Faturamento
+      </div>
 
-              <div
-                v-if="partners.length === 0"
-                class="col-12 text-grey-6 text-center q-pa-md"
-              >
-                Nenhum sócio cadastrado.
-              </div>
-            </div>
-          </template>
-        </section>
+      <div class="row q-col-gutter-sm">
+        <DefaultSelect
+          v-model="form.billing_method"
+          label="Forma de Cobrança"
+          :options="billingMethodOptions"
+          class="col-12 col-md-6"
+          outlined
+          emit-value
+          map-options
+          disable
+        />
+        <DefaultInputDatePicker
+          v-model="form.due_date"
+          label="Data de Vencimento"
+          class="col-12 col-md-6"
+          disable
+        />
+        <DefaultInput
+          v-model="form.financial_email"
+          label="E-mail Financeiro"
+          class="col-12"
+          outlined
+          disable
+        />
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from "vue";
-import { formatDateYMDtoDMY, formatToBRLCurrency } from "src/helpers/utils";
-import {
-  getFranchiseeContractsByUnit,
-  getFranchiseeContractTaxHistory,
-} from "src/api/franchisee_contract";
-import { getFinancialMe } from "src/api/unit_financial";
-import { getPartnersByUnit } from "src/api/unit_partner";
-
+import { ref, onMounted } 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";
-import PartnerCardComponent from "src/components/shared/PartnerCardComponent.vue";
+import DefaultInputDatePicker from "src/components/defaults/DefaultInputDatePicker.vue";
+import { getFinancialMe } from "src/api/unit_financial";
 
 const props = defineProps({
   unitId: { type: Number, default: null },
 });
 
+const taxRegimeOptions = [
+  { label: "Selecione", value: null },
+  { label: "Simples Nacional", value: "simples_nacional" },
+  { label: "Lucro Presumido", value: "lucro_presumido" },
+  { label: "Lucro Real", value: "lucro_real" },
+  { label: "MEI", value: "mei" },
+];
+
 const accountTypeOptions = [
   { label: "Selecione", value: null },
   { label: "Conta Corrente", value: "corrente" },
@@ -267,110 +134,23 @@ const billingMethodOptions = [
   { label: "Cartão de Crédito", value: "credit_card" },
 ];
 
-const taxRegimeOptions = [
-  { label: "Selecione", value: null },
-  { label: "Simples Nacional", value: "simples_nacional" },
-  { label: "Lucro Presumido", value: "lucro_presumido" },
-  { label: "Lucro Real", value: "lucro_real" },
-  { label: "MEI", value: "mei" },
-];
-
-const royaltiesHistoryColumns = [
-  {
-    name: "created_at",
-    label: "Data",
-    field: "created_at",
-    align: "left",
-  },
-  {
-    name: "tbr_fixed_value",
-    label: "TBR",
-    field: "tbr_fixed_value",
-    align: "left",
-  },
-  {
-    name: "tbr_fixed_value_percentage",
-    label: "Royalties",
-    field: "tbr_fixed_value_percentage",
-    align: "left",
-  },
-  {
-    name: "marketing_fund_percentage",
-    label: "FNM",
-    field: "marketing_fund_percentage",
-    align: "left",
-  },
-  {
-    name: "maintance_tax_percentage",
-    label: "Manutenção",
-    field: "maintance_tax_percentage",
-    align: "left",
-  },
-];
-
 const defaultForm = () => ({
+  tax_regime: null,
+  bank: null,
+  agency: null,
   account: null,
-  account_holder: null,
   account_type: null,
-  agency: null,
-  bank: null,
+  account_holder: null,
+  pix_key: null,
   billing_method: null,
   due_date: null,
   financial_email: null,
-  group: null,
-  pix_key: null,
-  tax_regime: null,
 });
 
-const contracts = ref([]);
 const form = ref(defaultForm());
-const loadingPartners = ref(false);
-const loadingRoyaltiesHistory = ref(false);
-const partners = ref([]);
-const royaltiesHistory = ref([]);
-
-const currentContract = computed(() => {
-  const today = new Date().toISOString().slice(0, 10);
-
-  return (
-    contracts.value.find((contract) => {
-      if (!contract.start_date || !contract.end_date) return false;
-      return contract.start_date <= today && contract.end_date >= today;
-    }) ??
-    contracts.value[0] ??
-    null
-  );
-});
 
 async function fetchData() {
   if (!props.unitId) return;
-  await Promise.allSettled([loadFinancial(), loadPartners()]);
-  await loadContracts();
-  await loadRoyaltiesHistory();
-}
-
-function formatDate(value) {
-  return value ? formatDateYMDtoDMY(value) : "";
-}
-
-function formatPercent(value) {
-  if (value == null || value === "") return "";
-  return `${(Number(value) * 100).toLocaleString("pt-BR", {
-    maximumFractionDigits: 2,
-    minimumFractionDigits: 0,
-  })}%`;
-}
-
-async function loadContracts() {
-  try {
-    contracts.value = await getFranchiseeContractsByUnit();
-  } catch (e) {
-    console.error(e);
-    contracts.value = [];
-  }
-}
-
-async function loadFinancial() {
   try {
     const data = await getFinancialMe();
     if (data) Object.assign(form.value, data);
@@ -379,35 +159,5 @@ async function loadFinancial() {
   }
 }
 
-async function loadPartners() {
-  loadingPartners.value = true;
-
-  try {
-    partners.value = await getPartnersByUnit();
-  } catch (e) {
-    console.error(e);
-  } finally {
-    loadingPartners.value = false;
-  }
-}
-
-async function loadRoyaltiesHistory() {
-  royaltiesHistory.value = [];
-
-  if (!currentContract.value?.id) return;
-
-  loadingRoyaltiesHistory.value = true;
-
-  try {
-    royaltiesHistory.value = await getFranchiseeContractTaxHistory(
-      currentContract.value.id,
-    );
-  } catch (e) {
-    console.error(e);
-  } finally {
-    loadingRoyaltiesHistory.value = false;
-  }
-}
-
 onMounted(fetchData);
 </script>