some really basic styling out of the way, ready to build out UI

budgit.client/index.html

@@ -16,7 +16,7 @@
     <strong>We're sorry but budgit.client doesn't work properly without JavaScript
       enabled. Please enable it to continue.</strong>
   </noscript>
-  <div id="app"></div>
+  <div id="app" class="h-screen"></div>
   <!-- built files will be auto injected -->
   <script type="module" src="./src/main.js"></script>
 </body>

budgit.client/src/App.vue

@@ -1,13 +1,13 @@
 <template>
-  <header>
+  <header class="text-slate-50">
     <Navbar />
   </header>
-  <main>
+  <main class="text-slate-50 bg-stone-900 h-full">
     <router-view />
   </main>
-  <footer>
+  <footer class="text-slate-50 bg-stone-800">
     <div>
-      Made with 💖 by CodeWorks
+      An <a href="https://github.com/annikyet">Annika</a> project.
     </div>
   </footer>
 </template>

budgit.client/src/components/Dropdown.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="component">
+
+
+  </div>
+</template>
+
+
+<script>
+export default {
+  setup(){
+    return {}
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+
+</style>

budgit.client/src/components/Login.vue

@@ -1,45 +1,23 @@
 <template>
   <span class="navbar-text">
-    <button
-      class="btn selectable text-success lighten-30 text-uppercase my-2 my-lg-0"
-      @click="login"
-      v-if="!user.isAuthenticated"
-    >
+    <button class="btn selectable text-success lighten-30 text-uppercase my-2 my-lg-0" @click="login"
+      v-if="!user.isAuthenticated">
       Login
     </button>
 
-    <div class="dropdown my-2 my-lg-0" v-else>
-      <div
-        class="dropdown-toggle selectable"
-        data-bs-toggle="dropdown"
-        aria-expanded="false"
-        id="authDropdown"
-      >
-        <div v-if="account.picture">
-          <img
-            :src="account.picture"
-            alt="account photo"
-            height="40"
-            class="rounded"
-          />
-          <span class="mx-3 text-success lighten-30">{{ account.name }}</span>
-        </div>
-      </div>
-      <div
-        class="dropdown-menu p-0 list-group w-100"
-        aria-labelledby="authDropdown"
-      >
+    <div class="" v-else>
+      <div class="flex" id="authDropdown">
         <router-link :to="{ name: 'Account' }">
-          <div class="list-group-item list-group-item-action hoverable">
-            Manage Account
+          <div class="flex">
+            <div v-if="account.picture" class="">
+              <img :src="account.picture" alt="account photo" height="40" class="max-h-8" />
+            </div>
+            <span class="mx-3 text-success lighten-30">{{ account.name }}</span>
           </div>
         </router-link>
-        <div
-          class="list-group-item list-group-item-action hoverable text-danger"
-          @click="logout"
-        >
+        <div class="hover:text-green-300" @click="logout">
           <i class="mdi mdi-logout"></i>
-          logout
+          <!-- logout -->
         </div>
       </div>
     </div>
@@ -69,15 +47,18 @@ export default {
 
 
 <style lang="scss" scoped>
+// @import "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css";
 .dropdown-menu {
   user-select: none;
   display: block;
   transform: scale(0);
   transition: all 0.15s linear;
 }
+
 .dropdown-menu.show {
   transform: scale(1);
 }
+
 .hoverable {
   cursor: pointer;
 }

budgit.client/src/components/Navbar.vue

@@ -1,36 +1,21 @@
 <template>
-  <nav class="navbar navbar-expand-lg navbar-dark bg-dark px-3">
-    <router-link class="navbar-brand d-flex" :to="{ name: 'Home' }">
-      <div class="d-flex flex-column align-items-center">
-        <img alt="logo" src="../assets/img/cw-logo.png" height="45" />
-      </div>
-    </router-link>
-    <button
-      class="navbar-toggler"
-      type="button"
-      data-bs-toggle="collapse"
-      data-bs-target="#navbarText"
-      aria-controls="navbarText"
-      aria-expanded="false"
-      aria-label="Toggle navigation"
-    >
-      <span class="navbar-toggler-icon" />
-    </button>
-    <div class="collapse navbar-collapse" id="navbarText">
-      <ul class="navbar-nav me-auto">
-        <li>
-          <router-link
-            :to="{ name: 'About' }"
-            class="btn text-success lighten-30 selectable text-uppercase"
-          >
-            About
-          </router-link>
-        </li>
-      </ul>
-      <!-- LOGIN COMPONENT HERE -->
-      <Login />
+  <nav class="flex justify-between items-end w-screen bg-stone-800 p-2">
+    <div class="flex justify-start items-end">
+      <router-link :to="{ name: 'Overview' }">
+        <h3 class="text-4xl mr-10 text-green-300 hover:text-slate-50">Budg.it</h3>
+      </router-link>
+      <router-link :to="{ name: 'Transactions' }">
+        <p class="hidden md:block">Transactions</p>
+      </router-link>
     </div>
+    <Login class="hidden md:block" />
+    <div class="block md:hidden mdi mdi-menu"></div>
   </nav>
+
+
+
+
+
 </template>
 
 <script>
@@ -45,9 +30,11 @@ export default {
 a:hover {
   text-decoration: none;
 }
+
 .nav-link {
   text-transform: uppercase;
 }
+
 .navbar-nav .router-link-exact-active {
   border-bottom: 2px solid var(--bs-success);
   border-bottom-left-radius: 0;

budgit.client/src/index.css

@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer components {
+  a {
+    @apply hover:text-green-300;
+  }
+}

budgit.client/src/pages/OverviewPage.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="component">
+    <h1>overviewpage</h1>
+
+  </div>
+</template>
+
+
+<script>
+export default {
+  setup(){
+    return {}
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+
+</style>

budgit.client/src/pages/TransactionsPage.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="component">
+    <h1>transactionspage</h1>
+
+  </div>
+</template>
+
+
+<script>
+export default {
+  setup(){
+    return {}
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+
+</style>

budgit.client/src/router.js

@@ -8,13 +8,13 @@ function loadPage(page) {
 const routes = [
   {
     path: '/',
-    name: 'Home',
-    component: loadPage('HomePage')
+    name: 'Overview',
+    component: loadPage('OverviewPage')
   },
   {
-    path: '/about',
-    name: 'About',
-    component: loadPage('AboutPage')
+    path: '/transactions',
+    name: 'Transactions',
+    component: loadPage('TransactionsPage')
   },
   {
     path: '/account',

budgit/server/controllers/TransactionsController.js

@@ -0,0 +1,46 @@
+import { Auth0Provider } from '@bcwdev/auth0provider'
+import { accountService } from '../services/AccountService'
+import { categoriesService } from '../services/CategoriesService'
+import { transactionsService } from '../services/TransactionsService'
+import BaseController from '../utils/BaseController'
+
+// export class CategoriesController extends BaseController {
+//   constructor() {
+//     super('api/categories')
+//     this.router
+//       .use(Auth0Provider.getAuthorizedUserInfo)
+//       .post('', this.create)
+//       .get('', this.getAll)
+//       .get('/:id', this.getById)
+//       .put('/:id', this.modify)
+//       .delete('/:id', this.remove)
+//   }
+
+export class TransactionsController extends BaseController {
+  constructor() {
+    super('api/transactions')
+    this.router
+      .use(Auth0Provider.getAuthorizedUserInfo)
+      .post('', this.create)
+      .get('', this.getAll)
+  }
+
+  async create(req, res, next) {
+    try {
+      req.body.accountId = req.userInfo.id
+      const dbTransaction = await transactionsService.create(req.body)
+      return res.send(dbTransaction)
+    } catch (error) {
+      next(error)
+    }
+  }
+
+  async getAll(req, res, next) {
+    try {
+      const allTransactions = await transactionsService.getAll(req.userInfo.id)
+      return res.send(allTransactions)
+    } catch (error) {
+      next(error)
+    }
+  }
+}

budgit/server/services/TransactionsService.js

@@ -0,0 +1,24 @@
+import { dbContext } from '../db/DbContext'
+import { BadRequest } from '../utils/Errors'
+
+class TransactionsService {
+async create(newTransaction) {
+  const dbTransaction = await dbContext.Transactions.create(newTransaction)
+  if (!dbTransaction) {
+    throw new BadRequest("transaction does not exist")
+  }
+  return dbTransaction
+}
+
+async getAll(accountId) {
+  if (!accountId) {
+    throw new BadRequest("User not logged in")
+  }
+  const allTransactions = await dbContext.Transactions.find({accountId: accountId})
+  return allTransactions
+}
+
+
+}
+
+export const transactionsService = new TransactionsService()