feat: added a centralized context folder which holds objects that describes the webpages of the app from a high level

src/modules/timesheet-approval/components/overview-list.vue

@@ -1,7 +1,4 @@
-<script
-    setup
-    lang="ts"
->
+<script setup lang="ts">
 import { computed, ref } from 'vue';
 import { useTimesheetStore } from 'src/stores/timesheet-store';
 import OverviewListItem from 'src/modules/timesheet-approval/components/overview-list-item.vue';

src/page-contexts/index.ts

@@ -0,0 +1,6 @@
+export * from "./pages/dashboard-context";
+export * from "./pages/left-drawer-context";
+export * from "./pages/supervisor-crew-context";
+export * from "./pages/profile-context";
+export * from "./pages/timesheet-approval-context";
+export * from "./pages/timesheet-context";

src/page-contexts/pages/dashboard-context.ts

@@ -0,0 +1,10 @@
+export const dashboardContext = {
+  name: "Test-Page",
+  description:
+    "Temporary static landing page while the application is still in development",
+  features: [
+    "Used as a landing platform and navigate the left drawer",
+    "Access the ai chatbot from the header",
+    "See your user icon with a notification icon",
+  ],
+};

src/page-contexts/pages/left-drawer-context.ts

@@ -0,0 +1,14 @@
+export const leftDrawerContext = {
+  name: "Left Drawer",
+  description:
+    "A drawer that acts as a navigation bar, able to surf to differnent parts of the website.",
+  features: [
+    "The user can navigate to the home page.",
+    "Depending on their role and clearence can approve timesheets. ",
+    "Depending on their role, can see the full list of employees.",
+    "Can access the timesheet interface to input employee hours.",
+    "Can acess your user profile to add or change information",
+    "Can access the Help page to ask for assistance.",
+    "Can logout",
+  ],
+};

src/page-contexts/pages/profile-context.ts

@@ -0,0 +1,9 @@
+export const profileContext = {
+  name: "Profile",
+  description: "Display and edit user information",
+  features: [
+    "Add and edit Personal information such as first and last name, phone, birthdate and address.",
+    "Add and edit Career information such job title, company, supervisor, email and hiring date.",
+    "Edit available preferences such as Display options of light and dark mode, and language options",
+  ],
+};

src/page-contexts/pages/supervisor-crew-context.ts

@@ -0,0 +1,8 @@
+export const supervisorContext = {
+  name: "Supervisor Crew Page",
+  description: "View all the hired Staff",
+  feature: [
+    "View the list of hired employees",
+    "Access an individual employee",
+  ],
+};

src/page-contexts/pages/timesheet-approval-context.ts

@@ -0,0 +1,14 @@
+export const timesheetApprovalContext = {
+  name: "Timesheet-Approval",
+  description:
+    "Page where employee hours and shifts are approved by the HR deparment",
+  features: [
+    "See a list of cards with the total hours for the week for each employee.",
+    "Access different weeks thanks to the calender button",
+    "Approve the hours for the cards displayed.",
+    "Open a detailed modal for each card",
+    "Display a bar chart within the modal to display the type of hours, expenses, and mileage.",
+    "Edit the hours, and their type such as regular, holiday, vacation etc.",
+    "Add and edit expenses for the week, along with attached files for said expenses",
+  ],
+};

src/page-contexts/pages/timesheet-context.ts

@@ -0,0 +1,13 @@
+export const timesheetContext = {
+  name: "Timesheet-page",
+  description:
+    "Page where an employee can enter their hours for their day and week",
+  features: [
+    "Enter your in and out times per day",
+    "Add and edit what kind of hours your shift was example regular, overtime, vacation etc.",
+    "Edit your own shift hours",
+    "Delete your shift hours",
+    "List your expenses for the week",
+    "Add expenses for the week, along with attached files for said expenses",
+  ],
+};

src/pages/test-page.vue

@@ -1,7 +1,4 @@
-<script
-    setup
-    lang="ts"
->
+<script setup lang="ts">
 import { useQuasar } from 'quasar';
 import type { QVueGlobals } from 'quasar';
 

src/pages/timesheet-page.vue

@@ -1,7 +1,4 @@
-<script
-    setup
-    lang="ts"
->
+<script setup lang="ts">
 import { date } from 'quasar';
 import { onMounted } from 'vue';
 import { useAuthStore } from 'src/stores/auth-store';
@@ -19,7 +16,6 @@
 });
 </script>
 
-
 <template>
     <q-page
         padding