AppliFrais, comprendre chaque choix

mongodb+srv://gsb:MOTDEPASSE@cluster0.xxxxx.mongodb.net/gsb_applifrais?retryWrites=true&w=majority

mkdir gsb-applifrais && cd gsb-applifrais
mkdir backend frontend

cd backend
npm init -y
npm install express cors helmet dotenv mongoose jsonwebtoken bcryptjs zod \
            express-rate-limit multer tesseract.js @aws-sdk/client-s3 @aws-sdk/s3-request-presigner
npm install --save-dev nodemon

MONGODB_URI=mongodb+srv://gsb:...@cluster0.xxxxx.mongodb.net/gsb_applifrais?retryWrites=true&w=majority
JWT_SECRET=une-longue-chaine-aleatoire-de-32-caracteres-minimum
PORT=3000
CLIENT_URL=http://localhost:5173
S3_REGION=eu-west-3
S3_BUCKET=gsb-applifrais-justificatifs
S3_KEY=ta-cle-d-acces
S3_SECRET=ton-secret

{
  "name": "backend",
  "scripts": {
    "dev":  "nodemon src/server.js",
    "start":"node src/server.js",
    "seed": "node src/seed.js"
  },
  "dependencies":    { "express": "^4.21.2", "mongoose": "^8.8.0" },
  "devDependencies": { "nodemon": "^3.1.7" }
}

npm install --save-dev nodemon
# puis, en dev :
npm run dev      # nodemon surveille src/ et redémarre à chaque sauvegarde

# frontend/.env
VITE_API_URL=http://localhost:3000/api/v1

# backend/.env.example — committé sur Git (valeurs VIDES)
MONGODB_URI=
JWT_SECRET=
PORT=3000
CLIENT_URL=http://localhost:5173
S3_REGION=
S3_BUCKET=
S3_KEY=
S3_SECRET=

const mongoose = require("mongoose");

const typeFraisSchema = new mongoose.Schema({
  code:      { type: String, required: true, unique: true },   // "KM","EF","NUI","REP"
  libelle:   { type: String, required: true },
  montant:   { type: Number, required: true, min: 0 },          // € par unité
  unite:     { type: String },
  actif:     { type: Boolean, default: true },
  dateDebut: { type: Date, default: Date.now },
}, { timestamps: true });

module.exports = mongoose.model("TypeFrais", typeFraisSchema, "typesFrais");

const visiteurSchema = new mongoose.Schema({
  nom:    { type: String, required: true },
  prenom: { type: String, required: true },
  email:  { type: String, required: true, unique: true, lowercase: true, trim: true },
  motDePasseHash: { type: String, required: true },
  role:   { type: String, enum: ["visiteur", "comptable"], default: "visiteur" },
  ville:  { type: String },
}, { timestamps: true });

module.exports = mongoose.model("Visiteur", visiteurSchema);

const bareme = require("../config/bareme");

const ligneForfaitSchema = new mongoose.Schema({
  codeType: { type: String, enum: ["KM", "EF", "NUI", "REP"], required: true },
  quantite: { type: Number, required: true, min: 0 },
}, { _id: false });

const ligneHorsForfaitSchema = new mongoose.Schema({
  date:         { type: Date,   required: true },
  libelle:      { type: String, required: true, maxlength: 100 },
  montant:      { type: Number, required: true, min: 0 },
  justificatif: { type: String },   // clé du reçu dans le stockage S3
});

const evenementSchema = new mongoose.Schema({
  etat: { type: String, enum: ["CR", "CL", "VA", "MP", "RB"], required: true },
  par:  { type: mongoose.Schema.Types.ObjectId, ref: "Visiteur" },
  date: { type: Date, default: Date.now },
}, { _id: false });

const ficheSchema = new mongoose.Schema({
  visiteur: { type: mongoose.Schema.Types.ObjectId, ref: "Visiteur", required: true },
  mois:     { type: String, required: true, match: /^\d{4}-\d{2}$/ },
  etat:     { type: String, enum: ["CR", "CL", "VA", "MP", "RB"], default: "CR" },
  lignesForfait:     [ligneForfaitSchema],
  lignesHorsForfait: [ligneHorsForfaitSchema],
  historiqueEtats:   [evenementSchema],
  schemaVersion:     { type: Number, default: 1 },
}, { timestamps: true, toJSON: { virtuals: true } });

