feat(help-page): continued working on the layout and added more specified images

src/modules/help/components/help-module.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 //default images
-import default_dashboard from 'src/assets/help-ss/default-dashboard.png';
+// import default_dashboard from 'src/assets/help-ss/default-dashboard.png';
 import default_personal_profile from 'src/assets/help-ss/default-personnal_profile.png';
 import default_timesheet from 'src/assets/help-ss/default-timesheet.png';
 import default_employee_list from 'src/assets/help-ss/default-employee-list.png';
@@ -8,7 +8,7 @@ import default_employee_management from 'src/assets/help-ss/default-employee-man
 import default_validation_page from 'src/assets/help-ss/default-validation-page.png';
 
 const default_images: Record<HelpModuleKey, string> = {
-    dashboard: default_dashboard,
+    // dashboard: default_dashboard,
     personal_profile: default_personal_profile,
     timesheets: default_timesheet,
     employee_list: default_employee_list,
@@ -40,7 +40,6 @@ const switchSide = (index: number) => {
 <template>
     <div class="column q-my-xs bg-secondary q-py-xl">
         <!-- Card Header -->
-
         <div
             class="row col-auto text-h5 q-pa-md text-primary bg-secondary"
             :class="switchSide(moduleIndex) ? 'justify-start' : 'justify-end'"
@@ -48,7 +47,6 @@ const switchSide = (index: number) => {
             {{ ($t(`help.tutorial.${help_module}.title`)).toUpperCase() }}
         </div>
         <!-- Card Body -->
-
         <div class="row col full-width q-px-none">
             <!-- Object and descriptions zone -->
             <div
@@ -67,7 +65,6 @@ const switchSide = (index: number) => {
                         fit="contain"
                     >
                     </q-img>
-
                 </transition>
             </div>
             <div class="col column">
@@ -75,8 +72,9 @@ const switchSide = (index: number) => {
                 <q-expansion-item
                     v-for="option, index in options"
                     :key="index"
+                    dense
                     hide-expand-icon
-                    class="bg-gray-2 text-weight-bolder row"
+                    class="bg-dark rounded-5 q-my-xs shadow-10 full-width"
                     :class="switchSide(moduleIndex) ? 'justify-start' : 'justify-end'"
                     group="help_page"
                     @before-show="current_path = option.path;"
@@ -92,18 +90,17 @@ const switchSide = (index: number) => {
                                 class="col-auto q-pr-sm"
                                 size="sm"
                             />
-                            <span class="text-accent">{{ $t(option.label).toUpperCase() }}</span>
+                            <span class="text-accent col-auto text-weight-bolder">{{ $t(option.label).toUpperCase() }}</span>
                             <q-icon
                                 v-if="!switchSide(moduleIndex)"
                                 :name="option.icon"
                                 class="col-auto q-pl-sm"
                                 size="sm"
-                                fit="contain"
                             />
                         </div>
                     </template>
                     <div
-                        class="q-px-xl"
+                        class="q-px-xl q-pb-sm text-weight-medium"
                         :class="switchSide(moduleIndex) ? 'text-left' : 'text-right'"
                     >
                         {{ ($t(`${option.description}`)) }}
@@ -124,6 +121,8 @@ const switchSide = (index: number) => {
                         class="image-wrapper"
                         :src="current_path"
                         loading="lazy"
+                        fit="contain"
+                        style="width: 150%;"
                     >
                     </q-img>
                 </transition>

src/modules/help/models/help-module.model.ts

@@ -1,10 +1,10 @@
 export type HelpModuleKey =
-| 'dashboard'
-| 'personal_profile'
-| 'timesheets'
-| 'employee_list'
-| 'employee_management'
-| 'timesheets_approval';
+    // | 'dashboard'
+    | 'personal_profile'
+    | 'timesheets'
+    | 'employee_list'
+    | 'employee_management'
+    | 'timesheets_approval';
 
 export type HelpModuleOptions = {
     label: string;
@@ -19,8 +19,9 @@ export type PartialOptions = Partial<Record<HelpModuleKey, HelpModuleOptions[]>>
 
 //Shared images and descriptions
 import calendar from 'src/assets/help-ss/calendar.png';
-import employee_list_display from 'src/assets/help-ss/employee-list.png';
-import search_bar from 'src/assets/help-ss/employee-list.png';
+import employee_list_display from 'src/assets/help-ss/employee-list-grid.png';
+import employee_list_card from 'src/assets/help-ss/employee-list.png';
+import search_bar from 'src/assets/help-ss/search-bar.png';
 
 const calendar_nav_desc = "descriptions.shared.calendar";
 const display_desc = "descriptions.shared.display";
@@ -35,7 +36,7 @@ import chatbot from 'src/assets/help-ss/dashboard.png';
 const menu_desc = "descriptions.dashboard.menu";
 const news_feed_desc = "descriptions.dashboard.news_feed";
 const chat_bot_desc = "descriptions.dashboard.chat_bot";
-const notification_desc = "descriptions.dashboard.notifications"
+const notification_desc = "descriptions.dashboard.notifications";
 
 export const dashboard_options: HelpModuleOptions[] = [
     { label: 'help.tutorial.dashboard.menu', path: dashboard, description: menu_desc, icon: 'menu' },
@@ -60,8 +61,8 @@ export const profile_options: HelpModuleOptions[] = [
 ];
 
 // timesheet images and descriptions
-import create_shift from 'src/assets/help-ss/timesheets.png';
-import update_shift from 'src/assets/help-ss/timesheets.png';
+import create_shift from 'src/assets/help-ss/create-shift.png';
+import update_shift from 'src/assets/help-ss/update-shift.png';
 import delete_shift from 'src/assets/help-ss/delete-shift.png';
 import comment_shift from 'src/assets/help-ss/commenting-shift.png';
 import create_expense from 'src/assets/help-ss/expenses.png';
@@ -79,17 +80,16 @@ const delete_expense_desc = "descriptions.timesheets.delete_expense";
 export const timesheets_options: HelpModuleOptions[] = [
     { label: 'help.tutorial.timesheets.create_shift', path: create_shift, description: create_shift_desc, icon: 'add' },
     { label: 'help.tutorial.timesheets.update_shift', path: update_shift, description: update_shift_desc, icon: 'create' },
-    { label: 'help.tutorial.timesheets.delete_shift', path: delete_shift, description: delete_shift_desc, icon: 'cancel' },
+    { label: 'help.tutorial.timesheets.delete_shift', path: delete_shift, description: delete_shift_desc, icon: 'las la-trash' },
     { label: 'help.tutorial.timesheets.comment_shift', path: comment_shift, description: comment_shift_desc, icon: 'chat_bubble_outline' },
     { label: 'help.tutorial.timesheets.create_expense', path: create_expense, description: create_expense_desc, icon: 'add' },
     { label: 'help.tutorial.timesheets.update_expense', path: update_expense, description: update_expense_desc, icon: 'create' },
-    { label: 'help.tutorial.timesheets.delete_expense', path: delete_expense, description: delete_expense_desc, icon: 'cancel' },
+    { label: 'help.tutorial.timesheets.delete_expense', path: delete_expense, description: delete_expense_desc, icon: 'clear' },
     { label: 'help.tutorial.shared.calendar', path: calendar, description: calendar_nav_desc, icon: 'calendar_month' },
 ];
 
 // employee management images and descriptions
-import terminated_employee_display from 'src/assets/help-ss/employee-list.png';
-import terminating_employee from 'src/assets/help-ss/employee-list.png';
+import terminated_employee_display from 'src/assets/help-ss/terminated-employee-list.png';
 import create_employee from 'src/assets/help-ss/create-employee.png';
 import update_employee from 'src/assets/help-ss/update-employee.png';
 import access_management from 'src/assets/help-ss/access-management.png';
@@ -105,7 +105,7 @@ const schedule_preset_desc = "descriptions.employee_management.schedule_preset";
 
 export const employee_list_options: HelpModuleOptions[] = [
     { label: 'help.tutorial.employee_list.terminated_employees', path: terminated_employee_display, description: terminated_employee_desc, icon: 'work_off' },
-    { label: 'help.tutorial.shared.display', path: employee_list_display, description: display_desc, icon: 'display_settings' },
+    { label: 'help.tutorial.shared.display', path: employee_list_card, description: display_desc, icon: 'display_settings' },
     { label: 'help.tutorial.shared.search', path: search_bar, description: search_bar_desc, icon: 'search' },
 ];
 
@@ -115,7 +115,7 @@ export const employee_management_options: HelpModuleOptions[] = [
     { label: 'help.tutorial.employee_management.update_employee', path: update_employee, description: update_employee_desc, icon: 'las la-id-card' },
     { label: 'help.tutorial.employee_management.module_access', path: access_management, description: module_access_desc, icon: 'las la-key' },
     { label: 'help.tutorial.employee_management.schedule_preset', path: schedule_preset, description: schedule_preset_desc, icon: 'calendar_month' },
-    { label: 'help.tutorial.employee_management.terminating_employee', path: terminating_employee, description: terminating_employee_desc, icon: 'work_off' },
+    { label: 'help.tutorial.employee_management.terminating_employee', path: update_employee, description: terminating_employee_desc, icon: 'work_off' },
     { label: 'help.tutorial.shared.display', path: employee_list_display, description: display_desc, icon: 'display_settings' },
     { label: 'help.tutorial.shared.search', path: search_bar, description: search_bar_desc, icon: 'search' },
 ];
@@ -124,6 +124,7 @@ export const employee_management_options: HelpModuleOptions[] = [
 import comment_expense from 'src/assets/help-ss/timesheet-details.png';
 import timesheet_approval_inspect from 'src/assets/help-ss/timesheet-approvals.png';
 import timesheet_details from 'src/assets/help-ss/timesheet-details.png';
+import timesheet_approval_list from 'src/assets/help-ss/timesheet-appovals-list.png';
 
 const comment_expense_desc = "descriptions.timesheets_approval.comment_expense";
 const timesheets_approval_desc = "descriptions.timesheets_approval.approval";
@@ -133,10 +134,10 @@ export const timesheets_approval_options: HelpModuleOptions[] = [
     { label: 'help.tutorial.timesheets_approval.approval', path: timesheet_approval_inspect, description: timesheets_approval_desc, icon: 'verified' },
     { label: 'help.tutorial.timesheets_approval.inspect', path: timesheet_details, description: timesheets_approval_inspect_desc, icon: 'work_history' },
     { label: 'help.tutorial.timesheets_approval.comment_expense', path: comment_expense, description: comment_expense_desc, icon: 'chat_bubble_outline' },
-    { label: 'help.tutorial.shared.display', path: employee_list_display, description: display_desc, icon: 'display_settings' },
+    { label: 'help.tutorial.shared.display', path: timesheet_approval_list, description: display_desc, icon: 'display_settings' },
     { label: 'help.tutorial.shared.search', path: search_bar, description: search_bar_desc, icon: 'search' },
     { label: 'help.tutorial.shared.calendar', path: calendar, description: calendar_nav_desc, icon: 'calendar_month' },
-]
+];
 
 
 

src/pages/help-page.vue

@@ -13,9 +13,9 @@ onMounted(async () => {
 <template>
     <q-page
         flat
-        class="bg-secondary q-px-xl column no-wrap"
+        class="bg-secondary q-px-xl no-wrap row justify-center"
     >
-        <div class="col q-px-xl">
+        <div class="col-8 q-px-xl">
             <PageHeaderTemplate
                 :title="$t('help.label')"
                 class="text-accent"

src/stores/help-store.ts

@@ -1,7 +1,7 @@
 import { defineStore } from "pinia";
 import { computed, ref } from "vue";
 import { HelpService } from "src/modules/help/services/help.service";
-import { profile_options, timesheets_options, employee_list_options, employee_management_options, timesheets_approval_options, dashboard_options } from "src/modules/help/models/help-module.model";
+import { profile_options, timesheets_options, employee_list_options, employee_management_options, timesheets_approval_options } from "src/modules/help/models/help-module.model";
 import type { Options, HelpModuleKey, HelpModuleOptions } from "src/modules/help/models/help-module.model";
 
 
@@ -11,7 +11,7 @@ export const useHelpStore = defineStore('help', () => {
     const help_modules = ref<HelpModuleKey[]>([]);
 
     const help_module_details = ref<Options>({
-        dashboard: dashboard_options,
+        // dashboard: dashboard_options,
         personal_profile: profile_options,
         timesheets: timesheets_options,
         employee_list: employee_list_options,