feat: adiciona tres cards abaixo

src/components/financial/FinancialCard.vue

@@ -16,7 +16,7 @@
               {{ percentage }}% vs o mês anterior
             </span>
             <span v-if="integer !== null" class="text-caption text-foreground">
-              {{ integer }} pagamentos restantes
+              {{ integer }} {{ integerLabel }}
             </span>
           </div>
           <span v-if="description" class="text-caption text-foreground">
@@ -38,6 +38,7 @@ const props = defineProps({
   legend: { type: String, default: "" },
   percentage: { type: Number, default: null },
   integer: { type: Number, default: null },
+  integerLabel: { type: String, default: "pagamentos restantes" },
   description: { type: String, default: "" },
 });
 

src/pages/financial/FinancialPage.vue

@@ -25,6 +25,28 @@
       />
       <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>
 </template>