From d937c813fe1e1d0002e3f3db061991dd83a1a3a2 Mon Sep 17 00:00:00 2001
From: Dmytro Svyrydenko <dmytro.svyrydenko@gmail.com>
Date: Fri, 16 Aug 2024 22:22:46 +0200
Subject: [PATCH 1/8] feat: Improve empty state for dashboard widgets

---
 src/components/widgets/balance-trend.vue      | 56 +++++++-----
 .../widgets/components/empty-state.vue        | 10 +++
 .../widgets/components/widget-wrapper.vue     |  4 +-
 src/components/widgets/expenses-structure.vue | 88 +++++++++++--------
 src/components/widgets/latest-records.vue     | 34 ++++---
 src/pages/auth/welcome.vue                    |  2 +-
 6 files changed, 124 insertions(+), 70 deletions(-)
 create mode 100644 src/components/widgets/components/empty-state.vue

diff --git a/src/components/widgets/balance-trend.vue b/src/components/widgets/balance-trend.vue
index 8199c052..c645732d 100644
--- a/src/components/widgets/balance-trend.vue
+++ b/src/components/widgets/balance-trend.vue
@@ -1,30 +1,37 @@
 <template>
   <WidgetWrapper title="Balance trend" :is-fetching="isWidgetDataFetching">
-    <div>
-      <div class="flex items-center justify-between mb-1 text-xs">
-        <div class="font-medium tracking-tight uppercase">Today</div>
-        <div class="tracking-tight">vs previous period</div>
-      </div>
-
-      <div class="flex items-center justify-between">
-        <div class="text-lg font-bold tracking-wider">
-          {{ formatBaseCurrency(todayBalance) }}
+    <template v-if="isDataEmpty">
+      <EmptyState>
+        <ChartLineIcon class="size-32" />
+      </EmptyState>
+    </template>
+    <template v-else>
+      <div>
+        <div class="flex items-center justify-between mb-1 text-xs">
+          <div class="font-medium tracking-tight uppercase">Today</div>
+          <div class="tracking-tight">vs previous period</div>
         </div>
-        <div
-          :class="{
-            'text-[var(--app-error)]': balancesDiff < 0,
-            'text-[var(--app-success)]': balancesDiff > 0,
-          }"
-        >
-          {{ `${balancesDiff}%` }}
+
+        <div class="flex items-center justify-between">
+          <div class="text-lg font-bold tracking-wider">
+            {{ formatBaseCurrency(todayBalance) }}
+          </div>
+          <div
+            :class="{
+              'text-[var(--app-error)]': balancesDiff < 0,
+              'text-[var(--app-success)]': balancesDiff > 0,
+            }"
+          >
+            {{ `${balancesDiff}%` }}
+          </div>
         </div>
       </div>
-    </div>
 
-    <highcharts
-      v-node-resize-observer="{ callback: onChartResize }"
-      :options="chartOptions"
-    />
+      <highcharts
+        v-node-resize-observer="{ callback: onChartResize }"
+        :options="chartOptions"
+      />
+    </template>
   </WidgetWrapper>
 </template>
 
@@ -41,6 +48,7 @@ import {
   subMonths,
 } from "date-fns";
 import { storeToRefs } from "pinia";
+import { ChartLineIcon } from "lucide-vue-next";
 import { getTotalBalance } from "@/api";
 import { VUE_QUERY_CACHE_KEYS } from "@/common/const";
 import { calculatePercentageDifference, formatLargeNumber } from "@/js/helpers";
@@ -49,6 +57,7 @@ import { loadBalanceTrendData } from "@/services";
 
 import { useCurrenciesStore } from "@/stores";
 import WidgetWrapper from "./components/widget-wrapper.vue";