ficheSchema.index({ visiteur: 1, mois: 1 }, { unique: true });
ficheSchema.index({ etat: 1 });

ficheSchema.virtual("total").get(function () {
  const forfait = (this.lignesForfait || []).reduce(
    (s, l) => s + l.quantite * bareme.montant(l.codeType), 0);
  const hors = (this.lignesHorsForfait || []).reduce((s, l) => s + l.montant, 0);
  return Math.round((forfait + hors) * 100) / 100;
});

await db.command({
  collMod: "fiches",
  validator: {
    $jsonSchema: {
      bsonType: "object",
      required: ["visiteur", "mois", "etat"],
      properties: {
        mois: { bsonType: "string", pattern: "^[0-9]{4}-[0-9]{2}$" },
        etat: { enum: ["CR", "CL", "VA", "MP", "RB"] },
      },
    },
  },
  validationLevel: "strict",
});

use gsb_applifrais        // choisir la base
show collections          // visiteurs, fiches, typesFrais

db.fiches.find()                      // toutes les fiches
db.fiches.find({ etat: "CL" })        // seulement les clôturées
db.fiches.findOne({ mois: "2026-05" }) // la première qui correspond

db.fiches.find({ etat: "CR", mois: "2026-06" })            // CR ET juin
db.fiches.find({ $or: [ { etat: "CL" }, { etat: "VA" } ] }) // CL OU VA

db.fiches.find({ etat: "CL" }, { mois: 1, etat: 1, _id: 0 })  // ne garder que mois+etat
db.fiches.find().sort({ mois: -1 }).limit(5)                  // 5 fiches, mois décroissant
db.fiches.countDocuments({ etat: "CR" })                      // combien de fiches créées ?

// modifier l'état d'une fiche
db.fiches.updateOne(
  { _id: ObjectId("665f...") },
  { $set: { etat: "VA" } }
)
// ajouter une ligne dans le tableau embarqué
db.fiches.updateOne(
  { _id: ObjectId("665f...") },
  { $push: { lignesHorsForfait: { date: new Date(), libelle: "Taxi", montant: 18 } } }
)

ObjectId("665fa4c2e3b8a2d91c000042").getTimestamp()
// → ISODate("2026-06-04T...")  ← la date de création, gratuite !

GET  /api/v1/fiches        → "donne-moi la liste des fiches"
POST /api/v1/fiches        → "crée une nouvelle fiche"
GET  /api/v1/fiches/123    → "donne-moi la fiche 123"
PUT  /api/v1/fiches/123/cloturer → "clôture la fiche 123"

const mongoose = require("mongoose");
async function connectDB() {
  await mongoose.connect(process.env.MONGODB_URI);
  console.log("MongoDB connecté");
}
module.exports = connectDB;

// utils/AppError.js — une erreur qui porte son code HTTP
class AppError extends Error {
  constructor(message, statusCode = 500) { super(message); this.statusCode = statusCode; }
}
module.exports = AppError;

// utils/asyncHandler.js — évite d'écrire try/catch partout
module.exports = (fn) => (req, res, next) =>
  Promise.resolve(fn(req, res, next)).catch(next);

const { ZodError } = require("zod");
module.exports = (err, req, res, next) => {
  if (err instanceof ZodError)
    return res.status(400).json({ error: "Données invalides",
      champs: err.issues.map((e) => ({ champ: e.path.join("."), message: e.message })) });
  if (err.code === 11000)
    return res.status(409).json({ error: "Doublon : une fiche existe déjà pour ce mois" });
  res.status(err.statusCode || 500).json({ error: err.message || "Erreur serveur" });
};

