Commits After Part 1

package-lock.json

@@ -1385,6 +1385,16 @@
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
       "dev": true
     },
+    "@nuxt/opencollective": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@nuxt/opencollective/-/opencollective-0.3.0.tgz",
+      "integrity": "sha512-Vf09BxCdj1iT2IRqVwX5snaY2WCTkvM0O4cWWSO1ThCFuc4if0Q/nNwAgCxRU0FeYHJ7DdyMUNSdswCLKlVqeg==",
+      "requires": {
+        "chalk": "^2.4.2",
+        "consola": "^2.10.1",
+        "node-fetch": "^2.6.0"
+      }
+    },
     "@soda/friendly-errors-webpack-plugin": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.7.1.tgz",
@@ -2607,7 +2617,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
       "requires": {
         "color-convert": "^1.9.0"
       }
@@ -3323,6 +3332,23 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "bootstrap": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.0.tgz",
+      "integrity": "sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA=="
+    },
+    "bootstrap-vue": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.16.0.tgz",
+      "integrity": "sha512-gLETwPmeRHCe5WHmhGxzb5PtTEuKqQPGl0TFvZ2Odbkg/7UuIHdqIexrJRerpnomP4ZzDQ+qYGL91Ls9lcQsJQ==",
+      "requires": {
+        "@nuxt/opencollective": "^0.3.0",
+        "bootstrap": ">=4.5.0 <5.0.0",
+        "popper.js": "^1.16.1",
+        "portal-vue": "^2.1.7",
+        "vue-functional-data-merge": "^3.1.0"
+      }
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -3883,7 +3909,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
       "requires": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -4419,7 +4444,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "requires": {
         "color-name": "1.1.3"
       }
@@ -4427,8 +4451,7 @@
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
-      "dev": true
     },
     "color-string": {
       "version": "1.5.3",
@@ -4631,6 +4654,11 @@
       "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==",
       "dev": true
     },
+    "consola": {
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/consola/-/consola-2.14.0.tgz",
+      "integrity": "sha512-A2j1x4u8d6SIVikhZROfpFJxQZie+cZOfQMyI/tu2+hWXe8iAv7R6FW6s6x04/7zBCst94lPddztot/d6GJiuQ=="
+    },
     "console-browserify": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz",
@@ -5239,8 +5267,12 @@
     "date-fns": {
       "version": "2.14.0",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.14.0.tgz",
-      "integrity": "sha512-1zD+68jhFgDIM0rF05rcwYO8cExdNqxjq4xP1QKM60Q45mnO6zaMWB4tOzrIr4M4GSLntsKeE4c9Bdl2jhL/yw==",
+      "integrity": "sha512-1zD+68jhFgDIM0rF05rcwYO8cExdNqxjq4xP1QKM60Q45mnO6zaMWB4tOzrIr4M4GSLntsKeE4c9Bdl2jhL/yw=="
-      "dev": true
+    },
+    "date-format-parse": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/date-format-parse/-/date-format-parse-0.2.5.tgz",
+      "integrity": "sha512-PzvB3p9bTxrGQbz3ZlO/kxgXzKZhMo4l0OQfPqVYjuwixHRS9yHH6cUJI9JG2Hh6iUQgh17T7w95lzQ131dS/g=="
     },
     "de-indent": {
       "version": "1.0.2",
@@ -6240,8 +6272,7 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
-      "dev": true
     },
     "escodegen": {
       "version": "1.14.3",
@@ -7628,8 +7659,7 @@
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
-      "dev": true
     },
     "has-symbol-support-x": {
       "version": "1.4.2",
@@ -10958,6 +10988,11 @@
         "semver": "^5.7.0"
       }
     },
+    "node-fetch": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz",
+      "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA=="
+    },
     "node-forge": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
@@ -12232,6 +12267,16 @@
         "ts-pnp": "^1.1.6"
       }
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
+    "portal-vue": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/portal-vue/-/portal-vue-2.1.7.tgz",
+      "integrity": "sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g=="
+    },
     "portfinder": {
       "version": "1.0.26",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.26.tgz",
@@ -14634,7 +14679,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
       "requires": {
         "has-flag": "^3.0.0"
       }
@@ -15584,6 +15628,11 @@
         }
       }
     },
