sfp_vue_franchisor_ginastica_cerebro/src/pages/dashboard/StudentDetailPage.vue

<template>
  <div>
    <DefaultHeaderPage title="Detalhe do Aluno" />

    <div class="q-pa-md">
      <div v-if="loading" class="flex flex-center q-pa-xl">
        <q-spinner color="primary" size="50px" />
      </div>

      <div v-else-if="student" class="column q-gutter-md" style="max-width: 600px">
        <q-card flat bordered style="border-radius: 12px">
          <q-card-section>
            <div class="text-subtitle2 text-grey-6 q-mb-xs">Nome do Aluno</div>
            <div class="text-h6 text-dark">{{ student.name }}</div>
          </q-card-section>

          <q-separator inset />

          <q-card-section>
            <div class="text-subtitle2 text-grey-6 q-mb-xs">Contato / Unidade</div>
            <div class="text-body1 text-dark">{{ student.phone ?? "—" }}</div>
            <div class="text-caption text-grey-6">
              {{ student.unit?.fantasy_name ?? "—" }}
            </div>
          </q-card-section>

          <q-separator inset />

          <q-card-section>
            <div class="text-subtitle2 text-grey-6 q-mb-xs">Protocolo do Contrato</div>
            <div class="text-body1 text-dark">
              {{ student.protocol ?? "—" }}
            </div>
          </q-card-section>
        </q-card>

        <div>
          <q-btn
            flat
            color="primary"
            icon="mdi-arrow-left"
            label="Voltar"
            @click="$router.back()"
          />
        </div>
      </div>

      <div v-else class="text-grey-6 q-pa-md">Aluno não encontrado.</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
import { getFranchisorStudentDetail } from "src/api/student";

const route = useRoute();
const loading = ref(true);
const student = ref(null);

onMounted(async () => {
  try {
    student.value = await getFranchisorStudentDetail(route.params.id);
  } catch {
    // silent
  } finally {
    loading.value = false;
  }
});
</script>