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-regular">{{ title }}</span>
      <q-icon :name="icon" color="dark" size="sm" />
    </div>
    <div class="chart-slot-wrapper">
      <slot />
    </div>
  </q-card>
</template>

<script setup>
const { title, icon } = defineProps({
  title: { type: String, required: true },
  icon: { type: String, default: "mdi-book-open-blank-variant-outline" },
});

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

<style scoped>
.dashboard-chart-card {
  border-radius: 12px;
  padding: 20px 28px 24px 28px;
  display: flex;
  flex-direction: column;
  max-height: 370px;
}

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