// app.js
const express = require("express");
const cors = require("cors");
const helmet = require("helmet");
const app = express();
app.disable("x-powered-by");                               // ne pas annoncer Express
app.use(helmet());                                         // en-têtes de sécurité
app.use(cors({ origin: process.env.CLIENT_URL }));         // seul le front a le droit
app.use(express.json());                                   // lire le corps JSON
app.get("/api/health", (req, res) => res.json({ status: "ok" }));
app.use("/api/v1", require("./routes"));                   // toute l'API versionnée
app.use(require("./middlewares/errorHandler"));            // dernier maillon
module.exports = app;

// server.js
require("dotenv").config();
const app = require("./app");
const connectDB = require("./config/db");
connectDB().then(() => app.listen(process.env.PORT || 3000,
  () => console.log("API prête")));

const hash = await bcrypt.hash("gsb123", 12);
// → "$2a$12$N9qo8uLOickgx2ZMRZoMy..." (impossible à "déchiffrer")

function requireAuth(req, res, next) {
  const token = (req.headers.authorization || "").replace("Bearer ", "");
  if (!token) return next(new AppError("Authentification requise", 401));
  try {
    const payload = jwt.verify(token, process.env.JWT_SECRET);  // vérifie la signature
    req.user = { id: payload.sub, role: payload.role };         // on "sait" qui appelle
    next();                                                     // → le contrôleur
  } catch {
    next(new AppError("Jeton invalide ou expiré", 401));
  }
}

const bcrypt = require("bcryptjs");
const jwt = require("jsonwebtoken");
const { z } = require("zod");
const Visiteur = require("../models/visiteur.model");
const AppError = require("../utils/AppError");

const loginSchema = z.object({
  email:    z.string().email(),
  password: z.string().min(1),
});

exports.login = async (req, res) => {
  const { email, password } = loginSchema.parse(req.body);   // ① valide -> bloque l'injection
  const v = await Visiteur.findOne({ email });               // ② cherche par email
  if (!v || !(await bcrypt.compare(password, v.motDePasseHash)))
    throw new AppError("Identifiants invalides", 401);       // ③ même message dans les 2 cas
  const token = jwt.sign({ sub: v._id, role: v.role },       // ④ jeton signé
    process.env.JWT_SECRET, { expiresIn: "8h" });
  res.json({ token, visiteur: { id: v._id, nom: v.nom, prenom: v.prenom, role: v.role } });
};

exports.moi = async (req, res) => res.json(req.user);        // qui suis-je ? (jeton -> req.user)

const router = require("express").Router();
const rateLimit = require("express-rate-limit");
const ctrl = require("../controllers/auth.controller");
const { requireAuth } = require("../middlewares/auth");

const limiteLogin = rateLimit({ windowMs: 15 * 60 * 1000, max: 5 });  // 5 essais / 15 min

router.post("/login", limiteLogin, ctrl.login);   // public, mais ralenti
router.get("/me", requireAuth, ctrl.moi);         // besoin d'un jeton valide
module.exports = router;

exports.cloturer = asyncHandler(async (req, res) => {
  assertId(req.params.id);                                  // ① l'id a-t-il la bonne forme ?
  const fiche = await Fiche.findById(req.params.id);
  if (!fiche) throw new AppError("Fiche introuvable", 404);
  if (String(fiche.visiteur) !== req.user.id)               // ② est-ce bien SA fiche ?
    throw new AppError("Accès refusé", 403);
  if (fiche.etat !== "CR")                                  // ③ l'état permet-il l'action ?
    throw new AppError("Seule une fiche créée peut être clôturée", 409);
  fiche.etat = "CL";
  fiche.historiqueEtats.push({ etat: "CL", par: req.user.id });
  await fiche.save();
  res.json(fiche);
});

router.use(requireAuth);   // tout /fiches exige d'être connecté

router.post("/",            requireRole("visiteur"),  ctrl.creer);
router.put("/:id/cloturer", requireRole("visiteur"),  ctrl.cloturer);
router.put("/:id/valider",  requireRole("comptable"), ctrl.valider);   // ← réservé

const mongoose = require("mongoose");
const { z } = require("zod");
const Fiche = require("../models/fiche.model");
const asyncHandler = require("../utils/asyncHandler");
const AppError = require("../utils/AppError");

