Client - init dashboard components (wip)

fittrackee_client/src/components/Dashboard/Timeline.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Timeline</div>
+</template>

fittrackee_client/src/components/Dashboard/UserCalendar.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Calendar</div>
+</template>

fittrackee_client/src/components/Dashboard/UserMonthStats.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Month stats</div>
+</template>

fittrackee_client/src/components/Dashboard/UserRecords.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>User records</div>
+</template>

fittrackee_client/src/views/DashBoard.vue

@@ -3,12 +3,26 @@
     <div class="container">
       <UserStats :user="authUser" v-if="authUser.username" />
     </div>
+    <div class="container">
+      <div class="left-container dashboard-container">
+        <UserMonthStats :user="authUser" />
+        <UserRecords />
+      </div>
+      <div class="right-container dashboard-container">
+        <UserCalendar />
+        <Timeline />
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
   import { computed, ComputedRef, defineComponent } from 'vue'
 
+  import Timeline from '@/components/Dashboard/Timeline.vue'
+  import UserCalendar from '@/components/Dashboard/UserCalendar.vue'
+  import UserMonthStats from '@/components/Dashboard/UserMonthStats.vue'
+  import UserRecords from '@/components/Dashboard/UserRecords.vue'
   import UserStats from '@/components/Dashboard/UserStats.vue'
   import { USER_STORE } from '@/store/constants'
   import { IAuthUserProfile } from '@/types/user'
@@ -17,6 +31,10 @@
   export default defineComponent({
     name: 'Dashboard',
     components: {
+      Timeline,
+      UserCalendar,
+      UserMonthStats,
+      UserRecords,
       UserStats,
     },
     setup() {
@@ -28,3 +46,17 @@
     },
   })
 </script>
+
+<style lang="scss">
+  @import '~@/scss/base';
+  .dashboard-container {
+    display: flex;
+    flex-direction: column;
+  }
+  .left-container {
+    width: 35%;
+  }
+  .right-container {
+    width: 65%;
+  }
+</style>