<template>
  <div>
    <DefaultHeaderPage title="Financeiro" :show-filter-icon="false" />
    <div class="row q-pa-md q-gutter-md">
      <FinancialCard
        title="Fundo de Marketing"
        icon="mdi-cash-multiple"
        :financial-value="0"
        :percentage="0"
        description="Estável"
      />
      <FinancialCard
        title="Receita de Mensalidade"
        icon="mdi-cash-multiple"
        :financial-value="0"
        :percentage="0"
        description="Estável"
      />
      <FinancialCard
        title="TBR Total"
        icon="mdi-cash-multiple"
        :financial-value="0"
        :percentage="0"
        description="Estável"
      />
      <TreasuryCard />
    </div>

    <div class="row q-px-md q-gutter-md">
      <FinancialCard
        title="Contas a Pagar"
        icon="mdi-cash-minus"
        :financial-value="0"
        :integer="0"
        integer-label="pagamentos pendentes"
      />
      <FinancialCard
        title="Contas a Receber"
        icon="mdi-cash-plus"
        :financial-value="0"
        :integer="0"
        integer-label="pagamentos pendentes"
      />
      <FinancialCard
        title="Saldo Bancário Total"
        icon="mdi-bank-outline"
        :financial-value="0"
      />
    </div>

    <div class="row q-px-md q-gutter-md q-mt-none">
      <LastTransactionsCard />
      <FranchisePerformanceCard />
    </div>
  </div>
</template>

<script setup>
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>
