feat: adiciona Visualizacao do Contrato

src/pages/students/components/CreateContractDialog.vue → src/pages/students/components/AddEditContractDialog.vue

@@ -26,260 +26,260 @@
 
       <q-card-section class="q-pt-sm" style="height: 65vh; overflow-y: auto">
         <div v-show="activeTab === 'dados'">
-          <div class="text-subtitle1 q-mb-md">Dados do Aluno</div>
-
-          <div class="row q-col-gutter-sm">
-            <div class="col-12">
-              <DefaultInput
-                :model-value="props.student.name"
-                label="Aluno"
-                disable
-              />
-            </div>
-
-            <div class="col-6">
-              <DefaultInput
-                :model-value="props.student.document_number"
-                label="CPF"
-                disable
-              />
-            </div>
-
-            <div class="col-6">
-              <DefaultInput
-                :model-value="formattedBirthDate"
-                label="Data de Nascimento"
-                disable
-              />
-            </div>
+        <div class="text-subtitle1 q-mb-md">Dados do Aluno</div>
+
+        <div class="row q-col-gutter-sm">
+          <div class="col-12">
+            <DefaultInput
+              :model-value="props.student.name"
+              label="Aluno"
+              disable
+            />
           </div>
 
-          <div class="text-subtitle1 q-mt-lg q-mb-md">Dados do Contrato</div>
-
-          <div class="row q-col-gutter-sm">
-            <div class="col-4">
-              <DefaultInput v-model="form.protocol" label="Protocolo" />
-            </div>
-
-            <div class="col-4">
-              <DefaultInputDatePicker
-                v-model="form.signature_date"
-                label="Data Assinatura"
-              />
-            </div>
-
-            <div class="col-4">
-              <DefaultInputDatePicker
-                v-model="form.end_date"
-                label="Data Encerramento"
-              />
-            </div>
-
-            <div class="col-5">
-              <DefaultSelect
-                v-model="form.package_id"
-                label="Pacote de Aulas"
-                :options="packages"
-                option-value="id"
-                option-label="name"
-                emit-value
-                map-options
-              />
-            </div>
-
-            <div class="col-7">
-              <DefaultInput
-                v-model="form.class_quantity"
-                label="Qtd. Aulas"
-                type="number"
-                disable
-              />
-            </div>
-
-            <div class="col-4">
-              <DefaultSelect
-                v-model="form.weekday"
-                label="Dia da Semana"
-                :options="weekdays"
-                option-value="value"
-                option-label="label"
-                emit-value
-                map-options
-              />
-            </div>
-
-            <div class="col-4">
-              <DefaultInput
-                v-model="form.start_time"
-                label="Hora de Início"
-                mask="##:##"
-              >
-                <template #append>
-                  <q-icon name="mdi-clock-outline" />
-                </template>
-              </DefaultInput>
-            </div>
-
-            <div class="col-4">
-              <DefaultInput
-                v-model="form.end_time"
-                label="Hora de Término"
-                mask="##:##"
-              >
-                <template #append>
-                  <q-icon name="mdi-clock-outline" />
-                </template>
-              </DefaultInput>
-            </div>
-
-            <div class="col-4">
-              <DefaultSelect
-                v-model="form.second_weekday"
-                label="2° Dia da Semana"
-                :options="weekdays"
-                option-value="value"
-                option-label="label"
-                emit-value
-                map-options
-              />
-            </div>
-
-            <div class="col-4">
-              <DefaultInput
-                v-model="form.second_start_time"
-                label="Hora de Início"
-                mask="##:##"
-              >
-                <template #append>
-                  <q-icon name="mdi-clock-outline" />
-                </template>
-              </DefaultInput>
-            </div>
-
-            <div class="col-4">
-              <DefaultInput
-                v-model="form.second_end_time"
-                label="Hora de Término"
-                mask="##:##"
-              >
-                <template #append>
-                  <q-icon name="mdi-clock-outline" />
-                </template>
-              </DefaultInput>
-            </div>
+          <div class="col-6">
+            <DefaultInput
+              :model-value="props.student.document_number"
+              label="CPF"
+              disable
+            />
           </div>
 
