Les écrans
L'app compte 31 écrans : 7 publics et 24 pour l'utilisateur connecté. Pour chacun : à quoi il sert, qui le voit, et ce qu'il utilise.
Écrans publics
Fichiers dans src/app/, accessibles sans être connecté.
| Écran | Fichier | Rôle | Utilise |
|---|---|---|---|
| Présentation | onboarding.tsx | Trois pages qui défilent : pointer avec le téléphone, suivre ses heures, demander une correction. « Passer », « Suivant », « Commencer ». | useOnboarding().finish |
| Connexion | sign-in.tsx | Email, mot de passe (avec « afficher »), lien « mot de passe oublié ». Affiche « mot de passe changé » après une réinitialisation. | useSession().signIn |
| Mot de passe oublié | forgot-password.tsx | Envoie un lien de réinitialisation par email. | requestPasswordReset |
| Nouveau mot de passe | reset-password.tsx | Depuis le lien reçu : choisir un nouveau mot de passe. | usePasswordLink, PasswordRules |
| Activer le compte | set-password.tsx | Depuis l'invitation : prénom, nom, mot de passe. | usePasswordLink, PasswordRules |
| Confirmer l'email | confirm-email.tsx | Depuis le lien de changement d'email du GM. | confirmEmailChange |
| Compte supprimé | account-deleted.tsx | Message de fin après la suppression de son compte. |
Les onglets
Fichiers dans src/app/(tabs)/.
Clock : index.tsx
Tout le monde. L'écran principal.
- L'équipe de l'utilisateur en haut.
- L'heure actuelle en grand et le statut : « Hors service », « En service », « En pause ».
- Un gros bouton rond Service, et un bouton Pause qui apparaît une fois en service. Il faut les maintenir 1 seconde : un anneau se remplit et le téléphone vibre.
- Sous chaque bouton, le chrono en cours.
- Hors service : l'heure du dernier départ. En service : « Travaillé aujourd'hui · objectif du jour » et le lien « Voir la journée » vers Today.
- L'icône d'historique en haut ouvre Times.
Utilise useToday, useTeamName, ClockButton. Voir Exemple complet : pointer.
Dashboard : dashboard.tsx
Tout le monde. Un sélecteur « 7 derniers jours / 4 dernières semaines » et trois graphiques :
- barres : heures par jour, avec la ligne de l'objectif de 7 h ;
- courbe : heures par semaine sur 5 semaines, avec l'objectif de 35 h ;
- anneau : total de la période par rapport à l'objectif.
L'écran est une simple enveloppe autour de DashboardView, qui sert aussi pour le tableau de bord d'un membre.
Times : times.tsx
Tout le monde. « Mes heures » : les 4 dernières semaines, regroupées par semaine avec leur total (« Cette semaine · 21 h 30 jusqu'ici »). Chaque jour affiche début, fin, pause, durée et un statut : complet, heures supplémentaires, départ manquant, corrigé. Un bouton « Demander une correction ».
Utilise useHistory.
Team : team.tsx
Manager et GM.
- Une ligne « Demandes de correction » avec le nombre en attente.
- Si on gère une équipe : son détail directement (
TeamDetail). - Sinon : la liste des équipes (
TeamsList), avec « Nouvelle équipe ».
Le détail d'une équipe montre un sélecteur de période (semaine dernière, 2 semaines, 4 semaines), la moyenne par personne et par semaine comparée à 35 h, puis les membres avec leurs heures hebdomadaires, et « Ajouter un membre ».
Utilise fetchCorrections, useDirectory, useRefreshDirectory, fetchTeamReport, addMember.
Account : account.tsx
Employé et manager (pour le GM, c'est dans More). Une page de réglages :
| Groupe | Contenu |
|---|---|
| En-tête | Initiales, nom, rôle et équipe |
| Profil | Prénom, nom (modifiables dans une feuille), email (modifiable seulement par le GM) |
| Préférences | Langue (anglais ou français), enregistrée sur le compte |
| Sécurité | Mot de passe |
| Mes heures | Notifications (avec le nombre de non lues), Mes modifications, Mes données |
| Revoir la présentation | |
| Se déconnecter | |
| Supprimer mon compte (pas pour le GM) | |
| Crédits | Uicons par Flaticon |
More : more.tsx
GM seulement. Administration (Utilisateurs) et Réglages du compte, qui ouvre le même écran Account que les autres rôles.
Les écrans sans onglet
Ils s'ouvrent depuis un onglet. Entre parenthèses, l'onglet qui reste allumé.
Pointage et heures
| Écran | Fichier | Qui | Rôle |
|---|---|---|---|
| Today (Clock) | today.tsx | Tous | La frise du jour (6 h à 20 h, travail en vert, pauses en sable), le résumé (travaillé, pause, objectif) et la liste des événements : arrivée, début de pause, fin de pause, départ. |
| Demander une correction (Times) | request-correction.tsx | Tous | Choisir le jour parmi les 4 dernières semaines, le problème (arrivée manquante, départ manquant, mauvaise arrivée, mauvais départ, mauvaise pause), la bonne heure (et la fin pour une pause), et une raison. |
Équipe
| Écran | Fichier | Qui | Rôle |
|---|---|---|---|
| Nouvelle équipe (Team) | new-team.tsx | Manager, GM | Nom et manager, choisi parmi les comptes actifs qui ne sont pas employés (par défaut : soi-même). |
| Détail d'équipe (Team) | team-detail.tsx | Manager, GM | Le détail d'une équipe quand on en gère plusieurs, avec « Renommer », « Changer de manager » (GM) et « Supprimer ». |
| Fiche membre (Team) | member.tsx | Manager, GM | Les heures de la personne semaine par semaine, avec appui pour modifier, « Ajouter une période », « Voir le tableau de bord », puis ses absences et ses semaines (MemberRecords), et « Retirer de l'équipe ». |
| Tableau de bord d'un membre (Team) | member-dashboard.tsx | Manager, GM | DashboardView pour une autre personne. |
| Modifier une période (Team) | edit-working-time.tsx | Manager, GM | Début et fin avec un sélecteur jour + heure, durée calculée, « Enregistrer », « Supprimer ». Refusé si la semaine est validée. |
| Ajouter une absence (Team) | add-absence.tsx | Manager, GM | Du, au (31 jours maximum), type : congé, maladie, autre. Jamais de motif. |
| Demandes de correction (Team) | requests.tsx | Manager, GM | « À traiter » et « Traitées », avec leur statut. |
| Appliquer la correction (Team) | review.tsx | Manager, GM | La demande et sa raison, ce qui a été enregistré ce jour-là, la période à modifier préremplie avec les heures demandées, ses pauses. « Approuver et appliquer » ou « Refuser ». |
Le préremplissage de review.tsx
C'est l'écran le plus riche. Il reprend la logique du ReviewPanel du web : pour un départ manquant, il retrouve la journée oubliée de cette date et propose son vrai début avec la fin demandée ; pour une arrivée manquante, il prend la première journée avec le début demandé. Les erreurs de l'API (chevauchement, fin dans le futur, plus de 14 h, pause hors période) sont traduites en messages qui disent quel champ changer.
Compte
| Écran | Fichier | Qui | Rôle |
|---|---|---|---|
| Mot de passe (Account) | change-password.tsx | Tous | Actuel, nouveau, confirmation, avec les règles en direct. |
| Changer d'email (Account) | change-email.tsx | GM | Nouvelle adresse et mot de passe actuel. Affiche la demande en attente et jusqu'à quand le lien est valable. |
| Notifications (Account) | notifications.tsx | Tous | Ce que d'autres ont fait sur tes heures : modification, demande approuvée ou refusée, absence enregistrée. Ouvrir l'écran les marque comme lues. |
| Mes modifications (Account) | changes.tsx | Tous | Chaque modification manuelle de tes heures : quand, quel jour, avant et après, par qui. |
| Mes données (Account) | your-data.tsx | Tous | Ce que l'app garde sur toi (avec les nombres), ce qu'elle ne collecte jamais, et « Partager une copie » : un fichier JSON envoyé par la feuille de partage du téléphone. |
Administration
| Écran | Fichier | Qui | Rôle |
|---|---|---|---|
| Utilisateurs (More) | users.tsx | GM | Recherche par nom ou email, comptes actifs et invitations, « Inviter quelqu'un ». |
| Inviter (More) | invite.tsx | GM | Email et rôle (employé ou manager). L'API envoie l'invitation. |
| Fiche utilisateur (More) | user.tsx | GM | Rôle, « Promouvoir manager » ou « Retirer les droits », « Renvoyer l'invitation », « Annuler l'invitation », « Supprimer le compte », tableau de bord. |
Qui voit quoi
| Écran | Employé | Manager | GM |
|---|---|---|---|
| Clock, Today, Dashboard, Times, Demander une correction | ✓ | ✓ | ✓ |
| Account, Mot de passe, Notifications, Mes modifications, Mes données | ✓ | ✓ | ✓ (via More) |
| Changer d'email | ✓ | ||
| Supprimer mon compte | ✓ | ✓ | |
| Team et tous les écrans d'équipe | ✓ (ses équipes) | ✓ (toutes) | |
| Changer le manager d'une équipe | ✓ | ||
| Utilisateurs, Inviter, Fiche utilisateur | ✓ |
L'app cache ce qu'un rôle ne peut pas utiliser. C'est l'API qui interdit : même en forçant l'adresse d'un écran, une requête non autorisée est refusée.
Les écrans web sans version mobile
Le sujet demande une version mobile de chaque page web, sauf les tableaux de bord. Tout est couvert. Le tableau de bord existe quand même sur mobile, en version simplifiée (deux périodes au lieu de quatre).