Mode démo · données fictives

Tous les écrans de l'app BatiSpot

Mockups statiques montrant le rendu de chaque page avec des données fictives. Aucune connexion requise. Idéal pour valider le design avant de toucher à la prod.

← Retour au menu simulateur

Artisan · 1Welcome

Page d'accueil après inscription. L'artisan voit son statut de validation et le CTA pour démarrer son essai 14 jours.

9:41•••
BatiSpot Pro
Bienvenue Pierre !
Votre candidature est validée. Profitez de vos 14 jours d'essai gratuits.
Essai jusqu'au 10 mai 2026
Démarrer mon abonnement 39€/mois
Continuer en mode essai gratuit

Page de bienvenue post-validation

URL : /app/welcome.html
  • Trigger : redirection auto après validation candidature par l'équipe
  • Date essai : calculée +14 jours après l'activation
  • 2 CTAs : abonnement immédiat (Stripe) OU continuer essai
  • Logo : icône maison gradient officielle

Artisan · 2Inscription Pro

Formulaire candidature en 3 étapes : infos entreprise, métiers + zones, documents (KBIS, RC pro, décennale).

9:41•••
Inscription artisan
Étape 2/3 — Métiers & zones
Vos métiers principaux
Plomberie Chauffage Électricité Maçonnerie Carrelage
Départements IDF
75 92 93 94 77
820 547 312 00018
SARL Plomberie 92
Étape suivante →

Formulaire candidature artisan

URL : /app/inscription-pro.html
  • 3 étapes : Infos perso → Métiers/zones → Documents (KBIS, RC pro, décennale)
  • Validation : équipe BatiSpot 24-48h ouvrées
  • Tunnel post-validation : email automatique + redirection Stripe
  • Stripe URL : buy.stripe.com/bJebJ0bmx5XwcHq19h0RG03

Artisan · 2bInscription — Étape 4 / Créer son espace

Nouvelle étape finale de l'inscription : l'artisan crée son compte (Google ou email/password) avant d'être redirigé vers Stripe. Permet de lier l'auth à son dossier pour suivi.

9:41•••
Inscription artisan
Étape 4/4 — Votre espace
Espace artisan
Créez votre espace
Pour suivre vos demandes et l'état de votre dossier
Continuer avec Google
ou
pierre@plomberie92.fr
••••••••
Créer mon espace →
Satisfait ou remboursé 15 jours · Stripe sécurisé

Step 4 / 4 — Création de compte (nouveau)

URL : /app/inscription-pro.html (étape 4)
  • Flux inscription mis à jour : 4 étapes au lieu de 3. Étape 4 ajoutée entre Documents et Stripe.
  • Google OAuth : supabase.auth.signInWithOAuth → redirect vers auth-callback.html?flow=inscription
  • Email/password : supabase.auth.signUp → lien user_id inline, puis Stripe
  • Après auth : auth-callback.html détecte flow=inscription → update artisan_leads.user_id par email → redirect Stripe
  • Email pré-rempli : depuis state.email collecté step 1 (readonly)
Workflow complet
  • Step 1 : Coordonnées → Step 2 : Entreprise → Step 3 : Documents → Step 4 : Compte → Stripe → Dashboard
  • user_id lié : artisan peut se reconnecter via /app/login.html et voir son dossier
  • Dashboard : statut validation (en_attente / documents_valides / actif) + demandes + chantiers

Artisan · 3Connexion

Authentification Google SSO ou email (magic link / mot de passe). Badge "Espace artisan" pour signaler le contexte. Cross-link vers connexion client.

9:41•••
Espace artisan
Continuer avec Google
ou par email
Lien magique
Mot de passe
pierre@plomberie92.fr
Recevoir mon lien

Connexion artisan (Google SSO + magic link / password)

