Frontend (web)

Page à compléter par l'équipe web

Cette section appartient à l'équipe web. Le plan ci-dessous est une suggestion qui reprend la structure des parties Mobile et DevOps. Chaque rubrique peut devenir sa propre page dans timemanager-docs/frontend/, à ajouter dans la barre latérale (timemanager-docs/.vitepress/config.mts).

En bref

Sujet	Détail
Dossier	timemanager-web/
Technologies	Vue 3 (Composition API), Vite, Tailwind CSS 4, vue-router, vue-i18n, vue-chartjs
Adresse	time.jostud.com
Image Docker	ghcr.io/saliehsab/timemanager-web

Plan suggéré

1. Les bases à connaître

• Ce qu'est Vue, un composant, la Composition API (ref, computed, watch).
• Ce qu'est Vite et pourquoi le projet l'utilise.

2. Lancer le projet

• Prérequis (version de Node).
• Commandes npm install, npm run dev, npm run build.
• La variable VITE_API_URL et comment pointer vers une API locale ou la production.

3. Bibliothèques

• Un tableau : nom, rôle, où on la voit dans le code.

4. Organisation des dossiers

• src/App.vue (la seule vue imposée par le sujet), src/components/, les stores, les utilitaires.
• Qui importe qui (un schéma Mermaid).

5. Démarrage de l'application

• index.html, main.js, montage de l'app, router, i18n.

6. Parler à l'API

• Le client HTTP, les cookies, le jeton CSRF, le refresh automatique.
• La gestion des erreurs et des codes stables (NFR-07).

7. Routes et navigation

• Les routes imposées par le sujet (/workingTimes/:userID, /clock/:userid, /chartManager/:userid...).
• La navigation selon le rôle.

8. Les pages

• Une ligne par page : à quoi elle sert, qui la voit, quelles requêtes elle fait.

9. Règles métier côté client

• Calcul des heures, oublis, heures supplémentaires, travail de nuit.

10. Design system

• Couleurs (claires et sombres), polices, icônes Uicons, composants réutilisables.

11. Langues et thème

• vue-i18n, choix de la langue, thème clair, sombre ou système.

12. Accessibilité

• Les règles WCAG suivies (NFR-01) et comment les vérifier.

13. Build et image Docker

• Le Dockerfile en trois étapes et la configuration nginx. Le côté déploiement est déjà décrit dans Docker et images.

14. Ajouter une page

• Un pas à pas pour un nouveau développeur.