sfp_vue_franchisor_ginastica_cerebro/src/components/charts/DashboardChartCard.vue

<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')"
      />
    </div>
    <div class="chart-slot-wrapper">
      <slot />
    </div>
  </q-card>
</template>

<script setup>
defineProps({
  title: { type: String, required: true },
});

defineEmits(["export"]);
</script>

<style scoped>
.dashboard-chart-card {
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.chart-slot-wrapper {
  flex: 1;
  min-height: 220px;
  position: relative;
}
</style>