feat(i18n): added descriptions to i18n files to display in the help page

src/i18n/en-ca/index.ts

@@ -9,7 +9,7 @@ export default {
                 title: "Home Page",
                 news_feed: "News Feed",
                 chat_bot: "Technical chat-bot",
-                notification: "Notifications",
+                notifications: "Notifications",
             },
             personal_profile: {
                 title: "Personnal Profile",
@@ -333,4 +333,75 @@ export default {
             button_detailed_view: "detailed view",
         },
     },
+    descriptions: {
+        dashboard: {
+            menu: "To access the main menu, click the button located in the upper-left corner. This menu allows you to navigate through the entire application.",
+            news_feed: "General announcements and important updates are displayed here. This view is the same for all employees.",
+            notifications: "Notifications are accessible via the bell icon located in the upper-right corner. They allow you to quickly view information relevant to you, \
+                        such as leave, vacation, or absence requests, overtime hours worked during the current week, \
+                        and comments left by your supervisor.",
+            chat_bot: "To access the bot, simply click on the \"bot\" bubble. The conversational bot allows you to quickly find information about a client, \
+                   an invoice, or a device.",
+        },
+        personal_profile: {
+            personal_info: "In the \"Personal\" tab, you can view your personal information, such as your name, phone numbers, \
+                        address, and date of birth.",
+            professional_info: "In the \"Career\" tab, you can view your professional information, including your position, the name of the company you work for, \
+                            your supervisor's name and email address, as well as your hire date.",
+            preferences: "In the \"Preferences\" tab, you can adjust certain settings based on your personal preferences, such as dark mode, \
+                      language, and notifications.",
+        },
+        timesheets: {
+            create_shift: "To add a work shift, click the green \"Add Time\" tab and enter the following required information: \
+                       the shift type, start time, end time, and whether the shift is on-site or remote. \
+                       Then click \"Save\", located in the upper-right corner of the time card.",
+            update_shift: "To modify a work shift, click the information you want to update, adjust the value, then click \"Save\", \
+                       located in the upper-right corner of the time card.",
+            delete_shift: "To delete a work shift, click the red trash icon associated with the entry.",
+            comment_shift: "To leave a comment on a work shift, click the conversation bubble icon located to the right of the shift entry, \
+                        then click \"Save\" in the upper-right corner of the time card.",
+            create_expense: "To add an expense, access the expense list using the button located in the upper-right corner. \
+                         You must then complete the following fields: the date (today's date is selected by default), the expense type, \
+                         the amount or mileage, a comment justifying the expense, and attach a supporting document. \
+                         Then click the \"Add\" button.",
+            update_expense: "To modify an expense, access the expense list, select the expense you wish to edit, make the necessary changes, \
+                        then click \"Update\" to save.",
+            delete_expense: "To delete an expense, access the expense list and click the red trash icon.",
+        },
+        employee_list: {
+            terminated_employees: "This option allows you to show or hide employees who are no longer employed.",
+        },
+        employee_management: {
+            create_employee: "To create an employee, access the \"Add Employee\" menu located in the upper-left corner of the employee list. \
+                          In the \"Details\" tab, first enter all required information, excluding the termination date. \
+                          Then assign the appropriate access rights to the employee. Optionally, you may assign a preset schedule. \
+                          Click \"Save\" to confirm the employee creation.",
+            update_employee: "To update an employee's information, access rights, or schedule, select the employee's profile and navigate to the appropriate tab. \
+                          Make the necessary changes, then click \"Update\" to confirm.",
+            module_access: "To manage access to different parts of the application, select the desired employee's profile and navigate to the \"Access\" tab. \
+                        Two selection options are available: by role or by module. If the employee is a supervisor, the \"Administrator\" role is recommended. \
+                        For a standard employee, the \"Employee\" role is appropriate. Specific modules can also be selected in special cases.",
+            schedule_preset: "To assign, modify, or create a schedule for an employee, first select the employee, then navigate to the \"Schedule\" tab in the edit menu. \
+                          You may select an existing schedule, create a new one by assigning a unique name, or copy an existing schedule, modify it, and rename it. \
+                          Once satisfied, click \"Update\" to confirm your selection.",
+            terminating_employee: "To terminate an employee, select the employee's profile (or row). Once the edit menu is displayed, \
+                               enter the termination date and click \"Update\".",
+        },
+        timesheets_approval: {
+            approval: "To approve a timesheet, click the bottom of the card where the lock icon is located. In list view, \
+                   click the lock icon on the right side of the corresponding row.",
+            inspect: "To review an employee's work shifts or expenses, click the briefcase icon located in the upper-right corner. \
+                  You will find statistics on hours worked as well as expenses incurred. Within this window, you may edit work shifts \
+                  and expenses. Click \"Save\" to confirm the changes.",
+            comment_expense: "To leave a comment on an expense submitted by an employee, click the briefcase icon on the desired employee's card. \
+                          Navigate to the expense list and click the supervisor comment bubble. \
+                          Click \"Save\" to confirm your comment.",
+        },
+        shared: {
+            display: "This option allows you to choose the display mode that best suits your needs, either card view or detailed list view.",
+            search: "An advanced keyword search is available. Simply separate each keyword with a space, and the search bar will return results \
+                 that include all entered keywords.",
+            calendar: "The calendar speeds up navigation. It allows you to select a specific date and display the pay period that includes the selected date.",
+        },
+    },
 };

