feat(financial): visão geral com dados reais (resultado, recebido, pago, pendências)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/pages/financial/FinancialPage.vue

@@ -18,26 +18,26 @@
 
     <div class="row q-pa-md q-gutter-md">
       <FinancialCard
-        title="Saldo Bancário"
-        icon="mdi-bank-outline"
-        :financial-value="0"
-        description="Estável"
+        title="Resultado do Mês"
+        icon="mdi-scale-balance"
+        :financial-value="overview.result_month"
+        :description="overview.result_month >= 0 ? 'Positivo' : 'Negativo'"
         :hide-values="!showValues"
       />
       <FinancialCard
-        title="Receita do Mês"
-        icon="mdi-cash-multiple"
-        :financial-value="0"
-        :percentage="0"
-        description="Estável"
+        title="Recebido no Mês"
+        icon="mdi-cash-plus"
+        :financial-value="overview.received_month"
+        :integer="overview.received_month_count"
+        integer-label="recebimentos"
         :hide-values="!showValues"
       />
       <FinancialCard
-        title="Despesas do Mês"
-        icon="mdi-cash-multiple"
-        :financial-value="0"
-        :percentage="0"
-        description="Estável"
+        title="Pago no Mês"
+        icon="mdi-cash-minus"
+        :financial-value="overview.paid_month"
+        :integer="overview.paid_month_count"
+        integer-label="pagamentos"
         :hide-values="!showValues"
       />
     </div>
@@ -46,9 +46,9 @@
       <FinancialCard
         title="Contas a Pagar"
         icon="mdi-cash-minus"
-        :financial-value="0"
-        :integer="0"
-        integer-label="pagamentos pendentes"
+        :financial-value="overview.payable_pending"
+        :integer="overview.payable_pending_count"
+        integer-label="pendentes"
         :hide-values="!showValues"
         clickable
         @click="$router.push({ name: 'AccountsPayablePage' })"
@@ -56,24 +56,57 @@
       <FinancialCard
         title="Contas a Receber"
         icon="mdi-cash-plus"
-        :financial-value="0"
-        :integer="0"
-        integer-label="pagamentos pendentes"
+        :financial-value="overview.receivable_pending"
+        :integer="overview.receivable_pending_count"
+        integer-label="pendentes"
         :hide-values="!showValues"
         clickable
         @click="$router.push({ name: 'AccountsReceivablePage' })"
       />
+      <FinancialCard
+        title="Vencidas (a receber)"
+        icon="mdi-alert-circle-outline"
+        :financial-value="overview.overdue_receivable"
+        :integer="overview.overdue_receivable_count"
+        integer-label="em atraso"
+        :hide-values="!showValues"
+      />
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, watch } from "vue";
+import { onMounted, ref, watch } from "vue";
 import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
 import FinancialCard from "src/components/financial/FinancialCard.vue";
+import { getFinancialOverviewMe } from "src/api/unit_financial_dashboard";
 
 const STORAGE_KEY = "franchisee_financial_show_values";
 const showValues = ref(localStorage.getItem(STORAGE_KEY) !== "false");
 
 watch(showValues, (val) => localStorage.setItem(STORAGE_KEY, String(val)));
+
+const defaultOverview = () => ({
+  result_month: 0,
+  received_month: 0,
+  received_month_count: 0,
+  paid_month: 0,
+  paid_month_count: 0,
+  receivable_pending: 0,
+  receivable_pending_count: 0,
+  payable_pending: 0,
+  payable_pending_count: 0,
+  overdue_receivable: 0,
+  overdue_receivable_count: 0,
+});
+
+const overview = ref(defaultOverview());
+
+onMounted(async () => {
+  try {
+    overview.value = await getFinancialOverviewMe();
+  } catch (e) {
+    console.error("Erro ao carregar visão geral financeira:", e);
+  }
+});
 </script>