+    "vue-functional-data-merge": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz",
+      "integrity": "sha512-leT4kdJVQyeZNY1kmnS1xiUlQ9z1B/kdBFCILIjYYQDqZgLqCLa0UhjSSeRX6c3mUe6U5qYeM8LrEqkHJ1B4LA=="
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -15630,6 +15679,16 @@
         }
       }
     },
+    "vue-router": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.3.4.tgz",
+      "integrity": "sha512-SdKRBeoXUjaZ9R/8AyxsdTqkOfMcI5tWxPZOUX5Ie1BTL5rPSZ0O++pbiZCeYeythiZIdLEfkDiQPKIaWk5hDg=="
+    },
+    "vue-select": {
+      "version": "3.10.7",
+      "resolved": "https://registry.npmjs.org/vue-select/-/vue-select-3.10.7.tgz",
+      "integrity": "sha512-6rvIYBNEp9y0xK/sq2ZzDCxKA2BoVNliyctOeMtzarQzvpLlab7l8zvqr2jhGZOxozp7jd2AvZxpF3Ivems2wQ=="
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
@@ -15664,6 +15723,20 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vue2-datepicker": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/vue2-datepicker/-/vue2-datepicker-3.6.1.tgz",
+      "integrity": "sha512-U6iQWSDsNoq/u6QJCtAMcyWlcZSx0rmPmqaJ8LQtGvwu9x12jXDoe3YNeG4y7E45OYAMLXs9WzGkDqDmNj3jkw==",
+      "requires": {
+        "date-fns": "^2.0.1",
+        "date-format-parse": "^0.2.5"
+      }
+    },
+    "vuex": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.5.1.tgz",
+      "integrity": "sha512-w7oJzmHQs0FM9LXodfskhw9wgKBiaB+totOdb8sNzbTB2KDCEEwEs29NzBZFh/lmEK1t5tDmM1vtsO7ubG1DFw=="
+    },
     "w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",

package.json