src/i18n/fr-ca/index.ts

@@ -10,7 +10,7 @@ export default {
                 menu: "Menu Principal",
                 news_feed: "Fil d'actualités",
                 chat_bot: "Robot conversationnel d'aide technique",
-                notification: "Notifications",
+                notifications: "Notifications",
             },
             personal_profile: {
                 title: "Profil",
@@ -334,4 +334,76 @@ export default {
             button_detailed_view: "vue détaillée",
         },
     },
+    descriptions: {
+        dashboard: {
+            menu: "Pour accéder au menu principal, cliquez sur le bouton situé dans le coin supérieur gauche. Ce menu vous permet de naviguer à travers l'ensemble de l'application.",
+            news_feed: "Des annonces générales et des points importants y sont présentés. Cet affichage est identique pour l'ensemble des employés.",
+            notifications: "Les notifications sont accessibles via la clochette située dans le coin supérieur droit. Elles permettent de consulter rapidement les informations qui vous concernent, \
+                        par exemple : les demandes de congé, de vacances ou d'absence, les heures supplémentaires effectuées durant la semaine courante, \
+                        ainsi que les commentaires laissés par votre superviseur.",
+            chat_bot: "Pour accéder au robot, il suffit de cliquer sur la bulle « robot ». Le robot conversationnel vous permet de trouver rapidement de l'information sur un client, \
+                   une facture ou un appareil.",
+        },
+        personal_profile: {
+            personal_info: "Dans l'onglet « Personnel », vous pouvez consulter vos informations personnelles, telles que votre nom, vos numéros de téléphone, \
+                        votre adresse et votre date de naissance.",
+            professional_info: "Dans l'onglet « Carrière », vous pouvez consulter vos informations professionnelles, comme votre poste, le nom de l'entreprise pour laquelle vous travaillez, \
+                            le nom et l'adresse courriel de votre superviseur, ainsi que votre date d'embauche.",
+            preferences: "Dans l'onglet « Préférences », vous pouvez ajuster certains paramètres selon vos préférences personnelles, tels que le mode sombre, \
+                      la langue et les notifications.",
+        },
+        timesheets: {
+            create_shift: "Pour ajouter un quart de travail, cliquez sur l'onglet vert « Ajouter du temps » et saisissez les informations obligatoires suivantes : \
+                       le type de quart, l'heure de début, l'heure de fin, ainsi que le mode de travail (présentiel ou télétravail). \
+                       Cliquez ensuite sur « Sauvegarder », situé dans le coin supérieur droit de la carte de temps.",
+            update_shift: "Pour modifier un quart de travail, cliquez sur l'information à modifier, ajustez la valeur souhaitée, puis cliquez sur « Sauvegarder », \
+                       situé dans le coin supérieur droit de la carte de temps.",
+            delete_shift: "Pour supprimer un quart de travail, cliquez sur l'icône de poubelle rouge associée à l'entrée.",
+            comment_shift: "Pour laisser un commentaire sur un quart de travail, cliquez sur l'icône de bulle conversationnelle située à droite de l'entrée du quart de travail, \
+                        puis cliquez sur « Sauvegarder », dans le coin supérieur droit de la carte de temps.",
+            create_expense: "Pour ajouter une dépense, accédez à la liste des dépenses à l'aide du bouton situé dans le coin supérieur droit. \
+                         Vous devez ensuite remplir les champs suivants : la date (la date du jour est sélectionnée par défaut), le type de dépense, \
+                         le montant ou le kilométrage effectué, un commentaire justifiant la dépense, et joindre une pièce justificative. \
+                         Cliquez ensuite sur le bouton « Ajouter ».",
+            update_expense: "Pour modifier une dépense, accédez à la liste des dépenses, sélectionnez la dépense à modifier, apportez les changements nécessaires, \
+                        puis cliquez sur « Modifier » pour sauvegarder.",
+            delete_expense: "Pour supprimer une dépense, accédez à la liste des dépenses et cliquez sur l'icône de poubelle rouge.",
+        },
+        employee_list: {
+            terminated_employees: "Cette option vous permet d'afficher ou de masquer les employés qui ne sont plus à l'emploi.",
+        },
+        employee_management: {
+            create_employee: "Pour créer un employé, accédez au menu « Ajouter un employé », situé dans le coin supérieur gauche de la liste des employés. \
+                          Dans l'onglet « Détails », vous devez d'abord saisir l'ensemble des informations requises, à l'exception de la date de départ. \
+                          Ensuite, attribuez les accès nécessaires à l'employé. Optionnellement, vous pouvez lui assigner un horaire préfabriqué. \
+                          Cliquez sur « Sauvegarder » pour confirmer la création de l'employé.",
+            update_employee: "Pour mettre à jour les informations, les accès ou l'horaire d'un employé, sélectionnez son portrait et naviguez vers l'onglet approprié. \
+                          Apportez les modifications nécessaires, puis cliquez sur « Mettre à jour » pour confirmer.",
+            module_access: "Pour gérer les accès aux différentes parties de l'application, sélectionnez le portrait de l'employé désiré, puis accédez à l'onglet « Accès ». \
+                        Deux options sont disponibles : par rôle ou par module. Si l'employé est superviseur, le rôle « Administrateur » est suggéré. \
+                        Pour un employé standard, le rôle « Employé » est recommandé. Il est également possible de sélectionner des modules spécifiques dans certains cas.",
+            schedule_preset: "Pour attribuer, modifier ou créer un horaire pour un employé, sélectionnez d'abord l'employé, puis accédez à l'onglet « Horaire » du menu de modification. \
+                          Vous pouvez choisir un horaire existant, créer un nouvel horaire en lui donnant un nom unique, ou copier un horaire existant, le modifier et le renommer. \
+                          Une fois satisfait, cliquez sur « Mettre à jour » pour confirmer votre choix.",
+            terminating_employee: "Pour mettre fin à l'emploi d'un employé, sélectionnez son portrait (ou sa ligne). Une fois le menu de modification affiché, \
+                               entrez la date de départ et cliquez sur « Mettre à jour ».",
+        },
+        timesheets_approval: {
+            approval: "Pour approuver une feuille de temps, cliquez sur le bas de la carte où se trouve l'icône de cadenas. En mode liste, \
+                   cliquez sur le cadenas situé à droite de la ligne correspondante.",
+            inspect: "Pour consulter les informations relatives aux quarts de travail ou aux dépenses d'un employé, cliquez sur l'icône de valise située dans le coin supérieur droit. \
+                  Vous y trouverez des statistiques sur les heures travaillées ainsi que les dépenses effectuées. Dans cette fenêtre, il est possible de modifier des quarts de travail \
+                  et des dépenses. Cliquez sur « Sauvegarder » pour confirmer les modifications.",
+            comment_expense: "Pour laisser un commentaire sur une dépense soumise par un employé, cliquez sur l'icône de valise associée à la carte de l'employé désiré. \
+                          Accédez à la liste des dépenses et cliquez sur la bulle de commentaire du superviseur. \
+                          Cliquez sur « Sauvegarder » pour confirmer votre commentaire.",
+        },
+        shared: {
+            display: "Cette option permet de choisir le mode d'affichage qui vous convient le mieux, soit par carte ou sous forme de liste détaillée.",
+            search: "Il est possible d'effectuer une recherche avancée par mots-clés. Il suffit de séparer chaque mot par un espace, et la barre de recherche affichera \
+                 les résultats contenant l'ensemble des mots-clés saisis.",
+            calendar: "Le calendrier facilite la navigation. Il vous permet de sélectionner une date précise et d'afficher la période de paie qui inclut cette date.",
+        },
+    },
+
 };

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

