feat: adiciona pacotes para franqueados

src/api/package.js

@@ -0,0 +1,6 @@
+import api from "src/api";
+
+export const getUnitPackages = async () => {
+  const { data } = await api.get("/class-package/by-unit");
+  return data.payload;
+};

src/pages/packages/PackagesPage.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <DefaultHeaderPage title="Pacotes" />
+
+    <div class="q-px-sm">
+      <!-- Loading skeleton -->
+      <div v-if="loading" class="row q-col-gutter-sm">
+        <div v-for="n in 6" :key="n" class="col-12 col-sm-6 col-md-4">
+          <q-card flat bordered style="border-radius: 12px">
+            <q-card-section>
+              <q-skeleton type="text" width="60%" />
+              <q-skeleton type="text" width="30%" class="q-mb-sm" />
+              <q-skeleton type="text" width="80%" />
+              <q-skeleton type="text" width="70%" />
+              <q-skeleton type="text" width="50%" />
+            </q-card-section>
+          </q-card>
+        </div>
+      </div>
+
+      <!-- Packages grid -->
+      <div v-else class="row q-col-gutter-sm">
+        <div
+          v-for="pkg in packages"
+          :key="pkg.id"
+          class="col-12 col-sm-6 col-md-4"
+        >
+          <PackageCard :pkg="pkg" />
+        </div>
+
+        <div v-if="packages.length === 0" class="col-12 text-center text-grey-5 q-py-xl">
+          Nenhum pacote disponível para sua unidade
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+
+import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
+import PackageCard from "./components/PackageCard.vue";
+
+import { getUnitPackages } from "src/api/package";
+
+const loading = ref(false);
+const packages = ref([]);
+
+const fetchPackages = async () => {
+  loading.value = true;
+  try {
+    packages.value = await getUnitPackages();
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(fetchPackages);
+</script>

src/pages/packages/components/PackageCard.vue

@@ -0,0 +1,33 @@
+<template>
+  <q-card flat bordered class="package-card">
+    <q-card-section class="q-pa-md">
+      <div class="text-subtitle1 text-weight-bold">{{ pkg.name }}</div>
+      <div class="text-body2 text-grey-6 q-mb-sm">{{ pkg.quantity_classes }} Aulas</div>
+
+      <div class="column" style="gap: 2px">
+        <span class="text-body2">Contrato {{ formatToBRLCurrency(pkg.contract_value) }}</span>
+        <span class="text-body2">
+          Material {{ formatToBRLCurrency(pkg.contract_material_value) }} — Incluso
+        </span>
+        <span class="text-body2">Matrícula {{ formatToBRLCurrency(pkg.contract_register_value) }}</span>
+      </div>
+    </q-card-section>
+  </q-card>
+</template>
+
+<script setup>
+import { formatToBRLCurrency } from "src/helpers/utils";
+
+defineProps({
+  pkg: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<style scoped>
+.package-card {
+  border-radius: 12px;
+}
+</style>

src/router/routes/package.route.js

@@ -0,0 +1,17 @@
+export default [
+  {
+    path: "/packages",
+    name: "PackagesPage",
+    component: () => import("pages/packages/PackagesPage.vue"),
+    meta: {
+      title: "Pacotes",
+      requireAuth: true,
+      breadcrumbs: [
+        {
+          name: "PackagesPage",
+          title: "Pacotes",
+        },
+      ],
+    },
+  },
+];

src/stores/navigation.js

@@ -22,20 +22,28 @@ export const navigationStore = defineStore("navigation", () => {
     },
     {
       type: "single",
-      title: "Usuários",
-      name: "UsersPage",
-      icon: "mdi-account-multiple-outline",
-      disable: false,
-      permission: true,
-    },
-    {
-      type: "single",
-      title: "Dados da Unidade",
-      name: "UnitEditPage",
-      icon: "mdi-cog-outline",
+      title: "Pacotes",
+      name: "PackagesPage",
+      icon: "mdi-package-variant-closed",
       disable: false,
       permission: true,
     },
+    // {
+    //   type: "single",
+    //   title: "Usuários",
+    //   name: "UsersPage",
+    //   icon: "mdi-account-multiple-outline",
+    //   disable: false,
+    //   permission: true,
+    // },
+    // {
+    //   type: "single",
+    //   title: "Dados da Unidade",
+    //   name: "UnitEditPage",
+    //   icon: "mdi-cog-outline",
+    //   disable: false,
+    //   permission: true,
+    // },
   ]);
 
   const getNavigationAccess = () => {