@@ -1,53 +1,46 @@
 {
-  "ManifestComments": [
-    "Only add dependencies that you want shipped to the end user, for everything else, use devDependencies, including things that will be bundled by webpack.",
-    "NW.js requires a name and a main, everything else is optional.",
-    "The build section is used by nwjs-builder-phoenix, see its documentation for more info",
-    "To turn spell checking off, remove it from the chromium-args in this file"
-  ],
   "name": "nw-vue",
   "version": "1.6.0",
-  "main": "http://localhost:8964",
-  "node-remote": "http://localhost:8964",
-  "node-main": "",
-  "window": {
-    "width": 960,
-    "height": 600,
-    "min_width": 700,
-    "min_height": 500,
-    "icon": "src/assets/vue.png"
-  },
   "private": true,
   "scripts": {
-    "start": "concurrently \"npm run serve\" \"wait-on http://localhost:8964 && nw .\"",
     "serve": "vue-cli-service serve --port=8964",
     "build": "npm run build:clean && npm run build:vue && npm run build:nw",
-    "build:clean": "rimraf ./dist-vue ./dist",
-    "build:vue": "vue-cli-service build --modern --dest ./dist-vue",
-    "build:nw": "build --concurrent --tasks win-x86,linux-x86,linux-x64,mac-x64 --mirror https://dl.nwjs.io/ .",
-    "build:win": "npm run build:win:clean && npm run build:vue && build --tasks win-x86 --mirror https://dl.nwjs.io/ .",
-    "build:lin": "npm run build:lin:clean && npm run build:vue && build --tasks linux-x64 --mirror https://dl.nwjs.io/ .",
-    "build:win:clean": "rimraf ./dist-vue ./dist/nw-vue-1.6.0-win-x86 ./dist/nw-vue-1.6.0-win-x86.zip ./dist/nw-vue-1.6.0-win-x86.7z ./dist/nw-vue-1.6.0-win-x86-Setup.exe",
-    "build:lin:clean": "rimraf ./dist-vue ./dist/nw-vue-1.6.0-linux-x64 ./dist/nw-vue-1.6.0-linux-x64.zip",
-    "run:win": "dist\\nw-vue-1.6.0-win-x86\\nw-vue.exe",
-    "run:lin": "./dist/nw-vue-1.6.0-linux-x64/nw-vue",
-    "regression": "rd /s /q node_modules & rd /s /q node_modules & rd /s /q node_modules & npm install && npm run lint && npm test && npm run build:win && npm run run:win",
-    "lint": "vue-cli-service lint --no-fix",
-    "fix": "vue-cli-service lint --fix",
-    "test": "npm run test:unit",
-    "test:e2e": "vue-cli-service test:e2e",
     "test:unit": "jest --config jest.config.js --coverage",
-    "validate": "npm run lint && npm run test:unit && npm run build:vue",
+    "test:e2e": "vue-cli-service test:e2e",
-    "update:vue-devtools": "rimraf ./node_modules/nw-vue-devtools-prebuilt && npm install"
+    "lint": "vue-cli-service lint --no-fix",
+    "build:clean": "rimraf ./dist-vue ./dist",
+    "build:lin": "npm run build:lin:clean && npm run build:vue && build --tasks linux-x64 --mirror https://dl.nwjs.io/ .",
+    "build:lin:clean": "rimraf ./dist-vue ./dist/nw-vue-1.6.0-linux-x64 ./dist/nw-vue-1.6.0-linux-x64.zip",
+    "build:nw": "build --concurrent --tasks win-x86,linux-x86,linux-x64,mac-x64 --mirror https://dl.nwjs.io/ .",
+    "build:vue": "vue-cli-service build --modern --dest ./dist-vue",
+    "build:win": "npm run build:win:clean && npm run build:vue && build --tasks win-x86 --mirror https://dl.nwjs.io/ .",
+    "build:win:clean": "rimraf ./dist-vue ./dist/nw-vue-1.6.0-win-x86 ./dist/nw-vue-1.6.0-win-x86.zip ./dist/nw-vue-1.6.0-win-x86.7z ./dist/nw-vue-1.6.0-win-x86-Setup.exe",
+    "fix": "vue-cli-service lint --fix",
+    "regression": "rd /s /q node_modules & rd /s /q node_modules & rd /s /q node_modules & npm install && npm run lint && npm test && npm run build:win && npm run run:win",
+    "run:lin": "./dist/nw-vue-1.6.0-linux-x64/nw-vue",
+    "run:win": "dist\\nw-vue-1.6.0-win-x86\\nw-vue.exe",
+    "start": "concurrently \"npm run serve\" \"wait-on http://localhost:8964 && nw .\"",
+    "test": "npm run test:unit",
+    "update:vue-devtools": "rimraf ./node_modules/nw-vue-devtools-prebuilt && npm install",
+    "validate": "npm run lint && npm run test:unit && npm run build:vue"
   },
+  "main": "http://localhost:8964",
   "dependencies": {
-    "express": "^4.17.1"
+    "bootstrap": "^4.5.0",
+    "bootstrap-vue": "^2.16.0",
+    "express": "^4.17.1",
+    "vue-router": "^3.2.0",
+    "vue-select": "^3.10.7",
+    "vue2-datepicker": "^3.6.1",
+    "vuex": "^3.4.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.4.6",
     "@vue/cli-plugin-e2e-nightwatch": "^4.4.6",
     "@vue/cli-plugin-eslint": "^4.4.6",
+    "@vue/cli-plugin-router": "^4.4.6",
     "@vue/cli-plugin-unit-jest": "^4.4.6",
+    "@vue/cli-plugin-vuex": "^4.4.6",
     "@vue/cli-service": "^4.4.6",
     "@vue/test-utils": "^1.0.3",
     "babel-eslint": "^10.1.0",
@@ -69,7 +62,12 @@
     "vue-template-compiler": "^2.6.11",
     "wait-on": "^5.1.0"
   },
-  "chromium-args": "--enable-spell-checking --load-extension='./node_modules/nw-vue-devtools-prebuilt/extension'",
+  "ManifestComments": [
+    "Only add dependencies that you want shipped to the end user, for everything else, use devDependencies, including things that will be bundled by webpack.",
+    "NW.js requires a name and a main, everything else is optional.",
+    "The build section is used by nwjs-builder-phoenix, see its documentation for more info",
+    "To turn spell checking off, remove it from the chromium-args in this file"
+  ],
   "build": {
     "nwVersion": "v0.47.0",
     "nwFlavor": "normal",
@@ -138,5 +136,15 @@
       "diffUpdaters": false,
       "hashCalculation": true
     }
+  },
+  "chromium-args": "--enable-spell-checking --load-extension='./node_modules/nw-vue-devtools-prebuilt/extension'",
+  "node-main": "",
+  "node-remote": "http://localhost:8964",
+  "window": {
+    "width": 960,
+    "height": 600,
+    "min_width": 700,
+    "min_height": 500,
+    "icon": "src/assets/vue.png"
   }
 }