URL : /app/login.html
  • Google SSO : OAuth configuré dans Supabase, 1 clic pour les artisans déjà sur Google Workspace
  • Tabs email : magic link (par défaut, recommandé) ou mot de passe (pour ceux qui préfèrent)
  • Pill "Espace artisan" : signale clairement le contexte, évite les confusions avec login client
  • Backend : Supabase Auth (Google OAuth + OTP magic link + password)
  • Cross-link : footer vers connexion client (les deux logins partagent l'app)

Artisan · 4Dashboard chantiers

Page principale artisan. 3 onglets : Nouveaux chantiers (à accepter), En cours, Terminés. Bottom nav 4 items.

9:41•••
BatiSpot Pro
Nouveaux (3)En cours (2)Terminés
Urgent~ 3 200€
Plomberie cuisine T3
Boulogne 92 · sous 7 jours
Nouveau~ 6 800€
Salle de bain refonte
Paris 11 · sous 1 mois
Chantiers
Devis
Profil
Plus

Dashboard artisan — chantiers

URL : /app/dashboard.html
  • 3 onglets : Nouveaux (à accepter) / En cours / Terminés
  • Photo client : injectée depuis Supabase storage chantiers bucket
  • Click carte → Détail chantier (écran #5)
  • Bottom nav : Chantiers · Devis · Profil · Plus
  • Backend : listNouvellesDemandes() + listChantiers()

Artisan · 5Détail chantier

3 onglets : Infos (client + adresse), Photos (envoyées par client + artisan), Messages (chat artisan ↔ client).

9:41•••
← Détail chantier
Plomberie cuisine T3
Urgent
Boulogne 92 · 70m² · Budget 2-4 000€
Photos (5)Messages (3)Infos client
Photos du client
Évier actuel
+
J'accepte ce chantier

Détail chantier — vue artisan

URL : /app/chantier.html?id=...
  • Photos client réelles : depuis Supabase storage chantiers/<chantier_id>/...
  • 3 onglets : Photos · Messages · Infos client
  • Action principale : "J'accepte ce chantier" → claim atomique via RPC claim_demande
  • Anti-vol : si un autre artisan a déjà accepté → erreur explicite

Artisan · 6Profil artisan

Édition métiers, zones, logo, info entreprise. Visible par les clients dans la fiche artisan.

9:41•••
Mon profil
PL
Pierre L.
SARL Plomberie 92 · Boulogne
12
Chantiers
4.8
Note
98%
Réponse
Mes métiers
PlomberieChauffageSanitaire
Mes zones IDF
759293
Modifier mon profil

Profil artisan

URL : /app/profile.html
  • Stats publiques : nb chantiers, note moyenne, taux de réponse
  • Édition : métiers, zones, logo (max 2 Mo), bio
  • Backend : upsertMyProfile() + uploadLogo() Supabase storage

Artisan · 7Paramètres + Stripe

Gestion abonnement (Stripe Customer Portal), notifications, déconnexion. Bouton "Modifier paiement" redirige vers Stripe.

9:41•••
Paramètres
Abonnement actif
39€/mois HT
Prochaine facture : 15 mai 2026
Modifier moyen de paiement→
Voir mes factures→
Notifications
Nouveaux chantiers
Messages clients
Se déconnecter

Paramètres + abonnement Stripe

URL : /app/settings.html
  • Stripe Customer Portal : redirection sécurisée pour modifier paiement / annuler
  • Notifications : push (PWA) + email (toggle par catégorie)
  • Annulation : 1 clic → Stripe annule fin de période
  • Webhook : stripe-webhook Supabase Edge Function gère les events

Client · 1Demande de devis

Formulaire B2C avec type travaux, budget, délai, photos du chantier. Création anonyme dans la table demandes_devis.

9:41•••
Décrire mon projet
Type de travaux
CuisineSalle de bainÉlecPlomberie
Photos du chantier
+
75011 Paris
5 000 - 15 000 €
Dans le mois
Recevoir mes devis →

Formulaire demande devis (particulier)

URL : /app/demande-devis.html
  • Anonyme : pas besoin de compte pour soumettre (insert avec client_id=null)
  • Claim orphelin : si l'utilisateur s'inscrit dans l'heure → la demande lui est attribuée
  • Photos : upload Supabase storage avec compression auto si >1.5 Mo
  • Email confirm : auto-envoyé via Brevo après submission

Client · 2Connexion client

Login client par magic link. Une fois connecté, voit ses demandes en cours et peut suivre les chantiers acceptés.

9:41•••
Mon espace
Suivre mes travaux
Connectez-vous pour suivre vos demandes et chantiers en cours.
marie.dupont@gmail.com
Recevoir le lien magique
Lien valable 1h, usage unique.
Pas encore de compte ? Faire ma 1ère demande →

Connexion client (magic link)

URL : /app/client-login.html
  • Magic link : même mécanisme que login artisan
  • Post-login : redirection vers client.html (dashboard particulier)
  • Auto-claim : associe les demandes orphelines créées dans l'heure

Client · 3Dashboard client

Vue particulier : ses demandes en cours, chantiers acceptés, devis reçus.

9:41•••
BatiSpot
Bonjour Marie
2 demandes en cours · 1 chantier validé
Tout (3)En coursTerminés
Artisan trouvéil y a 2j
Cuisine T3 Boulogne
Pierre L. (Plomberie 92) · démarrage 5 mai
3 devis reçusil y a 8h
Salle de bain Paris 11
8 700€ - 11 200€ · 3 artisans
En traitementil y a 30 min
Peinture chambre
En recherche d'artisan…
+ Nouvelle demande
Mes demandes
Documents
Aide

Dashboard particulier

URL : /app/client.html
  • Vue agrégée : demandes (en traitement / artisan trouvé / terminé) + chantiers actifs
  • Notification temps réel : nouveau devis reçu, message artisan, photo postée
  • Coffre-fort docs : devis, factures, attestations centralisés
  • Backend : listMyDemandes() + listMyClientChantiers()

Client · 4Suivi chantier

Page publique accessible par token (pas d'auth requise). Photos avancement, messagerie, devis.

9:41•••
Suivi chantier
PL
Pierre L.
Plombier · J+8 sur 14
En cours
Avancement57%
Photos d'avancement
J0 · Démolition
J3 · Plomberie
J6 · Élec
+5
Pierre : Carrelage prévu jeudi 15/05.

Suivi chantier (vue client)

URL : /app/suivi.html?token=...
  • Token public : URL accessible sans auth (pas besoin de compte)
  • Photos artisan : phases (avant / pendant / après) avec captions
  • Messagerie : chat client ↔ artisan via RPC post_client_message
  • Backend : pub_getChantier() + pub_getPhotos() + pub_getMessages()

Client · 5Index PWA

Page d'entrée installable. Smart redirect : si connecté → dashboard, sinon → login. Affiche aussi le CTA installation PWA.

9:41•••
BatiSpot
Vos travaux entre de bonnes mains, depuis votre téléphone.
Je suis client
Je suis artisan
PWA installable · iOS Safari · Android Chrome

Index PWA — entrée installable

URL : /app/index.html
  • Smart redirect : connecté → dashboard, sinon → login
  • PWA : manifest.json + service worker pour installation native
  • 2 entrées : Je suis client / Je suis artisan
  • Détection install : si déjà installée → ouverture standalone