src/components/financial/FinancialCard.vue

@@ -1,5 +1,12 @@
 <template>
-  <q-card class="financial-card">
+  <q-card
+    class="financial-card"
+    :class="{
+      'financial-card--selected': selected,
+      'financial-card--clickable': clickable,
+    }"
+    @click="clickable && emit('click')"
+  >
     <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" />
@@ -41,8 +48,12 @@ const props = defineProps({
   integerLabel: { type: String, default: "pagamentos restantes" },
   description: { type: String, default: "" },
   hideValues: { type: Boolean, default: false },
+  clickable: { type: Boolean, default: false },
+  selected: { type: Boolean, default: false },
 });
 
+const emit = defineEmits(["click"]);
+
 const formattedValue = computed(() =>
   props.hideValues
     ? "R$ ••••"
@@ -59,6 +70,18 @@ const hasFooter = computed(
 <style scoped lang="scss">
 @import "src/css/quasar.variables.scss";
 
+.financial-card--clickable {
+  cursor: pointer;
+
+  &:hover {
+    box-shadow: 0 0 0 1.5px $primary !important;
+  }
+}
+
+.financial-card--selected {
+  box-shadow: 0 0 0 2px $primary !important;
+}
+
 .financial-card {
   flex: 1 1 0;
   min-width: 220px;

src/pages/financial/TreasuryPage.vue

@@ -1,9 +1,59 @@
 <template>
   <div>
     <DefaultHeaderPage title="Tesouraria" :show-filter-icon="false" />
+
+    <div class="row q-pa-md q-gutter-md">
+      <FinancialCard
+        v-for="bank in banks"
+        :key="bank.key"
+        :title="bank.label"
+        :icon="bank.icon"
+        :financial-value="0"
+        :percentage="0"
+        clickable
+        :selected="selectedBank.key === bank.key"
+        @click="selectedBank = bank"
+      />
+    </div>
+
+    <div class="q-px-md">
+      <DefaultTable
+        v-model:rows="rows"
+        no-api-call
+        add-item
+        :title="`Extrato ${selectedBank.label}`"
+        description="registros"
+        :female="false"
+        :columns="columns"
+        @on-add-item="handleAddItem"
+      />
+    </div>
   </div>
 </template>
 
 <script setup>
+import { ref } from "vue";
 import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
+import DefaultTable from "src/components/defaults/DefaultTable.vue";
+import FinancialCard from "src/components/financial/FinancialCard.vue";
+
+const banks = [
+  { key: "total", label: "Saldo Total", icon: "mdi-bank" },
+  { key: "bb", label: "Banco do Brasil", icon: "mdi-bank-outline" },
+  { key: "itau", label: "Itaú Unibanco", icon: "mdi-bank-outline" },
+  { key: "bradesco", label: "Bradesco", icon: "mdi-bank-outline" },
+  { key: "santander", label: "Santander", icon: "mdi-bank-outline" },
+  { key: "carteira", label: "Carteira", icon: "mdi-wallet-outline" },
+];
+
+const selectedBank = ref(banks[0]);
+const rows = ref([]);
+
+const columns = [
+  { name: "description", label: "Descrição", field: "description", align: "left" },
+  { name: "value", label: "Valor", field: "value", align: "left" },
+  { name: "updated_at", label: "Atualização", field: "updated_at", align: "left" },
+];
+
+const handleAddItem = () => {};
 </script>