feat: Show account category on details page

src/common/const/account-categories-verbose.ts

@@ -0,0 +1,16 @@
+import { ACCOUNT_CATEGORIES } from "shared-types";
+
+export const ACCOUNT_CATEGORIES_VERBOSE = Object.freeze({
+  [ACCOUNT_CATEGORIES.general]: "General",
+  [ACCOUNT_CATEGORIES.cash]: "Cash",
+  [ACCOUNT_CATEGORIES.currentAccount]: "Current account",
+  [ACCOUNT_CATEGORIES.creditCard]: "Credit card",
+  [ACCOUNT_CATEGORIES.saving]: "Saving account",
+  [ACCOUNT_CATEGORIES.bonus]: "Bonus",
+  [ACCOUNT_CATEGORIES.insurance]: "Insurance",
+  [ACCOUNT_CATEGORIES.investment]: "Investment",
+  [ACCOUNT_CATEGORIES.loan]: "Loan",
+  [ACCOUNT_CATEGORIES.mortgage]: "Mortgage",
+  [ACCOUNT_CATEGORIES.overdraft]: "Overdraft",
+  [ACCOUNT_CATEGORIES.crypto]: "Crypto",
+});

src/common/const/index.ts

@@ -31,3 +31,5 @@ export const OUT_OF_WALLET_ACCOUNT_MOCK = {
   name: OUT_OF_WALLET_ACCOUNT_NAME,
   id: null,
 } as OutOfWalletAccountModel;
+
+export * from "./account-categories-verbose";

src/pages/account/components/account-details-tab.vue

@@ -9,6 +9,7 @@ import * as Collapsible from "@/components/lib/ui/collapsible";
 import { Separator } from "@/components/lib/ui/separator";
 import { useCurrenciesStore } from "@/stores";
 import { toLocalNumber } from "@/js/helpers";
+import { ACCOUNT_CATEGORIES_VERBOSE } from "@/common/const";
 
 defineProps<{
   account: AccountModel;
@@ -44,6 +45,15 @@ const isOpen = ref(false);
       </div>
       <Separator />
 
+      <div class="flex items-center justify-between gap-2">
+        <span> Account Category: </span>
+
+        <span class="capitalize">
+          {{ ACCOUNT_CATEGORIES_VERBOSE[account.accountCategory] }}
+        </span>
+      </div>
+      <Separator />
+
       <Collapsible.Collapsible v-model:open="isOpen">
         <Collapsible.CollapsibleTrigger class="w-full">
           <div class="flex items-center justify-between gap-2">