[WIP] Implement Latest Spending (#21)

Change Log:
- Add ExpenseList Component

frontend/expensia/app/scripts/store/index.js

@@ -11,19 +11,28 @@ const store = new Vuex.Store({
         id: 1,
         name: 'wife',
         amount: 2000,
-        category: 1,
+        category: {
+          id: 1,
+          name: 'test',
+        },
         created: '2022-12-2',
       },
       {
         id: 2,
         name: 'country',
         amount: 20,
-        category: 2,
+        category: {
+          id: 2,
+          name: 'test2',
+        },
         created: '2022-12-2',
       },
     ],
   },
   mutations: {},
+  getters: {
+    expenses: state => state.expenses,
+  },
 })
 
 export default store;

frontend/expensia/app/scripts/views/components/expense/ExpenseList.vue

@@ -0,0 +1,35 @@
+<template>
+  <ui-list :type="2">
+    <ui-item v-for="expense in expenses" :key="expense.id">
+      <ui-item-first-content>
+        <ui-icon>attach_money</ui-icon>
+        {{ expense.amount }}
+      </ui-item-first-content>
+
+      <ui-item-text-content>
+        <ui-item-text1>{{ expense.name }}</ui-item-text1>
+        <ui-item-text2>{{ expense.category.name }}</ui-item-text2>
+      </ui-item-text-content>
+      <ui-item-last-content>
+        <ui-icon-button icon="density_small"></ui-icon-button>
+      </ui-item-last-content>
+    </ui-item>
+  </ui-list>
+</template>
+
+<script>
+import {mapGetters} from "vuex";
+
+export default {
+  name: "ExpenseList",
+  computed: {
+    ...mapGetters([
+      'expenses',
+    ])
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/expensia/app/scripts/views/pages/HomeDashboard.vue

@@ -1,17 +1,18 @@
 <template>
   <div>
     <h1 class="page-title">Dashboard</h1>
-    <ui-list>
-      <ui-item v-for="i in 3" :key="i">
-        <ui-item-text-content>Line item</ui-item-text-content>
-      </ui-item>
-    </ui-list>
+    <expense-list></expense-list>
   </div>
 </template>
 
 <script>
+import ExpenseList from '@/views/components/expense/ExpenseList';
+
 export default {
-  name: "HomeDashboard"
+  name: "HomeDashboard",
+  components: {
+    ExpenseList,
+  },
 }
 </script>