+import EmptyState from "./components/empty-state.vue";
 
 // Calculate it manually so shart will always have first and last ticks (dates)
 function generateDateSteps(datesToShow = 5, date = new Date()) {
@@ -143,6 +152,11 @@ watch(
   { immediate: true },
 );
 
+const isDataEmpty = computed(
+  () =>
+    !balanceHistory.value || balanceHistory.value.every((i) => i.amount === 0),
+);
+
 const chartOptions = computed(() => {
   const pixelsPerTick = 120;
   const ticksAmount = currentChartWidth.value
diff --git a/src/components/widgets/components/empty-state.vue b/src/components/widgets/components/empty-state.vue
new file mode 100644
index 00000000..5071f054
--- /dev/null
+++ b/src/components/widgets/components/empty-state.vue
@@ -0,0 +1,10 @@
+<template>
+  <div
+    class="h-full flex flex-col items-center justify-center opacity-70 min-h-[250px]"
+  >
+    <slot></slot>
+    <p class="text-sm text-center mt-4">
+      There are no data in selected time interval.
+    </p>
+  </div>
+</template>
diff --git a/src/components/widgets/components/widget-wrapper.vue b/src/components/widgets/components/widget-wrapper.vue
index a9aca5b6..6c8ab6a5 100644
--- a/src/components/widgets/components/widget-wrapper.vue
+++ b/src/components/widgets/components/widget-wrapper.vue
@@ -1,6 +1,6 @@
 <template>
   <Card
-    class="max-h-[350px]"
+    class="max-h-[350px] flex flex-col"
     :class="{
       'max-h-[724px]': higher,
     }"
@@ -25,7 +25,7 @@
       </slot>
     </CardHeader>
 
-    <CardContent class="widget-wrapper__content">
+    <CardContent class="h-full">
       <slot />
     </CardContent>
   </Card>
diff --git a/src/components/widgets/expenses-structure.vue b/src/components/widgets/expenses-structure.vue
index 8aa5968f..97b8b83e 100644
--- a/src/components/widgets/expenses-structure.vue
+++ b/src/components/widgets/expenses-structure.vue
@@ -1,28 +1,35 @@
 <template>
   <WidgetWrapper title="Expenses Structure" :is-fetching="isWidgetDataFetching">
-    <div>
-      <div class="flex items-center justify-between mb-1 text-xs">
-        <div class="font-medium tracking-tight uppercase">Today</div>
-        <div class="tracking-tight">vs previous period</div>
-      </div>
-
-      <div class="flex items-center justify-between">
-        <div class="text-lg font-bold tracking-wider">
-          {{ formatBaseCurrency(-(currentMonthExpense || 0)) }}
+    <template v-if="isDataEmpty">
+      <EmptyState>
+        <ChartPieIcon class="size-32" />
+      </EmptyState>
+    </template>
+    <template v-else>
+      <div>
+        <div class="flex items-center justify-between mb-1 text-xs">
+          <div class="font-medium tracking-tight uppercase">Today</div>
+          <div class="tracking-tight">vs previous period</div>
         </div>
 
-        <div
-          :class="{
-            'text-[var(--app-error)]': expensesDiff < 0,
-            'text-[var(--app-success)]': expensesDiff > 0,
-          }"
-        >
-          {{ `${expensesDiff}%` }}
+        <div class="flex items-center justify-between">
+          <div class="text-lg font-bold tracking-wider">
+            {{ formatBaseCurrency(-(currentMonthExpense || 0)) }}
+          </div>
+
+          <div
+            :class="{
+              'text-[var(--app-error)]': expensesDiff < 0,
+              'text-[var(--app-success)]': expensesDiff > 0,
+            }"
+          >
+            {{ `${expensesDiff}%` }}
+          </div>
         </div>
       </div>
-    </div>
 
-    <highcharts :options="chartOptions" />
+      <highcharts :options="chartOptions" />
+    </template>
   </WidgetWrapper>
 </template>
 
@@ -32,6 +39,7 @@ import { storeToRefs } from "pinia";
 import { subMonths, startOfMonth, endOfMonth } from "date-fns";
 import { useQuery } from "@tanstack/vue-query";
 import { Chart as Highcharts } from "highcharts-vue";
+import { ChartPieIcon } from "lucide-vue-next";
 import { useFormatCurrency, useHighcharts } from "@/composable";
 import { calculatePercentageDifference } from "@/js/helpers";
 import { fromSystemAmount } from "@/api/helpers";
@@ -40,6 +48,7 @@ import { getSpendingsByCategories, getExpensesAmountForPeriod } from "@/api";
 import { VUE_QUERY_CACHE_KEYS } from "@/common/const";
 import { UnwrapPromise } from "@/common/types";
 import WidgetWrapper from "./components/widget-wrapper.vue";
