feat: adiciona cores corretas, e tamanho de cards

src/components/charts/DashboardChartCard.vue

@@ -1,16 +1,8 @@
 <template>
   <q-card flat class="dashboard-chart-card card-ring">
     <div class="flex justify-between items-center no-wrap q-mb-sm">
-      <span class="text-subtitle2 text-weight-medium">{{ title }}</span>
-      <q-btn
-        flat
-        round
-        dense
-        icon="mdi-book-open-outline"
-        color="grey-6"
-        size="sm"
-        @click="$emit('export')"
-      />
+      <span class="text-subtitle2 text-weight-regular">{{ title }}</span>
+      <q-icon :name="icon" color="dark" size="sm" />
     </div>
     <div class="chart-slot-wrapper">
       <slot />
@@ -19,8 +11,9 @@
 </template>
 
 <script setup>
-defineProps({
+const { title, icon } = defineProps({
   title: { type: String, required: true },
+  icon: { type: String, default: "mdi-book-open-blank-variant-outline" },
 });
 
 defineEmits(["export"]);

src/components/charts/DashboardStatCard.vue

@@ -1,14 +1,12 @@
 <template>
-  <q-card class="stat-card q-pa-lg">
-    <div class="column full-width" style="gap: 8px">
-      <div class="flex justify-between items-start no-wrap">
-        <span class="text-body2 text-grey-6">{{ title }}</span>
-        <q-icon :name="icon" size="22px" color="grey-5" />
-      </div>
+  <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>
 
-      <span class="text-h4 text-primary" style="font-weight: 600; line-height: 1.2">
-        {{ value }}
-      </span>
+    <div class="value-area">
+      <span class="text-h5 text-primary value-text">{{ value }}</span>
 
       <q-badge
         v-if="badge"
@@ -16,7 +14,9 @@
         :label="badge"
         class="stat-badge"
       />
-      <span v-else class="text-caption text-grey-6">{{ subtitle }}</span>
+      <span v-else-if="subtitle" class="text-caption text-foreground">{{
+        subtitle
+      }}</span>
     </div>
   </q-card>
 </template>
@@ -28,21 +28,39 @@ defineProps({
   value: { type: [String, Number], required: true },
   subtitle: { type: String, default: "" },
   badge: { type: String, default: "" },
-  badgeColor: { type: String, default: "secondary" },
+  badgeColor: { type: String, default: "accent-1" },
 });
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .stat-card {
-  flex: 1 1 200px;
-  border-radius: 8px;
+  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: 0.75rem;
-  padding: 4px 8px;
-  border-radius: 4px;
+  font-size: 12px;
+  padding: 4px;
+  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

@@ -163,7 +163,7 @@
       <div class="stat-cards-row">
         <DashboardStatCard
           title="Total alunos (contratos ativos)"
-          icon="mdi-account-multiple"
+          icon="mdi-account-multiple-outline"
           value="4.527"
           badge="3.200 ativos"
         />
@@ -277,16 +277,13 @@ const periodOptions = [
   { label: "Personalizado", value: "custom" },
 ];
 
-// --- Aniversariantes do Mês (hardcoded) ---
 const aniversariantes = [
   { day: 10, name: "Heloisa Faria" },
   { day: 7, name: "Juliana Costa" },
   { day: 24, name: "Fernando Almeida" },
   { day: 28, name: "Patrícia Lima" },
 ];
-// -------------------------------------------
 
-// --- Matrículas por Período (hardcoded) ---
 const matriculasChart = {
   labels: ["JAN", "FEV", "MAR", "ABR", "MAI", "JUN"],
   datasets: [
@@ -297,21 +294,32 @@ const matriculasChart = {
     },
   ],
 };
-// ---------------------------------------------------
 
-// --- Faturamento Serviço / Materiais (hardcoded) ---
 const faturamentoChart = {
-  labels: ["17/02", "18/02", "19/02", "20/02", "21/02", "22/02", "23/02", "24/02", "25/02", "26/02"],
+  labels: [
+    "17/02",
+    "18/02",
+    "19/02",
+    "20/02",
+    "21/02",
+    "22/02",
+    "23/02",
+    "24/02",
+    "25/02",
+    "26/02",
+  ],
   datasets: [
     {
       label: "Serviço",
-      data: [18500, 21000, 16400, 22300, 19800, 17200, 15800, 24100, 20500, 27600],
-      color: "#7C3AED",
+      data: [
+        18500, 21000, 16400, 22300, 19800, 17200, 15800, 24100, 20500, 27600,
+      ],
+      color: "#a274f1",
     },
     {
       label: "Materiais",
       data: [9200, 10500, 8100, 11400, 9800, 8400, 8700, 12200, 10100, 13100],
-      color: "#EC4899",
+      color: "#ff9999",
     },
   ],
 };
@@ -325,7 +333,6 @@ const formatCurrencyTooltip = (context) => {
   const value = context.parsed.y;
   return ` ${context.dataset.label}: R$ ${value.toLocaleString("pt-BR", { minimumFractionDigits: 2 })}`;
 };
-// ---------------------------------------------------
 
 const ordersChart = ref({});
 const participantsChart = ref({});
@@ -502,18 +509,21 @@ onMounted(async () => {
 
 .stat-cards-row {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   gap: 16px;
 }
 
 .stat-cards-row > * {
-  flex: 1 1 200px;
-  min-width: 180px;
+  flex: 1 1 0;
+  min-width: 0;
 }
 
 @media (max-width: 599px) {
+  .stat-cards-row {
+    flex-wrap: wrap;
+  }
   .stat-cards-row > * {
-    flex: 1 1 100%;
+    flex: 1 1 calc(50% - 8px);
   }
 }