function assertId(id) {
  if (!mongoose.isValidObjectId(id)) throw new AppError("Identifiant invalide", 400);
}

// GET /fiches — visiteur : SES fiches ; comptable : toutes
exports.lister = asyncHandler(async (req, res) => {
  const filtre = req.user.role === "comptable" ? {} : { visiteur: req.user.id };
  const fiches = await Fiche.find(filtre).populate("visiteur", "nom prenom").sort({ mois: -1 });
  res.json(fiches);
});

// GET /fiches/:id — contrôle de propriété (anti-IDOR)
exports.lire = asyncHandler(async (req, res) => {
  assertId(req.params.id);
  const fiche = await Fiche.findById(req.params.id).populate("visiteur", "nom prenom");
  if (!fiche) throw new AppError("Fiche introuvable", 404);
  if (req.user.role !== "comptable" && String(fiche.visiteur._id) !== req.user.id)
    throw new AppError("Accès refusé", 403);
  res.json(fiche);
});

// POST /fiches — le visiteur crée SA fiche du mois
exports.creer = asyncHandler(async (req, res) => {
  const { mois } = z.object({ mois: z.string().regex(/^\d{4}-\d{2}$/) }).parse(req.body);
  const fiche = await Fiche.create({ visiteur: req.user.id, mois, etat: "CR",
    historiqueEtats: [{ etat: "CR", par: req.user.id }] });
  res.status(201).json(fiche);
});

// POST /fiches/:id/lignes — ajouter un frais hors forfait
exports.ajouterLigne = asyncHandler(async (req, res) => {
  assertId(req.params.id);
  const ligne = z.object({ date: z.coerce.date(), libelle: z.string().min(1).max(100),
    montant: z.coerce.number().positive(), justificatif: z.string().optional() }).parse(req.body);
  const fiche = await Fiche.findById(req.params.id);
  if (!fiche) throw new AppError("Fiche introuvable", 404);
  if (String(fiche.visiteur) !== req.user.id) throw new AppError("Accès refusé", 403);
  if (fiche.etat !== "CR") throw new AppError("Fiche non modifiable", 409);
  fiche.lignesHorsForfait.push(ligne);
  await fiche.save();
  res.status(201).json(fiche);
});

const router = require("express").Router();
const ctrl = require("../controllers/fiches.controller");
const { requireAuth, requireRole } = require("../middlewares/auth");

router.use(requireAuth);                                   // tout exige un compte

router.get("/",             ctrl.lister);
router.post("/",            requireRole("visiteur"),  ctrl.creer);
router.get("/:id",          ctrl.lire);
router.post("/:id/lignes",  requireRole("visiteur"),  ctrl.ajouterLigne);
router.put("/:id/cloturer", requireRole("visiteur"),  ctrl.cloturer);
router.put("/:id/valider",  requireRole("comptable"), ctrl.valider);
module.exports = router;

const data = await Fiche.aggregate([
  { $match:  { etat: { $in: ["VA", "MP", "RB"] } } },     // ① ne garder que les fiches validées+
  { $unwind: "$lignesForfait" },                          // ② "déplier" : 1 ligne → 1 document
  { $lookup: {                                            // ③ JOINDRE la collection barème
      from: "typesFrais", localField: "lignesForfait.codeType",
      foreignField: "code", as: "type" } },
  { $unwind: "$type" },
  { $group: {                                             // ④ REGROUPER et calculer
      _id: "$type.libelle",
      total: { $sum: { $multiply: ["$lignesForfait.quantite", "$type.montant"] } } } },
  { $sort: { total: -1 } },                               // ⑤ trier du plus gros au plus petit
]);

db.fiches.find({ etat: "CL" }).explain("executionStats")

# à la racine du dépôt (à côté de backend/)
npm create vite@latest frontend -- --template react
cd frontend
npm install
npm install react-router-dom

# dans frontend/, pendant le développement :
npm run dev        # serveur Vite → http://localhost:5173 (HMR actif)

# pour la mise en ligne (chapitre D) :
npm run build      # fabrique frontend/dist/ (fichiers statiques)
npm run preview    # teste localement le build de prod

