Merge pull request 'Fonctionnalitees/appliquer promo' (#9) from fonctionnalitees/appliquer-promo into main

Reviewed-on: #9

my-library/src/context/LoanContext.js

@@ -8,13 +8,13 @@ export function LoanProvider({ children }) {
     return saved ? JSON.parse(saved) : [];
   });
 
-  function addLoan(book, borrowerPhone, dueDate) {
+  function addLoan(book, borrowerUsername, dueDate) {
     const loan = {
       loanId: crypto.randomUUID(),
       bookId: book.isbn,
       bookTitle: book.title,
       bookAuthor: book.author,
-      borrowerPhone,
+      borrowerUsername,
       dueDate,
       status: 'ACTIVE',
       loanedAt: new Date().toISOString(),

my-library/src/pages/Books.jsx

@@ -29,17 +29,21 @@ export default function Books() {
 
   return (
     <main>
-      <h1>Catalogue</h1>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1rem' }}>
+        <h1 style={{ margin: 0 }}>Catalogue</h1>
         {user?.role === 'admin' && <Link to="/books/new">+ Ajouter un livre</Link>}
-      <ul>
+      </div>
+      <div className="card-grid">
         {books.map((book) => (
-          <li key={book.isbn}>
-            <Link to={`/books/${book.isbn}`}>
-              <strong>{book.title}</strong> - {book.author}
+          <Link to={`/books/${book.isbn}`} key={book.isbn} style={{ textDecoration: 'none', color: 'inherit' }}>
+            <div className="card">
+              <h3>{book.title}</h3>
+              <p>{book.author}</p>
+              <p style={{ marginTop: '0.5rem', fontSize: '0.8rem', color: '#999' }}>ISBN : {book.isbn}</p>
+            </div>
           </Link>
-          </li>
         ))}
-      </ul>
+      </div>
     </main>
   );
 }

my-library/src/pages/Home.jsx

@@ -1,9 +1,28 @@
 import { Link } from 'react-router-dom';
-import '../styles/home.css';
+import { useAuth } from '../context/AuthContext';
 
 export default function Home() {
+  const { user } = useAuth();
+
   return (
     <main>
+      <h1>Bienvenue sur Biblio</h1>
+      <p>Gérez vos livres, réservations et abonnements depuis une seule interface.</p>
+
+      <section>
+        <h2>Accès rapide</h2>
+        <ul>
+          <li><Link to="/books">📚 Parcourir le catalogue</Link></li>
+          {user?.role === 'user' && <li><Link to="/reservations">🔖 Mes réservations</Link></li>}
+          {user?.role === 'user' && <li><Link to="/loans">📖 Mes prêts</Link></li>}
+          {user?.role === 'user' && <li><Link to="/subscription">⭐ Mon abonnement</Link></li>}
+          {user && <li><Link to="/orders">🛒 Passer une commande</Link></li>}
+          {user && <li><Link to="/group-orders">👥 Commandes groupées</Link></li>}
+          {user?.role === 'admin' && <li><Link to="/customers">👤 Gestion des clients</Link></li>}
+          {user?.role === 'admin' && <li><Link to="/returns">↩️ Retours de livres</Link></li>}
+          {!user && <li><Link to="/login">Connexion</Link></li>}
+        </ul>
+      </section>
     </main>
   );
 }

my-library/src/pages/Loans.jsx

@@ -20,7 +20,7 @@ export default function Loans() {
               <li key={l.loanId}>
                 <strong>{l.bookTitle}</strong> — {l.bookAuthor}
                 <br />
-                Prêté à : {l.borrowerPhone}
+                Emprunteur : {l.borrowerUsername}
                 <br />
                 À rendre avant le : {new Date(l.dueDate).toLocaleDateString('fr-FR')}
                 <br />
@@ -41,7 +41,7 @@ export default function Loans() {
               <li key={l.loanId}>
                 <strong>{l.bookTitle}</strong> — {l.bookAuthor}
                 <br />
-                Prêté à : {l.borrowerPhone}
+                Emprunteur : {l.borrowerUsername}
                 <br />
                 <small>Rendu ✓</small>
               </li>

my-library/src/pages/Orders.jsx

@@ -1,11 +1,13 @@
 import { useState } from 'react';
 import { createOrder } from '../api/orders';
+import { getBookById } from '../api/books';
 
 export default function Orders() {
   const [customerId, setCustomerId] = useState('');
   const [paymentMethod, setPaymentMethod] = useState('CREDIT_CARD');
   const [address, setAddress] = useState({ street: '', city: '', postalCode: '', country: '' });
   const [lines, setLines] = useState([{ bookId: '', quantity: 1 }]);
+  const [promoCode, setPromoCode] = useState('');
   const [message, setMessage] = useState(null);
   const [submitting, setSubmitting] = useState(false);
 
@@ -21,6 +23,10 @@ export default function Orders() {
     setLines((prev) => [...prev, { bookId: '', quantity: 1 }]);
   }
   function removeLine(index) {
+    const [promoValid, setPromoValid] = useState(true);
+    const [estimate, setEstimate] = useState(null);
+    const [estimating, setEstimating] = useState(false);
+    const [estimateError, setEstimateError] = useState(null);
     setLines((prev) => prev.filter((_, i) => i !== index));
   }
 
@@ -37,6 +43,7 @@ export default function Orders() {
         bookId: Number(line.bookId),
         quantity: Number(line.quantity),
       })),
+      ...(promoCode ? { promoCode } : {}),
     };
 
     createOrder(payload)
@@ -63,6 +70,51 @@ export default function Orders() {
               onChange={(e) => handleLineChange(index, 'bookId', e.target.value)} required />
             <input type="number" placeholder="Quantité" value={line.quantity}
               onChange={(e) => handleLineChange(index, 'quantity', e.target.value)} required />
+    function validatePromo(code) {
+      if (!code) return true;
+      // simple format: PROMO10 => 10% , PROMO5 => 5%
+      return /^PROMO\d{1,2}$/.test(code);
+    }
+
+    async function handleEstimate() {
+      setEstimating(true);
+      setEstimate(null);
+      setEstimateError(null);
+      try {
+        const ids = lines.map((l) => Number(l.bookId)).filter((n) => !Number.isNaN(n) && n > 0);
+        if (ids.length === 0) {
+          setEstimateError('Aucun ISBN valide');
+          return;
+        }
+        const unique = Array.from(new Set(ids));
+        const responses = await Promise.all(unique.map((id) => getBookById(id).then((r) => r.data)));
+        const priceMap = new Map();
+        unique.forEach((id, idx) => priceMap.set(id, responses[idx].prix ?? responses[idx].price ?? 0));
+
+        let total = 0;
+        for (const l of lines) {
+          const id = Number(l.bookId);
+          const qty = Number(l.quantity) || 0;
+          total += (priceMap.get(id) || 0) * qty;
+        }
+
+        let discounted = total;
+        if (promoCode) {
+          const m = promoCode.match(/^PROMO(\d{1,2})$/);
+          if (m) {
+            const pct = Math.max(0, Math.min(100, Number(m[1])));
+            discounted = total * (1 - pct / 100);
+          }
+        }
+
+        setEstimate({ total, discounted });
+      } catch (err) {
+        setEstimateError('Erreur lors de l\'estimation');
+        console.error(err);
+      } finally {
+        setEstimating(false);
+      }
+    }
             {lines.length > 1 && (
               <button type="button" onClick={() => removeLine(index)}>Retirer</button>
             )}
@@ -77,10 +129,27 @@ export default function Orders() {
         <input name="country" placeholder="Pays" value={address.country} onChange={handleAddressChange} required />
 
         <h2>Paiement</h2>
+        <label>Code promo
+          <input value={promoCode} onChange={(e) => { setPromoCode(e.target.value); setPromoValid(validatePromo(e.target.value)); }} placeholder="Code promo (optionnel)" />
+        </label>
+        {!promoValid && <div style={{ color: 'red' }}>Format de code promo invalide (ex: PROMO10)</div>}
         <select value={paymentMethod} onChange={(e) => setPaymentMethod(e.target.value)}>
           <option value="CREDIT_CARD">Carte bancaire</option>
         </select>
 
+        <div style={{ marginTop: 8 }}>
+          <button type="button" onClick={handleEstimate} disabled={estimating}>
+            {estimating ? 'Estimation…' : 'Estimer le total'}
+          </button>
+          {estimateError && <div style={{ color: 'red' }}>{estimateError}</div>}
+          {estimate && (
+            <div>
+              <div>Total estimé : {estimate.total.toFixed(2)} €</div>
+              <div>Après promo : {estimate.discounted.toFixed(2)} €</div>
+            </div>
+          )}
+        </div>
+
         <button type="submit" disabled={submitting}>
           {submitting ? 'Envoi…' : 'Valider la commande'}
         </button>

my-library/src/pages/Profile.jsx

@@ -1,3 +1,45 @@
+import { useAuth } from '../context/AuthContext';
+import { useReservations } from '../context/ReservationContext';
+import { useLoans } from '../context/LoanContext';
+import { useSubscription } from '../context/SubscriptionContext';
+
 export default function Profile() {
-  return <main><h1>Mon compte</h1></main>;
+  const { user } = useAuth();
+  const { reservations } = useReservations();
+  const { loans } = useLoans();
+  const { subscription } = useSubscription();
+
+  const activeReservations = reservations.filter(r => r.status !== 'CANCELLED');
+  const activeLoans = loans.filter(l => l.status === 'ACTIVE');
+
+  return (
+    <main>
+      <h1>Mon compte</h1>
+
+      <section>
+        <h2>Informations</h2>
+        <p><strong>Nom d'utilisateur :</strong> {user?.username}</p>
+        <p><strong>Rôle :</strong> {user?.role === 'admin' ? 'Administrateur' : 'Utilisateur'}</p>
+      </section>
+
+      {user?.role === 'user' && (
+        <>
+          <section>
+            <h2>Abonnement</h2>
+            {subscription ? (
+              <p><strong>Plan actif :</strong> {subscription.planName}</p>
+            ) : (
+              <p>Aucun abonnement actif.</p>
+            )}
+          </section>
+
+          <section>
+            <h2>Activité</h2>
+            <p>Réservations en cours : <strong>{activeReservations.length}</strong></p>
+            <p>Prêts en cours : <strong>{activeLoans.length}</strong></p>
+          </section>
+        </>
+      )}
+    </main>
+  );
 }

my-library/src/pages/Reservations.jsx

@@ -21,7 +21,7 @@ export default function Reservations() {
     const form = loanForms[reservation.reservationId] || {};
     addLoan(
       { isbn: reservation.bookId, title: reservation.bookTitle, author: reservation.bookAuthor },
-      form.borrowerPhone,
+      form.borrowerUsername,
       form.dueDate
     );
     setLoanStatuses(prev => ({ ...prev, [reservation.reservationId]: 'Prêt enregistré avec succès !' }));
@@ -58,12 +58,12 @@ export default function Reservations() {
               <summary>Prêter ce livre à un autre lecteur</summary>
               <form onSubmit={e => handleLoan(e, r)}>
                 <label>
-                  Téléphone de l'emprunteur :
+                  Identifiant de l'emprunteur :
                   <input
-                    type="tel"
-                    value={loanForms[r.reservationId]?.borrowerPhone || ''}
-                    onChange={e => handleLoanChange(r.reservationId, 'borrowerPhone', e.target.value)}
-                    placeholder="0612345678"
+                    type="text"
+                    value={loanForms[r.reservationId]?.borrowerUsername || ''}
+                    onChange={e => handleLoanChange(r.reservationId, 'borrowerUsername', e.target.value)}
+                    placeholder="ex: alice"
                     required
                   />
                 </label>

my-library/src/styles/global.css

@@ -0,0 +1,196 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: system-ui, sans-serif;
+  font-size: 15px;
+  line-height: 1.6;
+  color: #222;
+  background: #f7f7f7;
+}
+
+main {
+  max-width: 860px;
+  margin: 2rem auto;
+  padding: 0 1.25rem;
+}
+
+h1 {
+  font-size: 1.6rem;
+  font-weight: 600;
+  margin-bottom: 1.25rem;
+  color: #111;
+}
+
+h2 {
+  font-size: 1.15rem;
+  font-weight: 600;
+  margin: 1.5rem 0 0.75rem;
+  color: #333;
+}
+
+p {
+  margin-bottom: 0.75rem;
+}
+
+a {
+  color: #2563eb;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+li {
+  padding: 0.75rem 0;
+  border-bottom: 1px solid #e5e5e5;
+  line-height: 1.7;
+}
+
+li:last-child {
+  border-bottom: none;
+}
+
+/* Forms */
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  max-width: 480px;
+}
+
+label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-size: 0.9rem;
+  color: #444;
+}
+
+input, select, textarea {
+  padding: 0.45rem 0.65rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 0.95rem;
+  font-family: inherit;
+  background: #fff;
+  width: 100%;
+}
+
+input:focus, select:focus, textarea:focus {
+  outline: none;
+  border-color: #2563eb;
+}
+
+/* Buttons */
+
+button {
+  display: inline-block;
+  padding: 0.45rem 1rem;
+  font-size: 0.9rem;
+  font-family: inherit;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background: #fff;
+  cursor: pointer;
+  color: #222;
+}
+
+button:hover {
+  background: #f0f0f0;
+}
+
+button[type="submit"],
+button.primary {
+  background: #2563eb;
+  color: #fff;
+  border-color: #2563eb;
+}
+
+button[type="submit"]:hover,
+button.primary:hover {
+  background: #1d4ed8;
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Sections */
+
+section {
+  margin-bottom: 2rem;
+}
+
+/* Details / summary */
+
+details {
+  margin-top: 0.5rem;
+}
+
+summary {
+  cursor: pointer;
+  color: #2563eb;
+  font-size: 0.9rem;
+}
+
+summary:hover {
+  text-decoration: underline;
+}
+
+details form {
+  margin-top: 0.75rem;
+  padding: 0.75rem;
+  background: #fff;
+  border: 1px solid #e5e5e5;
+  border-radius: 4px;
+}
+
+/* Status messages */
+
+.msg-success {
+  color: #15803d;
+}
+
+.msg-error {
+  color: #dc2626;
+}
+
+/* Cards (book list etc.) */
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.card {
+  background: #fff;
+  border: 1px solid #e5e5e5;
+  border-radius: 6px;
+  padding: 1rem;
+}
+
+.card h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+}
+
+.card p {
+  font-size: 0.875rem;
+  color: #555;
+  margin: 0;
+}

my-library/src/styles/navbar.css

@@ -0,0 +1,56 @@
+.navbar {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 0 1.25rem;
+  height: 52px;
+  background: #fff;
+  border-bottom: 1px solid #e5e5e5;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.navbar__logo {
+  font-weight: 700;
+  font-size: 1.1rem;
+  color: #111;
+  text-decoration: none;
+  margin-right: 0.5rem;
+}
+
+.navbar__links {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  list-style: none;
+  flex: 1;
+  flex-wrap: wrap;
+}
+
+.navbar__links a {
+  padding: 0.3rem 0.6rem;
+  font-size: 0.875rem;
+  color: #444;
+  text-decoration: none;
+  border-radius: 4px;
+}
+
+.navbar__links a:hover {
+  background: #f0f0f0;
+  color: #111;
+}
+
+.navbar__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-size: 0.875rem;
+  color: #555;
+  white-space: nowrap;
+}
+
+.navbar__actions button {
+  padding: 0.3rem 0.75rem;
+  font-size: 0.85rem;
+}