feat(products): adiciona tab de produtos, estoque e pedidos

src/pages/products/ProductsPage.vue

@@ -1,9 +1,44 @@
 <template>
   <div>
     <DefaultHeaderPage title="Produtos" :show-filter-icon="false" />
+
+    <div class="q-px-sm">
+      <CustomTabComponent
+        v-model:active-tab="currentTab"
+        :tabs="tabs"
+        class="q-mb-md"
+      />
+
+      <div v-show="currentTab === 'products'">
+        <ProductsTab />
+      </div>
+
+      <div v-show="currentTab === 'stock'">
+        <StockTab />
+      </div>
+
+      <div v-show="currentTab === 'orders'">
+        <OrdersTab />
+      </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 ProductsTab = defineAsyncComponent(() => import("./tabs/ProductsTab.vue"));
+const StockTab = defineAsyncComponent(() => import("./tabs/StockTab.vue"));
+const OrdersTab = defineAsyncComponent(() => import("./tabs/OrdersTab.vue"));
+
+const currentTab = ref("products");
+
+const tabs = [
+  { name: "products", label: "Produtos" },
+  { name: "stock", label: "Estoque" },
+  { name: "orders", label: "Pedidos" },
+];
 </script>

src/pages/products/tabs/OrdersTab.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>OrdersTab</div>
+</template>

src/pages/products/tabs/ProductsTab.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>ProductsTab</div>
+</template>

src/pages/products/tabs/StockTab.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>StockTab</div>
+</template>