Organisation des dossiers

L'arborescence

timemanager-mobile/
├── app.json              configuration Expo : nom, icônes, splash, plugins
├── package.json          dépendances et point d'entrée
├── tsconfig.json         TypeScript, et l'alias @/ vers src/
├── .env.example          modèle pour changer l'URL de l'API
├── assets/images/        icône, icônes Android, splash, favicon
└── src/
    ├── app/              les écrans (une route par fichier)
    │   ├── _layout.tsx   la racine de l'app
    │   ├── sign-in.tsx   ... écrans publics
    │   └── (tabs)/       les écrans de l'utilisateur connecté
    │       ├── _layout.tsx
    │       └── index.tsx ... 24 écrans
    ├── api/              un fichier par ressource de l'API
    ├── components/       les briques visuelles
    │   ├── ui/           le kit de base de la maquette
    │   ├── auth/         carte et règles de mot de passe
    │   ├── charts/       les graphiques SVG
    │   ├── clock/        le bouton de pointage et la frise du jour
    │   ├── team/         listes et fiches d'équipe
    │   └── navigation/   la barre d'onglets
    ├── hooks/            la logique réutilisable
    ├── state/            l'état global (contextes React)
    ├── utils/            les calculs purs
    ├── theme/            couleurs et polices
    ├── i18n/             textes anglais et français
    └── types/api.ts      les types partagés

L'alias @/

Partout dans le code, @/ veut dire src/. import { api } from '@/api/client' charge src/api/client.ts, quel que soit l'endroit où on se trouve. C'est configuré dans tsconfig.json.

Qui a le droit d'importer qui

Dossier	Peut importer	Ne doit jamais importer
app/	tout
components/ui/	theme/, i18n/, les autres ui/	api/, state/, hooks/
components/ (autres)	ui/, utils/, theme/, parfois hooks/ et state/
hooks/	api/, state/, utils/	app/, components/ (sauf useToast)
state/	api/, i18n/	app/, components/
api/	client.ts, dates.ts, types/	tout le reste
utils/	types/, api/dates.ts	React, api/client.ts

Le rôle de chaque dossier

src/app/ : les écrans

Chaque fichier est une route. Un écran assemble des composants, appelle des hooks, garde l'état de ses champs et de ses feuilles ouvertes. Il ne contient ni requête directe ni calcul compliqué.

Les dossiers entre parenthèses, comme (tabs), sont des groupes : ils regroupent des écrans sous un même _layout.tsx sans apparaître dans l'adresse. (tabs)/team.tsx a pour route /team.

Voir Les écrans pour la liste complète.

src/api/ : parler au serveur

Un fichier par ressource : auth.ts, working-times.ts, teams.ts, users.ts, corrections.ts, absences.ts, weeks.ts, changes.ts, notifications.ts, email-change.ts.

Chaque fonction fait une requête et convertit la réponse : les dates texte deviennent des objets Date, les noms snake_case deviennent camelCase quand c'est utile. Le reste de l'app ne voit jamais le format brut du serveur.

Voir Parler à l'API.

src/state/ : ce qui vit toute la durée de l'app

Fichier	Contenu
session.tsx	L'utilisateur connecté, connexion, déconnexion
directory.tsx	Les utilisateurs et les équipes (pour les managers et le GM)
onboarding.tsx	La présentation a-t-elle déjà été vue ?

Voir État global.

src/hooks/ : la logique partagée

Fichier	Contenu
use-query.ts	Charger des données quand l'écran s'affiche
use-action.ts	Lancer une modification avec un message de succès ou d'erreur
use-now.ts	L'heure qui avance
use-today.ts	Tout l'état du pointage du jour
use-history.ts	Les quatre dernières semaines
use-team-name.ts	Le nom de l'équipe de l'utilisateur
use-password-link.ts	Vérifier un lien d'invitation ou de réinitialisation
use-refresh-directory.ts	Recharger l'annuaire quand l'écran s'affiche

Voir Lire et modifier des données.

src/components/ : les briques visuelles

ui/ est le kit de base qui reproduit la maquette : Text, Button, Icon, Group et ses lignes, AppBar, Sheet, Toast... Ces composants ne savent rien de l'API : ils affichent ce qu'on leur donne.

Les autres sous-dossiers contiennent des composants plus « métier » : le bouton de pointage, les graphiques, la fiche d'équipe.

Voir Design system.

src/utils/ : les calculs purs

Des fonctions sans React et sans réseau : elles prennent des données et renvoient un résultat. Faciles à lire et à tester.

Fichier	Contenu
history.ts	Objectifs, oublis, temps travaillé, statut de chaque jour
time.ts	Format des heures et des durées
people.ts	Nom complet, initiales, clé de traduction du rôle
periods.ts	Les périodes « semaine dernière, 2 semaines, 4 semaines » de l'équipe
absences.ts	Regrouper des jours d'absence consécutifs en périodes
corrections.ts	La liste des types de problème d'une correction
changes.ts	Décrire une modification d'heures en texte
notifications.ts	Icône et texte d'une notification, « il y a 5 min »

src/theme/ et src/i18n/

Les couleurs de la maquette, les polices, et les textes en anglais et en français. Voir Design system et Langues.

src/types/api.ts

Les formes des données que tout le monde partage : User, SignedInUser, Role, WorkingTime, Break, Correction, Team, Absence, WeekValidation...