feat(products): adiciona pesquisa e botao de adicionar

src/pages/products/ProductsPage.vue

@@ -6,8 +6,41 @@
       <CustomTabComponent
         v-model:active-tab="currentTab"
         :tabs="tabs"
-        class="q-mb-md"
+        class="q-mb-sm"
       />
+      <div class="row items-center justify-between q-mb-md" style="gap: 12px">
+        <q-input
+          v-model="search"
+          dense
+          outlined
+          bg-color="white"
+          placeholder="Buscar produto..."
+          style="width: 480px"
+        >
+          <template #prepend>
+            <q-icon name="mdi-magnify" />
+          </template>
+        </q-input>
+        <div class="row items-center" style="gap: 8px">
+          <q-pagination
+            v-model="currentPage"
+            :max="totalPages"
+            :max-pages="5"
+            boundary-numbers
+            direction-links
+            color="primary"
+            active-color="primary"
+          />
+          <q-btn
+            v-if="currentTab === 'products'"
+            color="primary-2"
+            style="height: 40px; width: 40px; min-width: 40px"
+            @click="handleAdd"
+          >
+            <q-icon name="mdi-plus" color="white" size="20px" />
+          </q-btn>
+        </div>
+      </div>
 
       <div v-show="currentTab === 'products'">
         <ProductsTab />
@@ -35,10 +68,17 @@ const StockTab = defineAsyncComponent(() => import("./tabs/StockTab.vue"));
 const OrdersTab = defineAsyncComponent(() => import("./tabs/OrdersTab.vue"));
 
 const currentTab = ref("products");
+const search = ref("");
+const currentPage = ref(1);
+const totalPages = ref(1);
 
 const tabs = [
   { name: "products", label: "Produtos" },
   { name: "stock", label: "Estoque" },
   { name: "orders", label: "Pedidos" },
 ];
+
+const handleAdd = () => {
+  // ação de adicionar
+};
 </script>