feat(financial_tab): add new layout

src/components/shared/PartnerCardComponent.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="partner-card column items-center q-pa-md cursor-pointer" @click="emit('click')">
+  <div
+    class="partner-card column items-center q-pa-md"
+    :class="{ 'cursor-pointer': !editable }"
+    @click="!editable && emit('click')"
+  >
     <div
       class="partner-avatar flex flex-center q-mb-md"
       :style="partner.avatar_url ? {} : { backgroundColor: '#ff8340' }"
@@ -14,44 +18,72 @@
       </span>
     </div>
 
-    <div class="full-width column items-center q-gutter-xs">
-      <span class="text-weight-medium text-body1 text-center ellipsis full-width">
-        {{ partner.name }}
-      </span>
+    <template v-if="editable">
+      <div class="full-width column q-gutter-sm">
+        <DefaultInput
+          :model-value="partner.social_name"
+          label="Nome Social"
+          outlined
+          @update:model-value="update('social_name', $event)"
+        />
+        <DefaultInput
+          :model-value="partner.role"
+          label="Cargo"
+          outlined
+          @update:model-value="update('role', $event)"
+        />
+      </div>
+    </template>
 
-      <span v-if="partner.social_name" class="text-caption text-grey-6 text-center ellipsis full-width">
-        {{ partner.social_name }}
-      </span>
+    <template v-else>
+      <div class="full-width column items-center q-gutter-xs">
+        <span class="text-weight-medium text-body1 text-center ellipsis full-width">
+          {{ partner.name }}
+        </span>
 
-      <q-chip
-        v-if="partner.role"
-        dense
-        color="primary"
-        text-color="white"
-        class="q-mt-xs"
-      >
-        {{ partner.role }}
-      </q-chip>
-
-      <span v-if="partner.participation != null" class="text-caption text-grey-7 q-mt-xs">
-        {{ partner.participation }}% de participação
-      </span>
-    </div>
+        <span v-if="partner.social_name" class="text-caption text-grey-6 text-center ellipsis full-width">
+          {{ partner.social_name }}
+        </span>
+
+        <q-chip
+          v-if="partner.role"
+          dense
+          color="primary"
+          text-color="white"
+          class="q-mt-xs"
+        >
+          {{ partner.role }}
+        </q-chip>
+
+        <span v-if="partner.participation != null" class="text-caption text-grey-7 q-mt-xs">
+          {{ partner.participation }}% de participação
+        </span>
+      </div>
+    </template>
   </div>
 </template>
 
 <script setup>
 import { computed } from "vue";
+import DefaultInput from "src/components/defaults/DefaultInput.vue";
 
-const emit = defineEmits(["click"]);
+const emit = defineEmits(["click", "update:partner"]);
 