-          <div class="text-subtitle1 q-mt-lg q-mb-md">Dados Financeiros</div>
-
-          <div class="row q-col-gutter-sm">
-            <div class="col-4">
-              <DefaultInput
-                v-model="form.due_day"
-                label="Dia de Vencimento"
-                type="number"
-              />
-            </div>
-
-            <div class="col-4">
-              <DefaultCurrencyInput
-                v-model="form.enrollment_fee"
-                label="Taxa de Matrícula"
-                disable
-              />
-            </div>
-
-            <div class="col-4">
-              <DefaultInput
-                v-model="form.total_classes"
-                label="Total de Aulas"
-                type="number"
-                disable
-              />
-            </div>
-
-            <div class="col-3">
-              <DefaultCurrencyInput v-model="form.down_payment" label="Entrada" />
-            </div>
-
-            <div class="col-3">
-              <DefaultSelect
-                v-model="form.installments"
-                label="Parcelas"
-                :options="installmentOptions"
-                option-value="value"
-                option-label="label"
-                emit-value
-                map-options
-              />
-            </div>
-
-            <div class="col-6">
-              <DefaultInput
-                v-model="form.early_payment_discount"
-                label="Desconto até o vencimento (%)"
-                type="number"
-              />
-            </div>
-
-            <div class="col-3">
-              <DefaultCurrencyInput
-                v-model="form.material_value"
-                label="Valor dos Materiais"
-              />
-            </div>
-
-            <div class="col-3">
-              <DefaultSelect
-                v-model="form.material_installments"
-                label="Parcelas"
-                :options="installmentOptions"
-                option-value="value"
-                option-label="label"
-                emit-value
-                map-options
-              />
-            </div>
-
-            <div class="col-6">
-              <DefaultInput
-                v-model="form.interest_rate"
-                label="Juros (%) a.m"
-                type="number"
-              />
-            </div>
-
-            <div class="col-6">
-              <DefaultSelect
-                v-model="form.payment_method"
-                label="Forma de Pagamento"
-                :options="paymentMethods"
-                option-value="value"
-                option-label="label"
-                emit-value
-                map-options
-              />
-            </div>
-
-            <div class="col-6">
-              <DefaultInput
-                v-model="form.late_fee"
-                label="Multa (%)"
-                type="number"
-              />
-            </div>
+          <div class="col-6">
+            <DefaultInput
+              :model-value="formattedBirthDate"
+              label="Data de Nascimento"
+              disable
+            />
           </div>
         </div>
 