// frontend/vite.config.js — rien de spécial, juste le plugin React
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({ plugins: [react()] });

function Bonjour() {
  return <h1>Bonjour, visiteur GSB</h1>;
}

function Total({ montant }) {
  const classe = montant > 100 ? "gros" : "normal";
  return (
    <p className={classe}>
      Total : {montant.toFixed(2)} €
    </p>
  );
}

// le parent décide, l'enfant affiche
function Liste() {
  return (
    <>
      <Total montant={333.5} />
      <Total montant={88} />
    </>
  );
}

import { useState } from "react";

function Compteur() {
  const [n, setN] = useState(0);         // valeur initiale : 0
  return (
    <button onClick={() => setN(n + 1)}>
      Cliqué {n} fois
    </button>
  );
}

// ❌ FAUX — modifier directement : React ne voit rien, l'écran ne bouge pas
fiche.etat = "CL";

// ✅ JUSTE — passer une NOUVELLE valeur au setter
setFiche({ ...fiche, etat: "CL" });

const [email, setEmail] = useState("");
const [erreur, setErreur] = useState(null);
const [enCours, setEnCours] = useState(false);   // bouton désactivé pendant l'appel

import { useEffect, useState } from "react";

useEffect(() => {
  // le code de l'effet
}, []);           //  ← LE TABLEAU DE DÉPENDANCES

function Liste() {
  const [fiches, setFiches] = useState([]);
  const [chargement, setChargement] = useState(true);
  const [erreur, setErreur] = useState(null);

  useEffect(() => {
    FichesAPI.lister()
      .then((data) => setFiches(data))
      .catch((e) => setErreur(e.message))
      .finally(() => setChargement(false));
  }, []);                                   // [] → au montage seulement

  if (chargement) return <p>Chargement…</p>;
  if (erreur)     return <p className="err">{erreur}</p>;
  if (fiches.length === 0) return <p>Aucune fiche pour l'instant.</p>;
  return <ul>{/* …la liste… */}</ul>;
}

useEffect(() => {
  const id = setInterval(() => rafraichir(), 10000);
  return () => clearInterval(id);     // nettoyage au démontage
}, []);

<input
  value={email}
  onChange={(e) => setEmail(e.target.value)}
  placeholder="email" />
<input
  type="password"
  value={mdp}
  onChange={(e) => setMdp(e.target.value)} />

{fiches.map((f) => (
  <li key={f._id}>
    {f.mois} — {f.etat} — {f.total.toFixed(2)} €
  </li>
))}

function Saisie() {
  const [lignes, setLignes] = useState([{ codeType: "KM", quantite: 0 }]);
  const BAREME = { KM: 0.62, EF: 110, NUI: 80, REP: 25 };   // mêmes valeurs que le barème serveur
  const total = lignes.reduce(
    (s, l) => s + l.quantite * BAREME[l.codeType], 0);     // recalculé à chaque rendu

  function changer(i, quantite) {
    setLignes(lignes.map((l, j) => (j === i ? { ...l, quantite } : l)));
  }
  return (
    <>
      {lignes.map((l, i) => (
        <input key={i} type="number" value={l.quantite}
               onChange={(e) => changer(i, Number(e.target.value))} />
      ))}
      <p>Total estimé : {total.toFixed(2)} €</p>
    </>
  );
}

const API_URL = import.meta.env.VITE_API_URL;   // ex. http://localhost:3000/api/v1

// --- session : jeton + profil, rangés dans le navigateur ---
export function getToken()    { return localStorage.getItem("token"); }
export function getVisiteur() { try { return JSON.parse(localStorage.getItem("visiteur")); } catch { return null; } }
export function setSession(token, visiteur) {
  localStorage.setItem("token", token);
  localStorage.setItem("visiteur", JSON.stringify(visiteur));
}
export function logout() { localStorage.clear(); location.href = "/login"; }

