sfp_vue_franchisor_ginastica_cerebro/src/components/financial/FranchisePerformanceCard.vue

<template>
  <q-card class="franchise-performance-card">
    <div class="row justify-between items-center no-wrap">
      <span class="text-subtitle1 text-dark">Desempenho por Franquia</span>
      <q-btn color="primary" label="Exportar Relatório" icon="mdi-download" unelevated no-caps />
    </div>

    <q-table
      flat
      dense
      :rows="rows"
      :columns="columns"
      :loading="loading"
      row-key="id"
      :pagination="{ rowsPerPage: 0 }"
      hide-pagination
      virtual-scroll
      class="q-mt-md"
      style="max-height: 280px"
    >
      <template #body-cell-revenue="{ row }">
        <q-td align="left">{{ formatCurrency(row.revenue) }}</q-td>
      </template>

      <template #body-cell-expense="{ row }">
        <q-td align="left">{{ formatCurrency(row.expense) }}</q-td>
      </template>

      <template #body-cell-performance="{ row }">
        <q-td align="left">
          <span :class="row.performance >= 0 ? 'text-positive' : 'text-negative'">
            {{ row.performance }}%
          </span>
        </q-td>
      </template>

      <template #no-data>
        <div class="full-width text-center text-caption text-foreground q-py-md">
          Nenhum dado encontrado
        </div>
      </template>
    </q-table>
  </q-card>
</template>

<script setup>
defineProps({
  rows: { type: Array, default: () => [] },
  loading: { type: Boolean, default: false },
});

const formatCurrency = (value) =>
  new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(value ?? 0);

const columns = [
  { name: "franchise", label: "Franquia", field: "franchise", align: "left" },
  { name: "revenue", label: "Faturamento", field: "revenue", align: "left" },
  { name: "expense", label: "Despesa", field: "expense", align: "left" },
  { name: "performance", label: "Desempenho", field: "performance", align: "left" },
];
</script>

<style scoped lang="scss">
.franchise-performance-card {
  flex: 1 1 0;
  min-width: 220px;
  height: 380px;
  border-radius: 12px;
  box-shadow: 0 0 0 1px #c0c0c0c0 !important;
  padding: 16px 20px;
  overflow: hidden;
}
</style>