@@ -1,17 +1,29 @@
 <script setup lang="ts">
+//default images
+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';
+const default_images: Record<HelpModuleKey, string> = {
+    dashboard: default_dashboard,
+    personal_profile: default_personal_profile,
+    timesheets: default_timesheet,
+    employee_list: '',
+    employee_management: '',
+    timesheets_approval: '',
+};
 
 import type { HelpModuleKey } from 'src/modules/help/models/help-module.model';
 import { useHelpStore } from 'src/stores/help-store';
 import { ref } from 'vue';
 
-defineProps<{
+const props = defineProps<{
-    module: HelpModuleKey;
+    help_module: HelpModuleKey;
     moduleIndex: number;
 }>();
 
 const help_store = useHelpStore();
-const current_path = ref('src/assets/help-ss/login-background.png');
+const help_module = props.help_module;
-
+const current_path = ref<string>(default_images[help_module]);
 
 const switchSide = (index: number) => {
     if (index % 2 !== 0) {
@@ -30,7 +42,7 @@ const switchSide = (index: number) => {
             class="row col-auto text-h5 q-pa-md text-primary bg-secondary"
             :class="switchSide(moduleIndex) ? 'justify-start' : 'justify-end'"
         >
-            {{ ($t(`help.tutorial.${module}.title`)).toUpperCase() }}
+            {{ ($t(`help.tutorial.${help_module}.title`)).toUpperCase() }}
         </div>
         <!-- Card Body -->
 
@@ -46,8 +58,10 @@ const switchSide = (index: number) => {
                     leave-active-class="animated fade-out"
                 >
                     <q-img
+                        class="image-wrapper"
                         :src="current_path"
                         loading="lazy"
+                        fit="contain"
                     >
                     </q-img>
 
@@ -56,13 +70,13 @@ const switchSide = (index: number) => {
             <div class="col column">
 
                 <q-expansion-item
-                    v-for="option, index in help_store.help_module_options[module]"
+                    v-for="option, index in help_store.help_module_options[help_module]"
                     :key="index"
                     hide-expand-icon
                     class="bg-gray-2 text-weight-bolder row"
                     :class="switchSide(moduleIndex) ? 'justify-start' : 'justify-end'"
                     group="help_page"
-                    @before-show="current_path = option.path"
+                    @before-show="current_path = option.path;"
                 >
                     <template #header>
                         <div
@@ -81,6 +95,7 @@ const switchSide = (index: number) => {
                                 :name="option.icon"
                                 class="col-auto q-pl-sm"
                                 size="sm"
+                                fit="contain"
                             />
                         </div>
                     </template>
@@ -103,6 +118,7 @@ const switchSide = (index: number) => {
                     leave-active-class="animated fade-out"
                 >
                     <q-img
+                        class="image-wrapper"
                         :src="current_path"
                         loading="lazy"
                     >
@@ -112,3 +128,11 @@ const switchSide = (index: number) => {
         </div>
     </div>
 </template>
+
+<style scoped>
+.image-wrapper {
+    max-width: 480px;
+    max-height: 320px;
+    width: 100%;
+}
+</style>

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

@@ -15,30 +15,50 @@ export type HelpModuleKey =
 
 export type Options = 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';
-const calendar_nav_desc = "Description du calendrier de navigation";
-const display_desc = "Description de l'option d'affichage de carte ou liste";
-const search_bar_desc = "Decsription des options de recherche";
 
+const calendar_nav_desc = "descriptions.shared.calendar";
+const display_desc = "descriptions.shared.display";
+const search_bar_desc = "descriptions.shared.search";
 
+// Dashboard images and descriptions
 import dashboard from 'src/assets/help-ss/dashboard.png';
 import menu from 'src/assets/help-ss/dashboard.png';
 import notifications from 'src/assets/help-ss/dashboard.png';
 import chatbot from 'src/assets/help-ss/dashboard.png';
-const menu_desc = "Description du menu";
-const news_feed_desc = "Description du news feed";
-const chat_bot_desc = "description du chat_bot";
-const notification_desc = "Description des notifications"
 
+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"
+
+export const dashboard_options: HelpModuleOptions[] = [
+    { label: 'help.tutorial.dashboard.menu', path: dashboard, description: menu_desc, icon: 'menu' },
+    { label: 'help.tutorial.dashboard.news_feed', path: menu, description: news_feed_desc, icon: 'newspaper' },
+    { label: 'help.tutorial.dashboard.notifications', path: notifications, description: notification_desc, icon: 'notifications_active' },
+    { label: 'help.tutorial.dashboard.chat_bot', path: chatbot, description: chat_bot_desc, icon: 'smart_toy' },
+];
+
+// profile images and descriptions
 import personal_info from 'src/assets/help-ss/personal_infos.png';
 import professionnal_info from 'src/assets/help-ss/professionnal_infos.png';
 import preferences from 'src/assets/help-ss/preferences.png';
-const personal_infos_desc = "Description du profil personnel";
-const professional_info_desc = "Description du profil professionnel";
-const preferences_details_desc = "description des préférences";
 
+const personal_infos_desc = "descriptions.personal_profile.personal_info";
+const professional_info_desc = "descriptions.personal_profile.professional_info";
+const preferences_details_desc = "descriptions.personal_profile.preferences";
+
+export const profile_options: HelpModuleOptions[] = [
+    { label: 'help.tutorial.personal_profile.personal_info', path: personal_info, description: personal_infos_desc, icon: 'contact_page' },
+    { label: 'help.tutorial.personal_profile.professional_info', path: professionnal_info, description: professional_info_desc, icon: 'badge' },
+    { label: 'help.tutorial.shared.preferences', path: preferences, description: preferences_details_desc, icon: 'display_settings' },
+];
+
+// 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 delete_shift from 'src/assets/help-ss/delete-shift.png';
@@ -46,47 +66,14 @@ import comment_shift from 'src/assets/help-ss/commenting-shift.png';
 import create_expense from 'src/assets/help-ss/expenses.png';
 import delete_expense from 'src/assets/help-ss/delete-expense.png';
 import update_expense from 'src/assets/help-ss/update-expense.png';
-const create_shift_desc = "Description create shift";
-const update_shift_desc = "Description create shift";
-const delete_shift_desc = "Description create shift";
-const comment_shift_desc = "Description create shift";
-const create_expense_desc = "Description create shift";
-const update_expense_desc = "Description create shift";
-const delete_expense_desc = "Description create shift";
 
-import terminated_employee_display from 'src/assets/help-ss/employee-list.png';
+const create_shift_desc = "descriptions.timesheets.create_shift";
-import terminating_employee from 'src/assets/help-ss/employee-list.png';
+const update_shift_desc = "descriptions.timesheets.update_shift";
-import create_employee from 'src/assets/help-ss/create-employee.png';
+const delete_shift_desc = "descriptions.timesheets.delete_shift";
-import update_employee from 'src/assets/help-ss/update-employee.png';
+const comment_shift_desc = "descriptions.timesheets.comment_shift";
-import access_management from 'src/assets/help-ss/access-management.png';
+const create_expense_desc = "descriptions.timesheets.create_expense";
-import schedule_preset from 'src/assets/help-ss/schedule-preset-management.png';
+const update_expense_desc = "descriptions.timesheets.update_expense";
-const terminated_employee_desc = "Description de l'option d'affichage des employés qui ne sont plus à l'emploie";
+const delete_expense_desc = "descriptions.timesheets.delete_expense";
-const terminating_employee_desc = "Description on to how to terminate an employee";
-const create_employee_desc = "Description pour la création d'un employé";
-const update_employee_desc = "Description pour la mise à jour d'un employé";
-const module_access_desc = "Description d'attribution des accès";
-const schedule_preset_desc = "Description d'attribution d'horaire prédéfinit";
-
-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';
-const comment_expense_desc = "Description create shift";
-const timesheets_approval_desc = "Description de la page de validation de quart";
-const timesheets_approval_inspect_desc = "Description du modal de détails";
-
-
-export const dashboard_options: HelpModuleOptions[] = [
-    { label: 'help.tutorial.dashboard.menu', path: dashboard, description: menu_desc, icon: 'menu' },
-    { label: 'help.tutorial.dashboard.news_feed', path: menu, description: news_feed_desc, icon: 'newspaper' },
-    { label: 'help.tutorial.dashboard.notification', path: notifications, description: notification_desc, icon: 'notifications_active' },
-    { label: 'help.tutorial.dashboard.chat_bot', path: chatbot, description: chat_bot_desc, icon: 'smart_toy' },
-];
-
-export const profile_options: HelpModuleOptions[] = [
-    { label: 'help.tutorial.personal_profile.personal_info', path: personal_info, description: personal_infos_desc, icon: 'contact_page' },
-    { label: 'help.tutorial.personal_profile.professional_info', path: professionnal_info, description: professional_info_desc, icon: 'badge' },
-    { label: 'help.tutorial.shared.preferences', path: preferences, description: preferences_details_desc, icon: 'display_settings' },
-];
 
 export const timesheets_options: HelpModuleOptions[] = [
     { label: 'help.tutorial.timesheets.create_shift', path: create_shift, description: create_shift_desc, icon: 'add' },
@@ -99,6 +86,22 @@ export const timesheets_options: HelpModuleOptions[] = [
     { 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 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';
+import schedule_preset from 'src/assets/help-ss/schedule-preset-management.png';
+
+const terminated_employee_desc = "descriptions.employee_list.terminated_employees";
+const terminating_employee_desc = "descriptions.employee_management.terminating_employee";
+const create_employee_desc = "descriptions.employee_management.create_employee";
+const update_employee_desc = "descriptions.employee_management.update_employee";
+const module_access_desc = "descriptions.employee_management.module_access";
+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' },
@@ -116,6 +119,15 @@ export const employee_management_options: HelpModuleOptions[] = [
     { label: 'help.tutorial.shared.search', path: search_bar, description: search_bar_desc, icon: 'search' },
 ];
 
+// Timesheets approval images and descriptions
+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';
+
+const comment_expense_desc = "descriptions.timesheets_approval.comment_expense";
+const timesheets_approval_desc = "descriptions.timesheets_approval.approval";
+const timesheets_approval_inspect_desc = "descriptions.timesheets_approval.inspect";
+
 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' },
@@ -124,3 +136,12 @@ export const timesheets_approval_options: HelpModuleOptions[] = [
     { 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

@@ -21,9 +21,9 @@ onMounted(async () => {
                 class="text-accent"
             />
             <help-module
-                v-for="module, index in help_store.help_modules"
+                v-for="help_module, index in help_store.help_modules"
-                :key="module"
+                :key="help_module"
-                :module="module"
+                :help_module="help_module"
                 :module-index="index"
             />
         </div>