feat: dialog de estoque de produto

src/pages/dashboard/DashboardPage.vue

@@ -236,6 +236,8 @@
           title="Estoque Geral de Produtos"
           icon="mdi-currency-usd"
           value="56"
+          clickable
+          @click="openEstoqueProdutosDialog"
         />
         <DashboardStatCard
           title="Tarefas Pendentes"
@@ -272,6 +274,7 @@ import AlunosAtivosDialog from "src/pages/dashboard/components/AlunosAtivosDialo
 import ContratosCongeladosDialog from "src/pages/dashboard/components/ContratosCongeladosDialog.vue";
 import ContratosCanceladosDialog from "src/pages/dashboard/components/ContratosCanceladosDialog.vue";
 import FrequenciaMediaDialog from "src/pages/dashboard/components/FrequenciaMediaDialog.vue";
+import EstoqueProdutosDialog from "src/pages/dashboard/components/EstoqueProdutosDialog.vue";
 
 const { t } = useI18n();
 
@@ -293,6 +296,10 @@ const openContratosCanceladosDialog = () => {
 const openFrequenciaMediaDialog = () => {
   $q.dialog({ component: FrequenciaMediaDialog });
 };
+
+const openEstoqueProdutosDialog = () => {
+  $q.dialog({ component: EstoqueProdutosDialog });
+};
 const selectedUnit = ref(null);
 const defaultPeriod = ref("month");
 const defaultEventId = ref(1);

src/pages/dashboard/components/EstoqueProdutosDialog.vue

@@ -0,0 +1,98 @@
+<template>
+  <q-dialog ref="dialogRef" @hide="onDialogHide">
+    <q-card style="width: 600px; max-width: 95vw; border-radius: 12px">
+      <q-bar class="bg-transparent q-px-md" style="height: 55px">
+        <span class="text-h6 text-dark" style="font-weight: 600"
+          >Estoque de Produtos</span
+        >
+        <q-space />
+        <q-btn dense flat icon="mdi-close" @click="onDialogCancel" />
+      </q-bar>
+
+      <q-card-section class="q-pt-none q-pb-lg q-px-md">
+        <q-card flat bordered style="border-radius: 8px; padding: 20px">
+          <div class="text-subtitle1 text-dark q-mb-md" style="font-weight: 600">
+            Meu Estoque
+          </div>
+
+          <q-card flat bordered style="border-radius: 8px">
+            <div class="list-header q-px-md q-py-xs">
+              <span class="text-caption text-grey-7">Produto</span>
+              <span class="text-caption text-grey-7">Estoque</span>
+              <span class="text-caption text-grey-7">Ações</span>
+            </div>
+
+            <q-separator />
+
+            <template v-for="(item, index) in produtos" :key="item.id">
+              <div class="list-row q-px-md q-py-sm">
+                <span class="text-body2 text-dark">{{ item.nome }}</span>
+                <div class="row items-center" style="gap: 12px">
+                  <span class="text-body2 text-dark">{{ item.quantidade }}</span>
+                  <q-badge
+                    :label="item.status"
+                    :outline="item.status === 'Limitado'"
+                    :color="statusColor(item.status)"
+                    style="border-radius: 8px; font-size: 11px; padding: 4px 10px"
+                  />
+                </div>
+                <div class="row" style="gap: 6px">
+                  <q-btn
+                    flat
+                    dense
+                    icon="mdi-clipboard-outline"
+                    color="dark"
+                    style="border: 1px solid #ccc; border-radius: 6px; width: 34px; height: 34px"
+                  />
+                  <q-btn
+                    flat
+                    dense
+                    icon="mdi-delete-outline"
+                    color="dark"
+                    style="border: 1px solid #ccc; border-radius: 6px; width: 34px; height: 34px"
+                  />
+                </div>
+              </div>
+              <q-separator v-if="index < produtos.length - 1" />
+            </template>
+          </q-card>
+        </q-card>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup>
+import { useDialogPluginComponent } from "quasar";
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide, onDialogCancel } = useDialogPluginComponent();
+
+const produtos = [
+  { id: 1, nome: "Box Viver", quantidade: 14, status: "Baixo" },
+  { id: 2, nome: "Brinquedo 1", quantidade: 100, status: "Alto" },
+  { id: 3, nome: "Brinquedo 2", quantidade: 100, status: "Alto" },
+  { id: 4, nome: "Novo Produto", quantidade: 30, status: "Limitado" },
+];
+
+const statusColor = (status) => {
+  if (status === "Alto") return "primary";
+  if (status === "Baixo") return "orange";
+  return "primary";
+};
+</script>
+
+<style scoped>
+.list-header {
+  display: grid;
+  grid-template-columns: 1fr 1fr 90px;
+  align-items: center;
+}
+
+.list-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr 90px;
+  align-items: center;
+}
+</style>