feat: adiciona tab de financeiro

src/boot/defaultPropsComponents.js

@@ -25,7 +25,6 @@ export default defineBoot(() => {
     dense: true,
   });
   SetComponentDefaults(QSelect, {
-    rounded: true,
     standout: true,
     dense: true,
   });

src/components/defaults/DefaultSelect.vue

@@ -1,20 +1,17 @@
 <template>
   <div class="column" :class="attrs.class" :style="attrs.style">
-    <div v-if="label || $slots.label" class="q-pl-xs">
-      <slot name="label">
-        <span>{{ label }}</span>
-      </slot>
-      <span v-if="required" class="text-negative q-ml-xs">*</span>
-    </div>
     <div class="col">
       <q-select
         ref="selectRef"
         v-model="model"
+        :label
         v-bind="selectAttrs"
         :error="!!error"
         :error-message="errorMessage"
         :rules
+        :outlined
         hide-bottom-space
+        :bg-color
         :class="inputClass"
         :popup-content-class="popupContentClass"
         @update:model-value="error = null"
@@ -34,24 +31,33 @@ defineOptions({
   inheritAttrs: false,
 });
 
-const { label, inputClass, popupContentClass, rules } = defineProps({
-  label: {
-    type: String,
-    default: "",
-  },
-  rules: {
-    type: Array,
-    default: () => [],
-  },
-  inputClass: {
-    type: String,
-    default: null,
-  },
-  popupContentClass: {
-    type: String,
-    default: null,
-  },
-});
+const { label, inputClass, popupContentClass, rules, bgColor, outlined } =
+  defineProps({
+    label: {
+      type: String,
+      default: "",
+    },
+    rules: {
+      type: Array,
+      default: () => [],
+    },
+    inputClass: {
+      type: String,
+      default: null,
+    },
+    popupContentClass: {
+      type: String,
+      default: null,
+    },
+    bgColor: {
+      type: String,
+      default: "white",
+    },
+    outlined: {
+      type: Boolean,
+      default: false,
+    },
+  });
 
 const attrs = useAttrs();
 
@@ -89,3 +95,10 @@ defineExpose({
   selectRef,
 });
 </script>
+
+<style scoped lang="scss">
+:deep(.q-field__control) {
+  background-color: red;
+  border-radius: 8px;
+}
+</style>

src/pages/unit/tabs/FinancialTab.vue

@@ -1,3 +1,108 @@
 <template>
-  <h1>Financeiro</h1>
+  <div class="q-pa-md">
+    <div class="row full-width q-col-gutter-md">
+      <div class="col-12">
+        <span class="text-subtitle1 text-weight-medium">Dados Bancários</span>
+      </div>
+
+      <div class="col-12 col-md-6">
+        <div class="row q-col-gutter-sm">
+          <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-6"
+            outlined
+          />
+
+          <DefaultInput
+            v-model="form.account"
+            label="Conta"
+            class="col-6"
+            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>
+      </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 DefaultInput from "src/components/defaults/DefaultInput.vue";
+import DefaultSelect from "src/components/defaults/DefaultSelect.vue";
+import { useFormUpdateTracker } from "src/composables/useFormUpdateTracker";
+
+const taxRegimeOptions = [
+  { 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: "Conta Corrente", value: "corrente" },
+  { label: "Conta Poupança", value: "poupanca" },
+];
+
+const { form } = useFormUpdateTracker({
+  tax_regime: null,
+  bank: null,
+  agency: null,
+  account: null,
+  account_type: null,
+  account_holder: null,
+  pix_key: null,
+});
+</script>