// --- appel générique : colle le jeton, centralise les erreurs ---
async function http(path, options = {}) {
  const token = getToken();
  const res = await fetch(`${API_URL}${path}`, {
    headers: { "Content-Type": "application/json",
               ...(token ? { Authorization: `Bearer ${token}` } : {}) },
    ...options,
  });
  if (res.status === 401) { logout(); throw new Error("Session expirée"); }
  if (!res.ok) { const b = await res.json().catch(() => ({})); throw new Error(b.error); }
  return res.json();
}

// --- actions métier (chaque fonction = une route de l'API) ---
export const AuthAPI = {
  login: (email, password) => http("/auth/login", { method: "POST", body: JSON.stringify({ email, password }) }),
};
export const FichesAPI = {
  lister:       ()          => http("/fiches"),
  lire:         (id)        => http(`/fiches/${id}`),
  creer:        (mois)      => http("/fiches", { method: "POST", body: JSON.stringify({ mois }) }),
  ajouterLigne: (id, ligne) => http(`/fiches/${id}/lignes`, { method: "POST", body: JSON.stringify(ligne) }),
  cloturer:     (id)        => http(`/fiches/${id}/cloturer`, { method: "PUT" }),
  valider:      (id)        => http(`/fiches/${id}/valider`, { method: "PUT" }),
};

{fiche.etat === "CR" && role === "visiteur" &&
  <button onClick={() => cloturer(fiche._id)}>Clôturer</button>}
{fiche.etat === "CL" && role === "comptable" &&
  <button onClick={() => valider(fiche._id)}>Valider</button>}

import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import { getToken } from "./services/api";

// garde : pas de jeton → on renvoie au login
function Privee({ children }) {
  return getToken() ? children : <Navigate to="/login" replace />;
}

createRoot(document.getElementById("root")).render(
  <BrowserRouter>
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route element={<Privee><Layout /></Privee>}>
        <Route path="/" element={<Liste />} />
        <Route path="/fiches/:id" element={<Detail />} />
      </Route>
    </Routes>
  </BrowserRouter>
);

import { Outlet, Link } from "react-router-dom";
import { getVisiteur, logout } from "./services/api";

function Layout() {
  const v = getVisiteur();
  return (
    <>
      <header className="barre">
        <Link to="/">GSB AppliFrais</Link>
        <span>{v?.prenom} {v?.nom} — {v?.role}</span>
        <button onClick={logout}>Déconnexion</button>
      </header>
      <main><Outlet /></main>
    </>
  );
}

const [email, setEmail] = useState("bunisset@gsb.fr");
const [password, setPassword] = useState("gsb123");
const [erreur, setErreur] = useState(null);

async function soumettre(e) {
  e.preventDefault();                       // empêche le rechargement de page par défaut
  setErreur(null);
  try {
    const { token, visiteur } = await AuthAPI.login(email, password);
    setSession(token, visiteur);            // range le jeton dans le navigateur
    nav("/");                               // redirige vers « Mes fiches »
  } catch (err) {
    setErreur(err.message);                 // ex. « Identifiants invalides » (401)
  }
}

return (
  <form className="login" onSubmit={soumettre}>
    <h1>GSB AppliFrais</h1>
    <label>Email
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
    </label>
    <label>Mot de passe
      <input type="password" value={password}
             onChange={(e) => setPassword(e.target.value)} />
    </label>
    {erreur && <p className="erreur">{erreur}</p>}
    <button>Se connecter</button>
  </form>
);

const [fiches, setFiches] = useState([]);
const [erreur, setErreur] = useState(null);

function charger() {
  FichesAPI.lister().then(setFiches).catch((e) => setErreur(e.message));
}
useEffect(() => { charger(); }, []);   // [] = « une seule fois, au montage »

const [mois, setMois] = useState("");
async function creer(e) {
  e.preventDefault();
  try { await FichesAPI.creer(mois); setMois(""); charger(); }   // recharge la liste
  catch (err) { setErreur(err.message); }                        // ex. 409 doublon du mois
}

const role = getVisiteur()?.role;
const ETAT = { CR:"Créée", CL:"Clôturée", VA:"Validée", MP:"Mise en paiement", RB:"Remboursée" };

