feat(contracts): cria contrato base com os campos, adiciona o dialog para criacao de contrato.

src/components/defaults/DefaultCurrencyInput.vue

@@ -12,7 +12,7 @@
 <script setup>
 import { watch, onBeforeMount, ref } from "vue";
 import { useCurrencyInput } from "vue-currency-input";
-import { useI18n } from "vue-i18n";
+
 import { useInputRules } from "src/composables/useInputRules";
 
 import DefaultInput from "./DefaultInput.vue";
@@ -41,7 +41,7 @@ const { options, label, rules } = defineProps({
   },
   label: {
     type: String,
-    default: useI18n().t("common.terms.currency"),
+    default: "Valor",
   },
   errorMessage: {
     type: String,

src/components/defaults/DefaultInput.vue

@@ -74,7 +74,7 @@ const { label, nativeInputClass, inputClass, rules, icon, bgColor, outlined } =
     },
     outlined: {
       type: Boolean,
-      default: false,
+      default: true,
     },
     labelColor: {
       type: String,

src/components/defaults/DefaultInputDatePicker.vue

@@ -51,7 +51,6 @@
 
 <script setup>
 import { watch, ref, computed } from "vue";
-import { useI18n } from "vue-i18n";
 import masks from "src/helpers/masks";
 
 import DefaultInput from "./DefaultInput.vue";
@@ -59,7 +58,7 @@ import DefaultInput from "./DefaultInput.vue";
 const { label, time } = defineProps({
   label: {
     type: String,
-    default: () => useI18n().t("common.terms.date"),
+    default: "Data",
   },
   time: {
     type: Boolean,
@@ -141,6 +140,6 @@ watch(
     date.value = value;
     treatedDate.value = formatDate(value);
   },
-  { immediate: true }
+  { immediate: true },
 );
 </script>

src/pages/unit/components/CreateContractDialog.vue

@@ -0,0 +1,147 @@
+<template>
+  <q-dialog ref="dialogRef" @hide="onDialogHide">
+    <q-card
+      class="q-dialog-plugin overflow-hidden"
+      style="width: 900px; max-width: 95vw"
+    >
+      <DefaultDialogHeader
+        :title="() => 'Criar novo contrato'"
+        @close="onDialogCancel"
+      />
+
+      <q-card-section>
+        <div class="text-h6 q-mb-sm">Dados da Unidade</div>
+        <div class="row q-col-gutter-x-sm">
+          <DefaultInput
+            label="ID"
+            color="secondary"
+            label-color="secondary"
+            class="col-md-3 col-12"
+          />
+
+          <DefaultInput
+            label="Nome do Franqueado"
+            color="secondary"
+            label-color="secondary"
+            class="col-md-3 col-12"
+          />
+
+          <DefaultInput
+            label="CPF/CNH"
+            color="secondary"
+            label-color="secondary"
+            class="col-md-3 col-12"
+          />
+
+          <DefaultInputDatePicker
+            label="Data de Nascimento"
+            color="secondary"
+            label-color="secondary"
+            class="col-md-3 col-12"
+          />
+        </div>
+      </q-card-section>
+
+      <q-card-section>
+        <div class="text-h6 q-mb-sm">Definir Valores e TBR</div>
+        <div class="row q-col-gutter-x-sm">
+          <DefaultInputDatePicker
+            label="Data de Início"
+            color="secondary"
+            label-color="secondary"
+            class="col-md-3 col-12"
+          />
+
+          <DefaultInputDatePicker
+            label="Data de Fim"
+            color="secondary"
+            label-color="secondary"
+            class="col-md-3 col-12"
+          />
+
+          <DefaultCurrencyInput
+            label="TBR $"
+            color="secondary"
+            label-color="secondary"
+            class="col-md-3 col-12"
+          />
+
+          <DefaultInputDatePicker
+            label="Vencimento Boleto"
+            color="secondary"
+            label-color="secondary"
+            class="col-md-3 col-12"
+          />
+
+          <DefaultSelect
+            label="Faixa de Habitante"
+            color="secondary"
+            label-color="secondary"
+            :options="inhabitantRangeOptions"
+            class="col-md-4 col-12"
+          />
+
+          <DefaultInput
+            label="Taxa Base Royalties"
+            color="secondary"
+            label-color="secondary"
+            class="col-md-4 col-12"
+          >
+            <template #append>
+              <span class="text-secondary">%</span>
+            </template>
+          </DefaultInput>
+
+          <DefaultInput
+            label="Taxa Base FMN"
+            color="secondary"
+            label-color="secondary"
+            class="col-md-4 col-12"
+          >
+            <template #append>
+              <span class="text-secondary">%</span>
+            </template>
+          </DefaultInput>
+
+          <DefaultInput
+            label="Taxa Base Manutenção"
+            color="secondary"
+            outlined
+            label-color="secondary"
+            class="col-md-4 col-12"
+          >
+            <template #append>
+              <span class="text-secondary">%</span>
+            </template>
+          </DefaultInput>
+        </div>
+      </q-card-section>
+
+      <q-card-actions align="right">
+        <q-btn
+          outline
+          color="primary"
+          label="Cancelar"
+          @click="onDialogCancel"
+        />
+        <q-btn color="primary" label="Salvar" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup>
+import { useDialogPluginComponent } from "quasar";
+
+import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
+import DefaultInput from "src/components/defaults/DefaultInput.vue";
+import DefaultInputDatePicker from "src/components/defaults/DefaultInputDatePicker.vue";
+import DefaultCurrencyInput from "src/components/defaults/DefaultCurrencyInput.vue";
+import DefaultSelect from "src/components/defaults/DefaultSelect.vue";
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide, onDialogCancel } = useDialogPluginComponent();
+
+const inhabitantRangeOptions = [{ label: "Selecione", value: null }];
+</script>

src/pages/unit/tabs/ContractsTab.vue

@@ -8,6 +8,7 @@
       :female="false"
       title="Contratos"
       description="Contratos"
+      @on-add-item="openCreateDialog"
     >
       <template #body-cell-contract_dates="{ row }">
         <q-td>{{ row.contract_start_date }} - {{ row.contract_end_date }}</q-td>
@@ -33,8 +34,14 @@
 </template>
 
 <script setup>
+import { defineAsyncComponent } from "vue";
+import { useQuasar } from "quasar";
 import DefaultTable from "src/components/defaults/DefaultTable.vue";
 
+const CreateContractDialog = defineAsyncComponent(
+  () => import("src/pages/unit/components/CreateContractDialog.vue"),
+);
+
 defineProps({
   unitId: {
     type: Number,
@@ -42,6 +49,12 @@ defineProps({
   },
 });
 
+const $q = useQuasar();
+
+function openCreateDialog() {
+  $q.dialog({ component: CreateContractDialog });
+}
+
 const columns = [
   {
     name: "contract_number",