src/App.vue

@@ -1,41 +1,55 @@
 <template>
   <div id="app">
-    <img
+    <b-navbar toggleable="lg" type="dark" variant="info">
-      src="@/assets/logo.png"
+      <b-button class="mr-4" v-b-toggle.sidebar>Menu</b-button>
-      alt="Vue.js logo"
+      <b-navbar-brand href="#">NavBar</b-navbar-brand>
-      title="Vue.js"
+    </b-navbar>
-      class="logo"
+    <b-sidebar id="sidebar" title="Main Menu">
-    />
+      <div class="px-3 py-2">
-    <img
+        <b-list-group>
-      src="@/assets/nw.png"
+          <b-list-group-item href="/#/">
-      alt="NW.js logo"
+            Hours Log
-      title="NW.js"
+          </b-list-group-item>
-      class="logo"
+          <b-list-group-item href="/#/projects">
-    />
+            Projects
-    <HelloWorld msg="Welcome to your Vue.js Desktop App in NW.js!" />
+          </b-list-group-item>
+        </b-list-group>
+        <div class="dropdown-divider"></div>
+        <b-list-group class="">
+          <b-list-group-item href="/">
+            Exports
+          </b-list-group-item>
+          <b-list-group-item href="/">
+            Settings
+          </b-list-group-item>
+        </b-list-group>
+      </div>
+    </b-sidebar>    
+    <div id="nav">
+    </div>
+    <router-view />
   </div>
 </template>
 
-<script>
-import HelloWorld from '@/components/HelloWorld.vue';
-
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-};
-</script>
-
 <style>
 #app {
-  margin-top: 60px;
+  font-family: Avenir, Helvetica, Arial, sans-serif;
-  color: #2C3E50;
+  -webkit-font-smoothing: antialiased;
-  font-family: 'Avenir', sans-serif;
+  -moz-osx-font-smoothing: grayscale;
   text-align: center;
+  color: #2c3e50;
 }
-.logo {
+
-  max-height: 140px;
+#nav {
-  margin: 0px 10px;
+  padding: 30px;
+}
+
+#nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+#nav a.router-link-exact-active {
+  color: #42b983;
 }
 </style>

src/main.js

@@ -1,10 +1,29 @@
 import Vue from 'vue';
+import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
+import vSelect from 'vue-select'
+import DatePicker from 'vue2-datepicker'
+
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+import 'vue-select/dist/vue-select.css'
+import 'vue2-datepicker/index.css'
+
 import App from './App.vue';
