src/components/financial/FranchisePerformanceCard.vue

@@ -0,0 +1,50 @@
+<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"
+      row-key="id"
+      :pagination="{ rowsPerPage: 0 }"
+      hide-pagination
+      virtual-scroll
+      class="q-mt-md"
+      style="max-height: 280px"
+    >
+      <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>
+const rows = [];
+
+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>

src/components/financial/LastTransactionsCard.vue

@@ -0,0 +1,87 @@
+<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-md"
+      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;
+  height: 380px;
+  border-radius: 12px;
+  box-shadow: 0 0 0 1px #c0c0c0c0 !important;
+  padding: 16px 20px;
+  overflow: hidden;
+}
+
+.transactions-table {
+  border-radius: 8px;
+}
+</style>

src/pages/financial/FinancialPage.vue

@@ -49,12 +49,8 @@
     </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>
-      <q-card class="bottom-card">
-        <span class="text-subtitle1 text-dark">Desempenho por Franquia</span>
-      </q-card>
+      <LastTransactionsCard />
+      <FranchisePerformanceCard />
     </div>
   </div>
 </template>
@@ -63,15 +59,6 @@
 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";
+import FranchisePerformanceCard from "src/components/financial/FranchisePerformanceCard.vue";
 </script>
-
-<style scoped>
-.bottom-card {
-  flex: 1 1 0;
-  min-width: 220px;
-  min-height: 200px;
-  border-radius: 12px;
-  box-shadow: 0 0 0 1px #c0c0c0c0 !important;
-  padding: 16px 20px;
-}
-</style>