sfp_vue_franchisor_ginastica_cerebro/src/components/financial/LastTransactionsCard.vue

<template>
  <q-card class="last-transactions-card">
    <div class="row justify-between items-center no-wrap">
      <span class="text-subtitle1 text-dark">Últimas Movimentações</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="transactions-table q-mt-md"
      style="max-height: 280px"
    >
      <template #body-cell-value="{ row }">
        <q-td align="left">{{ formatCurrency(row.value) }}</q-td>
      </template>

      <template #body-cell-status="{ row }">
        <q-td align="left">
          <q-badge
            :color="statusColor(row.status)"
            :label="row.status"
            style="padding: 4px 8px"
          />
        </q-td>
      </template>

      <template #no-data>
        <div class="full-width text-center text-caption text-foreground q-py-md">
          Nenhuma movimentação encontrada
        </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: "description",
    label: "Descrição",
    field: "description",
    align: "left",
  },
  {
    name: "value",
    label: "Valor",
    field: "value",
    align: "left",
  },
  {
    name: "status",
    label: "Status",
    field: "status",
    align: "left",
  },
];

const statusColor = (status) => {
  const map = {
    Pago: "positive",
    Pendente: "warning",
    Cancelado: "negative",
  };
  return map[status] ?? "grey";
};
</script>

<style scoped lang="scss">
.last-transactions-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;
}

.transactions-table {
  border-radius: 8px;
}
</style>