feat: add validation messages for date fields and enhance FinancialTab with new billing options

src/i18n/locales/en.json

@@ -177,6 +177,10 @@
       "required": "This field is required",
       "email": "This field must be a valid email | These fields must be valid emails",
       "date": "This field must be a valid date",
+      "date_before_start": "The end date cannot be earlier than the start date",
+      "date_max_days_from_today": "The date cannot be more than {maxDays} days from today",
+      "date_not_before": "The date cannot be earlier than {minimumDate}",
+      "date_range_days": "The range cannot exceed {maxDays} days",
       "duration_hours": "The duration must be between 1 minute and 24 hours",
       "integer": "The value must be an integer",
       "integer_min": "The value must be an integer greater than or equal to {min}",

src/i18n/locales/es.json

@@ -177,6 +177,10 @@
       "required": "Este campo es obligatorio",
       "email": "Este campo debe ser un correo electrónico válido | Estos campos deben ser correos electrónicos válidos",
       "date": "Este campo debe ser una fecha válida",
+      "date_before_start": "La fecha final no puede ser anterior a la fecha inicial",
+      "date_max_days_from_today": "La fecha no puede superar los {maxDays} días a partir de hoy",
+      "date_not_before": "La fecha no puede ser anterior a {minimumDate}",
+      "date_range_days": "El período no puede superar los {maxDays} días",
       "duration_hours": "La duración debe estar entre 1 minuto y 24 horas",
       "integer": "El valor debe ser un número entero",
       "integer_min": "El valor debe ser un número entero mayor o igual a {min}",

src/i18n/locales/pt.json

@@ -177,6 +177,10 @@
       "required": "Este campo é obrigatório",
       "email": "Este campo deve ser um e-mail válido | Estes campos devem ser e-mails válidos",
       "date": "Este campo deve ser uma data válida",
+      "date_before_start": "A data final não pode ser anterior à data inicial",
+      "date_max_days_from_today": "A data não pode ser superior a {maxDays} dias a partir de hoje",
+      "date_not_before": "A data não pode ser anterior a {minimumDate}",
+      "date_range_days": "O período não pode ultrapassar {maxDays} dias",
       "duration_hours": "A duração deve estar entre 1 minuto e 24 horas",
       "integer": "O valor deve ser um número inteiro",
       "integer_min": "O valor deve ser um número inteiro maior ou igual a {min}",

src/pages/unit/tabs/FinancialTab.vue

@@ -8,25 +8,22 @@
               Contratos
             </div>
 
-            <div class="row q-col-gutter-md">
-              <div class="col-12 col-md-4 flex items-center">
-                <q-toggle
-                  v-model="form.charge_roi"
-                  color="primary"
-                  label="Cobrar ROI"
-                />
-              </div>
-
-              <div class="col-12 col-md-4 flex items-center">
-                <q-toggle
-                  v-model="form.charge_fnm"
-                  color="primary"
-                  label="Cobrar FNM"
-                />
-              </div>
+            <div class="column q-gutter-sm q-mb-md">
+              <q-toggle
+                v-model="form.charge_roi"
+                color="primary"
+                label="Cobrar ROI"
+              />
+
+              <q-toggle
+                v-model="form.charge_fnm"
+                color="primary"
+                label="Cobrar FNM"
+              />
             </div>
 
-            <DefaultInput
+            <div class="row q-col-gutter-md">
+              <DefaultInput
                 v-model.number="form.max_freeze_count"
                 v-model:error="validationErrors.max_freeze_count"
                 class="col-12 col-md-4"
@@ -36,6 +33,45 @@
                 :error-message="validationErrors.max_freeze_count"
                 :rules="[inputRules.minValue(0)]"
               />
+            </div>
+          </div>
+
+          <div>
+            <div class="text-subtitle1 text-weight-medium q-mb-sm">
+              Dados para Faturamento
+            </div>
+
+            <div class="row q-col-gutter-md">
+              <DefaultSelect
+                v-model="form.billing_method"
+                v-model:error="validationErrors.billing_method"
+                class="col-12 col-md-6"
+                emit-value
+                label="Forma de Cobrança"
+                map-options
+                outlined
+                :error-message="validationErrors.billing_method"
+                :options="billingMethodOptions"
+              />
+
+              <DefaultInputDatePicker
+                v-model="form.due_date"
+                v-model:error="validationErrors.due_date"
+                class="col-12 col-md-6"
+                label="Data de Vencimento"
+                :error-message="validationErrors.due_date"
+              />
+
+              <DefaultInput
+                v-model="form.financial_email"
+                v-model:error="validationErrors.financial_email"
+                class="col-12"
+                label="E-mail Financeiro"
+                outlined
+                :error-message="validationErrors.financial_email"
+                :rules="[inputRules.email]"
+              />
+            </div>
           </div>
         </div>
       </q-scroll-area>
@@ -77,6 +113,8 @@ import { useScroll } from "src/composables/useScroll";
 import { useSubmitHandler } from "src/composables/useSubmitHandler";
 
 import DefaultInput from "src/components/defaults/DefaultInput.vue";
+import DefaultInputDatePicker from "src/components/defaults/DefaultInputDatePicker.vue";
+import DefaultSelect from "src/components/defaults/DefaultSelect.vue";
 
 const props = defineProps({
   unitId: {
@@ -95,8 +133,11 @@ const scrollAreaRef = ref(null);
 const { form, getUpdatedFields, resetUpdateForm, setUpdateFormAsOriginal } =
   useForm(
     {
+      billing_method: null,
       charge_fnm: true,
       charge_roi: true,
+      due_date: null,
+      financial_email: null,
       max_freeze_count: null,
     },
     { containerRef: scrollAreaRef },
@@ -116,6 +157,14 @@ const {
   scrollFn: scrollToComponent,
 });
 
+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 fetchData = async () => {
   if (!props.unitId) return;