feat(students): cria rota, adiciona pagina e action de alunos

src/pages/alunos/AlunoActionPage.vue

@@ -0,0 +1,190 @@
+<template>
+  <div>
+    <DefaultHeaderPage title="Cadastro de Aluno" />
+
+    <div class="q-pa-md">
+      <div class="column justify-center items-center q-mb-lg">
+        <div class="q-mb-md">
+          <q-avatar size="80px" color="grey-3">
+            <q-icon name="mdi-account" size="48px" color="grey-6" />
+            <q-btn
+              round
+              dense
+              color="primary"
+              icon="mdi-camera"
+              size="xs"
+              style="position: absolute; bottom: 0; right: 0"
+              @click="triggerFileInput"
+            />
+          </q-avatar>
+          <input
+            ref="fileInputRef"
+            type="file"
+            accept="image/*"
+            style="display: none"
+            @change="onAvatarChange"
+          />
+        </div>
+
+        <div class="row full-width q-mt-md q-col-gutter-sm">
+          <DefaultSelect
+            v-model="form.state"
+            label="Estado / UF"
+            class="col-6"
+            outlined
+            emit-value
+            map-options
+            :options="stateOptions"
+          />
+
+          <DefaultSelect
+            v-model="form.unit"
+            label="Unidade"
+            class="col-6"
+            outlined
+            emit-value
+            map-options
+            :options="unitOptions"
+          />
+
+          <DefaultInput
+            v-model="form.name"
+            label="Nome"
+            class="col-6"
+            outlined
+          />
+
+          <DefaultInput
+            v-model="form.surname"
+            label="Sobrenome"
+            class="col-6"
+            outlined
+          />
+
+          <DefaultInput
+            v-model="form.cpf"
+            label="CPF"
+            class="col-6"
+            outlined
+          />
+
+          <DefaultInput
+            v-model="form.phone"
+            label="Telefone"
+            class="col-6"
+            outlined
+          />
+
+          <DefaultInput
+            v-model="form.email"
+            label="E-mail"
+            class="col-6"
+            outlined
+            type="email"
+          />
+
+          <DefaultInput
+            v-model="form.birthdate"
+            label="Data de Nascimento"
+            class="col-6"
+            outlined
+          />
+
+          <DefaultPasswordInput
+            v-model="form.password"
+            label="Senha"
+            class="col-6"
+            outlined
+          />
+
+          <DefaultPasswordInput
+            v-model="form.password_confirmation"
+            label="Repetir Senha"
+            class="col-6"
+            outlined
+          />
+
+          <div class="col-12 flex items-center">
+            <q-btn
+              label="Gerar senha segura"
+              icon="mdi-thumb-up-outline"
+              color="primary"
+              @click="generatePassword"
+            />
+          </div>
+        </div>
+
+        <div class="row justify-end q-mt-md full-width">
+          <q-btn
+            label="SALVAR"
+            icon-right="mdi-check"
+            color="primary"
+            @click="onSave"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, useTemplateRef } from "vue";
+import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
+import DefaultInput from "src/components/defaults/DefaultInput.vue";
+import DefaultSelect from "src/components/defaults/DefaultSelect.vue";
+import DefaultPasswordInput from "src/components/defaults/DefaultPasswordInput.vue";
+
+const fileInputRef = useTemplateRef("fileInputRef");
+
+const form = ref({
+  state: null,
+  unit: null,
+  name: null,
+  surname: null,
+  cpf: null,
+  phone: null,
+  email: null,
+  birthdate: null,
+  password: null,
+  password_confirmation: null,
+});
+
+const stateOptions = ref([
+  { label: "Paraná", value: "PR" },
+  { label: "São Paulo", value: "SP" },
+  { label: "Santa Catarina", value: "SC" },
+]);
+
+const unitOptions = ref([
+  { label: "Toledo-PR", value: "toledo" },
+  { label: "Arapongas-PR", value: "arapongas" },
+  { label: "Curitiba-PR", value: "curitiba" },
+  { label: "Londrina-PR", value: "londrina" },
+  { label: "Ponta Grossa-PR", value: "ponta_grossa" },
+  { label: "Maringá-PR", value: "maringa" },
+  { label: "Cascavel-PR", value: "cascavel" },
+]);
+
+function triggerFileInput() {
+  fileInputRef.value?.click();
+}
+
+function onAvatarChange(event) {
+  const file = event.target.files[0];
+  console.log("Avatar file selected:", file);
+}
+
+function generatePassword() {
+  const chars =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%";
+  const password = Array.from({ length: 12 }, () =>
+    chars.charAt(Math.floor(Math.random() * chars.length)),
+  ).join("");
+  form.value.password = password;
+  form.value.password_confirmation = password;
+}
+
+function onSave() {
+  console.log("Saving aluno:", form.value);
+}
+</script>

