feat: adiciona interacao em cards

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

@@ -4,54 +4,29 @@
 
     <div class="row q-pa-md q-gutter-md">
       <FinancialCard
-        title="Saldo Total"
-        icon="mdi-bank"
-        :financial-value="0"
-        :percentage="0"
-      />
-      <FinancialCard
-        title="Banco do Brasil"
-        icon="mdi-bank-outline"
-        :financial-value="0"
-        :percentage="0"
-      />
-      <FinancialCard
-        title="Itaú Unibanco"
-        icon="mdi-bank-outline"
-        :financial-value="0"
-        :percentage="0"
-      />
-      <FinancialCard
-        title="Bradesco"
-        icon="mdi-bank-outline"
-        :financial-value="0"
-        :percentage="0"
-      />
-      <FinancialCard
-        title="Santander"
-        icon="mdi-bank-outline"
-        :financial-value="0"
-        :percentage="0"
-      />
-      <FinancialCard
-        title="Carteira"
-        icon="mdi-wallet-outline"
+        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 Banco do Brasil"
-      description="registros"
-      :female="false"
-      :columns="columns"
-      @on-add-item="handleAddItem"
-    />
+        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>
@@ -62,27 +37,22 @@ 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",
-  },
+  { 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 = () => {};