+        <div class="text-subtitle1 q-mt-lg q-mb-md">Dados do Contrato</div>
+
+        <div class="row q-col-gutter-sm">
+          <div class="col-4">
+            <DefaultInput v-model="form.protocol" label="Protocolo" />
+          </div>
+
+          <div class="col-4">
+            <DefaultInputDatePicker
+              v-model="form.signature_date"
+              label="Data Assinatura"
+            />
+          </div>
+
+          <div class="col-4">
+            <DefaultInputDatePicker
+              v-model="form.end_date"
+              label="Data Encerramento"
+            />
+          </div>
+
+          <div class="col-5">
+            <DefaultSelect
+              v-model="form.package_id"
+              label="Pacote de Aulas"
+              :options="packages"
+              option-value="id"
+              option-label="name"
+              emit-value
+              map-options
+            />
+          </div>
+
+          <div class="col-7">
+            <DefaultInput
+              v-model="form.class_quantity"
+              label="Qtd. Aulas"
+              type="number"
+              disable
+            />
+          </div>
+
+          <div class="col-4">
+            <DefaultSelect
+              v-model="form.weekday"
+              label="Dia da Semana"
+              :options="weekdays"
+              option-value="value"
+              option-label="label"
+              emit-value
+              map-options
+            />
+          </div>
+
+          <div class="col-4">
+            <DefaultInput
+              v-model="form.start_time"
+              label="Hora de Início"
+              mask="##:##"
+            >
+              <template #append>
+                <q-icon name="mdi-clock-outline" />
+              </template>
+            </DefaultInput>
+          </div>
+
+          <div class="col-4">
+            <DefaultInput
+              v-model="form.end_time"
+              label="Hora de Término"
+              mask="##:##"
+            >
+              <template #append>
+                <q-icon name="mdi-clock-outline" />
+              </template>
+            </DefaultInput>
+          </div>
+
+          <div class="col-4">
+            <DefaultSelect
+              v-model="form.second_weekday"
+              label="2° Dia da Semana"
+              :options="weekdays"
+              option-value="value"
+              option-label="label"
+              emit-value
+              map-options
+            />
+          </div>
+
+          <div class="col-4">
+            <DefaultInput
+              v-model="form.second_start_time"
+              label="Hora de Início"
+              mask="##:##"
+            >
+              <template #append>
+                <q-icon name="mdi-clock-outline" />
+              </template>
+            </DefaultInput>
+          </div>
+
+          <div class="col-4">
+            <DefaultInput
+              v-model="form.second_end_time"
+              label="Hora de Término"
+              mask="##:##"
+            >
+              <template #append>
+                <q-icon name="mdi-clock-outline" />
+              </template>
+            </DefaultInput>
+          </div>
+        </div>
+
+        <div class="text-subtitle1 q-mt-lg q-mb-md">Dados Financeiros</div>
+
+        <div class="row q-col-gutter-sm">
+          <div class="col-4">
+            <DefaultInput
+              v-model="form.due_day"
+              label="Dia de Vencimento"
+              type="number"
+            />
+          </div>
+
+          <div class="col-4">
+            <DefaultCurrencyInput
+              v-model="form.enrollment_fee"
+              label="Taxa de Matrícula"
+              disable
+            />
+          </div>
+
+          <div class="col-4">
+            <DefaultInput
+              v-model="form.total_classes"
+              label="Total de Aulas"
+              type="number"
+              disable
+            />
+          </div>
+
+          <div class="col-3">
+            <DefaultCurrencyInput v-model="form.down_payment" label="Entrada" />
+          </div>
+
+          <div class="col-3">
+            <DefaultSelect
+              v-model="form.installments"
+              label="Parcelas"
+              :options="installmentOptions"
+              option-value="value"
+              option-label="label"
+              emit-value
+              map-options
+            />
+          </div>
+
+          <div class="col-6">
+            <DefaultInput
+              v-model="form.early_payment_discount"
+              label="Desconto até o vencimento (%)"
+              type="number"
+            />
+          </div>
+
+          <div class="col-3">
+            <DefaultCurrencyInput
+              v-model="form.material_value"
+              label="Valor dos Materiais"
+            />
+          </div>
+
+          <div class="col-3">
+            <DefaultSelect
+              v-model="form.material_installments"
+              label="Parcelas"
+              :options="installmentOptions"
+              option-value="value"
+              option-label="label"
+              emit-value
+              map-options
+            />
+          </div>
+
+          <div class="col-6">
+            <DefaultInput
+              v-model="form.interest_rate"
+              label="Juros (%) a.m"
+              type="number"
+            />
+          </div>
+
+          <div class="col-6">
+            <DefaultSelect
+              v-model="form.payment_method"
+              label="Forma de Pagamento"
+              :options="paymentMethods"
+              option-value="value"
+              option-label="label"
+              emit-value
+              map-options
+            />
+          </div>
+
+          <div class="col-6">
+            <DefaultInput
+              v-model="form.late_fee"
+              label="Multa (%)"
+              type="number"
+            />
+          </div>
+        </div>
+        </div>
+
         <div v-if="props.contract" v-show="activeTab === 'midias'">
           <DefaultTable
-            v-model:rows="files"
+            v-model:rows="medias"
             title="Mídias"
             :columns="mediaColumns"
             descricao="mídias"
             :feminino="true"
             no-api-call
             :show-search-field="false"
-            :loading="loadingFiles"
+            :loading="loadingMedias"
           >
             <template #body-cell-actions="{ row }">
               <q-td align="center">
@@ -331,9 +331,9 @@ import { useDialogPluginComponent, useQuasar } from "quasar";
 import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
 import DefaultInput from "src/components/defaults/DefaultInput.vue";
 import DefaultSelect from "src/components/defaults/DefaultSelect.vue";
+import DefaultTable from "src/components/defaults/DefaultTable.vue";
 import DefaultCurrencyInput from "src/components/defaults/DefaultCurrencyInput.vue";
 import DefaultInputDatePicker from "src/components/defaults/DefaultInputDatePicker.vue";
