feat(dashboard): enhance DashboardStatCard with dynamic badges for student statuses

src/components/charts/DashboardStatCard.vue

@@ -8,8 +8,18 @@
     <div class="value-area">
       <span class="text-h5 value-text" :class="valueColor ? `text-${valueColor}` : 'text-primary'">{{ value }}</span>
 
+      <div v-if="badges && badges.length" class="stat-badges">
+        <q-badge
+          v-for="badgeItem in badges"
+          :key="badgeItem.label"
+          :color="badgeItem.color || badgeColor"
+          :label="badgeItem.label"
+          :style="customStyle"
+          class="stat-badge"
+        />
+      </div>
       <q-badge
-        v-if="badge"
+        v-else-if="badge"
         :color="badgeColor"
         :label="badge"
         :style="customStyle"
@@ -29,6 +39,7 @@ defineProps({
   value: { type: [String, Number], required: true },
   subtitle: { type: String, default: "" },
   badge: { type: String, default: "" },
+  badges: { type: Array, default: () => [] },
   badgeColor: { type: String, default: "accent-1" },
   valueColor: { type: String, default: "" },
   customStyle: { type: String, default: "padding: 4px" },
@@ -59,6 +70,12 @@ defineProps({
   line-height: 1.2;
 }
 
+.stat-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
 .stat-badge {
   font-size: 12px;
   border-radius: 8px;

src/pages/dashboard/DashboardPage.vue

@@ -5,11 +5,11 @@
     <div class="q-pa-sm">
       <div class="stat-cards-row q-mb-md">
         <DashboardStatCard
-          :badge="`${totalAlunos} ativos`"
+          :badges="studentsStatusBadges"
           :value="String(totalAlunos)"
           :value-color="activeStudentsColor"
           icon="mdi-account-multiple-outline"
-          title="Total alunos (contratos ativos)"
+          title="Total alunos"
         />
 
         <!-- TODO: usar dados reais de receita (zerado por enquanto). -->
@@ -299,6 +299,7 @@ const allHolidays = ref([]);
 const aniversariantes = ref([]);
 const feriadosLoading = ref(false);
 const students = ref([]);
+const studentsByStatus = ref({ active: 0, ex_student: 0, lead: 0, locked: 0 });
 const totalAlunos = ref(0);
 const unitConfig = ref({
   active_students_min: 30,
@@ -316,6 +317,13 @@ const activeStudentsColor = computed(() => {
   return "positive"; // Verde (>= med)
 });
 
+const studentsStatusBadges = computed(() => [
+  { color: "info", label: `${studentsByStatus.value.lead} Lead` },
+  { color: "positive", label: `${studentsByStatus.value.active} Ativo` },
+  { color: "grey", label: `${studentsByStatus.value.ex_student} Ex-aluno` },
+  { color: "warning", label: `${studentsByStatus.value.locked} Trancado` },
+]);
+
 const gaugeData = ref({
   datasets: [
     {
@@ -555,6 +563,7 @@ const fetchSummary = async () => {
     activeContracts.value = summary.contracts.active;
     aniversariantes.value = summary.birthdays;
     students.value = summary.enrollments;
+    studentsByStatus.value = summary.students_by_status ?? studentsByStatus.value;
     totalAlunos.value = summary.students_count;
 
     if (summary.unit_config) {