feat: muda rota para cadastros e adiciona tab de grupos em cadastro

src/pages/cadastros/CadastrosPage.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <DefaultHeaderPage title="Cadastros" :show-filter-icon="false" />
+
+    <div class="q-px-sm">
+      <CustomTabComponent
+        v-model:active-tab="currentTab"
+        :tabs="tabs"
+        class="q-mb-sm"
+      />
+
+      <div v-show="currentTab === 'usuarios'">
+        <UsuariosTab />
+      </div>
+
+      <div v-show="currentTab === 'grupos'">
+        <GruposTab />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineAsyncComponent, ref } from "vue";
+import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
+import CustomTabComponent from "src/components/shared/CustomTabComponent.vue";
+
+const UsuariosTab = defineAsyncComponent(() => import("./tabs/UsuariosTab.vue"));
+const GruposTab = defineAsyncComponent(() => import("./tabs/GruposTab.vue"));
+
+const currentTab = ref("usuarios");
+
+const tabs = [
+  { name: "usuarios", label: "Usuários" },
+  { name: "grupos", label: "Grupos" },
+];
+</script>

src/pages/cadastros/tabs/GruposTab.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="flex flex-center q-pa-xl text-grey-5">
+    <div class="column items-center" style="gap: 12px">
+      <q-icon name="mdi-account-group-outline" size="64px" />
+      <span class="text-body1">Grupos em desenvolvimento</span>
+    </div>
+  </div>
+</template>

src/pages/cadastros/tabs/UsuariosTab.vue

@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <DefaultTable
+      v-model:rows="filteredRows"
+      title="Lista de Usuários"
+      :columns
+      description="Usuários"
+      no-api-call
+      add-item
+      add-item-route="UserAddPage"
+    >
+      <template #body-cell-user_type="{ row }">
+        <q-td align="left">{{ userTypeLabel(row.user_type) }}</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="{ row }">
+        <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="onEdit(row)"
+            />
+            <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>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import DefaultTable from "src/components/defaults/DefaultTable.vue";
+import { getUsers } from "src/api/user";
+
+const router = useRouter();
+
+const funcaoSelected = ref(null);
+const allUsers = ref([]);
+
+const USER_TYPE_LABELS = {
+  ADMIN: "Administrador (Franqueadora)",
+  ADMIN_FRANCHISEE: "Administrador (Franqueada)",
+};
+
+const userTypeLabel = (type) => USER_TYPE_LABELS[type] ?? type;
+
+const filteredRows = computed(() => {
+  return allUsers.value.filter((row) => {
+    if (funcaoSelected.value && row.user_type !== funcaoSelected.value.value)
+      return false;
+    return true;
+  });
+});
+
+const columns = ref([
+  { name: "name", label: "Nome", field: "name", align: "left" },
+  { name: "email", label: "E-mail", field: "email", align: "left" },
+  { name: "user_type", label: "Função", field: "user_type", align: "left" },
+  { name: "status", label: "Status", field: "status", align: "center" },
+  { name: "actions", label: "Ações", field: null, align: "center" },
+]);
+
+function onEdit(row) {
+  router.push({ name: "UserEditPage", params: { id: row.id } });
+}
+
+onMounted(async () => {
+  try {
+    allUsers.value = await getUsers();
+  } catch (error) {
+    console.error("Failed to load users:", error);
+  }
+});
+</script>

src/pages/users/UserActionPage.vue

@@ -187,7 +187,7 @@ const form = ref({
 const { loading, execute } = useSubmitHandler({
   formRef,
   onSuccess: () => {
-    router.push({ name: "UserPage" });
+    router.push({ name: "CadastrosPage" });
   },
 });
 

src/router/routes/user.route.js

@@ -1,6 +1,6 @@
 export default [
   {
-    path: "/users/create",
+    path: "/cadastros/usuarios/criar",
     name: "UserAddPage",
     component: () => import("pages/users/UserActionPage.vue"),
     meta: {
@@ -12,8 +12,8 @@ export default [
       requiredPermission: "config.city",
       breadcrumbs: [
         {
-          name: "UserPage",
-          title: "Usuários",
+          name: "CadastrosPage",
+          title: "Cadastros",
         },
         {
           name: "UserAddPage",
@@ -23,7 +23,7 @@ export default [
     },
   },
   {
-    path: "/users/:id",
+    path: "/cadastros/usuarios/:id",
     name: "UserEditPage",
     component: () => import("pages/users/UserActionPage.vue"),
     meta: {
@@ -35,8 +35,8 @@ export default [
       requiredPermission: "config.city",
       breadcrumbs: [
         {
-          name: "UserPage",
-          title: "Usuários",
+          name: "CadastrosPage",
+          title: "Cadastros",
         },
         {
           name: "UserEditPage",
@@ -46,12 +46,12 @@ export default [
     },
   },
   {
-    path: "/users",
-    name: "UserPage",
-    component: () => import("pages/users/UserPage.vue"),
+    path: "/cadastros",
+    name: "CadastrosPage",
+    component: () => import("pages/cadastros/CadastrosPage.vue"),
     meta: {
       title: {
-        value: "Usuários",
+        value: "Cadastros",
         translate: false,
       },
       requireAuth: true,
@@ -59,8 +59,8 @@ export default [
       requiredPermission: "config.city",
       breadcrumbs: [
         {
-          name: "UserPage",
-          title: "Usuários",
+          name: "CadastrosPage",
+          title: "Cadastros",
         },
       ],
     },

src/stores/navigation.js

@@ -61,7 +61,7 @@ export const navigationStore = defineStore("navigation", () => {
     {
       type: "single",
       title: "Cadastros",
-      name: "UserPage",
+      name: "CadastrosPage",
       icon: "mdi-account-multiple-outline",
       disable: false,
       permission: false,