From 5837a1acaa002c88b1d9af63912d742b2bf9fdb2 Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Sat, 2 Sep 2023 14:41:52 +0300
Subject: [PATCH 01/27] api assets moved to their own module

---
 src/server/api.ts        | 19 -------------------
 src/server/api/assets.ts | 29 +++++++++++++++++++++++++++++
 src/server/api/index.ts  |  1 +
 src/server/utils.ts      |  8 --------
 4 files changed, 30 insertions(+), 27 deletions(-)
 delete mode 100644 src/server/api.ts
 create mode 100644 src/server/api/assets.ts
 create mode 100644 src/server/api/index.ts

diff --git a/src/server/api.ts b/src/server/api.ts
deleted file mode 100644
index ba1180e..0000000
--- a/src/server/api.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Asset } from './types';
-import { fetchCollectApi, makeCode } from './utils';
-
-export const getFiatAssets = async () => {
-    const assets = await fetchCollectApi<Asset[]>('/allCurrency');
-
-    // limit to 5 assets
-    return assets.slice(0, 5);
-};
-
-export const getGoldAssets = async () => {
-    const assets = await fetchCollectApi<Asset[]>('/goldPrice');
-
-    // limit to 5 assets
-    return assets.slice(0, 5).map((asset) => ({
-        ...asset,
-        code: makeCode(asset.name),
-    }));
-};
diff --git a/src/server/api/assets.ts b/src/server/api/assets.ts
new file mode 100644
index 0000000..96cbc9f
--- /dev/null
+++ b/src/server/api/assets.ts
@@ -0,0 +1,29 @@
+import { Asset } from '../types';
+import { fetchCollectApi } from '../utils';
+
+export const getFiatAssets = async () => {
+    const assets = await fetchCollectApi<Asset[]>('/allCurrency');
+
+    // limit to 5 assets
+    return assets.slice(0, 5);
+};
+
+export const getGoldAssets = async () => {
+    const assets = await fetchCollectApi<Asset[]>('/goldPrice');
+
+    // limit to 5 assets
+    return assets.slice(0, 5).map((asset) => ({
+        ...asset,
+        code: makeCode(asset.name),
+    }));
+};
+
+// HELPERS /////////////////////////////////////////////////////////////////////////////////////////
+
+function makeCode(name: string) {
+    // make code from first & last letter of the first word
+    // and first letter of the second word in uppercase
+    const [first, second] = name.split(' ');
+
+    return `${first[0]}${first.at(-1)}${second[0]}`.toUpperCase();
+}
diff --git a/src/server/api/index.ts b/src/server/api/index.ts
new file mode 100644
index 0000000..df64466
--- /dev/null
+++ b/src/server/api/index.ts
@@ -0,0 +1 @@
+export * from './assets';
diff --git a/src/server/utils.ts b/src/server/utils.ts
index b4f8879..57160b7 100644
--- a/src/server/utils.ts
+++ b/src/server/utils.ts
@@ -19,11 +19,3 @@ export async function fetchCollectApi<T>(path: string): Promise<T> {
 
     return (await response.json()).result;
 }
-
-export function makeCode(name: string) {
-    // make code from first & last letter of the first word
-    // and first letter of the second word in uppercase
-    const [first, second] = name.split(' ');
-
-    return `${first[0]}${first.at(-1)}${second[0]}`.toUpperCase();
-}

From 6575991d36e0efe528b4c8989206ca5ff599244c Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Sat, 2 Sep 2023 15:32:25 +0300
Subject: [PATCH 02/27] auth moved to composables

---
 src/App.vue                        |  3 ++-
 src/{store => composables}/auth.ts | 17 +++++++++++++----
 src/router.ts                      |  2 +-
 src/server/db.ts                   |  2 +-
 4 files changed, 17 insertions(+), 7 deletions(-)
 rename src/{store => composables}/auth.ts (65%)

diff --git a/src/App.vue b/src/App.vue
index 1d6647a..85bd4ac 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useAuth } from "./store/auth";
+import { useAuth } from "./composables/auth";
 import Menu from "./components/ui/Menu.vue";
 import MenuLink from "./components/ui/MenuLink.vue";
 import Avatar from "./components/ui/Avatar.vue";
@@ -53,3 +53,4 @@ const { user, login, logout } = useAuth();
     </main>
   </div>
 </template>
+./composables/auth
diff --git a/src/store/auth.ts b/src/composables/auth.ts
similarity index 65%
rename from src/store/auth.ts
rename to src/composables/auth.ts
index fbc3bee..3a951f0 100644
--- a/src/store/auth.ts
+++ b/src/composables/auth.ts
@@ -3,21 +3,30 @@ import { User } from 'firebase/auth';
 import { getAuth, signInWithPopup, GoogleAuthProvider } from 'firebase/auth';
 import { app } from '../firebase';
 
+// get auth instance
 const auth = getAuth(app);
+
+// define user ref
 const user = ref<User | null>(null);
+
+// define default auth provider
 const provider = new GoogleAuthProvider();
 
-// Listen for auth state changes
+// listen for auth state changes
 auth.onAuthStateChanged((state) => (user.value = state));
 
 async function login() {
-    await signInWithPopup(auth, provider);
+    signInWithPopup(auth, provider);
 }
 
 async function logout() {
-    await auth.signOut();
+    auth.signOut();
 }
 
 export function useAuth() {
-    return { user, login, logout };
+    return {
+        user,
+        login,
+        logout,
+    };
 }
diff --git a/src/router.ts b/src/router.ts
index 1f7bb6c..bef9b4d 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -1,6 +1,6 @@
 import { watch } from 'vue';
 import { createRouter, createWebHistory } from 'vue-router';
-import { useAuth } from './store/auth';
+import { useAuth } from './composables/auth';
 import Assets from './pages/Assets.vue';
 
 const { user } = useAuth();
diff --git a/src/server/db.ts b/src/server/db.ts
index 039a475..9ec47fe 100644
--- a/src/server/db.ts
+++ b/src/server/db.ts
@@ -12,7 +12,7 @@ import {
 } from 'firebase/firestore';
 import { app } from '../firebase';
 import { Transaction } from './types';
-import { useAuth } from '../store/auth';
+import { useAuth } from '../composables/auth';
 
 // Get a reference to the database service
 const db = getFirestore(app);

From e6b14f24d6d73370a70fde70707a2f3f33c700a8 Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Sat, 2 Sep 2023 15:51:04 +0300
Subject: [PATCH 03/27] auth user watch replaced by onAuthChanged hook

---
 src/composables/auth.ts | 5 +++++
 src/router.ts           | 5 ++---
 src/server/db.ts        | 5 ++---
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/composables/auth.ts b/src/composables/auth.ts
index 3a951f0..5fde207 100644
--- a/src/composables/auth.ts
+++ b/src/composables/auth.ts
@@ -23,10 +23,15 @@ async function logout() {
     auth.signOut();
 }
 
+function onAuthChanged(listener: (user: User | null) => void) {
+    auth.onAuthStateChanged(listener);
+}
+
 export function useAuth() {
     return {
         user,
         login,
         logout,
+        onAuthChanged,
     };
 }
diff --git a/src/router.ts b/src/router.ts
index bef9b4d..507cc28 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -1,9 +1,8 @@
-import { watch } from 'vue';
 import { createRouter, createWebHistory } from 'vue-router';
 import { useAuth } from './composables/auth';
 import Assets from './pages/Assets.vue';
 
