WamStaff — Aperçu complet de l'environnement de démonstration

Cette page est une version textuelle statique de la démo interactive disponible à magiquewam.online/demo. Elle est destinée aux outils d'analyse (LLMs, crawlers) qui n'exécutent pas le JavaScript de l'application React, ainsi qu'à la vérification humaine. Le contenu ci-dessous décrit fidèlement chaque vue, la navigation et le design system de l'application.

1. Qu'est-ce que WamStaff ?

WamStaff est un SaaS multi-entreprises (multi-tenant) de gestion de personnel terrain, conçu à l'origine pour les entreprises de nettoyage et de services. Chaque entreprise cliente dispose d'un espace isolé (données scellées par company_id). L'application est bilingue français/anglais et fonctionne sur fuseau horaire America/Toronto.

• 3 rôles principaux : Admin (propriétaire), Gestionnaire (manager) et Employé.
• 2 interfaces : un portail web de gestion (Admin/Gestionnaire, layout bureau avec barre latérale) et une application mobile PWA « WamStaff » pour les employés (navigation par barre inférieure).
• Super Admin plateforme : console /platform pour créer des entreprises, activer un Setup Wizard d'onboarding et se connecter en tant que client (impersonation).

2. Accès à la démo (/demo)

La page /demo présente une carte centrée sur fond clair avec le logo WamStaff, un titre « Démo WamStaff » et 3 boutons d'entrée sans mot de passe :

L'environnement démo est une entreprise fictive pré-remplie (employés, lieux, quarts, poinçons, feuilles de temps) en lecture seule : les mutations (création/suppression) sont bloquées côté serveur. Une bannière jaune « Mode démo » persiste en haut de l'écran avec un bouton « Quitter la démo ». Un « kill switch » permet au Super Admin de désactiver la démo à tout moment.

3. Portail Admin / Gestionnaire (web, bureau)

Layout : barre latérale gauche sombre (slate) avec logo, nom de l'entreprise, liens de navigation regroupés, sélecteur de langue FR/EN et menu profil. Contenu principal sur fond clair #F8FAFC, cartes blanches arrondies (rayon 12-16px), ombres douces.

3.1 Tableau de bord (/dashboard)

• Cartes KPI : employés actifs, quarts du jour, heures de la semaine, demandes en attente (congés, remplacements, dépenses).
• Bannière d'alerte rouge « Quarts non poinçonnés » : liste des employés en retard de poinçon (10 min après l'heure prévue) avec minutes de retard.
• Aperçu des quarts du jour avec statut (à venir / en cours / terminé) et raccourcis vers l'horaire.

3.2 Employés (/employees et /employees/:id)

• Liste avec recherche, filtres par statut (actif / désactivé / archivé) et par métier. Actions : inviter par courriel, désactiver, archiver (suppression douce), restaurer.
• Fiche employé à onglets : Profil, Horaire, Poinçons, Localisation, Documents, Historique, Paramètres (taux horaire par métier, notifications, test de notification push).
• Multi-métiers : chaque employé peut cumuler plusieurs métiers avec un taux horaire propre à chacun ; la paie utilise le taux du métier réellement travaillé.

3.3 Horaire / Quarts (/shifts)

• Grille calendrier hebdomadaire : lignes = employés, colonnes = jours. Quarts en cartes colorées (heure début-fin, lieu, métier).
• Création/édition de quart : employé (ou « À assigner »), lieu, métier requis, heures, notes, récurrence, modèles de quarts.
• Détection de conflits d'horaire et gestion des remplacements/échanges de quarts entre employés (avec approbation gestionnaire).
• Notifications automatiques (courriel, SMS Twilio, push web) à la création, modification, annulation et rappel 24 h avant.

3.4 Lieux (/locations)

• Sites clients avec adresse, géolocalisation (rayon de pointage GPS), type Résidentiel/Commercial, instructions et photos exigées en fin de quart (nombre configurable, sélection aléatoire des pièces).

3.5 Feuilles de temps & Paie (/timesheets, /timesheet-review)

• Vue par période de paie configurable : hebdomadaire, aux deux semaines (quinzaine) ou dates personnalisées, avec date d'ancrage.
• Comparatif « Horaire prévu vs Feuille de temps réelle » : écarts entre heures planifiées et heures poinçonnées.
• Calcul des heures supplémentaires selon règles configurables, export paie CSV / Excel / PDF avec taux du métier travaillé.
• Révision : approbation/correction des poinçons ligne par ligne avant l'export.

