Merge branch 'main' of git.targo.ca:Targo/targo_frontend into dev/nicolas/timesheet-approval-staging-prep

Dockerfile

@@ -8,7 +8,7 @@ WORKDIR /app
 RUN yarn global add @quasar/cli
 
 # Set environment variables
-ENV VITE_TARGO_BACKEND_URL="http://targo-backend:3000"
+ENV VITE_TARGO_BACKEND_URL="http://10.100.251.2:3420/"
 
 # Copy the code
 COPY . .
@@ -24,4 +24,4 @@ RUN yarn lint
 EXPOSE 9000
 
 # Default command
-CMD ["quasar", "dev"]
+CMD ["npm", "run", "dev"]

src/i18n/en-ca/index.ts

@@ -1,4 +1,58 @@
 export default {
+    dashboard: {
+        welcome: "Welcome to the Targo App!",
+    },
+    help: {
+        label: "Centre d'aide",
+        tutorial: {
+            dashboard: {
+                title: "Home Page",
+                news_feed: "News Feed",
+                chat_bot: "Technical chat-bot",
+                notifications: "Notifications",
+            },
+            personal_profile: {
+                title: "Personnal Profile",
+                personal_info: "Personal informations",
+                professional_info: "Professional informations",
+            },
+            timesheets: {
+                title: "Timesheet",
+                create_shift: "Add a new shift",
+                update_shift: "Update an existing shift",
+                delete_shift: "Removing a shift from the timesheet",
+                comment_shift: "Commenting a shift",
+                create_expense: "Add a new expense",
+                update_expense: "Update an existing expense",
+                delete_expense: "Removing an expense from the list",
+
+            },
+            employee_list: {
+                title: "Employee List",
+                terminated_employees: "Inactive employees",
+            },
+            employee_management: {
+                title: "Employee Management",
+                create_employee: "Creating a new employee",
+                update_employee: "Updating an existing employee's informations",
+                module_access: "App managing access tool",
+                schedule_preset: "Schedule preset management",
+                terminating_employee: "terminate an employee",
+            },
+            timesheets_approval: {
+                title: "Timesheets approval",
+                approval: "timesheet approvals",
+                inspect: "Inspect timesheets",
+                comment_expense: "Commenting an expense",
+            },
+            shared: {
+                search: "Advance search",
+                preferences: "Display mode",
+                calendar: "Navigation using the calendar",
+                display: "Display as cards or as a list"
+            },
+        },
+    },
     employee_list: {
         page_header: "Employee Directory",
         table: {
@@ -292,4 +346,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

@@ -1,4 +1,58 @@
 export default {
+    dashboard: {
+        welcome: "Bienvenue dans l'application Targo!",
+    },
+    help: {
+        label: "Centre d'aide",
+        tutorial: {
+            dashboard: {
+                title: "Page d'accueil",
+                menu: "Menu Principal",
+                news_feed: "Fil d'actualités",
+                chat_bot: "Robot conversationnel d'aide technique",
+                notifications: "Notifications",
+            },
+            personal_profile: {
+                title: "Profil",
+                personal_info: "Informations personnelles",
+                professional_info: "Informations professionnelles",
+            },
+            timesheets: {
+                title: "Carte de temps",
+                create_shift: "Inscrire un nouveau quart de travail",
+                update_shift: "Modifier un quart de travail existant",
+                delete_shift: "Supprimer un quart de travail de la carte de temps",
+                comment_shift: "Commenter un quart de travail",
+                create_expense: "Inscrire une dépense",
+                update_expense: "Modifier une dépense",
+                delete_expense: "Supprimer une dépense",
+            },
+            employee_list: {
+                title: "Répertoire des employés ",
+                terminated_employees: "Employés inactifs",
+            },
+            employee_management: {
+                title: "Gestion des employés ",
+                create_employee: "Création d'un nouvel employé",
+                update_employee: "Modifier les informations d'un employé",
+                module_access: "Outils de gestion des accès de l'application",
+                schedule_preset: "Gestion des horaires prédéterminés",
+                terminating_employee: "Rendre un employé inactif",
+            },
+            timesheets_approval: {
+                title: "Validation de Carte de temps",
+                approval: "Validation des cartes de temps",
+                inspect: "Inspect timesheets",
+                comment_expense: "Commenter une dépense",
+            },
+            shared: {
+                search: "Recherche avancée",
+                preferences: "Options de préférences d'affichage",
+                calendar: "Navigation avec l'aide du calendrier",
+                display: "Affichage par Cartes ou par Liste"
+            },
+        },
+    },
     employee_list: {
         page_header: "Répertoire du personnel",
         table: {
@@ -293,4 +347,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/auth/components/login-connection-panel.vue

@@ -1,15 +1,14 @@
-<script
-    setup
-    lang="ts"
->
-    import { computed, ref } from 'vue';
-    import { useAuthApi } from 'src/modules/auth/composables/use-auth-api';
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useAuthApi } from 'src/modules/auth/composables/use-auth-api';
+import LoginRockPaperScissor from 'src/modules/auth/components/login-rock-paper-scissor.vue';
 
-    const auth_api = useAuthApi();
+const auth_api = useAuthApi();
 
-    const email = defineModel<string>('email', { default: '', });
-    const is_remembered = ref<boolean>(false);
-    const is_employee_email = computed(() => email.value.includes('@targ'));
+const email = defineModel<string>('email', { default: '', });
+// const is_remembered = ref<boolean>(false);
+const is_employee_email = computed(() => email.value.includes('@targ'));
+const is_game_time = computed(() => email.value.includes('allumette'));
 </script>
 
 <template>
@@ -44,8 +43,8 @@
                         <span class="text-weight-bolder text-uppercase text-overline"> {{ $t('login.email') }} </span>
                     </template>
                 </q-input>
-
-                <q-card-section
+                <!-- Stay-logged-in section, removed temporarly until customer module is up -->
+                <!-- <q-card-section
                     horizontal
                     class="q-mb-md q-pa-none text-uppercase text-caption text-weight-medium"
                 >
@@ -63,7 +62,7 @@
                         {{ $t('login.button.remember_me') }}
                     </span>
 
-                </q-card-section>
+                </q-card-section> -->
 
                 <q-card-actions>
                     <q-btn
@@ -73,7 +72,7 @@
                         type="submit"
                         color="accent"
                         :label="$t('login.button.connect')"
-                        class="full-width"
+                        class="full-width q-mt-lg"
                     />
                 </q-card-actions>
 
@@ -135,4 +134,7 @@
             </q-card-section>
         </div>
     </q-card>
+    <div v-if="is_game_time">
+        <LoginRockPaperScissor />
+    </div>
 </template>

src/modules/auth/components/login-rock-paper-scissor.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { Notify } from 'quasar';
+import { ref } from 'vue';
+const choices = ['rock', 'paper', 'scissors'] as const;
+type Choice = typeof choices[number];
+const app_choice = ref<Choice>();
+
+const click_number = ref(1);
+const icon = ref('');
+const color = ref('accent');
+
+const getRandmonChoice = (): Choice => {
+    const index = Math.floor(Math.random() * choices.length);
+    return choices[index]!;
+};
+const icon_map: Record<Choice, string> = {
+    rock: 'las la-hand-rock',
+    paper: 'las la-hand-paper',
+    scissors: 'las la-hand-scissors',
+};
+
+const fightingResult = () => {
+    if (click_number.value === 7) {
+        Notify.create({
+            icon: 'las la-hand-middle-finger',
+            color: 'negative',
+            iconSize: '5em',
+            iconColor: 'white',
+        })
+        return;
+    }
+
+    app_choice.value = getRandmonChoice();
+    icon.value = icon_map[app_choice.value];
+    color.value = 'accent';
+
+    Notify.create({
+        color: color.value,
+        icon: icon.value,
+        iconSize: '5em',
+        iconColor: 'white',
+    });
+
+    click_number.value += 1;
+}
+</script>
+<template>
+    <div class="row flex-center q-mt-xl">
+        <div class="q-px-sm">
+            <q-btn
+                push
+                dense
+                color="accent"
+                icon="las la-hand-rock"
+                @click="fightingResult()"
+            />
+        </div>
+        <div class="q-px-sm">
+            <q-btn
+                push
+                dense
+                color="accent"
+                icon="las la-hand-paper"
+                @click="fightingResult()"
+            />
+        </div>
+        <div class="q-px-sm">
+            <q-btn
+                push
+                dense
+                color="accent"
+                icon="las la-hand-scissors"
+                @click="fightingResult()"
+            />
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,145 @@
+<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';
+import default_employee_list from 'src/assets/help-ss/default-employee-list.png';
+import default_employee_management from 'src/assets/help-ss/default-employee-management.png';
+import default_validation_page from 'src/assets/help-ss/default-validation-page.png';
+
+const default_images: Record<UserModuleAccess, string> = {
+    dashboard: '',
+    personal_profile: default_personal_profile,
+    timesheets: default_timesheet,
+    employee_list: default_employee_list,
+    employee_management: default_employee_management,
+    timesheets_approval: default_validation_page,
+};
+
+import type { HelpModuleOptions } from 'src/modules/help/models/help-module.model';
+import type { UserModuleAccess } from 'src/modules/shared/models/user.models';
+import { ref } from 'vue';
+
+const props = defineProps<{
+    help_module: UserModuleAccess;
+    options: HelpModuleOptions[];
+    moduleIndex: number;
+}>();
+
+const help_module = props.help_module;
+const current_path = ref<string>(default_images[help_module]);
+
+const switchSide = (index: number) => {
+    if (index % 2 !== 0) {
+        return false
+    }
+    return true
+}
+
+</script>
+
+<template>
+    <div
+        v-if="help_module !== 'dashboard'"
+        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'"
+        >
+            {{ ($t(`help.tutorial.${help_module}.title`)).toUpperCase() }}
+        </div>
+        <!-- Card Body -->
+        <div class="row col full-width q-px-none">
+            <!-- Object and descriptions zone -->
+            <div
+                class="col flex-center row"
+                v-if="moduleIndex % 2 !== 0"
+            >
+                <transition
+                    appear
+                    enter-active-class="animated fade-in"
+                    leave-active-class="animated fade-out"
+                >
+                    <q-img
+                        class="image-wrapper"
+                        :src="current_path"
+                        loading="lazy"
+                        fit="contain"
+                    >
+                    </q-img>
+                </transition>
+            </div>
+            <div class="col column">
+
+                <q-expansion-item
+                    v-for="option, index in options"
+                    :key="index"
+                    dense
+                    hide-expand-icon
+                    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;"
+                >
+                    <template #header>
+                        <div
+                            class="row full-width items-center"
+                            :class="switchSide(moduleIndex) ? 'justify-start' : 'justify-end'"
+                        >
+                            <q-icon
+                                v-if="switchSide(moduleIndex)"
+                                :name="option.icon"
+                                class="col-auto q-pr-sm"
+                                size="sm"
+                            />
+                            <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"
+                            />
+                        </div>
+                    </template>
+                    <div
+                        class="q-px-xl q-pb-sm text-weight-medium"
+                        :class="switchSide(moduleIndex) ? 'text-left' : 'text-right'"
+                    >
+                        {{ ($t(`${option.description}`)) }}
+                    </div>
+                </q-expansion-item>
+            </div>
+            <!-- images of the related selected option -->
+            <div
+                class="col flex-center row"
+                v-if="moduleIndex % 2 === 0"
+            >
+                <transition
+                    appear
+                    enter-active-class="animated fade-in"
+                    leave-active-class="animated fade-out"
+                >
+                    <q-img
+                        class="image-wrapper"
+                        :src="current_path"
+                        loading="lazy"
+                        fit="contain"
+                        style="width: 150%;"
+                    >
+                    </q-img>
+                </transition>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.image-wrapper {
+    max-width: 480px;
+    max-height: 320px;
+    width: 100%;
+}
+</style>

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

@@ -0,0 +1,153 @@
+import type { UserModuleAccess } from 'src/modules/shared/models/user.models';
+
+export type HelpModuleOptions = {
+    label: string;
+    path: string;
+    description: string;
+    icon: string;
+};
+
+export type Options = Record<UserModuleAccess, HelpModuleOptions[]>;
+export type PartialOptions = Partial<Record<UserModuleAccess, 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-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";
+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 = "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 = "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/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';
+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 = "descriptions.timesheets.create_shift";
+const update_shift_desc = "descriptions.timesheets.update_shift";
+const delete_shift_desc = "descriptions.timesheets.delete_shift";
+const comment_shift_desc = "descriptions.timesheets.comment_shift";
+const create_expense_desc = "descriptions.timesheets.create_expense";
+const update_expense_desc = "descriptions.timesheets.update_expense";
+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: '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: '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/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';
+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_card, description: display_desc, icon: 'display_settings' },
+    { label: 'help.tutorial.shared.search', path: search_bar, description: search_bar_desc, icon: 'search' },
+];
+
+export const employee_management_options: HelpModuleOptions[] = [
+    { label: 'help.tutorial.employee_list.terminated_employees', path: terminated_employee_display, description: terminated_employee_desc, icon: 'work_off' },
+    { label: 'help.tutorial.employee_management.create_employee', path: create_employee, description: create_employee_desc, icon: 'person_add' },
+    { 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: 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' },
+];
+
+// 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';
+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";
+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' },
+    { label: 'help.tutorial.timesheets_approval.comment_expense', path: comment_expense, description: comment_expense_desc, icon: 'chat_bubble_outline' },
+    { 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' },
+];
+
+
+
+
+export const help_module_details: Options = {
+    dashboard: [],
+    personal_profile: profile_options,
+    timesheets: timesheets_options,
+    employee_list: employee_list_options,
+    employee_management: employee_management_options,
+    timesheets_approval: timesheets_approval_options,
+};
+
+
+
+
+

src/modules/help/services/help.service.ts

@@ -0,0 +1,10 @@
+import { api } from "src/boot/axios";
+import type { BackendResponse } from "src/modules/shared/models/backend-response.models";
+import type { UserModuleAccess } from "src/modules/shared/models/user.models";
+
+export const HelpService = {
+    getHelpModules: async (): Promise<BackendResponse<UserModuleAccess[]>> => {
+        const response = await api.get<BackendResponse<UserModuleAccess[]>>(`/help`);
+        return response.data;
+    }
+}

src/pages/dashboard-page.vue

@@ -46,7 +46,7 @@
                         position="50% 25%"
                     >
                         <div class="absolute-bottom text-h5">
-                            Welcome to App Targo!
+                            {{ $t('dashboard.welcome') }}
                         </div>
                     </q-img>
                     <div class="q-mt-md text-center">

src/pages/help-page.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
+import HelpModule from 'src/modules/help/components/help-module.vue';
+import { onMounted } from 'vue';
+import { useHelpStore } from 'src/stores/help-store';
+
+const help_store = useHelpStore();
+onMounted(() => {
+    help_store.getFilteredModule();
+});
+</script>
+
+<template>
+    <q-page
+        flat
+        class="bg-secondary q-px-xl no-wrap row justify-center"
+    >
+        <div class="col-8 q-px-xl">
+            <PageHeaderTemplate
+                :title="$t('help.label')"
+                class="text-accent"
+            />
+            <help-module
+                v-for="(options, help_module, index) in help_store.user_modules"
+                :key="help_module"
+                :help_module="help_module"
+                :module-index="index"
+                :options="options"
+            />
+        </div>
+    </q-page>
+</template>

src/router/router-constants.ts

@@ -8,6 +8,6 @@ export enum RouteNames {
     PROFILE = 'personal_profile',
     TIMESHEET = 'timesheets',
     HELP = 'help',
-    
+
     ERROR = 'error',
 }

src/router/routes.ts

@@ -4,12 +4,12 @@ import { ModuleNames } from 'src/modules/shared/models/user.models';
 
 const routes: RouteRecordRaw[] = [
   {
-    path: '/', 
+    path: '/',
     component: () => import('src/layouts/main-layout.vue'),
     meta: { requires_auth: true },
     children: [
-      { 
-        path: '', 
+      {
+        path: '',
         name: RouteNames.DASHBOARD,
         component: () => import('src/pages/dashboard-page.vue'),
         meta: { required_module: ModuleNames.DASHBOARD }
@@ -38,18 +38,23 @@ const routes: RouteRecordRaw[] = [
         component: () => import('src/pages/profile-page.vue'),
         meta: { required_module: ModuleNames.PERSONAL_PROFILE },
       },
+      {
+        path: 'help',
+        name: RouteNames.HELP,
+        component: () => import('src/pages/help-page.vue'),
+      },
     ],
   },
 
   {
-    path: '/v1/login', 
+    path: '/v1/login',
     name: RouteNames.LOGIN,
     component: () => import('src/pages/login-page.vue'),
     meta: { requires_auth: false },
   },
 
   {
-    path: '/login-success', 
+    path: '/login-success',
     name: RouteNames.LOGIN_SUCCESS,
     component: () => import('src/modules/auth/pages/auth-login-popup-success.vue'),
     meta: { requires_auth: false },

src/stores/help-store.ts

@@ -0,0 +1,37 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { help_module_details } from "src/modules/help/models/help-module.model";
+import { useAuthStore } from "src/stores/auth-store";
+import type { HelpModuleOptions } from "src/modules/help/models/help-module.model";
+import type { UserModuleAccess } from "src/modules/shared/models/user.models";
+
+
+
+export const useHelpStore = defineStore('help', () => {
+    const is_loading = ref(false);
+    const user_modules = ref<Record<UserModuleAccess, HelpModuleOptions[]>>();
+    const auth_store = useAuthStore();
+
+    const getFilteredModule = () => {
+        if(!auth_store.user) return;
+
+        const entries = auth_store.user.user_module_access
+            .map((key) => {
+                const options = help_module_details[key];
+                return options ? ([key, options] as const) : null;
+            })
+            .filter(
+                (entry): entry is readonly [UserModuleAccess, HelpModuleOptions[]] =>
+                    entry !== null
+            );
+
+        user_modules.value = Object.fromEntries(entries) as Record<UserModuleAccess, HelpModuleOptions[]>;
+    }
+
+    return {
+        is_loading,
+        user_modules,
+        help_module_details,
+        getFilteredModule,
+    };
+});