Merge pull request #19 from leon-luna-ray/dev

Dev

client/src/App.vue

@@ -9,8 +9,21 @@
 </template>
 
 <script setup>
+import { watch } from 'vue';
 import { RouterView } from 'vue-router';
+import { useStorage } from '@vueuse/core';
+import { useBudgetStore } from '@/stores/budget';
 
 import Header from '@/components/Header.vue';
 import Footer from '@/components/Footer.vue';
+
+const authState = useStorage('exchequer', { token: null });
+const budgetStore = useBudgetStore();
+
+// Watchers
+watch(authState, () => {
+  if (!authState.value?.token) {
+    budgetStore.clearUserData();
+  }
+});
 </script>

client/src/assets/styles/base.css

@@ -54,6 +54,12 @@ h4,
 h5 {
   font-family: 'Lora', serif;
   font-weight: 600;
+  margin-block-start: 0;
+  margin-block-end: 0;
+}
+p {
+  margin-block-start: 0;
+  margin-block-end: 0;
 }
 ul {
   padding-inline-start: 0;

client/src/assets/styles/components/ListTransaction.css

@@ -15,7 +15,6 @@
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.8);
-  /* display: flex; */
   align-items: center;
   justify-content: space-between;
   z-index: 1;

client/src/assets/styles/pages/DashboardPage.css

@@ -2,16 +2,64 @@
   text-align: center;
 }
 
-.content {
+.inner {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 4rem;
 }
 
+.budget-list {
+  list-style: none;
+  padding: 2rem 0;
+}
+
+.budget-list a {
+  display: flex;
+  gap: 1rem;
+}
+.budget-list li {
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+}
+/* .budget-list li:hover {
+  cursor: pointer;
+} */
+
+.budget-list li:hover .overlay {
+  display: flex;
+}
+
+.budget-list .overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: end;
+  z-index: 1;
+  color: white;
+  display: none;
+}
+
+.description {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 75%;
+}
+
 
 @media screen and (max-width: 768px) {
-  .content {
+  .inner,
+  .budget-list {
     grid-template-columns: repeat(1, 1fr);
     gap: 2rem;
   }
+
+  .user-budgets h2 {
+    text-align: center;
+    padding-bottom: 2rem;
+  }
 }

client/src/assets/styles/utilities.css

@@ -26,6 +26,11 @@
   flex-direction: column;
   row-gap: 0.3rem;
 }
+.flex-col-05 {
+  display: flex;
+  flex-direction: column;
+  row-gap: 0.5rem;
+}
 .flex-col-1 {
   display: flex;
   flex-direction: column;
@@ -54,3 +59,12 @@
     height: 100%;
   }
 }
+
+/* Animation */
+.scale-div {
+  transition: transform 0.3s ease-in-out;
+}
+
+.scale-div:hover {
+  transform: scale(1.01);
+}

client/src/components/FormBudget.vue

@@ -0,0 +1,25 @@
+<template>
+    <form @submit.prevent="budgetStore.postNewBudget" class="flex-col-1">
+        <label for="description">Title</label>
+        <input type="text" id="title" v-model="budgetFormData.title">
+
+        <label for="description">Description</label>
+        <input type="text" id="description" v-model="budgetFormData.description">
+
+        <label for="amount">Amount</label>
+        <input type="number" id="amount" v-model="budgetFormData.amount" required>
+
+        <label for="localCurrency">Local Currency:</label>
+        <input type="text" id="localCurrency" v-model="budgetFormData.localCurrency">
+
+        <button type="submit">Submit</button>
+    </form>
+</template>
+
+<script setup>
+import { storeToRefs } from 'pinia';
+import { useBudgetStore } from '@/stores/budget';
+
+const budgetStore = useBudgetStore();
+const { budgetFormData } = storeToRefs(budgetStore);
+</script>

client/src/components/icons/IconBudget.vue

@@ -0,0 +1,16 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="currentColor"
+        stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <!-- Box -->
+        <rect x="4" y="2" width="16" height="20" rx="2" ry="2" />
+
+        <!-- Receipt lines -->
+        <line x1="4" y1="6" x2="20" y2="6" />
+        <line x1="4" y1="10" x2="20" y2="10" />
+        <line x1="4" y1="14" x2="20" y2="14" />
+
+        <!-- Dollar sign -->
+        <line x1="12" y1="16" x2="12" y2="18" />
+        <line x1="11" y1="17" x2="13" y2="17" />
+    </svg>
+</template>

client/src/lib/date.js

@@ -0,0 +1,5 @@
+export const formatTimestamp = (timestamp) => {
+    const options = { day: 'numeric', month: 'short', year: 'numeric' };
+    const formattedDate = new Date(timestamp).toLocaleDateString(undefined, options);
+    return formattedDate;
+};

