feat(products): update permissions for product management and enhance UI controls

src/pages/permissions/permission_menus.js

@@ -52,7 +52,7 @@ export const FRANCHISOR_PERMISSION_MENUS = Object.freeze([
     label: "Pacotes",
     icon: "mdi-package-variant-closed",
   },
-  { scope: "product", label: "Produtos", icon: "mdi-cart-outline" },
+  { scope: "franchisor_products", label: "Produtos", icon: "mdi-cart-outline" },
   { scope: "tbr", label: "TBR", icon: "mdi-database-outline" },
   {
     scope: "financial",

src/pages/products/ProductsPage.vue

@@ -32,7 +32,7 @@
             active-color="primary"
           />
           <q-btn
-            v-if="currentTab === 'products'"
+            v-if="currentTab === 'products' && canAdd"
             color="primary-2"
             style="height: 40px; width: 40px; min-width: 40px"
             @click="handleAdd"
@@ -41,7 +41,7 @@
           </q-btn>
 
           <q-btn
-            v-if="currentTab === 'orders'"
+            v-if="currentTab === 'orders' && canAdd"
             label="Importar"
             color="primary-2"
             icon="mdi-file-import-outline"
@@ -69,6 +69,7 @@
 <script setup>
 import { defineAsyncComponent, ref, shallowRef, watch } from "vue";
 import { useQuasar } from "quasar";
+import { permissionStore } from "src/stores/permission";
 
 import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
 import CustomTabComponent from "src/components/shared/CustomTabComponent.vue";
@@ -80,6 +81,8 @@ const StockTab = defineAsyncComponent(() => import("./tabs/StockTab.vue"));
 const OrdersTab = defineAsyncComponent(() => import("./tabs/OrdersTab.vue"));
 
 const currentTab = ref("products");
+const permissions = permissionStore();
+const canAdd = permissions.getAccess("franchisor_products", "add");
 const search = ref("");
 const currentPage = ref(1);
 const totalPages = ref(1);

src/pages/products/components/ProductCard.vue

@@ -37,8 +37,8 @@
           </div>
           <slot name="details" />
           <div class="row justify-end" style="gap: 4px; margin-top: 4px">
-            <q-btn flat dense round icon="mdi-pencil" color="primary" size="sm" @click.stop="$emit('edit')" />
-            <q-btn flat dense round icon="mdi-delete" color="negative" size="sm" @click.stop="$emit('delete')" />
+            <q-btn v-if="canEdit" flat dense round icon="mdi-pencil" color="primary" size="sm" @click.stop="$emit('edit')" />
+            <q-btn v-if="canDelete" flat dense round icon="mdi-delete" color="negative" size="sm" @click.stop="$emit('delete')" />
           </div>
         </div>
       </q-card-section>
@@ -55,6 +55,8 @@ const expanded = ref(false);
 defineEmits(["edit", "delete"]);
 
 defineProps({
+  canEdit: { type: Boolean, default: false },
+  canDelete: { type: Boolean, default: false },
   title: {
     type: String,
     default: "titulo",

src/pages/products/tabs/ProductsTab.vue

@@ -13,6 +13,8 @@
         :unit-price="product.price_sale"
         :current-stock="product.quantity"
         :total-value="product.price_sale * product.quantity"
+        :can-edit="canEdit"
+        :can-delete="canDelete"
         @edit="handleEdit(product)"
         @delete="handleDelete(product)"
       />
@@ -30,8 +32,12 @@ import { useQuasar } from "quasar";
 import ProductCard from "../components/ProductCard.vue";
 import AddEditProductDialog from "../components/AddEditProductDialog.vue";
 import { getProducts, deleteProduct } from "src/api/product";
+import { permissionStore } from "src/stores/permission";
 
 const $q = useQuasar();
+const permissions = permissionStore();
+const canEdit = permissions.getAccess("franchisor_products", "edit");
+const canDelete = permissions.getAccess("franchisor_products", "delete");
 
 const products = ref([]);
 const loading = ref(false);

src/pages/products/tabs/StockTab.vue

@@ -8,6 +8,7 @@
   >
     <template #body-cell-actions="{ row }">
       <q-btn
+        v-if="canEdit"
         flat
         dense
         round
@@ -25,11 +26,13 @@ import { ref } from "vue";
 import { useQuasar } from "quasar";
 import { formatToBRLCurrency } from "src/helpers/utils";
 import { getProducts } from "src/api/product";
+import { permissionStore } from "src/stores/permission";
 
 import DefaultTable from "src/components/defaults/DefaultTable.vue";
 import AddEditStockProductDialog from "../components/AddEditStockProductDialog.vue";
 
 const $q = useQuasar();
+const canEdit = permissionStore().getAccess("franchisor_products", "edit");
 const tableRef = ref(null);
 
 const columns = [

src/router/routes/product.route.js

@@ -9,6 +9,7 @@ export default [
         translate: false,
       },
       requireAuth: true,
+      requiredPermission: "franchisor_products",
       breadcrumbs: [
         {
           name: "DashboardPage",

src/stores/navigation.js

@@ -39,7 +39,7 @@ export const navigationStore = defineStore("navigation", () => {
       icon: "mdi-cart-outline",
       disable: false,
       permission: false,
-      permissionScope: "dashboard",
+      permissionScope: "franchisor_products",
     },
     {
       type: "single",