sfp_front_vue_alugap_owner/src/pages/dashboard/components/DashboardMetricCard.vue

<template>
  <q-card :class="['metric-card', `metric-card--${variant}`]" flat>
    <span class="metric-label">
      {{ label }}
    </span>

    <strong class="metric-value">
      {{ value }}
    </strong>

    <span class="metric-caption">
      {{ caption }}
    </span>
  </q-card>
</template>

<script setup>
defineProps({
  caption: { type: String, default:  "" },
  label:   { type: String, required: true },
  value:   { type: String, required: true },
  variant: { type: String, default: "primary" },
});
</script>

<style scoped lang="scss">
.metric-card {
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
  gap:             6px;
  min-height:      106px;
  padding:         16px;
  border:          1px solid #d9e3e7;
  border-radius:   12px;
  background:      #f0f3f5;
  vertical-align:  middle;
}

.metric-card--primary {
  border-top: 3px solid #b7f35a;
}

.metric-card--secondary {
  border-top: 3px solid #84A8A6;
}

.metric-label {
  font-size:   19px;
  font-weight: 400;
  color:       #4D4E4E;
}

.metric-value {
  font-size:   24px;
  line-height: 1.15;
  color:       #111212;
}

.metric-caption {
  font-size: 14px;
  color:     #4D4E4E;
}
</style>