+import EmptyState from "./components/empty-state.vue";
 
 defineOptions({
   name: "expenses-structure-widget",
@@ -139,30 +148,37 @@ function computeTotalAmount(
 
 const { categoriesMap } = storeToRefs(useCategoriesStore());
 const { buildDonutChartConfig } = useHighcharts();
+
+const chartSeries = computed(() =>
+  Object.entries(spendingsByCategories.value || {}).reduce(
+    (acc, curr) => {
+      const [categoryId, value] = curr;
+      const totalTransactionsValue = computeTotalAmount(value);
+
+      acc.push({
+        name: categoriesMap.value[Number(categoryId)].name,
+        color: categoriesMap.value[Number(categoryId)].color,
+        y: totalTransactionsValue,
+      });
+      return acc;
+    },
+    [] as {
+      name: string;
+      color: string;
+      y: number;
+    }[],
+  ),
+);
+
+const isDataEmpty = computed(() => chartSeries.value.length === 0);
+
 const chartOptions = computed(() =>
   buildDonutChartConfig({
     chart: { height: 220 },
     series: [
       {
         type: "pie",
-        data: Object.entries(spendingsByCategories.value || {}).reduce(
-          (acc, curr) => {
-            const [categoryId, value] = curr;
-            const totalTransactionsValue = computeTotalAmount(value);
-
-            acc.push({
-              name: categoriesMap.value[Number(categoryId)].name,
-              color: categoriesMap.value[Number(categoryId)].color,
-              y: totalTransactionsValue,
-            });
-            return acc;
-          },
-          [] as {
-            name: string;
-            color: string;
-            y: number;
-          }[],
-        ),
+        data: chartSeries.value,
       },
     ],
   }),
diff --git a/src/components/widgets/latest-records.vue b/src/components/widgets/latest-records.vue
index 9fd00e46..6ff8e77a 100644
--- a/src/components/widgets/latest-records.vue
+++ b/src/components/widgets/latest-records.vue
@@ -1,23 +1,34 @@
 <template>
   <WidgetWrapper class="latest-records-widget" title="Latest records" higher>
     <template #action>
-      <router-link
-        class="latest-records-widget__show-all"
-        :to="{ name: ROUTES_NAMES.records }"
-      >
-        <ui-button variant="link" as="span" size="sm"> Show all </ui-button>
-      </router-link>
+      <template v-if="!isDataEmpty">
+        <router-link
+          class="latest-records-widget__show-all"
+          :to="{ name: ROUTES_NAMES.records }"
+        >
+          <ui-button variant="link" as="span" size="sm"> Show all </ui-button>
+        </router-link>
+      </template>
+    </template>
+    <template v-if="isDataEmpty">
+      <EmptyState>
+        <ListIcon class="size-32" />
+      </EmptyState>
+    </template>
+    <template v-else>
+      <TransactionsList
+        class="latest-records-widget__list"
+        :transactions="transactions || []"
+      />
     </template>
-    <TransactionsList
-      class="latest-records-widget__list"
-      :transactions="transactions || []"
-    />
   </WidgetWrapper>
 </template>
 
 <script lang="ts" setup>
+import { computed } from "vue";
 import { storeToRefs } from "pinia";
 import { useQuery } from "@tanstack/vue-query";
+import { ListIcon } from "lucide-vue-next";
 import { ROUTES_NAMES } from "@/routes/constants";
 import { useRootStore } from "@/stores";
 import { VUE_QUERY_CACHE_KEYS } from "@/common/const";
@@ -26,6 +37,7 @@ import UiButton from "@/components/lib/ui/button/Button.vue";
 
 import TransactionsList from "@/components/transactions-list/transactions-list.vue";
 import WidgetWrapper from "./components/widget-wrapper.vue";
+import EmptyState from "./components/empty-state.vue";
 
 const { isAppInitialized } = storeToRefs(useRootStore());
 
@@ -36,6 +48,8 @@ const { data: transactions } = useQuery({
   placeholderData: [],
   enabled: isAppInitialized,
 });
+
+const isDataEmpty = computed(() => transactions.value.length === 0);
 </script>
 
 <style lang="scss">
diff --git a/src/pages/auth/welcome.vue b/src/pages/auth/welcome.vue
index 962d1fed..c5944b8c 100644
--- a/src/pages/auth/welcome.vue
+++ b/src/pages/auth/welcome.vue
@@ -24,7 +24,7 @@
           <p class="welcome__disclaimer">
             Your base currency should ideally be the one you use most often. All
             transactions in other currencies will be calculated based on this
-            one. You won't be able to change your base currency later.
+            one. You won't be able to change your base currency later (for now).
           </p>
           <ui-button
             class="welcome__submit"

From 975db83dbd041924af7546bdbcdd72bf26160b1e Mon Sep 17 00:00:00 2001
From: Dmytro Svyrydenko <dmytro.svyrydenko@gmail.com>
Date: Fri, 16 Aug 2024 22:28:56 +0200
Subject: [PATCH 2/8] chore: disable form-error animation

---
 src/components/fields/form-wrapper.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/fields/form-wrapper.vue b/src/components/fields/form-wrapper.vue
index 88676c5c..a5754046 100644
--- a/src/components/fields/form-wrapper.vue
+++ b/src/components/fields/form-wrapper.vue
@@ -32,7 +32,7 @@ defineProps<{
   display: grid;
   grid-gap: 8px;
 
-  animation: slide-appear 1s ease-out 300ms both;
+  // animation: slide-appear 1s ease-out 2000ms both;
 }
 .form-wrapper__error {
   text-align: center;

From 93979ea6c85271a1246c9598cd81631421aef07c Mon Sep 17 00:00:00 2001
From: Dmytro Svyrydenko <dmytro.svyrydenko@gmail.com>
Date: Fri, 16 Aug 2024 22:57:23 +0200
Subject: [PATCH 3/8] feat: Add account creation action to dashboard when no
 accounts exist

---
 .../dashboard/accounts-list/accounts-list.vue | 36 +++++++++++--------
 src/pages/dashboard/dashboard.vue             | 12 ++-----
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/pages/dashboard/accounts-list/accounts-list.vue b/src/pages/dashboard/accounts-list/accounts-list.vue
index 6e02d365..542b5232 100644
--- a/src/pages/dashboard/accounts-list/accounts-list.vue
+++ b/src/pages/dashboard/accounts-list/accounts-list.vue
@@ -1,11 +1,23 @@
 <template>
-  <div class="accounts-list">
-    <template v-for="account in allAccounts" :key="account.id">
-      <account-card
-        :account="account"
-        class="cursor-pointer"
-        @click="redirectToAccount(account)"
-      />
+  <div class="grid gap-2 grid-cols-[repeat(auto-fit,180px)]">
+    <template v-if="allAccounts.length">
+      <template v-for="account in allAccounts" :key="account.id">
+        <account-card
+          :account="account"
+          class="cursor-pointer"
+          @click="redirectToAccount(account)"
+        />
+      </template>
+    </template>
+    <template v-else>
+      <Card>
+        <RouterLink to="/create-account">
+          <CardContent class="p-4 flex items-center gap-4">
+            Create your first account!
+            <PlusIcon class="size-12 text-primary" />
+          </CardContent>
+        </RouterLink>
+      </Card>
     </template>
   </div>
 </template>
@@ -15,8 +27,10 @@ import { computed } from "vue";
 import { useRouter } from "vue-router";
 import { storeToRefs } from "pinia";
 import { AccountModel } from "shared-types";
+import { PlusIcon } from "lucide-vue-next";
 
 import { ROUTES_NAMES } from "@/routes/constants";
+import { Card, CardContent } from "@/components/lib/ui/card";
 import { useAccountsStore } from "@/stores";
 import AccountCard from "./account-card.vue";
 
@@ -33,11 +47,3 @@ const redirectToAccount = (account: AccountModel) => {
   router.push({ name: ROUTES_NAMES.account, params: { id: account.id } });
 };
 </script>
-
-<style lang="scss" scoped>
-.accounts-list {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, 180px);
-  grid-gap: 8px;
-}
-</style>
diff --git a/src/pages/dashboard/dashboard.vue b/src/pages/dashboard/dashboard.vue
index 0ac6e8a1..d4657755 100644
--- a/src/pages/dashboard/dashboard.vue
+++ b/src/pages/dashboard/dashboard.vue
@@ -1,8 +1,8 @@
 <template>
-  <section class="dashboard-page">
-    <accounts-list class="dashboard-page__accounts" />
+  <section class="p-6">
+    <accounts-list />
 
-    <div class="dashboard-page__period-selector">
+    <div class="flex items-center justify-center gap-1 my-6">
       <ui-button size="icon" variant="ghost" @click="selectPrevPeriod">
         <ChevronLeft :size="20" />
       </ui-button>
@@ -99,9 +99,6 @@ const selectNextPeriod = () => {
 </script>
 
 <style lang="scss">
-.dashboard-page {
-  padding: 24px;
-}
 .dashboard-page__info {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr)) 420px;
@@ -133,9 +130,6 @@ const selectNextPeriod = () => {
 .dashboard-page__spending-categories {
   grid-area: spending-categories;
 }
-.dashboard-page__period-selector {
-  @apply flex items-center justify-center gap-1 my-6;
-}
 .dashboard-page__period {
   @apply w-[150px] text-center;
 }

From a36ba32c8a173f297eb9de5753ffa0faefcdf945 Mon Sep 17 00:00:00 2001
From: Dmytro Svyrydenko <dmytro.svyrydenko@gmail.com>
Date: Fri, 16 Aug 2024 23:53:42 +0200
Subject: [PATCH 4/8] feat: Add chadcn/tooltip component

---
 src/components/lib/ui/tooltip/Tooltip.vue     | 19 +++++++
 .../lib/ui/tooltip/TooltipContent.vue         | 50 +++++++++++++++++++
 .../lib/ui/tooltip/TooltipProvider.vue        | 11 ++++
 .../lib/ui/tooltip/TooltipTrigger.vue         | 11 ++++
 src/components/lib/ui/tooltip/index.ts        |  4 ++
 5 files changed, 95 insertions(+)
 create mode 100644 src/components/lib/ui/tooltip/Tooltip.vue
 create mode 100644 src/components/lib/ui/tooltip/TooltipContent.vue
 create mode 100644 src/components/lib/ui/tooltip/TooltipProvider.vue
 create mode 100644 src/components/lib/ui/tooltip/TooltipTrigger.vue
 create mode 100644 src/components/lib/ui/tooltip/index.ts

diff --git a/src/components/lib/ui/tooltip/Tooltip.vue b/src/components/lib/ui/tooltip/Tooltip.vue
new file mode 100644
index 00000000..b919799d
--- /dev/null
+++ b/src/components/lib/ui/tooltip/Tooltip.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+  TooltipRoot,
+  type TooltipRootEmits,
+  type TooltipRootProps,
+  useForwardPropsEmits,
+} from "radix-vue";
+
+const props = defineProps<TooltipRootProps>();
+const emits = defineEmits<TooltipRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <TooltipRoot v-bind="forwarded">
+    <slot />
+  </TooltipRoot>
+</template>
diff --git a/src/components/lib/ui/tooltip/TooltipContent.vue b/src/components/lib/ui/tooltip/TooltipContent.vue
new file mode 100644
index 00000000..919cf570
--- /dev/null
+++ b/src/components/lib/ui/tooltip/TooltipContent.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import {
+  TooltipContent,
+  type TooltipContentEmits,
+  type TooltipContentProps,
+  TooltipPortal,
+  useForwardPropsEmits,
+} from "radix-vue";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<TooltipContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    sideOffset: 4,
+    class: "",
+  },
+);
+
+const emits = defineEmits<TooltipContentEmits>();
+
+const delegatedProps = computed(() => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </TooltipContent>
+  </TooltipPortal>
+</template>
diff --git a/src/components/lib/ui/tooltip/TooltipProvider.vue b/src/components/lib/ui/tooltip/TooltipProvider.vue
new file mode 100644
index 00000000..02935931
--- /dev/null
+++ b/src/components/lib/ui/tooltip/TooltipProvider.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { TooltipProvider, type TooltipProviderProps } from "radix-vue";
+
+const props = defineProps<TooltipProviderProps>();
+</script>
+
+<template>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
+</template>
diff --git a/src/components/lib/ui/tooltip/TooltipTrigger.vue b/src/components/lib/ui/tooltip/TooltipTrigger.vue
new file mode 100644
index 00000000..c6e1c6fe
--- /dev/null
+++ b/src/components/lib/ui/tooltip/TooltipTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { TooltipTrigger, type TooltipTriggerProps } from "radix-vue";
+
+const props = defineProps<TooltipTriggerProps>();
+</script>
+
+<template>
+  <TooltipTrigger v-bind="props">
+    <slot />
+  </TooltipTrigger>
+</template>
diff --git a/src/components/lib/ui/tooltip/index.ts b/src/components/lib/ui/tooltip/index.ts
new file mode 100644
index 00000000..cf1014d2
--- /dev/null
+++ b/src/components/lib/ui/tooltip/index.ts
@@ -0,0 +1,4 @@
+export { default as Tooltip } from "./Tooltip.vue";
+export { default as TooltipContent } from "./TooltipContent.vue";
+export { default as TooltipTrigger } from "./TooltipTrigger.vue";
+export { default as TooltipProvider } from "./TooltipProvider.vue";

From a1441d0a0129b28d763998f5ca9cf3ab4ddd0191 Mon Sep 17 00:00:00 2001
From: Dmytro Svyrydenko <dmytro.svyrydenko@gmail.com>
Date: Fri, 16 Aug 2024 23:54:41 +0200
Subject: [PATCH 5/8] feat: Improve currencies UX by adding additional info

---
 .../subpages/currencies/add-new-currency.vue  | 69 ++++++++++++-------
 .../settings/subpages/currencies/list.vue     | 13 ++--
 2 files changed, 51 insertions(+), 31 deletions(-)

diff --git a/src/pages/settings/subpages/currencies/add-new-currency.vue b/src/pages/settings/subpages/currencies/add-new-currency.vue
index f9908904..5c070b6f 100644
--- a/src/pages/settings/subpages/currencies/add-new-currency.vue
+++ b/src/pages/settings/subpages/currencies/add-new-currency.vue
@@ -1,34 +1,59 @@
 <template>
-  <div class="flex gap-4 p-4 mb-8 add-new-currency">
-    <div class="flex-shrink-0 w-full max-w-[300px]">
-      <select-field
-        v-model="selectedCurrency"
-        :values="filteredCurrencies"
-        :placeholder="isCurrenciesLoading ? 'Loading...' : 'Select currency'"
-        with-search-field
-        :disabled="!filteredCurrencies.length"
-        :label-key="(item: CurrencyModel) => `${item.code} - ${item.currency}`"
-      />
-    </div>
-    <Button
-      :disabled="!selectedCurrency || isCurrenciesLoading"
-      class="w-[100px]"
-      @click="addCurrency"
-    >
-      Add
-    </Button>
-  </div>
+  <Card class="mb-8">
+    <CardContent class="pt-6 flex gap-4">
+      <div class="flex-shrink-0 w-full max-w-[300px]">
+        <select-field
+          v-model="selectedCurrency"
+          :values="filteredCurrencies"
+          :placeholder="isCurrenciesLoading ? 'Loading...' : 'Select currency'"
+          with-search-field
+          :disabled="!filteredCurrencies.length"
+          :label-key="(item: CurrencyModel) => `${item.code} - ${item.currency}`"
+        />
+      </div>
+      <Button
+        :disabled="!selectedCurrency || isCurrenciesLoading"
+        class="w-[100px]"
+        @click="addCurrency"
+      >
+        Add
+      </Button>
+
+      <template v-if="userCurrencies.length === 1">
+        <Tooltip.TooltipProvider>
+          <Tooltip.Tooltip>
+            <Tooltip.TooltipTrigger class="flex items-center gap-2">
+              <InfoIcon class="size-6" />
+              How it works?
+            </Tooltip.TooltipTrigger>
+            <Tooltip.TooltipContent class="max-w-[400px] p-4">
+              <span class="text-sm opacity-90 leading-6">
+                By adding custom currencies, you can create and manage accounts
+                and transactions in those currencies. You’ll also be able to
+                adjust and update their exchange rates relative to your base
+                currency. Linked accounts will automatically create required
+                currencies.
+              </span>
+            </Tooltip.TooltipContent>
+          </Tooltip.Tooltip>
+        </Tooltip.TooltipProvider>
+      </template>
+    </CardContent>
+  </Card>
 </template>
 
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import { storeToRefs } from "pinia";
 import { CurrencyModel } from "shared-types";
+import { InfoIcon } from "lucide-vue-next";
 import { useCurrenciesStore } from "@/stores";
 import { addUserCurrencies } from "@/api/currencies";
 import { useNotificationCenter } from "@/components/notification-center";
 import { SelectField } from "@/components/fields";
 import { Button } from "@/components/lib/ui/button";
+import { Card, CardContent } from "@/components/lib/ui/card";
+import * as Tooltip from "@/components/lib/ui/tooltip";
 
 const currenciesStore = useCurrenciesStore();
 const { addErrorNotification } = useNotificationCenter();
@@ -63,9 +88,3 @@ const addCurrency = async () => {
   }
 };
 </script>
-
-<style lang="scss" scoped>
-.add-new-currency {
-  @include surface-container();
-}
-</style>
diff --git a/src/pages/settings/subpages/currencies/list.vue b/src/pages/settings/subpages/currencies/list.vue
index 3c751d87..4baa8238 100644
--- a/src/pages/settings/subpages/currencies/list.vue
+++ b/src/pages/settings/subpages/currencies/list.vue
@@ -1,9 +1,11 @@
 <template>
-  <div class="currencies-list">
+  <Card class="currencies-list">
     <div class="currencies-list__row currencies-list__row--header">
       <div class="currencies-list__column" />
       <div class="currencies-list__column">Name</div>
-      <div class="currencies-list__column">Ratio</div>
+      <div class="currencies-list__column">
+        Currency rate per {{ baseCurrency.currency.code }}
+      </div>
     </div>
     <template v-for="(currency, index) in currenciesList" :key="currency.id">
       <div class="currencies-list__item">
@@ -51,7 +53,7 @@
         </template>
       </div>
     </template>
-  </div>
+  </Card>
 </template>
 
 <script setup lang="ts">
@@ -68,6 +70,7 @@ import {
   loadUserCurrenciesExchangeRates,
 } from "@/api/currencies";
 import { useNotificationCenter } from "@/components/notification-center";
+import { Card } from "@/components/lib/ui/card";
 import EditCurrency from "./edit-currency.vue";
 import { CurrencyWithExchangeRate } from "./types";
 
@@ -77,7 +80,7 @@ const currenciesStore = useCurrenciesStore();
 const accountsStore = useAccountsStore();
 const { addSuccessNotification, addErrorNotification } =
   useNotificationCenter();
-const { currencies } = storeToRefs(currenciesStore);
+const { currencies, baseCurrency } = storeToRefs(currenciesStore);
 const { accountsCurrencyIds } = storeToRefs(accountsStore);
 const rates = ref<UserExchangeRatesModel[]>([]);
 
@@ -147,8 +150,6 @@ const isDeletionDisabled = (currency: UserCurrencyModel) =>
 .currencies-list {
   --settings-currency-list-item-padding: 16px 32px;
 
-  @include surface-container();
-
   padding: 16px 0;
 }
 .currencies-list__item {

From e57f2d6d6d3dbd597a5d70cd55643a3792a71857 Mon Sep 17 00:00:00 2001
From: Dmytro Svyrydenko <dmytro.svyrydenko@gmail.com>
Date: Sat, 17 Aug 2024 11:02:56 +0200
Subject: [PATCH 6/8] feat: Re-load currencies when pairing external accounts

---
 src/components/modals/monobank-set-token.vue | 199 ++++++++-----------
 1 file changed, 83 insertions(+), 116 deletions(-)

diff --git a/src/components/modals/monobank-set-token.vue b/src/components/modals/monobank-set-token.vue
index 70f41bef..23e28cd3 100644
--- a/src/components/modals/monobank-set-token.vue
+++ b/src/components/modals/monobank-set-token.vue
@@ -1,22 +1,27 @@
 <template>
-  <div class="monobank-set-token" data-cy="monobank-set-token-modal">
-    <ui-button
+  <Card
+    class="py-12 px-8 w-full max-w-[600px] relative rounded-xl"
+    data-cy="monobank-set-token-modal"
+  >
+    <Button
       type="button"
-      class="button-style-reset monobank-set-token__close"
+      class="absolute top-3 right-3"
       theme="light-dark"
       is-icon
       @click="$emit(MODAL_EVENTS.closeModal)"
     >
       X
-    </ui-button>
+    </Button>
 
-    <p class="monobank-set-token__descr">
+    <p class="my-5">
       Please visit
-      <a href="https://api.monobank.ua/">https://api.monobank.ua/</a>
+      <a href="https://api.monobank.ua/" class="text-primary"
+        >https://api.monobank.ua/</a
+      >
       and follow all the instructions. Paste the API token from Monobank in the
       field below
     </p>
-    <div class="monobank-set-token__row">
+    <div class="my-5">
       <input-field
         v-model="form.token"
         name="token"
@@ -24,24 +29,19 @@
         :error-message="getFieldErrorMessage('form.token')"
       />
     </div>
-    <div class="monobank-set-token__actions">
-      <ui-button
-        class="monobank-set-token__action monobank-set-token__action--submit"
-        type="submit"
-        :disabled="isLoading"
-        @click="submit"
-      >
+    <div class="flex justify-center">
+      <Button type="submit" :disabled="isLoading" @click="submit">
         <template v-if="isUpdate"> Update token </template>
         <template v-else> Pair account </template>
-      </ui-button>
+      </Button>
     </div>
-  </div>
+  </Card>
 </template>
 
-<script lang="ts">
-import { defineComponent, reactive, ref } from "vue";
+<script setup lang="ts">
+import { reactive, ref } from "vue";
 import { API_ERROR_CODES } from "shared-types";
-import { useBanksMonobankStore } from "@/stores";
+import { useBanksMonobankStore, useCurrenciesStore } from "@/stores";
 import { MONOBANK_API_TOKEN_LENGTH } from "@/common/const";
 import { ApiErrorResponseError } from "@/js/errors";
 import { useFormValidation } from "@/composable";
@@ -49,122 +49,89 @@ import { required, minLength } from "@/js/helpers/validators";
 import InputField from "@/components/fields/input-field.vue";
 import Button from "@/components/common/ui-button.vue";
 import { EVENTS as MODAL_EVENTS } from "@/components/modal-center/ui-modal.vue";
+import { Card } from "@/components/lib/ui/card";
 
 import {
   useNotificationCenter,
   NotificationType,
 } from "@/components/notification-center";
 
-export default defineComponent({
+defineOptions({
   name: "monobank-set-token",
-  components: {
-    "input-field": InputField,
-    "ui-button": Button,
-  },
-  props: {
-    isUpdate: { type: Boolean, default: false },
+});
+
+const props = withDefaults(
+  defineProps<{
+    isUpdate?: boolean;
+  }>(),
+  {
+    isUpdate: false,
   },
-  emits: [MODAL_EVENTS.closeModal],
-  setup(props, { emit }) {
-    const monobankStore = useBanksMonobankStore();
-    const { addNotification } = useNotificationCenter();
+);
 
-    const isLoading = ref(false);
-    const form = reactive({ token: "" });
-    const { isFormValid, getFieldErrorMessage } = useFormValidation(
-      { form },
-      {
-        form: {
-          token: {
-            required,
-            apiToken: minLength(MONOBANK_API_TOKEN_LENGTH),
-          },
-        },
-      },
-      undefined,
-      {
-        customValidationMessages: {
-          apiToken: `Monobank API token should be ${MONOBANK_API_TOKEN_LENGTH} characters length`,
-        },
+const emit = defineEmits([MODAL_EVENTS.closeModal]);
+const monobankStore = useBanksMonobankStore();
+const currenciesStore = useCurrenciesStore();
+const { addNotification } = useNotificationCenter();
+
+const isLoading = ref(false);
+const form = reactive({ token: "" });
+const { isFormValid, getFieldErrorMessage } = useFormValidation(
+  { form },
+  {
+    form: {
+      token: {
+        required,
+        apiToken: minLength(MONOBANK_API_TOKEN_LENGTH),
       },
-    );
+    },
+  },
+  undefined,
+  {
+    customValidationMessages: {
+      apiToken: `Monobank API token should be ${MONOBANK_API_TOKEN_LENGTH} characters length`,
+    },
+  },
+);
 
-    const submit = async () => {
-      try {
-        if (!isFormValid()) return;
+const submit = async () => {
+  try {
+    if (!isFormValid()) return;
 
-        isLoading.value = true;
+    isLoading.value = true;
 
-        if (props.isUpdate) {
-          await monobankStore.updateUser({ token: form.token });
-        } else {
-          await monobankStore.pairAccount({ token: form.token });
-        }
+    if (props.isUpdate) {
+      await monobankStore.updateUser({ token: form.token });
+    } else {
+      await monobankStore.pairAccount({ token: form.token });
+    }
 
-        emit(MODAL_EVENTS.closeModal);
+    await currenciesStore.loadCurrencies();
 
-        addNotification({
-          text: "Paired",
-          type: NotificationType.success,
-        });
-      } catch (e) {
-        if (e instanceof ApiErrorResponseError) {
-          if (e.data.code === API_ERROR_CODES.monobankUserAlreadyConnected) {
-            addNotification({
-              text: "Account already connected",
-              type: NotificationType.error,
-            });
-
-            return;
-          }
-        }
+    emit(MODAL_EVENTS.closeModal);
 
+    addNotification({
+      text: "Paired",
+      type: NotificationType.success,
+    });
+  } catch (e) {
+    if (e instanceof ApiErrorResponseError) {
+      if (e.data.code === API_ERROR_CODES.monobankUserAlreadyConnected) {
         addNotification({
-          text: "Unexpected error",
+          text: "Account already connected",
           type: NotificationType.error,
         });
-      } finally {
-        isLoading.value = false;
-      }
-    };
 
-    return {
-      MODAL_EVENTS,
-      form,
-      isLoading,
-      submit,
-      getFieldErrorMessage,
-    };
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-.monobank-set-token {
-  background-color: var(--app-bg-box);
-  padding: 48px 32px;
-  width: 100%;
-  max-width: 600px;
-  position: relative;
-  border-radius: 12px;
-}
-.monobank-set-token__close {
-  position: absolute;
-  top: 12px;
-  right: 12px;
-}
-.monobank-set-token__row {
-  margin-bottom: 20px;
-}
-.monobank-set-token__actions {
-  display: flex;
-  justify-content: center;
-}
-.monobank-set-token__descr {
-  margin: 20px 0;
+        return;
+      }
+    }
 
-  a {
-    color: var(--app-primary);
+    addNotification({
+      text: "Unexpected error",
+      type: NotificationType.error,
+    });
+  } finally {
+    isLoading.value = false;
   }
-}
-</style>
+};
+</script>

From a89907b0f085073071f09d594ff031e3311fe0d3 Mon Sep 17 00:00:00 2001
From: Dmytro Svyrydenko <dmytro.svyrydenko@gmail.com>
Date: Sat, 17 Aug 2024 11:51:13 +0200
Subject: [PATCH 7/8] feat: Suggest users to enable some accounts from
 dashboard if all are disabled

---
 .../dashboard/accounts-list/accounts-list.vue | 38 +++++++++++++------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/pages/dashboard/accounts-list/accounts-list.vue b/src/pages/dashboard/accounts-list/accounts-list.vue
index 542b5232..dd8dca8d 100644
--- a/src/pages/dashboard/accounts-list/accounts-list.vue
+++ b/src/pages/dashboard/accounts-list/accounts-list.vue
@@ -1,15 +1,6 @@
 <template>
   <div class="grid gap-2 grid-cols-[repeat(auto-fit,180px)]">
-    <template v-if="allAccounts.length">
-      <template v-for="account in allAccounts" :key="account.id">
-        <account-card
-          :account="account"
-          class="cursor-pointer"
-          @click="redirectToAccount(account)"
-        />
-      </template>
-    </template>
-    <template v-else>
+    <template v-if="noAccountsExist">
       <Card>
         <RouterLink to="/create-account">
           <CardContent class="p-4 flex items-center gap-4">
@@ -19,6 +10,24 @@
         </RouterLink>
       </Card>
     </template>
+    <template v-else-if="noEnabledAccoutnsExist">
+      <Card>
+        <RouterLink to="/accounts">
+          <CardContent class="p-4 flex items-center gap-4">
+            Enable accounts to see them here
+          </CardContent>
+        </RouterLink>
+      </Card>
+    </template>
+    <template v-else-if="sortedAccounts.length">
+      <template v-for="account in sortedAccounts" :key="account.id">
+        <account-card
+          :account="account"
+          class="cursor-pointer"
+          @click="redirectToAccount(account)"
+        />
+      </template>
+    </template>
   </div>
 </template>
 
@@ -35,14 +44,19 @@ import { useAccountsStore } from "@/stores";
 import AccountCard from "./account-card.vue";
 
 const router = useRouter();
-const { enabledAccounts } = storeToRefs(useAccountsStore());
+const { enabledAccounts, accounts } = storeToRefs(useAccountsStore());
 
-const allAccounts = computed(() =>
+const sortedAccounts = computed(() =>
   [...enabledAccounts.value].sort(
     (a, b) => b.currentBalance - a.currentBalance,
   ),
 );
 
+const noAccountsExist = computed(() => accounts.value.length === 0);
+const noEnabledAccoutnsExist = computed(
+  () => enabledAccounts.value.length === 0,
+);
+
 const redirectToAccount = (account: AccountModel) => {
   router.push({ name: ROUTES_NAMES.account, params: { id: account.id } });
 };

From 288f017a8690c614c027cf5a4277450c96dd3af0 Mon Sep 17 00:00:00 2001
From: Dmytro Svyrydenko <dmytro.svyrydenko@gmail.com>
Date: Sat, 17 Aug 2024 11:55:32 +0200
Subject: [PATCH 8/8] fix: refetch accounts list on create/update/delete

---
 src/stores/accounts.ts | 23 ++++++-----------------
 1 file changed, 6 insertions(+), 17 deletions(-)

diff --git a/src/stores/accounts.ts b/src/stores/accounts.ts
index a79189e2..15661c0c 100644
--- a/src/stores/accounts.ts
+++ b/src/stores/accounts.ts
@@ -17,7 +17,7 @@ export const useAccountsStore = defineStore("accounts", () => {
 
   const accountsRecord = ref<Record<number, AccountModel>>({});
 
-  const { data: accounts } = useQuery({
+  const { data: accounts, refetch: refetchAccounts } = useQuery({
     queryKey: VUE_QUERY_CACHE_KEYS.allAccounts,
     queryFn: apiLoadAccounts,
     staleTime: Infinity,
@@ -50,10 +50,8 @@ export const useAccountsStore = defineStore("accounts", () => {
     payload: Parameters<typeof apiCreateAccount>[0],
   ) => {
     try {
-      const result = await apiCreateAccount(payload);
-
-      accounts.value.push(result);
-      accountsRecord.value[result.id] = result;
+      await apiCreateAccount(payload);
+      await refetchAccounts();
     } catch (e) {
       // eslint-disable-next-line no-console
       console.log(e);
@@ -65,15 +63,8 @@ export const useAccountsStore = defineStore("accounts", () => {
     ...data
   }: Parameters<typeof apiEditAccount>[0]) => {
     try {
-      const result = await apiEditAccount({ id, ...data });
-
-      accounts.value = accounts.value.map((item) => {
-        if (item.id === id) {
-          return result;
-        }
-        return item;
-      });
-      accountsRecord.value[id] = result;
+      await apiEditAccount({ id, ...data });
+      await refetchAccounts();
     } catch (e) {
       // eslint-disable-next-line no-console
       console.log(e);
@@ -84,9 +75,7 @@ export const useAccountsStore = defineStore("accounts", () => {
   const deleteAccount = async ({ id }: DeleteAccountPayload) => {
     try {
       await apiDeleteAccount({ id });
-
-      accounts.value = accounts.value.filter((item) => item.id !== id);
-      delete accountsRecord.value[id];
+      await refetchAccounts();
     } catch (e) {
       // eslint-disable-next-line no-console
       console.log(e);