+import router from './router';
+import store from './store';
+
+Vue.use(BootstrapVue)
+Vue.use(IconsPlugin)
+Vue.component('v-select', vSelect)
+Vue.component('date-picker', DatePicker)
 
 Vue.config.productionTip = false;
 
 // eslint-disable-next-line no-unused-vars
 const app = new Vue({
+  router,
+  store,
+
   render: function (hyperscript) {
     return hyperscript(App);
   }

src/router/index.js

@@ -0,0 +1,31 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import HoursLog from '../views/HoursLog.vue';
+import TimeEntry from '../views/TimeEntry.vue';
+import Projects from '../views/Projects.vue'
+
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: '/',
+    name: 'HoursLog',
+    component: HoursLog
+  },
+  {
+    path: '/add-time-entry',
+    name: 'TimeEntry',
+    component: TimeEntry
+  },
+  {
+    path: '/projects',
+    name: 'Projects',
+    component: Projects
+  },
+];
+
+const router = new VueRouter({
+  routes
+});
+
+export default router;

src/store/index.js

@@ -0,0 +1,15 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+});

src/views/HoursLog.vue

@@ -0,0 +1,46 @@
+<template>
+  <b-container class="hours-log-page">
+    <b-row>
+      <b-col cm="8" offset-sm="2">
+        <b-row class="mt-5 mb-4 ">
+          <b-col>
+            <h1>Hours Log</h1>
+          </b-col>
+          <b-col>
+            <b-btn variant="primary" @click="$router.push({name: 'TimeEntry'})">
+              + Add Entry
+              </b-btn>
+          </b-col>
+        </b-row>
+        <b-row>
+          <b-col>
+            <b-table striped hover :items="items"></b-table> 
+          </b-col>
+        </b-row>
+      </b-col>
+    </b-row>
+  </b-container>
+  
+</template>
+
+<script>
+// @ is an alias to /src
+
+export default {
+  name: 'HoursLog',
+  components: {
+  },
+  data() {
+    return {
+      items: [
+        { 
+          project_name: 'Company #1', 
+          date: 'May 12, 2020', 
+          start_time: '7:00 am', 
+          end_time: '11:00',
+        },
+      ]
+    }
+  }
+};
+</script>

src/views/Projects.vue

@@ -0,0 +1,39 @@
+<template>
+  <b-container class="projects-page">
+    <b-row>
+      <b-col cm="8" offset-sm="2">
+        <b-row class="mt-5 mb-4 ">
+          <b-col>
+            <h1>Projects</h1>
+          </b-col>
+          <b-col>
+            <b-btn variant="primary">+ Add New Project</b-btn>
+          </b-col>
+        </b-row>
+
+        <b-row>
+          <b-col>
+            <v-select
+            :options="[{label: 'Canada', code: 'ca'}]" 
+            />
+          </b-col>
+        </b-row>
+      </b-col>
+    </b-row>
+  </b-container>
+  
+</template>
+
+<script>
+// @ is an alias to /src
+
+export default {
+  name: 'Projects',
+  components: {
+  },
+  data() {
+    return {
+    }
+  }
+};
+</script>

src/views/TimeEntry.vue

@@ -0,0 +1,56 @@
+<template>
+  <b-container class="time-entry-page">
+    <b-row>
+      <b-col sm="6" offset-sm="3">
+        <b-row>
+          <b-col>
+            <h1>New Time Entry</h1>
+          </b-col>
+        </b-row>
+        <b-row>
+          <b-col>
+            <b-form @submit="onSubmit" @reset="onReset">
+              <b-form-group id="input-group-1" label="Star Date:" label-for="input-1">
+                <date-picker v-model="formData.startDate" type="datetime" />
+              </b-form-group>
+
+              <b-form-group id="input-group-2" label="End Date:" label-for="input-2">
+                <date-picker v-model="formData.endDate" type="datetime" />
+              </b-form-group>
+              <b-button type="submit" variant="primary">Submit</b-button>
+              <b-button type="reset" variant="danger">Reset</b-button>
+            </b-form>        
+          </b-col>
+        </b-row>
+      </b-col>
+    </b-row>
+  </b-container>
+  
+</template>
+
+<script>
+// @ is an alias to /src
+
+export default {
+  name: 'TimeEntry',
+  components: {
+  },
+  data() {
+    return {
+      formData: {
+        startDate: {},
+        endDate: {},
+        notes: '',
+      }
+    }
+  },
+  methods: {
+    onSubmit() {
+
+    },
+    onReset() {
+
+    },
+  },
+};
+</script>