-import DefaultTable from "src/components/defaults/DefaultTable.vue";
 import { useSubmitHandler } from "src/composables/useSubmitHandler";
 import { useFormUpdateTracker } from "src/composables/useFormUpdateTracker";
 import { formatDateYMDtoDMY, formatDateDMYtoYMD } from "src/helpers/utils";
@@ -361,10 +361,9 @@ const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
   useDialogPluginComponent();
 
 const $q = useQuasar();
-
 const activeTab = ref("dados");
-const files = ref([]);
-const loadingFiles = ref(false);
+const medias = ref([]);
+const loadingMedias = ref(false);
 
 const trimTime = (t) => (t ? t.slice(0, 5) : null);
 
@@ -414,31 +413,51 @@ const weekdays = [
   { value: 0, label: "Domingo" },
 ];
 
+const packages = ref([]);
+
 const mediaColumns = [
   { name: "created_at", label: "Data de Anexo", field: "created_at", align: "left" },
   { name: "actions", label: "Ações", field: null, align: "center" },
 ];
 
-const packages = ref([]);
-
-async function fetchFiles() {
+async function fetchMedias() {
   if (!props.contract) return;
-  loadingFiles.value = true;
+  loadingMedias.value = true;
   try {
-    files.value = await getContractMedias(props.contract.id);
+    medias.value = await getContractMedias(props.contract.id);
   } finally {
-    loadingFiles.value = false;
+    loadingMedias.value = false;
   }
 }
 
+watch(activeTab, (tab) => {
+  if (tab === "midias") fetchMedias();
+});
+
 onMounted(async () => {
   packages.value = await getUnitPackages();
-  await fetchFiles();
 });
 
-watch(activeTab, (tab) => {
-  if (tab === "midias") fetchFiles();
-});
+function openFile(url) {
+  window.open(url, "_blank");
+}
+
+function handleDeleteMedia(media) {
+  $q.dialog({
+    title: "Excluir mídia",
+    message: "Deseja excluir esta mídia permanentemente?",
+    ok: { color: "negative", label: "Excluir" },
+    cancel: { color: "primary", outline: true, label: "Cancelar" },
+  }).onOk(async () => {
+    try {
+      await deleteStudentMedia(media.id);
+      medias.value = medias.value.filter((m) => m.id !== media.id);
+    } catch (e) {
+      console.error(e);
+      $q.notify({ type: "negative", message: "Erro ao excluir mídia." });
+    }
+  });
+}
 
 watch(
   () => form.package_id,
@@ -488,27 +507,6 @@ function buildPayload() {
   };
 }
 
-function openFile(url) {
-  window.open(url, "_blank");
-}
-
-function handleDeleteMedia(media) {
-  $q.dialog({
-    title: "Excluir mídia",
-    message: "Deseja excluir esta mídia permanentemente?",
-    ok: { color: "negative", label: "Excluir" },
-    cancel: { color: "primary", outline: true, label: "Cancelar" },
-  }).onOk(async () => {
-    try {
-      await deleteStudentMedia(media.id);
-      files.value = files.value.filter((f) => f.id !== media.id);
-    } catch (e) {
-      console.error(e);
-      $q.notify({ type: "negative", message: "Erro ao excluir mídia." });
-    }
-  });
-}
-
 async function handleSave() {
   const payload = buildPayload();
   await execute(() =>

src/pages/students/components/ViewContractDialog.vue

@@ -6,155 +6,174 @@
     >
       <DefaultDialogHeader title="Visualizar Contrato" @close="onDialogCancel" />
 
-      <q-card-section class="q-pt-sm" style="height: 65vh; overflow-y: auto">
-        <template v-if="loading">
-          <div class="flex flex-center" style="height: 100%">
-            <q-spinner size="40px" color="primary" />
-          </div>
-        </template>
-
-        <template v-else-if="contract">
-          <div class="text-subtitle1 q-mb-md">Dados do Aluno</div>
-
-          <div class="row q-col-gutter-sm">
-            <div class="col-12">
-              <DefaultInput
-                :model-value="contract.student_name"
-                label="Aluno"
-                disable
-              />
+      <template v-if="loading">
+        <q-card-section style="height: 65vh" class="flex flex-center">
+          <q-spinner size="40px" color="primary" />
+        </q-card-section>
+      </template>
+
+      <template v-else-if="contract">
+        <q-tabs
+          v-model="activeTab"
+          dense
+          align="left"
+          class="q-px-md text-grey-7"
+          active-color="primary"
+          indicator-color="primary"
+        >
+          <q-tab name="dados" label="Dados do Contrato" />
+          <q-tab name="midias" label="Mídias do Contrato" />
+        </q-tabs>
+        <q-separator />
+
+        <q-card-section class="q-pt-sm" style="height: 65vh; overflow-y: auto">
+          <div v-show="activeTab === 'dados'">
+            <div class="text-subtitle1 q-mb-md">Dados do Aluno</div>
+
+            <div class="row q-col-gutter-sm">
+              <div class="col-12">
+                <DefaultInput :model-value="contract.student_name" label="Aluno" disable />
+              </div>
+
+              <div class="col-6">
+                <DefaultInput :model-value="contract.student_document" label="CPF" disable />
+              </div>
+
+              <div class="col-6">
+                <DefaultInput :model-value="contract.student_birth_date" label="Data de Nascimento" disable />
+              </div>
             </div>
 
-            <div class="col-6">
-              <DefaultInput
-                :model-value="contract.student_document"
-                label="CPF"
-                disable
-              />
+            <div class="text-subtitle1 q-mt-lg q-mb-md">Dados do Contrato</div>
+
+            <div class="row q-col-gutter-sm">
+              <div class="col-4">
+                <DefaultInput :model-value="contract.protocol" label="Protocolo" disable />
+              </div>
+
+              <div class="col-4">
+                <DefaultInput :model-value="contract.signature_date" label="Data Assinatura" disable />
+              </div>
+
+              <div class="col-4">
+                <DefaultInput :model-value="contract.end_date" label="Data Encerramento" disable />
+              </div>
+
+              <div class="col-5">
+                <DefaultInput :model-value="contract.package_name" label="Pacote de Aulas" disable />
+              </div>
+
+              <div class="col-7">
+                <DefaultInput :model-value="contract.class_quantity" label="Qtd. Aulas" disable />
+              </div>
+
+              <div class="col-4">
+                <DefaultInput :model-value="weekdayLabel(contract.weekday)" label="Dia da Semana" disable />
+              </div>
+
+              <div class="col-4">
+                <DefaultInput :model-value="contract.start_time" label="Hora de Início" disable>
+                  <template #append><q-icon name="mdi-clock-outline" /></template>
+                </DefaultInput>
+              </div>
+
+              <div class="col-4">
+                <DefaultInput :model-value="contract.end_time" label="Hora de Término" disable>
+                  <template #append><q-icon name="mdi-clock-outline" /></template>
+                </DefaultInput>
+              </div>
+
+              <div class="col-4">
+                <DefaultInput :model-value="weekdayLabel(contract.second_weekday)" label="2° Dia da Semana" disable />
+              </div>
+
+              <div class="col-4">
+                <DefaultInput :model-value="contract.second_start_time" label="Hora de Início" disable>
+                  <template #append><q-icon name="mdi-clock-outline" /></template>
+                </DefaultInput>
+              </div>
+
+              <div class="col-4">
+                <DefaultInput :model-value="contract.second_end_time" label="Hora de Término" disable>
+                  <template #append><q-icon name="mdi-clock-outline" /></template>
+                </DefaultInput>
+              </div>
             </div>
 
-            <div class="col-6">
-              <DefaultInput
-                :model-value="contract.student_birth_date"
-                label="Data de Nascimento"
-                disable
-              />
-            </div>
-          </div>
+            <div class="text-subtitle1 q-mt-lg q-mb-md">Dados Financeiros</div>
 
-          <div class="text-subtitle1 q-mt-lg q-mb-md">Dados do Contrato</div>
+            <div class="row q-col-gutter-sm">
+              <div class="col-4">
+                <DefaultInput :model-value="contract.due_day" label="Dia de Vencimento" disable />
+              </div>
 
-          <div class="row q-col-gutter-sm">
-            <div class="col-4">
-              <DefaultInput :model-value="contract.protocol" label="Protocolo" disable />
-            </div>
+              <div class="col-4">
+                <DefaultCurrencyInput :model-value="contract.tax_register" label="Taxa de Matrícula" disable />
+              </div>
 
-            <div class="col-4">
-              <DefaultInput :model-value="contract.signature_date" label="Data Assinatura" disable />
-            </div>
+              <div class="col-4">
+                <DefaultInput :model-value="contract.class_quantity" label="Total de Aulas" disable />
+              </div>
 
-            <div class="col-4">
-              <DefaultInput :model-value="contract.end_date" label="Data Encerramento" disable />
-            </div>
+              <div class="col-3">
+                <DefaultCurrencyInput :model-value="contract.down_payment" label="Entrada" disable />
+              </div>
 
-            <div class="col-5">
-              <DefaultInput :model-value="contract.package_name" label="Pacote de Aulas" disable />
-            </div>
+              <div class="col-3">
+                <DefaultInput :model-value="contract.installments ? `${contract.installments}x` : null" label="Parcelas" disable />
+              </div>
 
-            <div class="col-7">
-              <DefaultInput :model-value="contract.class_quantity" label="Qtd. Aulas" disable />
-            </div>
+              <div class="col-6">
+                <DefaultInput :model-value="contract.early_payment_discount" label="Desconto até o vencimento (%)" disable />
+              </div>
 
-            <div class="col-4">
-              <DefaultInput :model-value="weekdayLabel(contract.weekday)" label="Dia da Semana" disable />
-            </div>
+              <div class="col-3">
+                <DefaultCurrencyInput :model-value="contract.material_value" label="Valor dos Materiais" disable />
+              </div>
 
-            <div class="col-4">
-              <DefaultInput :model-value="contract.start_time" label="Hora de Início" disable>
-                <template #append>
-                  <q-icon name="mdi-clock-outline" />
-                </template>
-              </DefaultInput>
-            </div>
+              <div class="col-3">
+                <DefaultInput :model-value="contract.material_installments ? `${contract.material_installments}x` : null" label="Parcelas" disable />
+              </div>
 
-            <div class="col-4">
-              <DefaultInput :model-value="contract.end_time" label="Hora de Término" disable>
-                <template #append>
-                  <q-icon name="mdi-clock-outline" />
-                </template>
-              </DefaultInput>
-            </div>
+              <div class="col-6">
+                <DefaultInput :model-value="contract.interest_rate" label="Juros (%) a.m" disable />
+              </div>
 
-            <div class="col-4">
-              <DefaultInput :model-value="weekdayLabel(contract.second_weekday)" label="2° Dia da Semana" disable />
-            </div>
+              <div class="col-6">
+                <DefaultInput :model-value="paymentMethodLabel(contract.payment_method)" label="Forma de Pagamento" disable />
+              </div>
 
-            <div class="col-4">
-              <DefaultInput :model-value="contract.second_start_time" label="Hora de Início" disable>
-                <template #append>
-                  <q-icon name="mdi-clock-outline" />
-                </template>
-              </DefaultInput>
-            </div>
-
-            <div class="col-4">
-              <DefaultInput :model-value="contract.second_end_time" label="Hora de Término" disable>
-                <template #append>
-                  <q-icon name="mdi-clock-outline" />
-                </template>
-              </DefaultInput>
+              <div class="col-6">
+                <DefaultInput :model-value="contract.fine_cancelled" label="Multa (%)" disable />
+              </div>
             </div>
           </div>
 
-          <div class="text-subtitle1 q-mt-lg q-mb-md">Dados Financeiros</div>
-
-          <div class="row q-col-gutter-sm">
-            <div class="col-4">
-              <DefaultInput :model-value="contract.due_day" label="Dia de Vencimento" disable />
-            </div>
-
-            <div class="col-4">
-              <DefaultCurrencyInput :model-value="contract.tax_register" label="Taxa de Matrícula" disable />
-            </div>
-
-            <div class="col-4">
-              <DefaultInput :model-value="contract.class_quantity" label="Total de Aulas" disable />
-            </div>
-
-            <div class="col-3">
-              <DefaultCurrencyInput :model-value="contract.down_payment" label="Entrada" disable />
-            </div>
-
-            <div class="col-3">
-              <DefaultInput :model-value="contract.installments ? `${contract.installments}x` : null" label="Parcelas" disable />
-            </div>
-
-            <div class="col-6">
-              <DefaultInput :model-value="contract.early_payment_discount" label="Desconto até o vencimento (%)" disable />
-            </div>
-
-            <div class="col-3">
-              <DefaultCurrencyInput :model-value="contract.material_value" label="Valor dos Materiais" disable />
-            </div>
-
-            <div class="col-3">
-              <DefaultInput :model-value="contract.material_installments ? `${contract.material_installments}x` : null" label="Parcelas" disable />
-            </div>
-
-            <div class="col-6">
-              <DefaultInput :model-value="contract.interest_rate" label="Juros (%) a.m" disable />
-            </div>
-
-            <div class="col-6">
-              <DefaultInput :model-value="paymentMethodLabel(contract.payment_method)" label="Forma de Pagamento" disable />
-            </div>
-
-            <div class="col-6">
-              <DefaultInput :model-value="contract.fine_cancelled" label="Multa (%)" disable />
-            </div>
+          <div v-show="activeTab === 'midias'">
+            <DefaultTable
+              v-model:rows="medias"
+              title="Mídias"
+              :columns="mediaColumns"
+              descricao="mídias"
+              :feminino="true"
+              no-api-call
+              :show-search-field="false"
+              :loading="loadingMedias"
+            >
+              <template #body-cell-actions="{ row }">
+                <q-td align="center">
+                  <q-btn
+                    outline
+                    icon="mdi-eye-outline"
+                    style="width: 36px"
+                    @click.prevent.stop="openFile(row.file_url)"
+                  />
+                </q-td>
+              </template>
+            </DefaultTable>
           </div>
-        </template>
-      </q-card-section>
+        </q-card-section>
+      </template>
 
       <q-separator />
 
@@ -166,12 +185,14 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, watch, onMounted } from "vue";
 import { useDialogPluginComponent } from "quasar";
 import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
 import DefaultInput from "src/components/defaults/DefaultInput.vue";
 import DefaultCurrencyInput from "src/components/defaults/DefaultCurrencyInput.vue";
+import DefaultTable from "src/components/defaults/DefaultTable.vue";
 import { getStudentContractById } from "src/api/studentContract";
+import { getContractMedias } from "src/api/student_media";
 
 const props = defineProps({
   id: {
@@ -186,6 +207,9 @@ const { dialogRef, onDialogHide, onDialogCancel } = useDialogPluginComponent();
 
 const contract = ref(null);
 const loading = ref(false);
+const activeTab = ref("dados");
+const medias = ref([]);
+const loadingMedias = ref(false);
 
 onMounted(async () => {
   loading.value = true;
@@ -196,6 +220,28 @@ onMounted(async () => {
   }
 });
 
+async function fetchMedias() {
+  loadingMedias.value = true;
+  try {
+    medias.value = await getContractMedias(props.id);
+  } finally {
+    loadingMedias.value = false;
+  }
+}
+
+watch(activeTab, (tab) => {
+  if (tab === "midias") fetchMedias();
+});
+
+function openFile(url) {
+  window.open(url, "_blank");
+}
+
+const mediaColumns = [
+  { name: "created_at", label: "Data de Anexo", field: "created_at", align: "left" },
+  { name: "actions", label: "Ações", field: null, align: "center" },
+];
+
 const weekdays = {
   0: "Domingo",
   1: "Segunda",

src/pages/students/tabs/ContractTab.vue

@@ -103,7 +103,7 @@
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import DefaultTable from "src/components/defaults/DefaultTable.vue";
-import CreateContractDialog from "src/pages/students/components/CreateContractDialog.vue";
+import AddEditContractDialog from "src/pages/students/components/AddEditContractDialog.vue";
 import ContractActionConfirmDialog from "src/pages/students/components/ContractActionConfirmDialog.vue";
 import {
   getStudentContracts,
@@ -134,7 +134,7 @@ onMounted(loadContracts);
 
 function openDialog(contract = null) {
   $q.dialog({
-    component: CreateContractDialog,
+    component: AddEditContractDialog,
     componentProps: { student: props.student, contract },
   }).onOk(loadContracts);
 }