-const { user } = useAuth();
+const { user, onAuthChanged } = useAuth();
 
 const routes = [
     {
@@ -40,4 +39,4 @@ router.beforeEach((to) => {
 });
 
 // redirect to home page if user signed out
-watch(user, () => user.value || router.push('/'));
+onAuthChanged(() => router.push('/'));
diff --git a/src/server/db.ts b/src/server/db.ts
index 9ec47fe..5b2465f 100644
--- a/src/server/db.ts
+++ b/src/server/db.ts
@@ -1,4 +1,3 @@
-import { watch } from 'vue';
 import {
     getFirestore,
     collection,
@@ -16,14 +15,14 @@ import { useAuth } from '../composables/auth';
 
 // Get a reference to the database service
 const db = getFirestore(app);
-const { user } = useAuth();
+const { user, onAuthChanged } = useAuth();
 
 // Get a reference to the collection
 let uid = user.value?.uid || 'default';
 let userRef = doc(db, 'users', uid);
 let txsCol = collection(userRef, 'transactions');
 
-watch(user, () => {
+onAuthChanged(() => {
     uid = user.value?.uid || 'default';
     userRef = doc(db, 'users', uid);
     txsCol = collection(userRef, 'transactions');

From c2fd87715099d606c731ecb54cd850c39626bba1 Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Sat, 2 Sep 2023 16:15:18 +0300
Subject: [PATCH 04/27] firebase moved to composables

---
 src/composables/auth.ts           | 12 ++++++++----
 src/{ => composables}/firebase.ts |  6 +++++-
 src/server/db.ts                  |  4 ++--
 3 files changed, 15 insertions(+), 7 deletions(-)
 rename src/{ => composables}/firebase.ts (85%)

diff --git a/src/composables/auth.ts b/src/composables/auth.ts
index 5fde207..3465568 100644
--- a/src/composables/auth.ts
+++ b/src/composables/auth.ts
@@ -1,10 +1,14 @@
 import { ref } from 'vue';
-import { User } from 'firebase/auth';
-import { getAuth, signInWithPopup, GoogleAuthProvider } from 'firebase/auth';
-import { app } from '../firebase';
+import {
+    getAuth,
+    signInWithPopup,
+    GoogleAuthProvider,
+    User,
+} from 'firebase/auth';
+import { useFirebase } from './firebase';
 
 // get auth instance
-const auth = getAuth(app);
+const auth = getAuth(useFirebase());
 
 // define user ref
 const user = ref<User | null>(null);
diff --git a/src/firebase.ts b/src/composables/firebase.ts
similarity index 85%
rename from src/firebase.ts
rename to src/composables/firebase.ts
index 01463f2..a0ed2c0 100644
--- a/src/firebase.ts
+++ b/src/composables/firebase.ts
@@ -12,4 +12,8 @@ const firebaseConfig = {
 } as any;
 
 // Initialize Firebase
-export const app = initializeApp(firebaseConfig);
+const app = initializeApp(firebaseConfig);
+
+export function useFirebase() {
+    return app;
+}
diff --git a/src/server/db.ts b/src/server/db.ts
index 5b2465f..45aed4b 100644
--- a/src/server/db.ts
+++ b/src/server/db.ts
@@ -9,12 +9,12 @@ import {
     doc,
     onSnapshot,
 } from 'firebase/firestore';
-import { app } from '../firebase';
 import { Transaction } from './types';
 import { useAuth } from '../composables/auth';
+import { useFirebase } from '../composables/firebase';
 
 // Get a reference to the database service
-const db = getFirestore(app);
+const db = getFirestore(useFirebase());
 const { user, onAuthChanged } = useAuth();
 
 // Get a reference to the collection

From c791574e62c316626e6d0761d3ed363e1ea63f7d Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Sat, 2 Sep 2023 18:26:03 +0300
Subject: [PATCH 05/27] firestore composables created

---
 src/composables/firestore.ts | 128 +++++++++++++++++++++++++++++++++++
 1 file changed, 128 insertions(+)
 create mode 100644 src/composables/firestore.ts

diff --git a/src/composables/firestore.ts b/src/composables/firestore.ts
new file mode 100644
index 0000000..ac2baad
--- /dev/null
+++ b/src/composables/firestore.ts
@@ -0,0 +1,128 @@
+import {
+    doc,
+    collection,
+    getFirestore,
+    getDocs,
+    getDoc,
+    setDoc,
+    addDoc,
+    deleteDoc,
+    onSnapshot,
+} from 'firebase/firestore';
+import { useAuth } from './auth';
+import { useFirebase } from './firebase';
+
+type Listener<T> = (data: T) => void;
+
+// Get a reference to the database service
+const db = getFirestore(useFirebase());
+
+// Get the currently logged in user
+const { user } = useAuth();
+
+// Get a reference to the currently logged in user
+const userUID = user.value?.uid ?? 'default';
+const userRef = doc(db, 'users', userUID);
+
+export function useFirestore() {
+    return {
+        db,
+        userRef,
+    };
+}
+
+export function useDocument<T>(path: string, ref = userRef) {
+    // Get a reference to the document
+    const docRef = doc(ref, path);
+
+    // get the document data
+    const get = async () => transformDoc(await getDoc(docRef)) as T;
+
+    // set or update the document data
+    const set = (data: any, merge = false) => setDoc(docRef, data, { merge });
+
+    // remove the document
+    const remove = () => deleteDoc(docRef);
+
+    // listen for document changes
+    const watch = (listener: Listener<T>) =>
+        onSnapshot(docRef, (snapshot) => listener(transformDoc(snapshot)));
+
+    // exports
+    return {
+        docRef,
+        get,
+        set,
+        remove,
+        watch,
+    };
+}
+
+export function useCollection<T>(path: string, ref = userRef) {
+    // Get a reference to the collection
+    const colRef = collection(ref, path);
+
+    /**
+     * Find all records in the given collection
+     */
+    const findAll = async <T>(): Promise<T[]> => {
+        const snapshot = await getDocs(colRef);
+        return snapshot.docs.map(transformDoc) as T[];
+    };
+
+    /**
+     * Find a single record in the given collection
+     */
+    const findOne = async <T>(id: string): Promise<T> => {
+        const docRef = doc(colRef, id);
+        const snapshot = await getDoc(docRef);
+
+        return transformDoc(snapshot) as T;
+    };
+
+    /**
+     * Create or update a record in the given collection
+     */
+    const saveOne = async ({ id, ...data }: any): Promise<string> => {
+        // create a new document if the id is not provided
+        if (!id) return (await addDoc(colRef, data)).id;
+
+        // update the existing document
+        const docRef = doc(colRef, id);
+        await setDoc(docRef, data);
+
+        return docRef.id;
+    };
+
+    /**
+     * Remove a record from the given collection
+     */
+    const removeOne = async (id: string): Promise<void> => {
+        const docRef = doc(colRef, id);
+        deleteDoc(docRef);
+    };
+
+    /**
+     * Listen for collection changes
+     */
+    const watch = (listener: Listener<T[]>) =>
+        onSnapshot(colRef, (snapshot) =>
+            listener(snapshot.docs.map(transformDoc))
+        );
+
+    return {
+        colRef,
+        findAll,
+        findOne,
+        saveOne,
+        removeOne,
+        watch,
+    };
+}
+
+// HELPERS /////////////////////////////////////////////////////////////////////////////////////////
+
+function transformDoc(doc: any) {
+    // transform the document data to plain object
+    return { ...doc.data(), id: doc.id };
+}

From 56ae0db5832cc8ae67495f775b942c2720278cee Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Sat, 2 Sep 2023 20:02:44 +0300
Subject: [PATCH 06/27] firestore composable refactored for dynamic auth user
 changes

---
 src/composables/firestore.ts | 59 +++++++++++++++++++-----------------
 1 file changed, 32 insertions(+), 27 deletions(-)

diff --git a/src/composables/firestore.ts b/src/composables/firestore.ts
index ac2baad..d3566d1 100644
--- a/src/composables/firestore.ts
+++ b/src/composables/firestore.ts
@@ -8,45 +8,42 @@ import {
     addDoc,
     deleteDoc,
     onSnapshot,
+    DocumentReference,
 } from 'firebase/firestore';
 import { useAuth } from './auth';
 import { useFirebase } from './firebase';
 
 type Listener<T> = (data: T) => void;
 
-// Get a reference to the database service
+// get a reference to the database service
 const db = getFirestore(useFirebase());
 
-// Get the currently logged in user
-const { user } = useAuth();
-
-// Get a reference to the currently logged in user
-const userUID = user.value?.uid ?? 'default';
-const userRef = doc(db, 'users', userUID);
-
 export function useFirestore() {
     return {
         db,
-        userRef,
+        getUserRef,
     };
 }
 
-export function useDocument<T>(path: string, ref = userRef) {
-    // Get a reference to the document
-    const docRef = doc(ref, path);
+export function useDocument<T>(path: string, ref?: DocumentReference) {
+    // define factory for getting a reference to the document
+    //
+    // workaround for auth.user.value being null on first load
+    // so we make method dynamic to get the user ref on each call
+    const docRef = () => doc(ref ?? getUserRef(), path);
 
     // get the document data
-    const get = async () => transformDoc(await getDoc(docRef)) as T;
+    const get = async () => transformDoc(await getDoc(docRef())) as T;
 
     // set or update the document data
-    const set = (data: any, merge = false) => setDoc(docRef, data, { merge });
+    const set = (data: any, merge = false) => setDoc(docRef(), data, { merge });
 
     // remove the document
-    const remove = () => deleteDoc(docRef);
+    const remove = () => deleteDoc(docRef());
 
     // listen for document changes
     const watch = (listener: Listener<T>) =>
-        onSnapshot(docRef, (snapshot) => listener(transformDoc(snapshot)));
+        onSnapshot(docRef(), (snapshot) => listener(transformDoc(snapshot)));
 
     // exports
     return {
@@ -58,23 +55,26 @@ export function useDocument<T>(path: string, ref = userRef) {
     };
 }
 
-export function useCollection<T>(path: string, ref = userRef) {
-    // Get a reference to the collection
-    const colRef = collection(ref, path);
+export function useCollection<T>(path: string, ref?: DocumentReference) {
+    // define factory for getting a reference to the collection
+    //
+    // workaround for auth.user.value being null on first load
+    // so we make method dynamic to get the user ref on each call
+    const colRef = () => collection(ref ?? getUserRef(), path);
 
     /**
      * Find all records in the given collection
      */
-    const findAll = async <T>(): Promise<T[]> => {
-        const snapshot = await getDocs(colRef);
+    const findAll = async (): Promise<T[]> => {
+        const snapshot = await getDocs(colRef());
         return snapshot.docs.map(transformDoc) as T[];
     };
 
     /**
      * Find a single record in the given collection
      */
-    const findOne = async <T>(id: string): Promise<T> => {
-        const docRef = doc(colRef, id);
+    const findOne = async (id: string): Promise<T> => {
+        const docRef = doc(colRef(), id);
         const snapshot = await getDoc(docRef);
 
         return transformDoc(snapshot) as T;
@@ -85,10 +85,10 @@ export function useCollection<T>(path: string, ref = userRef) {
      */
     const saveOne = async ({ id, ...data }: any): Promise<string> => {
         // create a new document if the id is not provided
-        if (!id) return (await addDoc(colRef, data)).id;
+        if (!id) return (await addDoc(colRef(), data)).id;
 
         // update the existing document
-        const docRef = doc(colRef, id);
+        const docRef = doc(colRef(), id);
         await setDoc(docRef, data);
 
         return docRef.id;
@@ -98,7 +98,7 @@ export function useCollection<T>(path: string, ref = userRef) {
      * Remove a record from the given collection
      */
     const removeOne = async (id: string): Promise<void> => {
-        const docRef = doc(colRef, id);
+        const docRef = doc(colRef(), id);
         deleteDoc(docRef);
     };
 
@@ -106,7 +106,7 @@ export function useCollection<T>(path: string, ref = userRef) {
      * Listen for collection changes
      */
     const watch = (listener: Listener<T[]>) =>
-        onSnapshot(colRef, (snapshot) =>
+        onSnapshot(colRef(), (snapshot) =>
             listener(snapshot.docs.map(transformDoc))
         );
 
@@ -122,6 +122,11 @@ export function useCollection<T>(path: string, ref = userRef) {
 
 // HELPERS /////////////////////////////////////////////////////////////////////////////////////////
 
+function getUserRef(): DocumentReference {
+    const uid = useAuth().user.value?.uid;
+    return doc(db, 'users', uid ?? 'default');
+}
+
 function transformDoc(doc: any) {
     // transform the document data to plain object
     return { ...doc.data(), id: doc.id };

From 160bf6f1a550a99d56524e900daff5b4711ba0fb Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Sat, 2 Sep 2023 20:04:38 +0300
Subject: [PATCH 07/27] db methods migrated to firestore composable

---
 src/server/api/index.ts        |  1 +
 src/server/api/transactions.ts | 11 ++++++
 src/server/db.ts               | 71 ----------------------------------
 src/store/transactions.ts      | 18 +--------
 4 files changed, 13 insertions(+), 88 deletions(-)
 create mode 100644 src/server/api/transactions.ts
 delete mode 100644 src/server/db.ts

diff --git a/src/server/api/index.ts b/src/server/api/index.ts
index df64466..0aaafcd 100644
--- a/src/server/api/index.ts
+++ b/src/server/api/index.ts
@@ -1 +1,2 @@
 export * from './assets';
+export * from './transactions';
\ No newline at end of file
diff --git a/src/server/api/transactions.ts b/src/server/api/transactions.ts
new file mode 100644
index 0000000..95c3da2
--- /dev/null
+++ b/src/server/api/transactions.ts
@@ -0,0 +1,11 @@
+import { Transaction } from '../types';
+import { useCollection } from '../../composables/firestore';
+
+// Get a reference to the transactions collection
+export const {
+    findAll: getTransactions,
+    findOne: getTransaction,
+    saveOne: setTransaction,
+    removeOne: removeTransaction,
+    watch: onTransactions,
+} = useCollection<Transaction>('transactions');
diff --git a/src/server/db.ts b/src/server/db.ts
deleted file mode 100644
index 45aed4b..0000000
--- a/src/server/db.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import {
-    getFirestore,
-    collection,
-    getDocs,
-    getDoc,
-    setDoc,
-    addDoc,
-    deleteDoc,
-    doc,
-    onSnapshot,
-} from 'firebase/firestore';
-import { Transaction } from './types';
-import { useAuth } from '../composables/auth';
-import { useFirebase } from '../composables/firebase';
-
-// Get a reference to the database service
-const db = getFirestore(useFirebase());
-const { user, onAuthChanged } = useAuth();
-
-// Get a reference to the collection
-let uid = user.value?.uid || 'default';
-let userRef = doc(db, 'users', uid);
-let txsCol = collection(userRef, 'transactions');
-
-onAuthChanged(() => {
-    uid = user.value?.uid || 'default';
-    userRef = doc(db, 'users', uid);
-    txsCol = collection(userRef, 'transactions');
-});
-
-// transform the document data to plain object
-const transformDoc = (doc: any) => ({ ...doc.data(), id: doc.id } as any);
-
-// Get a list of transactions from the database
-export async function getTransactions() {
-    const txsSnapshot = await getDocs(txsCol);
-    return txsSnapshot.docs.map(transformDoc) as Transaction[];
-}
-
-// get a single transaction from the database
-export async function getTransaction(id: string) {
-    const ref = doc(txsCol, id);
-    const txSnapshot = await getDoc(ref);
-    return transformDoc(txSnapshot) as Transaction;
-}
-
-// set a transaction in the database
-export async function setTransaction(tx: Partial<Transaction>) {
-    const { id, ...data } = tx;
-
-    // create a new document if the id is not provided
-    if (!id) return addDoc(txsCol, data);
-
-    // update the existing document
-    const ref = doc(txsCol, id as any);
-    await setDoc(ref, data);
-    return ref;
-}
-
-// remove a transaction from the database
-export async function removeTransaction(id: string) {
-    const ref = doc(txsCol, id);
-    await deleteDoc(ref);
-}
-
-export function onTransactions(listener: (txs: Transaction[]) => void) {
-    onSnapshot(txsCol, (txsSnapshot) => {
-        const txs = txsSnapshot.docs.map(transformDoc);
-        listener(txs);
-    });
-}
diff --git a/src/store/transactions.ts b/src/store/transactions.ts
index 075d7ab..0dcacbc 100644
--- a/src/store/transactions.ts
+++ b/src/store/transactions.ts
@@ -5,7 +5,7 @@ import {
     getTransaction,
     setTransaction,
     removeTransaction,
-} from '../server/db';
+} from '../server/api';
 
 const transactions = ref<Transaction[]>([]);
 
@@ -22,22 +22,6 @@ async function load() {
 
 onTransactions((txs) => (transactions.value = txs));
 
-// function get(id: number): Transaction | undefined {
-//     return state.all.find((tx) => tx.id === id);
-// }
-
-// function set(tx: Transaction) {
-//     const index = state.all.findIndex((t) => t.id === tx.id);
-
-//     if (index < 0) state.all.push(tx);
-//     else state.all.splice(index, 1, tx);
-// }
-
-// function remove(id: number) {
-//     const index = state.all.findIndex((t) => t.id === id);
-//     state.all.splice(index, 1);
-// }
-
 export const useTransactions = () => ({
     transactions,
     transactionMap,

From 703cc88548205b632e3b2f25adc14e840fba1a6a Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Sat, 2 Sep 2023 22:23:34 +0300
Subject: [PATCH 08/27] firestore refactored

---
 src/composables/firestore.ts   | 132 +++++++++++++--------------------
 src/server/api/transactions.ts |  35 ++++++---
 src/store/transactions.ts      |   2 +-
 3 files changed, 78 insertions(+), 91 deletions(-)

diff --git a/src/composables/firestore.ts b/src/composables/firestore.ts
index d3566d1..8942832 100644
--- a/src/composables/firestore.ts
+++ b/src/composables/firestore.ts
@@ -18,100 +18,67 @@ type Listener<T> = (data: T) => void;
 // get a reference to the database service
 const db = getFirestore(useFirebase());
 
-export function useFirestore() {
-    return {
-        db,
-        getUserRef,
-    };
+/**
+ * Find all records in the given collection
+ */
+async function findAll<T>(path: string): Promise<T[]> {
+    const colRef = getUserColRef(path);
+    const snapshot = await getDocs(colRef);
+
+    return snapshot.docs.map(transformDoc) as T[];
 }
 
-export function useDocument<T>(path: string, ref?: DocumentReference) {
-    // define factory for getting a reference to the document
-    //
-    // workaround for auth.user.value being null on first load
-    // so we make method dynamic to get the user ref on each call
-    const docRef = () => doc(ref ?? getUserRef(), path);
-
-    // get the document data
-    const get = async () => transformDoc(await getDoc(docRef())) as T;
-
-    // set or update the document data
-    const set = (data: any, merge = false) => setDoc(docRef(), data, { merge });
+/**
+ * Find a single record in the given collection
+ */
+async function findOne<T>(path: string, id: string): Promise<T> {
+    const colRef = getUserColRef(path);
+    const docRef = doc(colRef, id);
+    const snapshot = await getDoc(docRef);
 
-    // remove the document
-    const remove = () => deleteDoc(docRef());
-
-    // listen for document changes
-    const watch = (listener: Listener<T>) =>
-        onSnapshot(docRef(), (snapshot) => listener(transformDoc(snapshot)));
-
-    // exports
-    return {
-        docRef,
-        get,
-        set,
-        remove,
-        watch,
-    };
+    return transformDoc(snapshot) as T;
 }
 
-export function useCollection<T>(path: string, ref?: DocumentReference) {
-    // define factory for getting a reference to the collection
-    //
-    // workaround for auth.user.value being null on first load
-    // so we make method dynamic to get the user ref on each call
-    const colRef = () => collection(ref ?? getUserRef(), path);
-
-    /**
-     * Find all records in the given collection
-     */
-    const findAll = async (): Promise<T[]> => {
-        const snapshot = await getDocs(colRef());
-        return snapshot.docs.map(transformDoc) as T[];
-    };
+/**
+ * Create or update a record in the given collection
+ */
+async function saveOne(path: string, { id, ...data }: any): Promise<string> {
+    const colRef = getUserColRef(path);
 
-    /**
-     * Find a single record in the given collection
-     */
-    const findOne = async (id: string): Promise<T> => {
-        const docRef = doc(colRef(), id);
-        const snapshot = await getDoc(docRef);
+    // create a new document if the id is not provided
+    if (!id) return (await addDoc(colRef, data)).id;
 
-        return transformDoc(snapshot) as T;
-    };
+    // update the existing document
+    const docRef = doc(colRef, id);
+    await setDoc(docRef, data);
 
-    /**
-     * Create or update a record in the given collection
-     */
-    const saveOne = async ({ id, ...data }: any): Promise<string> => {
-        // create a new document if the id is not provided
-        if (!id) return (await addDoc(colRef(), data)).id;
+    return docRef.id;
+}
 
-        // update the existing document
-        const docRef = doc(colRef(), id);
-        await setDoc(docRef, data);
+/**
+ * Remove a record from the given collection
+ */
+async function removeOne(path: string, id: string): Promise<void> {
+    const colRef = getUserColRef(path);
+    const docRef = doc(colRef, id);
 
-        return docRef.id;
-    };
+    deleteDoc(docRef);
+}
 
-    /**
-     * Remove a record from the given collection
-     */
-    const removeOne = async (id: string): Promise<void> => {
-        const docRef = doc(colRef(), id);
-        deleteDoc(docRef);
-    };
+/**
+ * Listen for collection changes
+ */
+function watch<T>(path: string, listener: Listener<T[]>) {
+    const colRef = getUserColRef(path);
 
-    /**
-     * Listen for collection changes
-     */
-    const watch = (listener: Listener<T[]>) =>
-        onSnapshot(colRef(), (snapshot) =>
-            listener(snapshot.docs.map(transformDoc))
-        );
+    return onSnapshot(colRef, (snapshot) =>
+        listener(snapshot.docs.map(transformDoc))
+    );
+}
 
+export function useFirestore() {
     return {
-        colRef,
+        db,
         findAll,
         findOne,
         saveOne,
@@ -127,6 +94,11 @@ function getUserRef(): DocumentReference {
     return doc(db, 'users', uid ?? 'default');
 }
 
+function getUserColRef(path: string) {
+    const ref = getUserRef();
+    return collection(ref, path);
+}
+
 function transformDoc(doc: any) {
     // transform the document data to plain object
     return { ...doc.data(), id: doc.id };
diff --git a/src/server/api/transactions.ts b/src/server/api/transactions.ts
index 95c3da2..c5b9811 100644
--- a/src/server/api/transactions.ts
+++ b/src/server/api/transactions.ts
@@ -1,11 +1,26 @@
 import { Transaction } from '../types';
-import { useCollection } from '../../composables/firestore';
-
-// Get a reference to the transactions collection
-export const {
-    findAll: getTransactions,
-    findOne: getTransaction,
-    saveOne: setTransaction,
-    removeOne: removeTransaction,
-    watch: onTransactions,
-} = useCollection<Transaction>('transactions');
+import { useFirestore } from '../../composables/firestore';
+
+const PATH = 'transactions';
+
+const { findAll, findOne, removeOne, saveOne, watch } = useFirestore();
+
+export async function getTransactions() {
+    return await findAll<Transaction>(PATH);
+}
+
+export async function getTransaction(id: string) {
+    return await findOne<Transaction>(PATH, id);
+}
+
+export async function setTransaction(tx: Transaction) {
+    return await saveOne(PATH, tx);
+}
+
+export async function removeTransaction(id: string) {
+    return await removeOne(PATH, id);
+}
+
+// @todo: remove this later from the server side
+export const onTransactions = (listener: any) =>
+    watch<Transaction>(PATH, listener);
diff --git a/src/store/transactions.ts b/src/store/transactions.ts
index 0dcacbc..6496eab 100644
--- a/src/store/transactions.ts
+++ b/src/store/transactions.ts
@@ -20,7 +20,7 @@ async function load() {
     // state.all = await getTransactions();
 }
 
-onTransactions((txs) => (transactions.value = txs));
+onTransactions((txs: any) => (transactions.value = txs));
 
 export const useTransactions = () => ({
     transactions,

From d613cdb86d43a933c2e2d48363242d4a77840f8b Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Sat, 2 Sep 2023 22:35:09 +0300
Subject: [PATCH 09/27] asset datetime prop removed

---
 src/server/types.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/server/types.ts b/src/server/types.ts
index c500a12..a3fc9d3 100644
--- a/src/server/types.ts
+++ b/src/server/types.ts
@@ -15,7 +15,6 @@ export interface Asset {
     code: string;
     buying: number;
     selling: number;
-    datetime: string;
 }
 
 export interface Holding {

From 12ffa30cd9cb949df378d276dd4a868d52588f7d Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Sat, 2 Sep 2023 22:35:29 +0300
Subject: [PATCH 10/27] assets normalized, obsolete props removed

---
 src/server/api/assets.ts | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/server/api/assets.ts b/src/server/api/assets.ts
index 96cbc9f..ba0001e 100644
--- a/src/server/api/assets.ts
+++ b/src/server/api/assets.ts
@@ -5,22 +5,28 @@ export const getFiatAssets = async () => {
     const assets = await fetchCollectApi<Asset[]>('/allCurrency');
 
     // limit to 5 assets
-    return assets.slice(0, 5);
+    return assets.slice(0, 5).map(normalize);
 };
 
 export const getGoldAssets = async () => {
     const assets = await fetchCollectApi<Asset[]>('/goldPrice');
 
     // limit to 5 assets
-    return assets.slice(0, 5).map((asset) => ({
-        ...asset,
-        code: makeCode(asset.name),
-    }));
+    return assets.slice(0, 5).map(normalize);
 };
 
 // HELPERS /////////////////////////////////////////////////////////////////////////////////////////
 
-function makeCode(name: string) {
+function normalize(raw: Asset): Asset {
+    return <Asset>{
+        name: raw.name,
+        code: raw.code ?? makeCode(raw.name),
+        buying: raw.buying,
+        selling: raw.selling,
+    };
+}
+
+function makeCode(name: string): string {
     // make code from first & last letter of the first word
     // and first letter of the second word in uppercase
     const [first, second] = name.split(' ');

From f6ad7bfafe54fba1c8c95353feff9ce1f7c50bfe Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Sat, 2 Sep 2023 23:07:16 +0300
Subject: [PATCH 11/27] asset limit query added

---
 src/server/api/assets.ts | 36 ++++++++++++++++++++++++++++--------
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/server/api/assets.ts b/src/server/api/assets.ts
index ba0001e..44576db 100644
--- a/src/server/api/assets.ts
+++ b/src/server/api/assets.ts
@@ -1,18 +1,38 @@
 import { Asset } from '../types';
 import { fetchCollectApi } from '../utils';
 
-export const getFiatAssets = async () => {
-    const assets = await fetchCollectApi<Asset[]>('/allCurrency');
+interface Query {
+    limit?: number;
+}
+
+const QUERY: Query = {
+    limit: 10,
+};
 
-    // limit to 5 assets
-    return assets.slice(0, 5).map(normalize);
+export const getFiatAssets = async (query = { ...QUERY }) => {
+    // fetch assets from collect api
+    let assets = await fetchCollectApi<Asset[]>('/allCurrency');
+
+    // limit if needed
+    if (query.limit) {
+        assets = assets.slice(0, query.limit);
+    }
+
+    // normalize assets
+    return assets.map(normalize);
 };
 
-export const getGoldAssets = async () => {
-    const assets = await fetchCollectApi<Asset[]>('/goldPrice');
+export const getGoldAssets = async (query = { ...QUERY }) => {
+    // fetch assets from collect api
+    let assets = await fetchCollectApi<Asset[]>('/goldPrice');
+
+    // limit if needed
+    if (query.limit) {
+        assets = assets.slice(0, query.limit);
+    }
 
-    // limit to 5 assets
-    return assets.slice(0, 5).map(normalize);
+    // normalize assets
+    return assets.map(normalize);
 };
 
 // HELPERS /////////////////////////////////////////////////////////////////////////////////////////

From 0dc4c05f21f2184a1b9d8a4004c363b4abfef0d6 Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Sun, 3 Sep 2023 00:19:02 +0300
Subject: [PATCH 12/27] holdings moved to api

---
 src/server/api/holdings.ts | 52 ++++++++++++++++++++++++++++++++++++++
 src/server/api/index.ts    |  1 +
 src/store/holdings.ts      | 27 +++-----------------
 3 files changed, 56 insertions(+), 24 deletions(-)
 create mode 100644 src/server/api/holdings.ts

diff --git a/src/server/api/holdings.ts b/src/server/api/holdings.ts
new file mode 100644
index 0000000..43c04e7
--- /dev/null
+++ b/src/server/api/holdings.ts
@@ -0,0 +1,52 @@
+import { Asset, Holding } from '../types';
+import { getFiatAssets, getGoldAssets } from './assets';
+import { getTransactions } from './transactions';
+
+export async function getHoldings() {
+    // fetch all transactions
+    const transactions = await getTransactions();
+
+    // fetch current asset prices
+    const assetMap = await getAssetMap();
+
+    // make map (code -> holding)
+    const holdingMap: Record<string, Holding> = {};
+
+    // populate holding map
+    transactions.forEach(({ code, ...tx }) => {
+        // get holding or create new one
+        const holding = holdingMap[code] ?? {
+            code,
+            name: assetMap[code].name,
+            price: assetMap[code].buying,
+            amount: 0,
+            cost: 0,
+        };
+
+        // calculate amount & cost
+        const isBuy = tx.type === 'buy';
+        holding.amount += isBuy ? tx.amount : -tx.amount;
+        holding.cost += (isBuy ? tx.price : -tx.price) * tx.amount;
+
+        holdingMap[code] = holding;
+    });
+
+    return Object.values(holdingMap).flat();
+}
+
+// HELPERS /////////////////////////////////////////////////////////////////////////////////////////
+
+const getAssetMap = async () => {
+    // fetch all assets from collect api
+    const fiatAssets = await getFiatAssets();
+    const goldAssets = await getGoldAssets();
+
+    // make map (code -> Asset)
+    return [...fiatAssets, ...goldAssets].reduce(
+        (acc, asset) => ({
+            ...acc,
+            [asset.code]: asset,
+        }),
+        {} as Record<string, Asset>
+    );
+};
diff --git a/src/server/api/index.ts b/src/server/api/index.ts
index 0aaafcd..6e7e6a5 100644
--- a/src/server/api/index.ts
+++ b/src/server/api/index.ts
@@ -1,2 +1,3 @@
 export * from './assets';
+export * from './holdings';
 export * from './transactions';
\ No newline at end of file
diff --git a/src/store/holdings.ts b/src/store/holdings.ts
index d9f668e..daa3497 100644
--- a/src/store/holdings.ts
+++ b/src/store/holdings.ts
@@ -1,34 +1,13 @@
 import { computed, ref } from 'vue';
 import { Holding } from '../server/types';
-import { useAssets } from './assets';
 import { useTransactions } from './transactions';
+import { getHoldings } from '../server/api';
 
-const { load: loadAssets, assetMap } = useAssets();
 const { load: loadTransactions, transactionMap } = useTransactions();
 
 const selectedCode = ref<string | null>(null);
 
-const holdings = computed<Holding[]>(() => {
-    return Object.entries(transactionMap.value).map(([code, txs]) => {
-        const price = assetMap.value[code]?.buying;
-        let amount = 0;
-        let cost = 0;
-
-        txs.forEach((tx) => {
-            const isBuy = tx.type === 'buy';
-            amount += isBuy ? tx.amount : -tx.amount;
-            cost += isBuy ? tx.price * tx.amount : 0;
-        });
-
-        return <Holding>{
-            code,
-            name: assetMap.value[code]?.name,
-            amount,
-            cost,
-            price,
-        };
-    });
-});
+const holdings = ref<Holding[]>([]);
 
 const holding = computed(() =>
     holdings.value.find((h) => h.code === selectedCode.value)
@@ -49,8 +28,8 @@ const profitPercent = computed<string>(() =>
 );
 
 async function load() {
-    await loadAssets();
     await loadTransactions();
+    holdings.value = await getHoldings();
 }
 
 async function selectHolding(code: string) {

From a98b690d878b75856c32b7e3904a65c61ccaefbf Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Sun, 3 Sep 2023 00:28:46 +0300
Subject: [PATCH 13/27] holding transactions added

---
 src/pages/Holding.vue      | 8 ++++++--
 src/server/api/holdings.ts | 4 ++++
 src/server/types.ts        | 1 +
 src/store/holdings.ts      | 7 -------
 4 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/pages/Holding.vue b/src/pages/Holding.vue
index 0b5f3f1..99c965e 100644
--- a/src/pages/Holding.vue
+++ b/src/pages/Holding.vue
@@ -28,7 +28,7 @@ const createTx = (code = route.params.id as any, ts = Date.now()): Transaction =
 const modal = ref<any>(null);
 const txForm = ref<Transaction>(createTx());
 const txStore = useTransactions();
-const { selectHolding, holding, holdingTxs } = useHoldings();
+const { selectHolding, holding } = useHoldings();
 
 function onCreate() {
   modal.value.open = true;
@@ -105,7 +105,11 @@ onMounted(async () => {
 
     <!-- transactions -->
     <section>
-      <TransactionList :transactions="holdingTxs" @edit="onEdit" @remove="onRemove" />
+      <TransactionList
+        :transactions="holding.transactions"
+        @edit="onEdit"
+        @remove="onRemove"
+      />
     </section>
   </div>
 
diff --git a/src/server/api/holdings.ts b/src/server/api/holdings.ts
index 43c04e7..c8f93b4 100644
--- a/src/server/api/holdings.ts
+++ b/src/server/api/holdings.ts
@@ -21,6 +21,7 @@ export async function getHoldings() {
             price: assetMap[code].buying,
             amount: 0,
             cost: 0,
+            transactions: [],
         };
 
         // calculate amount & cost
@@ -28,6 +29,9 @@ export async function getHoldings() {
         holding.amount += isBuy ? tx.amount : -tx.amount;
         holding.cost += (isBuy ? tx.price : -tx.price) * tx.amount;
 
+        // add transaction
+        holding.transactions.push({ code, ...tx });
+
         holdingMap[code] = holding;
     });
 
diff --git a/src/server/types.ts b/src/server/types.ts
index a3fc9d3..2d7e638 100644
--- a/src/server/types.ts
+++ b/src/server/types.ts
@@ -23,4 +23,5 @@ export interface Holding {
     amount: number;
     price: number;
     cost: number;
+    transactions: Transaction[];
 }
diff --git a/src/store/holdings.ts b/src/store/holdings.ts
index daa3497..5f2850c 100644
--- a/src/store/holdings.ts
+++ b/src/store/holdings.ts
@@ -1,10 +1,7 @@
 import { computed, ref } from 'vue';
 import { Holding } from '../server/types';
-import { useTransactions } from './transactions';
 import { getHoldings } from '../server/api';
 
-const { load: loadTransactions, transactionMap } = useTransactions();
-
 const selectedCode = ref<string | null>(null);
 
 const holdings = ref<Holding[]>([]);
@@ -28,7 +25,6 @@ const profitPercent = computed<string>(() =>
 );
 
 async function load() {
-    await loadTransactions();
     holdings.value = await getHoldings();
 }
 
@@ -40,9 +36,6 @@ async function selectHolding(code: string) {
 export const useHoldings = () => ({
     holdings,
     holding,
-    holdingTxs: computed(() =>
-        selectedCode.value ? transactionMap.value[selectedCode.value] : []
-    ),
     cost,
     balance,
     profit,

From c0b49fdc4e4249818012dad070dd12a94b7f6c6a Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Sun, 3 Sep 2023 00:46:06 +0300
Subject: [PATCH 14/27] assets store & page refactored

---
 src/pages/Assets.vue | 30 +++++++-----------------------
 src/store/assets.ts  | 20 ++++++++++----------
 2 files changed, 17 insertions(+), 33 deletions(-)

diff --git a/src/pages/Assets.vue b/src/pages/Assets.vue
index 6a067a7..1437e9c 100644
--- a/src/pages/Assets.vue
+++ b/src/pages/Assets.vue
@@ -1,24 +1,16 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from "vue";
+import { onMounted, watch } from "vue";
 import { useAssets } from "../store/assets";
 import AssetList from "../components/AssetList.vue";
 import Tabs from "../components/ui/Tabs.vue";
 import Tab from "../components/ui/Tab.vue";
 
-type Tab = "fiat" | "gold";
+const { category, assets, load } = useAssets();
 
-const { fiatAssets, goldAssets, load } = useAssets();
-
-const selectedTab = ref<Tab>("fiat");
-
-const assets = computed(
-  () =>
-    ({
-      fiat: fiatAssets.value,
-      gold: goldAssets.value,
-    }[selectedTab.value])
-);
+// load assets when category changes
+watch(category, async () => load());
 
+// load assets on mount
 onMounted(async () => load());
 </script>
 
@@ -29,19 +21,11 @@ onMounted(async () => load());
     </header>
 
     <Tabs block>
-      <Tab
-        :active="selectedTab === 'fiat'"
-        @click.prevent="selectedTab = 'fiat'"
-        bordered
-      >
+      <Tab :active="category === 'fiat'" @click.prevent="category = 'fiat'" bordered>
         Fiat
       </Tab>
 
-      <Tab
-        :active="selectedTab === 'gold'"
-        @click.prevent="selectedTab = 'gold'"
-        bordered
-      >
+      <Tab :active="category === 'gold'" @click.prevent="category = 'gold'" bordered>
         Gold
       </Tab>
     </Tabs>
diff --git a/src/store/assets.ts b/src/store/assets.ts
index 95a572d..22265bd 100644
--- a/src/store/assets.ts
+++ b/src/store/assets.ts
@@ -2,27 +2,27 @@ import { computed, ref } from 'vue';
 import { Asset } from '../server/types';
 import { getFiatAssets, getGoldAssets } from '../server/api';
 
-const fiatAssets = ref<Asset[]>([]);
-const goldAssets = ref<Asset[]>([]);
+type Category = 'fiat' | 'gold';
 
-const assets = computed<Asset[]>(() => [
-    ...fiatAssets.value,
-    ...goldAssets.value,
-]);
+const category = ref<Category>('fiat');
+const assets = ref<Asset[]>([]);
 
 const assetMap = computed<Record<string, Asset>>(() =>
     assets.value.reduce((acc, cur) => ({ ...acc, [cur.code]: cur }), {} as any)
 );
 
 const load = async () => {
-    fiatAssets.value = await getFiatAssets();
-    goldAssets.value = await getGoldAssets();
+    const fetch = {
+        fiat: getFiatAssets,
+        gold: getGoldAssets,
+    };
+
+    assets.value = await fetch[category.value]();
 };
 
 export const useAssets = () => ({
+    category,
     assets,
     assetMap,
-    fiatAssets,
-    goldAssets,
     load,
 });

From fda3bc3ea2f53f2a8defe6a77d3d612ff0391869 Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Sun, 3 Sep 2023 00:47:10 +0300
Subject: [PATCH 15/27] obsolete assetMap removed

---
 src/store/assets.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/store/assets.ts b/src/store/assets.ts
index 22265bd..32e164a 100644
--- a/src/store/assets.ts
+++ b/src/store/assets.ts
@@ -1,4 +1,4 @@
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 import { Asset } from '../server/types';
 import { getFiatAssets, getGoldAssets } from '../server/api';
 
@@ -7,10 +7,6 @@ type Category = 'fiat' | 'gold';
 const category = ref<Category>('fiat');
 const assets = ref<Asset[]>([]);
 
-const assetMap = computed<Record<string, Asset>>(() =>
-    assets.value.reduce((acc, cur) => ({ ...acc, [cur.code]: cur }), {} as any)
-);
-
 const load = async () => {
     const fetch = {
         fiat: getFiatAssets,
@@ -23,6 +19,5 @@ const load = async () => {
 export const useAssets = () => ({
     category,
     assets,
-    assetMap,
     load,
 });

From 97f8b651ba4ab0acef590e9241d66cb8b06e87d8 Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Sun, 3 Sep 2023 00:51:57 +0300
Subject: [PATCH 16/27] assets page logic cleanup

---
 src/pages/Assets.vue |  9 +--------
 src/store/assets.ts  | 20 ++++++++++++++------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/pages/Assets.vue b/src/pages/Assets.vue
index 1437e9c..ca279a2 100644
--- a/src/pages/Assets.vue
+++ b/src/pages/Assets.vue
@@ -1,17 +1,10 @@
 <script setup lang="ts">
-import { onMounted, watch } from "vue";
 import { useAssets } from "../store/assets";
 import AssetList from "../components/AssetList.vue";
 import Tabs from "../components/ui/Tabs.vue";
 import Tab from "../components/ui/Tab.vue";
 
-const { category, assets, load } = useAssets();
-
-// load assets when category changes
-watch(category, async () => load());
-
-// load assets on mount
-onMounted(async () => load());
+const { category, assets } = useAssets();
 </script>
 
 <template>
diff --git a/src/store/assets.ts b/src/store/assets.ts
index 32e164a..d57ed11 100644
--- a/src/store/assets.ts
+++ b/src/store/assets.ts
@@ -1,4 +1,4 @@
-import { ref } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { Asset } from '../server/types';
 import { getFiatAssets, getGoldAssets } from '../server/api';
 
@@ -16,8 +16,16 @@ const load = async () => {
     assets.value = await fetch[category.value]();
 };
 
-export const useAssets = () => ({
-    category,
-    assets,
-    load,
-});
+export const useAssets = () => {
+    // load assets when category changes
+    watch(category, async () => load());
+
+    // load assets on mount
+    onMounted(async () => load());
+
+    return {
+        category,
+        assets,
+        load,
+    };
+};

From 70ad8e6d2355f6f252c112dbc361d60f3682c632 Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Sun, 3 Sep 2023 01:45:46 +0300
Subject: [PATCH 17/27] svg-loader uninstalled

---
 package-lock.json | 218 ----------------------------------------------
 package.json      |   3 +-
 vite.config.ts    |   3 +-
 3 files changed, 2 insertions(+), 222 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 59dea25..65a92ac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,6 @@
         "tailwindcss": "^3.3.3",
         "typescript": "^5.0.2",
         "vite": "^4.4.5",
-        "vite-svg-loader": "^4.0.0",
         "vue-tsc": "^1.8.5"
       }
     },
@@ -1059,15 +1058,6 @@
       "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
       "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
     },
-    "node_modules/@trysound/sax": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
-      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
-      "dev": true,
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/@types/node": {
       "version": "20.5.8",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.8.tgz",
@@ -1377,12 +1367,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/boolbase": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
-      "dev": true
-    },
     "node_modules/bootstrap-icons": {
       "version": "1.10.5",
       "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.10.5.tgz",
@@ -1571,22 +1555,6 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
-    "node_modules/css-select": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
-      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
-      "dev": true,
-      "dependencies": {
-        "boolbase": "^1.0.0",
-        "css-what": "^6.1.0",
-        "domhandler": "^5.0.2",
-        "domutils": "^3.0.1",
-        "nth-check": "^2.0.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/fb55"
-      }
-    },
     "node_modules/css-selector-tokenizer": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
@@ -1597,31 +1565,6 @@
         "fastparse": "^1.1.2"
       }
     },
-    "node_modules/css-tree": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
-      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
-      "dev": true,
-      "dependencies": {
-        "mdn-data": "2.0.30",
-        "source-map-js": "^1.0.1"
-      },
-      "engines": {
-        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
-      }
-    },
-    "node_modules/css-what": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
-      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/fb55"
-      }
-    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1634,39 +1577,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/csso": {
-      "version": "5.0.5",
-      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
-      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
-      "dev": true,
-      "dependencies": {
-        "css-tree": "~2.2.0"
-      },
-      "engines": {
-        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
-        "npm": ">=7.0.0"
-      }
-    },
-    "node_modules/csso/node_modules/css-tree": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
-      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
-      "dev": true,
-      "dependencies": {
-        "mdn-data": "2.0.28",
-        "source-map-js": "^1.0.1"
-      },
-      "engines": {
-        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
-        "npm": ">=7.0.0"
-      }
-    },
-    "node_modules/csso/node_modules/mdn-data": {
-      "version": "2.0.28",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
-      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
-      "dev": true
-    },
     "node_modules/csstype": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
@@ -1710,61 +1620,6 @@
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
       "dev": true
     },
-    "node_modules/dom-serializer": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
-      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
-      "dev": true,
-      "dependencies": {
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.2",
-        "entities": "^4.2.0"
-      },
-      "funding": {
-        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
-      }
-    },
-    "node_modules/domelementtype": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
-      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/fb55"
-        }
-      ]
-    },
-    "node_modules/domhandler": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
-      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
-      "dev": true,
-      "dependencies": {
-        "domelementtype": "^2.3.0"
-      },
-      "engines": {
-        "node": ">= 4"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/domhandler?sponsor=1"
-      }
-    },
-    "node_modules/domutils": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
-      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
-      "dev": true,
-      "dependencies": {
-        "dom-serializer": "^2.0.0",
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.3"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/domutils?sponsor=1"
-      }
-    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.508",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.508.tgz",
@@ -1776,18 +1631,6 @@
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
-    "node_modules/entities": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
-      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.12"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
-    },
     "node_modules/esbuild": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
@@ -2182,12 +2025,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/mdn-data": {
-      "version": "2.0.30",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
-      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
-      "dev": true
-    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -2299,18 +2136,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/nth-check": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
-      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
-      "dev": true,
-      "dependencies": {
-        "boolbase": "^1.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/nth-check?sponsor=1"
-      }
-    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -2756,39 +2581,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/svgo": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.0.2.tgz",
-      "integrity": "sha512-Z706C1U2pb1+JGP48fbazf3KxHrWOsLme6Rv7imFBn5EnuanDW1GPaA/P1/dvObE670JDePC3mnj0k0B7P0jjQ==",
-      "dev": true,
-      "dependencies": {
-        "@trysound/sax": "0.2.0",
-        "commander": "^7.2.0",
-        "css-select": "^5.1.0",
-        "css-tree": "^2.2.1",
-        "csso": "^5.0.5",
-        "picocolors": "^1.0.0"
-      },
-      "bin": {
-        "svgo": "bin/svgo"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/svgo"
-      }
-    },
-    "node_modules/svgo/node_modules/commander": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/tailwindcss": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
@@ -2979,16 +2771,6 @@
         }
       }
     },
-    "node_modules/vite-svg-loader": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/vite-svg-loader/-/vite-svg-loader-4.0.0.tgz",
-      "integrity": "sha512-0MMf1yzzSYlV4MGePsLVAOqXsbF5IVxbn4EEzqRnWxTQl8BJg/cfwIzfQNmNQxZp5XXwd4kyRKF1LytuHZTnqA==",
-      "dev": true,
-      "dependencies": {
-        "@vue/compiler-sfc": "^3.2.20",
-        "svgo": "^3.0.2"
-      }
-    },
     "node_modules/vue": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz",
diff --git a/package.json b/package.json
index 6950fb7..b156b71 100644
--- a/package.json
+++ b/package.json
@@ -14,15 +14,14 @@
     "vue-router": "^4.1.6"
   },
   "devDependencies": {
-    "bootstrap-icons": "^1.10.5",
     "@vitejs/plugin-vue": "^4.2.3",
     "autoprefixer": "^10.4.15",
+    "bootstrap-icons": "^1.10.5",
     "daisyui": "^3.6.4",
     "postcss": "^8.4.29",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.0.2",
     "vite": "^4.4.5",
-    "vite-svg-loader": "^4.0.0",
     "vue-tsc": "^1.8.5"
   }
 }
diff --git a/vite.config.ts b/vite.config.ts
index cdbff90..5bcbbcd 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,8 +1,7 @@
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
-import svgLoader from 'vite-svg-loader';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [vue(), svgLoader()],
+    plugins: [vue()],
 });

From 56ee6e92fccd9da79e7293539c7416a452ba560d Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Sun, 3 Sep 2023 01:50:03 +0300
Subject: [PATCH 18/27] asset states moved into use function

---
 src/store/assets.ts | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/store/assets.ts b/src/store/assets.ts
index d57ed11..3b3f636 100644
--- a/src/store/assets.ts
+++ b/src/store/assets.ts
@@ -4,19 +4,21 @@ import { getFiatAssets, getGoldAssets } from '../server/api';
 
 type Category = 'fiat' | 'gold';
 
-const category = ref<Category>('fiat');
-const assets = ref<Asset[]>([]);
+export function useAssets() {
+    // states
+    const assets = ref<Asset[]>([]);
+    const category = ref<Category>('fiat');
 
-const load = async () => {
-    const fetch = {
-        fiat: getFiatAssets,
-        gold: getGoldAssets,
-    };
+    // actions
+    const load = async () => {
+        const fetch = {
+            fiat: getFiatAssets,
+            gold: getGoldAssets,
+        };
 
-    assets.value = await fetch[category.value]();
-};
+        assets.value = await fetch[category.value]();
+    };
 
-export const useAssets = () => {
     // load assets when category changes
     watch(category, async () => load());
 
@@ -28,4 +30,4 @@ export const useAssets = () => {
         assets,
         load,
     };
-};
+}

From 3d0b4d85f791a3f58788733eef9bf0d2a8c003c2 Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Sun, 3 Sep 2023 01:51:27 +0300
Subject: [PATCH 19/27] asset category moved to types

---
 src/server/types.ts | 2 ++
 src/store/assets.ts | 6 ++----
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/server/types.ts b/src/server/types.ts
index 2d7e638..1009eb8 100644
--- a/src/server/types.ts
+++ b/src/server/types.ts
@@ -1,3 +1,5 @@
+export type AssetCategory = 'fiat' | 'gold';
+
 export type TransactionType = 'buy' | 'sell';
 
 export interface Transaction {
diff --git a/src/store/assets.ts b/src/store/assets.ts
index 3b3f636..a82c482 100644
--- a/src/store/assets.ts
+++ b/src/store/assets.ts
@@ -1,13 +1,11 @@
 import { onMounted, ref, watch } from 'vue';
-import { Asset } from '../server/types';
+import { Asset, AssetCategory } from '../server/types';
 import { getFiatAssets, getGoldAssets } from '../server/api';
 
-type Category = 'fiat' | 'gold';
-
 export function useAssets() {
     // states
     const assets = ref<Asset[]>([]);
-    const category = ref<Category>('fiat');
+    const category = ref<AssetCategory>('fiat');
 
     // actions
     const load = async () => {

From c46c7b4f7ae73bd4c896724d23bcd1aa69155ba1 Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Sun, 3 Sep 2023 02:17:05 +0300
Subject: [PATCH 20/27] tabs refactored

---
 src/components/ui/Tabs.vue | 16 +++++++++++++++-
 src/pages/Assets.vue       | 13 +++----------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/components/ui/Tabs.vue b/src/components/ui/Tabs.vue
index 2a107c0..65c0698 100644
--- a/src/components/ui/Tabs.vue
+++ b/src/components/ui/Tabs.vue
@@ -4,8 +4,12 @@ import Tab from "./Tab.vue";
 interface Props {
   boxed?: boolean;
   block?: boolean;
+  options?: string[];
+  modelValue?: string;
 }
 
+defineEmits(["update:modelValue"]);
+
 defineProps<Props>();
 </script>
 
@@ -19,7 +23,17 @@ defineProps<Props>();
       },
     ]"
   >
-    <slot />
+    <slot>
+      <Tab
+        class="capitalize"
+        v-for="opt in options"
+        :key="opt"
+        :active="opt === modelValue"
+        @click.prevent="$emit('update:modelValue', opt)"
+        v-html="opt"
+        bordered
+      />
+    </slot>
 
     <!-- this fills the space till the end of the line -->
     <Tab v-if="block" class="w-full cursor-default" bordered />
diff --git a/src/pages/Assets.vue b/src/pages/Assets.vue
index ca279a2..b0fd31e 100644
--- a/src/pages/Assets.vue
+++ b/src/pages/Assets.vue
@@ -2,9 +2,10 @@
 import { useAssets } from "../store/assets";
 import AssetList from "../components/AssetList.vue";
 import Tabs from "../components/ui/Tabs.vue";
-import Tab from "../components/ui/Tab.vue";
 
 const { category, assets } = useAssets();
+
+const tabOptions = ["fiat", "gold"];
 </script>
 
 <template>
@@ -13,15 +14,7 @@ const { category, assets } = useAssets();
       <h1 class="text-4xl">Assets</h1>
     </header>
 
-    <Tabs block>
-      <Tab :active="category === 'fiat'" @click.prevent="category = 'fiat'" bordered>
-        Fiat
-      </Tab>
-
-      <Tab :active="category === 'gold'" @click.prevent="category = 'gold'" bordered>
-        Gold
-      </Tab>
-    </Tabs>
+    <Tabs :options="tabOptions" v-model="category" block />
 
     <!-- assets -->
     <section>

From 29fbffc765c4a6a2572339d93592f35621c668b5 Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Sun, 3 Sep 2023 02:26:21 +0300
Subject: [PATCH 21/27] asset modal category tab celanup

---
 src/components/AssetModal.vue | 15 ++++++++++++++-
 src/pages/Portfolio.vue       |  8 ++++++--
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/AssetModal.vue b/src/components/AssetModal.vue
index 7e3f584..60567a2 100644
--- a/src/components/AssetModal.vue
+++ b/src/components/AssetModal.vue
@@ -1,21 +1,32 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import { useRouter } from "vue-router";
-import { Asset } from "../server/types";
+import { Asset, AssetCategory } from "../server/types";
 import Modal from "./ui/Modal.vue";
 import Input from "./ui/Input.vue";
 import AssetList from "./AssetList.vue";
+import Tabs from "./ui/Tabs.vue";
 
 interface Props {
   assets: Asset[];
+  category: AssetCategory;
 }
 
+const emit = defineEmits(["update:category"]);
+
 const props = defineProps<Props>();
 
 const open = ref(false);
 const router = useRouter();
 const assetCode = ref("");
 
+const tabOptions = ["fiat", "gold"];
+
+const categoryProxy = computed({
+  get: () => props.category,
+  set: (val) => emit("update:category", val),
+});
+
 const filteredAssets = computed(() => {
   const code = assetCode.value.toLowerCase();
   return code === ""
@@ -40,6 +51,8 @@ defineExpose({ open });
 
     <Input type="search" v-model="assetCode" placeholder="Search" autofocus />
 
+    <Tabs :options="tabOptions" v-model="categoryProxy" block />
+
     <AssetList
       class="overflow-scroll h-80"
       :assets="filteredAssets"
diff --git a/src/pages/Portfolio.vue b/src/pages/Portfolio.vue
index f05960e..b87ae48 100644
--- a/src/pages/Portfolio.vue
+++ b/src/pages/Portfolio.vue
@@ -10,7 +10,7 @@ import Stat from "../components/ui/Stat.vue";
 import Stats from "../components/ui/Stats.vue";
 import Icon from "../components/ui/Icon.vue";
 
-const { assets } = useAssets();
+const { assets, category } = useAssets();
 const { load, holdings, cost, profit, profitPercent, balance } = useHoldings();
 
 const modal = ref<any>(null);
@@ -65,5 +65,9 @@ onMounted(async () => load());
     </section>
   </div>
 
-  <AssetModal ref="modal" :assets="assets" />
+  <AssetModal
+    ref="modal"
+    :assets="assets"
+    v-model:category="category"
+  />
 </template>

From df1f4a87aa801e588a8c7481a6931c693e84bafa Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Sun, 3 Sep 2023 02:35:13 +0300
Subject: [PATCH 22/27] asset modal cleanup

---
 src/components/AssetModal.vue | 15 ++-------------
 src/pages/Portfolio.vue       |  9 ++++++++-
 2 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/components/AssetModal.vue b/src/components/AssetModal.vue
index 60567a2..ba851f4 100644
--- a/src/components/AssetModal.vue
+++ b/src/components/AssetModal.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
-import { useRouter } from "vue-router";
 import { Asset, AssetCategory } from "../server/types";
 import Modal from "./ui/Modal.vue";
 import Input from "./ui/Input.vue";
@@ -12,14 +11,12 @@ interface Props {
   category: AssetCategory;
 }
 
-const emit = defineEmits(["update:category"]);
+const emit = defineEmits(["update:category", "select"]);
 
 const props = defineProps<Props>();
 
 const open = ref(false);
-const router = useRouter();
 const assetCode = ref("");
-
 const tabOptions = ["fiat", "gold"];
 
 const categoryProxy = computed({
@@ -34,14 +31,6 @@ const filteredAssets = computed(() => {
     : props.assets.filter((a) => a.code.toLowerCase().includes(code));
 });
 
-function addAsset(asset: Asset) {
-  router.push({
-    name: "holding",
-    params: { id: asset.code },
-    query: { add: 1 },
-  });
-}
-
 defineExpose({ open });
 </script>
 
@@ -56,7 +45,7 @@ defineExpose({ open });
     <AssetList
       class="overflow-scroll h-80"
       :assets="filteredAssets"
-      @select="addAsset"
+      @select="$emit('select', $event)"
       compact
     />
   </Modal>
diff --git a/src/pages/Portfolio.vue b/src/pages/Portfolio.vue
index b87ae48..c183c59 100644
--- a/src/pages/Portfolio.vue
+++ b/src/pages/Portfolio.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
-import { formatCurrency, priceColor } from "../utils";
 import { useHoldings } from "../store/holdings";
 import { useAssets } from "../store/assets";
+import { formatCurrency, priceColor } from "../utils";
 import HoldingList from "../components/HoldingList.vue";
 import AssetModal from "../components/AssetModal.vue";
 import Button from "../components/ui/Button.vue";
@@ -69,5 +69,12 @@ onMounted(async () => load());
     ref="modal"
     :assets="assets"
     v-model:category="category"
+    @select="
+      $router.push({
+        name: 'holding',
+        params: { id: $event.code },
+        query: { add: 1 },
+      })
+    "
   />
 </template>

From c78f22a1864c05581dde5bef9ed01d64f763ae40 Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Sun, 3 Sep 2023 02:40:23 +0300
Subject: [PATCH 23/27] useAssets moved to composables

---
 src/{store => composables}/assets.ts | 0
 src/pages/Assets.vue                 | 2 +-
 src/pages/Portfolio.vue              | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename src/{store => composables}/assets.ts (100%)

diff --git a/src/store/assets.ts b/src/composables/assets.ts
similarity index 100%
rename from src/store/assets.ts
rename to src/composables/assets.ts
diff --git a/src/pages/Assets.vue b/src/pages/Assets.vue
index b0fd31e..dd0907f 100644
--- a/src/pages/Assets.vue
+++ b/src/pages/Assets.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useAssets } from "../store/assets";
+import { useAssets } from "../composables/assets";
 import AssetList from "../components/AssetList.vue";
 import Tabs from "../components/ui/Tabs.vue";
 
diff --git a/src/pages/Portfolio.vue b/src/pages/Portfolio.vue
index c183c59..f65f112 100644
--- a/src/pages/Portfolio.vue
+++ b/src/pages/Portfolio.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
+import { useAssets } from "../composables/assets";
 import { useHoldings } from "../store/holdings";
-import { useAssets } from "../store/assets";
 import { formatCurrency, priceColor } from "../utils";
 import HoldingList from "../components/HoldingList.vue";
 import AssetModal from "../components/AssetModal.vue";

From 39f00c60cf1f7c00c3d22ce5ab3d7382ad82421c Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Sun, 3 Sep 2023 03:11:32 +0300
Subject: [PATCH 24/27] portfolio composable extracted from holdings

---
 src/composables/portfolio.ts | 38 ++++++++++++++++++++++++++++++++++++
 src/pages/Portfolio.vue      | 11 ++++-------
 src/store/holdings.ts        | 18 -----------------
 3 files changed, 42 insertions(+), 25 deletions(-)
 create mode 100644 src/composables/portfolio.ts

diff --git a/src/composables/portfolio.ts b/src/composables/portfolio.ts
new file mode 100644
index 0000000..25d0ab5
--- /dev/null
+++ b/src/composables/portfolio.ts
@@ -0,0 +1,38 @@
+import { onMounted, ref } from 'vue';
+import { Holding } from '../server/types';
+import { getHoldings } from '../server/api';
+
+export function usePortfolio() {
+    // state
+    const balance = ref(0);
+    const cost = ref(0);
+    const profit = ref(0);
+    const profitPercent = ref(0);
+    const holdings = ref<Holding[]>([]);
+
+    // actions
+    const load = async () => {
+        holdings.value = await getHoldings();
+
+        holdings.value.forEach((holding) => {
+            cost.value += holding.cost;
+            balance.value += holding.amount * holding.price;
+        });
+
+        profit.value = balance.value - cost.value;
+        profitPercent.value = (profit.value / cost.value) * 100;
+    };
+
+    // load assets on mount
+    onMounted(async () => load());
+
+    // expose
+    return {
+        balance,
+        cost,
+        profit,
+        profitPercent,
+        holdings,
+        load,
+    };
+}
diff --git a/src/pages/Portfolio.vue b/src/pages/Portfolio.vue
index f65f112..10993be 100644
--- a/src/pages/Portfolio.vue
+++ b/src/pages/Portfolio.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { ref } from "vue";
 import { useAssets } from "../composables/assets";
-import { useHoldings } from "../store/holdings";
+import { usePortfolio } from "../composables/portfolio";
 import { formatCurrency, priceColor } from "../utils";
 import HoldingList from "../components/HoldingList.vue";
 import AssetModal from "../components/AssetModal.vue";
@@ -11,11 +11,9 @@ import Stats from "../components/ui/Stats.vue";
 import Icon from "../components/ui/Icon.vue";
 
 const { assets, category } = useAssets();
-const { load, holdings, cost, profit, profitPercent, balance } = useHoldings();
+const { holdings, cost, profit, profitPercent, balance } = usePortfolio();
 
 const modal = ref<any>(null);
-
-onMounted(async () => load());
 </script>
 
 <template>
@@ -54,8 +52,7 @@ onMounted(async () => load());
       </Stat>
 
       <Stat label="Total Profit / Loss" :variant="priceColor(profit)" size="sm">
-        {{ profitPercent }}
-        ({{ formatCurrency(profit) }})
+        {{ profitPercent.toFixed(2) }} % ({{ formatCurrency(profit) }})
       </Stat>
     </Stats>
 
diff --git a/src/store/holdings.ts b/src/store/holdings.ts
index 5f2850c..d89b74c 100644
--- a/src/store/holdings.ts
+++ b/src/store/holdings.ts
@@ -10,20 +10,6 @@ const holding = computed(() =>
     holdings.value.find((h) => h.code === selectedCode.value)
 );
 
-const cost = computed<number>(() =>
-    holdings.value.reduce((acc, { cost }) => acc + cost, 0)
-);
-
-const balance = computed<number>(() =>
-    holdings.value.reduce((acc, { amount, price }) => acc + amount * price, 0)
-);
-
-const profit = computed<number>(() => balance.value - cost.value);
-
-const profitPercent = computed<string>(() =>
-    ((profit.value / cost.value) * 100).toFixed(2).concat('%')
-);
-
 async function load() {
     holdings.value = await getHoldings();
 }
@@ -36,10 +22,6 @@ async function selectHolding(code: string) {
 export const useHoldings = () => ({
     holdings,
     holding,
-    cost,
-    balance,
-    profit,
-    profitPercent,
     load,
     selectHolding,
 });

From da3df44c58ecce5030091bf95109b8cecdff69b3 Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Sun, 3 Sep 2023 03:42:06 +0300
Subject: [PATCH 25/27] holdings refactored and moved to composables

---
 src/composables/holdings.ts | 29 +++++++++++++++++++++++++++++
 src/pages/Holding.vue       | 19 ++++++++++---------
 src/store/holdings.ts       | 27 ---------------------------
 3 files changed, 39 insertions(+), 36 deletions(-)
 create mode 100644 src/composables/holdings.ts
 delete mode 100644 src/store/holdings.ts

diff --git a/src/composables/holdings.ts b/src/composables/holdings.ts
new file mode 100644
index 0000000..8af41c1
--- /dev/null
+++ b/src/composables/holdings.ts
@@ -0,0 +1,29 @@
+import { computed, onMounted, ref } from 'vue';
+import { Holding } from '../server/types';
+import { getHoldings } from '../server/api';
+
+export function useHoldings() {
+    // state
+    const holdings = ref<Holding[]>([]);
+    const selectedCode = ref<string | null>(null);
+
+    // getters
+    const holding = computed(() =>
+        holdings.value.find((h) => h.code === selectedCode.value)
+    );
+
+    // actions
+    async function load() {
+        holdings.value = await getHoldings();
+    }
+
+    // load on mount
+    onMounted(load);
+
+    return {
+        selectedCode,
+        holdings,
+        holding,
+        load,
+    };
+}
diff --git a/src/pages/Holding.vue b/src/pages/Holding.vue
index 99c965e..b0ef1f1 100644
--- a/src/pages/Holding.vue
+++ b/src/pages/Holding.vue
@@ -2,13 +2,6 @@
 import { useRoute } from "vue-router";
 import { onMounted, ref } from "vue";
 import { Transaction } from "../server/types";
-import { useHoldings } from "../store/holdings";
-import { useTransactions } from "../store/transactions";
-import Button from "../components/ui/Button.vue";
-import Stat from "../components/ui/Stat.vue";
-import Stats from "../components/ui/Stats.vue";
-import TransactionList from "../components/TransactionList.vue";
-import TransactionModal from "../components/TransactionModal.vue";
 import {
   formatNumber,
   formatCurrency,
@@ -18,7 +11,14 @@ import {
   getProfitPercent,
   getBalance,
 } from "../utils";
+import { useHoldings } from "../composables/holdings";
+import { useTransactions } from "../store/transactions";
+import Button from "../components/ui/Button.vue";
 import Icon from "../components/ui/Icon.vue";
+import Stat from "../components/ui/Stat.vue";
+import Stats from "../components/ui/Stats.vue";
+import TransactionList from "../components/TransactionList.vue";
+import TransactionModal from "../components/TransactionModal.vue";
 
 const route = useRoute();
 
@@ -28,7 +28,8 @@ const createTx = (code = route.params.id as any, ts = Date.now()): Transaction =
 const modal = ref<any>(null);
 const txForm = ref<Transaction>(createTx());
 const txStore = useTransactions();
-const { selectHolding, holding } = useHoldings();
+
+const { selectedCode, holding } = useHoldings();
 
 function onCreate() {
   modal.value.open = true;
@@ -49,7 +50,7 @@ function onSave(tx: Transaction) {
 }
 
 onMounted(async () => {
-  await selectHolding(route.params.id as string);
+  selectedCode.value = route.params.id as any;
 
   if (route.query.add) {
     modal.value.open = true;
diff --git a/src/store/holdings.ts b/src/store/holdings.ts
deleted file mode 100644
index d89b74c..0000000
--- a/src/store/holdings.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { computed, ref } from 'vue';
-import { Holding } from '../server/types';
-import { getHoldings } from '../server/api';
-
-const selectedCode = ref<string | null>(null);
-
-const holdings = ref<Holding[]>([]);
-
-const holding = computed(() =>
-    holdings.value.find((h) => h.code === selectedCode.value)
-);
-
-async function load() {
-    holdings.value = await getHoldings();
-}
-
-async function selectHolding(code: string) {
-    await load();
-    selectedCode.value = code;
-}
-
-export const useHoldings = () => ({
-    holdings,
-    holding,
-    load,
-    selectHolding,
-});

From a01f01fb2632c6fcacc24c2f73883b105a8ed52f Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Sun, 3 Sep 2023 04:02:42 +0300
Subject: [PATCH 26/27] transactions store removed

---
 src/composables/holdings.ts |  3 +++
 src/pages/Holding.vue       | 10 +++++-----
 src/store/transactions.ts   | 32 --------------------------------
 3 files changed, 8 insertions(+), 37 deletions(-)
 delete mode 100644 src/store/transactions.ts

diff --git a/src/composables/holdings.ts b/src/composables/holdings.ts
index 8af41c1..efbfaf8 100644
--- a/src/composables/holdings.ts
+++ b/src/composables/holdings.ts
@@ -1,6 +1,7 @@
 import { computed, onMounted, ref } from 'vue';
 import { Holding } from '../server/types';
 import { getHoldings } from '../server/api';
+import { setTransaction, removeTransaction } from '../server/api';
 
 export function useHoldings() {
     // state
@@ -25,5 +26,7 @@ export function useHoldings() {
         holdings,
         holding,
         load,
+        setTransaction,
+        removeTransaction,
     };
 }
diff --git a/src/pages/Holding.vue b/src/pages/Holding.vue
index b0ef1f1..dbe035d 100644
--- a/src/pages/Holding.vue
+++ b/src/pages/Holding.vue
@@ -12,7 +12,6 @@ import {
   getBalance,
 } from "../utils";
 import { useHoldings } from "../composables/holdings";
-import { useTransactions } from "../store/transactions";
 import Button from "../components/ui/Button.vue";
 import Icon from "../components/ui/Icon.vue";
 import Stat from "../components/ui/Stat.vue";
@@ -27,9 +26,8 @@ const createTx = (code = route.params.id as any, ts = Date.now()): Transaction =
 
 const modal = ref<any>(null);
 const txForm = ref<Transaction>(createTx());
-const txStore = useTransactions();
 
-const { selectedCode, holding } = useHoldings();
+const { selectedCode, holding, setTransaction, removeTransaction, load } = useHoldings();
 
 function onCreate() {
   modal.value.open = true;
@@ -42,11 +40,13 @@ function onEdit(tx: Transaction) {
 }
 
 function onRemove(tx: Transaction) {
-  txStore.removeTransaction(tx.id);
+  removeTransaction(tx.id);
+  load();
 }
 
 function onSave(tx: Transaction) {
-  txStore.setTransaction(tx);
+  setTransaction(tx);
+  load();
 }
 
 onMounted(async () => {
diff --git a/src/store/transactions.ts b/src/store/transactions.ts
deleted file mode 100644
index 6496eab..0000000
--- a/src/store/transactions.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { computed, ref } from 'vue';
-import { Transaction } from '../server/types';
-import {
-    onTransactions,
-    getTransaction,
-    setTransaction,
-    removeTransaction,
-} from '../server/api';
-
-const transactions = ref<Transaction[]>([]);
-
-const transactionMap = computed<Record<string, Transaction[]>>(() =>
-    transactions.value.reduce(
-        (acc, tx) => ({ ...acc, [tx.code]: [...(acc[tx.code] || []), tx] }),
-        {} as any
-    )
-);
-
-async function load() {
-    // state.all = await getTransactions();
-}
-
-onTransactions((txs: any) => (transactions.value = txs));
-
-export const useTransactions = () => ({
-    transactions,
-    transactionMap,
-    load,
-    getTransaction,
-    setTransaction,
-    removeTransaction,
-});

From cb0ea6b7a21ebe0a5e3f16c22b8e1c1a50d98bcf Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Sun, 3 Sep 2023 04:36:06 +0300
Subject: [PATCH 27/27] refresh load single holding filtering with query on
 firestore

---
 src/composables/firestore.ts   | 14 ++++++++++++--
 src/composables/holdings.ts    |  9 ++++++++-
 src/pages/Holding.vue          | 12 +++++++++---
 src/server/api/holdings.ts     | 29 +++++++++++++++++++++++++++++
 src/server/api/transactions.ts |  7 +++++--
 5 files changed, 63 insertions(+), 8 deletions(-)

diff --git a/src/composables/firestore.ts b/src/composables/firestore.ts
index 8942832..d14daef 100644
--- a/src/composables/firestore.ts
+++ b/src/composables/firestore.ts
@@ -9,11 +9,14 @@ import {
     deleteDoc,
     onSnapshot,
     DocumentReference,
+    query,
+    where as _where,
 } from 'firebase/firestore';
 import { useAuth } from './auth';
 import { useFirebase } from './firebase';
 
 type Listener<T> = (data: T) => void;
+type Where = { key: string; value?: string };
 
 // get a reference to the database service
 const db = getFirestore(useFirebase());
@@ -21,9 +24,16 @@ const db = getFirestore(useFirebase());
 /**
  * Find all records in the given collection
  */
-async function findAll<T>(path: string): Promise<T[]> {
+async function findAll<T>(path: string, where?: Where): Promise<T[]> {
     const colRef = getUserColRef(path);
-    const snapshot = await getDocs(colRef);
+    let q = colRef as any;
+
+    // apply where clause if provided
+    if (where?.key && where.value !== undefined) {
+        q = query(colRef, _where(where.key, '==', where.value));
+    }
+
+    const snapshot = await getDocs(q);
 
     return snapshot.docs.map(transformDoc) as T[];
 }
diff --git a/src/composables/holdings.ts b/src/composables/holdings.ts
index efbfaf8..e7f9077 100644
--- a/src/composables/holdings.ts
+++ b/src/composables/holdings.ts
@@ -1,6 +1,6 @@
 import { computed, onMounted, ref } from 'vue';
 import { Holding } from '../server/types';
-import { getHoldings } from '../server/api';
+import { getHoldings, getHolding } from '../server/api';
 import { setTransaction, removeTransaction } from '../server/api';
 
 export function useHoldings() {
@@ -18,6 +18,12 @@ export function useHoldings() {
         holdings.value = await getHoldings();
     }
 
+    async function refresh() {
+        if (selectedCode.value) {
+            holdings.value = [await getHolding(selectedCode.value)];
+        }
+    }
+
     // load on mount
     onMounted(load);
 
@@ -26,6 +32,7 @@ export function useHoldings() {
         holdings,
         holding,
         load,
+        refresh,
         setTransaction,
         removeTransaction,
     };
diff --git a/src/pages/Holding.vue b/src/pages/Holding.vue
index dbe035d..ca97867 100644
--- a/src/pages/Holding.vue
+++ b/src/pages/Holding.vue
@@ -27,7 +27,13 @@ const createTx = (code = route.params.id as any, ts = Date.now()): Transaction =
 const modal = ref<any>(null);
 const txForm = ref<Transaction>(createTx());
 
-const { selectedCode, holding, setTransaction, removeTransaction, load } = useHoldings();
+const {
+  selectedCode,
+  holding,
+  setTransaction,
+  removeTransaction,
+  refresh,
+} = useHoldings();
 
 function onCreate() {
   modal.value.open = true;
@@ -41,12 +47,12 @@ function onEdit(tx: Transaction) {
 
 function onRemove(tx: Transaction) {
   removeTransaction(tx.id);
-  load();
+  refresh();
 }
 
 function onSave(tx: Transaction) {
   setTransaction(tx);
-  load();
+  refresh();
 }
 
 onMounted(async () => {
diff --git a/src/server/api/holdings.ts b/src/server/api/holdings.ts
index c8f93b4..361b9a9 100644
--- a/src/server/api/holdings.ts
+++ b/src/server/api/holdings.ts
@@ -2,6 +2,35 @@ import { Asset, Holding } from '../types';
 import { getFiatAssets, getGoldAssets } from './assets';
 import { getTransactions } from './transactions';
 
+export async function getHolding(code: string) {
+    // fetch all transactions with the given code
+    const transactions = await getTransactions(code);
+
+    // fetch current asset prices
+    const assetMap = await getAssetMap();
+
+    const holding = <Holding>{
+        code,
+        name: assetMap[code].name,
+        price: assetMap[code].buying,
+        amount: 0,
+        cost: 0,
+        transactions: [],
+    };
+
+    // calculate amount & cost
+    transactions.forEach(({ type, amount, price }) => {
+        const isBuy = type === 'buy';
+        holding.amount += isBuy ? amount : -amount;
+        holding.cost += (isBuy ? price : -price) * amount;
+    });
+
+    // add transactions
+    holding.transactions = transactions;
+
+    return holding;
+}
+
 export async function getHoldings() {
     // fetch all transactions
     const transactions = await getTransactions();
diff --git a/src/server/api/transactions.ts b/src/server/api/transactions.ts
index c5b9811..dd0fd66 100644
--- a/src/server/api/transactions.ts
+++ b/src/server/api/transactions.ts
@@ -5,8 +5,11 @@ const PATH = 'transactions';
 
 const { findAll, findOne, removeOne, saveOne, watch } = useFirestore();
 
-export async function getTransactions() {
-    return await findAll<Transaction>(PATH);
+export async function getTransactions(code?: string) {
+    return await findAll<Transaction>(PATH, {
+        key: 'code',
+        value: code,
+    });
 }
 
 export async function getTransaction(id: string) {