feat: adiciona pagina de Financeiro

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

@@ -14,7 +14,7 @@
       :pagination="{ rowsPerPage: 0 }"
       hide-pagination
       virtual-scroll
-      class="transactions-table q-mt-sm"
+      class="transactions-table q-mt-md"
       style="max-height: 280px"
     >
       <template #body-cell-status="{ row }">
@@ -74,9 +74,11 @@ const statusColor = (status) => {
 .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 {

src/pages/financial/FinancialPage.vue

@@ -50,9 +50,7 @@
 
     <div class="row q-px-md q-gutter-md q-mt-none">
       <LastTransactionsCard />
-      <q-card class="bottom-card">
-        <span class="text-subtitle1 text-dark">Desempenho por Franquia</span>
-      </q-card>
+      <FranchisePerformanceCard />
     </div>
   </div>
 </template>
@@ -62,15 +60,5 @@ 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>