add overview page

src/views/desktop/overview/IncomeExpenseOverviewCard.vue

@@ -0,0 +1,52 @@
+<template>
+    <v-card :class="{ 'disabled': disabled }">
+        <v-card-text class="d-flex align-center">
+            <v-avatar color="secondary" size="38">
+                <v-icon size="24" :icon="icon" />
+            </v-avatar>
+            <span class="text-base font-weight-bold ml-3">{{ title }}</span>
+            <v-spacer/>
+            <v-btn density="compact" color="default" variant="text" class="ml-2" :icon="true">
+                <v-icon :icon="icons.more" />
+                <v-menu activator="parent">
+                    <v-list>
+                        <slot name="menus"></slot>
+                    </v-list>
+                </v-menu>
+            </v-btn>
+        </v-card-text>
+        <v-card-text class="pb-2">
+            <div class="d-flex align-center mb-2">
+                <span class="font-weight-semibold text-truncate text-red text-h5 text-expense me-2">{{ expenseAmount }}</span>
+            </div>
+            <span class="text-truncate text-h6 text-income">{{ incomeAmount }}</span>
+        </v-card-text>
+        <v-card-text>
+            <span class="text-caption">{{ datetime }}</span>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script>
+import {
+    mdiDotsVertical
+} from '@mdi/js';
+
+export default {
+    props: [
+        'disabled',
+        'icon',
+        'title',
+        'expenseAmount',
+        'incomeAmount',
+        'datetime'
+    ],
+    data() {
+        return {
+            icons: {
+                more: mdiDotsVertical
+            }
+        };
+    }
+}
+</script>