-const { partner } = defineProps({
+const { partner, editable } = defineProps({
   partner: {
     type: Object,
     required: true,
   },
+  editable: {
+    type: Boolean,
+    default: false,
+  },
 });
 
+function update(field, value) {
+  emit("update:partner", { ...partner, [field]: value });
+}
+
 const initials = computed(() => {
   if (!partner.name) return "?";
   return partner.name

src/pages/unit/tabs/FinancialTab.vue

@@ -1,186 +1,175 @@
 <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>
+  <div class="q-pa-md column q-gutter-lg">
+    <!-- Dados de Contato -->
+    <div>
+      <div class="text-h6 q-mb-md">Dados de Contato</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 v-if="loadingPartners" class="row justify-center q-pa-md">
+        <q-spinner color="primary" size="32px" />
       </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
-            >
+      <template v-else>
+        <div class="row q-col-gutter-md">
+          <div
+            v-for="(partner, index) in partners"
+            :key="index"
+            class="col-12 col-md-4"
+          >
+            <PartnerCardComponent
+              :partner="partner"
+              editable
+              @update:partner="partners[index] = $event"
+            />
           </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>
+    </div>
 
-          <DefaultSelect
-            v-model="form.group"
-            label="Grupo"
-            :options="groupOptions"
-            class="col-12"
-            outlined
-            emit-value
-            map-options
-          />
+    <!-- Dados Bancários -->
+    <div>
+      <div class="text-subtitle1 text-weight-medium q-mb-sm">
+        Dados Bancários
+      </div>
 
-          <DefaultInput
-            v-model="form.maintenance_fee"
-            label="Taxa de Manutenção"
-            class="col-12"
-            outlined
-            type="number"
-          />
-          <DefaultInput
-            v-model="form.marketing_fund"
-            label="Fundo de Marketing"
-            class="col-12"
-            outlined
-            type="number"
-          />
-          <DefaultInput
-            v-model="form.tbr"
-            label="TBR"
-            class="col-12"
-            outlined
-            type="number"
-          />
-        </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
+        />
+        <DefaultInput
+          v-model="form.agency"
+          label="Agência"
+          class="col-12 col-md-4"
+          outlined
+        />
+        <DefaultInput
+          v-model="form.account"
+          label="Conta"
+          class="col-12 col-md-4"
+          outlined
+        />
 
-        <div class="row q-col-gutter-sm">
-          <div class="col-12">
-            <span class="text-subtitle1 text-weight-medium"
-              >Dados de Contato</span
-            >
-          </div>
+        <DefaultInput
+          v-model="form.bank"
+          label="Banco"
+          class="col-12 col-md-3"
+          outlined
+        />
+        <DefaultInput
+          v-model="form.pix_key"
+          label="Chave Pix"
+          class="col-12 col-md-3"
+          outlined
+        />
+        <DefaultSelect
+          v-model="form.tax_regime"
+          label="Regime Tributário"
+          :options="taxRegimeOptions"
+          class="col-12 col-md-3"
+          outlined
+          emit-value
+          map-options
+        />
+        <DefaultSelect
+          v-model="form.account_type"
+          label="Tipo de Conta"
+          :options="accountTypeOptions"
+          class="col-12 col-md-3"
+          outlined
+          emit-value
+          map-options
+        />
+      </div>
+    </div>
 
-          <div v-if="loadingPartners" class="col-12 row justify-center q-pa-md">
-            <q-spinner color="primary" size="32px" />
-          </div>
+    <!-- Dados do Contrato -->
+    <div>
+      <div class="text-subtitle1 text-weight-medium q-mb-sm">
+        Dados do Contrato
+      </div>
 
-          <template v-else>
-            <div
-              v-for="(partner, index) in partners"
-              :key="index"
-              class="col-6"
-            >
-              <PartnerCardComponent :partner />
-            </div>
-            <div
-              v-if="partners.length === 0"
-              class="col-12 text-grey-6 text-center q-pa-md"
-            >
-              Nenhum sócio cadastrado.
-            </div>
-          </template>
-        </div>
+      <div class="row q-col-gutter-sm">
+        <DefaultSelect
+          v-model="form.group"
+          label="Grupo"
+          :options="groupOptions"
+          class="col-12 col-md-3"
+          outlined
+          emit-value
+          map-options
+        />
+        <DefaultInput
+          v-model="form.maintenance_fee"
+          label="Taxa de Manutenção"
+          class="col-12 col-md-3"
+          outlined
+          type="number"
+        />
+        <DefaultInput
+          v-model="form.marketing_fund"
+          label="Fundo de Marketing"
+          class="col-12 col-md-3"
+          outlined
+          type="number"
+        />
+        <DefaultInput
+          v-model="form.tbr"
+          label="TBR"
+          class="col-12 col-md-3"
+          outlined
+          type="number"
+        />
       </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 @click="resetForm" />
-        <q-btn
-          label="Salvar"
-          color="primary-2"
-          :loading="saving"
-          @click="onSave"
+    <!-- Dados para Faturamento -->
+    <div>
+      <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"
+          label="Forma de Cobrança"
+          :options="billingMethodOptions"
+          class="col-12 col-md-6"
+          outlined
+          emit-value
+          map-options
+        />
+        <DefaultInputDatePicker
+          v-model="form.due_date"
+          label="Data de Vencimento"
+          class="col-12 col-md-6"
+        />
+        <DefaultInput
+          v-model="form.financial_email"
+          label="E-mail Financeiro"
+          class="col-12"
+          outlined
         />
       </div>
     </div>
+
+    <!-- Actions -->
+    <div class="row justify-end q-gutter-sm">
+      <q-btn label="Cancelar" color="primary" outline @click="resetForm" />
+      <q-btn
+        label="Salvar"
+        color="primary-2"
+        :loading="saving"
+        @click="onSave"
+      />
+    </div>
   </div>
 </template>
 
@@ -188,6 +177,7 @@
 import { ref, onMounted } from "vue";
 import DefaultInput from "src/components/defaults/DefaultInput.vue";
 import DefaultSelect from "src/components/defaults/DefaultSelect.vue";
+import DefaultInputDatePicker from "src/components/defaults/DefaultInputDatePicker.vue";
 import PartnerCardComponent from "src/components/shared/PartnerCardComponent.vue";
 import { getFinancialByUnit, upsertFinancial } from "src/api/unit_financial";
 import { getPartnersByUnit } from "src/api/unit_partner";