feat: adiciona card de aniversariante

src/components/charts/AniversariantesCard.vue

@@ -1,21 +1,33 @@
 <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">Aniversariantes do Mês</span>
-      <q-btn flat round dense icon="mdi-book-open-outline" color="grey-6" size="sm" />
+      <span class="text-subtitle2 text-weight-regular">Aniversariantes do Mês</span>
+      <q-icon name="mdi-cake-variant-outline" color="secondary" size="sm" />
     </div>
 
-    <div class="text-caption text-grey-6 q-mb-xs">Nome</div>
+    <div class="header-row text-caption text-grey-6 q-mb-xs">
+      <div class="flex items-center" style="gap: 4px">
+        <q-icon name="mdi-calendar-outline" size="14px" color="secondary" />
+        <span>Nome</span>
+      </div>
+      <span>Ações</span>
+    </div>
     <q-separator />
 
-    <q-list>
+    <q-list dense>
       <template v-for="(person, index) in people" :key="index">
-        <q-item class="q-px-none q-py-md">
-          <q-item-section avatar>
+        <q-item class="q-px-none person-item">
+          <q-item-section avatar style="min-width: 36px">
             <div class="day-badge">{{ person.day }}</div>
           </q-item-section>
           <q-item-section>
-            <q-item-label>{{ person.name }}</q-item-label>
+            <q-item-label class="text-body2">{{ person.name }}</q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <div class="flex items-center no-wrap" style="gap: 4px">
+              <q-btn flat round dense size="sm" icon="mdi-whatsapp" color="dark" />
+              <q-btn flat round dense size="sm" icon="mdi-email-outline" color="dark" />
+            </div>
           </q-item-section>
         </q-item>
         <q-separator v-if="index < people.length - 1" />
@@ -35,19 +47,32 @@ defineProps({
 
 <style scoped>
 .dashboard-chart-card {
-  border-radius: 8px;
-  padding: 16px;
+  border-radius: 12px;
+  padding: 20px 24px;
   display: flex;
   flex-direction: column;
+  max-height: 370px;
+  overflow: hidden;
+}
+
+.header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.person-item {
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .day-badge {
-  width: 32px;
-  height: 32px;
+  width: 30px;
+  height: 30px;
   border-radius: 50%;
   background-color: #f97316;
   color: #fff;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 600;
   display: flex;
   align-items: center;

src/pages/dashboard/DashboardPage.vue

@@ -280,9 +280,11 @@ const periodOptions = [
 
 const aniversariantes = [
   { day: 10, name: "Heloisa Faria" },
-  { day: 7, name: "Juliana Costa" },
-  { day: 24, name: "Fernando Almeida" },
-  { day: 28, name: "Patrícia Lima" },
+  { day: 11, name: "Juliana Costa" },
+  { day: 16, name: "Juliana Costa" },
+  { day: 23, name: "Fernando Almeida" },
+  { day: 29, name: "Lucas Pereira" },
+  { day: 34, name: "Sofia Martins" },
 ];
 
 const matriculasChart = {
@@ -534,13 +536,18 @@ onMounted(async () => {
   gap: 16px;
 }
 
-.charts-row > * {
+.charts-row > *:nth-child(1) {
   flex: 0 0 calc(41.6667% - 11px);
   min-width: 0;
 }
 
-.charts-row > *:last-child {
-  flex: 0 0 calc(16.6667% - 11px);
+.charts-row > *:nth-child(2) {
+  flex: 0 0 calc(33.3333% - 11px);
+  min-width: 0;
+}
+
+.charts-row > *:nth-child(3) {
+  flex: 0 0 calc(25% - 11px);
   min-width: 0;
 }