feat(approvals): Create timesheet approval page, begin scaffolding and building store, services, api, set up backend connecting logic

src/css/quasar.variables.scss

@@ -13,8 +13,8 @@
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
 $primary: #019547;
-$secondary: #EFFFEF;
-$accent: #4ada86;
+$secondary: #DAE0E7;
+$accent: #81AFE3;
 
 $dark-font: #305530;
 $dark: #323232;

src/i18n/en-ca/index.ts

@@ -32,8 +32,8 @@ export default {
     userMenuCalendar: 'Calendar',
   },
   notFoundPage: {
-    pageTitle: 'Oops. Nothing here...',
-    backButton: 'Go to the home page',
+    pageText: 'We cannot seem to find the page you are looking for, sorry!',
+    backButton: 'Take me back!',
   },
   loginPage: {
     title: 'Log in to Targo',

src/i18n/fr-ca/index.ts

@@ -171,8 +171,8 @@ export default {
     userMenuCalendar: 'Calendrier annuel',
   },
   notFoundPage: {
-    pageTitle: 'Oops. Rien ici...',
-    backButton: 'Aller à la page d’accueil',
+    pageText: 'On ne semble pas trouver la page que vous cherchez, désolé!',
+    backButton: 'Je veux retourner en arrière!',
   },
   notificationDialog: {
     notice: 'Notification',

src/modules/auth/composables/use-auth-api.ts

@@ -1,5 +1,5 @@
 import { useAuthStore } from "../../../stores/auth-store";
-import type { User } from "src/modules/users/types/user-interface";
+import type { User } from "src/modules/shared/types/user-interface";
 
 export const useAuthApi = () => {
     const authStore = useAuthStore();

src/modules/auth/pages/auth-login.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
     import { ref, watch } from 'vue';
     import { useAuthApi } from '../composables/use-auth-api';
-    import type { User } from 'src/modules/users/types/user-interface';
-import { useRouter } from 'vue-router';
+    import type { User } from 'src/modules/shared/types/user-interface';
+    import { useRouter } from 'vue-router';
 
 
     const authApi = useAuthApi();

src/modules/auth/types/auth-interface.ts

@@ -1,4 +1,4 @@
-import type { User } from "src/modules/users/types/user-interface";
+import type { User } from "src/modules/shared/types/user-interface";
 
 export interface AuthState {
   token: string;

src/pages/error-page.vue

@@ -3,25 +3,21 @@
 </script>
 
 <template>
-  <div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
-    <div>
-      <div style="font-size: 30vh">
-        404
-      </div>
-
-      <div class="text-h2" style="opacity:.4">
-        Oops. Nothing here...
-      </div>
-
-      <q-btn
-        class="q-mt-xl"
-        color="white"
-        text-color="blue"
-        unelevated
-        to="/"
-        label="Go Home"
-        no-caps
-      />
-    </div>
-  </div>
+  <q-layout view="hHh lpR fFf">
+    <q-page-container>
+      <q-page padding class="column justify-center items-center bg-secondary">
+        <q-card class="col-shrink rounded-20">         
+          <q-img src="src/assets/line-truck-1.jpg" height="20vh">
+            <div class="absolute-bottom text-h4 text-center text-weight-bolder justify-center items-center row">
+              <div class="q-pr-md text-primary text-h3 text-weight-bolder">404</div> 
+              PAGE NOT FOUND
+            </div>
+          </q-img>
+          <q-card-section class="text-center text-h5 text-primary">
+            {{$t('notFoundPage.pageText')}}
+          </q-card-section>
+        </q-card>
+      </q-page>
+    </q-page-container>
+  </q-layout>
 </template>

src/router/routes.ts

@@ -1,4 +1,5 @@
 import type { RouteRecordRaw } from 'vue-router';
+import { RouteNames } from './router-constants';
 
 const routes: RouteRecordRaw[] = [
   {
@@ -8,22 +9,27 @@ const routes: RouteRecordRaw[] = [
     children: [
       { 
         path: '', 
-        name: 'dashboard',
+        name: RouteNames.DASHBOARD,
         component: () => import('src/pages/test-page.vue'),
       },
+      {
+        path: 'timesheet-approvals',
+        name: RouteNames.TIMESHEET_APPROVALS,
+        component: () => import('src/modules/timesheet-approval/pages/timesheet-approval.vue'),
+      },
     ],
   },
 
   {
     path: '/v1/login', 
-    name: 'login',
+    name: RouteNames.LOGIN,
     component: () => import('src/modules/auth/pages/auth-login.vue'),
     meta: { requiresAuth: false },
   },
 
   {
     path: '/login-success', 
-    name: 'login-success',
+    name: RouteNames.LOGIN_SUCCESS,
     component: () => import('src/modules/auth/pages/auth-login-popup-success.vue'),
     meta: { requiresAuth: false },
   },