src/components/financial/FinancialCard.vue

@@ -0,0 +1,84 @@
+<template>
+  <q-card class="financial-card">
+    <div class="row justify-between items-start no-wrap">
+      <span class="text-subtitle1 text-dark card-title">{{ title }}</span>
+      <q-icon :name="icon" size="22px" color="dark" />
+    </div>
+
+    <div class="bottom-area">
+      <div class="text-h5 text-primary value-text">{{ formattedValue }}</div>
+
+      <template v-if="hasFooter">
+        <q-separator class="q-mt-sm q-mb-xs" />
+        <div class="row items-center justify-between no-wrap">
+          <div class="column" style="gap: 2px">
+            <span v-if="percentage !== null" class="text-caption text-foreground">
+              {{ percentage }}% vs o mês anterior
+            </span>
+            <span v-if="integer !== null" class="text-caption text-foreground">
+              {{ integer }} {{ integerLabel }}
+            </span>
+          </div>
+          <span v-if="description" class="text-caption text-foreground">
+            {{ description }}
+          </span>
+        </div>
+      </template>
+    </div>
+  </q-card>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  title: { type: String, required: true },
+  icon: { type: String, default: "mdi-cash-multiple" },
+  financialValue: { type: Number, default: 0 },
+  legend: { type: String, default: "" },
+  percentage: { type: Number, default: null },
+  integer: { type: Number, default: null },
+  integerLabel: { type: String, default: "pagamentos restantes" },
+  description: { type: String, default: "" },
+});
+
+const formattedValue = computed(() =>
+  new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(
+    props.financialValue,
+  ),
+);
+
+const hasFooter = computed(
+  () => props.percentage !== null || props.integer !== null || !!props.description,
+);
+</script>
+
+<style scoped lang="scss">
+@import "src/css/quasar.variables.scss";
+
+.financial-card {
+  flex: 1 1 0;
+  min-width: 220px;
+  border-radius: 12px;
+  box-shadow: 0 0 0 1px #c0c0c0c0 !important;
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.card-title {
+  line-height: 1.3;
+}
+
+.bottom-area {
+  display: flex;
+  flex-direction: column;
+}
+
+.value-text {
+  font-weight: 600;
+  line-height: 1.2;
+}
+</style>

src/components/financial/TreasuryCard.vue

@@ -0,0 +1,37 @@
+<template>
+  <q-card class="treasury-card">
+    <div class="row justify-between items-start no-wrap">
+      <span class="text-subtitle1 text-dark">Minha Tesouraria</span>
+      <q-icon name="mdi-briefcase-outline" size="22px" color="dark" />
+    </div>
+
+    <div class="column q-gutter-sm q-mt-md">
+      <q-btn
+        outline
+        color="primary"
+        label="Acessar Contas"
+        :to="{ name: 'TreasuryPage' }"
+        no-caps
+      />
+      <q-btn
+        outline
+        color="primary"
+        label="Emissão Fiscal"
+        :to="{ name: 'InvoiceIssuancePage' }"
+        no-caps
+      />
+    </div>
+  </q-card>
+</template>
+
+<style scoped lang="scss">
+.treasury-card {
+  flex: 1 1 0;
+  min-width: 220px;
+  border-radius: 12px;
+  box-shadow: 0 0 0 1px #c0c0c0c0 !important;
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+}
+</style>

src/pages/financial/FinancialPage.vue

@@ -1,9 +1,57 @@
 <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>
 </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";
 </script>