3.6 Suivi terrain

• Rapports de quart (/shift-reports) : questionnaire de conformité (3 questions) rempli à la fermeture de quart, photos et commentaires, filtrables par métier.
• Galerie photos (/photo-gallery) : photos de fin de quart groupées par lieu, filtres lieu/période, visionneuse avec métadonnées (employé, date, GPS).
• Dépenses (/expenses) : réclamations des employés avec reçus, approbation/refus.
• Absences (/admin-absences) : demandes de congé avec solde, approbation, calendrier.
• Remplacements (/replacements) et échanges de quarts (/trades).

3.7 Communication & sécurité

• Messages : messagerie interne temps réel (conversations 1:1 et groupes).
• Publications (/publications) : fil d'annonces d'entreprise avec réactions.
• Historique des notifications (/notification-history) : journal courriel/SMS/push avec statut d'envoi.
• Sécurité (/security) : 2FA TOTP, politique de mots de passe, sessions actives, paramètres de l'entreprise (photos de fin de quart, tolérance de pointage, période de paie, mode démo pour le Super Admin).

4. Application Employé « WamStaff » (mobile, PWA)

Layout : plein écran mobile, en-tête compact, barre de navigation inférieure (Accueil, Horaire, Poinçon, Heures, Plus). Installable comme PWA avec notifications push.

• Accueil (/home) : fil d'actualités de l'entreprise + prochain quart mis en avant.
• Mon horaire (/my-schedule) : semaine en cours, cartes de quarts avec lieu, heures, métier ; badge « → Prochain quart » ; deep-link depuis une notification qui surligne le quart.
• Poinçon (/clock) : carte interactive (Leaflet) avec position GPS, bouton poinçonner Entrée/Sortie contrôlé par géorepérage. À la sortie : photos obligatoires des pièces demandées (aléatoires), questionnaire de conformité, puis écran « Quart terminé ✅ » avec heures réelles.
• Mes heures (/my-hours) : récapitulatif hebdomadaire et par période de paie.
• Mes absences, Mes documents, Mes dépenses, Messages, Profil (langue, notifications push par appareil, 2FA).
• Les employés ne peuvent pas créer ni modifier des quarts : exécution seulement.

5. Console Super Admin (SaaS)

• /platform : liste des entreprises clientes (statut, nombre d'utilisateurs), création d'entreprise, activation/désactivation, impersonation (« Se connecter en tant que ») avec bandeau de retour.
• /setup-wizard : onboarding guidé d'une nouvelle entreprise — infos entreprise, métiers et taux, lieux, période de paie, règles de photos/pointage, invitation des premiers employés.

6. Design system

• Couleurs : slate foncé #0F172A (navigation, titres), fond clair #F8FAFC, blanc pour les cartes, accents bleu #2563EB, états sémantiques (vert succès, jaune avertissement/démo, rouge alerte).
• Typographies : Outfit (titres, 600-800), IBM Plex Sans (corps), JetBrains Mono (données chiffrées).
• Composants : bibliothèque shadcn/ui (boutons arrondis, dialogues, onglets, tableaux, toasts « sonner »), icônes lucide-react.
• Interactions : splash de chargement animé, transitions douces, états vides illustrés, toasts de confirmation, code splitting (bundle initial ~154 kB gzip).
• Accessibilité/testabilité : chaque élément interactif porte un attribut data-testid.

7. Parcours types à auditer

1. Visiteur → /demo → « Explorer comme Admin » → tableau de bord → Horaire → création de quart (bloquée en démo) → Feuilles de temps → export paie.
2. Visiteur → /demo → « Explorer comme Employé » → Accueil → Mon horaire → Poinçon (GPS) → fin de quart avec photos + questionnaire → Mes heures.
3. Gestionnaire : approbation d'une absence, d'une dépense et d'un remplacement.
4. Super Admin : création d'entreprise → Setup Wizard → impersonation du compte client.

8. Notes techniques

• Frontend React (SPA) — le rendu des pages applicatives nécessite JavaScript ; cette page statique en est le miroir textuel.
• Backend FastAPI + MongoDB, API REST sous /api. Notifications : Resend (courriel), Twilio (SMS), Web Push.
• Isolation stricte des données par entreprise (company_id) ; la démo est une entreprise dédiée en lecture seule.

© Nettoyage Magique Wam Inc. — WamStaff. Démo interactive : magiquewam.online/demo