feat(product_card): adiciona um card de produtos, com expansible

src/pages/products/components/ProductCard.vue

@@ -0,0 +1,87 @@
+<template>
+  <q-card flat bordered class="product-card">
+    <q-expansion-item v-model="expanded" hide-expand-icon>
+      <template #header>
+        <div class="row items-center justify-between full-width q-px-md q-py-sm">
+          <span class="text-subtitle2 text-weight-bold text-primary">
+            {{ title }}
+          </span>
+          <q-icon
+            :name="expanded ? 'mdi-chevron-up' : 'mdi-chevron-down'"
+            size="24px"
+            color="secondary"
+          />
+        </div>
+      </template>
+
+      <q-separator />
+
+      <q-card-section class="q-px-md q-py-sm">
+        <div class="column" style="gap: 8px">
+          <span class="text-caption text-foreground ellipsis-2-lines">
+            {{ description }}
+          </span>
+          <span class="text-body2">
+            Valor: {{ formatToBRLCurrency(unitPrice) }}
+          </span>
+          <div class="row items-center justify-between">
+            <span class="text-body2">Estoque</span>
+            <div class="column items-end" style="gap: 2px">
+              <q-badge color="secondary" text-color="black" :label="currentStock" class="q-px-lg q-py-sm" />
+              <span class="text-body2 text-weight-bold">{{ formatToBRLCurrency(totalValue) }}</span>
+            </div>
+          </div>
+          <slot name="details" />
+        </div>
+      </q-card-section>
+    </q-expansion-item>
+  </q-card>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { formatToBRLCurrency } from "src/helpers/utils";
+
+const expanded = ref(false);
+
+defineProps({
+  title: {
+    type: String,
+    default: "titulo",
+  },
+  description: {
+    type: String,
+    default: "descricao do produto",
+  },
+  unitPrice: {
+    type: Number,
+    default: 0,
+  },
+  currentStock: {
+    type: Number,
+    default: 0,
+  },
+  totalValue: {
+    type: Number,
+    default: 0,
+  },
+});
+</script>
+
+<style scoped>
+.product-card {
+  border-radius: 12px;
+  transition: box-shadow 0.2s;
+}
+
+.product-card:hover {
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+}
+
+.ellipsis-2-lines {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+</style>

src/pages/products/tabs/ProductsTab.vue

@@ -1,3 +1,44 @@
 <template>
-  <div>ProductsTab</div>
+  <div class="column" style="gap: 8px">
+    <ProductCard
+      v-for="product in mockProducts"
+      :key="product.id"
+      :title="product.title"
+      :description="product.description"
+      :unit-price="product.unitPrice"
+      :current-stock="product.currentStock"
+      :total-value="product.totalValue"
+    />
+  </div>
 </template>
+
+<script setup>
+import ProductCard from "../components/ProductCard.vue";
+
+const mockProducts = [
+  {
+    id: 1,
+    title: "Apostila Ginástica Cerebro Vol. 1",
+    description: "Material didático completo com conteúdo para os primeiros 3 meses de prática. Inclui exercícios cognitivos, fichas de avaliação e guia do professor.",
+    unitPrice: 89.9,
+    currentStock: 142,
+    totalValue: 12761.8,
+  },
+  {
+    id: 2,
+    title: "Kit Iniciante",
+    description: "Kit completo para novos alunos contendo apostila, camiseta e carteirinha de identificação.",
+    unitPrice: 159.9,
+    currentStock: 0,
+    totalValue: 0,
+  },
+  {
+    id: 3,
+    title: "Camiseta Oficial GC",
+    description: "Camiseta oficial da Ginástica Cerebro em malha 100% algodão. Disponível nos tamanhos P, M, G e GG.",
+    unitPrice: 49.9,
+    currentStock: 37,
+    totalValue: 1846.3,
+  },
+];
+</script>