sfp_vue_franchisor_ginastica_cerebro/src/pages/unit/tabs/FinancialTab.vue

<template>
  <div class="q-pa-md">
    <div class="row full-width q-col-gutter-md">
      <!-- Coluna esquerda -->
      <div class="col-12 col-md-6 column q-gutter-md">
        <!-- Dados Bancários -->
        <div class="row q-col-gutter-sm">
          <div class="col-12">
            <span class="text-subtitle1 text-weight-medium"
              >Dados Bancários</span
            >
          </div>

          <DefaultSelect
            v-model="form.tax_regime"
            label="Regime Tributário"
            :options="taxRegimeOptions"
            class="col-12"
            outlined
            emit-value
            map-options
          />

          <DefaultInput
            v-model="form.bank"
            label="Banco"
            class="col-12"
            outlined
          />

          <DefaultInput
            v-model="form.agency"
            label="Agência"
            class="col-12"
            outlined
          />
          <DefaultInput
            v-model="form.account"
            label="Conta"
            class="col-12"
            outlined
          />

          <DefaultSelect
            v-model="form.account_type"
            label="Tipo de Conta"
            :options="accountTypeOptions"
            class="col-12"
            outlined
            emit-value
            map-options
          />

          <DefaultInput
            v-model="form.account_holder"
            label="Titular da Conta"
            class="col-12"
            outlined
          />
          <DefaultInput
            v-model="form.pix_key"
            label="Chave Pix"
            class="col-12"
            outlined
          />
        </div>

        <!-- Dados para Faturamento -->
        <div class="row q-col-gutter-sm">
          <div class="col-12">
            <span class="text-subtitle1 text-weight-medium"
              >Dados para Faturamento</span
            >
          </div>

          <DefaultSelect
            v-model="form.billing_method"
            label="Forma de Cobrança"
            :options="billingMethodOptions"
            class="col-12"
            outlined
            emit-value
            map-options
          />

          <DefaultInput
            v-model="form.due_date"
            label="Data de Vencimento"
            class="col-12"
            outlined
          />
          <DefaultInput
            v-model="form.financial_email"
            label="E-mail Financeiro"
            class="col-12"
            outlined
          />
        </div>
      </div>

      <!-- Coluna direita -->
      <div class="col-12 col-md-6 column q-gutter-md">
        <!-- Dados do Contrato -->
        <div class="row q-col-gutter-sm">
          <div class="col-12">
            <span class="text-subtitle1 text-weight-medium"
              >Dados do Contrato</span
            >
          </div>

          <DefaultSelect
            v-model="form.group"
            label="Grupo"
            :options="groupOptions"
            class="col-12"
            outlined
            emit-value
            map-options
          />

          <DefaultInput
            v-model="form.maintenance_fee"
            label="Taxa de Manutenção"
            class="col-12"
            outlined
          />
          <DefaultInput
            v-model="form.marketing_fund"
            label="Fundo de Marketing"
            class="col-12"
            outlined
          />
          <DefaultInput
            v-model="form.tbr"
            label="TBR"
            class="col-12"
            outlined
          />
        </div>

        <div class="row q-col-gutter-sm">
          <div class="col-12">
            <span class="text-subtitle1 text-weight-medium"
              >Dados de Contato</span
            >
          </div>

          <div
            v-for="(partner, index) in contactPartners"
            :key="index"
            class="col-6"
          >
            <PartnerCardComponent :partner />
          </div>
        </div>
      </div>
    </div>

    <div class="row justify-end q-mt-md items-end full-width q-px-xs">
      <div class="row q-gutter-sm">
        <q-btn label="Cancelar" color="primary" outline />
        <q-btn label="Salvar" color="primary-2" />
        <q-btn
          icon="mdi-paperclip-plus"
          color="primary-2"
          style="height: 40px; width: 40px"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import DefaultInput from "src/components/defaults/DefaultInput.vue";
import DefaultSelect from "src/components/defaults/DefaultSelect.vue";
import PartnerCardComponent from "src/components/shared/PartnerCardComponent.vue";
import { useFormUpdateTracker } from "src/composables/useFormUpdateTracker";

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" },
  { label: "Conta Poupança", value: "poupanca" },
];

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 groupOptions = [{ label: "Selecione", value: null }];

const contactPartners = ref([
  { social_name: null, role: null, avatarUrl: null, color: "#ff8340" },
  { social_name: null, role: null, avatarUrl: null, color: "#4caf50" },
]);

const { form } = useFormUpdateTracker({
  tax_regime: null,
  bank: null,
  agency: null,
  account: null,
  account_type: null,
  account_holder: null,
  pix_key: null,
  billing_method: null,
  due_date: null,
  financial_email: null,
  group: null,
  maintenance_fee: null,
  marketing_fund: null,
  tbr: null,
});
</script>