style: adiciona padding sm inves de md

src/components/charts/DashboardStatCard.vue

@@ -0,0 +1,67 @@
+<template>
+  <q-card class="stat-card">
+    <div class="flex justify-between items-start no-wrap">
+      <span class="text-subtitle2 text-dark">{{ title }}</span>
+      <q-icon :name="icon" size="22px" color="dark" />
+    </div>
+
+    <div class="value-area">
+      <span class="text-h5 text-primary value-text">{{ value }}</span>
+
+      <q-badge
+        v-if="badge"
+        :color="badgeColor"
+        :label="badge"
+        :style="customStyle"
+        class="stat-badge"
+      />
+      <span v-else-if="subtitle" class="text-caption text-foreground">{{
+        subtitle
+      }}</span>
+    </div>
+  </q-card>
+</template>
+
+<script setup>
+defineProps({
+  title: { type: String, required: true },
+  icon: { type: String, default: "mdi-information-outline" },
+  value: { type: [String, Number], required: true },
+  subtitle: { type: String, default: "" },
+  badge: { type: String, default: "" },
+  badgeColor: { type: String, default: "accent-1" },
+  customStyle: { type: String, default: "padding: 4px" },
+});
+</script>
+
+<style scoped lang="scss">
+.stat-card {
+  flex: 1 1 0;
+  min-width: 0;
+  height: 140px;
+  border-radius: 12px;
+  box-shadow: 0 0 0 1px #c0c0c0c0 !important;
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.value-area {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.value-text {
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.stat-badge {
+  font-size: 12px;
+  border-radius: 8px;
+  width: fit-content;
+  color: $primary;
+}
+</style>

src/css/quasar.variables.scss

@@ -53,6 +53,10 @@ $colors: (
   "declined-4": #ffcecf,
 
   "warning": #BF6A02,
+
+  "accent-1": #E38B37,
+
+  "foreground": #505050,
 );
 
 @each $name, $color in $colors {

src/pages/dashboard/DashboardPage.vue

@@ -29,77 +29,35 @@
       </template>
     </DefaultHeaderPage>
 
-    <div class="q-pa-md">
-      <!-- Row 1: Stats -->
-      <div class="row q-col-gutter-md q-mb-md">
-        <div class="col-12 col-sm-6 col-lg-3">
-          <q-card flat bordered>
-            <q-card-section class="row justify-between items-start q-pb-none">
-              <span class="text-caption text-grey-6"
-                >Total alunos (contratos ativos)</span
-              >
-              <q-icon name="mdi-account-multiple" color="grey-4" size="sm" />
-            </q-card-section>
-            <q-card-section class="q-pt-sm">
-              <div class="text-h5 text-bold">0</div>
-              <q-badge
-                color="orange"
-                class="q-mt-sm q-pa-xs"
-                style="font-size: 11px"
-              >
-                0 ativos
-              </q-badge>
-            </q-card-section>
-          </q-card>
-        </div>
-
-        <div class="col-12 col-sm-6 col-lg-3">
-          <q-card flat bordered>
-            <q-card-section class="row justify-between items-start q-pb-none">
-              <span class="text-caption text-grey-6">Receita Total</span>
-              <q-icon name="mdi-currency-usd" color="grey-4" size="sm" />
-            </q-card-section>
-            <q-card-section class="q-pt-sm">
-              <div class="text-h5 text-bold">R$ 0,00</div>
-              <div class="text-caption text-grey-5 q-mt-sm">
-                0 pagamentos pendentes
-              </div>
-            </q-card-section>
-          </q-card>
-        </div>
-
-        <div class="col-12 col-sm-6 col-lg-3">
-          <q-card flat bordered>
-            <q-card-section class="row justify-between items-start q-pb-none">
-              <span class="text-caption text-grey-6">Ticket Médio</span>
-              <q-icon name="mdi-receipt-outline" color="grey-4" size="sm" />
-            </q-card-section>
-            <q-card-section class="q-pt-sm">
-              <div class="text-h5 text-bold">R$ 12,00</div>
-              <div class="text-caption text-grey-5 q-mt-sm">Estável</div>
-            </q-card-section>
-          </q-card>
-        </div>
-
-        <div class="col-12 col-sm-6 col-lg-3">
-          <q-card flat bordered>
-            <q-card-section class="row justify-between items-start q-pb-none">
-              <span class="text-caption text-grey-6">Aniversariantes</span>
-              <q-icon name="mdi-emoticon-outline" color="grey-4" size="sm" />
-            </q-card-section>
-            <q-card-section class="q-pt-sm">
-              <div class="text-h5 text-bold">0</div>
-              <div class="text-caption text-grey-5 q-mt-sm">
-                Fortaleça seus relacionamentos
-              </div>
-            </q-card-section>
-          </q-card>
-        </div>
+    <div class="q-pa-sm">
+      <div class="stat-cards-row q-mb-md">
+        <DashboardStatCard
+          title="Total alunos (contratos ativos)"
+          icon="mdi-account-multiple-outline"
+          value="0"
+          badge="0 ativos"
+        />
+        <DashboardStatCard
+          title="Receita Total"
+          icon="mdi-currency-usd"
+          value="R$ 0,00"
+          subtitle="0 pagamentos pendentes"
+        />
+        <DashboardStatCard
+          title="Ticket Médio"
+          icon="mdi-calendar-blank"
+          value="R$ 12,00"
+          subtitle="Estável"
+        />
+        <DashboardStatCard
+          title="Aniversariantes"
+          icon="mdi-emoticon-happy-outline"
+          value="0"
+          subtitle="Fortaleça seus relacionamentos"
+        />
       </div>
 
-      <!-- Row 2: Charts -->
       <div class="row q-col-gutter-md q-mb-md">
-        <!-- Faturamento Serviço / Materiais -->
         <div class="col-12 col-md-5">
           <q-card flat bordered style="height: 280px">
             <q-card-section class="row justify-between items-center q-pb-xs">
@@ -118,7 +76,6 @@
           </q-card>
         </div>
 
-        <!-- Contratos Ativos -->
         <div class="col-12 col-md-4">
           <q-card flat bordered style="height: 280px">
             <q-card-section class="row justify-between items-center q-pb-xs">
@@ -147,7 +104,6 @@
           </q-card>
         </div>
 
-        <!-- Atalhos rápidos -->
         <div class="col-12 col-md-3">
           <q-card flat bordered style="height: 280px">
             <q-card-section class="row justify-between items-center q-pb-xs">
@@ -186,7 +142,6 @@
 
       <!-- Row 3: Bottom -->
       <div class="row q-col-gutter-md">
-        <!-- Matrículas por Período -->
         <div class="col-12 col-md-4">
           <q-card flat bordered style="height: 320px">
             <q-card-section class="row justify-between items-center q-pb-xs">
@@ -209,7 +164,6 @@
           </q-card>
         </div>
 
-        <!-- Aniversariantes do Mês -->
         <div class="col-12 col-md-4">
           <q-card flat bordered style="height: 320px">
             <q-card-section class="row justify-between items-center q-pb-xs">
@@ -271,7 +225,6 @@
           </q-card>
         </div>
 
-        <!-- Feriados do mês -->
         <div class="col-12 col-md-4">
           <q-card flat bordered style="height: 320px">
             <q-card-section class="row justify-between items-center q-pb-xs">
@@ -331,6 +284,7 @@ import {
 } from "chart.js";
 import ChartDataLabels from "chartjs-plugin-datalabels";
 import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
+import DashboardStatCard from "src/components/charts/DashboardStatCard.vue";
 
 ChartJS.register(
   Title,
@@ -342,7 +296,6 @@ ChartJS.register(
   ArcElement,
 );
 
-// ── Faturamento Serviço / Materiais ───────────────────────────────────────────
 const faturamentoData = ref({
   labels: [
     "17/02",
@@ -390,7 +343,6 @@ const faturamentoOptions = ref({
   },
 });
 
-// ── Contratos Ativos (gauge) ──────────────────────────────────────────────────
 const gaugeData = ref({
   datasets: [
     {
@@ -457,7 +409,6 @@ const gaugeNeedlePlugin = {
   },
 };
 
-// ── Matrículas por Período ────────────────────────────────────────────────────
 const matriculasData = ref({
   labels: ["JAN", "FEV", "MAR", "ABR", "MAI", "JUN"],
   datasets: [
@@ -505,7 +456,6 @@ const matriculasOptions = ref({
   },
 });
 
-// ── Aniversariantes do Mês ────────────────────────────────────────────────────
 const aniversariantes = ref([
   { nome: "Heloisa Faria", color: "orange" },
   { nome: "Juliana Costa", color: "green" },
@@ -515,7 +465,6 @@ const aniversariantes = ref([
   { nome: "Sofia Martins", color: "teal" },
 ]);
 
-// ── Feriados do mês ───────────────────────────────────────────────────────────
 const feriados = ref([
   { dia: 17, nome: "Carnaval", color: "amber" },
   { dia: 17, nome: "Carnaval", color: "amber" },
@@ -524,6 +473,26 @@ const feriados = ref([
 </script>
 
 <style scoped>
+.stat-cards-row {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 16px;
+}
+
+.stat-cards-row > * {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+@media (max-width: 599px) {
+  .stat-cards-row {
+    flex-wrap: wrap;
+  }
+  .stat-cards-row > * {
+    flex: 1 1 calc(50% - 8px);
+  }
+}
+
 .gauge-label {
   position: absolute;
   bottom: 28%;