return (
  <div>
    <h1>{role === "comptable" ? "Toutes les fiches" : "Mes fiches"}</h1>
    {erreur && <div className="banniere-erreur">{erreur}</div>}
    {role === "visiteur" && (
      <form onSubmit={creer}>
        <input placeholder="2026-06" value={mois} onChange={(e) => setMois(e.target.value)} />
        <button>Nouvelle fiche</button>
      </form>
    )}
    <table>
      <thead><tr><th>Mois</th>{role === "comptable" && <th>Visiteur</th>}<th>État</th><th>Total</th><th></th></tr></thead>
      <tbody>
        {fiches.map((f) => (
          <tr key={f._id}>
            <td>{f.mois}</td>
            {role === "comptable" && <td>{f.visiteur?.prenom} {f.visiteur?.nom}</td>}
            <td>{ETAT[f.etat]}</td>
            <td>{f.total?.toFixed(2)} €</td>
            <td><Link to={`/fiches/${f._id}`}>Ouvrir</Link></td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);

const { id } = useParams();                 // l'id vient de l'URL /fiches/:id
const [fiche, setFiche] = useState(null);
const role = getVisiteur()?.role;

function charger() { FichesAPI.lire(id).then(setFiche).catch(() => {}); }
useEffect(() => { charger(); }, [id]);      // recharge si l'id change

async function action(promesse) {           // factorise clôturer/valider
  try { const maj = await promesse(); setFiche(maj); }
  catch (err) { alert(err.message); }       // ex. 409 si mauvais état
}

if (!fiche) return <p>Chargement…</p>;       // tant que l'API n'a pas répondu
return (
  <div>
    <h1>Fiche {fiche.mois} — {fiche.visiteur?.prenom} {fiche.visiteur?.nom}</h1>
    <p>État : <b>{fiche.etat}</b> · Total : <b>{fiche.total?.toFixed(2)} €</b></p>

    <h2>Frais forfaitisés</h2>
    <ul>{fiche.lignesForfait.map((l, i) => <li key={i}>{l.codeType} × {l.quantite}</li>)}</ul>

    <h2>Frais hors forfait</h2>
    <ul>{fiche.lignesHorsForfait.map((l) =>
      <li key={l._id}>{new Date(l.date).toLocaleDateString()} — {l.libelle} — {l.montant} €</li>)}
    </ul>

    {fiche.etat === "CR" && role === "visiteur" &&
      <button onClick={() => action(() => FichesAPI.cloturer(fiche._id))}>Clôturer</button>}
    {fiche.etat === "CL" && role === "comptable" &&
      <button onClick={() => action(() => FichesAPI.valider(fiche._id))}>Valider</button>}
  </div>
);

const [ligne, setLigne] = useState({ date: "", libelle: "", montant: "" });

async function ajouter(e) {
  e.preventDefault();
  const maj = await FichesAPI.ajouterLigne(id, ligne);   // POST /fiches/:id/lignes
  setFiche(maj);                                         // le total se met à jour tout seul
  setLigne({ date: "", libelle: "", montant: "" });      // on vide le formulaire
}

catch (err) {
  if (err.message.includes("409")) setInfo("Action impossible dans cet état.");
  else setInfo(err.message);
}

const url = await getSignedUrl(s3, new GetObjectCommand({ Bucket, Key: cle }),
                               { expiresIn: 300 });
// → https://...?X-Amz-Signature=...  (cliquable pendant 5 minutes, puis mort)

// config/s3.js
const { S3Client } = require("@aws-sdk/client-s3");
const s3 = new S3Client({
  region: process.env.S3_REGION,
  endpoint: process.env.S3_ENDPOINT || undefined,   // vide = AWS ; rempli = R2/MinIO
  credentials: { accessKeyId: process.env.S3_KEY, secretAccessKey: process.env.S3_SECRET },
  forcePathStyle: !!process.env.S3_ENDPOINT,
});
module.exports = s3;

// services/stockage.js
const crypto = require("crypto");
const { PutObjectCommand, GetObjectCommand } = require("@aws-sdk/client-s3");
const { getSignedUrl } = require("@aws-sdk/s3-request-presigner");
const s3 = require("../config/s3");

async function televerser(buffer, contentType) {           // dépose, renvoie la CLÉ
  const cle = `justificatifs/${crypto.randomUUID()}.jpg`;
  await s3.send(new PutObjectCommand({ Bucket: process.env.S3_BUCKET, Key: cle,
    Body: buffer, ContentType: contentType }));
  return cle;
}
async function lienTemporaire(cle) {                       // lien signé 5 min
  return getSignedUrl(s3, new GetObjectCommand({ Bucket: process.env.S3_BUCKET, Key: cle }),
    { expiresIn: 300 });
}
module.exports = { televerser, lienTemporaire };

const Tesseract = require("tesseract.js");
const Fiche = require("../models/fiche.model");
const { televerser } = require("../services/stockage");
const asyncHandler = require("../utils/asyncHandler");
const AppError = require("../utils/AppError");

function extraireMontant(t) {
  const m = t.match(/\d+[.,]\d{2}/g);
  return m ? Math.max(...m.map((s) => parseFloat(s.replace(",", ".")))) : null;
}

// POST /fiches/:id/analyse — stocke la photo sur S3, PROPOSE un frais (n'enregistre rien)
exports.analyser = asyncHandler(async (req, res) => {
  if (!req.file) throw new AppError("Aucune image reçue", 400);
  const fiche = await Fiche.findById(req.params.id);
  if (!fiche || String(fiche.visiteur) !== req.user.id) throw new AppError("Accès refusé", 403);
  const cle = await televerser(req.file.buffer, req.file.mimetype);   // 1. sur S3
  const { data } = await Tesseract.recognize(req.file.buffer, "fra"); // 2. OCR
  res.json({ proposition: { montant: extraireMontant(data.text),     // 3. proposer
    justificatif: cle }, confiance: Math.round(data.confidence) });
});

// GET /fiches/:id/justificatif?cle=... → { url } (lien S3 temporaire)
exports.justificatif = asyncHandler(async (req, res) => {
  const fiche = await Fiche.findById(req.params.id);
  if (!fiche) throw new AppError("Fiche introuvable", 404);
  const aLeDroit = String(fiche.visiteur) === req.user.id || req.user.role === "comptable";
  if (!aLeDroit) throw new AppError("Accès refusé", 403);
  if (!fiche.lignesHorsForfait.some((l) => l.justificatif === req.query.cle))
    throw new AppError("Justificatif introuvable", 404);   // la clé doit être SUR cette fiche
  res.json({ url: await lienTemporaire(req.query.cle) });
});

{ "email": { "$gt": "" }, "password": { "$gt": "" } }

npm install -D concurrently
// package.json racine :
"scripts": {
  "dev:api":   "npm --prefix backend run dev",
  "dev:front": "npm --prefix frontend run dev",
  "dev": "concurrently -n api,web -c green,magenta \"npm:dev:api\" \"npm:dev:front\""
}

npm run dev   // API (3000) + front (5173) ensemble ; la base est déjà dans le cloud

# GSB AppliFrais
Gestion des frais des visiteurs médicaux. React · Express · MongoDB Atlas · S3.

## Lancer
1. cp backend/.env.example backend/.env   (URI Atlas + clés S3)
2. npm --prefix backend install && npm --prefix frontend install
3. npm --prefix backend run seed          (jeu de test)
4. npm run dev                            → http://localhost:5173
   Comptes : bunisset@gsb.fr / gsb123 (visiteur) · lacombe@gsb.fr / gsb123 (comptable)

## Architecture
React (5173) → API Express /api/v1 (3000) → MongoDB Atlas + bucket S3

cd gsb-applifrais
git init
git add .
git commit -m "Base du projet : API + front + modèles"

git switch -c feature/ocr        # une branche par fonctionnalité
# …travail…
git add . && git commit -m "feat: pré-remplissage OCR du formulaire"
git switch main && git merge feature/ocr

# réglages de build sur l'hébergeur statique :
# base directory   : frontend
# build command    : npm run build
# publish directory: frontend/dist
# variable d'env   : VITE_API_URL = https://ton-api.onrender.com/api/v1