src/pages/alunos/AlunosPage.vue

@@ -1,9 +1,99 @@
 <template>
   <div>
-    <DefaultHeaderPage />
+    <DefaultHeaderPage title="Alunos" show-filter-icon />
+
+    <div class="q-px-sm">
+      <DefaultTable
+        v-model:rows="rows"
+        title="Lista de alunos"
+        :columns
+        descricao="Alunos"
+        :feminino="false"
+        no-api-call
+        add-item
+        add-item-route="AlunoAddPage"
+      >
+        <template #body-cell-contato="{ row }">
+          <q-td>
+            <div>{{ row.phone }}</div>
+            <div class="text-grey-6 text-caption">{{ row.city }}</div>
+          </q-td>
+        </template>
+
+        <template #body-cell-status="{ row }">
+          <q-td align="center">
+            <q-badge
+              :color="row.status === 'active' ? 'positive' : 'warning'"
+              :label="row.status === 'active' ? 'Ativo' : 'Inativo'"
+            />
+          </q-td>
+        </template>
+
+        <template #body-cell-actions>
+          <q-td auto-width>
+            <q-item-section class="no-wrap" style="flex-direction: row">
+              <q-btn
+                outline
+                icon="mdi-account-edit-outline"
+                style="width: 36px"
+                class="q-mr-sm"
+                @click.prevent.stop="() => {}"
+              />
+              <q-btn
+                outline
+                icon="mdi-trash-can-outline"
+                style="width: 36px"
+                class="q-mr-sm"
+                @click.prevent.stop="() => {}"
+              />
+            </q-item-section>
+          </q-td>
+        </template>
+      </DefaultTable>
+    </div>
   </div>
 </template>
 
 <script setup>
 import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
+import DefaultTable from "src/components/defaults/DefaultTable.vue";
+import { ref } from "vue";
+
+const columns = ref([
+  {
+    name: "name",
+    label: "Nome",
+    field: "name",
+    align: "left",
+  },
+  {
+    name: "contato",
+    label: "Contato",
+    field: "contato",
+    align: "left",
+  },
+  {
+    name: "status",
+    label: "Status",
+    field: "status",
+    align: "center",
+  },
+  {
+    name: "actions",
+    label: "Ações",
+    field: null,
+    align: "center",
+  },
+]);
+
+const rows = ref([
+  { id: 1, name: "Heloisa Faria", phone: "(45)99999-9999", city: "Toledo-PR", status: "inactive" },
+  { id: 2, name: "Carol", phone: "(45)99999-9999", city: "Arapongas-PR", status: "inactive" },
+  { id: 3, name: "Marcelo Souza", phone: "(45)98888-8888", city: "Curitiba-PR", status: "active" },
+  { id: 4, name: "Ana Lucia", phone: "(45)97777-7777", city: "Londrina-PR", status: "active" },
+  { id: 5, name: "Ricardo Silva", phone: "(45)96666-6666", city: "Ponta Grossa-PR", status: "active" },
+  { id: 6, name: "Juliana Costa", phone: "(45)95555-5555", city: "Maringá-PR", status: "active" },
+  { id: 7, name: "Fernando Almeida", phone: "(45)94444-4444", city: "Cascavel-PR", status: "active" },
+  { id: 8, name: "Patricia Lima", phone: "(45)93333-3333", city: "Foz do Iguaçu-PR", status: "active" },
+]);
 </script>

src/router/routes/config.route.js

@@ -1,4 +1,26 @@
 export default [
+  {
+    path: "/alunos/create",
+    name: "AlunoAddPage",
+    component: () => import("pages/alunos/AlunoActionPage.vue"),
+    meta: {
+      title: {
+        value: "Cadastro de Aluno",
+        translate: false,
+      },
+      requireAuth: true,
+      breadcrumbs: [
+        {
+          name: "AlunosPage",
+          title: "Alunos",
+        },
+        {
+          name: "AlunoAddPage",
+          title: "Cadastro de Aluno",
+        },
+      ],
+    },
+  },
   {
     path: "/alunos",
     name: "AlunosPage",