client/src/pages/BudgetDetailPage.vue

@@ -0,0 +1,27 @@
+<template>
+    <div v-if="budgetDetailData" class="container flex-col-1">
+        <h1>Budget Detail</h1>
+        <div class="flex-col-03">
+            <h2>{{ budgetDetailData.title }}</h2>
+            <p>{{ budgetDetailData.description }}</p>
+            <p>{{ formatTimestamp(budgetDetailData.createdAt) }}</p>
+            <p>Currency: {{ budgetDetailData.localCurrency }}</p>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useRoute } from 'vue-router';
+import { useBudgetStore } from '@/stores/budget';
+import { formatTimestamp } from '@/lib/date'
+
+const route = useRoute();
+const budgetStore = useBudgetStore();
+const { budgetDetailData } = storeToRefs(budgetStore);
+
+onMounted(async () => {
+    await budgetStore.fetchBudgetDetail(route.params.id);
+})
+</script>

client/src/pages/DashboardPage.vue

@@ -1,19 +1,34 @@
 <template>
     <main id="dashboard" class="page">
-        <div class="container inner flex-col-1">
-            <div class="title">
+        <div class="container inner">
+            <!-- <div class="title">
                 <h1>Dashboard</h1>
-            </div>
-            <div class="content">
-                <div class="transation">
-                    <h2>New Transaction</h2>
-                    <FormExpense />
-                </div>
-                <div class="posts">
-                    <h2>Posts</h2>
-                    <ListTransaction v-if="posts" :posts="posts" />
+            </div> -->
+            <section class="user-budgets">
+                <h2>Budgets</h2>
+                <ul v-if="userBudgets" class="budget-list flex-col-4">
+                    <li v-for="item in userBudgets" class="scale-div">
+                        <router-link :to="`/budget/${item._id}`">
+                            <IconBudget />
+                            <div class="flex-col-03">
+                                <h3 class="font-quicksand">{{ item.title }}</h3>
+                                <p v-if="item.description">{{ item.description }}</p>
+                            </div>
+                            <div class="overlay">
+                                <button @click="budgetStore.deleteBudget(item._id)">Delete</button>
+                            </div>
+                        </router-link>
+
+                    </li>
+                </ul>
+                <div v-else class="no-items">
+                    No budgets found.
                 </div>
-            </div>
+            </section>
+            <section>
+                <h2>New Budget</h2>
+                <FormBudget />
+            </section>
         </div>
     </main>
 </template>
@@ -23,13 +38,18 @@
 </style>
 
 <script setup>
+import { onBeforeMount } from 'vue';
 import { storeToRefs } from 'pinia';
-import { usePostStore } from '@/stores/posts';
-import FormExpense from '@/components/FormExpense.vue';
-import ListTransaction from '../components/ListTransaction.vue';
+import { useBudgetStore } from '@/stores/budget';
+
+import FormBudget from '@/components/FormBudget.vue'
+import IconBudget from '@/components/icons/IconBudget.vue'
 
-const postStore = usePostStore();
-const { posts } = storeToRefs(postStore);
+const budgetStore = useBudgetStore();
+const { userBudgets } = storeToRefs(budgetStore);
 
-postStore.fetchPosts();
+// Lifecycle
+onBeforeMount(async () => {
+    await budgetStore.fetchUserBudgets();
+})
 </script>

client/src/router/index.js

@@ -31,6 +31,19 @@ const routes = [
       }
     },
   },
+  {
+    path: '/budget/:id',
+    name: 'BudgetDetail',
+    component: () => import('@/pages/BudgetDetailPage.vue'),
+    props: true,
+    beforeEnter: (to, from, next) => {
+      if (authState.value.token) {
+        next();
+      } else {
+        next('/login');
+      }
+    },
+  },
 ];
 
 const router = createRouter({

client/src/stores/auth.js

@@ -4,13 +4,11 @@ import { useRouter } from 'vue-router';
 import { defineStore } from 'pinia';
 import { jwtDecode } from 'jwt-decode';
 import { useStorage } from '@vueuse/core';
-import { usePostStore } from '@/stores/posts';
 import { API_BASE_URL } from '@/lib/api';
 
 export const useAuthStore = defineStore('auth', () => {
   const router = useRouter();
   const authState = useStorage('exchequer', { token: null });
-  const postStore = usePostStore();
 
   // State
   const loginEmail = ref('');
@@ -79,7 +77,6 @@ export const useAuthStore = defineStore('auth', () => {
       if (token) {
         authState.value.token = token;
         resetLoginValues();
-        postStore.fetchPosts();
         router.push('/dashboard');
       }
     } catch (error) {