Architecture Frontend

Présentation

Le frontend de BTP Chantier Pro est une Single Page Application (SPA) développée avec React 18 et Vite. Tous les composants sont en JavaScript sans TypeScript.

Structure des dossiers

btp-chantier-pro-react/
src/
  components/
    layout/          Sidebar, Header
    pages/           Pages principales par module
      Dashboard/     Tableau de bord du chantier
      DashboardGlobal/ Vue globale multi-chantiers
      GestionProjet/   Gestion de projet
      AvantProjet/     Études de faisabilité
      Stock/           Stock et commandes
    ui/              Composants d'interface réutilisables
  hooks/             Hooks React personnalisés
  services/          Connexion Supabase
  App.jsx            Composant racine et routage
  main.jsx           Point d'entrée
public/              Fichiers statiques
index.html           Page HTML principale

Routage

Le routage est géré manuellement via un état React dans App.jsx. Il n'y a pas de bibliothèque de routage externe. La navigation entre les pages se fait via le menu latéral qui met à jour l'état de la page active.

const [page, setPage] = useState('dashboard')

Chaque valeur de page correspond à un composant affiché dans la zone de contenu principale.

Hooks personnalisés

Hook	Rôle
useApp	Accès au chantier actif et à l'utilisateur connecté
useFmt	Formatage des montants selon la devise sélectionnée

Connexion Supabase

La connexion à Supabase est initialisée dans src/services/supabase.js :

import { createClient } from '@supabase/supabase-js'

export const db = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_ANON_KEY
)

Le client db est importé dans tous les composants qui accèdent à la base de données.

Gestion de l'état

L'état est géré localement dans chaque composant avec les hooks React useState et useEffect. Il n'y a pas de gestionnaire d'état global comme Redux ou Zustand. Les données partagées entre composants sont passées via les props.

Conventions de développement

• Un fichier par composant
• Noms de fichiers explicites : EstimateurPieces, GestionProjetListe
• Pas d'emojis dans l'interface
• Icônes SVG uniquement
• Pas de bibliothèque de composants externe
• Styles via variables CSS personnalisées
• Commentaires obligatoires en haut de chaque fichier

Déploiement

La procédure de déploiement du frontend est la suivante :

cd ~/btp-react
npm run build
rm -rf /var/www/btp-chantier-pro/public/assets/
cp -r dist/* /var/www/btp-chantier-pro/public/
git add .
git commit -m "description du changement"
git push origin main

Variables d'environnement

Les variables d'environnement sont définies dans le fichier .env à la racine du projet :

VITE_SUPABASE_URL=https://supabase.waali.at
VITE_SUPABASE_ANON_KEY=votre_cle_anonyme
VITE_API_URL=https://api.waali.at