sfp_vue_franchisee_ginastica_cerebro/src/components/financial/FinancialCard.vue

<template>
  <q-card
    class="financial-card"
    :class="{
      'financial-card--selected': selected,
      'financial-card--clickable': clickable,
    }"
    @click="clickable && emit('click')"
  >
    <div class="row justify-between items-start no-wrap">
      <span class="text-subtitle1 text-dark card-title">{{ title }}</span>
      <q-icon :name="icon" size="22px" color="dark" />
    </div>

    <div class="bottom-area">
      <div class="text-h5 text-primary value-text">{{ formattedValue }}</div>

      <template v-if="hasFooter">
        <q-separator class="q-mt-sm q-mb-xs" />
        <div class="row items-center justify-between no-wrap">
          <div class="column" style="gap: 2px">
            <span v-if="percentage !== null" class="text-caption text-foreground">
              {{ hideValues ? "••" : percentage }}% vs o mês anterior
            </span>
            <span v-if="integer !== null" class="text-caption text-foreground">
              {{ hideValues ? "•" : integer }} {{ integerLabel }}
            </span>
          </div>
          <span v-if="description" class="text-caption text-foreground">
            {{ description }}
          </span>
        </div>
      </template>
    </div>
  </q-card>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  title: { type: String, required: true },
  icon: { type: String, default: "mdi-cash-multiple" },
  financialValue: { type: Number, default: 0 },
  legend: { type: String, default: "" },
  percentage: { type: Number, default: null },
  integer: { type: Number, default: null },
  integerLabel: { type: String, default: "pagamentos restantes" },
  description: { type: String, default: "" },
  hideValues: { type: Boolean, default: false },
  clickable: { type: Boolean, default: false },
  selected: { type: Boolean, default: false },
});

const emit = defineEmits(["click"]);

const formattedValue = computed(() =>
  props.hideValues
    ? "R$ ••••"
    : new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(
        props.financialValue,
      ),
);

const hasFooter = computed(
  () => props.percentage !== null || props.integer !== null || !!props.description,
);
</script>

<style scoped lang="scss">
@import "src/css/quasar.variables.scss";

.financial-card--clickable {
  cursor: pointer;

  &:hover {
    box-shadow: 0 0 0 1.5px $primary !important;
  }
}

.financial-card--selected {
  box-shadow: 0 0 0 2px $primary !important;
}

.financial-card {
  flex: 1 1 0;
  min-width: 220px;
  border-radius: 12px;
  box-shadow: 0 0 0 1px #c0c0c0c0 !important;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}

.card-title {
  line-height: 1.3;
}

.bottom-area {
  display: flex;
  flex-direction: column;
}

.value-text {
  font-weight: 600;
  line-height: 1.2;
}
</style>