feat: adiciona card de ultimas movimentacoes

src/components/financial/LastTransactionsCard.vue

@@ -0,0 +1,85 @@
+<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"
+      row-key="id"
+      :pagination="{ rowsPerPage: 0 }"
+      hide-pagination
+      virtual-scroll
+      class="transactions-table q-mt-sm"
+      style="max-height: 280px"
+    >
+      <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>
+const rows = [];
+
+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;
+  border-radius: 12px;
+  box-shadow: 0 0 0 1px #c0c0c0c0 !important;
+  padding: 16px 20px;
+}
+
+.transactions-table {
+  border-radius: 8px;
+}
+</style>

src/pages/financial/FinancialPage.vue

@@ -49,9 +49,7 @@
     </div>
 
     <div class="row q-px-md q-gutter-md q-mt-none">
-      <q-card class="bottom-card">
-        <span class="text-subtitle1 text-dark">Últimas Movimentações</span>
-      </q-card>
+      <LastTransactionsCard />
       <q-card class="bottom-card">
         <span class="text-subtitle1 text-dark">Desempenho por Franquia</span>
       </q-card>
@@ -63,6 +61,7 @@
 import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
 import FinancialCard from "src/components/financial/FinancialCard.vue";
 import TreasuryCard from "src/components/financial/TreasuryCard.vue";
+import LastTransactionsCard from "src/components/financial/LastTransactionsCard.vue";
 </script>
 
 <style scoped>